ワイヤーフレームからWebデザインを完成させる方法｜配色・写真・フォントの決め方を初心者向けに解説

「ワイヤーフレームまでは作れたけれど、ここからどうやって完成デザインにすればいいのか分からない」

「色や写真を入れてみたものの、全体がまとまらない」

Webデザインを勉強し始めた頃は、こんなところで手が止まりやすいと思います。

僕自身も、ワイヤーフレームに好きな色や写真を加えれば、自然とおしゃれなデザインになると思っていました。

でも実際には、配色・フォント・写真を一つずつ好みで選ぶだけでは、なかなか統一感が生まれません。

大切なのは、サイトの目的やターゲットから「どんな印象を伝えたいか」を決め、その方向へすべての要素を揃えることです。

今回は、これまで作ってきた架空のカフェ「Cafe Lumière」のワイヤーフレームを使いながら、完成デザインへ仕上げる流れを初心者向けに紹介します。

配色やフォントの難しい理論をすべて覚える必要はありません。まずは、自分のデザインに理由を持たせるところから始めてみましょう。

ワイヤーフレームと完成デザインの違い

ワイヤーフレームは、Webページの情報と配置を決めるための設計図です。

例えば、次のような内容を確認します。

• どんなセクションが必要か
• 情報をどの順番で見せるか
• 写真や文章をどこに置くか
• 予約や問い合わせのボタンをどこに置くか
• PC版とスマホ版で、どのように並べるか

一方、完成デザインでは、この土台へ配色・フォント・写真・余白・ボタン・カードなどを加えます。

ただ装飾を増やすのではなく、情報の重要度を見た目で伝え、読みやすさや操作のしやすさを具体化していく工程です。

ここで意識したいのは、ワイヤーフレームをいきなり作り直さないことです。

構成と見た目を同時に考え直すと、「導線に問題があるのか」「デザインの見せ方に問題があるのか」が分かりにくくなります。

まずはワイヤーフレームを土台として使い、完成デザインでは「どう見せるか」に集中します。

もちろん、本番に近い文章や写真を入れたことで不自然な改行や情報不足に気づいた場合は、構成へ少し戻って調整しても大丈夫です。

「ワイヤーフレームを絶対に変えない」のではなく、理由のない作り直しを減らすイメージです。

デザインを始める前に5つの項目を確認する

Figmaで色や写真を入れる前に、次の5項目を確認します。

1. サイトを作る目的
2. 誰に見てもらいたいか
3. どんな印象を与えたいか
4. 店舗やサービスの特徴は何か
5. 最後にどんな行動を取ってほしいか

Cafe Lumièreの場合は、次のように整理できます。

• 目的：店舗への来店を増やす
• ターゲット：20〜30代女性、カップル、フリーランス
• 特徴：自家焙煎コーヒー、手作りスイーツ、Wi-Fi・コンセント、テラス席
• 与えたい印象：自然光、落ち着き、温かみ、親しみやすさ
• メインCTA：席を予約する［予約を受け付ける設定か要確認］

CTAとは、予約・問い合わせ・購入など、ユーザーに取ってほしい行動へ導く要素のことです。

もし予約を受け付けていない店舗なら、無理に予約ボタンを作ってはいけません。その場合は「アクセス・営業時間を見る」など、実際のサービスに合う行動へ変更します。

ここまで整理しておくと、「自分が好きだから」ではなく、「ターゲットへこの印象を伝えるため」という基準でデザインを選びやすくなります。

デザインキーワードを見た目へ変換する

「ナチュラルで、おしゃれなサイトにしたい」だけでは、具体的な配色や写真を決めにくいものです。

そこで、与えたい印象を3〜5個ほどのデザインキーワードに絞り、見た目の方法へ変換します。

Cafe Lumièreなら、例えば次のように考えられます。

自然光

明るく柔らかな光の写真を使い、背景も真っ白ではなく淡い色にします。

落ち着き

色数を絞り、余白を広めに取ります。強い影や派手な装飾は控えます。

温かみ

アイボリーやブラウン、焼き菓子を連想するテラコッタ系の色を使います。

