売れるサイトのデザインはシンプルでオーソドックス
キャラ右

ホームページのデザインをもう一度、検討しなおしてみてはいかがですか?

本記事では、デザインのプロでなくても出来る、「売れる」「集まる」サイトに共通するデザインのポイントを紹介しています。

ぜ、そのようなデザインが、プロのデザイナーでなくても実装可能なのかも解説しています。本記事を参考に、自信を持って自社でホームページを作り、費用対効果の高い自社運営を行なってください。

トップページで悩むのは時間の無駄

ホームページの作成依頼を頂く際、私たちは「デザインのラフ案は作成せず、サイトの運営方針に適したデザインを採用します。大きく分けて2種類です」と、お断りして、これまで作成して今でも運営している2種類のデザインテンプレートから、どれだけオリジナル性を出せるのか、そして、それぞれの運営方針についてご説明させていただいております。

このような形になるまでのご依頼では、ご依頼者のほとんどが、トップページのデザインで、多大な日数を費やされていました。

「こんなデザインにしたいです」と、参考サイトをいくつか提示されるお客様も少なくありません。

しかし、その「参考にしたい」と感じたポイントをお伺いすると「なんとなくと、曖昧な感性のみでのご返答しか返ってきませんでした。

キャラ左

ちょっと、言い過ぎかもしれませんが「サイトオーナーの曖昧な感性」だけでデザインしたホームページが成功するのなら、アクセス解析もプロのデザイナーも必要ないんだよね!

これでは、参考サイトのデザインを踏襲しながら、依頼主の要望を反映しつつ、オリジナル性を出すのは困難です。

そのため、デザインに試行錯誤する日数が必要になり、ホームページの公開が遅れてしまいます。

私たちは、ホームページのデザインにオリジナル性を持たせたり、時間をかけるのは非常にもったいないと考えています。

キャラ右

少し言い過ぎかもしれませんが、「もったいない」どころか「無駄」「失敗の素」だとも思っています。

ホームページは、運営方針を固めたら、原稿を準備して素早く公開し改善用のデータを集めるのが得策なのです。

トップページは、ほとんどアクセスされないのが成功の秘訣。

ホームページのデザインが無駄だとか、トップページのデザインに悩むのは時間とお金の無駄だとお伝えする最大の理由は、近年、ホームページの閲覧はトップページから始まることはほとんどないからです。

トップページを閲覧せずに、ブログ記事を2ページほど読んだ後、コンバージョン・コンテンツにアクセスしたり、問い合わせを行うことがほとんどだからです。

トップページは、「ナビゲーションページ」としての機能しか果たしていません。

おそらく、あなたが現在運営しているWEBサイトのトップページに「完結する情報」となる訪問者の要望や悩みを解決する情報は掲載されていないのではないでしょうか。

トップページに掲載されているコンテンツは、訪問者の要望や悩みを解決する「情報がこのサイトにある」このサイトの情報は「信じるに値する」と言うことを伝える「キッカケ」や「完結する内容への入口(記事のタイトルや導入文)リンク」が掲載されているだけではないでしょうか。

それらの「入口(記事のタイトルや導入文)」は、ブログ記事にも掲載されています。

トップページに掲載されているのは、この「具体性に富むページのコピーコンテンツ」でしかないのです。

具体性に富む記事には、その具体性に沿った、より具体的な「解決策」を紹介したり販売しているページにリンクされていて初めて、訪問者を読者に変え、そして顧客に変えることができます。

要するに、悩みや欲求、要望を検索窓に打ち込んだユーザーは、その具体性に沿った記事にアクセスして、記事に案内されるままに、次のページに訪れ、問題や課題を解決します。

に、その検索した結果でヒットしたページが、トップページだった場合、訪問者は、そこから該当のページを探すという一手間を加えなければならなくなってしまいます。極論を言えば、「わざわざトップページにアクセスさせる理由があるのか」と、言うことです。

ここばポイント

