なぜ、ホームページのデザインが重要なのか？

あなたは、「集客できるホームページの、デザインが知りたい!」そう思って、このページをご覧になっていると思います。確かに、デザインの良いホームページは非常に多いですから、自分のサイトのデザインをもうちょっと何とかしたいと思う気持ちはよくわかります。

ところで、なぜデザインを知りたいのでしょうか？　それは、デザインが良いと集客に結び付くと思われているからですよね。しかし、デザインだけを作り込んでも集客できるわけではないんです。実は、集客ホームページのデザインは、集客戦略に則って作るものなんです。

つまり、デザインは戦略とセットで考えることが、最も重要なんです。そこで、ホームページのデザインはどのように考えればよいのか、詳しく説明しましょう。

ホームページのデザイン、パターンは７つ。

それでは、ホームページのデザインのパターンを説明します。７つあるので、しっかりと頭に入れてください。なお、漠然と抽象的な説明をしてもわかりにくいので、『海鮮丼のお店』を例に説明していきましょう。

ネタの鮮度で勝負する場合のデザイン。

ネタの鮮度で勝負する場合について考えてみましょう。海鮮丼の売りがネタの鮮度である場合は、鮮度をどのように伝えるかが重要なポイントです。すると、鮮度の良さは写真で伝えることは難しいでしょう。そこで、詳しく文章で説明することになります。

具体的には、どこで入手し、どんなルートで運ばれてきたのかを説明しなくてはいけませんね。さらに、ネタが新鮮であることをお客さんの感想などを使って、信ぴょう性を高めます。このように写真で伝えられないものは文章で伝えますので、ブログのようなデザインが適するでしょう。

ここで重要なのは、新鮮であることを証明するための証拠を、いかにうまく伝えるかです。するとデザインは文章が読みやすいものが良いということになるわけですね。

ネタの種類で勝負する場合のデザイン。

ネタの種類で勝負する場合について考えてみましょう。海鮮丼の売りがネタの種類である場合は、種類をどれだけたくさん伝えられるかが重要なポイントです。すると、文章だけでは種類を伝えきれないので、写真を多用することになるでしょう。

具体的には、魚の写真とさばいた後の具材の写真を載せ、どんな魚でどんな味なのかを説明することになります。ただし、写真だけでは伝わりにくいですから、文章を補足する意味で適度に写真を入れるようにしてください。こちらもブログのようなデザインであれば馴染むでしょう。

ここで重要なのは、ネタの種類をどれだけたくさん紹介できるかです。少なくとも乗っているネタはすべて紹介すべきでしょう。するとデザインは文章と写真のバランスが重要になるんです。

ネタの味で勝負する場合のデザイン。

ネタの味で勝負する場合について考えてみましょう。海鮮丼の売りがネタの味である場合は、おいしさをどれだけ伝えられるかが重要なポイントです。すると写真で伝えることは不可能に近いので、文章を書くことで説明することになります。

ただし、おいしさを説明するというのは非常に難しいので、できるだけ多くの方の「おいしい!」という感想を集められるかにかかってきます。つまり、感想の数で勝負するということです。また、グルメリポーターに感想を伝えてもらうというのも効果がありますね。

ところが、注意しないといけないのが、有名人のサインをやたらとたくさん飾っているお店です。単に飾っているだけだと、「うちは有名人が来るぐらいすごいんだぞ!」という単なる自慢になってしまうことです。自慢ではなく、おいしいということの『証拠』になるようにしてください。

いずれにしても、感想の多さが自慢にならないように注意して、内容を構成する必要があります。こちらの場合も、ブログのように文章を中心としたデザインが適切でしょう。

ネタの大きさで勝負する場合のデザイン。

ネタの大きさで勝負する場合について考えてみましょう。海鮮丼の売りがネタの大きさの場合は、ネタの大きさをどれだけ伝えられるかが重要になります。もちろん写真を載せることは必須ですが、一般的な海鮮丼との比較写真が必要です。要するに比較対象が欲しいんですね。

重要なのは、どれだけわかりやすく比較できるかです。見た瞬間に「うわっ、こりゃデカい!」と思うような写真があれば伝わりやすいですね。文章で「大きさが〇センチあります」みたいに説明しても、なかなか伝わりにくいでしょうから。

