前回の記事ではWebサイトの設計についてお伝えしました。その次の工程として本記事では「制作」について詳しくご説明します。外注するにしても、サイト集客を目的にWebサイトを制作するのであれば、ぜひ抑えておいて頂きたい内容となっております。
SEO内部対策
Webで集客するとしたらまず意識すべきはSEOの内部対策でしょう。
内部対策とは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があるので、そちらを使うようにします。
内部リンク
１～３は各ページの情報を検索エンジンに伝える方法を説明しましたが、続いてサイト全体をくまなくチェックしてもらうために内部リンクについてもご説明します。
Googleをはじめ検索エンジンは「クローラー」と呼ばれるコンピュータープログラムで世界中のWebサイトを定期的に巡回することで検索結果に表示するWebサイトの情報を集めています。なのでクローラーがサイト内の各ページを巡回しやすいように内部リンクを適切に貼ることが重要なのです。
一般的なWebサイトを見ると分かるとおもいますが、具体的にはWebサイトの入り口になるトップページには下層ページへの内部リンクを設置するようにします。
また下層ページからは「パンくずリスト」という現在表示しているページの階層を示すリンクを設置して、上位階層のページやトップページに戻れるようにしましょう。
また、サイトマップと呼ばれるWebサイトの中にどんなページがあるのかを一覧化したページを設置してもよいでしょう。(最近はフッターメニュー自体をサイトマップのようにリンクを掲載しているケースも散見します)
人がWebサイトにアクセスした際、各ページにアクセスしやすいという事はクローラーも巡回しやすいという事なので、ぜひ人とクローラーに優しいWebサイトになるよう内部リンクを設置するようにしてください。
ディレクトリマップの作成
次は内部対策で実施する内容を整理するためにディレクトリマップと呼ばれる設計書を作成しておく事をオススメします。
ディレクトリマップの詳しい内容は下記サイトをご覧いただきたいのですが、Webサイトの全てのページをエクセルなどで一覧化し、各ページの階層やURL、また前述のタイトル、ディスクリプション、見出しも記載します。
ASCII.jp：進行管理に便利なディレクトリマップの作成方法
事前にこれらをまとめて考えておくと、各ページの内部対策が統一化されますし、ページを作るたびに都度考えるより効率的でしょう。
また階層もわかるようにしておくことで各ページから上位階層、下位階層へどう内部リンクを設置すればいいのかわかるようになりますし、一通りサイトができたあとも内部リンクをチェックするのにも役立つと思います。
常時SSL化
サイト制作というよりはサーバ側の話になりますが、常時SSL化というのはWebサイトをhttpsによって暗号通信でのみ閲覧することを指します。
以前は問合せフォームやクレジットカード情報を入力する画面でのみ、SSL化させているWebサイトを見かけましたが、2022年7月時点における国内ブラウザシェアNo.1のGoogle ChromeではSSL化されていないhttp通信の場合、URLを入力するアドレスバーに「保護されてない通信」と表示されてしまいます。
例え有益・有用なコンテンツが掲載されていたとしても不安を与えてしまうことは否めませんし、検索エンジン(Google)からも常時SSL化が検索順位の評価のひとつになると言われていますので、常時SSL化にしておくべきです。
実際のWebサイト制作
最後にいよいよ制作です。まずWebサイトはスマートフォンとPCの両方のブラウザで見られるように作りましょう。
PCとスマートフォンでは画面のサイズが違うため、サイトの構成(レイアウト)を調整するのにそれぞれのCSSを書く必要があるのですが、CSSはメディアクエリといって画面幅が○○px以上だったらこのCSS、○○px以下だったらこのCSSと画面幅によって参照先を切り替えることができます。
この仕組みによってPC版とスマートフォン版で別々のページをつくらずとも、1つのURLにPCからアクセスしても、スマートフォンからアクセスしても、それぞれのデバイスから見やすいデザイン・レイアウトでWebサイトを閲覧できるようになります。
続いてOGPです。OGPは「Open Graph Proctol」の略でFacebookやTwitterなどのSNSでWebページをシェアした際、ページの詳細情報を伝えるためのhtmlタグになります。
何も設定しないとSNS側で勝手に設定されるか、もしくは表示されない事もありえます。なのでOGPよりシェアされる際に表示する内容をWebサイト運営側でコントロールすることが重要なのです。
タイトルやURLのほかにページを読みたくなるようなアイキャッチ画像や説明文を設定しておけば、流入確率をあげることができるでしょう。
最後に問合せなどの入力フォームを設置する際は極力入力ストレスを与えない作りにすることが重要です。
例えばスマートフォンでは操作が指になるため、テキスト入力欄やボタンなどは選択しやすいようサイズにご注意ください。
またメールアドレスを入力させる場合、メールアドレスの形式になっているかの確認が必要だとしたら、入力したら即時で形式確認するのがよいです。
送信ボタンなどをクリックしないと形式確認されないようでは、面倒に感じてそこで離脱してしまう確率が高くなります。せっかく検索エンジンやSNS向けにページを最適化して集客できたとしても、Webサイト自体の目的がフォームからの問合せだとしたら、そこでの離脱は非常に悔しいですよね。
さいごに
いかがでしたでしょうか。今回はWebサイトの「制作」で抑えるべきポイントについてお話しました。
検索エンジンやSNSからの流入を意識した作りにすることや、PCやスマートフォンといった異なるデバイスからアクセスされるため、それらを前提にしたレイアウトにすべきということでした。
またフォームの最適化についても言及しましたが、ECサイトや資料請求などが目的の場合でも基本となる考え方は同じで、ユーザーにストレスを与えないということです。
Webサイトはどうしても流し読みされることが多く、ひとつひとつの操作に時間をかけたくない方が多数なので、商材によほど魅力があるなら多少面倒でも操作してもらえるとおもいますが、そうでなければ面倒に感じたら離脱してしまう可能性が上がってしまうため、ストレスを与えない作りにするが重要なのです。
次回は制作したWebサイトの集客効果と目的達成を最大化させる「分析」について執筆する予定です(^^)
スタディクリップは教育業界に特化したWebの専門会社です。
スタディクリップでは習い事教室など民間の教育事業者さまに特化したWebコンサルティングを手掛けております。お困りのことがございましたら、私たちまでお気軽にご相談ください。