この記事では「デザインカンプからコーディングしてもらったものを、オリジナルポートフォリオにしていく方法」をお伝えします。
はじめに
大変ですが、サイト制作に重要な力が身につきます
オリジナルポートフォリオサイトを作るのは、直案件のWeb制作と似た工程を踏みます。
なので、「デザインカンプ通りにコーディングする」とは別の難しさがあるかもしれません。
しかし、この力は今後Web制作者としてのキャリアを歩む上でとても大切な力になりますので、ぜひここで体得して行ってください。
前提の解説
ここでいうオリジナルポートフォリオというのは、以下の5つの要素を既存デザインから変えたものを指します。
- ロゴ
- カラー
- テキスト
- 画像
- ファーストビューの構成（任意）
理由の解説
なぜこの5点が大事なのかと言うと、人は画像や色、ファーストビューからかなり多くの情報を受け取っており、似た色や画像、配置だと
何か前見たのと似たサイトだな
となりやすいためです。
逆にこの要素が異なれば、ポートフォリオが被っていると思われる率もかなり低くなります。
中級課題の例
中級のユアコーディングはフラットイラストのサイトなので、Webサービス系などが作りやすいかと思います。
蓼科ごとう農園は柔らかいデザインなので、そのまま農園や林業関連で横展開したほうがやりやすいかもしれません。
中級ユアコーディング課題
デザイン変更前
デザイン変更後
中級農園サイト課題
変更前
変更後
テキストロゴは蓼科ごとう農園のままですが、変えられる人は変えた方がいいと思います。
中級Ex課題の例
基本的に和風サイトの体を取っているので、和風ものである温泉旅館などを題材にすると若入りやすいかもしれないです。
中級Ex和風デザイン課題
デザイン変更前
デザイン変更例
旅館サイトは癖が強いので、和風な題材が良いかと。
中級Ex採用サイト課題
デザイン変更前
デザイン変更後（受講生例）
手書き文字を作るのが結構難しいので、そのまま使っちゃいましたが、作れる人はFigmaやイラレで手書き文字を作ってsvgにしたものを使うといいかなと思います↓↓↓↓
デザインでは手書き文字に「ふい字」というフォントをSVGにして使用しています。
こたらをFigmaで使用可能にして、フォントで「HuiFont」を選ぶと適用されます。
手書き文字をデザインのように、若干斜めに回転させるといい感じになります。
エクスポートからSVG形式でダウンロードできます。
手書き文字は見やすさの為に、若干の影をつけてもいいと思います。
上級課題の例
上級課題は、比較的様々なサービスサイトに改造しやすいかと思います。
上級課題
デザイン変更前
デザイン変更例（受講生例）
上級サイトは癖が弱いので、題材はなんでも良いかと。
ファーストビューの要素の並びを変えるだけでも、結構印象が変わるのが分かるかと思います。
いや、まだちょっと似てますねぇ,,,
もう少し変えちゃっても大丈夫ですよ！
「全く別のレイアウトのサイト」にならなければ、レビューは普通にします。
オリジナルは表示確認レビューを一回のみ行います
基本的には「デザインカンプからのコーディングが終わりレビューを受け、ある程度整っているはずの作品」をオリジナルポートフォリオ化してもらいます。
なので、オリジナルにしてから「一回のみ」無料でレビューを行います。
- デザインカンプ通りにコーディングする（最大二回のレビュー）
- オリジナルポートフォリオにしてから、レビュー（一回のみ）
基本的には表示が崩れていないかを確認するが、配色や画像配置にアドバンスがあれば、それもレビューする形を取ります。
もし、絶望的にダサいデザインになっても、一回しか見てくれないの？ちょっと不安…
あまり大きな声では言えませんが、その場合は個別にお声がけして、特別に二回目のレビューも無料で行いますので、安心してください。
よって、1作品につきミニマム2回、修正点があれば3~4回のレビューを全員受けることになります。
ここからはオリジナルポートフォリオ作成の流れを具体的に解説していきます。
- どういうサイトにするか決める
- 類似サイトの収集
- 配色（ダサくなりやすいので最重要！！！）
- ロゴを作成する
- 画像を差し替える
- テキストを差し替え
❶どういうサイトにするか決める
オリジナルポートフォリオサイトだけでなく、Webサイトを制作するのに一番大事なのが
- 誰向けに
- どんな課題を解決するサイトなのか
これを明確にすることです。
以下の具体例は、
- 高齢者の介護を抱えた層に向けて
- 無料相談ができたり、おすすめの施設をニーズに合わせて提案してくれるサービス
これをイメージしています。
以下の中級課題の例は、コーディング代行サービスで、
- コーダーの人手が足りない企業に向けて
- コーダーを派遣して解決するサービス
これをイメージしています。
❶課題ベースで決める
まずは「自分が課題だと思っていること、困っていそうな人や団体を助けるサイト」を想像するのがおすすめです。
- 特定の業界で働いており、強い課題感がある
- こういったサービス、施設、企業があればいいのになというものを思い浮かべる
- それが、どういった特徴、強みがあり、何の課題を解決するのか言語化する
あまりニッチすぎると、この後の画像探しで詰むので、ざっくりでいいです。
これをこなせると、直案件のWeb制作でも活きてきます。
❷元デザインの題材の横展開で考える
中級の農園サイトや中級Exの和風サイトはデザインを変更しにくいかもしれません。
そんなときは、「似たジャンルで架空の店舗、サービスを考える」と良いです。
- 和風サイトの題材に、「一日城主体験」を選ぶ
- 一日城主体験類似サービスを調べ、どういった要素があるのか調査
- 題材に沿った画像やテキスト、ロゴ、配色を決定していく
言うは易しだけど、具体例が欲しいですよ、思い浮かばない…
では、具体例をいくつか紹介します！！
題材決めの具体例5つ紹介
家事代行サービスの例
米農家の例
別に鰻屋のサイトだっていいのですよ、そういうサイト制作の依頼を請けたと仮定すれば。実際に制作会社案件でもあるので。
鰻屋の例
建設会社の採用サイト
音楽教室
自分がその分野の知識があれば、半オリジナル化しやすいと思います！！
自分がそのビジネスオーナーから依頼を請けたと仮定すれば、基本どんなサイトでもOK
❷類似サイトの収集
自分が決めたジャンルのサイトのWebデザインの概観を掴みます。
類似サイトは以下のようなWebデザインまとめサイトを見ると探しやすいです。
また、Partsも使い勝手が良いです。セクション毎にデザインを見ることができます。
- 各サイトどんな課題を解説しているのか
- どんな配色になっているのか
- 使用している画像はどんなものか
参考になるサイトがあれば、いくつかブックマークしておくといいです。
❸配色(まずはファーストビューのみ)
配色がダントツで一番大事です！！
ダサくなるのは、100%配色ミスです。
基本的にデザインカンプで使用している
- ベースカラー（70％）：背景など
- メインカラー（25％）：ロゴなど
- アクセントカラー（5％）：重要なボタンなど
この色をそのまま変えていただくと、色が混在しなくていいかと思います。
上の画像では、ベースカラー：白、メインカラー：深緑、アクセントカラー：黄色にしています。
ツールを使って配色は決めたほうが良い
配色次第でWebサイトはめちゃくちゃダサくなります…
よって、ツールで相性の良い色を確認したほうがいいです。
手段❶：1種類の色の濃淡を使い分ける（事故率：低）
実は色数は一種類で良かったりもします。
こちらの方がダサくなりにくいので、事故率が低いです。
「Material UIのcolor」はとてもおすすめです。
ここでカラーを選び、基本この色しか使いませんが、背景色などは白に近いほうが、事故率は減るかなと思います。
テキストが黒なら背景色は白っぽく、テキストが白色なら背景色は暗めがいいですよね。
手段❷：2種類の色を使い分ける（事故率：中）
こちらは真逆の色を使用して、アクセントカラーなどに用いるので、サイトと合わないとダサくなりやすいので、ご注意ください。
配色難民と化した新人デザイナーに捧ぐ。本当に役立つ配色サイトまとめ
https://liginc.co.jp/399974
配色事例
ボタン
ボタンが２つ並ぶ場合は、似た系統の色が良いです。暗め、明るめは合わせたいですね。
もしくは、片方枠のみも使いやすいです。
背景の上のテキスト
薄い背景の上には暗めのテキストが無難ですが、背景は思ってるより白に近いほうが安定します。
背景色が濃い場合は、テキストは白一択です。
また、ファーストビュー画像上のテキストが見にくい場合は、画像自体に半透明の黒いレイヤーを乗せるのも有効です。白いテキストが見やすくなります。
❹ロゴを作成する
ロゴはサービス全体の雰囲気や配色を決定するので、大事です。
ロゴを一括で作成する場合
まずはcanvaにログインし、「看護 ロゴ」と検索。
その後、使えそうなものを検索結果の中から探します。
今回はこちらのロゴを選択。
ここのテキストは、別途自分のサイト名に変えるといいかなと思います。
ロゴの色はサイトを代表するので、サイトのメインカラー、アクセントカラーなどと統一するのが良いとされます。
各自色を調整するようにお願いします。
WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」
https://www.m-hand.co.jp/design/4002/
ロゴの周りの白い余白が余計なので、ロゴを枠いっぱいに拡大します。
そしたら、「共有」から書き出しを行いましょう。
次に、remove bgで背景を透過していきます。
https://www.remove.bg/ja/upload
画像をアップロードしてください。
ダウンロードしましょう。
あとは、これをサイトに適用してください。
ちなみに、他にも独自のロゴが作れるロゴメーカー「Hatchful」などもありますので、色々なツールを試してみてください。
ただcanvaは編集の幅が大きいので、どんなサイトでも使いやすいと思います。
テキストとアイコンでロゴを作る場合
アイコンを素材サイトでダウンロードします。
試しに、和風と検索すれば、たくさんでてきます。
基本的にpngかsvgでダウンロードします。アイコンの色も選べます。
あとは、アイコンとテキストを並べると、ロゴの完成です。
❺画像を差し替える(まずはファーストビューのみ)
画像は必ず商用利用可能なものを利用してください。
サイトの画像を無断ダウンロードして使用しないようにご注意ください。
また、各画像プラットフォームで無料会員だとDL数が限られる場合があるので、色々探してみてください。
私はWeb制作直案件の素材用に「写真素材ダウンロードサイト【写真AC】
」のプレミアム会員にずっとなっており、おすすめです。
題材が日本なら、日本の写真を使うと良い
当たり前ですが、題材が日本なら日本らしい写真画像を使うと良いです。
特に人物画像は日本人の写真画像を使うと練習作品感がなくなっていいです。
例えば「写真素材ダウンロードサイト【写真AC】」なんかは、無料だとDL数が限られますが、品質が良いです。
日本人向けの使いやすい写真が多いのと、画像はオリジナリティが高いとSEO評価も上がりやすいので、制作案件以外にブログにもよく使用しています。
試しに、「福祉」と入力したら、良さげな画像がたくさんヒットしました。
他には、「イラストAC」もあり、こちらはイラストになります。
イラストもサイトのイメージをガラッと変えてくれますね！
写真では、他にも、Adobe Stockやおーだんもいいですね。
中級課題はフラットイラストなので、以下の「Streamline」の「mirano」がおすすめ。
一日のDL数が決まっているので、ご注意ください。
このあたりの素材集は以下の記事にもまとめていますので、是非参考にしてください。
❻テキストを差し替える(まずはファーストビューのみ)
見出しはサービスを端的に表した文章がいいですね。
また、一部長いテキストはchat gptを利用するといいかなと思います。
中級農園課題の場合は、長いのでchat gptに文章を生成してもらっていました。
AIが出力した文章をそのまま載せると、流石に機械的に感じるので、ところどころ直してあげてください。
❼他のセクションと下層ページも作っていく
ファーストビューを作り込んだら、あとは順に下のセクションを作っていけばいいです。
最初のファーストビューでサイトの全体の方向性を固めてから、下層を作るのが一番楽なので。
オリジナル化のチェックポイントと注意点解説！！
❶テキストの視認性が下がっていないか
例えば、以下のボタンを見てどう思いますか？
うわめっちゃ見にくい…チカチカする…
明度の高い色を使うとテキストが見にくくなることがあるので、気をつけましょう。
❷反対の色を無理に使ってダサくなる例
例えば、「Color Hunt」に従って以下の配色を採用するも…
以下です。なんかダサい…
「MUI」で同系色のカラーの濃淡を活用したほうが、事故率は下がります。
これは100点を取りに行くのではなく、60点以上を確実に取りに行くスタイルで、「THE 無難」といったシンプルなものになります。
一番サイトをダサくしてしまう要因は、間違いなく「配色」です。
良い画像も配色が全て潰すのと、自分の題材と配色が合っているかも検討する必要がありますね。
❸オリジナルにしたことで、表示崩れが発現
当然ですが、「一度レビューを受けて問題なくなった状態で、そこからオリジナル化を行う」ので、オリジナル化によって、新たに表示が崩れてしまう可能性があります。
- テキストの改行位置が不自然になる（特にスマホ時）
- 画像の縦横比がレスポンシブで崩れる
- 背景や色の変更でテキストの視認性が悪くなる
これらに気をつけてセルフチェックを行ってください。
提出者が増え次第、これからセルフチェックポイントなども整備していきます。
❹titleとdescriptionを忘れないこと
作品のリアル感を醸し出すために、適切なtitleとdescriptionが設定されていることが重要です。
必ず設定しておきましょう。
過去の事例を紹介
優れたオリジナル化の事例が出れば、特設ページに順次掲載していく予定です。
ひとまず先駆者の例がまだまだ少ないので、初期はある程度のクオリティがあれば、積極的に掲載を行っていきます。
デザインカンプからのコーディング課題のオリジナルポートフォリオ化事例集