親しみやすさ

本文には読みやすいゴシック体を使い、ボタンやカードの角を少し丸くします。

ゆっくり過ごせる

写真や文章を詰め込みすぎず、セクションの間に呼吸できる余白を作ります。

このように言葉を見た目へ変換すると、配色・フォント・写真を同じ方向に揃えやすくなります。

参考サイトとムードボードを集める

方向性が決まったら、参考サイトや写真を集めます。

このとき、カフェのサイトだけを見る必要はありません。ホテル、雑貨、ライフスタイル系など、目指す空気感に近いサイトも参考になります。

最初は参考サイトを3〜5件、写真・色・書体・質感などを10〜20点ほど集めるところから始めると整理しやすいです。

集めた素材を一枚に並べた参考資料を「ムードボード」と呼びます。

大切なのは、画像を集めるだけで終わらせず、「何を参考にしたいのか」を一言添えることです。

• この写真の柔らかい光
• このサイトの広い余白
• この見出しと本文の組み合わせ
• このボタンの主張しすぎない形

このように要素ごとに見れば、特定のサイトをそのまま真似することも避けやすくなります。

参考にすることと、写真や文章を素材として転載することは別です。実際にサイトへ掲載する素材は、著作権や利用条件も確認しましょう。

Cafe Lumièreの配色を決める

初心者のうちは、たくさんの色を使うよりも、役割を決めた少数の色から始めるのがおすすめです。

まずは「背景となる色」「ブランドらしさを表す色」「視線を引く色」「文字の色」を決めます。

Cafe Lumièreでは、次の配色を出発点にします。

ベース背景：#F7F3EC

真っ白より少し温かみのあるアイボリーです。自然光や木の写真になじみやすく、ページ全体の土台に使います。

メインカラー：#697257

植物や自然を連想させる、落ち着いたオリーブです。小見出し、タグ、アイコンなどへ繰り返し使います。

アクセントカラー：#C4835E

焼き菓子や木、温かな照明を連想するテラコッタです。ラベルや短い下線など、小さな範囲へ使います。

CTAカラー：#4E5D3A

メインカラーより濃いオリーブです。「席を予約する」など、最も重要なボタンへ限定します。

本文：#2D2926

温かみのある黒に近い色です。真っ黒より写真になじみながら、淡い背景でも読みやすさを保てます。

カードと境界線

カード背景は白の#FFFFFF、境界線は淡いベージュグレーの#D8CFC4を使います。

配色で意識したいのは、すべての色を同じ面積で使わないことです。

背景色を最も広く使い、メインカラーはブランドを感じさせる場所へ、アクセントとCTAは目立たせたい場所へ限定します。

「70：25：5」のような比率が紹介されることもありますが、厳密に面積を計算する必要はありません。

それよりも、「アクセントカラーを使いすぎて、どこが重要か分からなくなっていないか」を確認する方が実践的です。

読みやすさは色名ではなく明るさの差で確認する

淡い色はやさしい印象を作れますが、文字まで薄くすると読みにくくなります。

Webアクセシビリティの国際的な指針であるWCAG 2.2では、通常サイズの文字は背景とのコントラスト比を4.5：1以上、大きな文字は3：1以上にすることが基準です。色の組み合わせは目視だけでなく、コントラストチェックツールでも確認しましょう。

詳しい基準は、W3Cのコントラスト解説で確認できます。

Cafe LumièreのCTAに使う#4E5D3Aと白文字は、計算上約7.12：1です。一方、テラコッタの#C4835Eに小さな白文字を載せると約3.11：1のため、通常サイズの文字には使いません。

雰囲気を守ることと、読みにくくすることは別です。文字を濃くする、文字の背後へ面を敷くなど、読みやすさを優先して調整します。

フォントは1〜2種類に絞る

フォントも、増やすほどデザインが良くなるわけではありません。

初心者のうちは、一つのフォントを太さで使い分けるだけでも十分です。

Cafe Lumièreで最初に試しやすいのは、Noto Sans JPです。

• 見出し：BoldまたはMedium
• 本文：Regular
• ボタン：MediumまたはBold

