主に「「やり直し」のホームページ集客術　飯野貴行（ダイヤモンド社・２００７）」の第４章の内容を図にまとめてみました。

※クリックで拡大

それぞれの項目について簡単に説明します。

▼ ヘッダー

ヘッダーには「ホームページの名前・ロゴ」「メインイメージ」
「キャッチコピー」が入ります。

ホームページの名前は検索でヒットしやすいものに、
メインイメージは伝えたいメッセージをイメージさせる写真やイラストを、
キャッチコピーはコンテンツを具体的にイメージさせる言葉を簡潔に。

その他電話番号やメルアドなどの連絡先を入れても良いですが、
情報を詰め込み過ぎて本当に伝えたい内容が埋没しないよう注意してください。

▼ グローバルナビゲーション

特に見て欲しいメニューです。全ページに共通で入ります。
横幅には限度があるので５〜８項目に絞って日本語で記述してください。
どのページからもトップに戻れるように「ホーム」または「トップ」を
一番左に入れておくと良いでしょう。

▼ サイドバー（左メニュー）

サイドバーにはホームページにどんなコンテンツがあるか
一目で分かるメニューを作ります。

縦方向はある程度長くなっても大丈夫なので項目は多くても構いませんが、
重要な情報はスクロールしなくても見えるヘッダー近くに配置します。

メニューの中に「自薦」「他薦」「証拠」の三項目がそろているかも
確認してください。（「三項目」についてはP.166参照）

▼ メインコンテンツ

トップページは見込み客が最初に目を落とす所なので、
いかに目を引きつけられるかが勝負です。

○ お知らせ／最新情報
「キャンペーン」など特にアピールしたい情報は
目立つ所に配置しておくと効果的です。

○ サイト更新情報
短期間で更新される最新情報を配置し
「アクセスすれば何かがある」という期待感を高めます。

○ このページについて
「このページについて」や「私たちが信頼される理由」など
はじめてアクセスしてくれた人のための情報もトップに入れます。

▼ フッター

フッターには会社名や住所、電話番号、ファックス番号、メールアドレスなどの
基本的な会社の情報を掲載します。その他プライバシーポリシー、
特定商取引法に基づく表示、コピーライトなどを入れます。

あとは検索エンジン対策として（サイトマップ的に）メニューを入れたり、
関連サイトのリンクを入れるとSEO効果を期待できます。

主に私がメインで使っているフォントについて解説します。
ほとんどがモリサワの書体です。

全ての書体に共通しますが、ウィエイトは太いほど力強く男性的
細いほど繊細で女性的なイメージになります。
よくゴシックは力強く男性的、明朝は繊細で女性的と言われますが、
それはあまり関係ありません。関係しているのは太さです。

▼ ゴシック体

○ 新ゴ
最も一般的なゴシック体です。
公共の看板や駅名など、街中のいたる所で見ることができます。
ビジネス系はほぼこの書体でＯＫです。
どちらかというと無表情で無機質な書体です。

○ ゴシックMB
モダンな新ゴに比べるとオーソドックスな書体です。
洗練されておらず文字に表情があるため、
感情的なキャッチコピーによく似合います。

新ゴとゴシックMBの違いは解り辛いかもしれませんが、
ゴシックMBにはウロコと呼ばれる飾りが付いています（○で囲った部分）。

▼ 明朝体

○ リュウミン
これはリュウミンの特長ではなく、明朝体全てに言える事ですが、
ゴシック体に比べるとまじめ、固い、古風、などのイメージです。
ゴシックMBよりも表情豊なので、情緒を伝えるのに向いています。

▼ その他

○ 丸ゴシック
子供、女性、やさしい、かわいい、柔らかい、ポップ、などのイメージ。

○ カクミン
ゴシックと明朝の中間の書体、基本は固いが少しくだけたイメージ。

○ 筆
熱い、熱血、怒りなど、和風の中でも激しいイメージ。

▼ 文字の大きさについて

漢字とひらがなが混ざった文章を組む場合は、
それぞれの文字の大きさを変える事で表情を変えることができます。

▼ ぴったりのフォントを簡単に見つける方法

簡単で絶対に失敗しないフォント選びの方法があります。
それは、アマゾンで本を検索する方法です。

