下記の記事ではWebサイトの情報設計についてお伝えしました。その次の工程として本記事では「制作」について詳しくご説明します。
外注するにしても、集客を目的にWebサイトを制作するのであれば、ぜひ抑えておいて頂きたい内容となっております。
1 SEO（Search Engine Optimization）内部対策
Webで集客するとしたらまず取り組むべきことはSEOです。
SEOとはSearch Engine Optimization（検索エンジン最適化）の略で、内部対策ではWebサイトを検索結果に表示させる際のキーワードや各コンテンツを検索エンジン（Google）がスムーズにチェックできるよう、Webサイトの内部構成を最適化します。
わかりやすく言えば、GoogleにWebサイトの内容を正しく伝えるという事です。
では検索エンジンは具体的にWebサイトのどこを見ているのかというと、下記の3つを重要視しています。
タイトル
１つ目はタイトルです。<head>タグ内の<title>タグで括られた文字列になります。ここにはタグの意味合いの通りそのページのタイトルを30文字以内で書きます。
ここに設定したタイトル文字列はブラウザのタブやGoogleの検索結果に表示されます。タイトルには検索流入を狙うキーワードを必ず入れるようにしてください。
キーワードは複数いれても構いませんが重要なキーワードほど文の前半に入れるようにします。ただキーワードを詰め込むあまり不自然な文にならないように注意しましょう。
ディスクリプション
タイトルタグ同様にディスクリプションも<head>タグ内に<meta name=”description” content=”説明文～”>というタグを書きます。
ディスクリプションは検索結果のランキングには影響はないと言われていますが、検索結果に表示するWebサイトの説明文になるため100文字を目安に目に止まりそうな内容にする事が大切です。
見出し
タイトル、ディスクリプションが検索結果で表示する文字列だったのに対して、Webサイトのページ内に検索流入を狙うキーワードを設定するには<body>タグ内に見出し用として定義されている<h1>タグを使うようにします。
新聞や雑誌をはじめ従来からあるテキスト型のメディアで見出しには重要なキーワードが入っているように、Webサイトも<h1>タグの見出しにキーワードを掲載するようにします。
また<h1>は各ページに1つだけ使うようにして、<h1>に掲載するキーワードと同等に重要なキーワードがある場合は別ページにすることを検討すべきです。
同一ページ内でコンテンツを掘り下げる場合は小見出し用のタグとしてh2～h6があるので、そちらを使うようにします。
2 内部リンク
SEO内部対策では各ページの情報を検索エンジンに伝える方法を説明しましたが、続いてサイト全体をくまなくチェックしてもらうために内部リンクについてもご説明します。
Googleをはじめ検索エンジンは「クローラー」と呼ばれるコンピュータープログラムで世界中のWebサイトを定期的に巡回することで検索結果に表示するWebサイトの情報を集めています。
なのでクローラーがサイト内の各ページを巡回しやすいように内部リンクを適切に貼ることが重要なのです。
一般的なWebサイトを見ると分かるとおもいますが、具体的にはWebサイトの入り口になるトップページには下層ページへの内部リンクを設置するようにします。
また下層ページからは「パンくずリスト」という現在表示しているページの階層を示すリンクを設置して、上位階層のページやトップページに戻れるようにしましょう。
また、サイトマップと呼ばれるWebサイトの中にどんなページがあるのかを一覧化したページを設置してもよいでしょう。(最近はフッターメニュー自体をサイトマップのようにリンクを掲載しているケースも散見します)
人がWebサイトにアクセスした際、各ページにアクセスしやすいという事はクローラーも巡回しやすいという事なので、ぜひ人とクローラーに優しいWebサイトになるよう内部リンクを設置するようにしてください。
3 ディレクトリマップ作成
次は内部対策で実施する内容を整理するためにディレクトリマップと呼ばれる設計書を作成しておく事をオススメします。
ディレクトリマップの詳しい内容は下記サイトをご覧いただきたいのですが、Webサイトの全てのページをエクセルなどで一覧化し、各ページの階層やURL、また前述のタイトル、ディスクリプション、見出しも記載します。
事前にこれらをまとめて考えておくと、各ページの内部対策が統一化されますし、ページを作るたびに都度考えるより効率的でしょう。
また階層もわかるようにしておくことで各ページから上位階層、下位階層へどう内部リンクを設置すればいいのかわかるようになりますし、一通りサイトができたあとも内部リンクをチェックするのにも役立つと思います。
4 常時SSL（Secure Sockets Layer）化
サイト制作というよりはサーバ側の話になりますが、常時SSL化というのはWebサイトをhttpsによって暗号通信でのみ閲覧することを指します。
以前は問合せフォームやクレジットカード情報を入力する画面でのみ、SSL化させているWebサイトを見かけましたが、2022年7月時点における国内ブラウザシェアNo.1のGoogle ChromeではSSL化されていないhttp通信の場合、URLを入力するアドレスバーに「保護されてない通信」と表示されてしまいます。
例え有益・有用なコンテンツが掲載されていたとしても不安を与えてしまうことは否めませんし、検索エンジン（Google）からも常時SSL化が検索順位の評価のひとつになると言われていますので、常時SSL化にしておくべきです。
5 レスポンシブデザイン
レスポンシブデザインとはデバイス（スマートフォンやPCのこと）の画面サイズにあわせてレイアウト（構成）が最適化されるデザインを指します。
Webサイトは最低限スマートフォン・PCの両ブラウザで見られるように作りましょう。
レスポンシブデザインでは、スマートフォンとPCの画面サイズ別にそれぞれのCSSを書く必要があるのですが、CSSはメディアクエリといって画面幅が○○px以上だったらこのCSS、○○px以下だったらこのCSSと画面幅によって参照先を切り替えることができます。
この仕組みによってPC版とスマートフォン版で別々のページをつくらずとも、1つのURLにPCからアクセスしても、スマートフォンからアクセスしても、それぞれのデバイスから見やすいデザイン・レイアウトでWebサイトを閲覧できるようになります。
6 OGP（Open Graph Proctol）設定
OGPとは「Open Graph Proctol」の略で、FacebookやTwitterなどのSNSでWebページをシェアした際、ページの詳細情報を伝えるためのhtmlタグになります。
何も設定しないとSNS側で勝手に設定されるか、もしくは表示されない事もありえます。
なのでOGPよりシェアされる際に表示する内容をWebサイト運営側でコントロールすることが重要なのです。
タイトルやURLのほかにページを読みたくなるようなアイキャッチ画像や説明文を設定しておけば、流入確率をあげることができます。
7 EFO（Entry Form Optimization）
EFOとはEntry Form Optimization（エントリーフォーム最適化）の略で、問合わせフォームなどの入力完了率を高めるためにフォームを最適化することです。
フォームを設置する際は極力入力ストレスを与えない作りにすることが重要です。
例えばスマートフォンでは操作が指になるため、テキスト入力欄やボタンなどは選択しやすいようサイズにしましょう。
またメールアドレスを入力させる場合、メールアドレスの形式になっているかの確認が必要だとしたら、入力したら即時で形式確認するのが理想です。
送信ボタンなどをクリックしないと形式確認されないようでは、面倒に感じてそこで離脱してしまう確率が高くなります。
せっかく検索エンジンやSNS向けにページを最適化して集客できたとしても、Webサイト自体の目的がフォームからの問合せだとしたら、そこでの離脱は非常に悔しいですよね。
まとめ
いかがでしたでしょうか。今回はWebサイトの「制作」で抑えるべきポイントについてお話しました。
検索エンジンやSNSからの流入を意識した作りにすることや、PCやスマートフォンといった異なるデバイスからアクセスされるため、それらを前提にしたレイアウトにすべきということでした。
またフォームの最適化についても言及しましたが、ECサイトや資料請求などが目的の場合でも基本となる考え方は同じで、ユーザーにストレスを与えないということです。
Webサイトはどうしても流し読みされることが多く、ひとつひとつの操作に時間をかけたくない方が多数なので、商材によほど魅力があるなら多少面倒でも操作してもらえるとおもいますが、そうでなければ面倒に感じたら離脱してしまう可能性が上がってしまうため、ストレスを与えない作りにするが重要なのです。
次回は制作したWebサイトの集客効果と目的達成を最大化させる「分析」について執筆する予定です(^^)
