「信頼感」をアップさせるデザイン手法って？

「信頼感」をアップさせるデザイン手法って？

あなたが、とあるホームページを生まれて初めて開いたとき。
「このページに書いてあること、信用していいんだろうか・・・？」まず、こう考えませんか？

「このサイトには、はたして本当のことが書いてあるんだろうか？」
無意識にでも、サイトの「信頼感」を気にする人は多いと思います。

あなたのサイトに初めて訪れるお客さんも、たぶん、同じことを気にするはず。
「このページは、信用していいんかな・・・？」
お客さんのそんな不安を解消してあげるために、「デザイン」が活躍することもあるんです。
（※もちろん、例外もあります。ワザと怪しいデザインにすることで反応率を上げる方法もありますが、それはあくまでも「特例」の高度なテクニック）

信頼感をアップさせるコツ

とくに、法人が運営するサイトの場合。
例えば、「細部までシッカリとデザインされたページ」を作ることで、信頼感を演出することができます。
（もちろん、ウソを書かないことが大前提ですけど）

私が働いているWeb業界では、ページの中の細かい部分をそれっぽく（？）見せることを、「ページの作りこみ」と呼ぶことがあります。

「でも、それって、プロの制作者だから出来ることなんじゃないの？」

確かに、本格的な作りこみは、経験を積んだプロのデザイナーじゃないと難しい。
でも、「知っていさえすれば」マネできるテックニックだって、あるんです。

ページのデザインにちょっとしたスパイスを加えて、あなたのサイトの「信頼感」をアップさせるテクニックをいくつかご紹介しましょう。

参考にするページは、三井ホームのトップページ。
（引っ越したばかりなので、住宅のサイトを持ってきました～^ ^）

このサイトの中で、信頼感をかもし出すために、細部がどのようにデザインされているでしょうか？

ナビゲーションメニューの定番デザイン

ページ左上のサイトIDロゴ「三井ホーム」のスグ下に、「商品紹介」「建築実例紹介」などのメニューが大きく表示されています。
このメニュー部分のデザインを、細かく分析してみましょう。

• 各メニューテキストの左に、赤色の三角矢印
• メニューブロックの背景に、グレーの水平線テクスチャ（模様）が薄く引いてある（←目をこらさないと分からないかもしれませんが・・）

このようなデザイン手法は、もはや定番中の定番。
（法人企業のサイトを見て回れば、同じテクニックを頻繁に見かけるはずです）

メニューのデザインをこのように処理することで、「メリハリ」と同時に、上品な「質感」を上手くかもし出すことに成功しています。

「これのどこが、作りこみなのさ・・・？？」
そう思う人は、この2つのデザイン要素が「無い場合」をイメージしてみてください。

どうでしょう？
ページ全体のビジュアル（視覚）的な印象が、かな～り味気ない、ノッペリしたものになってしまうはずです。さらに、メニューを目で追いづらくなります。

ドロップシャドウ

さてさて、今度は、目線をページのいちばん右上に移してみましょう。

「ご相談デスク」
「カタログ請求」
ふたつのメニューの背景に、ドロップシャドウの処理が施されています。
（「ドロップシャドウ」とは：背景に影が落ちているような視覚効果）

ちょっと抽象的な表現ですが・・・（^ ^；
部分的に立体感を持たせることで、ページ全体に視覚的な「リズム」が生まれてきます。
平たく言うと、「見ていても飽きない」わけです。
（※ただし、ドロップシャドウの使いすぎは危険です！「ココ！」という部分に、あくまでもスパイスとして使いましょう）

ついでに。
この部分のメニューだけ、角丸（カドが丸い四角）で処理されていますね。

う～ん、マイルド♪
「丸み」のあるデザインは、見る人に「温かさ」を伝えます。
もしも、ここまでカチコチの四角だったら、ページ全体の印象が、それこそ「ガチガチ」になってしまいますよね（^ ^；

フォント（書体）の使い分け

トップページ全体で使われているフォント（書体）を注意深く見てみてください。

ナビゲーションメニューは、ゴシック。
ページ下、「会社情報」や「What's NEW」などの見出しもゴシック。
で、ページの右上に視線を戻すと・・・あれれ、ココで明朝のフォントが登場しますね。
『あなたと、「建築家」+ インテリアコーディネータ」で建てる。三井ホームの家づくり。』
↑このキャッチコピーの部分です。

なぜ、ココだけ明朝のフォントを使っているのでしょうか？
私の分析では、主な効果はふたつ考えられます。

（1）安心感を演出するため

一般的に、「明朝」シリーズのフォントは、次のようなイメージを伝えられます。
「上品」「成熟」「繊細」「洗練」「安定」
もっと平たく言うと（笑）、いわゆる「オトナ」なイメージです。

ちょっと想像してみてください。
もし、あなたがマイホームを建てるとしたら、どのような業者さんに依頼したいと思いますか？

私だったら、まず、「安心できる」会社を探します。
住宅というのは、それこそ一生に一度の買い物なワケですから・・・。
このキャッチコピーに明朝のフォントを使っているのも、そんなお客さんの要望をくみ取った結果ではないでしょうか。

「三井ホームなら、あなたの信頼を裏切ることはありません」
大丈夫。安心してお任せください。
そのような信頼できるイメージを、フォントでも表現しています。

（2）メリハリを出すため

このページの中で、キャッチコピーが掲載されているブロックと、他の部分のいちばんの「違い」は何でしょう？

ナビゲーションや見出し、テキストリンクは、サイトの「機能」です。
一方で、キャッチコピーは「メッセージ」や「ムード」を伝えるもの。

この役割の「違い」を、フォントの「違い」でも表現しているんですね。

キャッチコピー部分のみを明朝にすることで、パッと見るだけで、誰でも役割の違いを明確に認識することができる（小学生だって、見れば分かると思います）
メリハリがあるから、見ていても疲れないんです。

想像してみてください。
もし仮に、このページに使われているフォントがすべて明朝だったら・・・？
私だったら、目が疲れるからほとんど見ないと思います（^ ^；

いかがでしょうか？

このような、ちょっとした工夫を加えるだけで、あなたのサイトの質感も全然違ってきます（^ ^）

細かい部分を「それっぽく」作るだけで、ページの印象はだいぶ変わってくる。
きちんと作りこまれたページは、やっぱり安心感を与えられます。

「なんとなく、信頼できそうなサイトだな」
お客さんの反応も違ってきます。

ちなみに、今回紹介したテクニックは、「信頼感」を伝えるためのデザイン手法の中の、ほんの一部。
実際には、他にも様々なテクニックがあります。

「こんなテクニックも紹介したい！」
「そういえば、こんなワザもある！」
次から次へと出てくるものなのですが、全部いっぺんに紹介するのは、正直かなりシンドイです（^ ^；
というわけで、また、別の機会に～。