オリジナルポートフォリオへの差し替え方法

オリジナルポートフォリオの作り方

パスワード認証をかけていませんが、教材購入者様が見ることを想定しているページなので、基本的に外部へのURL共有は控えていただけますと幸いです🙇‍♂️

この記事では「デザインカンプからコーディングしてもらったものを、オリジナルポートフォリオにしていく方法」をお伝えします。

はじめに

大変ですが、サイト制作に重要な力が身につきます

オリジナルポートフォリオサイトを作るのは、直案件のWeb制作と似た工程を踏みます。

なので、「デザインカンプ通りにコーディングする」とは別の難しさがあるかもしれません。

しかし、この力は今後Web制作者としてのキャリアを歩む上でとても大切な力になりますので、ぜひここで体得して行ってください。

前提の解説

ここでいうオリジナルポートフォリオというのは、以下の5つの要素を既存デザインから変えたものを指します。

変える5つの要素
  1. ロゴ
  2. カラー
  3. テキスト
  4. 画像
  5. ファーストビューの構成(任意)

理由の解説

なぜこの5点が大事なのかと言うと、人は画像や色、ファーストビューからかなり多くの情報を受け取っており、似た色や画像、配置だと

まさひろくん

何か前見たのと似たサイトだな

となりやすいためです。

しょーご

逆にこの要素が異なれば、ポートフォリオが被っていると思われる率もかなり低くなります。

中級課題の例

中級のユアコーディングはフラットイラストのサイトなので、Webサービス系などが作りやすいかと思います。

蓼科ごとう農園は柔らかいデザインなので、そのまま農園や林業関連で横展開したほうがやりやすいかもしれません。

中級ユアコーディング課題

デザイン変更前

デザイン変更後

しょーご

フラットイラストは「milano」を用います。

また、ボタンに少しアイコンを追加してみました。形状を変えてもいいですよ。

中級農園サイト課題

変更前

変更後

しょーご

テキストロゴは蓼科ごとう農園のままですが、変えられる人は変えた方がいいと思います。

中級Ex課題の例

基本的に和風サイトの体を取っているので、和風ものである温泉旅館などを題材にすると若入りやすいかもしれないです。

中級Ex和風デザイン課題

デザイン変更前

デザイン変更例

しょーご

旅館サイトは癖が強いので、和風な題材が良いかと。

中級Ex採用サイト課題

デザイン変更前

デザイン変更後(受講生例)

オリジナルポートフォリオ
しょーご

手書き文字を作るのが結構難しいので、そのまま使っちゃいましたが、作れる人はFigmaやイラレで手書き文字を作ってsvgにしたものを使うといいかなと思います↓↓↓↓

手書き文字をFigmaで無料作成

デザインでは手書き文字に「ふい字」というフォントをSVGにして使用しています。

ふい字ダウンロードはこちら

こたらをFigmaで使用可能にして、フォントで「HuiFont」を選ぶと適用されます。

手書き文字をデザインのように、若干斜めに回転させるといい感じになります。

エクスポートからSVG形式でダウンロードできます。

手書き文字は見やすさの為に、若干の影をつけてもいいと思います。

上級課題の例

上級課題は、比較的様々なサービスサイトに改造しやすいかと思います。

上級課題

デザイン変更前

デザイン変更例(受講生例)

オリジナルポートフォリオ
しょーご

上級サイトは癖が弱いので、題材はなんでも良いかと。

ファーストビューの要素の並びを変えるだけでも、結構印象が変わるのが分かるかと思います。

まさひろくん

いや、まだちょっと似てますねぇ,,,

しょーご

もう少し変えちゃっても大丈夫ですよ!

全く別のレイアウトのサイト」にならなければ、レビューは普通にします。

オリジナルは表示確認レビューを一回のみ行います

基本的には「デザインカンプからのコーディングが終わりレビューを受けある程度整っているはず作品」をオリジナルポートフォリオ化してもらいます。

なので、オリジナルにしてから「一回のみ」無料でレビューを行います。

  1. デザインカンプ通りにコーディングする(最大二回のレビュー)
  2. オリジナルポートフォリオにしてから、レビュー(一回のみ)
レビュー内容

基本的には表示が崩れていないかを確認するが、配色や画像配置にアドバンスがあれば、それもレビューする形を取ります。

まさひろくん

もし、絶望的にダサいデザインになっても、一回しか見てくれないの?ちょっと不安…

しょーご

