皆さんこんにちは、Endorphinsのマーケティングロールのイトマンです！
第4回までにデジタルマーケティングに必要なことをまとめてきましたが、第5回からはwebサイト制作に関わる部分の基本についてまとめていきたいと思います。
戦略の基本の学びももちろん必要ですが、それを実際に体現するwebサイトそのもののことをよくわからなければ、制作会社にトンチンカンな要望を出してしまうことになります。
依頼をすれば「クライアントの要望だから」と対応をしてくれると思いますが、それに伴って追加費用が発生してしまう（それを想定されて実はすでに予算額が上がっている）など、どちらにとってもいい結果にならなくなってしまうことが多々あります。
ベストな手段は全てプロである制作会社に任せてしまうことですが、要望を出さないといけない場面もあると思いますので、その時のために基本だけでもまずはしっかりと押さえておきましょう！
まだ、これまでのシリーズを読まれていない方はそちらもぜひ確認してくださいね。
目次
webサイトの組織構造
イメージがしやすくなるように、最初にwebサイトの組織構造について簡単に触れたいと思います。
構造としては「階層型」と「データベース型」があり、この２つを組み合わせて１つのwebサイトが出来上がりますので、それぞれについて確認しましょう。
階層型
ヒトが情報を把握するのに最適な構造が階層型のため、多くのwebサイトが階層型で制作をしています。
図のような形で表現することが多く、制作前の段階でどのような導線になるのかがわかりやすいことも利点です。
文言などを最適化することで、ユーザーが欲しい情報へストレスなく辿り着くことが可能です。
データベース型
データの検索・収集を行いやすくするための構造です。
mazonや楽天などネットショッピングをイメージして貰えばわかりやすいかと思いますが、膨大に準備されている情報（商品など）を検索することで、簡単に素早く欲しい情報へと辿り着くことが可能です。
階層型の構造
この記事では多くのサイトで採用されている階層型の構造について説明していきます。
階層型のwebサイトの構造は「ホームページ」・「カテゴリページ」・「詳細ページ」・「フォームページ」からなっており、それぞれに役割・特徴が存在します。
その役割が最大限になるように制作することが大切です。
ホームページ
構造上一番上にあるページのことで、ホームページの他にトップページと呼ばれることも多いページです。
サイト全体の主要なコンテンツに誘導する役割であり、サイトの中で一番訪れる数が多くなる場所であるため、サイトの「顔」としての役割も持っています。
ホームページとPV数が高いページのファーストビューについては特に注意が必要です。
ファーストビュー
ユーザーがwebページにアクセスした時に最初に表示される部分のことをファーストビューといいます（写真はEndorphinsのPCのファーストビューです）。
ユーザーはわずか数秒ほどで「自分に利益のあるサイトなのか」を判断し、実際にファーストビューだけを見て離脱するユーザーが半数以上いると言われています。
せっかくいい情報、いいコンテンツを掲載をしていても最初の印象が悪いと「きっと大した情報は載っていないのだろう」と思わせてしまいます。
ですので、ファーストビューの箇所には
・ユーザーの欲しい情報があると思わせる
・読み進めるといい情報があると思わせる
といった情報を必ず盛り込む必要があります。
ランディングページのように、そのページの役割が情報提供だけではなく、申込を視野に入れている場合には「クリックできると一目でわかる」申込ボタンをファーストビューに盛り込むことをお勧めします。
また、パソコンとスマートフォンではファーストビューのサイズに大きな隔たりがあります。
パソコン【幅：1000~1200px、高さ：550~650px】
スマートフォンは【幅：360px、高さ：600px】
に納めるとほとんどの場合に対応が可能です。
注意をしていただきたいのは、最近のスマートフォンは高解像度ディスプレイを搭載している機種も多いため、上記の2〜３倍のサイズが必要な場合もあります。
カテゴリページ
同系統の詳細ページへのリンクをまとめたページです。
説明などは最小限度にとどめ、ユーザーが欲しいと思う情報を適切に分類・表示することで、ユーザーを導くナビゲーション的な役割を持ちます。
このページを煩雑にしてしまうとユーザーにとって有益な情報が見つからずに離脱率が上がってしまうため、掲載すべき情報をスリムにすることが大切です。
詳細ページ
商品の紹介など、１つの事柄に対して詳しく情報を掲載しているページです。
ここでユーザーは欲しい情報を手に入れ、企業側は次につながるアクション（類似商品の紹介・お申し込み・お問い合わせ）へ誘導することになります。
他のページよりもテキストや画像が多くなり、その画像は基本的に発注側が準備することが多くなります。
ユーザーへの印象のことなどを考えると、ここで画像に力を入れない選択肢はあり得ませんので、プロのカメラマンに依頼をするなど事前に写真の準備をしっかりと行っておきましょう。
フォームページ
お問い合わせやお申し込み、会員登録、アンケートなどといったユーザーに何かしらの情報を入力してもらうページです。
ヒトはめんどくさがり、迷ってしまう性質を誰もが持っているため、ここで入力してもらう情報や選択肢の数によってCVの量と質が変わってくると言われています。
入力すべき情報が多くなると途中で諦めてしまい数が減りますが、その分、本当に必要としている人の情報となる傾向があります。
発注側としてはあれもこれも知りたいと盛り込みたくなる気持ちもあるかと思いますが、そうした場合には一度立ち止まって、量と質のどちらを重視したかったのか再考をしてみてください。
静的サイトと動的サイト
構造については上記にあげた４つになりますが、webサイト自体は大きく分けて「静的サイト」と「動的サイト」の2種類があります。
webサイトはそれぞれのサイトを組み合わせて作成されており、それぞれでHP作成後にできることが異なりますので、違いを把握しておきましょう。
静的サイト
いつでも、誰でも、何回訪れても常に制作した時の状態で表示されるwebサイトのことを静的サイトと言います。
特に更新の必要のない、もしくは更新頻度がかなり低いサイトで採用されています。
例）事業体情報、プライバシポリシーなど
もし更新の必要がでた場合には制作会社に修正の依頼をするか、もしくは社内に専門部署がある場合にはその担当者に依頼して修正をしてもらう必要があります。
動的サイト
ニュースリリースといった新着情報や、定期的な商品の入替作業など、webサイト公開後も定期的に情報の追加・更新といった機能が必要となるwebサイトのことを動的サイトと言います。
ニュースやブログなど形式の決まった定期的な情報更新であれば、専門の知識がほとんどなくても更新ができるように制作会社が準備をしてくれることがほとんどです。
ブログの発信など、サイトのコンテンツ力強化のためには必須であるため、コンテンツ内容の検討・更新作業と言った人的リソースも考慮しておく必要があります。
なお、定期更新以外の箇所の修正については静的サイト同様に制作会社もしくは社内の専門部署に依頼をしましょう。
まとめ
今回はwebサイトがどのような構造でできているのかまとめましたが、その中で特に大切なことは次の３点です。
・ファーストビューを大切にする
・誘導ページは煩雑にしない
・ユーザーに入力させるときは入力量の調整が必須
基本的にマーケターが細かく知っておく必要はないですので上記の３つだけでも覚えておき、他の大切なことはプロの制作会社に任せてしまった方が完成品の質的にも業務量的にもプラスとなります。
制作会社はただwebサイトを作るだけではなく、マーケティングやwebサイトの性質を知りつくしたうえでデザインの提案を行っていますので、そこから大きく社内の意見として手を加えると思ったほどの効果が出ないこともありえます。
そうならないためにも、最低限の知識を身につけたうえで制作会社と密なコミュニケーションを取るようにしましょう。
次回の第6回ではwebサイト制作に関わりの深く、個人の好みが大きく出てしまう「色」についてまとめていきます。