本文が読みやすく、太さの違いで情報の優先順位を作りやすい組み合わせです。

もう少し落ち着きや丁寧さを加えたい場合は、大きな見出しや短いコピーだけNoto Serif JPにして、本文・ナビ・ボタンはNoto Sans JPのままにします。

明朝体をすべての文章へ使うのではなく、短い見出しへ限定するのがポイントです。

Noto Sans JPとNoto Serif JPはGoogle Fontsから確認できます。実際に公開する際は、利用条件と、STUDIOやコーディング環境で使用できるかも確認しましょう。

文字サイズと行間の出発点

PC版では、次の数値から確認を始めます。

• ファーストビューのコピー：48〜56px
• セクション見出し：32〜40px
• カード見出し：20〜24px
• 本文：16〜18px
• 補足：13〜14px
• ボタン：15〜16px

スマホ版では、大見出しを少し小さくし、本文は16px前後を目安にします。

日本語の本文は、行間を文字サイズの1.7〜1.9倍程度から試すと読みやすさを確認しやすくなります。

ただし、これらは絶対の正解ではありません。同じ16pxでも、フォントの形、太さ、色、行間によって見え方は変わります。

数値を機械的に当てはめるのではなく、文章が2行以上になった状態や、スマホの実際の幅でも確認しましょう。

写真は「きれい」だけで選ばない

写真は、サイトの雰囲気を作るだけではなく、文章の内容を具体的に伝える役割があります。

Cafe Lumièreなら、次のような写真が必要です。

• 自然光が入る店内の広角写真
• 看板商品のコーヒー
• プリンやチーズケーキなどの商品写真
• 外観や入口が分かる写真
• バリスタやスタッフの自然な作業風景
• テラス席やWi-Fi・コンセント席


ファーストビューでは、「どんな場所で、どんな時間を過ごせるのか」が一枚で伝わる写真を選びます。

人気メニューのカードでは、写真ごとの明るさ、背景、撮影角度、縦横比を揃えます。一枚ずつはきれいでも、色味がばらばらだと別の店舗の商品に見えてしまうことがあります。

トリミングはPCとスマホで分けて考える

トリミングとは、写真の不要な部分を切り、見せたい範囲を決めることです。

PCでは横長の写真がきれいに見えても、スマホの縦長画面では、人物や商品が切れてしまうことがあります。

写真を配置するときは、次の点を確認します。

1. 写真の主役が何かを決める
2. 顔・商品・ロゴなどを中途半端に切らない
3. PCとスマホの両方で主役が残るかを見る
4. 写真を縦横に引き伸ばさない
5. 文字を置く側に十分な余白があるかを見る

背景写真の上へ文字を載せる場合は、白文字に影を付けるだけで解決しようとしないことも大切です。

文字の後ろに暗いオーバーレイや淡い面を敷く、それでも読みにくければ写真と文字を左右・上下に分けます。

「写真の上に文字を載せること」より、「内容を無理なく読めること」を優先します。

余白・ボタン・カードを整える

色や写真を入れたあと、最後に余った場所を調整するのが余白ではありません。

余白には、関連する要素を近づけ、別のまとまりを離して見せる役割があります。

Cafe Lumièreでは、次の数値を出発点にします。

• セクション間：PCは80〜120px、スマホは56〜80px
• 見出しと本文：16〜24px
• 本文とCTA：24〜32px
• カードの内側：20〜32px
• カード同士：16〜24px
• スマホの左右余白：20〜24px

これも規格ではなく、調整を始めるための目安です。

大切なのは、「同じ役割の余白を同じ値にすること」です。

前回紹介したAuto Layoutでは、要素同士の間隔をGap、要素と枠の内側の間隔をPaddingで管理できます。Figma公式のAuto Layoutガイドでも、GapとPaddingはそれぞれ異なる余白として説明されています。

カードの文章量が増えて見た目が崩れたときは、フレームの高さを手作業で直す前に、Gap・Padding・文字の行間・Hug contentsやFill containerの設定を確認してみましょう。

CTAボタンは行動が分かる言葉にする