あまり大きな声では言えませんが、その場合は個別にお声がけして、特別に二回目のレビューも無料で行いますので、安心してください。

しょーご

よって、1作品につきミニマム2回、修正点があれば3~4回のレビューを全員受けることになります。

ここからはオリジナルポートフォリオ作成の流れを具体的に解説していきます。

オリジナルポートフォリオ作成の流れ
  1. どういうサイトにするか決める
  2. 類似サイトの収集
  3. 配色(ダサくなりやすいので最重要!!!)
  4. ロゴを作成する
  5. 画像を差し替える
  6. テキストを差し替え

❶どういうサイトにするか決める

オリジナルポートフォリオサイトだけでなく、Webサイトを制作するのに一番大事なのが

  • 誰向けに
  • どんな課題を解決するサイトなのか

これを明確にすることです。

以下の具体例は、

  • 高齢者の介護を抱えた層に向けて
  • 無料相談ができたり、おすすめの施設をニーズに合わせて提案してくれるサービス

これをイメージしています。

以下の中級課題の例は、コーディング代行サービスで、

  • コーダーの人手が足りない企業に向けて
  • コーダーを派遣して解決するサービス

これをイメージしています。

❶課題ベースで決める

まずは「自分が課題だと思っていること、困っていそうな人や団体を助けるサイト」を想像するのがおすすめです。

具体例
  1. 特定の業界で働いており、強い課題感がある
  2. こういったサービス、施設、企業があればいいのになというものを思い浮かべる
  3. それが、どういった特徴、強みがあり、何の課題を解決するのか言語化する

あまりニッチすぎると、この後の画像探しで詰むので、ざっくりでいいです。

これをこなせると、直案件のWeb制作でも活きてきます。

❷元デザインの題材の横展開で考える

中級の農園サイト中級Exの和風サイトはデザインを変更しにくいかもしれません。

そんなときは、「似たジャンルで架空の店舗、サービスを考える」と良いです。

Webデザインまとめサイトで検索した例
具体例
  1. 和風サイトの題材に、「一日城主体験」を選ぶ
  2. 一日城主体験類似サービスを調べ、どういった要素があるのか調査
  3. 題材に沿った画像やテキスト、ロゴ、配色を決定していく
まさひろくん

言うは易しだけど、具体例が欲しいですよ、思い浮かばない…

しょーご

では、具体例をいくつか紹介します!!

題材決めの具体例5つ紹介

家事代行サービスの例

米農家の例

別に鰻屋のサイトだっていいのですよ、そういうサイト制作の依頼を請けたと仮定すれば。実際に制作会社案件でもあるので。

鰻屋の例

建設会社の採用サイト

音楽教室

しょーご

自分がその分野の知識があれば、半オリジナル化しやすいと思います!!

自分がそのビジネスオーナーから依頼を請けたと仮定すれば、基本どんなサイトでもOK

❷類似サイトの収集

自分が決めたジャンルのサイトのWebデザインの概観を掴みます。

類似サイトは以下のようなWebデザインまとめサイトを見ると探しやすいです。

また、Partsも使い勝手が良いです。セクション毎にデザインを見ることができます。

https://partsdesign.net/
確認するべき部分
  • 各サイトどんな課題を解説しているのか
  • どんな配色になっているのか
  • 使用している画像はどんなものか

参考になるサイトがあれば、いくつかブックマークしておくといいです。

❸配色(まずはファーストビューのみ)

配色がダントツで一番大事です!!

ダサくなるのは、100%配色ミスです。

基本的にデザインカンプで使用している

  • ベースカラー(70%):背景など
  • メインカラー(25%):ロゴなど
  • アクセントカラー(5%):重要なボタンなど

この色をそのまま変えていただくと、色が混在しなくていいかと思います。

上の画像では、ベースカラー:白、メインカラー:深緑、アクセントカラー:黄色にしています。

ツールを使って配色は決めたほうが良い

配色次第でWebサイトはめちゃくちゃダサくなります…

よって、ツールで相性の良い色を確認したほうがいいです。

手段❶:1種類の色の濃淡を使い分ける(事故率:低)

実は色数は一種類で良かったりもします。

こちらの方がダサくなりにくいので、事故率が低いです。

Material UIのcolor」はとてもおすすめです。

https://mui.com/material-ui/customization/color/

ここでカラーを選び、基本この色しか使いませんが、背景色などは白に近いほうが、事故率は減るかなと思います。