例えば、あなたが作っているホームページのテーマがダイエットなら、
アマゾンでダイエット本を検索してみてください。

色んなフォントを使った本が出てきますが、共通点が見つかる事があります。
（見つけられない場合もあります。ダイエットの場合は細めの書体が共通点です）
まずは、これが絶対に外せない条件になります。

そこからは、自分なりにフォントのイメージがあれば、
条件に外れない範囲でやってみてもＯＫですし、
どうすれば良いか解らない場合は、自分のテーマや主張と似ている本を探して、
その本で使っている書体をマネすればほぼ間違い無しです。

▼ パワフルは色で全面を埋め尽くす

赤、青、黒、黄色などのド派手な色を使って、
画面全体を覆い尽くします。
淡い色使いはアウトです。

背景は稲妻でも炎でも不気味な模様でも、
とにかくパワフルになれば何でもＯＫです。

背景に白地が大きく残ってしまうと、
せっかくの楽しい気分がシラケてしまうので、
色やイラストで埋め尽くすようにします。

（ＮＧの例：白地が多いと雰囲気が盛り上がらない）

▼ 特大のキャッチコピーと騒がしい文字

特大のキャッチコピーと大量の文字情報で、
ハイテンションな画面を作ります。
静かなパチンコ屋はありません。

文字は声と同じですので、
大きい文字は大きい声を表し、
大量の文字情報は騒がしさをイメージさせます。

▼ 劇画調かコミカルなイラスト

絵的な要素は劇画調のイラストか、
コミカルなアニメ風のイラストを使います。

写真を使う場合は、
一般人の場合は日常を連想させるので避けます。
芸能人の写真なら、存在自体が非現実的で、
キャラクター化しているので大丈夫です。

フィットネスクラブに求められるイメージは、
美しくなるという夢と、実際に効果があるかどうかの実用性です。

▼ 写真を大きくして美しさの効果を表す

憧れるような美しい女性の顔写真や、
エステを受けている気持ち良さそうな表情を使って
美しさの効果を表現します。

あまり生活感や現実味があるとシラケてしまうので、
明るくソフトな色使いや、ボケ足を多用して、
現実感の無い、夢の世界を作り上げます。

▼ 実効性は大量の文字と図版で示す

エステは具体的な効果を期待する商品なので、
大量の文字に加えて、エステ風景や器具の写真、
コースの行程や説明などを詳しく説明します。

こうすることで、広告が雰囲気や情緒に流れすぎず、
実効性を説得力を持ってアピールすることができます。

▼ 女性らしい淡い色使い

淡いトーンは甘く優しい女性らしさを表します。
ピンクや黄色などの暖色はもちろんですが、
水色などの寒色でも優しさは損なわれません。

それだけでは弱々しいと感じた場合は、
全体の淡いトーンに鮮やかな色を加えると
画面に元気がでて若々しくなります。

但し、鮮やかな色は加え過ぎると激安表現に近づくので、
価格帯を考えてバランスを取ってください。

▼ 夢よりも実用性で勝負する場合は

効果や価格を大きく打ち出した
激安エステ路線の場合は、鮮やかな色を多めに入れ、
大量の文字情報と図版で画面を埋め尽くします。

ただしその場合も、
スリムな女性の写真を入れたり、星形をバック散りばめるなど、
エステらしい夢の部分もしっかり補ってください。

▼ 力強さよりも癒し系

健康目的でフィットネスに通う人が多いですが、
健康のイメージを出し過ぎると力強さが前に出てきてしまい、
暑苦しくなって共感を呼ばない可能性があります。

健康の向こう側にある癒しをイメージすることで、
幅広いターゲットに訴求することができます。

▼ フィットネス中の写真を大きく出す

単なる笑顔の人物写真では、
参加したいという感情にさせることができませんので、
運動中の人物写真を使う必要があります。

癒し系が主流なのでモデルは女性です。
男性がモデルでも間違いではないですが、
その場合はマッチョ系、パワフル系になります。
どちらがいいか、ターゲットに合わせて選んでください。

▼ 白地に純色の配色

配色は白が重要な色になります。
白地の画面に明るい青やオレンジなどの純色を使うと、
画面に爽やかさと元気さが出ます。

