集客とブランディングのためのWEBデザイン

ここまでの間に、コンセプト決め、顧客研究、ターゲットやペルソナの設定を行ってきました。またWEBサイトにおける集客対策などについても少し触れたところで、今度はWEBサイト全体のデザインについて考えてゆきたいと思います。ここは、WEBデザインのスクールではありませんので、あくまでも集客とブランディングの為の基本的な内容にとどめ、実際にデザインする訳ではありません。

WEBサイトを構成しているもの

WEBサイトを構成しているものは、雑に言ってしまえば「テキスト原稿」と「写真（イラスト）」と「メニュー（ボタン）」の3種類です。もし、ログイン機能やデータベース、記事の検索機能など、動的な部分が無かったら、企画書や提案書と変わらないですね。

では、イメージを決めている要素は何でしょうか？

WEBサイトのイメージを決めるものは何か

乱暴な言い方をすれば、資料作りと同じで、その写真（イラスト）と文字の配置や、書体、余白の取り方、レイアウトの工夫よって印象が異なって見えるだけなんです。

「神は細部に宿る」という言葉を聞いたことがないでしょうか？

小さな選択が積み重なった時、細部へのこだわりが集まった時、それら全体が整えられた時、美しいという印象をもたらす。そういう事ではないかと思います。

ということは、まずデザインを検討する際にしなければならないことは、大きな印象（方向性やテイスト）を先に決めることなんです。

瞬時に影響を与えるのが色

WEBサイトの構成要素の中でも、最も印象を左右しているものが、写真と色です。

文章（言語情報）よりも、写真と色（非言語情報）は脳に情報が到達するスピードが早く、本能を司る部分へ直行します。

また、色は、心理状態にも影響を与えることが研究で明らかにされていますので、色や写真は、イメージ形成に瞬発的な影響を与えるものなのです。

インパクトを与えるのが、キャッチコピー

次に印象に対して、強いインパクトを与えるのがキャッチコピーです。

色と写真よりは処理スピードが落ちるものの、言語情報の中でも、目立つサイズで強いメッセージ性を放つため、理解されるのが早いからです。

ということは、すぐ目に飛び込んで来て、パっとわかるというキャッチコピーは、いい仕事をしていると云えますね。が進むからです。

徐々に蓄積されるのが、内容や言葉選びのらしさ。

内容を読んだり、写真や図を確認しているうちに、徐々に蓄積されていく印象が、コンテンツや言葉選びの個性です。

同じ事象についても言葉選びが異なるだけで、まるで違う印象を与えてしまいます。

セールスライティングに長けた人と、そうでない人のLPでは売上に差がでるのは、この言葉選びや印象操作の実力の違いです。

無意識のうちに比較されるのが、使い勝手

UI（ユーザーインターフェース）で強いインパクトを与えるという効果は、ほぼ期待できません。

メニューやボタンをユーザーが無意識に使いこなせることが、ユーザーに優しい画面設計であるとされているからです。

一般的によくあるレイアウトやメニュー配置をしていれば、ユーザーから拒否反応が出たり、絶望的に使えないサイトになることは、ほとんどありませんが、既視感の強い、汎用的なサイトという印象を与えてしまうことになります。

個性的な画面設計を採用すれば、斬新さを表現できるものの、使い心地を犠牲にしてしまうリスクも。

汎用性と独自性のバランスは、そのWEBサイトがクリエイティブ志向なのか、マーケティング志向なのか、ターゲットユーザーの世代はどこか、販売なのか、体験型なのか、エンタメ性が強いのか、学術性が強いのか、挑戦的な試みなのか、書類の保管と検索が中心なのか、などなどの要素を検討して、バランスを図る必要があります。

ここから実践編

ここからは実際にデザインを検討する時に何をするべきかやってみましょう。

デザインを決めるためのイメージ絞り込み

「なんとなく、こんなデザインにしたい」「なんとなく明るい感じがいい」「なんとなく使いやすい方がいい」「堅苦しくなく、なんとなく親しみやすいように」などなど。

「なんとなく」という目には見えない感覚的なものを、他人と共有するのはとても難儀なものです。どうにか「なんとなく」を見える化するための手段が無いものでしょうか。

何となく・・・という不明瞭なものを可視化する為に、イメージを集めたイメージボード（ムードボード）というものを活用します。ぜひ、これを作ってみてください。

