デザイナーが3パターンのデザイン案を制作してくれた！
どれも素敵だけど、自分の感覚だけで選んでいいのかなぁ…？
でも私センスないし、どう選んでいいのか…
だから、自分の「好き嫌い」で選んでしまいがちです。
でもそれではだめなんです。
Webデザインを理論的に理解し、本質を知っておかなければいけません。
では、いい本があるのでそれを基に解説していきましょう。
本記事はこんな方に向けて書いています。
- 新人Webディレクターとしてつまずいてきた過去の自分
- Webデザインに悩んでいる方
- Webディレクター、Web担当になられたばかりでWebデザインのことを知りたい方
- デザイナーの品質チェックの仕方がわからない方
本記事の内容
目次
【沈黙のWebマーケティングに学ぶ】Webデザインの本質
アパレル販売を10年経験した後未経験からWebディレクターとしてWeb業界で2年経験、その後大手企業のWeb担当として2年従事している筆者。
本記事では「Webデザインの本質」を解説していますが、参考文献として「沈黙のWebマーケティング」を採用させていただいています。
500ページ近いボリュームですが、マンガ要素もあり初心者にも読みやすく、ストーリー仕立てでWebマーケティングを学べるため大変人気のある「沈黙のWebマーケティング」。
初級～中級者のWebマーケッターも納得できる内容で”Webディレクター”にとっては必読書と言っても過言ではありません。
▼出版社: エムディエヌコーポレーション、松尾 茂起, 上野 高史『沈黙のWebマーケティング』はこちら
Webデザインの本質は「言葉」。ストーリーを紡ぐこと
Webサイトでモノを買うときに最も重要なのは「安心感」。
「安心感」を得るために必要なのは「言葉」であり、商品やサービスのストーリーだということ。
素敵な写真や、素敵なデザインのようなビジュアルについては、あくまで判断材料の一つに過ぎないのです。
- Webデザインは「アート」ではない。
お客様の知りたい情報は商品やサービスのストーリーであり「言葉」である。 - 相手の心に響くストーリーとはエピソードのようなもの。
筆者の失敗談
新人時代はただただオシャレな雰囲気であればいいと思っていました。
クライアントから参考サイトを聞きデザインの雰囲気を似せ、売れているオススメ商品が目立つように順々に掲載すればいいんでしょ」と思っていました。
当然ですが、結果は出ませんでした。
売上が立つのはカ自社サイトからではなく価格が安く、届くのが速い「Amazon」の売上ばかり…
完全に浅はかでしたね。
お客様が知りたい情報を知る
人は何らかの疑問を解決したいから、Googleなどの検索サイトで検索をします。
商品やサービス、お店を選ぶ際にお客様がどんなことを疑問に思っているのかリストアップしてみましょう。
沈黙のWebマーケティングでは”オーダーメイドの家具”を販売しているサイトということで、以下のようにリストアップしています。
オーダー家具のサイトでお客が知りたいこと
- どんなデザインの家具を作ってきたのか?
- どれくらいの実績があるのか? (お客様の声、 製作事例)
- どんな素材を使っているのか? (シックハウス症候群などは大丈夫か?)
- 実際に製作された家具を見ることができるか?
- 実際の製作現場を見学できるか?
- 部屋のイメージや、 お気に入りの既製品とのデザインテイストを合わせた家具は作ることができるか? 提案してもらえるか?
- 雑誌などを持ち込んで、それに載っている家具のイメージで作れるか?
- 費用はどれくらいか?
- 納期はどれくらいか?
- 対応地域はどこまでか?
- 直接会って相談できるか? 自宅まで訪問してもらえるか?
- 見積、プラン作成の流れはどうなっているか?
- 見積、プラン作成後のキャンセルは可能か?
- 完成品の設置もしてもらえるか?
- 納品後の修理やメンテナンスはあるか?
- 他社と何が違うのか?
- クチコミはどれくらいあるのか?
- 過去、トラブルはなかったか?
出典：出版社: エムディエヌコーポレーション、松尾 茂起, 上野 高史『沈黙のWebマーケティング』
このリストを基に自社の商品やサービスに対しての疑問をユーザー視点でリストアップし、「悩みを解決するエピソードやストーリー」を「文章」で掲載することがWebデザインだということをしっかり認識しましょう。
筆者の体験
新人時代よく社長に「クライアントの会いに行け。商品を見てこい。そしてその会社の強みや想いを聞いてこい。」と言われました。
「忙しくてそんな時間もないし…チャットや電話でヒアリングすればいいじゃん」なんて思って実行しませんでした。
なぜ上司がそんなことを言っていたか今ならわかりますね。
ロジカルシンキング
私たちは商品を買うときに「見た目の良さ」だけを考えるわけではありません。
それが”自分の悩みを解消できるのか”、”自分の欲求をみたすことができるのか”を論理的に考えています。
制作したWebデザインがお客様の悩みや欲求をみたせるかどうか論理的に考えることができてはじめて「Webデザインの良し悪し」を判断できるのです。
つまり、ロジカルシンキングの上、お客様のことを徹底的に考えていなければあなたの制作したWebデザインはどれも”いいものとは言えない”のです。
客観的なデータ分析
ロジカルシンキングを行うためにも「アクセス解析」をして、あなたの商品（サービス）を買っていただきたい顧客や潜在顧客（自社製品を買う可能性のあるユーザー）が「どんな人」で「どんな環境」で「どんなキーワード」で検索しているか分析し、満足していただける”コンテンツ”を作ることが重要です。
そのためには、「Google Anlytics」、「Google サーチコンソール」といったアクセス解析ツールを使用してあなたのサイトに来ているお客様（ユーザー）について分析してきましょう。
Google Analytics
▼Google Analyticsはこちら
https://analytics.google.com/analytics/web/
主に分析できる項目は以下になります。
- どこから流入しているのか?
- どんな人が来ているのか?
- どんなページがよく見られているのか?
- 来た人がどういう行動をしているのか?
- どのくらいの時間滞在してくれているのか?
- コンバージョン率は?
Google search console
▼Google search consoleはこちら
https://www.google.com/webmasters/tools/home?hl=ja
主に分析できる項目は以下になります。
- どんな検索キーワードで入ってきたか?
- どのくらい表示されているか?
- どのくらいクリックされてるか?
筆者の失敗談
サイト分析をし、クライアントに結果報告をするだけでその結果からサイトデザインを変更しようとまではしませんでした。
完全に分析して仕事をした気になっていましたね。
コンテンツファーストとスマホファースト
お客様（ユーザー）が見たいのは、サイトデザインではなく「中身のコンテンツ」です。
いくらサイトデザインが美しく魅力的でも「悩みを解消」できなかったら、サイトから離脱してしまいます。
また、スマートフォンが主流になりつつある最近では、半数以上のアクセスがスマートフォンという状況です。
筆者が会社で管理しているサイトの多くは40～50代が顧客層ですが、それでも7～8割がスマートフォンからのアクセスです。
PCよりも小さい端末で「見やすく」かつ「使いやすい」サイトである必要があるのです。これが「モバイルファースト（スマートフォンファースト）」です。
コンテンツを見やすくするためのポイントを把握しておきましょう。
文章を読みやすくする
- 文字の大きさ、文字色、文章の協調（太字）は適切か？
赤は否定的協調、青は肯定的協調、緑は用語や例示の協調、オレンジは単純な協調 - 文章の行間は適切か？
- 文章自体はわかりやすいか？
- 漢字とひらがなのバランスは適切か？（推敲）
写真を見やすくする
- 写真のサイズは適切か？
- 写真の明るさやコントラストは適切か？
- 写真の構図はわかりやすいか？
（重要な部分を強調。必要に応じてぼかしやトリミングをいれる必要はないか？）
「論理」と「感情」のバランス、「リアル感」
Webデザインにおいて論理的な思考、ロジカルシンキングが重要だということはわかりました。
しかし、それだけでは「人の感情を動かす」ことはできません。
人は”論理”で納得し、”感情”で動くということを理解しておきましょう。
”言葉の力”でお客様の頭の中に「商品を購入した後のワクワクする未来」をイメージさせ”夢”を見させることができます。
しかし、そのワクワク感と同時に生まれるのが「不安感」です。
「このサイトは安心だろうか？」、「イメージと違う商品が届かないか？」といった”現実”を振り返ったときに生まれる感情です。
この不安を解消するのが、写真や動画です。
論理的な文章と連動した写真や動画、イラストなどを掲載することで、「ワクワク感」をプラスしてバランスをとることが重要です。
これを「沈黙のWebマーケティング」では、「リアル感」と表現しています。
Webマーケティングが”アート”ではないということがここでも協調されていますね。
しかし、あくまで「ショーウインドウとしてのリアル感」であって現実に引き戻すような”リアル”ではありません。
写真や動画の掲載は以下のようにならないよう注意しておきましょう。
- 商品が素敵に見えない写真
- お店や会社が素敵に見えない写真
- スタッフが素敵に見えない写真
「客観的な信頼性」をプラス
以上のことから、お客様の「夢を膨らませる」ロジカルかつエモーショナルなストーリー、そして「リアル感」を感じさせる写真や動画を掲載することがWebデザインだということことがわかりました。
しかし、自らが発信するストーリーは主観的であり「本当なのか？」と疑いの念が生まれてしまうこともしばしば見受けられます。
この問題は、”客観的な信頼性”をプラスすることで解決できます。
- お客様の声をたくさん掲載する
- お客様の使用感を写真で掲載する
お客様の声だけでなく、「芸能人の○○愛用」や「インフルエンサー愛用」など権威性のある人物が愛用していることをアピールすることで商品（サービス）に対しての客観的な信頼性をプラスすることができます。
筆者の失敗談
楽天市場では商品のメイン画像に「ランキング1位受賞」と入れて目立たせたり、商品説明にお客様のレビューを画像で掲載したりするのは楽天市場では定番のテクニックですね。
筆者は”胡散臭いしなんかダサい”と感じ積極的に取り組みませんでした。
※2018年頃の状況です。最新の楽天市場の規約にのっとって運営してください。
最後に
「Webデザインの本質」について理解が深まりましたでしょうか？
Webデザインはアートではありません。
Webデザインの本質は「徹底的にユーザーファーストを追求」することであり、そこで最も重要なのはコンテンツの中身です。
コンテンツの中身は以下の点を意識して制作することができれば1人前のWebデザイナーです。
- 自分のお客様と潜在顧客を知ること。そのためのサイト分析。
- ストーリーとエピソードなどの「文章」でお客様に”夢”を見せる。
- 写真や動画、イラストで”リアル感”を出す。
- ”客観的な信頼性”をプラスして安心を与える。
そしてこれらの要素をチェックするのが「Webディレクター」や「Web担当者」の役割で大変重要です。
Webデザイナーと協力して「ユーザーファースト」なWebデザインを作り上げましょう！
関連記事
