この記事でわかること
ポートフォリオを3色に絞るだけで離脱率が下がる理由、職種別（エンジニア・デザイナー・フォトグラファー）の配色パターン3種、WebAIM Contrast Checkerを使ったコントラスト比の確認手順を解説します。
ポートフォリオの配色は「自分好み」より「見やすさ優先」が受注率を左右します。背景・テキスト・アクセントの3色に絞るだけで、クライアントの離脱率を大幅に下げられます。この記事では職種別の配色選びから統一感の出し方、差別化まで5つの実務ハックで解説します。
この記事の結論
ポートフォリオの配色は「3色（背景・テキスト・アクセント）のカラーパレット」を先に決め、職種の印象に合わせて選ぶことが最短ルートです。配色の失敗の多くは「色を増やしすぎること」と「コントラスト不足」の2点に集約されます。この2点を押さえるだけで、クライアントが「読み進めたくなる」ポートフォリオに近づきます。
▶ 今すぐやること：自分のポートフォリオを開き、使用している色を数えてください。4色以上あれば、背景・テキスト・アクセントの3色に絞る作業を今日中に実施してください（15〜30分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 配色の基本ルールを知りたい | ポートフォリオ配色は3色ルールで統一感を出す | 3分 |
| 職種別の配色例が知りたい | ポートフォリオ配色は職種で3パターンに分類 | 3分 |
| 自分の配色が正しいか判断したい | ポートフォリオ配色を3分で自己診断 | 3分 |
| コントラストと文字の読みやすさを改善したい | ポートフォリオ配色は5つの仕組みで解決 | 5分 |
| 配色でブランディングしたい | ポートフォリオ配色は差別化で受注率を上げる | 4分 |
ポートフォリオ配色は3色ルールで統一感を出す
配色を何から決めればいいかわからない。フリーランスに共通するこの悩みへの答えは、「何色使うか」より「何色に絞るか」を先に決めることです。
3色（背景・テキスト・アクセント）が基本構成
ポートフォリオの配色は「背景色・テキスト色・アクセント色」の3色で構成するのが基本です。背景色は白（#FFFFFF）または薄いグレー（#F5F5F5）が最も安全な選択で、テキスト色は黒に近いダークグレー（#333333）を使うと目への負担が下がります。アクセント色は1色だけ選び、ボタン・リンク・見出しの強調に絞って使います。
3色ルールが機能する理由は、人間の視覚処理コストにあります。色が増えるほど脳が「どこを見ればいいか」を判断するために余分なリソースを使い、読み疲れが早くなります。つまり配色を絞ることは「デザインの手抜き」ではなく、「クライアントの集中力をコンテンツに向ける設計」です。
「色を絞ると個性が出ない」という懸念もあります。ただ、個性はアクセント色の選び方と配置方法で十分に表現できます。背景とテキストを固定することで、アクセント色が際立ち、かえってブランドカラーが印象に残りやすくなります。見やすい配色の基本となる3色・比率70:25:5のルールを参考に、まず色の役割を整理することが重要です。
カラーパレットを先に決めると作業時間が短縮できる
カラーパレットとは、使用する色のセットをあらかじめ決めておくことです。パレットを決めずに作業を始めると、ページごとに「この色でいいか」と迷う時間が発生し、完成までの時間が増加します。Adobe Color（無料）やCoolors（無料）でパレットを1セット作成してから作業を始めることで、判断コストをほぼゼロにできます。
具体的な手順として、まずアクセント色（1色）を直感で選び、次にそのアクセント色に合う背景色とテキスト色を自動提案機能で選びます。この3色が確定したら、以降は「パレット外の色は使わない」ルールを自分に課すだけで統一感は自動的に生まれます。
カラーパレットは「配色の決断」を一度で済ませる仕組みです。制作中に色を都度判断するのではなく、仕組みで管理することが実務では最も効率的です。
背景色を白に固定すると作品が映える理由
背景色を白または薄いグレーに固定することで得られる最大のメリットは、「作品そのものが主役になる」点です。背景に色をつけると、その色が作品の色と干渉し、クライアントの視線が作品ではなく背景に分散します。フォトグラファーや写真撮影が多いデザイナーは特に、白背景の効果が顕著に出ます。
「白すぎて没個性に見える」という懸念もあります。この場合は、セクションの区切りにのみ薄いグレー（#F5F5F5〜#E0E0E0）を差し込む「ゾーニング」が有効です。白とグレーの2トーンで構成することで、単調さを避けながら作品を引き立てる背景を維持できます。白背景は「個性がない」のではなく、「作品に個性を語らせる選択」です。
CHECK
▶ 今すぐやること：Adobe Colorを開き、自分の「好きな色」を1色入力してパレットを自動生成してください（10分）。
Q：ポートフォリオの背景色は必ず白にする必要がありますか？
A：必須ではありませんが、白または薄いグレーを強く推奨します。作品が多彩な色を含む場合、有彩色の背景と干渉して作品の評価が下がるリスクがあります。ダーク系（黒・濃紺）の背景は、写真・映像系でポートフォリオ全体をギャラリー風に統一する場合に限り有効です。
Q：アクセント色はどうやって選べばいいですか？
A：最も手軽な方法は、自分の顔写真やプロフィール画像から1色を抽出することです。Adobe Colorの画像抽出機能に画像をアップロードすると、画像内の主要な色を自動で抽出できます。この方法で選んだアクセント色は、ポートフォリオ全体に自然な一体感をもたらします。
要点整理
コントラスト比をWebAIM Contrast Checkerで数値確認した。3色パレットをAdobe ColorまたはCoolorsで作成した。背景色を白（#FFFFFF）または薄いグレー（#F5F5F5）に設定した。アクセント色の使用箇所をボタン・リンク・強調の3箇所に絞った。
ポートフォリオ配色は職種で3パターンに分類
エンジニアとデザイナーで配色の正解が違う理由は、職種ごとに「クライアントが無意識に期待する印象」が異なるからです。配色もその印象に合わせる必要があります。
エンジニアは青・白・グレーで信頼感を演出する
エンジニアのポートフォリオでクライアントが最初に確認するのは「この人に任せて大丈夫か」という信頼性です。青系（#1A73E8や#0050A0など）は視覚的に「論理性・安定・信頼」を想起させる色として広く認識されており、IT・テック業界では標準的なアクセント色です。
背景を白、テキストをダークグレー、アクセントを青に設定した3色構成は、GitHubやLinkedInなど技術者が日常的に触れるプラットフォームの配色とも近く、クライアントに「なじみのある安心感」を与えます。エンジニアが青系を選ぶことは「トレンドに乗る」のではなく、「クライアントの認知コストを下げる」合理的な選択です。
ただし、青を多用するとページが重く見えるため、アクセント色として使う面積は全体の10〜15%以内に抑えることを推奨します。青の使いすぎは「清潔感」を「冷たさ」に変える逆効果があるため、ボタン・リンク・一部見出しのみに限定することが賢明です。
デザイナーは有彩色で創作性を見せる戦略が有効
デザイナーのポートフォリオには「この人はどんな色使いをするのか」という確認の意味が含まれています。そのため、エンジニアよりも配色そのものがスキルのサンプルになります。彩度のある色（コーラルレッド・マスタードイエロー・ティールグリーンなど）を1色アクセントとして使うことで、「配色センスがある」という非言語的なアピールになります。
ただし「カラフルにすれば評価される」という理解は誤りです。多色使いはむしろ「統制が取れていない」という印象を与えるリスクがあります。デザイナーであっても、使用色は3色以内のルールを守りながら、その3色の選び方と組み合わせのセンスで差別化を図るのが正しいアプローチです。Webデザインの配色は3色・70:25:5%で決まる実践手順も合わせて参照することで、デザイナーとしての配色スキルを体系的に身につけられます。
有彩色1色をメインに、その補色をごく小面積（全体の5%未満）に使う構成が最もバランスが良い傾向にあります。
フォトグラファーは無彩色背景で写真を主役にする
フォトグラファーのポートフォリオで最も避けるべき配色ミスは、「背景に有彩色を置いて写真の色と干渉させること」です。写真作品はそれ自体に多彩な色が含まれているため、背景は白・薄いグレー・黒のいずれかに固定するのが鉄則です。
黒背景（#000000〜#1A1A1A）はギャラリーや美術館のような高級感を演出でき、ハイエンドな商業写真・ファインアート系のフォトグラファーに向いています。白背景はウエディング・子ども・料理など明るいジャンルの作品と相性が良く、より幅広いクライアント層に対応しやすい選択です。重要なのは「写真が映えているかどうか」を判断基準にすることで、配色そのものの派手さを追求しないことです。
CHECK
▶ 今すぐやること：自分の職種（エンジニア・デザイナー・フォトグラファー）を確認し、上記3パターンのうち該当するアクセント色の候補を1色メモしてください（5分）。
Q：Web系デザイナーとグラフィックデザイナーで配色の選び方は変わりますか？
A：傾向として異なります。Web系は画面表示が前提のためRGBカラーモデルで設計し、コントラスト比（WCAG 2.1の基準では通常テキストで4.5:1以上）を意識することが重要です。グラフィック系は印刷物を想定する場合があるため、CMYKへの変換を考慮したうえで配色を選ぶことがあります。
Q：エンジニアでも青以外のアクセント色を使っていいですか？
A：問題ありません。ただし、エンジニア職において赤・オレンジ・ピンクなどの暖色をアクセントに使う場合は、背景と文字色を特に清潔感のある構成（白背景・ダークグレーテキスト）にして全体の信頼感を担保することを推奨します。
重要ポイント
自分の職種に対応するアクセント色の候補を1色決めた。エンジニアはアクセント色の使用面積を全体の10〜15%以内に設定した。デザイナーは有彩色1色＋補色（5%未満）の構成を確認した。フォトグラファーは背景を白・グレー・黒のいずれかに固定した。
ポートフォリオ配色を3分で自己診断
「自分のポートフォリオの配色が正しいかどうか」を判断する客観的な基準がないと、いつまでも迷い続けます。以下の質問に沿って答えるだけで、改善すべき優先項目が特定できます。
Q1：現在のポートフォリオで使っている色は何色ですか？
4色以上使っている場合はQ2へ。3色以内に収まっている場合はQ3へ進んでください。
Q2：4色以上ある場合、それぞれの色に役割（背景・テキスト・アクセント）を割り当てられますか？
割り当てられない場合はResult A。割り当てられる場合はQ3へ進んでください。
Q3：テキスト色と背景色のコントラストを確認したことがありますか？
確認したことがない場合はResult B。確認済みで問題なしの場合はQ4へ進んでください。
Q4：スマートフォンで自分のポートフォリオを表示したとき、文字は読みやすいですか？
読みにくい箇所がある場合はResult C。問題なく読める場合はResult Dです。
Result A（4色以上・役割不明）：配色を3色に絞り直すことが最優先です。Adobe ColorまたはCoolorsで3色パレットを新たに作成し、既存の色を置き換えてください。所要時間は30〜60分が目安です。
Result B（コントラスト未確認）：WebAIM Contrast Checkerで確認してください。 テキスト色と背景色の16進コードを入力し、「Pass」表示になっていることを確認します。「Fail」の場合はテキストをより暗く、または背景をより明るく調整します。所要時間は10〜15分です。
Result C（スマホ可読性NG）：文字サイズとコントラストの両方を見直してください。 本文フォントを最低16px以上に設定し、テキスト色をさらに濃くすることで多くのケースで解決します。
Result D（問題なし）：現在の配色は基準を満たしています。 次の改善ステップとして、アクセント色がブランドカラーとして一貫しているか（複数ページで同じ色かどうか）を確認してください。
CHECK
▶ 今すぐやること：WebAIM Contrast Checkerにアクセスし、自分のポートフォリオのテキスト色と背景色を入力して「Pass/Fail」を確認してください（5分）。
Q：コントラスト比の基準はどこで決まっていますか？
A：Web Content Accessibility Guidelines（WCAG 2.1）というアクセシビリティ基準で定められています。通常の本文テキストでは4.5:1以上、大きなテキスト（18px以上の標準または14px以上の太字）では3:1以上が推奨されています。この基準を満たすことで、視力が弱いユーザーや色覚に特性がある方にとっても読みやすいポートフォリオになります。
Q：診断でResult Aになりました。どの色を残せばいいですか？
A：最も面積が大きい色（背景色）、最も文字に使っている色（テキスト色）、最も目立たせたい色（アクセント色）の順で残す色を1つずつ選んでください。それ以外の色はすべて除外します。迷った場合は、アクセント色以外は白・黒・グレーに統一する方法が最も確実です。
確認事項
診断Q1〜Q4を実施して自分のResultを確認した。ResultBの場合はWebAIM Contrast Checkerで「Pass」を取得した。ResultAの場合は新しい3色パレットを作成した。スマートフォンで表示確認を完了した。
ポートフォリオ配色は5つの仕組みで解決
配色の悩みは「センスの問題」ではなく「仕組みの問題」です。正しい手順と道具を使えば、デザイン未経験のエンジニアでもクライアントに評価される配色を実現できます。
ハック1：コントラスト比4.5:1以上で読みやすさを保証する
【対象】 ：配色を決めたが「読みにくい」と感じる、またはコントラスト調整の経験がないすべての職種のフリーランス
【手順】 ：まずWebAIM Contrast Checkerを開きます（1分）。次に自分のポートフォリオのテキスト色と背景色の16進カラーコードを入力します（3分）。「Fail」と表示された場合は、テキスト色を5〜10%ずつ暗くして再確認し、「Pass」になるまで繰り返します（5〜10分）。
【ポイントと理由】 ：制作者のモニター環境は明るめに設定されていることが多く、クライアント側の環境では読みにくくなるケースがあります。WebAIM Contrast Checkerによる数値確認で主観判断を排除できます。コントラスト比の確認には感覚より計測を優先させることが、クライアントへの品質保証になります。
【注意点】 ：コントラスト比を上げるためにテキストを真っ黒（#000000）にする必要はありません。#000000は背景白との組み合わせでコントラスト比が21:1に達し、長文では目への負担が増します。#333333〜#444444程度のダークグレーで十分に「Pass」を達成できます。
ハック2：70:25:5の比率でアクセント色の量を管理する
【対象】 ：アクセント色を使ってはいるが「まとまりがない」「うるさく見える」と感じているデザイナー・エンジニア
【手順】 ：現在のポートフォリオを印刷するか、スクリーンショットを撮って全体を俯瞰します（2分）。「背景色が占める面積（目安70%）」「テキストや補助要素が占める面積（目安25%）」「アクセント色が占める面積（目安5%）」のバランスを目視で確認します（5分）。アクセント色が10%を超えている場合は、使用箇所をボタン・CTAリンク・重要数値の強調のみに絞り込みます（10〜20分）。
【ポイントと理由】 ：アクセント色は面積が少ないほど視線が集中します。空白に囲まれた1点の色が最も目を引くという視覚の原理によるものです。70:25:5の比率を守ることで、アクセント色が「見てほしい情報の目印」として機能します。
【注意点】 ：アクセント色を使う場所が決まらないときに複数箇所へ分散させると逆効果です。分散させると個々のアクセントが弱くなり、どこを見ればいいかわからないポートフォリオになります。アクセント色は「最も見てほしい1箇所」に集中投下するという方針を事前に決めておくことが重要です。
ハック3：Google Fontsで文字色と背景色の関係を最適化する
【対象】 ：文字が読みにくいと感じているが、フォント選びと配色の関係がわからないエンジニア・フォトグラファー
【手順】 ：Google Fontsにアクセスし、日本語対応フォントの中から「Noto Sans JP」または「Noto Serif JP」を選択します（2分）。フォントのウエイト（太さ）を400（Regular）に設定し、背景色・文字色との組み合わせをプレビューで確認します（5分）。フォントサイズを16px（本文）・24px（小見出し）・32px（大見出し）の3段階に設定し、各サイズで可読性を確認します（10分）。
【ポイントと理由】 ：「細いフォント（ウエイト300以下）＋薄い文字色」という組み合わせが可読性を最も損ないます。Noto Sans JPのウエイト400以上を使うことで、文字色が多少薄くても読みやすさが維持されます。フォントのウエイトを上げることは、文字色を暗くするのと同等の可読性向上効果があるとされています。
【注意点】 ：フォントを複数種類使う必要はありません。見出しと本文で異なるフォントを使う「混植」はデザイン経験者向けの技術です。未経験者が実施すると統一感が崩れるリスクが高く、Noto Sans JP 1種類で見出しのウエイトと本文のウエイトを変えるだけで十分なメリハリが生まれます。
ハック4：セクションごとにグレーの濃度を変えてゾーニングする
【対象】 ：ページが単調に見える、または各セクションの区切りがわかりにくいと感じているすべての職種のフリーランス
【手順】 ：ポートフォリオのセクション（プロフィール・スキル・実績・お問い合わせ）を書き出します（2分）。奇数番目のセクションを白（#FFFFFF）、偶数番目のセクションを薄いグレー（#F5F5F5）に設定します（10〜15分）。スクロールしたときに「ここで話題が変わった」と視覚的に感じられるかをスマートフォンとPCの両方で確認します（5分）。
【ポイントと理由】 ：セクションの区切りに太い罫線や派手な色を入れる方法では色が増えてしまいますが、「白とグレーの濃度差だけで区切る」アプローチは色を増やさずに情報を整理できます。罫線や派手な色は視線の流れを遮断しますが、背景色の切り替えは自然にセクションが変わったことを認識させます。3色ルールを崩さずにレイアウトを改善できる手法です。
【注意点】 ：グレーの濃度差が小さすぎるとセクション区切りが認識されません。白（#FFFFFF）と薄いグレー（#F0F0F0〜#E8E8E8）程度の差があることが視認性の最低ラインです。薄い差で十分なため、より目立たせようとして中間グレーを濃くする必要はありません。
ハック5：アクセント色にブランドカラーを設定して差別化する
【対象】 ：配色はできているが「他のフリーランスと見分けがつかない」と感じているデザイナー・エンジニア
【手順】 ：自分が提供するサービスや過去の作品群を見て「印象のキーワード」を3つ書き出します（例：「正確・スピード・モダン」）（5分）。そのキーワードと関連する色相をAdobe Colorのトレンド機能で確認し、1色に絞ります（10分）。その色を自分の「ブランドカラー」としてポートフォリオのアクセント色・SNSのアイコン背景・メールの署名の色に統一します（20〜30分）。
【ポイントと理由】 ：クライアントはポートフォリオを見た時点から「この人に依頼するとどんなアウトプットが来るか」を無意識に予測します。ブランドカラーが一貫していると、その予測が的中しやすくなり、「思っていた通りだった」という信頼が積み重なります。ブランドカラーは「好きな色」ではなく「伝えたい印象を色で翻訳したもの」として選ぶことが差別化の本質です。フリーランスのポジショニング設計においても、ブランドカラーの一貫性は自分の市場ポジションを視覚的に強化する重要な要素です。
【注意点】 ：ブランドカラーを決めた後に「他のフリーランスと同じ色だった」と気づいても、色そのものを変える必要はありません。同じ青でも、面積・配置・組み合わせる背景色によって受ける印象は大きく変わります。継続使用による認知の蓄積こそが差別化の源泉であるため、毎シーズン配色を変えることは避けてください。
CHECK
▶ 今すぐやること：WebAIM Contrast Checkerでコントラスト比確認（5分）とAdobe Colorでブランドカラー候補の作成（10分）を今日中に実施してください（合計：15分）。
Q：無料ツールだけで配色の品質を担保できますか？
A：十分に可能です。WebAIM Contrast Checker（コントラスト確認）・Adobe Color（パレット生成）・Coolors（パレット生成）・Google Fonts（フォント選択）はすべて無料で、プロのデザイナーが実務で使用しているツールです。有料ツールは作業効率を上げる目的で使うものであり、配色品質の担保には無料ツールで必要十分です。
押さえておきたい点
ハック1：WebAIM Contrast Checkerで「Pass」を取得した。ハック2：アクセント色の使用面積が全体の10%以内に収まっているか確認した。ハック3：本文フォントをNoto Sans JPのウエイト400以上に設定した。ハック4：奇数・偶数セクションで白とグレーを交互に設定した。ハック5：ブランドカラーを1色決定し、ポートフォリオ・SNS・メール署名に統一した。
ポートフォリオ配色は差別化で受注率を上げる
配色の基本をマスターしたあと、「見やすいポートフォリオ」から「選ばれるポートフォリオ」に進化させるための考え方を整理します。配色が整った状態をスタートラインとして、ここからどう差別化するかです。
統一感と個性のバランスは8:2が目安
ポートフォリオ全体の配色のうち、統一感のある無彩色・低彩度の色で8割を占め、個性を表現する有彩色・遊び心のある色は2割以内に留めることが、受注実績のあるフリーランスのポートフォリオに共通して見られる傾向です。この8:2のバランスは「整った印象を与えながら、もう少し見たい」という感情を引き出すために設計されています。
個性を全面に出しすぎると、初見のクライアントが「この人の趣味に合わせたポートフォリオ」と感じてしまい、「自分のプロジェクトに合うか」という判断を保留してしまいます。個性は配色の主役ではなく、「整った基盤の上に置かれたアクセント」として機能させることが、幅広いクライアントに対応できるポートフォリオを作る上でのポイントです。
Before/Afterで成果を色と数値で示す方法
ポートフォリオで最も差別化効果が高い配色の使い方は、「成果を示す箇所だけアクセント色を使う」手法です。具体的には、Before（改善前）の数値をグレーで、After（改善後）の数値をアクセント色（太字）で表示します。この手法により、クライアントは視線を「成果の数値」に自然と向け、説明文を読まなくてもポートフォリオの価値が伝わります。
例として、「月間PV：3,000 → 18,000（+500%）」という表示で、「18,000」と「+500%」の部分のみをアクセント色にするだけで、Beforeの部分との対比が生まれ、改善幅が視覚的に強調されます。文字色を使い分けることはグラフや図を追加するより実装コストが低く、かつ情報伝達効率が高い差別化手法です。フリーランスのポートフォリオ作成の基本でも成果の数値化が案件獲得の重要ポイントとして挙げられています。
ツール（Wix・Notion）のテンプレートを配色でカスタマイズする手順
WixやNotionのテンプレートを使っている場合、配色の変更だけで「テンプレートそのまま感」を大幅に軽減できます。Wixの場合、「デザイン」→「サイトのテーマ」→「カラー」からサイト全体のカラーパレットを一括変更できます。Notionの場合、ページカバー画像の色調を自分のブランドカラーと合わせ、見出しテキストカラーをアクセント色に揃えることで統一感が生まれます。
テンプレートのカスタマイズで不要な作業は「すべてのパーツを1つずつ手動で変更する作業」です。Wixはサイト全体のカラーテーマを一括適用できる機能があるため、個別変更は不要です。テンプレートのカスタマイズは「全体テーマの色変更1か所」と「プロフィール写真の差し替え」の2操作だけで、外見の多くを変えられます。
CHECK
▶ 今すぐやること：自分のポートフォリオの成果数値（PV・受注件数・評価スコア等）を確認し、その数値が現在どの色で表示されているかチェックしてください。グレーになっている場合はアクセント色への変更を今日実施してください（10分）。
Q：Notionでポートフォリオを作成する場合、配色の自由度は低くないですか？
A：NotionのページはカスタムCSSが使えないため確かに制約はあります。ただし、カバー画像の色調をブランドカラーに合わせる・コールアウトブロックの背景色をアクセント色に統一する・見出しを太字＋カラー表示にするの3点を実施するだけで、Notionでも十分にブランドカラーを反映できます。Notionの制約は「過剰デザイン」を防ぐガードレールとして機能します。
Q：複数の職種に対応したポートフォリオを1つのページで作る場合、配色はどうすればいいですか？
A：職種別のセクションをゾーニング（背景色の濃度変更）で区切り、各セクションのアクセント色を職種ごとに1色ずつ変える方法が有効です。ただし、使用するアクセント色は全セクション合わせて3色以内に抑えることを推奨します。4色以上になるとページ全体の統一感が失われます。
覚えておくこと
統一感8割・個性2割のバランスを維持した。成果数値をアクセント色（太字）で強調した。Wixはカラーテーマ一括変更、Notionはカバー画像色調変更で対応した。ブランドカラーをSNS・メール署名にも統一した。
まとめ：ポートフォリオ配色は3色で完結する
ポートフォリオの配色は「3色（背景・テキスト・アクセント）のカラーパレット」を先に決め、コントラスト比を数値で確認し、職種の印象に合わせて選ぶことで完結します。センスよりも仕組みで解決できる問題であり、この記事で紹介した無料ツール（WebAIM Contrast Checker・Adobe Color・Coolors）を使えば1〜2時間で基盤となる配色の設計が終わります。
配色の迷いは「正解を探す作業」ではなく「クライアントが読みやすい設計にする作業」です。今日から3色ルールとコントラスト比の確認だけでも実践してください。この2点を実施するだけで、現在のポートフォリオの評価は底上げされます。
| 状況 | 次の一歩 | 所要時間 |
| 配色を最初から設計したい | Adobe ColorでAクセント色を1色選び3色パレットを作成 | 10分 |
| コントラストが不安 | WebAIM Contrast Checkerで現在の色を入力してPass確認 | 5分 |
| ツールのテンプレートを使っている | Wixはカラーテーマ一括変更・Notionはカバー画像色調変更 | 15分 |
| 差別化・ブランディングがしたい | サービスの印象キーワードを3つ書き出してブランドカラーを1色決定 | 15分 |
ポートフォリオ配色に関するよくある質問
Q：ポートフォリオの配色はどのくらいの頻度で変えるべきですか？
A：年1回以下で十分です。ブランドカラーは継続使用によって認知が積み重なるため、頻繁に変えることは逆効果です。ただし、転職・独立・スキルの変化などポジショニングが大きく変わる際には、配色を含むポートフォリオ全体の見直しを検討してください。
Q：配色に自信がなく、クライアントに見せるのが怖い場合はどうすれば？
A：WebAIM Contrast Checkerで「Pass」を確認した配色は、客観的な可読性基準を満たしています。自信がない場合は、白背景・ダークグレーテキスト・青系アクセントのシンプルな3色構成から始めてください。この構成は最も汎用性が高く、職種を問わずネガティブな評価を受けにくい設計です。
Q：印刷物（PDF形式のポートフォリオ）の場合も同じ配色でいいですか？
A：基本的な3色ルールは印刷物にも適用できます。ただしPDFは印刷環境によって発色が変わるため、モニター上で鮮やかに見えるアクセント色（RGB）が印刷物では薄く見えることがあります。PDF出力前に「グレースケール表示」で可読性を確認し、グレースケールでも情報が伝わる構成にしておくことを推奨します。
【出典・参照元】
Adobe Color – カラーホイール – パレット自動生成ツール（無料）
Adobe Color – 画像から色を抽出 – 画像からブランドカラーを抽出するツール（無料）
Coolors – カラーパレット生成ツール（無料）
WebAIM Contrast Checker – コントラスト比チェックツール（無料）
Google Fonts – 無料Webフォントサービス、日本語対応あり
Adobe Color – トレンド – カラートレンド参照
W3C WCAG 2.1 – コントラスト比基準の公式仕様