すると、写真がメインで補助的に文章を書くようなデザインになるでしょう。写真を載せやすいのであれば、ブログ形式を使っても問題ありませんよ。やはり、大きさを証明するための証拠が必要であり、それをいかにうまく表現できるかが、デザインのポイントです。

見た目の豪華さで勝負する場合のデザイン。

見た目の豪華さで勝負する場合について考えてみましょう。海鮮丼の見た目の豪華さを売りにしている場合は、とにかくきれいな写真が重要になります。見た目で勝負するのだから当然ですね。最近の流行である、いわゆる『SNS映え』を考える必要があるでしょう。

高性能なカメラで撮影したり、レタッチソフトで修正したりといったことが必要になるでしょう。また、専門のカメラマンに撮影してもらう必要があるかもしれません。写真を中心とした内容になりますから、写真が一覧できるようなデザインにすべきでしょうね。

なんだったらホームページではなく、インスタグラムなどの写真投稿サイトを考えてもよいかもしれません。きれいな写真をできるだけ多く公開できるようにするのがポイントです。

安さで勝負する場合のデザイン。

安さで勝負する場合について考えてみましょう。海鮮丼の売りが安さである場合は、相場に比べてどれくらい安いのか、証拠を示す必要があります。例えば、「相場は○○円ですが、当店では□□円で提供しています。」と、具体的な金額や価格差を示すべきでしょう。

しかし、海鮮丼は生ものなので、安くても安心して召し上がってもらえることを説明する必要もありますよ。つまり、なぜ安いのか、そのカラクリも説明すべきなんです。そうすることで、「安かろう悪かろう」ではないことを証明し、信用してもらうんですね。

基本的には文章による説明が中心で、写真もいくつか載せることになると思うので、ブログ形式のデザインであれば問題ないでしょう。また、表を利用して、比較対象を左右対称に並べる必要もあるでしょうね。ポイントは、安くても安心であることを証明しやすい、デザイン表現です。

人柄の良さで勝負する場合のデザイン。

人柄の良さで勝負する場合について考えてみましょう。ご主人の人柄の良さを店の売りにしている場合は、具体的にどこが良いところなのかを説明する必要があります。人当たりが良くて接客の評価が高いのか、いつもネタをおまけしてくれる気前の良さがあるのかなどです。

また、「この道〇〇年」とか「有名店の□□で修業」みたいに、技術的に優れていることを伝えるのも良いでしょう。このような人柄の良さを証明するために、ご主人の熱意のこもった文章や、お客さんの感想・評価を載せる必要がありますね。

つまり、人柄の良さを証明しやすいデザインが必要になるんです。したがって、デザイン的には、文章をメインとして写真を少し載せるような構成になるでしょう。基本的には、ブログのようなデザインが良いのではないかと思いますね。

まとめ：デザインは、集客戦略によって自然に決まります。

いかがでしたか？

ホームページのデザイン、７つの重要ポイントを説明しました。海鮮丼の店を具体例として説明しましたが、本質的には「商品・価格・人柄」なので、ほとんどの企業に当てはまると思います。一度、自社の場合に置き換えて考えてみてください。

繰り返しになりますが、大事なポイントは、表現する内容（証拠）によってデザインが変わるところです。つまり、商品の良さやその証拠が、表現しやすく理解しやすいデザインを選ぶべきなんです。だから、デザインありきでは内容が制限されてしまうのでマズいんですね。

例えば写真用のデザインで文章を書けば、本来表現すべき証拠が説明できず、デザインに合わせた簡単な説明にせざるを得なくなります。ホームページでは、内容、つまり集客戦略に合わせてデザインすべきなんです。「説明が中心だからブログ形式が良いね」といった感じです。

このように、内容に合わせてデザインは自然に決まります。ホームページのデザインは、集客戦略に基づいて作られているものであることを、決して忘れないでください。

以上、「ホームページのデザイン、７つの重要ポイント！」と題して説明しました。

ホームページのフラッシュについて、問題点を知る意味とは？

あなたは、「ホームページに、フラッシュを導入したほうが良いのか？」と疑問をもって、このページをご覧になっていると思います。確かに、動画やアニメーションがあるホームページは見入ってしまうので、導入したいなあと思われている方もいらっしゃると思います。

