こんにちは、デザイン事業部25卒の八木田です。

この記事では、ゼロからの Web デザインのポジショニングマップを用いたコンセプト決定〜コンセプトを落とし込むデザイン制作までの流れをご紹介します。

「デザインしたいけど、何から始めれば良いか分からない」そんな方にぜひ読んでいただけると幸いです。

今回は用いていませんが、コンセプトを決定する手法の一つであるカラーイメージスケールについて書かれた記事「『カラーイメージスケール』を使って感性を情報化する」もあわせてご覧ください。

（補足：今回私は、ワイヤーフレームを元にゼロから Web サイトをデザインする課題として「オンライン専門の観葉植物店」の Web サイトを作成しました。本記事の内容は、課題として一度自分でデザインしたものをブラッシュアップする際に行ったコンセプト決定の工程を紹介しています。）

1. Web デザインのコンセプト決定プロセス

まず初めに、ゼロからデザインする際にはコンセプトを定める必要があります。
コンセプトを定めてそれに沿ったデザインにすることで、Web サイト全体に統一感が生まれます。

コンセプトを決定するまでの過程を順番に書いています。

1-1. 他社 Web サイトのサンプリング

まずは、他社の Web サイトを集めて今回自分が目指したい Web サイトのサンプル集を作成します。

自分が良いな、このデザイン参考になるなと思ったものを10個程度ピックアップします。


（画像: 課題で他社サイトをサンプリングした時の様子）

サンプリングするときの基準として、

  • 制作する Web サイトと同業種の Web サイト
  • 制作する Web サイトと同じターゲットの Web サイト
  • ターゲットが好きそうなジャンルの Web サイト
  • 配置や構成が参考になる Web サイト
  • あしらいが参考になる Web サイト
  • 写真の加工が参考になる Web サイト
  • 色が参考になる Web サイト

の上から順番に重視して選ぶのがおすすめです。

サンプリングするときには、
SP（幅 375px）、PC（幅 1440px）両方の全画面のスクリーンショットとサイトの URL を記録するようにしました。

レスポンシブデザインに対応する場合に SP と PC 両方のデザインをすぐに見比べられると便利です。
また、URL を記録しておくことで後々エンジニアの方に実装を依頼する際、デザインや動きを参考にした Web サイトの URL をすぐにお渡しできると便利です。

Web サイト全画面のスクリーンショットを撮る際は、Chrome の拡張機能「FireShot」を使用しました。
また、Figma に容量の大きい画像をそのままインポートすると画質が落ちてしまうので、Figma のプラグイン「Insert Big Image」を使って画像をインポートしました。

1-2. サンプリングしたデザインの言語化

サンプリングが一通りできたら、次はサンプリングした他社の Web サイトのデザインに対して自分が良いなと思った所を言語化します。


（画像: サンプリングした Web サイトに対してコメントした様子）

実際にやってみて思ったのは、ただ「このあしらいがオシャレ」などだけでなく、「なぜオシャレに見えるのか」、「どのような意図でこのあしらいが使われているのか」など深く考えて書いておくと後により役立つと思います。

1-3. ポジショニングマップによるコンセプトの言語化

次に、サンプリングした他社 Web サイトをポジショニングマップに落とし込みます。

今回は、縦軸が「まじめ・格式高い/アダルト」と「カジュアル/ヤング」、横軸が「シンプル」と「デコレーティブ(要素・多色等)」で作成しました。

ポジショニングマップに落とし込んだ後、ここでようやく今回制作していくサイトのコンセプトを定めていきます。

ポジショニングマップのどのゾーンを狙うかを定め、ターゲットや伝えたいことをもとにコンセプトを言語化します。


（画像: コンセプト決定のために作成したポジショニングマップ）

今回サンプリングしたサイトは、左上の青丸で示した「洗練された・高級感」ゾーンと右下の赤丸で示した「モダン・ナチュラル」ゾーンが多い印象でした。

画像の青丸ゾーンと赤丸ゾーンどちらの方向性でデザインを進めるかを考えます。

今回は「観葉植物をインテリアとして捉えて欲しい」、「丁寧な暮らしへの憧れを刺激する」という目的のもと、青丸「洗練された・高級感」をコンセプトに決定しました。

1-4. 初案のデザインの改善点を言語化

次は、自分がデザインした Web サイトのブラッシュアップを行うための工程になります（ゼロからデザインする場合はこの工程はスキップしてください）。

コンセプトが定まったところで、サンプリングした他社サイトと自分がデザインした元の Web サイトを比較します。
サンプリングしたサイトと違うところ・改善点を言語化します。


（画像: 自分がデザインした Web サイトに対してコメントした様子）

「このフォントが全体のコンセプトに合っていない」などではなく、「コンセプトにあった明朝体のフォントを使用した方が良い」など、すぐに行動に移せる言語化を意識しました。

2. コンセプトに基づく Web デザイン制作の実践

「1. Web デザインのコンセプト決定プロセス」でデザインのコンセプトが定まった後、ようやくデザイン制作の工程に取り掛かります。

2-1. パーツごとのサンプリング

デザイン制作に取り掛かるための準備として、制作する Web サイトに必要なセクションやパーツごとのデザインをサンプリングします。