「なんとなく」を可視化するイメージボード

こんなサイトが素敵だな〜と思っても、技能的に無理とか予算的に無理とか、素敵なイラストが無いとだめとか・・・いろいろと考えすぎることもあるでしょう。しかし、そういった外的要因は脇に置いておいて、こんな雰囲気が良いと思う例を出来る限りピックアップしましょう。まずは、検討のテーブルに素材を乗せることが大事です。

《STEP 02》
一箇所に集めて、俯瞰できるようにする

収集した画像を、一箇所に集めて俯瞰できるようにしてください。一般的にはそれを「イメージボード」と呼びます。最初はただ見つめるだけでよいです。それを俯瞰しながら、この中で最も自分のイメージに近いものはどれか？　お客様が喜んでくれそうな雰囲気はどれか？　色使い、書体の使い方・・・あまりむずかしい事は考えなくて大丈夫です。ただ短い時間でよいので、真剣に思考を巡らすのが大事です。

《STEP 03》
短い時間検討したら、一度忘れましょう。それを繰り返します。

イメージボードを作成したら、それをいつでも眺められる場所に置いて、しばらくの間何度も目にしてください。

素敵だと思って収集した画像も、時間が立つと「そうでもない」と感じる事があります。逆に「まあまあだ」と思っていたイメージ画像が「とても素晴らしい」と思えるようになったり。最初の印象が変化することがありますので、この熟成させる工程は意外と大事です。

ボードの前で長い時間過ごすよりも、１０分くらい真剣に考える、そしてスパッと忘れる。これを何度も繰り返す方がいいアイデアが浮かびます。
（この手法にはちゃんとエビデンスがあるのですが、それは別記事に記載しました）

《STEP 04》
ふとした瞬間にアイデアが降ってくる

一度画像を収集して、一箇所に集めたらそれで終わりという訳ではなくて、何度か画像を入れ替えながら、イメージを固めていきましょう。

特に、《３》を繰り返す事で、ふとした瞬間にいいアイデアが浮かぶようになります。

《STEP 05》
完成予想イメージに近しい雰囲気に仕上げる

ある程度、イメージが固まるまで、《１》から《４》を繰り返し、イメージボードを「完成予想イメージに近しい雰囲気」まで持っていきましょう。

《STEP 06》
言語化する

「完成予想イメージに近しい雰囲気」のイメージボードが完成したら、そこからキーワードを拾っていきましょう。理想の雰囲気やテイストを表現する言葉、デザインのヒントとなる単語をできるだけピックアップしてください。「色と言葉の組み合わせ」「色と言葉と素材の組み合わせ」などなどから、テイストを探っていく事もあります。

イメージボードと言語化リストがあれば、感覚のシェアがラクになる

イメージボードという参考画像集と、テイストを言語化した感性語のリストがあれば、あらゆる場面で感覚の共有がラクになります。

・ストック素材を探す時。
・フォトグラファーに写真撮影をお願いする時
・デザイナーに欲しいデザインの雰囲気を伝える時
・社内でこれから作成するブランドの雰囲気を共有したい時
・ライターさんに原稿をお願いする時
・SNSで投稿する時
・ターゲットユーザーを決める時・・・などなど

AI生成画像・コンテンツへの対応

今やMidjourney・Adobe Firefly・ChatGPTのDALL-EなどでAI生成画像を使うケースが急増しています。AI画像は「雰囲気の統一」が難しく、成果物として統一したブランドイメージを保つのがすこし難儀かもしれません。しかし逆に、イメージボード作成の段階でAIを活用してラフな方向性を可視化するのは簡単にできるようになりました。AI生成コンテンツはSEO・信頼性の観点でのリスク管理も必要ですから、慎重にならざる負えないですが、イメージを固めるという段階では積極的に活用したいところです。

最近はイメージボードがよりインタラクティブに

PinterestやFigmaのムードボード機能に加え、AIでラフビジュアルを生成して方向性を確認するワークフローが普及し、クライアントとの合意形成ツールとして、よりインタラクティブになって来ています。

まとめ

イメージボードづくり。いきなりデザインするのではなく、まずは雰囲気というざっくりした空気感を固めるというところから始める、イメージボード作りについて解説しました。あらゆる場面で有効に活用できるので、本当におすすめです。

関連記事もお読みください

アイデアのつくり方

Design concept