動きがあると、明るく派手な感じがするので良さそうな気がしますよね。しかし、フラッシュのような動きのあるページは、集客では扱いが難しいという問題があります。つまり、フラッシュの問題点を知ることには、動きのあるページの扱い方を知る意味でもあるんです。

そこで、中途半端に導入して逆効果になることがないように、正しい扱い方を説明しました。

ホームページのフラッシュについて、問題点を説明。

それでは、ホームページのフラッシュについて、問題点を説明します。ポイントは７つありますので、ぜひ最後まで目を通してください。

フラッシュとは何か？

ここで説明しているフラッシュとは何かといえば、もちろんアドビ社（Adobe）が販売するソフトウェアであるフラッシュ（Flash）のことです。フラッシュは、ブラウザにプレーヤーをプラグインという形で導入することで、使えるのはご存じだと思います。

具体的に何ができるのかというと、アニメーションを表示したり、動画を再生したり、ホームページのメニューに特殊効果を付けたりなど、とにかく動きのあるものが得意です。一時、ホームページを丸々フラッシュで作ってしまうようなこともあったぐらい、人気を博しました。

ただし、最近は HTML で十分事足りるようになったので、「動き＝フラッシュ」という図式は成立しなくなりましたね。ところが、最近はフラッシュをメインにしているサイトは、めっきり姿を消しました。なぜなら、集客に悪影響が出るという問題点があるからです。

では、どんな問題点があるのか具体的に説明していきますので、ぜひ参考にしてみてください。

動きがあると邪魔になる

動きがあると邪魔になることがあります。フラッシュは、主にトップページに置いてアニメーションや、動画を再生して強い印象を与える目的で使われます。閲覧者に強いインパクトを与えるということなので、それ以外の文章やバナーといったものは目に入らなくなります。

つまり、フラッシュによって本来見てほしい部分から目をそらす結果になるので、動きがあると邪魔になるわけです。したがって、伝えたいことがあってフラッシュを使っているはずなのに、結局何も伝わらないという本末転倒なことになりかねないんですね。

フラッシュではSEO対策がしにくい

フラッシュではSEO対策がしにくいという問題があります。フラッシュを使って、ホームページのナビゲーション用のメニューを作ると、かなりカッコいいものが作れますよね。確かに、見た目は良くなるんですが、検索エンジンからは内容が正確には読み取れないんです。

検索エンジンは内容、つまり文章を読み取っているので、文字が読み取れないフラッシュでは、SEO対策に対応できないんです。したがって、フラッシュという形式になってしまうと、SEOという点で非常に不利になってしまうんです。

しかも検索エンジンは、リンク先もたどってチェックしているので、メニューをフラッシュにしてしまうとリンクがうまく認識できない可能性もあるんです。このように、SEO対策の観点からもフラッシュの使用はできるだけ避けたいですね。

修正にはかなりの知識が必要

私も少しだけフラッシュを勉強したことがあるんですが、たぶんちょっとした修正でもかなりの知識が必要になるでしょう。もちろん、高額なフラッシュのソフトウェアも購入しないといけないので、高度な知識が必要なだけでなく、多大なる出費も必要になります。

つまり、誰かに頼んで修正してもらわないといけなくなるので、毎回余計な費用が掛かるし、テンポよくベストタイミングで内容を修正するといった、スピーディーな対応ができなくなります。せっかくの機会を逃す可能性もあるので、集客的には問題がありますね。

したがって、フラッシュの知識やソフトウェアを持ち合わせていない場合は、修正が非常に難しくなるわけです。

現在では必要性が薄い

あなたもご存じだと思いますが、HTML5 という新しい規格でフラッシュと同等のアニメーションに対応しています。つまり、わざわざ外部プログラムのフラッシュを使わなくても、HTMLだけで対応できるようになったんですね。

このような状況から、アニメーションが必要な場合でもフラッシュが全く必要なくなったんです。また、現実的な問題として、スマートフォンではフラッシュが機能しません。フラッシュを使わないというのはスマホ対応という観点からも大事なんですね。

したがって、現在ではフラッシュの必要性が極めて薄くなってしまいました。

フラッシュを使いたがる人には要注意!

