その原因、ポートフォリオが被っているからかもしれません。
厳しい現実として、今Web制作会社やフリーランスの元には大量の同じようなポートフォリオが届いています。
これは以前から警鐘していたことです。
それによって、
またこのポートフォリオかぁ、流行ってるなぁ…
という良くない印象がつきやすいのが現状です。
そこで、オリジナルポートフォリオを準備することによって、営業先から返信率が高まることがわかっています。
しかし、だからといって一からオリジナルポートフォリオを準備するのは大変ですよね。
そこで今回は「デザインカンプ課題からコーディングした既存ポートフォリオを、半オリジナル化する方法」を紹介します。
これは私が出している「コーディング演習課題」でしか公開していなかったのですが、どんな作品でも半オリジナル化できるように手法をオープンにしようと思います。
これを複数作品分行うことで、営業の返信率が上がる可能性が高いので、ぜひ一緒に進めていきましょう！
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
前提：課題改変のOKがあるか確認しておく
今回は「デザインカンプからのコーディング課題を半オリジナル化する」のを前提にしているので、ちゃんとオリジナル化OKかはスクールなどに確認を取って下さい！
無断でオリジナル化を行い、かつ完全オリジナルデザインかのように振る舞うと
（あれ、送られてきたこのデザインなんか見覚え有るけど…完全オリジナルじゃないじゃんこれ…）
とトラブルの元になったりします。
アピール方法も、「元デザインが存在して、それを改変させたもの」であることが分かるようにしたいですね。
オリジナルポートフォリオが評価される理由
Web制作者に求められるのって、デザイン通りにコーディングできることや質の高いデザインを制作できることであって、オリジナリティとかいらなくないですか？
鋭いね！Web制作者ってクリエイターなので、そもそも与えられたものを作るだけの人に魅力を感じにくいのは根本にあるかもね。
他にもオリジナルポートフォリオにするメリットはいくつかあります。
- サイトは本来課題解决のツールで、オリジナルだとそれが伝わやすい
- オリジナル化の過程もアピールポイントになる
- 与えられるだけでなく自走力と思考力があり、学び続ける人という好印象も
オリジナルポートフォリオを適切にアピールする方法については、記事の最後でお伝えします。
オリジナルポートフォリオの具体例
私が出している「コーディング演習課題」は原則全てオリジナルポートフォリオ化していただくことにしており、そのレビューを無償で行っています。
ここではその中で「【上級】デザインカンプからのコーディング実践演習」の例を紹介します。
まず以下が元デザイン。
以下が半オリジナル化した例です。
そうだね！今回紹介する手順どおりに進めれば、どんな作品でも半オリジナル化することができるので、一緒に見ていこう！
オリジナルポートフォリオ作成の手順
- どういうサイトにするか決める
- 類似サイトの収集
- 配色（ダサくなりやすいので最重要！！！）
- ロゴを作成する
- 画像を差し替える
- テキストを差し替え
❶どういうサイトにするか決める
オリジナルポートフォリオサイトだけでなく、Webサイトを制作するのに一番大事なのが
- 誰向けに
- どんな課題を解決するサイトなのか
これを明確にすることです。
難しく考えすぎなくても良くて、例えば美容室のサイトは「気になっている美容室の料金やスタイリストを詳しく知りたい」という課題をを解决していますよね。別に社会課題である必要はありません。
以下の具体例は、
- 高齢者の介護を抱えた層に向けて
- 無料相談ができたり、おすすめの施設をニーズに合わせて提案してくれるサービス
これをイメージしています。
以下の例は、コーディング代行サービスで、
- コーダーの人手が足りない企業に向けて
- コーダーを派遣して解決するサービス
これをイメージしています。
以下がオリジナル例。
❶課題ベースで決める
まずは「自分が課題だと思っていること、困っていそうな人や団体を助けるサイト」を想像するのがおすすめです。
- 特定の業界で働いており、強い課題感がある
- こういったサービス、施設、企業があればいいのになというものを思い浮かべる
- それが、どういった特徴、強みがあり、何の課題を解決するのか言語化する
あまりニッチすぎると、この後の画像探しで詰むので、ざっくりでいいです。
これをこなせると、直案件のWeb制作でも活きてきます。
❷元デザインの題材の横展開で考える
もう一つの案として、「似たジャンルで架空の店舗、サービスを考える」と良いです。
- 和風サイトの題材に、「一日城主体験」を選ぶ
- 一日城主体験類似サービスを調べ、どういった要素があるのか調査
- 題材に沿った画像やテキスト、ロゴ、配色を決定していく
旅館サイトの横展開が旅館である必要は無いですね。
❷類似サイトの収集
自分が決めたジャンルのサイトのWebデザインの概観を掴みます。
類似サイトは以下のようなWebデザインまとめサイトを見ると探しやすいです。
また、Partsも使い勝手が良いです。
- 各サイトどんな課題を解説しているのか
- どんな配色になっているのか
- 使用している画像はどんなものか
参考になるサイトがあれば、いくつかブックマークしておくといいです。
❸配色(まずはファーストビューのみ)
基本的にデザインカンプで使用している
- ベースカラー（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に文章を生成してもらっていました。
❼他のセクションと下層ページも作っていく
ファーストビューを作り込んだら、あとは順に下のセクションを作っていけばいいです。
最初のファーストビューでサイトの全体の方向性を固めてから、下層を作るのが一番楽なので。
オリジナル化のチェックポイントと注意点解説！！
❶テキストの視認性が下がっていないか
例えば、以下のボタンを見てどう思いますか？
うわめっちゃ見にくい…チカチカする…
明度の高い色を使うとテキストが見にくくなることがあるので、気をつけましょう。
❷反対の色を無理に使ってダサくなる例
例えば、「Color Hunt」に従って以下の配色を採用するも…
以下です。なんかダサい…
「MUI」で同系色のカラーの濃淡を活用したほうが、事故率は下がります。
これは100点を取りに行くのではなく、60点以上を確実に取りに行くスタイルで、「THE 無難」といったシンプルなものになります。
一番サイトをダサくしてしまう要因は、間違いなく「配色」です。
良い画像も配色が全て潰すのと、自分の題材と配色が合っているかも検討する必要がありますね。
❸オリジナルにしたことで、表示崩れが発現
当然ですが、「一度レビューを受けて問題なくなった状態で、そこからオリジナル化を行う」ので、オリジナル化によって、新たに表示が崩れてしまう可能性があります。
- テキストの改行位置が不自然になる（特にスマホ時）
- 画像の縦横比がレスポンシブで崩れる
- 背景や色の変更でテキストの視認性が悪くなる
これらに気をつけてセルフチェックを行ってください。
半オリジナル化した場合は、できればプロのレビューを受けて下さい。
デザインカンプをコーディングするのと違い、模範がないので自分ではミスに気づきにくいためです。
オリジナル化することで評価が下がっては元も子もないので。
❹titleとdescriptionを忘れないこと
作品のリアル感を醸し出すために、適切なtitleとdescriptionが設定されていることが重要です。
必ず設定しておきましょう。
過去の事例を紹介
優れた半オリジナル化の事例は、特設ページに順次掲載しています。
事例を参考にしたい方はご覧になって下さい。
他人のポートフォリオを自分の実績と偽って使用し転職した方が、他のスクールに過去いたようです（結局スキル不足がバレて契約解除に）
トラブルのもとなので参考程度にとどめて下さい。
オリジナルポートフォリオのアピール方法
半オリジナル化したポートフォリオのアピール方法は若干特殊なので、ここで解説します。
Colaは、デザインカンプからのコーディング課題を元にした作品で、セクション構成は課題と一緒です。
それを元にオリジナルポートフォリオを作成する際に、「コーディングのスペシャリストを現場に派遣する」という架空サービスをイメージし、親しみやすさと快活さをイメージする#4gdh5dの色を使用し、「丁寧で素早くコードを納品する」イメージを表現しました。
また、サービスも「コーディング代行」だけでなく、「コーダー派遣」も準備することで、幅広い企業のニーズに答えられるようにしました。
自分なりに工夫した点というのをアピールできるのがオリジナルポートフォリオの良いところです。
デザイナーと違ってコーダーは思考のプロセスをアピールできる機会が少ないので、ぜひ半オリジナル化までしたいですね。
疑問点にお答え
さいごに宣伝：半オリジナル化までレビューします
私が出している「コーディング演習課題」では2023年7月より半オリジナル化までのレビューを行う方針にしました。
それに伴い、続々と受講生から高クオリティのポートフォリオが上がってきており、順調な滑り出しを見せています。
興味のある方は以下の記事より変更点を見てみて下さい。
またコーディング課題自体は以下のリンクより見れますので、コーディング力を即上げしつつオリジナルポートフォリオを準備したい方は、提出をお待ちしています！！
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
