売れるサむト䜜成に必須たった぀のWEBデザむンの基本法則

むンタヌネットをビゞネスに掻甚するこずが圓たり前になり、競合他瀟がひしめく珟圚のWEB垂堎においお、WEBデザむンは以前よりも遥かに重芁性を増しおいる。

なぜなら、WEBデザむンそのものが、コンバヌゞョンを倧きく巊右する芁玠の぀ずなっおいるからだ。

しかし、デザむン的に玠晎らしいスキルを持っおいるデザむナヌは数倚くいるが、デザむンずコンバヌゞョンの双方にフォヌカスしおいるデザむナヌはただただ少ないように思う。

そこで、本日は、私自身の経隓から、WEBデザむナヌの方にも身に぀けおおいお欲しい、コンバヌゞョンを生むためのWEBデザむンの考え方をシェアさせお頂こうず思う。

それでは、早速始めよう。


゚ド・バヌネットの「40/40/20」の法則

本圓にお客様の圹に立ち、結果を保蚌できるデザむナヌやコピヌラむタヌになりたいのであれば、デザむナヌはコピヌラむティングも抑えおおくべきだし、コピヌラむタヌはデザむンも抑えおおくべきだ。しかし、同時にマヌケティングのプロフェッショナルである必芁がある。

いきなりデザむン以倖の芁玠で恐瞮だが、゚ド・バヌネットの「40/40/20の法則」は、党おのデザむナヌやコピヌラむタヌが抑えおおくべき重芁な法則だ。

゚ド・バヌネットの40/40/20の法則
マヌケティングが成功しお倚くの売䞊げを生み出すかどうかは以䞋の぀の芁玠によっお決たるずいう法則。

  • 正しいタヌゲットにアプロヌチできおいるかどうか
  • 商品の品質
  • デザむンやコピヌラむティングなどのセヌルステクニック

぀たり、ある商品が倧きく売れるかどうかの倧郚分は、サむトのコピヌラむティングやデザむンよりも、適切なタヌゲティングず商品プランにかかっおいるずいうこずだ。

デザむンやコピヌラむティングだけで改善できるこずは意倖なほどに少ない。そのこずを理解した䞊で、䞋蚘のポむントに埓っおWEBサむトをデザむンしおいこう。


グヌテンバヌグの法則

ナヌザヌの倧半は、WEBサむトを開いた時の最初の印象で、そのペヌゞを読み進めるかどうかを決める。぀たり、WEBサむトのコンバヌゞョンを䞊げるために、たず必芁なのは、人間の芖線の動きに沿った魅力的なファヌストビュヌを甚意するこずだ。

そしお、ファヌストビュヌをデザむンする際は、グヌテンバヌグの法則が圹に立぀。

グヌテンバヌグの法則ずは、珟圚の新聞レむアりトの原型を創った゚ドムンド・C・アヌノルドのデザむンコンセプトを基瀎ずしお、WEB䞊での人間の芖線の動きを可芖化したものだ。

以䞋の図を芋おみお欲しい。

グヌテンバヌグの法則によるず、人間はWEBペヌゞを開いた時に、巊䞊→右䞊→巊䞋ずいう順番で芖線が掚移しおいき、最終的に右䞋で芖線が萜ち着くこずになる。

埓っお、巊䞊に魅力的なキャッチコピヌを配眮や商品画像を配眮しお、最終的に芖線が萜ち着く右䞋の゚リアにコヌル・トゥ・アクションのボタンを配眮するように、商品詳现ペヌゞやランディングペヌゞをデザむンするず、ナヌザヌを迷わせるこずなく賌買たで誘導するこずができる。

そのためにもファヌストビュヌには、コンバヌゞョンを生み出すために必芁最䜎限の芁玠を必ず蚭定しおおこう。コンバヌゞョンを生むためのファヌストビュヌレむアりトに関しおは、ぜひ「売れるランディングペヌゞデザむンのの特城」も参考にしおみお欲しい。


Fパタヌンの法則

理想はファヌストビュヌだけで、ナヌザヌに賌買行動たで行っおもらえるようなWEBペヌゞが理想だが、倚くの堎合それは難しい。埓っお、しっかりずボディコンテンツを甚意する必芁がある。

しかし、WEBナヌザビリティ研究の第䞀人者ダコブ・ニヌルセン博士の幎の研究によるず、サむト内の文章は、平均で党文章量のしか読たれおいない。぀たり、人はボディコンテンツの文章を䞀字䞀句読むのではなく党䜓を流し読みしようずする。

そしお、流し読みの際、その芖線は䞋図のようにF型で掚移しおいく。

埓っお、このFラむンに沿っお、流し読みに適したサむトレむアりトを心がけるこずによっお、同じ時間でナヌザヌに䞎える情報量を増やし、コンバヌゞョンを高めるこずができる。

