Webサイトリニューアルを検討されている方向けに『好みによらないデザインの指標と差別化方法』を具体的に解説する内容となっております。

本記事は、2024年6月11日ウェビナーで配信した内容をブログ化しております。
動画でご視聴されたい方向けに、本ウェビナーのアーカイブ動画もご用意しておりますので、ぜひご視聴ください。

アーカイブ動画はこちら

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

目次

• 好みに寄らない、デザインの指標とは
• 差別化を図る、Webデザインにおける様々な表現方法

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

今回は「好みによらないデザインの指標と差別化方法」というテーマで、まずはサイトリニューアルを担当する際によく挙げられる悩みについてお話しします。

悩みとして以下3つが挙げられます。

• 自社のWebサイトやページのデザインがどうあるべきかの基準が曖昧
• 制作会社にデザインの説明を受けてもそれで良いかの判断ができない
• 上司や経営層にこのデザインで良いのかの判断を仰ぐが、明確な根拠が見出せずにデザインの好き嫌いで何度も協議が必要になってしまう

好みに寄らない、デザインの指標とは

はじめに「好みに寄らないデザインの指標」を作る上で、良い視点が2つあります。それは「ブランディング目線」と「マーケティング目線」です。 
「ブランディング目線」とは、企業や製品、サービスの提供において共通のルールに基づいてデザインがされているかを意識する視点です。 

最もイメージしやすい例は、企業や製品のブランドロゴです。
ロゴはその会社やブランドそのものを表すデザインであり、オンライン・オフラインを問わず、一貫したイメージを保つ必要があります。

 ロゴの扱い方以外にも、多くの企業ではブランドイメージを統一するため、使用する色や文字の書体など、デザインに関するルールを定めています。
このような企業のブランドイメージを統一するために定められた共通ルールをまとめたものを、ブランドガイドラインやVIマニュアルと呼び、サイトをリニューアルする際も、このブランドガイドラインの規定に沿ってWebサイトのデザインを作ることで、自然と企業らしさが表現されます。

したがって、まずは企業や製品などを含めたブランドのガイドライン、ロゴのルール等がないか調べて、そのルールがどのようなものかを把握した上でデザインを見ることが重要です。

また、ロゴのルール等を定めたガイドラインの準備があれば、事前にWebサイトの制作会社に渡し、そのルールに基づいてデザインの制作をスタートさせるとスムーズになります。 
明確なガイドラインが存在していないという場合は、ロゴのカラーと同系色で構成したデザインや今まで使用してきた広告物に使用してきたカラーやデザインをもとに制作してもらうと、自社に適したデザインに合致しやすいです。

マーケティング目線とは

「好みに寄らない、デザインの指標」をつくる上で、持つと良い2つ目の視点は「マーケティング目線」です。

「マーケティング目線」とは、Webサイトの主要なサイト閲覧者、つまり企業が想定する理想的なお客様をイメージし、そのお客様にどう見えるか、どう使われるかを考えてデザインを捉える目線です。

例えば、企業が想定した理想的なお客様が男性か女性かによってデザインに使用される色や配色は変わってきます。 

これらをまとめた資料としては、理想の顧客像をまとめた「ペルソナ」や、そのペルソナが実際にどのような行動をするのかをまとめた「バイヤージャーニー」などが挙げられます。

もし、このような資料が用意できるのであれば、 これらも事前に制作会社に共有し、それをもとにデザイン案を作成してもらうことで、自社に適したデザインに近づけることができます。

このように「ブランディング目線」と「マーケティング目線」の2つの目線を持つことで、好みに左右されることなく、会社として打ち出すべき最適なデザインを作ることができます。 

関連記事：【テンプレ付】BtoBペルソナの作り方とは？注意点と活用メリットを解説

差別化を図る、Webデザインにおける様々な表現手法

では次に、先ほど説明した2つの目線を持った上で、Webデザインで他社との差別化を狙っていくにはどうしたらいいのかということで、他社との『差別化を図る、Webデザインにおける様々な表現手法』について紹介します。

まず、具体的な内容に入る前に、デザインの表現手法が重要な理由を先にお伝えします。

前提として知っていただきたいことですが、サイト上のテキストを読むサイト閲覧者の割合は全体の約20％しかいないと言われております。加えて、人間の脳はテキスト情報よりもビジュアル情報の方が約6万倍速く処理できるとも言われております。

この2つの事実から言えることとして、サイト閲覧者に向けてテキスト情報を単純にWebサイトに載せるだけでは読まれない可能性が高く、伝わることのないテキストになってしまうということです。

なので、サイト閲覧者に対してテキスト情報よりも遥かに多くの情報を伝えることのできるビジュアル情報であるデザインの表現手法というのはとても重要です。

Webデザインにおける様々な表現手法について

