Figma模写 #7｜3色で配色センスを鍛えるポートフォリオ模写

Figma模写 #7 は、ベース・カード面・アクセントの3色だけで組まれたポートフォリオを模写して、「どの色をどれだけの面積に置くか」を判断できるようにする課題です。色数を絞ると装飾でごまかせなくなるため、配色そのものが練習対象になります。

題材は Figma Community で公開されている無料テンプレート「Bentolio」です。JavaScript は使わず、HTML と CSS Grid だけで再現します。この記事では色の値・面積比・コントラスト比をすべて実測値で示し、最後に「できた」と自分で判定するための合格ラインまで用意しました。

使用するFigmaテンプレート

2026年8月2日に実ブラウザで開いて確認したところ、テンプレートは公開されたままでログインなしでも閲覧できました。ページ上の表記は次のとおりです。

説明文にある「Bento Grids」は、弁当箱の仕切りのように大小の箱を敷き詰めるレイアウトの呼び名です。1枚のカードが1つの情報を持ち、カード同士は余白だけで区切るという前提を先に頭に入れておくと、CSS Grid への落とし込みが早くなります。

ライセンスの CC BY 4.0 は、作者のクレジットを示せば改変も再配布もできる条件です。模写した成果をポートフォリオとして公開する場合は、「Bentolio by Abdul Rauf を模写」のように出典を書いておけば問題になりません。

万一このファイルが非公開になっていた場合は、Figma Community のポートフォリオテンプレート一覧から「淡い単色系・カードを敷き詰めた1ページ構成」のファイルを選べば、この記事の手順はそのまま使えます。色の値だけ自分で拾い直してください。

模写のルールと進め方

• HTML と CSS のみ（JavaScript は使わない）
• 色・余白・文字サイズの再現を最優先にする
• 写真とアイコンは差し替えてよい（ただし色味は後述の条件を守る）
• レスポンシブ対応は任意（時間があれば挑戦する）

順番を守るだけで手戻りが大きく減ります。色を先に確定させてから組むのがこの課題の肝です。

1. Figma でテンプレートを開き、ベース・カード面・アクセントの3色をスポイトで拾って CSS のカスタムプロパティに書き出す
2. HTML の骨格だけを先に書く（header / main のカード群 / footer）
3. CSS Grid でカードの配置を決める。この時点では中身を入れず、背景色と余白だけで格子を再現する
4. 各カードにテキストと画像を流し込む
5. 後述の「完成条件」で自己判定する

HTMLとCSSの構成

構造そのものは素直です。ヘッダーとフッターを外に出し、真ん中の6枚のカードだけをグリッドで扱います。

<header>  ロゴ ＋ ナビ3リンク

<main>    カードA：キャッチコピー
          カードB：人物写真
          カードC：作品プレビュー
          カードD：自己紹介文
          カードE：Contact me（CTA）
          カードF：プロジェクト名リスト

<footer>  SNSリンク

カードの配置は grid-template-areas で名前を付けると、あとから入れ替えるときに CSS だけで済みます。骨格は次の形です（値は自分で詰めてください）。

.bento {
  display: grid;
  grid-template-columns: /* 3列ぶんの比率を決める */;
  grid-template-areas:
    "hero photo works"
    "about cta works";
  gap: /* カード間の余白。ここが唯一の区切りになる */;
}
.card-hero  { grid-area: hero; }
.card-photo { grid-area: photo; }

グリッドの基礎に不安があれば、CSS実装テクニック集でレイアウト系の記事を先に確認しておくと詰まりにくくなります。

セクション別の実装ポイント

ヘッダー

• 左にロゴ（テキスト）、右に PROJECTS / ABOUT / CONTACT の3リンク
• 固定ヘッダーではなく、カードと同じ面の上に自然に乗っている
• ナビは大文字＋letter-spacing をわずかに広げると原本の質感に近づく

ヒーローカード

• 3行のキャッチコピーのうち2語目だけがイタリック。この強弱が原本の印象を決めている
• 元のフォントが手元に無い場合、Google Fonts の Outfit や Poppins が代用になる（どちらも2026年8月2日時点で配信を確認）

人物写真のカード