メインCTAは、濃いオリーブの背景に白文字を使い、他のボタンより目立たせます。

ラベルは「詳しくはこちら」ではなく、次の行動が分かる言葉にします。

• 席を予約する
• メニューを見る
• アクセスを確認する

PC版では高さ48〜52px、スマホ版では48〜56px程度から確認します。

ボタンは色だけでなく、周囲の余白、形、サイズ、置く場所でも目立たせます。スマホでは指で操作するため、見た目だけ小さく整えすぎないようにします。

カードは装飾を重ねすぎない

Cafe Lumièreのメニューカードなら、白背景、4：3の写真、12〜16px程度の角丸、24px前後の内側余白から試します。

カードを区切るために、背景色・線・影をすべて同時に使う必要はありません。

まずは背景との差、または細い境界線のどちらか一つで十分か確認します。

影や角丸を増やすより、写真の比率、文字の階層、余白を揃えた方が、すっきりまとまることも多いです。

情報の優先順位を見た目で伝える

完成デザインでは、どの情報から見てほしいのかを、文字サイズ・太さ・色・余白・配置などで伝えます。

Cafe Lumièreのファーストビューなら、最優先はキャッチコピーとメインCTAです。

人気メニューでは、商品写真、商品名、短い説明、価格［要確認］の順に見えるよう整えます。

すべての文字を大きくし、すべての要素に色を付けると、どこから見ればよいか分からなくなります。

「すべてを目立たせると、何も目立たない」という状態です。

まずは1画面、または1セクションにつき、最初に見てほしい要素を一つ決めます。その要素を大きく、濃く、周囲を広くし、他の要素は支える役に回します。

優先度を下げることは、情報を不要にすることではありません。読む順番を作ることです。

PC版をそのまま縮小してスマホ版にしない

PC版が完成したら、スマホ版を調整します。

ここで注意したいのが、PC版を小さく縮めるだけで終わらせないことです。

スマホは画面幅が狭いだけではありません。縦スクロールが中心で、指で操作し、PCとは異なる距離で画面を見ます。

Cafe Lumièreでは、次のように調整します。

• 3列のメニューカードを1列にする
• 横並びの要素を、重要な順番で縦に並べ直す
• ファーストビュー写真をスマホ用にトリミングする
• 本文を過度に小さくしない
• 左右に20〜24px程度の余白を作る
• CTAを押しやすい高さと幅にする
• ヘッダーをロゴ・主要導線・メニューへ整理する

Figma上で画面全体を縮小して眺めるだけでは、実際の文字の読みやすさやボタンの押しやすさは分かりにくいです。

まずは320〜390px程度の複数の幅で、横にはみ出していないか、文字が切れていないか、写真の主役が残っているかを確認します。

可能であれば、プレビューをスマホで開き、スクロール量やCTAの押しやすさまで見てみましょう。

Cafe Lumièreを完成させる9つのステップ

ここまでの流れを、作業する順番でまとめます。


STEP 1｜目的・ターゲット・CTAを再確認する

見た目で迷ったときに戻れる判断基準を作ります。


STEP 2｜デザインキーワードを3〜5個に絞る

「自然光」「落ち着き」「温かみ」などを、色・写真・余白へ変換します。


STEP 3｜参考サイトとムードボードを集める

一つのサイトを真似せず、要素ごとに参考になる点を整理します。


STEP 4｜配色の役割を決める

背景、メイン、アクセント、CTA、文字に役割を分け、色を増やしすぎないようにします。


STEP 5｜フォントと文字階層を決める

1〜2種類のフォントに絞り、サイズ・太さ・行間で読む順番を作ります。


STEP 6｜本番に近い写真を配置する

明るさ、色味、比率を揃え、PCとスマホの両方でトリミングを確認します。


STEP 7｜余白・ボタン・カードを整える

Auto LayoutのGapとPaddingを活用し、同じ役割のルールを揃えます。


STEP 8｜スマホ版を再構成する

横並びを縦に変えるだけでなく、情報の順番と操作のしやすさを見直します。


STEP 9｜全体と細部を確認する