「またサンプリング？」となるかもしれませんが、この工程で重要なのはこれから制作する Web サイトのデザインを頭の中で具体的にイメージできるようになることです。
「1-1. 他社 Web サイトのサンプリング」はコンセプトを定めるために行っていたので、今回とは視点が異なります。

Web サイト全体のイメージが固まるまでサンプリングを繰り返します。


（画像: パーツごとにサンプリングした時の様子）

今回は、「洗練された・高級感」のコンセプトにあったデザインを制作するために、

  • FV（写真とキャッチコピーをスタイリッシュに組んでいるもの）
  • ボタン（細いラインのあしらいが使われているもの）
  • 商品一覧（商品写真と商品名、値段などのテキストが記載されているもの）
  • 利用者の声（写真やアイコンが使われていないもの）
  • コラム一覧（リスト、スライダー、カード UI など様々な構成）

をそれぞれ7種類ずつほどサンプリングしました。

グラフィカルなデザインをするときには、エディトリアルデザインやブロークングリッドレイアウトなどのキーワードからデザインを探すのがおすすめです。

制作するデザインのイメージが固まったら、いよいよ手を動かす工程に進みます。

2-2. ラフ作成

Figma 上でデザインを始める前に、まず手描きでラフを作成しました。
「2-1. パーツごとのサンプリング」で固めたデザインのイメージをそのまま書き起こし、頭の中だけのイメージだったものを視覚的にする工程です。


（画像: 手描きで作成した Web サイトのラフ）

今回課題を通じて教えていただき、初めて Figma 上のデザインに落とし込む前に手描きラフを作成しました。

これまではいきなり Figma を触ると手が止まってしまったり、修正回数が多くなってしまったりと時間がかかる経験がありました。
手描きで Web サイト全体のデザインを一度自分の中で決定することで迷いが減りこの後の工程の作業時間が短縮できたと感じます。

2-3. Figma でのデザイン開始

ここまできて、ようやく Figma でのデザイン開始です。

ここからは人それぞれやり方が異なるとは思いますが、今回私はラフを元に Figma 上で Web デザインを作り始め、ある程度テキストやカラーが出てきたところでテキストスタイルやカラーバリアブルの登録をしました。

バリアブル化やオートレイアウトなど、Figma データ作成時に意識すべき3つのポイントの解説記事もあわせてご覧ください。


（画像: UI デザインを進める途中で登録したバリアブル）

今回は、ターゲットが20代〜30代の男女ということでスマートフォンで閲覧されることが多い Web サイトであると考え、モバイルファーストでデザイン制作を行いました。

ブラッシュアップ後のデザイン


（画像: 左から修正前のデザインの一部、コンセプト決定後ブラッシュアップしたデザインの一部）
※グレー部分に商品の写真が入る想定です。

コンセプトをデザインに落とし込む5つのポイント

私が課題を進めてフィードバックをいただく中で学んだ、コンセプトに沿ったデザインをするためのポイントです。

1. タイポグラフィと視認性

  • フォント: 使用するフォント（明朝体かゴシック体か）によって醸し出される雰囲気は変わるため、目的に合わせたフォント選びが重要。
  • フォントサイズ: 本文は 16px が基本。最小でも 11px 以上。
  • 可読性の確保: 写真の上に文字を置く際は、レイヤーブラーを入れるなどして可読性を確保。

2. レイアウトと余白の設計

  • 余白によるグループ化: 関連する要素は近づけ、意味の切れ目は余白を広く開けることで情報の整理を行う。
  • 高級感の演出: ターゲットや目的に合わせ、あえて贅沢に余白を取ることで洗練された印象を作ることができる。スクロール数が増えることでユーザーが見たい情報に辿り着くまでの時間を要するため、調整が必要。
  • グリッドレイアウト、ブロークングリッドレイアウト: グリッドによってきっちり並べるとシンプルで堅い印象になる。一方で意図的に要素をずらしたり、枠からはみ出させたりすることでメリハリがつき視線のリズムを生むこともできる。

3.「実データ」が入ったときのバリエーション

  • 写真や文字に実際のデータが入った際の見え方を常に意識し、テキスト量が多い場合のバリエーションなどを踏まえてデザインする。

4. 写真の加工

  • 写真は Web サイトの雰囲気を左右する非常に重要な要素。写真選びはもちろん、トーンカーブや色味の加工など写真のトーンを統一することも必須。

5. あしらいは連想ゲームで考える

  • 「らしさ」を出すためのあしらいは連想ゲームのように考えると良い。例えば、観葉植物店では商品が真っ直ぐではなく高さや奥行きがバラバラに配置されていることが多いため、Web サイトの商品一覧ページも商品カード UI を上下にずらして配置するなど。

まとめ

デザインをゼロから行う際には、デザイン制作に入る前のコンセプト決定に多くの工程を要します。

今回ゼロからデザインをしてみて、デザイナーは「実際にデザインするために手を動かす時間よりも事前に調査や考える時間の方が長い」ということを実感しました。

また、グラフィカルなデザインをするときの考え方やポイントについても、コンセプトを的確に定めることで考えやすくなると感じます。

生成 AI がデザインを生成できるようになった今だからこそ、しっかりとコンセプトを定めて「らしさ」を伝えられるデザインができることが重要だと実感します。