白地にできない場合でも、
写真の人物のシャツの色でもいいので、
とにかく画面のどこかに絶対白をいれてください。

▼ 文字情報は多め

フィットネスは実際に効果が出ることが大切なので
イメージだけでは売ることができません。

キャンペーンの情報や価格、
体験会の募集などの情報を沢山入れて、
実用的な役に立つ印象を与えるようにします。

「役立ち感」と「爽やかさ」の２つのポイントを
しっかり押さえることが大切です。

学習塾や予備校に求められるイメージは、
低学年向けか進学塾か、またその他のカルチャースクールかなど、
ターゲットによって異なります。
いくつか例を挙げて解説します。

▼ 低学年向けは淡いトーンで優しさを表現

低学年向けの塾では、
堅実さに優しさを加えた表現がよく似合います。

赤などの強い色を多用すると、頑張りの部分が
強調されすぎてしまいますので、
使いたいときは面積を小さくするように心がけます。

色味は理知的な雰囲気の青系で、
文字も控えめにしてあまり迫力が出ないようにします。

▼ 進学塾は力強い青プラス反対色

画面のどこかに青を使うと
理知的なイメージを表すことができます。

色数は多くしないで、
絞った色数にポイントで反対色を効かせると
無駄の無い堅実な印象になります。

文字情報は多く、
見出しは極太書体で大きく入れることで、
画面が元気になり頼れるイメージになります。

（ホームページは探したのですが、参考になる物がありませんでした。これは悪くないのですが、力強い見出しと反対色のアクセントが欲しいところです）

（改善案。メインイメージ部分はキャッチコピーを極太のゴシックで力強く、アクセントに反対色のオレンジを入れることで画面に活気を出しました。塾の名前はキャッチの邪魔なので小さくしました。）

▼ 女性向けのスクールならピンクをメインに

ピンクは女性向けの情報であることを暗示します。
タイトルなどをグレーの文字で入れることで、
落ち着いた女性向けであることを表現します。

情緒的になりすぎないように、
文字情報はしっかり詰め込んで、
役に立つ実用的な物であることを示します。

保険に求められるイメージは、
信頼感と安心感です。
それぞれどうやって表現するかを解説します。

▼ 沢山の文字情報で信頼感を得る

文字情報を多くすることで堅実な印象となり、
信頼感を獲得することができます。

小さな文字や少ない文字情報では
保険に求められる実用性が感じられず
信頼感も醸し出すことができません。

見出しも大きくはっきりと出して、
文字情報を中心にすると良いでしょう。

▼ 笑顔の写真で親しみやすいイメージ

文字情報をしっかり出して
堅実さをアピールしたところに
笑顔の写真を入れることで親しみやすさを
加えることができます。

笑顔の人物写真が無くなると
素っ気なく堅苦しいイメージになってしまいます。

ただし、笑顔の写真があまり大きすぎて、
文字情報の割合が少なくなってはいけません。
適度なバランスで程よい大きさで入れてください。

▼ はっきりした力強い色使い

安心感、信頼感を演出するためには、
濃くてはっきりした配色にします。

鮮やかすぎたり、色数を多くし過ぎると
軽薄な印象になってしまいますし、
淡い色、優しい色やモノトーンは
保険としては頼りない印象を与えます。

青、紺色、茶色、深緑などの強めの色に
反対色、準反対色を組み合わせて配色すると
上手くいくと思います。

▼ ファミリーのイメージは家族写真で

建物や周辺の緑の写真に家族の写真を加えると、
グッとファミリー感が出ます。

家族写真は目一杯大きくする必要はありません。
大きく使い過ぎるとカジュアルになり過ぎてしまい、
住宅としての信頼感が低下する恐れがあります。

小さく添えるだけで十分効果的です。
家族が手をつないだ写真に犬が入っているのが、
理想の家庭のイメージを最もよく表現できます。

（図１）家族写真は小さく添えるだけで効果がある

（図２）犬が入ると理想のファミリー像に近づく

▼ 建物、環境、家族の３つのバランス

建物の写真は資産価値、環境の写真は実用価値、
家族の写真は精神的な満足を表します。