これまでお話しした通り、すでにフラッシュは過去のものとなってしまいました。ところが、やたらとフラッシュを使いたがる人がいます。それは、ホームページ制作会社のような業者です。どうして使いたがるのかというと、継続的に業者にお金が入るからです。

フラッシュを使ってホームページを作成してしまえば、フラッシュの修正という費用が発生します。例えば、「○○というイベントを知らせたいので、フラッシュを修正してほしい。」みたいな形で制作会社には仕事が舞い込んできます。

先ほどもお話ししましたが、修正には知識が必要なので、お客さんは制作会社に任せるしかないんです。そうやって無理やり仕事を作ることで、収益を上げようとしているんです。だから、フラッシュをいまだに勧めてくる業者には注意してください。お金を吸い取られる危険性がありますよ。

また、フラッシュを使うと見た目にカッコよく仕上がります。すると、なんとなく良いホームページができた気がします。つまり、ホームページ制作の依頼者に対して、ごまかしているわけです。このようにフラッシュを使いたがる人は少なからずいますので、十分注意してください。

動画やアニメーションは、どんな時に使うのか？

これまで、動きのあるものについてよくない話ばかりしましたが、当然良い面もあります。では、動画やアニメーションはどんな時に使うのかというと、必要性があるときです。具体的には、写真では伝えきれない場合で、例えば車のように走る姿を見てもらいたいときなどですね。

また、ゲームソフトなどの体験版をホームページ上でプレイしてもらう時なども有効です。なので、「これはどう考えてもアニメーションや動画じゃないと伝わらないぞ」という時に『動き』のあるものを使ってください。集客を考えるなら、「なんとなく」は絶対避けてください。

このように、動画やアニメーションでなければ伝えようがない状況で動きがあるものを使ってください。なお、それでもフラッシュはすでに古い技術なので、使うべきではないでしょう。

まとめ：動きがあるページは、扱いが難しいです。

いかがでしたか？

ホームページのフラッシュについて、知っておくべき問題点を説明しました。フラッシュとは、動きがあると邪魔、SEO対策がしにくい、知識が必要、必要性が薄い、フラッシュを使いたがる人どんな時に使うのか、などのポイントを説明しました。

繰り返しになりますが、フラッシュに代表される動きのあるものは、安易に使えません。なぜなら、集客に悪影響が出るからです。もちろん明確な意図があればいいんですが、少なくともページトップで使うのは、よほど巧みな計算がない限り避けたほうがよいでしょう。

フラッシュに限らず、動きがあるページは集客という観点では、扱いが難しいということを忘れないでください。

以上、「ホームページのフラッシュ、知っておくべき問題点とは？」と題してお話ししました。

ホームページのデザインを知る意味とは？

まず、ホームページのデザインについて、ポイントを考えてみましょう。ホームページのデザインには、全体の形・カラム数・レイアウト・色（配色）・画像・バナー・文字サイズ・行間隔など、様々な要素があります。そして、これらを組み合わせて、一つのデザインにまとめ上げます。

では、具体的にどのようなホームページデザインが良いのかというと、「訴求すべき内容をどれだけ引き立てられるか」という一点になると思います。ホームページの集客力に影響を与えるのは、中身の出来が大部分ですから、中身の邪魔をしてはいけないわけです。

つまり、ホームページのデザインは、いかに中身を引き立てて魅力を引き出せるかという視点が重要になります。そこで、どのような点に注意すればよいのか、コツを見ていきましょう。

ホームページのデザインで、成果をあげるポイント。

それでは、ホームページのデザインで、知っておくべきポイントを説明します。ポイントは７つありますので、しっかりと頭に入れてください。

全体の形やカラム数はどうする？

ホームページ全体の形について考えてみましょう。特殊で、奇をてらったものは避けてください。なぜなら、デザインに目がいってしまい、内容が頭に入らないからです。これでは本末転倒になってしまいますので、注意してください。

また、中途半端に変わったデザインや新しい形にしてしまうと、操作方法が一目では分かりません。訪問者は一目で分からないと、「なんだこのサイトは、どこをクリック（タップ）したらページが表示されるんだ？」なんてことになりかねません。