Googleは、検索ユーザーの「検索体験を最適化する」ことを目的に、検索システムを改善しています。

検索者が、検索窓に打ち込んだ「答えとなる情報」に、素早くアクセスさせるのがGoogleの目的です。その結果、検索結果の上位にトップページがランクインされると、ユーザーは、目的の情報にアクセスするために一手間を加えなければならなくなってしまいます。

これでは、Googleは「本来の目的」を果たせていない!と、なるわけです。

検索結果にトップページはランクインしなくなる?

過去、Googleの検索システムが稚拙だった時代、リンクをたくさん送ったり、キーワードを盛り込んだり、人目にはつかない場所や文字色で、キーワードを羅列していれば、簡単に検索ランキングで1位を取ることは出来ました。

それ以前の検索システムはドメインURLの配列でランキングが決まるような時代もあったほどです。

しかし、現在は「コンテンツ・キング」と呼ばれるように「コンテンツこそ王様」であり、そのコンテンツの寄せ集めで、ナビゲーション的な役割「目次」としての役割しか果たさないWEBサイトのトップページは、「指名検索」の時くらいにしかランキングの「1位」に表示されなくなってきています。

「指名検索」とは、その名の通り、検索エンジンに固有名称を「指名」して行われる検索ですので、その対象に関しての全体像が知りたいと言う欲求によって行われます。

そのため、検索エンジンが、その指名検索の結果として上位にランクインさせるのが、該当する固有名称を持つWEBサイト、もしくは、会社概要に限られるのはもっともな仕組みです。

すでに、「指名」するための情報を検索者は持っているのですから、インターネット検索で、自社を知られるより、電話されたほうが成果獲得に近いのは当たり前の話です。

しかし、なぜ、電話ではなく「指名検索」が行われるのでしょうか。

その理由は、信頼がなく、検索者は、電話をかけるのも不安なため、まずは、インターネットで「電話しても安心か」と言う情報を得るためにインターネット検索を行います。

キャラ左

トップページに指名検索経由のアクセスが多発していると言うことは、指名検索をさせる状況を作る過程にある種の課題が残っていると言うわけですね!

ただし、トップページで訪問者に与えられる「安心感」は、組織としての…または、個人としての安心感だけです。

その組織、もしくは、その個人は、「信頼に値する情報発信者(サービス提供者)なのか」を調べる程度です。

参考エピソード

先日、同級生から病院を紹介してもらったのですが、同級生も出先だったため、電話番号まではわかりませんでした。

そこで、インターネット検索で、その病院名を打ち込む「指名検索」を行い、電話をかけてみました。

すると電話の対応が非常に悪く、その病院にはかからず、別の病院にかかりました。

この病院は立派なWEBサイトを掲載していましたが、結果として、ひとつの電話対応が、病院の信頼と、私の同級生への評価を落としてしまったのです。

トップページを指名検索以外で上位表示させるために、あの手この手を使って1位の座に輝いても、結局は、「次のページを読んでもらえる可能性を上げるだけ」であり、読者(訪問者)が見込客に変わるのは「信頼できる記事」「安心できる記事」に出会ってからです。

これに対して、一般検索では、検索者は任意のキーワードを検索窓に打ち込みます。

それも「検索エンジンとして信頼できる検索エンジン」を使って検索しますので、その検索ランキングの上位にあるコンテンツには、それだけの期待と信頼を寄せ、クリックします。

すでに、そのコンテンツの製作者がどこの誰だかわからなくても、コンテンツに信頼を寄せていると言うわけです。

逆を言えば、トップページにアクセスさせると言うことは、閲覧者の行動を無駄に1ページ増やしてしまっていると言うわけなのです。

キャラ右

指名検索は、その固有名称を知ったきっかけや環境に信頼を寄せているために、検索行動が起こっているわけですね!

例えば、名刺交換をした異業種交流回には、信頼に足る人や企業しか参加していないと言う安心感だったり、紹介者に対する安心感が、指名検索という行動の裏には潜んでいるわけです。

