Webデザイナーの小久保です。今回は弊社ホームページをリニューアルする過程で、どんなことを考えてリニューアルを実施したかを書いていこうと思います。サイトのリニューアルを考えているけど、何をしたら良いかわからないという方は是非お読みいただければと思います。
ホームページリニューアルの手順
目的と戦略を決める
なんとなく「古くなってきたから」とか「アクセスをもっと増やしたいから」という曖昧な理由でリニューアルを検討しようとしていませんか？ 制作会社に頼むにしても、自分でやるにしても、この目的が曖昧だと何をゴールとしたら良いかわからず、お金と時間がかかるばかりです。具体的なターゲットとできれば数値目標を決めましょう。
例えば弊社サイトのリニューアル目的は下記です。
弊社サイト目的
仕事獲得と求人エントリー獲得
弊社ターゲット1
札幌に住む個人及び法人。年齢は30代から50代の社長や経営幹部クラス
ターゲット1に何をしてもらいたいか
検索や札幌の労働者の口コミからサイトにたどり着き、仕事依頼の問い合わせ（メールフォームや電話）をもらいたい。月1件目標。
弊社ターゲット2
札幌に住む個人、年齢は10代から30代の若手エンジニア
ターゲット2に何をしてもらいたいか
ハローワークや求人検索からサイトにたどり着き、求人エントリーをしてもらいたい。月1件目標。
このターゲット像と何をしてもらいたいかによって、デザインとコンテンツが決定します。したがって、初めにターゲットの人物像とその人に何をしてもらいたいかというサイトの目的を設定しなければ、リニューアルは始まらないと心得てください。目的もなくただデザインをかっこよくしただけでは全くマジで狂おしいほど何の効果もありませんので注意してください。
デザインをターゲット向けに検討する
設定したターゲットが思わず行動したくなるようにデザインを考えます。例えば弊社のケースで考えてみます。
これはリニューアル前の弊社トップページです。弊社のサイトの目的は
- 仕事依頼の問い合わせを受ける
- 求人エントリーをしてもらう
でした。
そう考えると、果たしてこのトップページでエンジニアは求人エントリーをするでしょうか？ ハローワークで仕事を見つけて、検索してみたらいかにも古臭くて内容が薄いこの有様を見たら、それだけでブラウザを閉じる人もいるかもしれません。（すみません辛口で。自社だからいいよね？）
また、アールズに仕事を頼もうとしている人が訪れたとして、アールズができることを確認しようとした時、トップだけでは具体的に何ができるか分かりません。かろうじてキャッチコピーでシステム的な何かをやるんだなと分かりますが、具体的に何ができるか、特徴をつかんで最初に明示する必要があります。現に僕が中途で入った際、サイトを見ても何をやっているのか分からなかったので営業さんに無茶苦茶質問しました。求職者が内定を勝ち取るために目を皿にして見ても分からないんですから、気軽に訪れた人はもっと分かりません。
（一応事業内容ページにできることの羅列がありますが分かりにくいです。ここも今改修中）
この二つの問題点を鑑みると、各ターゲットに向けたデザインコンセプトと対策は下記となります。
求職するエンジニア向け
・最低限がっかりしないデザイン。トレンド技術を使って技術アピール。
→今風のワンカラムデザインで、所々ライブラリを使って動きをつける。バラバラの素人臭いマージンを整理し、きちんとしたレイアウトに。
・積極的に求人を受け付けており、いい会社である旨をアピール
→求人ページに飛ばすためにリクルートのセクションを設け、求人特集の記事などもリンク
・弊社の技術力が間違いない旨を見せる
→実績記事や技術情報を書いたブログ記事をアイキャッチを用いて一覧化。技術力アピール
仕事を依頼しようとする人向け
・すぐに何の会社かわかるように
→サービス説明セクションを設け、具体的な要素技術を説明しながら端的にできることを紹介する
・弊社の技術力が間違いない旨を見せる
→実績記事やブログ記事をアイキャッチを用いて一覧化。技術力アピール
結果ビフォーアフターはこんな感じになりました
Before
After
アフターが完全な正解だとは思いませんが、目的があるデザインという点で、ビフォーよりは良くなっています。本来であればアールズが競合とどう違うかなどの差別化アピールについてもトップに盛り込む必要があると思います。そこはおいおいやっていきましょう。
まだトップページとブログ関連しかデザイン自体は変えていないため、そこも折を見て変更していこうと思います。
内部SEOが適切かチェックする
内部SEOとは平たくいうと、ユーザーにとって分かりやすい構成になっているか、そしてGoogleの検索エンジンにとって分かりやすいサイトになっているかを追求する取り組みです。Googleは自分にとって分かりやすいかつ役に立つ記事を検索の上位に出すので、これをサボると検索で人が来なくなります。
僕がチェックしているのは下記の点です。（めちゃくちゃあるのでまだこれ以外にもあると思います）
見出しを適切に使う
LIGのこの記事に記載がありますが、
適切に見出し「hタグ」と段落「pタグ」を使ってください。Googleは見出しを効果的に使ってサイトの中身を理解しようとします。そのため、文章やコンテンツの構造は必ず下記のような構造にしてください。
h1タグ
h2タグ
pタグh2タグ
h3タグ
pタグetc
hタグを入れ子のように使ってちゃんとした文章構造をもたせます。見出しを一個も使ってない、あるいは見出しの順序がおかしいと、Googleはサイトの文章の重要ポイントを理解してくれず、内容はいいのにGoogleの評価はイマイチみたいなことになりかねません。また、人が読むときも、適切に見出しが使われていると読みやすいため、離脱防止につながります。
パンくずリストを使って構造化データを作り、検索エンジンが理解しやすいサイトに
下記が詳しいですが、よくある「TOP > カテゴリー名 > 記事名」みたいな表記のことです。これは人間にとっても今自分がサイトのどこにいるかが分かり有用な機能ですが、Googleのロボットもパンくずリストを見て、サイトの構造を把握しています。
サイトの構造が分かるということは、ロボットも適切にサイトを回遊し、記事の関連性も分かるためそのサイトが何のサイトか、よりGoogleに伝わりやすいということです。Wordpressであれば僅かな労力で設置できるため、使わない手はありません。
関連記事表示を行い、人のサイト回遊率アップ、検索エンジンの理解アップ
ある記事を表示した時に、訪れた人により多くの情報を得てもらうために、関連記事の表示を行います。人相手ならもちろんセッション別のページ数が増える良い取り組みですが、Googleのロボットにとっても関連コンテンツが分かりやすくなり、評価の向上が期待できるかもしれません。
WordPressならWordPress Related Postsプラグインを使えば簡単に実装できますので、ご検討ください。導入例は下記です。
メタディスクリプションの設定をする
上は弊社トップページが検索結果に出てきた際の表示です。
札幌のWebアプリ/ホームページ制作会社です。AmazonやYahoo APIを連動させた出品サービスや、コアランチなどのグルメ口コミサイト運営など、北海道のWebを元気にすべく事業を展開しています。
この説明文がメタディスクリプションにあたります。ここをページごとに設定し、検索クリックされやすい文言にしておく必要があります。
WordPressであればAll in One SEO Packなどを使ってこの辺の設定が簡単にできるため、是非導入してみてください。
無論、プラグイン有効にしただけじゃダメで、記事ごとに考えて記載する必要がありますよ。
サイトマップ送信の設定をする
何らか記事を更新した際に、サイトマップをGoogleに送って通知する必要があります。それがないと、Googleは新しいコンテンツができたことに気づきにくく、なかなか検索結果に記事が表示されないということになりがちです。こちらもAll in One SEO Packの機能に同梱されているので、是非使ってみてください。
画像タイトル、画像見出しは極力使わない
よく、ゴテゴテに装飾をはべらせたリッチな画像タイトルや画像見出しを使うシーンがありますが、あれもGoogleのエンジンからすると、それだけだとただの画像としか認識されません。一応下記の記述を見ると周辺のテキストを読んだりして内容を推測しているらしいです。
またimgタグにalt属性をつけたりして、あの手この手で伝える手はありますが、わざわざそんなことしてまで伝わるんだか伝わらないんだかわからないことをやるよりは、僕は初めからテキストタイトル（画像を使うにしても下部にすぐテキストを入れる）やテキスト見出しにしてしまいます。
あとは。。。あるかな？
これ、忘れてね？ みたいなのがあればツイッターからリプください。
(追記)ツイッターからリプくださいと書いたら本当に有識者の方からDMが届きました。やっぱブログ書いてると勉強になりますね。と言うことで追記。
(追記)Twitter Cardの設定とOGP設定
TwitterやFacebookで、URLとともに画像付きのカードみたいな表示見たことありませんか？こんなやつです。
SNSでシェアした際に、アイキャッチと要約付きで表示してくれるやつです。弊社サイトも使っています。で、これ、みんなやってるのであまり気づかないかもしれませんが、これが出てるのと出てないのでは反応が全く違います。僕の体感だと2倍-3倍くらいリンククリック数が違ってきます。なので必ず設定しなければならないのですが、これもAll in One SEO Packを使うと比較的簡単に設定できます。
All in One SEO PackでOGP設定!Facebook/TwitterをWordPressに連携させよう！
よく考えたらこれは、内部SEOなのか外部SEOなのか微妙なところですね（笑） まあともかく絶対に設定しておいてください。
外部SEO対策をする
評価の高いサイトからリンクしてもらう
例えば、有名人や大手メディアから自サイトがリンクされれば、それだけで訪問者が増えます。で、それより重要なのがただ訪問者が増えるだけでなくて、Googleは高評価なサイトからリンクされているのだから、きっと良いサイトに違いないとして自サイトの評価まで上げてくれる場合があります。例で言うと下記サイトがその典型。
バーグハンバーグバーグという大手広告メディアのPRサイトですが、ユニークな企画で大量のアクセスを集め、最終的に某社の商品のランディングページへと誘導しています。なんでこんなことをするかと言うと、単にランディングページに人を集めるだけが目的ではなく、大量にアクセスがあったこのサイトから（しかもバーグという高評価サイトから被リンク）リンクされている商品のランディングページの価値が間接的に上がるという効果があります。
SNSを使ってより多くの人に拡散してもらう
記事の最後に、「記事が気に入ったらシェアしてね」みたいなの見たことありますよね。説明するまでもないですが、記事がシェアされればTwitterやFacebookなどでURLつきでいろんな人にリーチします。そのため、記事ページの最後にSNSの拡散ボタンを設けることが今の時代必須です。SNSの種類はTwitter Facebook はてなブックマークあたりがオススメです。
これをうまく使いこなしている企業例をあげるとするなら、下記サイトでしょうか。
元ブラック企業だった株式会社アクシアさんが、いかに残業ゼロのホワイト企業になったか的お話が延々と更新されています（とても面白いので皆さん読んでね（笑））。時代柄、ブラック企業は淘汰される風潮にあるので、共感を得やすく、特にはてなブックマークやFacebookなどでの拡散が凄まじいです。共感を得られやすい分野で役に立つ記事を書けば、SNSの拡散によって多数の人にリーチします。場合によっては有名ブロガーなどに記事中で被リンクされることもあるので、Googleからの評価もどんどん上がっていきます。
アクシアさんの場合だと、ブラック労働についての話題を上げ、それがSNS上でウケることで多数の求職者にリーチし、結果求人の問い合わせが増えるという効果があったそうです。目的とコンテンツとSNSのトレンドが合致した好例と言えます。
検索にひっかかるコンテンツを用意する
で、こっからが重要です。弊社のサイトの目的は下記でした。
弊社サイト目的
仕事獲得と求人エントリー獲得
弊社ターゲット1
札幌に住む個人及び法人。年齢は30代から50代の社長や経営幹部クラスターゲット1に何をしてもらいたいか
検索や札幌の労働者の口コミからサイトにたどり着き、仕事依頼の問い合わせ（メールフォームや電話）をもらいたい。月1件目標。
弊社ターゲット2
札幌に住む個人、年齢は10代から30代の若手エンジニアターゲット2に何をしてもらいたいか
ハローワークや求人検索からサイトにたどり着き、求人エントリーをしてもらいたい。月1件目標。
ターゲット１、２ともに共通しているのは札幌での検索によって、目的を達成しようとしている点です。そのため目的に関連しつつ検索キーワードが多いテーマ＋役に立つ記事を多数サイトに上げていくことが重要です。
前述のアクシアさんであれば、ブラック企業を話題に上げることで逆に求職者を集め、目的を達成しました。ではお仕事を獲得したい、エンジニアを集めたい場合はどうすれば良いか。それはとにかく業務上得た知識や工夫した点などをノウハウとして上げていくことです。
例えば、弊社サイトであれば
で多数の検索アクセスを得ていますが、これはラーメン屋さんが実際にホームページを作ろうとした時に、この記事に当たれば、弊社に依頼が来るかもという狙いがあって書いています。
また、Webデザイン初心者向けの勉強記事も上げましたが、
これもWebデザインについて勉強している人がここにたどり着き、うちに求人エントリーを出すことを目論んでいます。
無論、無手勝流に書くのではなく、Google Search Consoleのキーワードプランナーで良さそうなキーワードの検索ボリュームを測り、関連キーワード取得ツールも使って、関連するワードベースに記事を書き、網羅的に複数ワードで検索順位を上げる取り組みを行っています。かつ、内容がペラくならないように、できるだけ自分の言葉で自分が理解したことを説明してます。コピペとか論外です。
僕はWebデザイナーである一方、Webライターでもあるので、言っちゃいますが、ぶっちゃけ綺麗なデザインとかこだわりのデザインとか、二の次です。綺麗なデザインでアクセス0のサイトは世の中に捨てるほどありますが、デザインは簡素だけど面白いコンテンツで月間○万PVというサイトもめちゃくちゃあります。見た目にこだわるより、どんなコンテンツを作るかを第一に考えないとサイトリニューアルは成功しません。
リニューアルの結果 アールズの場合
サイト改修前とサイト改修後の１ヶ月の各指標の増加率は下記の通りです。（すごい数になってますがもともとが少ないので大したことないです）
検索表示回数：19293%増
検索クリック数：15723%増
PV数：197.85%増
問い合わせ数： 0
問い合わせを受けるという大目標を達成していないため、いくら数字が上がってもしょうがないです。が、やれば確実にアクセスが増えることがわかったので、今後は問い合わせページの改善や、残りの旧デザインのままの固定ページを改善したり、何よりもっとバズる記事を書き続けることが重要になってくるかと思います。
何度も言いますが、小手先でデザインだけを綺麗にしても絶対に目標は達成できません。デザインとSEO対策を施したコンテンツの2つがセットになってリニューアルと言えますので、是非リニューアルをご検討されている方は肝に命じておいてください。もちろん弊社に頼んでいただければありがたいです。場合によっては下記の記事みたいに勉強できますので。
本日は以上！
