Figma初心者のバナー制作｜②ワイヤーフレームで配置を設計する

こんにちは。

前回は、架空の脱毛サロンのバナーを作るために、目的・ターゲット・情報の優先順位・CTAの役割を整理しました。

今回は、その設計メモをもとに、Figmaでワイヤーフレームを作ります。

ワイヤーフレームとは、文字や写真を「どこに・どのくらいの大きさで置くか」を決める設計図のこと。

色や装飾を仕上げる前に、情報の配置を考えていきましょう。

今回のゴール

参考デザインを観察し、文字・写真・CTAの配置を自分で決められるようになること。

今回の制作について

前回決めた情報を使い、300 × 250pxの脱毛サロンのワイヤーフレームを作ります。

一番伝えたい情報からCTAへとつながる配置を目指しましょう。

STEP1｜参考デザインの配置を観察する

まずは、脱毛サロンや美容系サービスのバナーを探してみましょう。

今回は色の好みだけでなく、文字・写真・CTAの配置に注目します。

• 最初に目に入るのは文字？ 写真？

• メインコピーと補足情報はどう区別されている？

• CTAはどこに置かれている？

• 文字の開始位置や端は揃っている？

気になったデザインを1つ選び、観察した内容をメモしましょう。

観察例｜バナーの配置を見てみよう

次の画像では、スキンケア商品のバナーを例に、メインコピー・補足情報・写真・CTAの位置を確認しています。

文字の大きさや余白、揃え方にも注目してみましょう。

実際に選んだ参考デザインでも、同じポイントを観察してみてください。

見た目をそのまま真似するのではなく、配置の工夫を自分の制作に活かすことが目的です。

STEP2｜視線の流れを仮に決める

次に、どんな順番で情報を見てもらいたいか考えます。

例えば、

「はじめての全身脱毛」
↓
「自分に合ったプランを無料で相談」
↓
「はじめての方限定キャンペーン」
↓
「無料カウンセリングはこちら」

という流れを想定できます。

ただし、全員がこの順番で見るとは限りません。これは制作するときの仮説です。

今回は次の配置を仮案として考えます。

• 上部：キャンペーン情報

• 中央左：メインコピーとサブコピー

• 中央右：人物写真

• 下部：CTA

具体的には、メインコピーとサブコピーの左端を揃え、人物写真は文字と重ならない右側に配置します。

CTAは下部に独立したスペースを確保し、文字やボタンがフレームの端に近づきすぎないようにしましょう。

この配置だけが正解ではありません。 参考デザインや情報量に合わせて別の配置も考えられます。

STEP3｜Figmaで配置の土台を作る

ここからFigmaで作業します。

① Frameを作る

Frameツールでフレームを作成し、右側の設定で幅を300px、高さを250pxにします。

② 写真の場所を確保する

長方形ツールで、人物写真を置く予定の場所に仮の四角形を作ります。

まだ写真は必要ありません。

③ 文字を配置する

テキストツールでメインコピー、サブコピー、キャンペーン情報を入力します。

文字サイズは仮でOKです。

④ CTAの場所を作る

長方形でボタンの枠を作り、「無料カウンセリングはこちら」の文字を重ねます。

⑤ 位置と余白を整える

文字同士の間隔や、フレームの端からの余白を調整します。

CTAは余った場所に押し込まず、最初からスペースを確保するのがポイントです。

ここまでできたら

フレーム内に、メインコピー・サブコピー・キャンペーン情報・写真の仮置き・CTAが配置されている状態です。

色や装飾はまだ必要ありません。

必要な情報が入り、要素同士が重なっていないか確認しましょう。

STEP4｜「どこ・大きさ・揃い」を確認する

配置できたら、これまでの模写でも使った3つの視点で確認します。

① どこに置く？

メインコピーが見つけやすく、写真が文字を邪魔していない？

② どのくらいの大きさ？

一番伝えたい文字が目立ち、補足情報やCTAも読める？

③ 何と揃える？

文字の左端やCTAなど、揃える場所が決まっている？

例えば、メインコピーとサブコピーの左端を揃えると、関連する情報としてまとまりやすくなります。

STEP5｜100％表示を目安に確認する

300 × 250pxは小さなサイズです。

拡大して作業したあと、Figmaの表示倍率を100％にして、読みやすさや情報の詰まり具合を確認します。

• メインコピーは読みやすい？

• 補足情報が小さすぎない？

• 写真と文字が窮屈になっていない？

• CTAの余白は確保できている？

100％表示は目安です。実際の掲載環境によって見え方は変わります。

読みにくければ、全部を小さくする前に改行や配置を見直しましょう。

必要な情報がすべて入り、文字が重ならず、配置の理由を説明できれば、ワイヤーフレームは完成です。

✏️ 今日やってみよう｜ワイヤーフレームを作る

前回の設計メモを使い、300 × 250pxのワイヤーフレームを完成させましょう。

□ 参考デザインを観察し、メモを作った
□ 視線の流れを仮に考えた
□ 写真・文字・CTAを配置した
□ 大きさと揃い方を確認した
□ 100％表示を目安に読みやすさを確認した

最後に、**「なぜCTAをここに置いた？」**を一言で説明してみてください。

例えば、

「メインコピーと説明を読んだあとに、CTAを見つけやすい位置にしたから」

というくらいでOKです。

🌱 まとめ｜情報を「配置」に変えてみよう

今回は、参考デザインを観察し、視線の流れを仮に考えながらワイヤーフレームを作りました。

大切なのは、ただ並べるのではなく、配置の理由を持つこと。

次回は、このワイヤーフレームをもとに、文字・写真・色・CTAを調整し、完成デザインに仕上げます。