近代WEBサイトの基本はレスポンシブWEBデザイン

近代WEBサイトのデザインの基本は、あらゆる画面サイズの異なる端末からアクセスされた場合でも、その環境に適した表示を自動的に行うのが基本です。

中でも、もっとも簡単に実装できるのが「レスポンシブWEBデザイン」と呼ばれる手法です。

従来型のホームページのように、サイドカラムもなく、スライドショーやインパクトのあるファーストビュー(そのページを開いた時に、スクロールなしで表示される範囲)での派手な演出もなく、速やかに「情報」にアクセスできる仕様が、このレスポンシブWEBデザインです。

キャラ左

単なる「レイアウトの変換をスタイルシートだけで、制御する」のがレスポンシブWEBデザインだと思っているホームページの制作者やデザイナーが多いことにがっかりします。

レスポンシブWEBデザインは、何も端末の幅に合わせたレイアウトを自動で表現するだけではありません。

解説すると長くなるので割愛しますが、パソコンで閲覧される時の状況やスマホで閲覧される状況を考慮した上で、コンテンツをデザインするのがレスポンシブWEBデザインなのです。

閲覧端末の違いによる訪問者心理の違いとコンテンツ・デザイン

パソコンでネットサーフィンをしている場合は、比較的時間に余裕があると考えられます。

言い換えれば、複数のWEBサイトを閲覧する余裕があると言うことで、パソコン版のデザインを採用するコンテンツには「検索ランキングでのライバルとの争い」の他に、訪問したユーザーをページにとどまらせ、次のページにいかに誘導し、他のWEBサイトにいかにして訪問させず、自サイトに滞在させるか!仮に一旦、他のサイトに訪問したとしても、再びいかにして引き戻すか!と言う他サイトのコンテンツとの競い合いが発生しているとも言えます。

これに対しスマートフォンで閲覧しているユーザーには、それほどの時間的な余裕はないと言えるでしょう。

電車の乗り換えや、ちょっとした休憩時間の終了。ランチで注文を出して、食事が届くまでなど、細切れ時間を使った閲覧がスマホ・アクセスには想定されます。

コンテンツの内容を吟味しながら、しっかり読んで頂くためには、訪問者を「内容」に引きつけ、どれだけ記事への関心を高められるかがカギとなります。

どれだけ早く、どれだけインパクトを持って、訪問者を読者に変えコンテンツに引き込むか…もしくは、ブックマークさせるかがポイントです。

その引き込んだユーザーに対していかに情報伝達精度 (理解度)を高められるかが、レスポンシブWEBデザインを採用した際のスマホ用レイアウトの鉄則だとも言えます。

キャラ右

に、パソコンで閲覧している人は、スマホでの閲覧時のような「外部の影響」によって閲覧を遮られたりしにくいので、じっくり読んでもらえる環境下で閲覧されていると考えてデザインしても良いわけですね!

スマホでのアクセスが大半になるため、デザインは「読みやすさ」重視が鉄則

近年のネットサーフィンは、パソコンではなく、スマートフォンで行われるのが大半です。

ひと昔前のような20インチ以上のデスクトップパソコンで、WEBサイトを閲覧する機会はほとんどなく、パソコンでの閲覧も、持ち運べる13インチくらいまでです。

そんなラップトップパソコン(持ち運び可能なパソコン)でのアクセス数も、全トラフィックの3割にも満たないのではないでしょうか。

に、パソコンでのアクセスが3割を超えるようなら、あえてパソコンで閲覧させる「理由」や「狙い」が明確でなければ、成果はおぼつかないことでしょう。

情報を届け、その情報によって、あなたの商材を購入したり、サービスを安心して受けられると、感じた時に、ユーザーは予約や買い物をし、お客となって、あなたに収益を発生させます。

このように「情報」の伝達効率を上げるのなら、より、トラフィックが見込まれるスマートフォンでの閲覧に特化した、デザインが必要となります。

そのデザインは非常にシンプルなデザインでオーソドックスな「1カラム・レイアウト」です。