背景色が中途半端に濃いのに、グレーのテキストの事故率が高いです。

しょーご

テキストが黒なら背景色は白っぽく、テキストが白色なら背景色は暗めがいいですよね。

https://mui.com/material-ui/customization/color/

手段❷:2種類の色を使い分ける(事故率:中)

https://colorhunt.co/

こちらは真逆の色を使用して、アクセントカラーなどに用いるので、サイトと合わないとダサくなりやすいので、ご注意ください。

配色難民と化した新人デザイナーに捧ぐ。本当に役立つ配色サイトまとめ

https://liginc.co.jp/399974

ロゴの色とメインカラーは合わせるのが無難です。

配色事例

ボタン

ボタンが2つ並ぶ場合は、似た系統の色が良いです。暗め、明るめは合わせたいですね。

もしくは、片方枠のみも使いやすいです。

背景の上のテキスト

薄い背景の上には暗めのテキストが無難ですが、背景は思ってるより白に近いほうが安定します。

背景色が濃い場合は、テキストは白一択です。

また、ファーストビュー画像上のテキストが見にくい場合は、画像自体に半透明の黒いレイヤーを乗せるのも有効です。白いテキストが見やすくなります。

❹ロゴを作成する

ロゴはサービス全体の雰囲気や配色を決定するので、大事です。

ロゴを一括で作成する場合

まずはcanvaにログインし、「看護 ロゴ」と検索。

https://www.canva.com/

その後、使えそうなものを検索結果の中から探します。

今回はこちらのロゴを選択。

しょーご

ここのテキストは、別途自分のサイト名に変えるといいかなと思います。

ロゴの色はサイトを代表するので、サイトのメインカラー、アクセントカラーなどと統一するのが良いとされます。

各自色を調整するようにお願いします。

WEBデザインで押さえるべき配色(ベース、メイン、アクセント)の基本「3つのカラー」

https://www.m-hand.co.jp/design/4002/

ロゴの周りの白い余白が余計なので、ロゴを枠いっぱいに拡大します。

そしたら、「共有」から書き出しを行いましょう。

次に、remove bgで背景を透過していきます。

https://www.remove.bg/ja/upload

画像をアップロードしてください。

ダウンロードしましょう。

あとは、これをサイトに適用してください。

ちなみに、他にも独自のロゴが作れるロゴメーカー「Hatchful」などもありますので、色々なツールを試してみてください。

https://www.shopify.com/jp/tools/logo-maker

ただcanvaは編集の幅が大きいので、どんなサイトでも使いやすいと思います。

テキストとアイコンでロゴを作る場合

アイコンを素材サイトでダウンロードします。

https://icooon-mono.com/

試しに、和風と検索すれば、たくさんでてきます。

基本的にpngかsvgでダウンロードします。アイコンの色も選べます。

あとは、アイコンとテキストを並べると、ロゴの完成です。

❺画像を差し替える(まずはファーストビューのみ)

画像は必ず商用利用可能なものを利用してください。

サイトの画像を無断ダウンロードして使用しないようにご注意ください。

また、各画像プラットフォームで無料会員だとDL数が限られる場合があるので、色々探してみてください。

私はWeb制作直案件の素材用に「写真素材ダウンロードサイト【写真AC】
」のプレミアム会員にずっとなっており、おすすめです。

題材が日本なら、日本の写真を使うと良い

当たり前ですが、題材が日本なら日本らしい写真画像を使うと良いです。

特に人物画像は日本人の写真画像を使うと練習作品感がなくなっていいです。

例えば「写真素材ダウンロードサイト【写真AC】
」なんかは、無料だとDL数が限られますが、品質が良いです。

日本人向けの使いやすい写真が多いのと、画像はオリジナリティが高いとSEO評価も上がりやすいので、制作案件以外にブログにもよく使用しています。

無料写真素材なら【写真AC】

試しに、「福祉」と入力したら、良さげな画像がたくさんヒットしました。

他には、「イラストAC」もあり、こちらはイラストになります。

無料イラスト素材【イラストAC】
しょーご

イラストもサイトのイメージをガラッと変えてくれますね!

イラスト実装例

写真では、他にも、Adobe Stockおーだんもいいですね。

https://stock.adobe.com/jp/

中級課題はフラットイラストなので、以下の「Streamline」の「mirano」がおすすめ。

一日のDL数が決まっているので、ご注意ください。

https://www.streamlinehq.com/illustrations/milano

