GLASS
相談する

ノンデザイナーのためのウェブデザイン：デザイナーと効果的にコミュニケーションする方法

Web制作に携わっているディレクターやエンジニア、マーケターの皆さん、チームのデザイナーから意見を求められたとき、こんな経験をしたことはないですか？

デザイナー「ランディングページのカンプを作ったんですが、どんな印象を受けるかご意見いただけますか？」

ノンデザイナー「いいですよ。・・・この辺、ちょっとわかりづらいというか・・・もう少しパキッとした方がいいんじゃないですか？」

デザイナー「・・・パキッと？」

ノンデザイナー「パキッと・・・」

デザイナー「・・・」

私はこんな経験あります。なんとなく違和感を覚えるけどうまく言語化できず「なんて言っていいかわかんないけど～」「なんとなく～な気がする」のような抽象的な回答になってしまうことがよくあります。

これでは良くないなと思い、デザインレビューで気を付けるべきポイントを理解すべく、いくつかの書籍を読んで勉強をしました。せっかくなので、学んだポイントをこの記事で整理したいと思います。

今回は特に重要だと感じた、①ターゲット設定や②デザイン設計フローの全般的な話と、③余白や④配色などのデザイン要素の話をピックアップしています。

①ターゲットユーザー重視のウェブデザイン戦略

冒頭の会話ではいきなり自分がどう思うかを答えていましたが、それがまずNGですね。デザインにはメッセージを届けたいターゲットがいて、そのターゲットに伝わりやすいコンセプトを考える必要があります。

同じ情報を届ける場合でもターゲットが異なれば、届け方は変わります。

例えば、科学館の小学生向けイベントがあるとして、「参加する子供」に向けた場合と「引率の保護者」に向けた場合で強調する情報やコピーも変わりますよね。

  • 参加する子供向け：イベントの楽しそうな写真イメージや「いっしょにやってみよう」「キミも●●ハカセ！」のようなコピー
  • 引率の保護者向け：料金や対象年齢などの判断材料と「子どもの創造力を育てる！」「問題解決力も育つ！親子ワークショップ」のようなコピー

デザインレビューするときはターゲットがだれなのかをまず確認するのが大事ですね。そしてターゲットが何に興味を持つかを考えてコンセプトを決めます。

先の例であれば、子供向けには「ワクワク感」保護者向けには「子供の成長」をコンセプトにするイメージです。

この「ターゲット」や「コンセプト」をどう設定されているのか、デザイナーに確認してからフィードバックしないと、設定している「ターゲット」や「コンセプト」に合わないアドバイスになりかねません。

②ウェブデザインの構成計画：レイアウト前の重要ステップ

ターゲットとコンセプトの話をしましたが、これらを決めた後は伝えたいことをどんな形でどう配置するかを決める必要があります。書籍では構図とレイアウトに分けて紹介していました。

  • 構図：情報の取捨選択、優先順位を決める。情報を伝える手段を決める
  • レイアウト：選定したデザイン要素の配置を決める

構図はあまり意識したことがなかったです。例えば、ノンデザイナーの私がスライド資料を作るときは、とりあえずスライドアプリを開いて伝えたいことをテキストで書き込みます。とにかく情報を伝える方法の主体はテキスト中心で、テキストで伝えづらい部分に図を使う程度です。

デザインの作業はこれとは違って、いきなりキャンバスに要素を並べることはせず、まず伝えたいことを色、写真、イラスト、コピー、テキスト、あしらい等のどの方法で表現するかを決めます。

例えば「楽しい」を表現するときはいろんな方法があります。

  • コピー：オリジナルでビジュアルを凝らした「ハジケル楽しさ」の文字
  • テキスト：フォントデータを使って「科学を楽しんで学ぼう」の文字
  • あしらい：大きさの大小でリズム感を出したカラフルな水玉のあしらい
  • 写真：笑顔満点ではしゃいでいる子供を中心に不定形の曲線で切り抜いた写真
  • イラスト：音符や星の記号と共に両手を挙げて楽しんでいるイラスト
  • 色：彩度の高く、近接しない色相のカラーテーマ

これらを取捨選択したり、組み合わせて、伝えたいことを表現する要素を検討します。