文章や画面幅いっぱいに広がる画像や図解。派手なアクションもなく、読みやすさを重視すればオリジナル性に富んだデザインではなく、自ずとシンプルでオーソドックスなデザインに落ちすくものなのです。

精読率と可読性を上げるひと工夫

読みやすさを重視した「モバイル・ファースト」を採用したデザインは、文字を中心にシンプルでオーソドックスなデザインが採用されるとお伝えしましたが、そんな「シンプルなデザイン」の中でも、精読率や可読性を引き上げる「ひと工夫」があります。

ここでは、図解や動画、文字装飾に関しての「ひと工夫」をご紹介します。

図解が出来るのなら図解、可能なら四コマ漫画がベスト?

文章ばかりのコンテンツより、図解が可能な内容なら「図」を掲載するのが良いと思います。

しかし、スマートフォンで閲覧されることを考慮すると、図の中に文字を含めると、文字が小さくなり、せっかくの図解も役割を果たせなくなってしまいます。

このように、スマートフォンでの閲覧を最優先する考え方を「モバイル・ファースト」と言います。

このモバイル・ファーストという考え方は、2012年に「レスポンシブWEBデザイン」という、閲覧端末の画面サイズに合わせて、サイトのデザインやレイアウトが変化する技術が登場した時から、ホームページを作成する時の基本的な考え方となっています。

キャラ左

「モバイル・ファースト」という考え方に関しては、WEB制作業界では「当たり前」なのですが依頼する一般の方々にとっては「馴染みがない」と言う認識の差があり、制作段階でもめることも多いんだよね。

結局、「依頼優先」となって、依頼者の意向が優先されるため、デスクトップ用のホームページ・デザインに時間がかかっちゃう。

その割には、スマホで見た場合に見にくい…と言う惨状を招いちゃうんだよね。

近年、モバイル・ファーストと言う言葉は、以前よりホームページの制作を依頼される方々の間にも浸透してきました。しかし制作会社に関しても、モバイル・ファーストへの理解は「デザイン(見た目)止まり」と言うのが現状のようです。

私たちも、アクセス解析やフィードバックをいただきながら、スマートフォンでも「読みやすいコンテンツ」スマートフォンで、閲覧しても「分かりやすい」の追求に励んでいますが、なかなか一筋縄にはいかないのも現実だと思います。

モバイル・ファーストは、見た目のデザインだけではなく、「閲覧のしやすさ」や「読みやすさ」「次を読みたくなる仕掛けを通した情報伝達の精度向上に努めるよう心がけるのが、ホームページの作成、そして自社運営を成功に導くこと鍵ではないかと考えています。

図解もマンガも準備しづらい時の対処法:動画、次点でキャラ会話

読者への情報伝達精度を上げるためには、図解やマンガによる解説などが有効だとお伝えしましたが、スマホでも閲覧しやすい図解やマンガによる解説は、プロの手を必要としてしまいます。

モバイル・ファーストを適切に認識している、デザイナーや漫画家を運良く見つけられれば、必要な投資として、取り組んで良いかもしれません。

しかし「必要な投資」と、何を基準に判断すれば良いのかがわからないと言うのも実際ではないでしょうか。

デザイナーに関しても、漫画家さんにしても、「アクセス解析を参考に修正を…」なんて会話が成り立つとは考えられません。

そこで、社内運営も可能な方法が「動画」です。

動画を作れば、YouTubeにもアップ出来ますので、WEBサイトへのアクセス経路を増やすことにも繋がります。

キャラ左

動画はパネルを使いながらの解説を加える動画でも良いと思います。

カメラに向かってパネルを説明する動画の撮影の場合は、収録もさることながら編集が大変になるため、ある程度の練習と慣れ、経験が必要になってきます。

この労力を回避する方法として、図解パネルのスライドショー動画に音声を吹き込むと言う方法と、文書パネルのスライドショー動画に音声を吹き込むと言う2つの方法があります。

