レイアウトについて
唯一と言われる正解は無いため、ウェブサイトの目的やコンテンツ内容によってレイアウトを決定するということが大切になってきます。
※レイアウトとは配置、割り当てのことです。
企業サイトとメディアサイトの違い
ウェブサイトには色々な種類のページが存在します。
企業概要、サービス紹介、アクセス、お問合せ等や定期的に追加されていく記事ページ（お知らせ、ブログ、導入事例等）です。
その中で企業サイトにおいては自社やサービス内容を知ってもらい、問い合わせなどの直接的成果に結びつけるために企業概要、サービス紹介、お問合せ等を優先し、お知らせ等の記事ページの優先順位は、その次になります。
一方メディアサイトにおいては記事ページを優先し、その他のページは目立たせない傾向にあります。
スマートフォンでの閲覧を意識する
2015年末での統計では1年間にインターネットを利用したことのある人の中での利用端末としてパソコン56.8%、スマートフォン54.3%となっており、スマートフォンでの閲覧を意識したレイアウトというのは欠かせなくなっています。
参考：平成28年情報通信白書
スマートフォン用のデザインを作っていない場合はPCのサイトデザインがそのまま小さなスマホ画面に表示されることになるので、バナーやメニューの間隔をあけてタッチし易くする。画像内の文字サイズを大きくしたりすることなどが大切です。
また、検索エンジンのGoogleも推奨しているスマートフォンの表示にも対応したデザイン、レスポンシブデザインを導入することも大切です。
その際はタップすると出てくるメニューや電話がかけられるバナーをどこに配置するかなども考慮する必要があります。
まとめ
レイアウトに決まった正解はありませんが、サイトの目的やコンテンツ内容を考慮したサイトレイアウトを意識しましょう。
ロゴマークについて
ウェブサイトにはよくロゴマーク（以下、ロゴ）が使用されます。
ロゴが無い場合でも少なくとも何処のサイトか分かるようにテキストで社名は記載しますが、テキストよりもロゴを利用した方が訪問者の印象に残りやすいサイトになります。
ロゴは縦24px～70px、横24px～200pxの小さな画像
ウェブサイトに使われるロゴはサイト全体にとっては小さな画像です。
参考：（横ピクセル－縦ピクセル）
google 116-41
facebook 24-24
toyota 105-20
panasonic 170-70
rakuten 48-48
amazon 135-40
企業の理念や想いなどを具現化したロゴは会社の顔でもあります。
ロゴが一人歩きし社名を聞いてもイメージが湧かないけれどロゴを見るとピンと来るケースも珍しくありません。
ロゴが無い場合はプロに頼みましょう
起業すると同時にウェブサイトもオープンする時などはまだロゴが無いという状態のこともあります。
ツールや素材を駆使して自作することも可能ですが、ロゴは会社の顔といえるものですし、今後何年も使用しウェブサイト以外にも利用することが考えられるのでプロに依頼することがおススメです。
ランサーズやクラウドワークスといった
http://www.lancers.jp/
https://crowdworks.jp/
マッチングサイトを利用すれば2万円～でも複数のデザイナーから複数の提案を受けロゴを作ってもらうことができます。
まとめ
テキストよりもロゴを利用し訪問者の印象に残るウェブサイトにしましょう。
顔写真について
ウェブサイトには是非顔写真を掲載して下さい。
ただ顔写真を掲載するにしても、証明写真のようにあまり表情を作らず真面目さを出す方が良いのか、笑顔の写真を使うのが良いのか。
ウェブサイトのターゲットや目的にもよりますが、おススメとしては笑顔の写真です。
顔写真が必要な理由とそのポイントご紹介します。
比較された際に選ばれる為にもマイナス要素を無くす
ウェブサイトはインターネット上における事務所の看板、顔になります。
あなたの事務所をピンポイントで探しているケースは別として、基本的にユーザーは相談したい内容に対して色々なキーワードで検索しいくつかのサイトを比較します。
その際に顔が見えるウェブサイトと顔が見えないウェブサイトがあったらどちらを選ぶでしょうか。
顔が見えるウェブサイトの方が選ばれる確率は高いでしょう。
先に述べておきますが、顔が見える、見えない以外にも料金というのはもちろん比較する上で重要な要素です。
ただ士業系ウェブサイトの場合、商品をカートに入れてボタンを押して自動返信でやりとりが完結するようなショッピングサイトとは異なり、最終的な人と人の直接的な対話は欠かせなくなります。
その際に顔写真を用いて話しやすそうか、信頼できそうか、親しみやすいかといった事前の心理的ハードルを下げるのは問合せを得る為に大切なことです。
また、表情を作らない写真よりは笑顔の写真の方が良いです。
士業という職業柄「真面目」であることは大切ですが、「真面目」というのは当たり前ともいえる要素です。
表情を作らない（無表情）の写真は「真面目」という印象を与える以外にも 、
・感情が出にくい
・冷淡
・しゃべりが上手くない
などネガティブな印象を与えてしまう可能性もありますので他のウェブサイトと比較した際にマイナスポイントになる写真は避けた方が良いでしょう。
ヘッダー画像やご挨拶で代表者が顔を出すのも必要だが、スタッフを抱えている場合はスタッフ紹介ページというのも大切
トップページのヘッダー画像やご挨拶で代表者が顔を出すのも必要ですが、スタッフを抱えている場合はスタッフ紹介のページというのも大切になってきます。
問合せなどの対応のファーストコンタクトは基本スタッフの方になると思います。その際に顔が分からず電話越しの声だけでの印象と顔が見えるのでは感じ方も変わってきます。
但し、スタッフ紹介ページを作成する際には気をつけるべきこともあります。
それはスタッフの方に事前に説明をしておき退職後などのデータの取扱について予め決めておくことです。
消さないとデータはずっと残っていくものですし、個人の紹介ページは削除してもサイト内の他のページに自分が写った画像が掲載されているかもしれません。
後々トラブルになることもあるので予め個人写真や名前などの取扱にルールを定めておくことが大切です。
まとめ
ウェブサイトには是非笑顔の写真を使って下さい。
サイトのメインカラーについて
ウェブサイトのメインカラーはビジネスの内容やターゲットを考えて色を決めることが大切です。
ウェブサイトでは主に3つの配色（メインカラー、背景カラー、アクセントカラー）を用いられることがありますが、その中で25%程を占めるメインカラーは軸となりサイトのイメージを訪問者に強く与えるものになります。
ヘッダーメニューやタイトル帯などに使われる色がメインカラーになります。
何色が好きだからと安易に決めるのでなく、ビジネスの内容やターゲットを考えて色を決めることが大切です。
メインカラーの選び方３つのポイントをご紹介します。
ロゴや企業のイメージカラーがあればそれに合わせる
企業サイトを作る場合は、ロゴや企業のイメージカラーがあればまずはそれに合わせてみましょう。
そのビジネスを連想させる色を使う
色には色々と見る人に与えるイメージがあります。
ビジネスを連想させる色をメインカラーに使うことで違和感を与えずにサイトの目標を達成しやすくなります。
例えば「ニトリ」のサイトで使用されている緑色は木や森などの自然の色でもあり、安心感や穏やかさを持ち、他との調和を表す色です。
若さや成長というイメージもあるため新生活応援のイメージを連想させます。
ターゲット（顧客）を意識した色を使う
ウェブサイトに訪れるターゲットを意識して色を使うことも大切です。
女性が訪れることが想定される女性向けサイトであれば、女性らしさ・かわいさ・柔らかさをイメージするような彩度高めの明るい色を。
子供や親子で見るような子供向けサイトであれば、楽しい・明るいをイメージするような明度を高くした色々な色相を。
まとめ
ウェブサイトのメインカラーはビジネスの内容やターゲットを考えて決めましょう。
サイトの背景カラーについて
ウェブサイトでは主に3つの配色（メインカラー、背景カラー、アクセントカラー）を用いられることがありますが、その中で背景カラー（ベースカラーともいいます）は70%程を占めます。
背景カラーは文字通り、ウェブサイトに使われるテキストや画像の背景に使う色で、カラーの選択には文章の読みやすさを意識する必要があります。
単色だけでなく、画像を背景として使うこともありますがその時も特に読みやすさに気をつける必要があります。
背景選択のポイントを紹介します。
企業サイトや堅めのテーマのウェブサイトは、白やグレーなどがよくつかわれます
一般的な企業サイトや堅めのテーマのサイトの場合はテキストがグレーや黒なので背景カラーにはそれが映えるように白やグレーがよく使われます。
スマートフォンでは背景画像をなしとする事も可能
スマートフォン対応していないウェブサイトの場合は、ＰＣ画面で表示されるウェブデザインがそのままスマートフォンの小さな画面に表示されることになります。
背景を画像にしていた場合ＰＣ画面では見やすくてもスマートフォンからだと見にくいということもありますが、その場合は背景画像を表示させないようにする事も可能です。
まとめ
背景カラーを選択する時はまず第一に文章の読みやすさを意識することが大切です。
画像を使う場合は特に気をつけましょう。
ヘッダー画像デザイン
ピンポイントで御社サイトを探している場合を除き、検索エンジンからキーワード検索をしてサイトに訪れたユーザーはわずかの時間の間に自分にとって関係のあるサイトか、求めているサイトかを判断します。
その際に判断材料として重要なサイトの一番目立つ場所にあるトップページのヘッダー画像にはビジネスがイメージできる画像を配置することが大切です。
ヘッダー画像デザイン7つのポイントご紹介します。
※ヘッダー画像とは主にウェブサイトトップページの上部で使われる横長の大きな画像のことを指します。
トップページの一番目立つ場所にあることを意識してデザインしましょう
商品やサービスの画像をつかう
フォトリア、ピクスタといった有料の画像素材集を利用すれば何万種類の画像が簡単に手に入ります。
ただこういった素材は写真自体は綺麗なもののコンテンツの魅力として欠けてしまいます。
出来れば実際のスタッフや商品、サービスシーンを写真に収めて使いましょう。
セールスポイントなど、キャッチコピーを配置
インパクトのある写真だけを贅沢に使うのも良いですが、画像を加工して他社に比べて優位性や独自性のあるセールスポイントや理念、キャッチコピーなども掲載しましょう。
但し、テキストを詰め込み過ぎると文字が小さくなるのでスマートフォンでの閲覧を考慮することも大切です。
スマートフォンを意識し、文字サイズを決定
スマートフォンでも文字がちゃんと見えるように、ヘッダー画像に文字を重ねる場合は文字の大きさに注意が必要です。
キャンペーン情報や新製品情報などを掲載する
街中の看板や広告と異なり、ウェブサイトのヘッダー画像は変更がしやすいです。
ずっと同じヘッダー画像を使い続けるのでなく、キャンペーンや新製品の販売に合わせて定期的に変更することも効果的です。
但し、ヘッダー画像のデザインを頻繁に変更し過ぎるとリピーターが別のサイトに来たのではと混乱してしまうので注意が必要です。
スライドすることも可能
多くの情報を伝えたい場合や、キャンペーンの告知、求人募集など一時的に伝えたい時には一つのヘッダー画像に詰め込むのでなく、複数のヘッダー画像を用意してスライドを活用しましょう。
スライド毎にリンクを設定して該当するページへ誘導することもできます。
但しクリックが出来ることを示唆するデザインや他にもスライドがあることを示唆するデザインを考慮することが大切です。
横長の大きな画像を用意します
最近では解像度の高いモニターやスマートフォンでもRetinaディスプレイといった高画質モニタなどもでてきています。
途中で切れたり、画像やテキストがボケてしまわないように2000px～4000px程の横長の画像を用意しましょう。
まとめ
トップページのヘッダー画像にはビジネスがイメージできる画像を配置しましょう
問い合わせへの誘導
ウェブサイトにはいくつかの目的がありますが多くの場合、資料請求や商品購入、申込み、問い合わせの獲得というのは重要な目標になってきます。
そんな時、どこから連絡したらよいのか分かりにくいサイトの作りをしていたら訪問者を逃し折角の機会を損失してしまいます。
連絡先や問い合わせフォームは顧客をイメージして出来るだけわかりやすい場所に配置することが大切です。
※フォームとは資料請求ページやお問合せページで必要情報を記入するための入力欄のことです。
スマートフォンでは、タップで電話できる
PCで閲覧した時のウェブサイトとスマートフォンで閲覧した時のウェブサイトの大きな違いとしてスマートフォンの場合電話番号をタップすることで直接電話がかけられるということです。（ブラウザや機種などによってかけられない場合もあります。）
電話番号をタップしやすく分かりやすい場所に配置することが大切です。
また、PCでは電話番号が表示されるけれど、スマートフォンではアイコンに変わるデザインもあります。
※アイコンとは、プログラムの機能、ファイルの内容などを小さな絵・画像で表現しぱっと見てどのような機能なのか分かりやすくしたものです。
歯車アイコン＝設定機能等で使ったりします。
フッター部にフォーム配置や情報掲載するデザインもあります
フッター部に連絡先や問い合わせフォームへのリンクを掲載することで全ページ共通で表示させることができどのページからでも誘導ができます。
まとめ
機会を損失しないよう顧客をイメージして問い合わせは、出来るだけわかりやすい場所に配置することが大切です。
コンテンツ内のレイアウト
ページ内がテキストだらけだと読みづらい上に訪問者にもストレスがかかって最後の行に辿り着く前に離脱してしまうかもしれません。
ウェブページではテキストだけでなく、画像を配置するなどして言いたいことを伝えやすくしましょう。ページコンテンツ内のレイアウトの８つのポイントについて紹介します。
タイトル
ページ毎にコンテンツ内容に沿った適切なタイトルをつけることは大切です。
検索エンジンもタイトルを重要視し、キーワード検索した際に検索結果に表示される部分にもなるので訪問者にクリックを促すようなタイトルを付けることも大切です。
画像配置
HTMLは記述の順番通り縦にコンテンツが並んでいきますが、CSSのfloatを使うことで画像に文字を回り込ませることができます。
例えば、契約までの流れなど画像とテキストを連動させて補足紹介したい際などはfloatレイアウトで画像を左寄せ、テキストを右にしてみましょう。
リスト（Unordered List、Ordered List）
順序の無い箇条書きのリストを表現したい場合はul、liタグを使用しましょう。
一つ一つをli、全体をulタグで括ることで、
・登記について
・成年後見について
・相続について
と箇条書きで表現することができます。
順序の有るリストを作成したい場合はol、liタグを使用することで、
1.お問合せ
2.打ち合わせ
3.見積の提示
と順序を付けて表現することができます。
定義型のリスト（説明リスト）
定義する用語とそれに対する説明文をセットで表現したい場合はdl、dt、ddタグを使用しましょう。
具体的には、会社案内ページで会社概要を表記する際には,用語として「社名」「設立」「代表」をそれぞれdtで括り、それぞれに対して「ワサビ株式会社」「2007年7月」「三木太郎」を
ddで括り全体をdlで括ります。
- 定義する用語
- 用語に対する説明
- 社名
- ワサビ株式会社
- 設立
- 2007年7月
- 代表
- 三木太郎
テキスト
リンク
テキスト内のどこにリンクが貼られているか分からずクリックしてもらえないようでは意味がありません。
マウスオーバー（マウスのカーソルを合わせる）した際にアンダーバーを表示させたり、リンクが貼られているテキストの色を変更することが大切です。
サイトによって色味の違いはありますが青系がテキストリンクの色の基本です。
太字とイタリック（斜体文字）
訪問者に注目してもらいたいテキストは太字にします。
イタリック（斜体文字）も注目してもらいたい時に使用しますが主に英語表記で使用されます。
見出し
ウェブサイトの文章も書籍と同じように見出しをつけることが大切です。ウェブサイトでは1ページ内の見出しにh1～h6といったhtmlタグを割り振ることによりそれ以外のテキストとの違いを明確にし読みやすくします。
また、このhtmlタグは訪問者だけにだけではなく検索エンジンにもページの内容を伝える為のSEO要素として大切になります。
文字色
背景カラーを考慮して文字色を決定します。
強調したいテキスト部分の文字色を変える場合もありますが、青系の色は訪問者がリンクと混同してしまうので避けたほうが良いです。
引用・転載
他のウェブサイトの記事の一部を使用する場合は引用タグ（blockqouteタグ）を使用します。タグを使うだけでなく引用元とリンク先も記載する方が良いです。
まとめ
テキストだけでなく画像を配置するなどし、適切なHTMLとCSSを用いることで訪問者と検索エンジンに言いたいことを伝えやすくしましょう。
動画の配置
ウェブサイトには文章や画像といった静的なコンテンツだけでなく、動画を配置することも効果的です。
文章は自分から内容を読みに行かないといけない能動的なコンテンツですが、動画は再生ボタンを押すだけで情報を伝えることができる受動的なコンテンツな為、訪問者にとって負担が少なく、また物事を伝える効果としても高いです。
画像だけの説明よりも短時間で多くの情報を伝えることができます
例えば代表挨拶ページ。
インタビュー形式などから代表挨拶を作成しようとなるとテープ起こしにかかる時間は録音時間の数倍とも言われておりそれを話し言葉から書き言葉に変える必要もありますが、動画をそのまま掲載すればその手間を無くすことができます。
また、文章や画像だけは伝えきることの難しい人柄なども動画で伝えることができます。
ウェブが得意なマーケティング手法
動画はウェブサイトにとって相性の良い表現方法でもあります。
動画の活用場所としてデジタルサイネージやテレビCMを利用することもできますが、掲載などにコストがかかってしまいます。
その点Youtubeなどのサービスを利用し自社のウェブサイトに再生枠を表示する分にはコストはかかりません。
また特徴的な動画などであれば拡散してもらいやすくなります。
掲載することはそれほど難しくはない
動画だからといって掲載が難しいことはありません。
以前は専用機材を用意し編集してと考えると技術も必要ですし数十万円というコストもかかっていました。
それが今のスマートフォンの性能ならば動画撮影自体は十分なものが撮影できます。
編集のクオリティも勿論大切です。
ただ出来ないから導入しないのでなくまずは撮影し文章や画像だけでは伝えきれないコンテンツの魅力を伝えることも大切です。
掲載にはYoutubeなどの便利なサービスがあるのでそれを利用しましょう。
Youtubeに動画をアップロードするとコードが発行されるのでそれをウェブサイトに記述するだけでYoutubeの動画再生窓を埋め込むことができます。
まとめ
動画を利用することで画像や文章だけより直接的に訪問者に物事を伝えることができるので積極的に活用しましょう。
アイキャッチ画像
ブログ記事を作成する時に検索エンジンを意識してブログタイトルを作成することは大切ですが、訪問者を想定してアイキャッチ画像を設定することも大切になってきます。
アイキャッチ画像を設定することでお知らせやブログのタイトルをクリックされやすくできます。
アイキャッチ画像の4つのメリットを紹介します。
文字だけのタイトルよりもインパクトがある
文字1行だけのタイトルよりもアイキャッチ画像を入れることで視認範囲が広がりよりインパクトがでてクリックもされやすくなります。
どんな内容かがすぐわかる
文字のタイトルだけでなくアイキャッチ画像を見ることで記事の内容を想像しやすくなります。
基本的には画像の大きさの加工のみなので制作はそれほど難しくない
画像にテキストを重ねたりして加工する場合もありますが、基本的には画像の大きさの調整加工のみでいけるので制作としてはそれほど難しいこともありません。
SNSで紹介された時にも同じ画像が使われる
ブログ記事がＳＮＳで紹介された場合同じ画像がアイキャッチとして使用されます。
Facebookの場合、タイトル・ＵＲＬ・画像・記事概要の要素を自動取得してくれます。
但し、アイキャッチ画像の取得に関しては設定が上手くできていないとちゃんと取得されないことがあります。
その場合はheadタグ内に下記のようなOGP（Open Graph Protocol）のコードを入れておく必要があります。
meta property=”og:title” content=”＊＊＊” /
meta property=”og:type” content=”＊＊＊” /
meta property=”og:url” content=”＊＊＊” /
meta property=”og:image” content=”＊＊＊” /
※OPG（Open Graph Protocol）とはSNSとウェブページを連携させウェブページで使用している画像やタイトル、URLなどをSNS上、友達のニュースフィードなどにも表示させる為のルールです。
まとめ
アイキャッチ画像を設定することで訪問者の目を惹き、お知らせやブログのタイトルをクリックされやすくしましょう。
カテゴリーのデザイン
ウェブサイトでは記事を多く作成することが大切です。
記事を多く作成することでキーワードの間口が広がり検索にもヒットしやすくなりますし、サイトに誘導できた後も訪問者が関連記事を巡ってたくさんのコンテンツを読んでいってくれます。
但し、記事のタイトルをずらずらと表示するだけでは訪問者も最初の数記事の内容を確認しただけで自分の興味のある分野（カテゴリー）と関連が無さそうと判断し他の記事を確認することなく離脱してしまうかもしれません。
記事に対して「相続について」「債務整理について」「不動産について」等、訪問者にとって興味のある分野（カテゴリー）を分かりやすく表示してできるだけたくさんのコンテンツを読んでもらいましょう。
カテゴリーデザインのポイントを紹介します。
訪問者が情報を探しやすくなる
カテゴリーを設けなかった場合、訪問者は膨大な記事のタイトルから中身を想像し興味のある記事を見つける必要がありますが、カテゴリーを設けアイコンなどにより表現することで視覚的にも分かりやすくなります。
またカテゴリー一覧ページなどを設けるとそこから自分に興味のある記事を探しやすくなります。
後からでも追加ができるので、多くなりすぎないようにする
カテゴリーは後からでも追加可能です。
初めに明確なカテゴリー分けをしていれば後の運用が楽になりますが、記事を作成していくにつれ掲載したい内容が増えるケースもあります。
カテゴリーの再設定もできるのである程度記事数が増えたらカテゴリーの追加や見直しをしてみましょう。
カテゴリーを設けることで訪問者にとって分かりやすくはなりますが、細かくカテゴリー分けし過ぎると逆に分かりにくくなってしまうのであまり多くなりすぎないようにする必要もあります。
まとめ
訪問者が興味のある分野をカテゴリーを用いて分かりやすく表現することによりできるだけたくさんのコンテンツを読んでもらいましょう。
ナビゲーションデザイン
一枚の紙に情報がまとめられたチラシやページ番号が振られた冊子等とは異なりウェブサイトはメニューをクリックして自由にページ内を閲覧していきます。
目的によってはインパクトを重視した奇抜なデザインもありますが、ナビゲーションデザインは訪問者が目的のページにたどりつける、使いかってのよい設計にすることが大切です。
ナビゲーションデザインの６つのポイントご紹介します。
見てもらいたいコンテンツをできるだけ目立たせる
バナーとしてメニューを作る、ロゴ近くに配置するなど見てもらいたいコンテンツをできるだけ目立たせることは大切です。
無料相談を実施しているなら無料相談。
求人を積極的に考えているなら採用情報。
独自性や他社との違いを強調したらいなら私達の強み。
等
※バナーとは、ウェブサイトにおける「のぼり」のようなもの。
特定のページへのリンクを目立たせる為、画像にテキストを加工し長方形で作られることが多い。
多すぎるとストレスを感じるので項目は厳選する
伝えたいことが多いとメニューも多くなってしまいがちです。
サイトの幅に合わせてデザインを調整すればメニュー数に上限は無いですが、多すぎると訪問者はストレスを感じてしまうのでグローバルナビゲーションの項目数は厳選する必要があります。
絞りきれない場合は親と子の属性を活用
とはいえ厳選しきれない場合はメニューを同じ系統の種類で分けていき一番大きなくくりを親ページとしてその他を子ページとして階層化することで見やすくなります。
但し、階層が深くなりすぎると分かりにくくなる為２～３階層程度に抑えることが大切です。
スマートフォン用のメニューも考える
また、スマートフォンから閲覧した際にはどのようなメニュー表示になるかも考慮する必要があります。
外出先ではスマートフォンで閲覧し目星をつけ、家に帰って落ち着いてPCで閲覧する訪問者もいるため、コンテンツを削ったり全く違う構成にすると訪問者を混乱させてしまう場合があります。
どのページからもトップページに戻れる様にする
全ての訪問者がトップページからサイトを閲覧していくわけではありません。
検索エンジンでキーワード検索した時にサービス紹介ページがヒットしそこが訪問のきっかけとなることもあるのでどのページからもトップページに戻れるようにホームボタンを設けたり、ロゴにトップページへのリンクを設置することが大切です。
サイトマップを作る
各メニューへの直リンクを記載したサイトマップページを用意しておくことで、大規模サイトでも訪問者にサイト全体を把握してもらうことができ、ワンクリックで目的のページへ導くことができます。
まとめ
訪問者が目的のページにたどりつける、使いかってのよいサイト設計にすることが大切です。
フッターやサイドバーのメニューデザイン
ウェブサイトには複数のコンテンツページといくつかのメニューデザインがありますがフッターやサイドバーのメニューデザインでは回遊率を上げ、訪問者にとって分かりやすいデザインにする為に表示するメニューを使い分けることが大切です。
重要なコンテンツでないが、必要なコンテンツをフッター部配置
ヘッダーのメニュー（グローバルナビゲーション）で設けられるメニュー数には限りがあるため重要ではないけれども必要なコンテンツ、例えば個人情報保護方針やサイトマップなどをフッター部に配置します。
また連絡先を記載しておくことで訪問者はどのページからでもすぐにアクションが起こせます。
検索窓やおすすめ記事や記事のカテゴリー一覧などはサイドバーに配置
サイドバーにキーワード検索窓やおすすめ記事、記事のカテゴリー一覧などを配置することでどのページからでもアクセスすることができ、記事の閲覧数のアップが期待できます。
またサイドバーにコンテンツメニューを設ける場合は全ページ同じサイドメニューにするのでなく、各ページ毎に変更した方が自分のいるページを把握でき訪問者にとって分かりやすいデザインとなります。
例えば、会社案内の下に代表挨拶、アクセスマップ、会社概要。サービス一覧の下にサービスA、サービスBといった下層ページを設けている場合。
グローバルナビゲーションの「会社案内」をクリックするとサイドメニューには代表挨拶、アクセスマップ、会社概要のメニューが表示される。「サービス一覧」をクリックするとサービスA、サービスBのメニューが表示される形です。
まとめ
フッターやサイドバーでは表示するメニューを使い分けることが大切です。
トップページのPRナビゲーション
通常のヘッダーメニューだけでなく、特に目立たせたい商品・サービスや企業情報などの主要コンテンツへのリンクにはPRナビゲーションを用いるのも効果的です。
テキストだけの場合とバナー画像を使ったナビゲーションがあります。
閲覧してもらいたいページへの誘導
コンテンツ数が多いウェブサイトの場合、閲覧してもらいたいページに誘導するにはまとめのページを挟んで2クリック以上かかってしまうこともありますがPRナビゲーションを設ければ1クリックで直接誘導ができます。
企業情報や取扱商品サービスへの誘導
通常のヘッダーメニューではテキストでしかページ内容を表現できないですが、PRナビゲーションでは商品画像などを使い視覚的に誘導することができます。
概要は、できるだけ簡潔かつわかりやすく
PRナビゲーションとしての概要が長くなりすぎると訪問者もストレスを感じてしまうのでできるだけ簡潔かつ分かりやすくする必要があります。
画像にテキストを載せる場合は、スマートフォンの閲覧も考慮して特にテキストが多く文字が小さくなりすぎないか注意が必要です。
まとめ
特に目立たせたい商品・サービスや企業情報などの主張コンテンツへはPRナビゲーションの活用を検討しましょう。
アクセスマップのデザイン
ウェブサイトにはアクセスマップを配置しましょう。
住所を検索すればGoogleマップなどが表示されるとはいえクリニックなどの店舗を構えた対面サービスの場合はアクセスページを設けマップを掲載することは必須といえます。
スマートフォンからの閲覧を考慮するとストレスのないGoogleマップがおすすめです。
イラストもしくは、Googleマップを配置
マップにはイラストもしくはGoogleマップを配置します。
手書き風のイラストなどはデザイン的には見やすく優れていますが、スマートフォンから閲覧することも考慮するとGoogleマップを掲載する方がナビ案内に使えたり、詳細を確認できたりと便利です。
また、目的地周辺の目印の建物が変わった場合などもイラストだと修正が大変ですがGoogleマップの場合は1年ごとに自動的に更新されます。
スマートフォンからもわかりやすくする
マップだけでなく最寄の駅やバス停からどういう風にどのくらい時間がかかるかも記載することで、実際に現地からスマートフォンで閲覧した際にも分かりやすくなります。
Googleマップなら、高さや幅も自由自在
イラストの場合、全体サイズを変更しようとすると大変ですが、Googleマップならウェブサイトやスマートフォンのサイズに合わせての高さや幅といった基本サイズも自由自在に変更できます。
まとめ
ウェブサイトにはマップ掲載は必須です。
スマートフォンからの閲覧も考慮しストレスのないGoogleマップを掲載しましょう。
フォームのデザイン
ウェブサイトは情報発信をするだけの一方通行のツールではありません。
フォームを導入することにより、問い合わせや資料請求、申込みなど訪問者のアクションを受けることができます。是非フォームを導入しましょう。
※フォームとは資料請求ページやお問合せページで必要情報を記入するための入力欄のことです。
導入にあたっての4つのポイントを紹介します。
無料で高品質な、問い合わせフォームのプログラムがある
フォームの導入には本来プログラミングの知識や技術が必要になりますが、特別な知識が無くても直感的に設定操作もできる無料で高品質な問い合わせフォームのプログラムあるのでそれを利用しましょう。
WordpressというCMSを利用する場合、Contact Form 7などが便利です。
※CMS（Contents Management System）とは、専門知識がなくてもウェブサイトを直感的に管理更新する為のシステム。有名なCMSとしてWordpress、MakeShop、Joomlaなどがあります。
※Contact form7とはWordpressで利用できるフォームプラグイン（追加機能）で、ユーザーから必要情報を入力してもらい、資料請求や問合せを得ることができる。
自動返信なども作成することができ、専門的な知識が無くても直感的に問合せ項目の追加削除などができます。
必要項目や必須項目を厳選しましょう
フォームは訪問者の情報を取得し色々なことに利用できる参考にもなります。
色々な情報が欲しいと項目も多くなってしまいがちですが、入力項目が多いとそれだけで訪問者はストレスを感じフォームに入力せず離脱してしまうので項目は厳選する必要があります。
必要項目が多い場合でも任意項目と必須項目に分け、メールアドレス等の必須項目は※印をつけるなど見た目ですぐに分かるようにすることも大切です。
フォームがあるページに訪れたからといって必ずアクションを起こし送信してくれるとは限りません。
各項目の離脱率や完了率などを元に項目数の見直しや必須、任意の変更など入力フォームを改善し成果を高めることをEFO（入力フォーム最適化）といいますが、項目を見直すだけでもアクションを起こす確率を高めることができるので見直しや厳選は大切です。
スマートフォンでの入力を意識してレイアウトをきめましょう
フォームを入力するのはPCからだけとは限りません。PCではストレスなく入力できる項目もスマートフォンでは手間がかかってしまう場合があります。
スマートフォンでの入力も意識してレイアウトを決めることが大切です。
まとめ
フォームは、訪問者のアクションの受け口です。是非導入しましょう。