どれか１つに偏ったり、
逆にどれか１つでも無くなってしまうと、
商品の魅力を１００％伝えることはできません。

もちろん、これら３つは厳密に分けられる訳ではなく、
例えば建物の写真でも実用価値や精神的な満足もイメージさせるように、
それぞれの写真が様々な価値を少しずつ表しています。

（図３）建物の写真が無いため堅実さと現実感が弱い

マンション・住宅は物件によって表現方法が異なります。
今日は比較的高級な物件について解説します。

（１）航空写真で資産価値を伝える

マンションや住宅には、普通に住まいとして利用する価値以外に、
売却して換金できる資産としての価値もありますが、
航空写真を使うことで、価値を客観的に証明し
資産としての価値を強調することができます。

インテリアや家族の写真を全面に出してしまうと、
生活という利用価値ばかりが強調されてしまい、
一家の主であるお父さんの共感を得られません。

資産価値をアピールするためには、
立地や周辺の環境を客観的に証明できる航空写真が最適です。

（図１）航空写真で立地を客観証明。スポットライトが気分を盛り上げる。

（２）建物のアップやインテリアで生活をイメージさせる

資産価値は最大のアピールポイントですが、
必ずサブに建物のアップやインテリアの写真を掲載して、
現実感を補うようにします。

理知的すぎても情緒的すぎても、商品の本当の良さは伝わりません。
理性と感情の両面から説得することがポイントです。

（図２）堅実さと夢のバランスが大切。

（３）自然の写真は高級感と豊かさの象徴

住宅を取り囲む庭園や並木道は落ち着いた情感を表し、
高級感や上品さを暗示します。

建物が大きく、回りの自然が小さくすると、
即物的・現実的な価値を強くアピールできますし、
逆に、建物を小さくして自然を大きく入れれば、
高級で落ち着いたイメージとなります。

実際の商品のイメージに合った雰囲気を選ぶことが重要です。

（図３）情緒ある静かな住環境が暗示される。

（４）フォントは太めの明朝体がよく似合う

メインのフォントは、堂々とした太めの明朝体を使用します。

特大の明朝体で、明快な言葉をゆったりとレイアウトすることで、
歴史ある重厚さを表現し、資産を手にする雰囲気を盛り上げます。

歴史や情緒にはゴシック体は実用的すぎて似合いませんし、
細い明朝体も頼りない印象になるので避けます。

明朝体や隷書体のような、筆書きのぬくもりを感じられるような
書体を選ぶと良いでしょう。

（図４）どっしりとしで重厚な明朝体

自動車はメーカーとディーラーでデザインの方向性が異なります。
メーカーでは車種ごとに、どんな車なのかを伝えることに重点を置きますが、
ディーラーではメーカーが作ったイメージを基盤に売ることに専念します。

今日は自動車ディーラー側のデザインについて解説します。

（１）買いやすさをアピールする

ディーラーのデザインでは、売ることに専念します。
車自体のイメージはCMやパンフレットで出来上がっているため、
後はそれが、いかにお得か、いかに買いやすいかを伝えることで、
購入の後押しをします。

具体的には価格やローン金利をはっきりと大きく表示することです。
価格が小さいと自信なさげに見えてしまうため、
はっきり大きく、激安表現で価格を提示します。

減税や補助金などがある場合も最大限強調して、

今が買い時であることを伝え優柔不断な買い手の背中を押します。

（図１）価格とローン金利を強調

（２）大量の情報でお買い得感を演出

写真や文字を沢山用意して、余白を少なくレイアウトします。
余白が多く情報が少ない画面は、気取ったような冷たい印象を与えるため、
見る人の購買欲に水を差してしまうため避けましょう。

目一杯情報を詰め込むことで、売る側の積極的な態度や熱意を伝えます。

（図２）大量の情報

（３）太字の見出しと鮮やかな配色が気分を盛り上げる

にぎやかな画面は見る人のテンションを上げてくれるため、
購買欲も上がってきます。
大きな買い物には合理的な理由に加えて勢いも必要になってくるため、
暗く落ち込んでいる時には購入を決断できません。

鮮やかな色彩は、極太のタイトルや大量の情報と合わさることで、
お買い得感を最大限に演出する相乗効果があります。

（図３）ハイテンションな配色