WEBデザインで失敗しないために。リニューアル前に準備しておくべきこと

WEBサイト制作の依頼を受けるたびに、同じようなパターンを目にします。

「とにかくオシャレなデザインにしてほしい」
「デザインはデザイナーに任せればいい」
「ブランドの世界観をうまく伝えてくれるはず」

こういう感じで進めてしまう企業さまがとても多いです。実際、結果は大体同じようになり、完成したサイトを見てみると、なんか違う。という事になる。

失敗する理由を考えると、実はデザイナーのせいではなく、企業側の準備不足が9割くらい占めていると思います。これは何度も見てきたパターンですね。

今のWEBデザインの環境は、昔と違ってきています。昔は「見た目がきれいなら良い」くらいでしたが、今はそれだけでは足りません。ユーザーが実際に使えるかどうか、成果に繋がるかどうか、そういったところが求められるようになったわけです。

なぜ昔と同じでは成果が出ないのか

なぜ昔と同じようにやって、成果に繋がらないのか。それはGoogleの検索ランキングの仕組みが変わってきたからだと思います。

昔のGoogleは、テキストの量とかキーワードの出現頻度とか、そういった単純な指標で判断していました。でも今は違います。ユーザーが実際にサイトで何をしているのか、どのくらい滞在しているのか、実際の成約に繋がっているのか、そういうことを見ているんです。スマホでちゃんと見られるかどうか、ブランドとしての信頼性があるかどうか、そういったことまで見られています。

つまり、デザインがきれいなだけのサイトは上位に来ない。実際に使えるサイト、信頼できるサイト、そういうものが評価される時代になったということですね。

これを理解していない企業は、デザインだけにお金をかけて、実際には成果が出ないという不幸な自体に陥ってしまいます。

店舗で例えるなら

WEBサイトを店舗に例えると分かりやすいかもしれません。

たとえば高級なコスメブランドのお店があったとします。そこに入ったときに、店員さんが「いらっしゃい。今日は服が3割引だよ」などと言ってきたら、変ですよね。不安になりますし、そのブランドの価値が下がる感じがします。

逆に、駅前の八百屋さんなのに「いらっしゃいませ。本日ご提供させる野菜は、有機栽培のものばかりでございます」とか言われても、これも変ですよね。なんか距離を感じちゃう。

つまり、そのお店がどういう位置付けなのか、それに合った接し方をしないと、お客さんは心理的な距離を感じてしまうんです。これはWEBサイトも同じではないかと思います。

高級感を売りにしているのに、デザインが安っぽかったら駄目ですし、親しみやすさを売りにしているのに、デザインが堅かったら駄目です。そのズレが生じると、後で修正が大変になってしまいます。

最初の準備がもっとも大切

では、具体的に何をすればいいのか。

ブランドの基本的なことを決めておく

「誰に、何を伝えるのか」を最初に言葉にしておく必要があります。

スキンケアのブランドを例にするなら、こんな感じです。

ターゲット…30〜40代で肌に悩みを持つ女性 世界観…上質で、シンプルで、機能性を重視している 

避けたい雰囲気…安っぽい感じ、大げさな謳い文句、セール的な雰囲気

これを社内で共有しておくことが大切です。決裁者と商品担当と、同じ理解を持っておくと、後でデザイナーに伝えるときに、変な誤解が生じません。

参考になるデザインを集めておく

「こんな感じで」という言葉だけだと、人によってイメージが全く違ってしまいます。だから参考になりそうなデザインを、たくさん集めておくことがポイントです。

Pinterestで「スキンケア ミニマル」と検索して、いいなと思ったデザインを保存しておく。InstagramのD2C企業の広告とか、海外のサイトとか。そういったものを参考にしながら、チーム内で「これはいいね」「これはちょっと違うな」という話をしていく。

2025年のトレンドは「ナチュラル系」とか「モノトーンで余白が多い」とか「淡い色」みたいな感じが多いような気がします。ただ、大事なのは流行をそのまま真似することじゃなくて、自分たちのブランドに合わせてアレンジすることです。

色について考えておく

色については、大きく3つの役割に分かれています。

背景や余白に使う色が7割くらい。ブランドを象徴する色が2割半くらい。ボタンとか強調したい部分が1割くらい。デザイン全体の面積に占める割合で言うと、このような配分です。