ところで形と言えば、カラム数が一つのポイントになると思います。１・２・３カラムの３種類があるのはご存じだと思います。さらに、２カラムはメニューカラムを左右のどちらに置くかという違いもありますから、全部で４種類になりますね。では、どれを選ばいいんでしょうか？

これは用途で別けます。例えば、ランディングページ（集客用ページ）やスマホがメインであれば、１カラムが適します。また、通販サイトやカタログサイトのように、複数のページを見せる場合は左メニューの２カラムが適します。逆に文章がメインなら、右メニューの２カラムです。

なお、３カラムはあまりお勧めしません。これは、左右にメニューやバナーがあるとうるさくなってしまい、閲覧者が集中して内容を読めないからです。

このように、特殊なデザインと３カラムは避け、用途に応じて１カラムと２カラム（左右）をうまく使い分けてください。これで、閲覧者の心理に合わせて、中身の魅力を引き出せると思います。

レイアウトはどう考える？

レイアウトはどう考えたらよいのでしょうか？　レイアウトとは、メニューの位置、本文の位置、画像の位置など、配置のことを指しますが、どの位置に置くのが良いかはケースバイケースです。なぜなら、サイトの使われ方に大きく影響するからです。

それでも、あえて言うなら、平凡なものがベストです。とにかく、使いにくくなってしまうものは避けてください。使いにくいと感じた瞬間にお客さんは去ってしまいますから。デザインを追求しすぎると、どうしても使いにくいレイアウトになってしまいがちです。

いわゆる、カッコいいスタイリッシュなデザイン程度ならよいかもしれないですが、それでも「一目見て操作がわからない」ものは避けるべきです。つまり、レイアウトは、見慣れた使いやすいものが一番であるということなんです。

もし、平凡なものと言われてピンとこない場合は、いろいろなサイトを見て平均をとってみてください。おおよそ何がどこにあるというのが、見えてくると思いますよ。

色合いや配色はどうする？

色合いや配色はどうすればよいのでしょうか？　これは、それなりに考えなくてはいけないと思います。なぜなら、デザインで集客力をアップできる可能性があるのは、色だからです。したがって、色については、研究してこだわっても無駄にはなりません。

例えば、 Firefox の公式サイトでは、ボタンの色を変えただけで劇的にダウンロード数が増えたという実績があります。他にも、ボタンの色を変えて大きく影響が出た例は多数あります。したがって、色が集客に影響を与える可能性は高いと言えます。

具体的な考え方ですが、色にはなんとなくイメージがあるので、業種に合わせて色合いを考える必要があるでしょう。例えば、銀行は緑色が多いとか、医療関係なら青色が多いとかあるんです。要するに、信頼とか安心とか、色から感じるものがあるらしいんです。

全体的なトーンとして、色合いを業種ごとに考えるとよいかもしれないですね。ネットで検索すると結構いろいろと出てくるので、興味がある方は調べてみてください。そして、自分のサイトに適切な色を見つけ出してください。

ザックリというと、明るく元気な方が訪れるサイトであれば暖色系で、悩みや困りごとを抱えた方が訪れるサイトであれば寒色系が基本になると思います。それを基本にすれば、目安になるのではないでしょうか。

画像の扱い方とは？

画像の扱い方について説明します。画像は、説明文を補足する存在であると考えてください。なぜなら、主役は文章だからです。文字情報なしにはどうしても詳細は伝えきれません。したがって、画像の使いどころは、「これ以上の文章による説明は無理だ」と思った時です。

ただし、物を販売している場合は商品写真が必要ですし、サービスであればサービスを提供している風景の写真が必要です。画像に表せないサービスであれば、それを想起させるようなものを用意します。画像は、あくまでも文章を補足し、イメージしやすくする補助として考えましょう。

なお、商品と直接関係しないような説明やブログなどの場合は、ページの上部に何らかの画像を入れるようにしてください。これはアイキャッチと言って、読み始めの弾みをつけるものです。なお、画像の種類は問いませんので、なにか１枚挿入できればそれで構いませんよ。

バナーの作り方とは？

バナーの作り方における注意点は、文字サイズと色合いです。例えば、重要な部分を大きくしたり目立つ色にするといったことが必要です。また、バナーは目立たせるのが基本ですが、色の使い方がおかしいと悪目立ちしてしまいますので、注意が必要です。