「楽しい」という「伝えたいこと」だけでこれだけの選択肢があります。それ以外にも「伝えたいこと」はたくさんあります。

  • 実施場所、日時
  • 実施内容
  • 参加条件、定員、費用、持ち物
  • 注意事項
  • Q&A
  • アクセス情報　など

当然これらすべてを目立たせることは不可能です。限られた広さのキャンバスで情報を取捨選択して、優先度をつけ、あれもこれもにならず、ターゲットに一番言いたいことをちゃんと伝えることが重要になります。

「デザインは引き算」という表現が書籍にもありました。優先度が低いものをそぎ落として、最も伝えたい本質を浮き彫りにすることでメッセージ性が高まります。

ノンデザイナーは、ついテキストでなんでも表現してしまいます。しかし、デザイナーにフィードバックする際には例えば「楽しい」をコピー、テキスト、写真、色のどれで（または、どの組み合わせで）表現しようとしているのか読み取って、アドバイスする必要があります。

③ウェブデザインにおける余白の重要性と役割

どの本を読んでも余白は重要視されていました。余白には以下の２つの役割があります。

役割１：余白は「何もないこと」を読み手に伝える役割がある

ノンデザイナーの私は大きな余白があると何かを追加して埋めてしまわないといけない衝動にかられます。しかし、良いデザイナーは大きな余白を上手く使って「ここには何もないこと」を伝えます。「何もないこと」を伝えることで、他の強調したい箇所に視線誘導できます。

デザイン要素の中で注目させたいものがあるとき、単に大きくするだけでなく、周りに大きく余白を取ることで目立たせることもポイントですね。

役割２：余白はコンテンツの境界を伝える役割がある

コンテンツとコンテンツの間の余白は「コンテンツの境界」になります。

ノンデザイナーの私は２つのコンテンツを分けようとすると破線を引いてみたり、片方に吹き出しなどのあしらいを入れて区別しがちです。しかし、適切な余白を取ることで２つが異なるコンテンツであることを表現できます。

また、２つのコンテンツが近い（＝余白が少ない）ほどコンテンツ間の関連度合いが強いことを意図していることになり、一緒に見てほしい読んでほしいというメッセージになります。

余白の大きさ一つとっても、読み手に２つの情報の関連度合いを伝えるメッセージになる、というのはデザインの奥深さを思い知らされますね。

下の例は、実際に弊社のデザインレビューで挙がったものです。

青色の見出し文字の行間が広く、その下のテキストとの距離の方が近いのでグルーピングに違和感があります。余白（行間やテキストブロック間の距離）を調整情報のまとまりを意識して、意味が近い情報は距離を近くする原則が大事です。

レビュー中に違和感を感じるときは余白も確認してみましょう。

④基調色とアクセント色の効果的な使い方：ウェブデザインの色彩計画

例えばコーポレートサイトを作る際は、コーポレートカラーをベースカラーとすることが多いと思います。しかし、統一感を出すために何でもコーポレートカラーになるとメリハリのないデザインになってしまいます。

CTAなど注目させる箇所にはコーポレートカラーから外れた色を差し色として使うと有効です。

差し色として「コーポレートカラーの反対の色」を考えたとき、色相が逆側の「補色」が思いつきます。しかし、互いに補色関係にある２色が並ぶとチカチカして逆に視認性がよくないことがあります。

書籍では明度の異なる色ほど読み手に知覚されやすいと書かれていました。

下の例も、実際に弊社のデザインレビューで挙がったものです。

コーポレートカラーである青を全体で利用していますが、左の例では注目を集めるべきCTAボタンが埋もれてしまっています。CTAボタンは差し色を使うなどして視線誘導するのが重要です。この例では色だけの違いですが、ボタンサイズを大きくするなどでより強調するのも良いでしょう。

レビューでは強調すべきものに視線を誘導できるデザインになっているか、色や大きさなどの観点からフィードバックすると良いと思います。

ウェブデザイン学習の参考書籍とレビュー

