Webデザインの基本

こんにちは深山です。

今日あなたにお伝えするテーマは『HPデザイン』について。

あなたのHPは、ゴチャゴチャして見難いものになっていませんか？読み手はパッと見て…

「あ、このHPは見た方がいいな」

という判断をだいたい3秒〜5秒で行うと言われています。

その間に、読み手の興味を引くことができなければ、あなたのHP存在しないものと同じ。しかも、その原因がデザインだったとしたら…

実は、ちょっとしたデザインの変更だけで、HPの反応率が1.5倍から2倍になることなんてザラにあったりします。信じられないかもしれませんが、僕も経験済みです。

というわけで今回は…

などについてあなたにお伝えしましょう！

[toc heading_levels=”2,3″]

今の時刻は朝5時

なんで朝5時に起きているかって？そりゃ〜4年の1度の大イベント。サッカーW杯を見るためですw

僕が初めてW杯を見たのは、1990年のイタリアW杯の時。今から24年前のこと。24年前と言えば、まだ中学生。眠い目をこすりながら、見たことを覚えているな〜

中学生の僕が夜更かしと言えば、当時テレビ東京でやっていたギルガメッシュNIGHT。通称「ギルガメ」を見るときくらい。当時の深夜番組は、今では考えられないくらい過激なものが多かった気がします（笑）

裸にエプロンなんて当たり前で、裸のエプロンの隙間から何かが見えるんじゃないかとドキドキハラハラしたものです。

テレビが一家に１台の時代…

当時、自分の部屋などなかったし、テレビも一家に1台という時代。ということは、リビングにあるテレビで見ないといけないわけです。

まず、何かあったときにすぐにチャンネルを変えられるように、リモコンを自分の近くにスタンバイ。そして、家族には聞こえないけど、自分では聞き取れるギリギリのボリュームにして、明かりが漏れないようにテレビに毛布をかぶせる。

「イヤホンにすればいいじゃん！」

という声も聞こえてきそうですが、イヤホンにしてしまうと家族が起き時に物音が聞こえないのでNG。これでギルガメスタイルの完成（笑）

毛布をかぶっている時点で、何か怪しいことをしているなんてバレバレなんですけど、当時エロのためになら何でもするという僕の頭には『完璧』の二文字しかなった（苦笑）

ん…

いかん、W杯の話からエロ中学生日記になってるやん！

というわけで本題へ。

またまた面白いCMを発見！

最近、またまた面白いCMめっけた。

カードキャッシングの過払い金は返金できるというもの。このCMの何が面白いのかっていうと、すべてが文字なわけ。CMと言えば、イメージ広告が多いんだけど、このCMは文字だけ。しかも、出てくる文字を読み上げるだけなんだよ。

CM的にはまったくと言っていいほどお金はかかっていない感じ。

どんなCMなのか？

というもの。

このCMはコピー的に見てもすごくよく出来ている。

まず、カードキャッシングという名詞を使うことによって、カードキャッシングした人の目にとまる。そして、過払いのあった人の具体的な数字をあげて信頼性のアップ。最後に、ほんの少しお時間を頂けたら、無料で相談に乗りますというオファー。

素晴らしい！

この内容がたった30秒に収まっているわけです。

CMの見た目の話し

でも、今日僕が言いたいのはこのことではなく見た目の話。

このCM、見た目はまったく派手さがありません。というのも、白画面に黒文字と赤文字のテキストが主な構成。そして、女性の声がそのテキスト30秒読み上げて終わり。

たったこれだけなんです。

ほとんどの人がCMと言えば、きれいな景色があったり、にぎやかな音楽、人気タレントなんてのを思い浮かべると思います。でも、このCMはNO景色なわけです。

NO音楽。
NOタレント。

実は最近、僕のクライアントさんに…

「デザインもコピーの一部だと思っています」
「デザインも指定してください」

という注文を受けました。

デザインなんてやってらんねー

正直僕はこれを聞いて…

「は〜っ。そんなのHPを作るデザイナーの仕事だろ！」
「俺たちセールスライターはコピーを書くのが仕事なんだよ」
「デザインなんてやってられねぇ〜」

って思ったんです。

でも、ここではっと気がつきました。

僕らがどんなにいいコピーを書けたとしても、見てもらえなければ意味がありません。見ないということは、読まれないということですから。やっぱりパッと見て読みづらいHPより、読みやすいHPの方が読まれるわけです。

それはデザインの差でしかありません。

デザインもコピーに入るのか？

それで先日、六本木で、コピーの師匠にもこんな質問をしてみた。

「やっぱりデザインもコピーのうちですよね？」

と。

そうしたら…

「当たり前じゃないですか〜」
「コピーがよくてもデザインで死んだら意味がないですからね」
「徹底的にこだわりますよ」

という答えが帰ってきた。

うん。納得。

そこからデザインや読みやすさにも徹底的にこだわるようにしました。この文字はもう少し大きくとか、この文字とこの文字の間隔は狭くとか、ほんとうに細かいことだけどね。

Webは特にデザインが大事

WEBの場合は特にそう。

WEBの技術もすごく発達しているし、すごく見やすくなってきています。ただ、残念なお知らせが1つだけあるんです。それは、どのHPも同じようにしか見えないということ。

世の中に何億だかのHPがあると思うけど、ま〜どれも似通った作りになっています。それはHP業者が費用を安く抑えるために、テンプレートを使っているからある程度は仕方がないかもしれません。