ここからはそのようなビジュアル情報の重要性を踏まえた上で、Webデザインにおける様々な表現手法について紹介していきます。今回紹介するのは以下の4つの表現手法です。

1.  撮影写真により、「自社ならでは」を直感的に伝える。 
2. 撮影動画により、「自社ならでは」を瞬時に多く伝える。
3. タイポグラフィーを駆使し、強いメッセージ性を持たせる。 
4. イラストを駆使し、抽象的な情報を直感的に伝える。

今回は、この4つの表現手法がどのような場面で有効なのかという点も含めて、順番に説明します。

1.撮影写真により、「自社ならでは」を直感的に伝える

この表現手法はWebサイトのデザインに合わせた撮影を行い、そこで撮った写真を使用することで自社の雰囲気やイメージを直感的に伝えるという方法です。

この表現手法が有効な理由としては、自社独自で撮影を行って得られた写真は、ネット上で誰でも購入可能な写真素材(ストック素材)と違い、他の企業や個人のWebサイトとの被りが生じる心配がなく、オリジナリティを演出することができ、企業イメージの差別化に繋がるという点です。

Webサイトに掲載するコンテンツの一部のイメージ画像としての使用であれば大きく問題はないかもしれませんが、Webサイトを訪問したサイト閲覧者が１番最初に見ることになるイメージショットが他社サイトで見たことのある写真素材だった場合、企業イメージの差別化という目的からは遠のいてしまいます。

このような理由から、撮影を行い、他社と被らない自社だけのイメージを掲載するということは差別化を図る上で重要です。

また、撮影写真の特に効果的な場面として、温度感のある印象を画面越しに伝えることができる点です。自社のオフィスで働く人たちのイメージショットを撮影し、Webサイトに使用することで、採用サイトであれば働くイメージをよりリアルに感じてもらうことができたり、コーポレートサイトであればその会社が生み出す提供価値により深みを持たせることができます。

2.撮影動画により、「自社ならでは」を瞬時に多く伝える

動画をWebサイトに使用した表現手法で、こちらも前述の写真を使用した表現手法と同様に、ネット上で購入した動画素材を使用するのではなく、撮影を行うことで他社と被ることのないオリジナルな動画コンテンツを制作することができ、差別化を図ることができます。

撮影動画が特に効果的な場面としては、コーポレートサイトやサービスサイトのトップページ冒頭にイメージ動画として会社のビジョンやサービス・事業の内容を伝える動画を置くことで、最初のタッチポイントで瞬時に企業のイメージ、またはサービスのイメージを分かりやすく伝えることができます。

また、素材や基盤の製造など自社で工場をお持ちの製造業の方々であれば、 工場内を撮影し、生産ラインの一部を動画として見せることも非常におすすめです。

その理由として、一般的なユーザーから見た際に、実際にどのようなものを作っているかというのがなかなか想像しづらいためです。ですが、動画であればユーザーが想像しづらい部分も短時間でわかりやすく伝えることができるので、非常に有効な手段と言えます。

3.タイポグラフィーを駆使し、強いメッセージ性を持たせる

こちらはテキストの印象を強めることで目に留めやすくし、サイト閲覧者に読んでもらうことで伝えたい言葉を届けやすくするという表現手法です。

タイポグラフィーが特に有効的な場面としては、採用サイトにおいて求職者に対して温度感のある言葉を届けたいときです。また、コーポレートサイトやサービスサイトであれば、企業やサービスに込めた想いを言葉を通してより多くの人に伝えたいという場面などです。 

もちろん、どのような言葉を伝えるか、キャッチコピーを考えることも同時に必要になります。 自社にしか表現できない言葉を考え、タイポグラフィーとしてペルソナへ伝えるという、言葉とビジュアルの表現の掛け合わせが重要な手法になりますので、言葉の力を最大限にするためにコピーライターに入っていただくという方法もおすすめです。

4.イラストを駆使し、抽象的な情報を直感的に伝える

こちらは写真では伝えづらい抽象的な情報をイラストを使ってビジュアル化するという手法です。

このイラストを使った表現手法が特に有効な場面としては、ソフトウェアなどの無形商材を扱うサービスサイトにおいて解決できる課題や、提供できる価値といった、少し抽象的なイメージをビジュアルとして表現する際に、とてもわかりやすく表現できるということです。

どうしても写真1枚では表現しづらい説明的な部分を、イラストを使うことで直感的に表現できます。

また、イラストはテイストの違いによって他社との違いを色濃く出すこともできますので、自社らしさを出す際にも有効です。

以上、他社との差別化を図るWebデザインにおける様々な表現手法を紹介してきました。もちろん、Webデザインの表現手法は今回紹介した4つに限りません。しかし、これらはWebサイトの表現を考える際に頻繁に活用される手法であるため、今回特に取り上げさせていただきました。

関連記事：ホームページ(Webサイト)リニューアルの進め方と成功事例