本記事を執筆するにあたって読んだ本は以下です。より深く知りたい方はぜひご参考に。

  • コンセプトが伝わるデザインのロジック【おすすめ度：★★★】
    • 本記事執筆において最も参考にした書籍
    • 最初から見た目の説明をせず、ターゲット、コンセプトの整理　→　構図、レイアウトの決定　→　清書の流れで意図を持った制作フローの必要性がわかりやすい
  • ノンデザイナーズ・デザインブック【おすすめ度：★★★】
    • 前半で反復、近接、整列、コントラストの４大基本原則を解説
    • かなり実例が多く、ビジュアルとして良い悪いを理解しやすい
  • やってはいけないデザイン【おすすめ度：★★★】
    • OK/NGの差がノンデザイナーでもわかりやすい
    • デザインのポイントごとにセクションが分かれていて、各セクションで重要なポイントが抑えられている
  • なるほどデザイン【おすすめ度：★★★】
    • 「デザイン７つ道具」はノンデザイナーでも理解しやすくポイントを抑えている
      • ７つ道具の１：だいじ事（訴求したいものが何かを十分検討する）
      • ７つ道具の６：虫眼鏡（細部のデザインを揃える）
  • [新版]UIデザインの教科書【おすすめ度：★★★】
    • 上記の書籍はDTPのポスターやチラシなどを含むデザイン全般だが、この書籍はデジタルデバイス（PC、スマホ、タブレット、TV）をターゲットにした良書
    • 人間の認知やデバイス特性などを考慮しつつ、Web特有の表現方法について解説している
    • 一方で、HTML/CSSやマーケティング（SEOなど）には踏み込まずあくまでデザイン上流を深掘りしている内容
  • だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる【おすすめ度：★★☆】
    • OK/NGに納得できるものが多い
    • DTPを含まないサイトデザインの書籍なので、サイト特有のUIデザインについては参考になる部分が多い
  • 赤ペン添削でわかりやすい!選ばれるデザイナーへの道【おすすめ度：★★☆】
    • 悪い例から良い例になる流れがわかりやすい
    • ただ、なぜそう直したかのロジカルな説明は少なめで納得感は少ない
  • 2万回のA/Bテストからわかった 支持されるWebデザイン事例集【おすすめ度：★☆☆】
    • A/Bテストの結果から、支持されやすいデザインを知りたかったが期待とは違った
    • A/Bの内容に差がありすぎて何が要因で改善したのかがわからづらい
    • とにかくA/Bテストを実施して結果が良かった方を使おうという内容
      • 結果を以降のWebデザインに活かそうという内容ではない
  • コンバージョンを上げるWebデザイン改善集【おすすめ度：☆☆☆】
    • コンバージョンに寄与するデザインを知りたかったが期待とは違った
    • デザインの本というより、少しでもコンバージョンをあげるためにエンジニアがレイアウトを工夫するための本という印象

ウェブデザインコミュニケーション：ノンデザイナーのための総まとめ

今回はノンデザイナーがデザイナーに正しくフィードバックを届けられるように、知っておきたいデザインレビューのポイントをまとめました。ノンデザイナーの視点から「あの時、これを知っていたらもっと正確に伝えられたな」と思うものを中心に４つ取り上げました。

ノンデザイナーでもデザインの基本を理解することで、例えば冒頭の「パキッと」の例も「コンセプトがクールでロジカルな印象としているので、角丸は無しで、コピーは視認性の高いフォントに変えるのはどうでしょう」など具体的なフィードバックができるといいなと思います。

チームメンバーやディレクターとしてデザイナーと意見を交わすノンデザイナーの方も多くいらっしゃると思います。感覚ではなく根拠を持って意見を出せるように、この記事が役に立てばうれしいです。

（GLASSデザイナー：中澤からのコメント）
デザインは、思いやりや相手を気遣う気持ちを大切にしないと良いプロダクトは生み出せないと思っています。
今回のブログにある「自分がどう思うかではなくターゲットがどう思うか
」がまさにその通りですね。
「構図」「余白」「色」など、デザインにはひとつひとつの要素に意味が必ずあります。デザイナー側も、その意味を説明できれば説得力のあるデザインにつながるので、必ずデザインの意図を文章化するようにしてノンデザイナーとのコミュニケーションを円滑に進めるようにしていきたいと思います。

とてもわかりやすいまとめ、森さんありがとうございました！

最近書いた記事

もっと見る
カテゴリー： サイト制作 / デザイン / 基礎知識
GLASSで一緒に働いてみませんか？