実は、バナーでデザイン上注意するところはこれぐらいしかありません。なぜなら、重要なのは「何を書くのか」という内容と、「どこに置くか」という配置だからです。どんな説明を書けば注目してもらえるのか、どこに配置すれば目立つのかよく考える必要があります。

これはケースバイケースなので、ザックリとしか言えませんが、

• 内容・・・誰の何を解決できるのかを明確にし、魅力をしっかり引き出すこと。
• 配置・・・文章の初めや終わり、メニューカラムなら最上部に置くこと。

などが基本になるでしょう。内容によっては、説明の途中においた方がクリックされやすい場合もありますので、ここなら間違いないという配置はありません。実験を繰り返しながら、最適な場所を見つける必要があるでしょう。

このように、バナーはデザインではなく内容と配置が重要ですので、あまりデザインに固執しないように注意しましょう。

文字サイズ・行間隔はどうする？

デザインで、最も気を配っていただきたいのが、文字サイズや行間隔です。なぜなら、ホームページは文章が基本だからです。しっかりとした説明を行うと、どうしてもある程度の長さになりますが、それを気持ちよく読んでもらうためには、文字サイズや行間隔が非常に重要です。

文字サイズは、おそらく１５ポイント以上あるほうが良いでしょう。あまりに細かいサイズだと、とても読む気にならないからです。逆に、大きすぎると中身が無いことをごまかしているように思われてしまいますので、そこは注意してさじ加減してください。

また、行間隔は１行半以上は開けたほうが良いと思います。こちらも、詰まっているとごちゃごちゃして読みにくいからです。また、開きすぎるとやはり内容がスカスカに感じてしまいますので、加減を注意してください。段落の間隔は、さらにその倍は開けましょう。

このように、読みやすい文字サイズと行間隔になるよう、調整してください。

見出しのデザインはどうするのか？

見出しのデザインには、次のようなポイントがあります。なお、ここで言う見出しとは、H1～H6 のタグで表される部分のことを指します。

• 本文と区別ができること
• 華美にならない事
• デザインではなく内容で興味を引くこと

まず、文字サイズはやや大きめが良いと思います。少なくとも本文と同じ大きさにはしないようにしましょう。そうしないと、本文と区別がつきませんからね。また、あまり華美（派手）なものにしないようにしましょう。なぜなら、デザインで目立っても意味が無いからです。

特に見出しの場合は、新しい話の始まりの意味がありますから、デザインに凝っても仕方がないと言えます。それよりも「どんな話が読めるのか？」という、期待を閲覧者にさせることが重要です。せいぜいで、左端や下に色つきのラインを入れる程度ではないでしょうか。

文字サイズ以外では、前後のマージンをやや大きく取ると、より見出しらしくなると思います。繰り返しますが、見出しはあくまでも、話の始まりを知らせる区切りのような役割です。見た目で興味を引くのではなく、内容で興味を引くようにしてください。

まとめ：デザインのコツは、中身が伝わることです。

いかがでしたか？　ホームページデザインのコツ、成果をあげる７点を説明しました。

今回説明したのは、全体の形やカラム数はどうする？、レイアウトはどう考える？、色合いや配色はどうする？、画像の扱い方とは？、バナーの作り方とは？、文字サイズ・行間隔はどうする？、結局デザインは力を入れなくてもいいのか？、などのポイントでした。

ここまで、内容を引き立てるためにデザインを考えてほしいと伝えてきました。すると、「デザインはシンプルが一番ですね」と思われる方が少なくありませんが、そのような意味ではないんです。お分かり頂きたいのは、内容に合わせたデザインが重要だということです。

具体的には、「うちの商品は文章でしっかり説明すべきだから、シンプルが一番だ。」という場合があれば、「うちの商品は感覚を重視すべきだから、画像中心で派手にしよう。」という場合もあります。だから、内容によってデザインが決まるんですね。

したがって、デザインだけ先行しても成果はあがらないんです。あくまでも、内容の魅力を引き立て伝わりやすくするのがホームページのデザインです。最初にしっかりとした内容を作って、それに見合ったデザインを心がけてください。それがデザインのコツですよ。

以上、「ホームページデザインのコツ、成果をあげる７点とは？」と題して説明しました。