キャラ右

このサイトも図解が必要な内容なんですが、スマホで見るには文字が小さくなってしまうので、文字ばかりのコンテンツになっています。

一部の図解は、デスクトップでの作業用のコンテンツなので、モバイル・ファーストではなく、従来型のデザインを採用しています。

本音としては、動画を作りたいのですが、時間が取れず…(汗)

図解にしても、マンガにしても、2種類の動画にしても、時間がかかってしまいますし、時には費用も必要となり、何より「改善」や「修正」「改修」が難しい。と言う難点が残ります。

そこで登場するのが、このサイトでも採用している「キャラ会話」や「囲み装飾(カラーボックス)です。

手軽に出来て、伝達精度も上がる「キャラ会話」と「囲み装飾」

キャラ左

キャラ会話と言うコンテンツ装飾と言うのは、まさに、このパーツのことです!

私から話しかけられているように感じませんか?

「キャラ会話」と言うのは、上記のようなキャラクターと吹き出しによって構成されるパーツのことです。

文字ばかりの情報よりも、キャラクターから話しかけられているように感じるパーツのほうが、より読者の目を引き記憶に刻まれると言われています。

本サイトは「語りかけ型」のキャラ会話を採用しており、制作者である「私」と「読者」の会話を想定して作っています。

キャラ右

あなたが、この「キャラ会話」を見ながら、「なるほど!」とか「なんで?」「いや〜そうとは思わないけどなぁ」なんて小声で言ってくれていたら、このキャラ会話は成功です(笑)

このサイトで採用している「語りかけ型」キャラ会話と別の手法にキャラクターを2人以上登場させる「擬似会話型」のキャラ会話法があります。

イメージとしては、キャラクターが右端と左端に表示され、交互に吹き出しを表示させながら、いかにもキャラクター同士が会話をしているようにデザインする情報伝達方法です。

読者の代弁者となるとキャラクターとその質問などに答える「サイト運営者」と言う設定や「対談型キャラ会話」などの方法があり、文書ばかりのコンテンツよりも、精読率や理解度(情報伝達精度)が高まるとも言われています。

ひと口メモ

「囲み装飾」「カラーボックス」と言うのは、このパーツです。

黒板風のパーツも同じ「囲み装飾」のひとつです。

他の文字ばかりの段落や、囲みそうしのない番号付き箇条書きよりも、視線を集める効果があります。

文字装飾の頻度とスクロール・フック

スクロール・フックとは、数年前から私がWEBデザインをコンサルティングする際に用いている俗語で、「スクロールするきっかけ」となるコンテンツのデザインをこのように呼んでいます。

例えば、このページでも、スマートフォン5.5インチの実機をもとにファーストビューを基準にしてスクロール・フックを実装しています。

この記事でも、スマートフォンの画面が黒色の通常文字だけで覆われることがないことをご確認いただけます。

中には、下線や文字装飾を行った文節が画面の下に続き、自然と画面をスクロールして、次を読もうとしていたのではないでしょうか。

「囲み装飾」も同じです。画像もスクロール・フックとして利用できます。

キャラ左

このキャラ会話もスクロールフックですね!

情報は、1記事1テーマで書きさえしていれば、読めば読むほど、伝達精度や読者の理解度を上げ、読者に正確な判断を行わせます。

次のページを閲覧するのか(させたいのか)問い合わせをするほうが良いのか、それとも、別の事業者を探すほうが自分に適しているのか…。

これらの判断を適切に行っていただくために、デザインするのが、WEBコンテンツ・デザインの基本になります。

精読率を上げるデザインや目次ページである、トップページの「ナビゲーションデザイン」などは、長年の調査研究から、あらゆる文献などもあり、定型のフォーマットのような「型」が出来上がっています。

そして、そのデザインは、緻密に設計されているにもかかわらず、理に適っておりながら、とてもシンプルだと言う特徴を持っています。

ホームページのデザインに関しては、特設サイトにまとめていますので、参考にしてみてください。