• カードと同じ border-radius を画像側にも当てて、角の丸みを揃える
• object-fit: cover を使うが、高さ（または aspect-ratio）を与えないと切り抜きは起きない。詳しくは「つまずきポイント」に実測を載せた

作品プレビューとプロジェクト名リスト

• 右列は1枚のカードの中に、画像1枚＋プロジェクト名4件が縦に積まれている
• 項目の区切りは border-bottom の細い線。線の色はカード面より少しだけ濃いピンクで、黒い罫線は使われていない

CTAカード「Contact me」

• 画面内でアクセントカラーを使っているのはこの1枚だけ。ここを増やすと配色が崩れる
• 文字は黒。白抜きにするとコントラストが足りなくなる（後述）
• 右上の矢印アイコンが「押せる」ことを示している。色だけに頼っていない点が学びどころ

フッター

• INSTAGRAM / TWITTER / LINKEDIN の3つを Flexbox で横並びにするだけ
• フッターも独立した1枚のカードとして扱う。全体を通してカード以外の面が存在しない

3色の配色を実測で読み解く

このデザインは3色で構成されています。上のスクリーンショット（1024×729px）から色を拾った結果が次の表です。

面積比を数えると「60対30対10」にはならない

配色の話では「60対30対10」「70対25対5」といった比率がよく紹介されます。ただしこれは規格や公式ドキュメントに根拠のある数値ではありません。実際にこのテンプレートの画面を1ピクセルずつ3色に分類して数えた結果が次のとおりです。

計測方法は、スクリーンショットの全ピクセルを3色のうち最も近いものへ分類し、RGB各成分の差が±14以内のものだけを一致とみなして数えたものです（2026年8月2日実測。JPEG圧縮による誤差を含むおおよその値）。比率を暗記するより、「アクセントを画面内で1箇所に絞る」ほうが再現性があります。実際このデザインでアクセント色を使っているカードは Contact me の1枚だけです。

コントラスト比で見ると文字色の選択肢は狭い

WCAG 2.2 の達成基準 1.4.3 Contrast (Minimum)（レベルAA）は、テキストに 4.5対1 以上のコントラスト比を求めています。例外は大きな文字（18ポイント以上、または太字で14ポイント以上）で、この場合は 3対1 で足ります（出典: W3C WCAG 2.2 / 1.4.3・2026年8月2日取得）。同じ規格の コントラスト比の定義式で、上の3色を計算すると次のようになります。

つまりこの淡いパレットでは、文字色は実質「黒に近い色」しか選べません。原本の CTA が白抜きではなく黒文字なのはそのためです。自分で色を変えたときは WebAIM Contrast Checker に背景色と文字色を入れれば同じ比が出せます。

もう1つ押さえておきたいのが面と面の比です。カード面とベースは 1.16 対 1、アクセントとカード面は 1.40 対 1 しかありません。WCAG 2.2 の 1.4.11 Non-text Contrast は「UIコンポーネントや状態の識別に必要な視覚情報」に 3対1 を求めていますが、この配色は面の色だけではボタンの領域を示せない水準です。だからこのデザインは、余白・文字サイズ・矢印アイコンで「押せる場所」を伝えています。模写のときも同じ方針を守ってください。

「なぜこの配色が良く見えるのか」を言葉にできるようになると、次のデザインにも応用が効きます。手順はデザインの言語化トレーニングにまとめてあります。

完成条件（この課題ができたと言える状態）

見た目が「なんとなく似ている」で止めないために、自分で合否を出せる基準を用意しました。5つすべてが満たせていれば完成です。

2つ目の判定は目視では難しいので、完成画面のスクリーンショットを撮り、カラーピッカーで文字色と背景色を拾ってコントラストチェッカーに入れてください。合格ラインを1つでも外したまま次の課題へ進まないのが、模写を上達に変えるいちばんの近道です。

つまずきポイント

この課題で実際に手が止まりやすい5点です。1と2は同じ条件を実ブラウザ（Chrome 150 / 2026年8月2日）で組んで測った値を添えています。

レスポンシブとアニメーション（任意）

PC は3列、モバイルは1列に積み替えるのが基本です。grid-template-areas で組んでいれば、切り替えは areas の書き直しだけで済みます。