Figmaを縮小して色や余白のリズムを見たあと、100％表示で文字・線・アイコン・ボタンを確認します。


細かな1pxの調整を続ける前に、CTAが目立つか、情報の順番が自然かといった大きな問題から直すのがポイントです。

初心者がやりがちな失敗

最後に、完成デザインを作るときに起こりやすい失敗を確認します。

参考サイトをそのまま真似する

一つのサイトを横に置いて、構成・配色・写真・装飾まで似せるのではなく、複数の事例から「光」「余白」「文字階層」などを学び、自分の目的へ置き換えます。

好きな色だけで配色する

好き嫌いだけではなく、ターゲット、店舗の特徴、与えたい印象から色の役割を決めます。

フォントや色を増やしすぎる

変化が足りないと感じても、すぐに新しいフォントや色を追加しません。まず文字サイズ、太さ、余白で差を作れるか確認します。

写真の雰囲気が揃っていない

写真単体の美しさだけでなく、一覧にしたときの明るさ、色温度、背景、比率を見ます。

空いている場所へ装飾を足す

余白は欠けている部分ではなく、情報を読みやすくする要素です。「寂しいから」という理由だけで線や図形を増やさないようにします。

PC版をそのままスマホへ縮小する

スマホでは、文字サイズ、写真の切り抜き、情報の順番、ボタンの操作しやすさを個別に調整します。

仮の文章と写真のまま仕上げる

短い仮文章で整っていても、本番文章を入れるとカードの高さや改行が変わります。できるだけ早い段階で、本番に近い文章量と写真比率を入れましょう。

完成デザインのチェックリスト

完成したら、次の項目を確認してみてください。

☐ サイトの目的とメインCTAを一文で説明できる
☐ デザインキーワードを3〜5個に絞っている
☐ 色・写真・フォントが同じ印象へ揃っている
☐ 色の役割が決まり、理由なく新しい色を増やしていない
☐ 文字と背景のコントラストを確認した
☐ フォントを1〜2種類に絞っている
☐ 見出し・本文・補足の違いが見た目で分かる
☐ 同じ用途の写真で、明るさ・色味・比率が揃っている
☐ 写真上の文字が無理なく読める
☐ 同じ役割のGap・Padding・セクション余白が揃っている
☐ メインCTAとサブCTAを見分けられる
☐ ボタンの言葉から、クリック後の行動が分かる
☐ カードへ線・影・背景・角丸を重ねすぎていない
☐ 320〜390px程度の幅で横にはみ出していない
☐ 縮小表示で全体、100％表示で細部を確認した

すべてを一度で完璧にする必要はありません。

まずは「目的とCTAが伝わるか」「文字が読めるか」「全体が同じ方向に揃っているか」の3点から確認するだけでも、改善点を見つけやすくなります。

まとめ｜完成デザインは、判断を揃えていく作業

今回は、ワイヤーフレームからWebデザインを完成させる流れを紹介しました。

完成デザインは、好きな装飾を足していく作業ではありません。

サイトの目的、ターゲット、伝えたい印象を基準にして、配色・フォント・写真・余白を同じ方向へ揃えていく作業です。

今回の流れをまとめると、次のようになります。

目的・ターゲット・CTAを確認する
↓
デザインキーワードを決める
↓
参考サイトとムードボードを集める
↓
配色・フォント・写真を決める
↓
余白・ボタン・カードを整える
↓
スマホ版を再構成する
↓
全体と細部を確認する

迷ったときは、「この色が好きか」ではなく、「誰に、どんな印象を伝え、何をしてほしいのか」へ戻ってみてください。

判断の基準が決まると、見た目を選ぶ理由も少しずつ説明できるようになります。

まずは以前作ったワイヤーフレームを複製し、デザインキーワードを3つ書き出すところから始めてみましょう。

次回は、Figmaで完成させたデザインをもとに、STUDIOでWebサイトとして実装していく流れを紹介します。

最後まで読んでいただき、ありがとうございました。

#Webデザイン #Figma #Web制作 #Webデザイン初心者 #配色 #フォント #写真選び #STUDIO