画像は必ず圧縮するようにお願いします。ダウンロードしてそのまま使うと、激重になります。

このあたりの素材集は以下の記事にもまとめていますので、是非参考にしてください。

フリー画像写真・イラストのおすすめ素材サイトまとめ

❻テキストを差し替える(まずはファーストビューのみ)

見出しはサービスを端的に表した文章がいいですね。

また、一部長いテキストはchat gptを利用するといいかなと思います。

中級農園課題の場合は、長いのでchat gptに文章を生成してもらっていました。

しょーご

AIが出力した文章をそのまま載せると、流石に機械的に感じるので、ところどころ直してあげてください。

❼他のセクションと下層ページも作っていく

ファーストビューを作り込んだら、あとは順に下のセクションを作っていけばいいです。

最初のファーストビューでサイトの全体の方向性を固めてから、下層を作るのが一番楽なので。

オリジナル化のチェックポイントと注意点解説!!

❶テキストの視認性が下がっていないか

例えば、以下のボタンを見てどう思いますか?

まさひろくん

うわめっちゃ見にくい…チカチカする…

明度の高い色を使うとテキストが見にくくなることがあるので、気をつけましょう。

❷反対の色を無理に使ってダサくなる例

例えば、「Color Hunt」に従って以下の配色を採用するも…

以下です。なんかダサい…

MUI」で同系色のカラーの濃淡を活用したほうが、事故率は下がります。

これは100点を取りに行くのではなく、60点以上を確実に取りに行くスタイルで、「THE 無難」といったシンプルなものになります。

しょーご

一番サイトをダサくしてしまう要因は、間違いなく「配色」です。

良い画像も配色が全て潰すのと、自分の題材と配色が合っているかも検討する必要がありますね。

❸オリジナルにしたことで、表示崩れが発現

当然ですが、「一度レビューを受けて問題なくなった状態でそこからオリジナル化を行う」ので、オリジナル化によって、新たに表示が崩れてしまう可能性があります。

想定される表示崩れポイント
  • テキストの改行位置が不自然になる(特にスマホ時)
  • 画像の縦横比がレスポンシブで崩れる
  • 背景や色の変更でテキストの視認性が悪くなる

これらに気をつけてセルフチェックを行ってください。

しょーご

提出者が増え次第、これからセルフチェックポイントなども整備していきます。

❹titleとdescriptionを忘れないこと

作品のリアル感を醸し出すために、適切なtitleとdescriptionが設定されていることが重要です。

必ず設定しておきましょう。

過去の事例を紹介

優れたオリジナル化の事例が出れば、特設ページに順次掲載していく予定です。

ひとまず先駆者の例がまだまだ少ないので、初期はある程度のクオリティがあれば、積極的に掲載を行っていきます。

デザインカンプからのコーディング課題のオリジナルポートフォリオ化事例集

疑問点にお答え

オリジナルポートフォリオも、パーフェクトピクセルじゃないとだめ?

完璧は求めません。基本的に表示が崩れていないかを確認しますので、デザイン通りかは見ません。

なので、余白やテキストの大きさなどを変更してもいいです。それが自然であれば問題ありません。

全く違うジャンルでもいい?

別のジャンルでもいいですが、サイトの形式的に、元デザインに分野は寄せたほうが作りやすいとは思います。

自分の趣味サイトでもいい?

基本的に商業利用が想定される題材のほうが、実案件に近いので良いと思います。

例えば「自分の好きな動物まとめサイト」みたいなものは、実案件としてほぼ存在しないので、ポートフォリオとして使われても相手は困惑するかもしれません。

どこまで構図を変えていいの?

ファーストビューはガッツリ変えてもいいです。他のセクションやページはある程度型に沿ってほしいですが、厳密にラインは決めません。

少し構成や枠組みを変えても、全然レビューします。

新しくページを追加してもいい?

ページ構成は基本デザインのままでお願いしますが、内容は変えていいです。

例えば【中級Ex】なら、「ホーム」「お部屋」「お料理」「温泉」なので、この4ページ構成を遵守してもらえれば、「ホーム」「体験」「黒川を知る」「酒所」とかでもいいです。

フォントは変えたほうがいい?

変えてもいいです。Google Fontsはおすすめですが、日本語のWebフォントは重くなりがちなので、ページ速度を見つつ使用してください。

アイコンも変えて良い?

アイコンも変えて良く、不自然で無ければ大丈夫です。

https://icooon-mono.com/