• ブレークポイントは1つで足りる。@media (width < 768px) で1列へ
• 1列にしたとき、Contact me が最下部に落ちないよう順序を確認する
• ナビは中央寄せ、SNSは縦積みにしてもよい

アニメーションは必須ではありません。入れるなら CTAカードの hover に transform: scale() と transition を足す程度で十分です。見出しをスクロールでフェードインさせたい場合も IntersectionObserver だけで実装でき、ライブラリは不要です。

おすすめ参考書籍

デザイン理論をより深く学びたい方に、実務でも役立つ定番書籍を3冊厳選しました。

なるほどデザイン 目で見て楽しむデザインの本。 [ 筒井　美希 ] 価格：2,200円（税込、送料無料) (2026/5/10時点) 楽天で購入

ノンデザイナーズ・デザインブック第4版 [ ロビン・ウィリアムズ ] 価格：2,398円（税込、送料無料) (2026/5/10時点) 楽天で購入

見てわかる、迷わず決まる配色アイデア3色だけでセンスのいい色 [ ingectar-e ] 価格：1,980円（税込、送料無料) (2026/5/10時点) 楽天で購入

次の課題へ

1つ前はFigma模写 #6｜シンプルカードレイアウト3パターンです。カードの作り方そのものに不安が残った場合は、先にこちらへ戻ってください。

次はFigma模写 #8｜広告バナーデザインの3色配色に進みます。同じ3色配色を、ページではなくバナーという限られた面積で扱う課題です。今回覚えた「アクセントを1箇所に絞る」がそのまま効きます。

配色以前に「デザインのどこを見ればいいか」で迷うなら、構造・視覚・文字でUIを検品する手順が役に立ちます。ほかのレベルの課題は模写コーディング課題一覧から選べます。

よくある質問（FAQ）

Q. たった3色でも本当にデザインは成立しますか？

成立します。今回のテンプレートはベース・カード面・アクセントの3色で全画面を構成しており、色数の少なさは余白・文字サイズ・写真で補われています。色数が少ないほど「どこにアクセントを置くか」の判断が結果に直結するため、配色の練習としてはむしろ条件が厳しくなります。

Q. ベース・メイン・アクセントの面積比に正解はありますか？

規格として定められた正解はありません。「60対30対10」「70対25対5」といった目安が広く紹介されていますが公式仕様に基づく数値ではなく、このテンプレートを実測した面積比（カード面52.4%・写真等22.9%・ベース14.6%・アクセント10.1%）とも一致しません。比率を暗記するより、アクセントを画面内で1箇所に絞るほうが再現性のあるルールです。

Q. Figmaのテンプレートは無料で使えますか？

今回使う Bentolio は Figma Community で無料公開されており、2026年8月2日時点ではログインしなくてもページを閲覧でき、「Figmaで開く」ボタンから自分の環境へ取り込めます。ライセンスは CC BY 4.0 と表示されているため、作者 Abdul Rauf のクレジットを示せば改変も公開もできます。

Q. 模写した作品をポートフォリオに載せてもよいですか？

出典を明記すれば問題ありません。CC BY 4.0 は原作者のクレジット表示を条件に改変と再配布を認めるライセンスなので、作品ページに「Bentolio by Abdul Rauf（Figma Community）を模写」と書き添えてください。採用担当者に見せる目的なら、模写であることと自分で判断した箇所を分けて説明したほうが評価されます。

Q. 色はFigmaからどうやって取り出しますか？

Figma上で対象のオブジェクトを選択すると、右パネルの Fill にカラーコードが表示されるのでそのまま控えます。テンプレートを複製せずに進める場合は、画面のスクリーンショットを撮ってカラーピッカーで拾っても構いません。ただし JPEG で保存すると圧縮の誤差が乗るため、PNG で保存してから拾うほうが正確です。

Q. アクセントカラーを好きな色に変えても構いませんか？

構いませんが、変えたらコントラスト比を計算し直してください。今回のパレットは淡いため黒文字なら 11.67 対 1 で余裕がありますが、濃い色に替えると今度は黒文字が沈みます。WCAG 2.2 の 1.4.3 が求める 4.5 対 1（大きな文字は 3 対 1）を、変更後の組み合わせで必ず確認するのが安全です。