最近はダークモード対応のサイトも増えてきてますね。夜に見るときに目が疲れないという利点があります。また色盲の人とか、色の見え方が違う人でも見やすいように、という配慮も必要になってきています。

Googleのランキング評価でも、色のコントラストが適切かどうかが影響するようになっているので、単に見た目だけではなくて、全員が見やすいかどうかを考える必要があります。

スマホを中心に考える

スマートフォンからのアクセスが8割以上になっているのに、未だにパソコンから考えてスマホに対応させるという企業も多いです。でも今はスマホで完成させてから、パソコンに対応させるというやり方が普通になってきました。

サイトの構造でよくある問題としては、メニューが複雑で何をクリックしたらいいか分からない、購入ボタンが1個だけで見つけづらい、スクロール量が多くて途中で去られるという問題もあります。

改善するにはどうするかというと、1回のスクロールで「このブランドって何が違うの？」という部分を見せる。購入ボタンとか問い合わせボタンを何箇所か置く。スクロールしたくなるような流れにする。こういった工夫が必要です。

Hotjarというツールを使うと、ユーザーがどこをスクロールしているのか、どこをクリックしているのか、そういったことが分かるようになります。Microsoft Clarityというツールは無料で、AIが自動分析してくれたりします。

社内とデザイナーで合意しておく

制作が進んでから「あ、イメージと違う」となると、修正が大変なことになります。

ですから最初の段階で、色やレイアウト、言葉遣いなど、全体の方向性をちゃんと詰めておく必要があります。「これはOKで、これはNGです」というのをスクリーンショットで見せるのが効果的です。言葉だけより、実物を見せた方が、デザイナーも理解しやすいです。

「ブランドボイスガイドライン」という、うちのブランドはこういう雰囲気でこういった言葉遣いをします、みたいなドキュメントを作っている企業も増えてきていますね。SNS担当とかライター、営業チームとか、色々な部門の人が同じトーンで統一できるので便利です。

実際のサイト構成について

では、実際にはどのような構成が成果を出しているのか。

サイトの最初の部分では「このブランドは信頼できそうだ」と思わせることが大事です。商品の写真だけではなく、「この商品を使うとどういう生活になるのか」という、未来像を見せるんです。ライフスタイル写真とか、実際に使ってる人の表情とか。そういう感情が伝わる画像が効果的です。

それから、最近のトレンドは「生の声」が効くということです。実際のユーザーがSNSに投稿したスクリーンショットとか、購入者のレビューとか、そういったものが著名人の推薦より信用されるようになってきました。

ただ、セール情報の出し方には気をつける必要があります。高級感を売りにしてるブランドなのに、「50%OFF！」と大きく出してしまったら、急に安っぽく見えてしまいます。小さめに出すとか、色を落ち着かせるとか、ブランドの世界観を壊さない工夫が必要です。

鉄板の構成を表にまとめてみましたので、参考にしてくださいね。

AIなど最新のツールについて

最近のツールは色々と便利になってきています。

ワイヤーフレームとか構成の初案は、UizardやFigma AIに「こういう感じ」と指示すると、自動で作ってくれるようになりました。文章だってChatGPTに書かせて人間が直すというやり方も一般的になってます。色とかフォントの提案も、AIがやってくれるようになってきています。

ただしAIを使用する場合も、全部任せるのではなくて、AIが作ったベースを人間が調整するというアプローチの方がおすすめです。AIだけだと無難になり過ぎたり、個性がなくなったりするからです。

競合調査もツールでできるようになってきていますし、構成の提案もサポートしてくれるようになりました。AIなどの最新のツールを活用することで準備がより効率化できるようになりますので、ぜひ活用してみてください。

まとめ

昔は大半の企業さまが「おしゃれなサイトを作ること」を目標にしていましたが、今はそれだけではいけません。ユーザーの信頼を得ること、使いやすさ、成約に繋がる導線、ブランドの一貫性、こういったことすべてが必要になります。

そしてこれらすべてが、WEB担当者の準備にかかっています。デザイナーは優秀ですが、「何を作るべきか」が見えていなければ成果は生まれません。あなたの準備の質が、最終的なサイトの成功を左右するのです。出来上がったサイトに満足できるように、素晴らしい成果が出るように、ぜひしっかりと準備をして臨んでください。

おまけに

この記事で触れたことを、実際の仕事で活用できるようにするために、デザイン指示書のテンプレートや配色ガイドなど、そういったものを準備しています。完成したらご案内するつもりですので、お楽しみに。