それでも、似ているものが多すぎると思いませんか？

さっきのCMの例を思い出してみてください。さっきのCMは、きれいな景色も音楽も有名人も使わずに、テキストだけのCMにすることで目立つことができたわけです。

あなたのHPどう？

目立とうとしてきれいに作りすぎていませんか？

きれいなモデルの写真を使いまくり、意味のない動画を入れまくり、あげくの果てには、HPを開いた瞬間音楽なんて流していませんか？こんなHPは最悪です。今すぐやめてください。

間違ってもHPを見たお客さんが…

「あ〜この音楽聞いたことある」
「ちょっと電話してみよう」

なんてことは絶対にありません！！

絶対にです。

もちろん、あなたのHPにしっかりとした、セールスコピーが書けているということが前提条件になりますが、HPのデザインはコピーを引き立てるものでなければなりません。

どうやってHPを目立たせればいいのか？

「じゃ〜どうやって目立たせればいいのか？」

についてお伝えしますね。

もし、あなたがHPをHP制作業者に任せているのであれば、この質問してみてください。

「御社のHPの集客実績を教えていただけますか？」

って。

実績というのはあなたの業種に合わせて考えてくれればいいです。

例えば、整体院ならHP経由の予約がどのくらい伸びたのか？とか、パン屋さんなら、来店率がどのくらいアップしたのか？ということを聞いたらいいでしょう。

HP作成会社は作るのが仕事

けっこう、この部分はないがしろにされている感じがします。というのも、HP業者はHPを作ることが仕事であって、HPから集客することが仕事ではない場合がけっこう多いんです。

あなたと目的が違うわけですね。だからダマされてしまうわけです。ダマされると言うと語弊があるかもしれませんが、要するに、思うような結果がでないということになります。

せっかく、きれいなHPを作ったのにまったく集客できないというのがこのパターンです。このことはあなた自身にも当てはまります。あなたがHPを作った目的をもう一度よく考えてみてください。

さっきの音楽が鳴るHPではなけど…

「この音楽聞いたことある〜」
「このHPきれいなホームページ…」

なんて思ってもらうことが目的ではないはずです。

あなたの目的はただ一つ。

集客することが目的

集客すること。そして、売り上げをあげること。

これしかありません。そのためには…

「今すぐここに電話しなきゃ！」
「今すぐ行かないと売り切れるかも」

と思わせる必要があるということです。これを覚えておいてください。

最後にちょっとしたテクニック

ほとんどのHPは目立っていません。目立っていないということは、見られる確率が果てしなく下がるということになります。

じゃ〜目立たせるためにはどうしたらいいのか？

それは、ゴチャゴチャさせることです。ゴチャゴチャというのは、見にくくするということではなく、テキストの中に手書きの風の文字を加えてみたりするということですね。

逆に、シンプルにするというのも一つの手です。

例えば、僕が作るHPのほとんどのは背景の色は白。カラフルなものは使わない。まして背景に写真などは使ったことすらありません。さっきもどこかで話しましたが、デザインは文字を引き立てるものじゃなくてはいけません。

そう考えると、必然的に背景は白ということになるわけです。そういえば、Appleのサイトもバックは白がメインですね。

文字の色は黒

そして、文字の色。メインは黒。白い背景に黒の文字ということになります。黒でも100％の黒じゃない方がきれいに見える場合もある。このへんは見た感じをテストするしかないので色々と試してみてください。

メインを黒にしたら、あとは使うのは赤と青だけ。加えてももう一色。黄色などを使いましょう。それ以上の色は使いません。使えば使うほど読みづらくなるから注意してください。

フォントはゴシック系か明朝体

そして、フォント。フォントは、ゴシックか明朝に統一する。ただし、WEBの場合は、ゴシックの方が見やすい。最近では、メイリオといフォントをよく使います。Macならヒラギノ角ゴ。これも見やすいですね。

というのも、WEBはゴシックが見慣れているから。

yahooやgoogleなどの記事はすべてゴシックを使っています。ということは、ほとんどの人が見慣れているということになります。見慣れている文字は、読みやすいわけです。

紙媒体なら明朝体を使う

明朝体は紙媒体なら使ってもいい。

これは新聞を見れば分かりますよね？新聞は基本的に明朝体で書かれています。だから、紙媒体を見る人は明朝体に慣れているというわけです。

フォントの大きさは12〜18pt

メインのフォントの大きさは12〜18pt。

最近では、ディスプレイが大きくなってきているし、見やすくもなっているので、12ptでは少し小さい感じがするのでそのへんは調整してみてください。

サブヘッドは、20〜30pt。行間は130％から150％。WEBの幅は、900〜960pix。

こんな感じで作ってもらうと、いい感じのものが作れると思いますよ。

最後に…

HPはテスト、改善、テスト、改善の繰り返しです。一度作ったらあとは、勝手にお客さんがやって来るというのはウソです。

周りのライバルが増えれば当然反応は落ちてきます。そのときに、改善しなければあなたのHPは「死ぬ」ということを忘れないように。

さて、僕のメルマガのテーマである、「見ない・信じない・行動しない」の壁を越えさせるためにはも今回で一区切りです。今まで、全部で9つの方法をお伝えしてきました。

次回は、復習をしながら何か新しいことをお伝えできればと思っています。

それでは、また次回。

ではでは。