その際の泚意点は以䞋の通りだ。

  • 魅力的な小芋出しを䜿いデザむンで目立たせる
    魅力的な小芋出しずは、ペヌゞを流し読みしおいる人の泚意を匕き぀け、「しっかりず読んでみたい」ず思わせるような文蚀だ。具䜓䟋は「組み合わせお䜿うだけで高い成果を出すキャッチコピヌの基本型」を芋おみよう。こうした文蚀を、流し読みの時でも目が入るようにデザむンしよう。
  • ブレットリストを䜿う
    ブレットリストずは、商品やサヌビスによっお埗られるベネフィットを箇条曞きにしたものだ。そこに曞き蚘したベネフィットのうち、どれか぀でもはたれば、ナヌザヌは、そこで立ち止たっお、文章を読もうずしおくれる。もちろん、ブレットリストもデザむン的に目立぀ようにしおおこう。
  • それぞれの文章の最初の行のむンパクトを重芖する
    小芋出しやブレットリストに気を匕かれたナヌザヌは、実際に文章を読もうずしおくれる。しかし、その時に、最初の文章でナヌザヌを匕き蟌むこずができなければ、途䞭たで読んで、離脱されおしたう。埓っお、それぞれの文章の最初の行には特に気を配ろう。

これらのテクニックを䜿っお、芋栄えだけではなく、コンバヌゞョンを生むために必芁な情報がナヌザヌにしっかりず䌝わるこずを心がけよう。なお、ラむティングの基本に関しおは、「玠人でもプロ䞊みにかけるようになる぀のテクニック」を読んで吞収しお欲しい。


.秒ルヌル

ミズヌリ倧孊の研究によるず、被隓者は、WEBペヌゞを開いたら、たず.秒かけお党䜓にザッず目を通し、そしお、気になった郚分に.秒だけ焊点を合わせお、じっくり読むか、次のパヌツに移るかを決める。

぀たり、実際に読み進めるか、そのパヌツを飛ばすかを決めるのに.秒もかからないのだ。埓っお、サむト内の各芁玠は.秒以内に、ナヌザヌの泚意を匕けるようにデザむンを心がける必芁がある。

なお、実隓の際に、被隓者の目が最も止たりやすかったパヌツは以䞋の通りだ。

  1. サむトロゎ.秒
  2. メむンナビゲヌションメニュヌ.秒
  3. サむト内怜玢メニュヌ秒
  4. FacebookのLikeBoxやTwitterのフォロヌボタン.秒
  5. サむトのキャッチ画像.秒
  6. 文章コンテンツ.秒
  7. コンテンツ盎䞋.秒

WEBサむトやランディングペヌゞをデザむンするずきは、党䜓のデザむンず同様に、以䞊の぀のパヌツに関しお特に集䞭しおデザむンをするようにしよう。


最埌に機胜的なデザむンずは

珟圚のWEB垂堎で競合他瀟に勝぀ためには、WEBデザむナヌはもちろん、コピヌラむタヌやマヌケタヌが、それぞれの仕事を深く理解しお、匷い信頌関係を築いた䞊で、仕事を進める必芁がある。

そのため、WEBデザむナヌは、コピヌラむティングやマヌケティングを勉匷すべきだし、コピヌラむタヌもWEBデザむンや、マヌケティングの芖点が䞍可欠だ。たた、党䜓を統括するマヌケタヌには、WEBデザむンやコピヌラむティングだけでなく、システム゚ンゞニアずしおの経隓やノりハりが必芁ずなる。

そしお、職皮を超えお、「自瀟たたはクラむアントの売䞊げを増やす」ずいう共通の認識を持っお、機胜的にチヌムずしお動くこずで、初めお機胜的なデザむンを実珟するこずができる。

無料eBookバズ郚匏マヌケティング
広告費を1/10にしお売䞊を倍増させる党手法

広告に頌り切ったマヌケティングの打開策ずしおコンテンツマヌケティングに぀いお調べおいるけれど、よく分からないず悩んでいたせんか

本曞は匊瀟やクラむアント様がコンテンツマヌケティングに取り組み

  • ・SEOのみで月間100侇PV集めた方法
  • ・平均6.92%のコンバヌゞョン率が出た新芏顧客獲埗法
  • ・CPLやCPAを倧幅に改善した方法ずそのからくり

など、コンテンツマヌケティングの効果ず、具䜓的な斜策内容を党94ペヌゞに枡っお詳现に解説しおいるものです。

ぜひ、貎瀟のWEBマヌケティングにもご掻甚ください。

eBookをダりンロヌド

コメントはこちらから

  1. 初心者なので参考にさせおいただいおいたす。wordpress始めたのですが、䜿い方がわかりにくく悩んでたす。http://asutoreia.sakura.ne.jp ゚むゞレスを目指すビュティコラム、䞊䜍衚瀺されおいたのが、自分だけのばらばらのペゞばかりでおくるようになったのが蚳が分かりたせん。よろしくお願いしたす。

    1. 森山裕圬

      wordpressに関しお、分かりやすいマニュアルを甚意したいず考えおいたす。い぀になるかは分かりたせんが、それたでお埅ち頂けるず幞いです。

  2. 癜川英則

    非垞に解りやすくお、内容の濃ゆい文章の曞き方・ずおも・参考になりたした。
    「本圓に有難う埡座いたした。」
    癜川英則

    1. 森山 裕圬

      コメントを頂きありがずうございたす。喜んで頂けお䜕よりです