プログラミング/仕事

Web制作のポートフォリオはオリジナルのものがないと厳しいので作成方法を解説【実務未経験者向け】

Web制作のポートフォリオはオリジナルのものがないと厳しくなっている話【実務未経験者向け】
本ページにはプロモーションが含まれています。

ありさちゃん
ありさちゃん
Web制作会社やクラウドソーシングで営業しているけど、全然返信が来ない…おかしいな…スクールで高品質なポートフォリオを揃えたはずなのに…

その原因、ポートフォリオが被っているからかもしれません。

厳しい現実として、今Web制作会社やフリーランスの元には大量の同じようなポートフォリオが届いています。

これは以前から警鐘していたことです。

それによって、

担当者

またこのポートフォリオかぁ、流行ってるなぁ…

という良くない印象がつきやすいのが現状です。

そこで、オリジナルポートフォリオを準備することによって、営業先から返信率が高まることがわかっています。

しかし、だからといって一からオリジナルポートフォリオを準備するのは大変ですよね。

そこで今回は「デザインカンプ課題からコーディングした既存ポートフォリオを、半オリジナル化する方法」を紹介します。

これは私が出している「コーディング演習課題」でしか公開していなかったのですが、どんな作品でも半オリジナル化できるように手法をオープンにしようと思います。

元デザインが存在するので、半オリジナル化という言い方をしています。

これを複数作品分行うことで、営業の返信率が上がる可能性が高いので、ぜひ一緒に進めていきましょう!

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

前提:課題改変のOKがあるか確認しておく

今回は「デザインカンプからのコーディング課題を半オリジナル化する」のを前提にしているので、ちゃんとオリジナル化OKかはスクールなどに確認を取って下さい!

無断でオリジナル化を行い、かつ完全オリジナルデザインかのように振る舞うと

クライアント

(あれ、送られてきたこのデザインなんか見覚え有るけど…完全オリジナルじゃないじゃんこれ…)

とトラブルの元になったりします。

アピール方法も、「元デザインが存在して、それを改変させたもの」であることが分かるようにしたいですね。

オリジナルポートフォリオが評価される理由

まさひろくん

Web制作者に求められるのって、デザイン通りにコーディングできることや質の高いデザインを制作できることであって、オリジナリティとかいらなくないですか?

しょーご

鋭いね!Web制作者ってクリエイターなので、そもそも与えられたものを作るだけの人に魅力を感じにくいのは根本にあるかもね。

他にもオリジナルポートフォリオにするメリットはいくつかあります。

  • サイトは本来課題解决のツールで、オリジナルだとそれが伝わやすい
  • オリジナル化の過程もアピールポイントになる
  • 与えられるだけでなく自走力と思考力があり、学び続ける人という好印象も

オリジナルポートフォリオを適切にアピールする方法については、記事の最後でお伝えします。

オリジナルポートフォリオの具体例

私が出している「コーディング演習課題」は原則全てオリジナルポートフォリオ化していただくことにしており、そのレビューを無償で行っています。

ここではその中で「【上級】デザインカンプからのコーディング実践演習」の例を紹介します。

まず以下が元デザイン。

以下が半オリジナル化した例です。

ありさちゃん
ありさちゃん
すごい!!こんなに変わるものなのですね!
しょーご

そうだね!今回紹介する手順どおりに進めれば、どんな作品でも半オリジナル化することができるので、一緒に見ていこう!

オリジナルポートフォリオ作成の手順

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

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

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

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

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

しょーご

難しく考えすぎなくても良くて、例えば美容室のサイトは「気になっている美容室の料金やスタイリストを詳しく知りたい」という課題をを解决していますよね。別に社会課題である必要はありません。

以下の具体例は、

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

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

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

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

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

以下がオリジナル例。

❶課題ベースで決める

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

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

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

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

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

もう一つの案として、「似たジャンルで架空の店舗、サービスを考える」と良いです。

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

旅館サイトの横展開が旅館である必要は無いですね。

❷類似サイトの収集

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

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

また、Partsも使い勝手が良いです。

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

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

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

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

  • ベースカラー(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

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

❹ロゴを作成する

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

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

まずは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に文章を生成してもらっていました。

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

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

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

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

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

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

まさひろくん

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

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

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

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

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

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

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

しょーご

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

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

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

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

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

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

半オリジナル化した場合は、できればプロのレビューを受けて下さい。

デザインカンプをコーディングするのと違い、模範がないので自分ではミスに気づきにくいためです。

オリジナル化することで評価が下がっては元も子もないので。

❹titleとdescriptionを忘れないこと

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

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

過去の事例を紹介

優れた半オリジナル化の事例は、特設ページに順次掲載しています。

事例を参考にしたい方はご覧になって下さい。

他人のポートフォリオを自分の実績と偽って使用し転職した方が、他のスクールに過去いたようです(結局スキル不足がバレて契約解除に)

トラブルのもとなので参考程度にとどめて下さい。

オリジナルポートフォリオのアピール方法

半オリジナル化したポートフォリオのアピール方法は若干特殊なので、ここで解説します。

アピール例

Colaは、デザインカンプからのコーディング課題を元にした作品で、セクション構成は課題と一緒です。

それを元にオリジナルポートフォリオを作成する際に、「コーディングのスペシャリストを現場に派遣する」という架空サービスをイメージし、親しみやすさと快活さをイメージする#4gdh5dの色を使用し、「丁寧で素早くコードを納品する」イメージを表現しました。

また、サービスも「コーディング代行」だけでなく、「コーダー派遣」も準備することで、幅広い企業のニーズに答えられるようにしました。

自分なりに工夫した点というのをアピールできるのがオリジナルポートフォリオの良いところです。

デザイナーと違ってコーダーは思考のプロセスをアピールできる機会が少ないので、ぜひ半オリジナル化までしたいですね。

疑問点にお答え

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

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

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

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

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

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

私の課題の場合は、ファーストビューはガッツリ変えてもいいようにしています。

一番印象を決める部分なので、オリジナリティを一番押し出せる部分です。

それ以外は、どこまで変えていいかは結局課題を出している人やスクール次第なので、要相談です。

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

ページ構成は基本デザインのままがやりやすいと思いますが、内容は変えた方がオリジナリティが出せます。

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

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

アイコンも変えて良い?

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

https://icooon-mono.com/

さいごに宣伝:半オリジナル化までレビューします

私が出している「コーディング演習課題」では2023年7月より半オリジナル化までのレビューを行う方針にしました。

それに伴い、続々と受講生から高クオリティのポートフォリオが上がってきており、順調な滑り出しを見せています。

興味のある方は以下の記事より変更点を見てみて下さい。

またコーディング課題自体は以下のリンクより見れますので、コーディング力を即上げしつつオリジナルポートフォリオを準備したい方は、提出をお待ちしています!!

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!