SEO対策ホームページ作成で知っておきたい専門用語と「いらない」その知識

ホームページの作成で知っておきたい専門用語には、冒頭で挙げた残り6つの専門用語があります。まず、この6つを整理しておきましょう。

SEO対策ホームページ作成で知っておきたい専門用語

  1. モバイル対応
  2. サイトデザイン
  3. CMS(ワードプレス)
  4. SEO
  5. FTP接続
  6. SSL認証

特に1〜3に関しては、基礎知識だけではなく、専門知識とスキルが必要だと勘違いしている人が多いですが、それが必要だったのは5年前までの話です。それでは、解説していきましょう。

モバイル対応サイトは標準装備が当たり前

ホームページを自作したいと考えた時、今の時代モバイル対応(スマホ対応)しているサイトを作らなければ意味がないと考えるのが自然な流れです。

スマートフォン対応が必須の時代になった理由は、別の回で解説いたしますが、「モバイル対応のホームページを自作するのは難しい」と、感じてしまう理由は、ホームページ制作会社が、モバイル対応(スマホ対応)するための料金を加算しているからに他なりません。

5年前(2012年)なら、
それもまだ頷けます。

なぜなら「スマホ対応」に関して調べていくと「レスポンシブ・ウェブ・デザイン」という専門用語にたどり着き、この用語が日本でも使われるようになったのが2012年で、スマホ対応に注目が集まり始めたのも、この時期だからです。そのため、その時点では追加料金を請求されても「仕方がない」かもしれません。

しかし、私たちは、このスマホ対応したホームページ作成サービスを2012年から提供していますが、スマホ対応したホームページだからと言って追加料金を掲載したことは一切ありません。

なぜなら、この2012年からアメリカでは、すでにレスポンシブ・ウェブ・デザインを採用したホームページテンプレートが研究し尽くされており、スタンダードとなっていたので、私たちはその流れを汲み、料金を上乗せしなかったのです。

「レスポンシブ・ウェブ・デザイン」とは、「レスポンス」(反応)するホームページデザインのことで、閲覧されている端末の仕様に反応して、デザインを変化させるホームページのことを指してこう呼びます。

例えば、このページ

パソコンで閲覧すると、最上部には5つのメニューボタンがあり、左側(これを「左カラム」と言います)に、およそ3分の2のスペースで本文が記載され、右側(これを「右ララム」と、言う)に、広告や拙著紹介、最新の投稿などを紹介するパーツが並びます。

しかし、この表示形式はiPad Proくらいの画面サイズ(幅1024px)までの表示形式で、それ以下の狭い幅しかない端末では、5つのメニューボタンは、「」の中に格納され、本文の下に右カラムの内容が表示されるよう変化します。

今では主流になっていますが、当時はスマホ対応させるための方法として、このレスポンシブ・ウェブ・デザインの他に2通りの非常に専門知識と技術が必要な面倒な方法がありました。

松村(左)

どれだけ面倒だったかというと、この2通りの方法で作ったホームページは、Googleにもその仕様を適切に伝えるためのプログラムを専門言語を使って記述しなければいけなかったんです。

そして、それ以上に、そのプログラムを正確にGoogleが認識しているのかもチェックしなければならなかったのです。

女性:右

レスポンシブ・ウェブ・デザインは、なぜ、その必要がなかったのですか?

指し棒(左)

それは、レスポンシブ・ウェブ・デザインは、「見え方」をパソコンとスマートフォンで変えているだけで、そのほかのことは変えていないので、Googleには関係なかったからだよ。

女性:右

でも、今ではGoogleはスマートフォン対応をしているサイトかどうかを見分けられているんではないですか?

松村(左)

なかなか専門的な質問だね。それは、おそらくだけど「viewport」という記述のあるなしで見分けているんじゃないかな?

女性:右

「見分けているんじゃないかな?」なんて、いい加減な〜(笑)

松村(左)

Googleがどんなコードを読み込んで、スマホ対応のサイトと認識しているかどうかが、ホームページ運営に関係するかな?

女性:右

ですよね…(汗)

ホームページは、今も昔もHTMLという言語で記述されたものを、ウェブブラウザが認識して、私たちが閲覧している画面を作り出しています。

ホームページを作る言語にはHTMLのほか、最近ならPHPがありますが、結局、PHPもHTMLコードを生成するために使われるプログラムコードの一つで、結局ウェブブラウザは、PHPを読み込むのではなくHTMLを読み込みます。

作り手としてHTMLで書くよりもPHPで書いたほうが、覚えてしまうと簡単で、いろんなことが整理できるといったところでしょうか。今の時代、PHPに手を加えるようなことも、ほとんどないので、覚えなくて良いと思います。








ホームページをかたどる言語には、この他に「JavaScript」や「CSS」などのプログラムがあります。「JavaScript」は、ホームページに動きを持たせるプログラムコードで、今は、アプリ化されているので、手を加える必要は特別な理由がない限りありません。

「CSS」は「カスケーティング・スタイル・シート」の略で「Cascading」には、「階段状の滝のような」「連鎖的に伝わる」という意味があります。これはCSSを記述していくルールみたいなものを意味する言葉なので、あまり気にする必要はありません。

「スタイル」とは、サイトのデザインのことで、文字の色や大きさ、ホームページ全体の色やボタンの色、大きさなどを、この「CSS」でコントロールしています。

昔は、ボタンも罫線も画像を使って作っていたのですが、今はほとんどのことが、この「CSS」で、出来るようになりました。

先ほど取り上げた「レスポンシブ・ウェブ・デザイン」も、この「CSS」で制御しています。例えば、アクセスされている端末の画面がこの大きさ以上だったらAというCSSを参照してデザインを反映してください。この画面の大きさより小さく、この画面よりも大きい場合はBのスタイルシートを参照して、それ以下の場合はCを参照。という記述を全部CSSの中に書いてしまいます。

笑顔(右)

この説明だと、CSSが何枚にもわたって存在しているように感じさせてしまうけど、1枚のCSSで完結している場合もあります。

あえて、ここで紹介したホームページをかたどるプログラム言語を覚える優先順位をつけるとするのなら、今の時代は「CSS」>「HTML」>>>>>「PHP」となって、JavaScriptは、プログラムに興味が出てきて、ビジネスではなくプログラムを研究したいという人以外は必要ないと考えています。

ちなみに、なぜ、これらの言語のことを知らなくてもホームページを自作できるのかというと、ホームページはテンプレートから作る時代になったからです。

オリジナルデザインなんて、まさに旧石器時代の考え方なのです。

ここで、ちょっとプログラミングの世界に関して、少し触れておくと「レイアウティング」を司る、HTMLやCSSは、今後「価値が下がる」と言われているようです。
(参照元:http://ailab.hatenablog.com/entry/2016/08/28/artificial-intelligence-programming-lang

どう言うことかと言うと、HTMLやCSSは「気軽に始められるウェブ制作」という考え方が主流となってきているので、これらの言語に関する専門家へのニーズはなくなるということです。

このことを逆から考えれば、ひとつは「HTMLやCSSは不要な時代が来る」と、考えることもできますし、また、その逆でこれらの言語に関する専門家がいなくなる以上、ウェブやインターネットに携わる企業や人にとっては「最低限の基礎知識」としてHTMLやCSSに慣れておく必要があると言うことです。(その理由は、また別の回で)

順番的に次は、専門知識が必要だと感じさせる「サイトデザイン」ですが、その前にCMSとワードプレスについてお話ししておきます。

HTMLとCSSについて

HTMLにもCSSにも「バージョン」があります。このバージョンアップによって、ウェブサイト上での表現方法が豊富になっているのは確かです。しかし、ワードプレスをウェブサイトの根幹システムとして採用することで、これらのバージョンアップにもワードプレス・テーマのバージョンアップで対応することができるのです。

そのため、特に独創的なコンテンツ上の表現を求めない限り、ワードプレス・テーマによっては最新の表現手法をクリック作業で選択したり、切り替えられるようになります。

抑えておきたいワードプレスの「いろは」

松村です。このパート以降は、私の経験をもとに話を進めます。私が初めてホームページを自作したのは(自作以外のホームページを運営したことはありませんが)、1997年か98年です。この時はHTMLとCSSを勉強してテンプレートなどは使わずに直接コードを書いていました。

そうは言っても、このころから「練習用のホームページテンプレート」などは、教則本にCDロムで付いていたり、その著者のホームページからダウンロードできました。

しかし、当時は「ホームページは持っているだけでカッコいい」時代でした。ホームページを「作品」という人もいるくらいで、「ホームページデザイン大賞」なんてイベントまでありました(あれ?今でもありましたっけ?)

そのため、ホームページの制作はデザイン主導で発展していきました。そこでもっとも有名なホームページのデザイン理論は「Zの法則」が挙げられるでしょう。

ホームページにアクセスした閲覧者は、「Zの文字」を描くように目を動かし、コンテンツを読むと言う理論です。これと同時期に「Fの法則」と言うものもあり、現在主流となっている「右カラム」のレイアウトではなく、左カラムにメニューやバナーボタンがあるページレイアウトデザインが人気を集めていました。

結局、スマホ時代に入り「Fの法則」は、絶滅したと言ってよいでしょう。

指し棒(左)

横書きの文章が一般的なインターネットにおいて、人は、文章を左から右、上から下に読む以上、目の動きは「Z」を描くわけですね。個人的には、もともと一旦導線が途切れる「F理論」には、疑問を感じていたのは事実ですが…

少し脱線しましたが、この「閲覧者の目の動き」に関して、アメリカをはじめとするインターネットの研究企業は長年にわたって、その調査を行なっており、中にはそれに合わせたデザインテンプレートを開発提供している企業があります。

現在、日本国内でも販売されているウェブページをどのように見ているかなどを知ることができる「ヒートマップ分析」などのツールも、そのほとんどが海外のツールです。

私は、このツールを使うよりも、これらのツールを活用して生み出されたテンプレートをホームページのデザインに採用するのが、一番早く、コスパが高いのではないかと考えたわけです。

そこで、2012年に海外のWordPressテンプレートを3,000サイトほどを調査し調べました。

この調査の中で「共通した項目」と「共通するデザイン」を有するテンプレートを数10個程度仕入れて、国内サーバーでも実際に動くのかを検証し、利用するワードプレス・テンプレート(一般的には、このワードプレス・テンプレートのことを「ワードプレス・テーマ」と呼びます)を選んでいきました。

こう言った経緯があり、私たちは、自分たちでは到底集めることが不可能な海外の莫大な調査データをもとに開発されたウェブ・コンテンツ・デザインの中から、さらに共通する項目だけを抽出しホームページを作成し、実際に国内で利用した際の検証を行うために、テストサイトやアフィリエイトサイトなどを運営しているわけです。








ワードプレス・テーマとプラグインの関係

ワードプレスとは、世界でもっとも利用されている(Web上の29%がワードプレスサイト)と言われる、CMS(コンテンツ・マネジメント・システム)です。

そして、このワードプレスを使いやすくしたり、機能を簡単に追加させるためのアプリがあり、これを「プラグイン」と言います。そして、このワードプレス・プラグインは、有償無償合わせて45,000個に登るとされています。

プラグインとワードプレス・テーマには相性のようなものがあり、すべてのテーマですべてのプラグインが正しく動作するとは限りません。

また、これは「経験則」ですが、ワードプレス・テーマとレンタルサーバーの相性もあるようで、最悪の場合は、画面が真っ白になり、管理画面すら使えなくなるワードプレス・テーマもあります。

ワードプレスを利用する際に最低限押さえておくこと

このような、便利でとても優秀なワードプレスですが、あなたのホームページでワードプレスを採用する際にはいくつか注意することがあります。

もっとも、注意が必要なのは「セキュリティ」です。

コンピューターウィルスの数が、マイクロソフト向けのウィルスよりもウィンドウズを狙ったウィルスが多いと言われるように、コンピューターウィルスの攻撃対象や、ウェブサイトの改ざん、マルウェアの攻撃対象も利用者の多いCMSに向けられます。

そのため、ワードプレス自体も頻繁にバージョンアップされ、そして、それに呼応するかのように、ワードプレスのテーマも、プラグインもバージョンアップされます。

これを俗に言う「ワードプレスの脆弱性を改善するアップデート」と言います。

ワードプレスのバージョンアップは、何も脆弱性を改善するアップデートだけではありません。

ワードプレスは「php」と言う、プログラム言語を主とするため、phpのバージョンアップの際にもワードプレス(以降「WP」と記述)もバージョンアップされます。

phpのバージョンアップは、それに対応するサーバーのバージョンアップとともに実施され、サーバーによっては、古いphpのバージョンのまま、WPを運営することも可能です。

phpのバージョンアップに際して、私たちホームページ運営者が行う作業は、サーバーの管理画面で、新しいバージョンのphpを利用するかどうかを選択する程度です。ただし、サーバーによっては、自動的に最新版のphpに置き換えられる場合があります。

WPのバージョンアップには、メジャーアップデートとマイナーアップデートがあり、メジャーアップデートの場合は、WP管理画面内「更新」のページから「今すぐ更新」のボタンをクリックして行う必要があります。マイナーアップデートの場合は、自動でアップデートが行われます。

WordPressのバージョンアップはクリックするだけ

経験上、ワードプレスのアップデートに伴って、テーマがバージョンアップされない場合に、ホームページが表示されなくなるなどの不具合を起こしたことはありません。私は2010年からWPを使っていますので「経験上」このようなことはお話できますが、理論上は、WPのバージョンアップにテーマやプラグインが対応しない場合は、レイアウト崩れや機能不全が起こり得ることを把握しなければなりません。

そのために、私たちは、WPテーマやプラグインを新規で選ぶ際には、開発者の更新履歴などを参考に選ぶようにしています。

また、ホームページ制作依頼に対してご提案するWPテーマは、実際に私たちが現在進行形で利用しているテーマの中からご提案しています。その理由は、何かしらの不具合が起こった際に、お客様にすぐに通知でき、また対応できるようにするためです。

WPは表示速度が遅い?プラグインの使い過ぎが原因?

ワードプレスに関していろいろ調べていくと「WPは表示されるまでに時間がかかる」という記述や「プラグインの使い過ぎは画面が表示されるまでに時間がかかり、SEO対策にマイナス」という記事を見つけることができます。

確かに、ページの表示速度(正確には「読み込み速度」)が、検索ランキングに影響を及ぼすと考えるのは、自然な考え方です。

なぜなら、Googleは「ユーザービリティを優先する」と、言っているからです。そのため、コンテンツが表示されるまでに検索者にストレスを与えるようなコンテンツは「ユーザービリティが低い」と評価し、検索ランキングの上位に表示しないようなアルゴリズムがあっても不思議ではありません。

しかし、コンテンツの読み込み速度に大きな影響を与えているのは、WPテーマやプラグインではなく、画像であるケースは少なくありません。

もちろん、プラグインを使わずにphpファイルを直接編集して機能を追加することもできますが、この場合は、phpを編集して直接機能を追加した場合と、プラグインを使った場合の表示速度を検証し、そのタイムラグによってどれだけの損失が生まれるのかを算出して決定する必要があります。

しかし、これは現実的ではありませんよね?

ましてや、今、インターネット通信の業界では「5G」が注目されています。ざっくりした表現になりますが、2018年現在の4Gが2020年をめどに運用開始が見込まれている5Gになると、その通信速度は10倍になると言われています。

松村(左)

「通信速度が10倍になる」と、言われても、単純にウェブページが表示されるまでに10秒かかっていたものが1秒で表示されると言うことだけじゃないそうです。

かなり専門的な話になり私もすべて理解できているわけではありませんが、「まぁ無茶苦茶早くなる」「表示されるまでのあのストレスはなくなる」と、考えていても良さそうです。

女性:右

5Gになると、個人のインターネット番組が民放を抜くというニュースを見たことがありますが…?

指し棒(左)

かなりマニアックなニュースを知っているね!そうなんだ、5G通信は映像では8Kレベルをストレスなく配信できるらしく、地デジは4Kですら整備が整っていないんだよね。その結果、民放が使っているようなカメラで撮影した番組よりも、スマホカメラで撮影して、ネットで配信する映像のほうがより綺麗な画質で配信可能になるので、そのようなことが言われているわけだよ!

5Gに対する期待感は、ホームページの製作会社でもある私たちからしても、かなり高いのですが、この原稿を書いている2018年から考えても、あと2年あります。

この2年間、表示速度が遅いばかりに、検索エンジンの評価を下げ、顧客を獲得する機会を逃していては本末転倒です。そのため、このあたりの選択は、実際にコンテンツを公開してからアクセス解析を参考に検討したほうが良いと私たちは考えています。

そのためワードプレスのテーマも、プラグインも、あまり新しいものに飛びつかず、実績豊かなものを選択することが懸命だと、私たちは考えています。

最低限押さえておきたいWPの「いろは」まとめ

  1. WPは、世界でもっとも利用されているコンテンツ・マネジメント・システム
  2. 利用者が多い分だけ、セキュリティは万全に(別の回で詳細を解説)
  3. WPの性能は、「テーマ」と「プラグイン」によって変化する
  4. WP自体もそして、テーマも、プラグインも随時バージョンアップされるため、更新作業が欠かせない。
  5. 理論上、バージョンアップの結果、テーマやプラグインが機能しなくなるリスクがある
  6. テーマやプラグインによっては、表示速度(ページの読み込み速度)を遅らせるものがある
  7. ページが表示されるまでに多くの時間を有するコンテンツは、検索エンジンから低く評価される。(ページの読み込み時間が1秒から10秒になるとモバイルサイトの訪問者が離脱する確率は123%増加する。参照元:https://goo.gl/hLbc1e








残念なWPサイトにしないための鉄則

ワードプレスは、トップページを「index.php」というファイルで制御しています。そのため、本来ならワードプレスが持つこの利便性を活かして、クリックひとつで、トップページを入れ替えることが出来ます。

ちょっと従来のHTMLで作られたホームページでは考えにくいことかもしれませんが、この機能にはさまざまな利点があります。

しかし、ワードプレスを使ったホームページを製作する業者の中には、このトップページを手軽に入れ替えられる利便性を押し殺す仕様でホームページを製作する業者が数多あります。

この理由に関して詳細をここでお話するような野暮なことはいたしませんが、もし、あなたに多少phpに関するスキルがあったとしても、ワードプレスでホームページを作る際に、直接index.phpのファイルに、コンテンツ内容を書き込むような愚行は行わないようにしてください。

言うまでもありませんが、現在運営しているワードプレスのホームページが、index.phpに直接コンテンツ内容が書き込まれる仕様で作られている場合は、すぐにその制作会社さんに、WPの「固定ページ」から、編集可能な仕様へと作り変えていただいてください。

この時、もし「料金が発生する」と、言われた場合は、残念な制作会社に依頼してしまったのだと、諦めるしかありません。

なぜ、トップページはWP「固定ページ」で作るのが鉄則なのか

WPはphpというプログラム言語で機能していますので、従来型のHTMLで作られたホームページよりも柔軟な修正や更新ができて当たり前です。

WPは「コンテンツ・マネジメント・システム」ですから、全てのコンテンツを、運営者がマネジメント(管理)出来る仕様になっていなければ、このシステムを使う意味はありません。

本来、WPはphpで制御する「プログラム」部分と、このphpファイルを経由してHTMLのコンテンツとして生成される「コンテンツ」部分を分離して運営できるところに魅力があります。

そのため、本来あるべきWPを使ったホームページ作成は、依頼者がHTMLの知識を持たなくても、WPのシステムを通じて、運営可能な「ホームページ・システム」を納品するのが本来あるべき姿なのです。

それを、専門知識なく、見分けるコツのひとつが、トップページをWP管理画面内にある「固定ページ」の中から、いつでもすぐに入れ替えられるかどうかをチェックすることです。

WordPressは、トップページを簡単に入れ替えられる

固定ページの中からすぐにトップページを入れ替えられると言うことは、定期的に、トップページに配置したコンテンツの位置をテストできることを意味します。

通常、リスティング広告のリンク先として用いられる「ランディングページ」のABテストは、1箇所ずつ、その要素の違いによる成果を比較します。この場合、あらかじめ2種類以上のランディングページを作って、それぞれ、広告がクリックされた際にアクセスさせるページをランダムに入れ替えるのですが、これと似たようなテストを、WPの基本特性を活かしてトップページで行うことが出来るわけです。

2種類以上の「配置違い固定ページ」を準備し、1つだけをトップページとして公開し、アクセスデータを集めます。任意の期間が終了後、「下書き」にしていた、もうひとつの「配置違い固定ページ」をトップページとして公開し、それまで公開していた「固定ページ」を「下書き」に戻します。

こうすることで、この2種類の固定ページは「配置」だけが違いますので、Googleは「異なる内容」とは認識しません。

しかし、配置が違いますので、自ずと閲覧者の導線は変化します。

さらなる配置違いの固定ページを作る際も、コピー&ペーストで、パーツだけを入れ替えれば、HTMLの知識もphpの知識も必要なく作ることができ、新たなテストを実行することが出来ます。

「配置違い」だけではなく「配色違い」も、あらかじめCSSに登録されたカラーバリエーションで数種類のトップページ候補となる固定ページを作っておけば、済むだけのことで、わざわざ、専門家に依頼して、都度配色を変更してもらう必要もなくなります。

仮に、このような「ホームページの土台」を専門業者に依頼する場合や、追加でホームページの改善に専門家の力を借りる場合は、こういった「ホームページ・システム」の改善に関してのみ依頼することが、適切な制作会社との付き合いかただと言えるでしょう。

WPでは、各ページのテンプレート作成も自作できる時代になった

私がWPを使い始めた2010年頃はまだ、ページのレイアウト・テンプレートを簡単に自作できるWPテーマやプラグインはあまりなかったように記憶しています。しかし、現在はそうではありません。

確かに、サーバーやテーマとの相性などが原因で、バグを起こすプラグインもいくつかありますが、(簡単に)自作したページ・デザイン・テンプレートを使って、ウェブサイトのコンテンツを増やすことができるプラグインが確かに存在します。

例えば、私たちが運営している「記事代行どっとこむ」で採用しているプラグインは、下記のようなコンテンツ・デザインをページ単位またはパーツ単位でテンプレート化でき利用することが出来ます。

テンプレート自体の修正もできますので、とても重宝しています。

きっと、このようなプラグインをお客様に応じて都度開発していたのでは、それだけで数十万円や100万円を超える開発費が必要でしょう。しかし、私たちは、これらのプラグインを使うことによって、お客様から開発費をいただく必要がなくなり、また、お客様も1、2度この機能に触れると使い方を覚えられますので、ストレスなく、ご自身でプロ仕様のデザインで新たなページが作れるようになります。

もはや、私たちがホームページの制作依頼を寄せていただいた際に、多額のデザイン費用などをご請求することもない理由はこういったことが背景にあるからです。あえていくばくかの費用をいただくとすれば、これらのプラグインを見つけ出したりテストするために必要だった「調査費」程度でしょうか…。

ホームページのデザインでもっとも、重要なこと

ホームページのデザインで、もっとも重要なことそれは…

オリジナルデザインを採用しない
ことです。

ホームページのご依頼や制作のご相談をいただく際に、「こんなサイトにして欲しい」というご要望をいただくのですが、その根拠に愕然とすることが頻繁にあります。

以前、「フォントの変更」を強要する依頼者がいましたが、解約いただきました。その理由は、素人のセンスで成果が出るのなら、専門家のディレクションやデザイナーの提案は必要ないのです。

どうしても、オリジナルなデザインを採用したいのなら、製図し、フォント名まで正確に指定し、文字の大きさも、行間も指定し「コーディング(プログラムコードを記述すること)」だけを、その専門業者に依頼すれば良いだけです。

その、デザインを採用する論拠は何ですか?
その「案」を採用したい理由は、何ですか?

この2つの問いに対して、専門家を納得させることが出来ないのなら、また、この2つの質問に対して、専門家が、ご依頼者に説明できないのなら、採用する理由はありません。

オリジナル・レイアウト・デザインを私たちが採用しない理由は、その「オリジナルデザイン」での実績やデータを私たちが持たないため、どれだけ、ご依頼者の「好み」だったとしても、成果獲得までの道のりが途方もないものになるのではないかと感じてしまうからです。

また、仮にそのオリジナルデザインを採用して、そのデザインでのデータを取り改善していきたいと望まれても、そのオリジナルデザインの「開発費」を加算してまで、ホームページを作る予算を確保されているのなら、話は変わってくるかもしれません。

「その代わり」と、言っては何ですが、そのホームページから成果が得られるかどうかを、私たちは保証できません。

ホームページを「アート」や「作品」として、眺めたい場合は、そのような目的で制作すれば良いと思います。しかし、集客ツールや営業ツールとしてホームページを手にしたいのなら、過去、あなたがデザインしたサイトデザインで満足以上の成果を手にした経験がない以上、実績豊富なデザインテンプレートを採用するのが得策だと、私たちは考えています。

成果を連れてくる王道のトップページデザインとは

トップページのデザインには、成果につながりやすいものと、そうでないものがあります。「配色」や「色目」的な要素はここには含まれません。

多少、暖色系や寒色系の採用によって成果が異なる業種が分かれる場合もありますが、私たちは「誤差の範囲」だと、感じています。

なぜなら、スマートフォンでのウェブコンテンツ閲覧が日常になって以降、文章の背景色は、ほとんど「白」だからです。ロゴの色一つ、パソコンで閲覧した際のメニューバーの配色違いで、閲覧導線が変化したり、成約率が変わったりするとは考えられません。

また、「ボタン」に関しては、様々な見解や理論があります。ただ、私たちからすれば、「突飛なアイデアを採用しない限り、好きにすれば良い」と、考えています。

この理由は、ボタンをクリックさせるまでの「コンテンツ」のほうが重要だからです。

そのため、ボタンの配色に関する調査もあまり信用していません。それよりも、ボタンをクリックさせる前に掲載する文章内容に対して読者がどのような心理状況に変化するのかを踏まえた配色を採用するように心がけています。

ただ、どこまでいっても「心理学も統計学」です。

理論や理由に納得できない場合は、ご自身の責任の範囲で、配色を選択すれば良いと思います。どの配色がよりクリックを誘発するのかテストを実行するのも良いかもしれませんが、それよりも、その前後に記載するコピー(文章)のテストを実行したほうが、きっと「再現性」を高めることにつながることでしょう。

トップページの構成要素は「1・3・1・2」

これまで、3,000種以上のホームページを調査したり、日々追加される新たなWPテーマの仕様(トップページ構成)を調査し続けていると、パソコンで閲覧された際のトップページ・レイアウトとスマートフォンで閲覧されている際のコンテンツ配列には、しっかりとした理論があることがわかってきました。

現代のインターネット利用はスマートフォンがその大半を占めるため、パソコン版レイアウトの「配列」や「レイアウト」などは、それほど、ホームページの成果に影響しないという安直な意見をお持ちの専門家も少なくありません。

論拠は、それぞれ後述するとして、トップページのパーツ配置は、上から順に「1・3・1・2」が最適です。

この「1・3・1・2」は、トップ画像(ヘッドコピー)、主要3コンテンツ、最短目的達成コンテンツ、2つのサブコンテンツを意味します。

反応を引き出すTOPページレイアウト

上図が、反応と成約率を引き上げるトップページの基本レイアウト構造になります。基本的には、この構造でホームページを作り、その後アクセス解析と現場オペレーションの兼ね合いを精査して、レイアウトを改善していくのが望ましいと言えるでしょう。

このホームページの場合は「1・2・3・1」の構成にしています。「記事代行どっとこむ」の場合は「1・3・3・1・3・3」です。コーポレートサイトの場合は「1・4」です。アップル社の2018年1月現在のレイアウトは「1・1・2・2・2」です。

SEO対策を行って、基本的に検索されやすいキーワードで上位表示を達成できるテーマでホームページを作成する場合は「1・3・1・2」がオススメです。

SEO対策を行い、比較的検索数の多いキーワードで検索ランキングの上位を達成できるのなら、そのキーワードにちなんだ「主要コンテンツ」のキャッチコピーを、検索キーワードを踏まえて設定し、大きめの文字で記載します。

単純な解説で、すぐに問い合わせを獲得しても、営業オペレーションが煩雑にならないのなら、この「ヘッドコピー」のすぐ下に「お問い合わせフォーム」や電話番号を掲載しても良いでしょうが、そのようなサービスはなかなか少ないことでしょう。

なぜなら、比較的検索回数の多い検索キーワードには「抽象的」な言葉が用いられやすいので、そこで優れたキャッチコピーを付けることができたとしても、それは、閲覧者をそのページに止めるのに役立つ程度で、すぐにコンバージョン(成約)とは、ならないからです。

そこで、必要になってくるのが、ウェブサイト全体のテーマ(トップページで設定する検索キーワード)に付随する3つの主要コンテンツです。

例えば、ダイエットに関するウェブサイトを立ち上げると仮定しましょう。サイト全体で設定するテーマ・キーワードは「ダイエット」とします。

仮に、ヘッダーに記載するコピーを「10歳若返るダイエットをあなたにも…」とし、この3つの主要コンテンツ欄に掲載するテーマに「小顔ダイエット」「美脚ダイエット」「下腹ダイエット」とします。

松村(左)

この3つは、このサイトで一番売りたいものということですね。

この時よくある間違いが、この3つの主要コンテンツに引き込む画像なんかに、そのまま「小顔ダイエット」「美脚ダイエット」「下腹ダイエット」と、サービスのテーマを表示してしまうミスです。

これでは、セールス臭が前面に出てしまい、クリック率(ページの誘導率)を大きく引き下げてしまいます。この場合は、例えば、小顔ダイエットを希望する人に共通する悩みを「疑問形コピー」で掲載したり、「〜〜ご存知ですか?」で締めくくるコピーで誘導します。

パソコンで閲覧された際の配列は「横3枠」ですので、中央の枠がもっとも目を引きます。しかし、スマートフォンでアクセスされる場合は、左から順に上から下に配列されますので、ここに掲載するコピーの形態は「共感形」「共感疑問形」「ご存知ですか形」のコピー配列がオススメです。

全てを同じ形式のコピーにすると「くどさ」が出てしまうので、3枠目のクリック率を大幅に下げてしまいかねません。それがたとえ、3枠目に月間平均検索回数がもっとも多いキーワードをテーマにしたコンテンツであっても、極端にページの誘導率を引き下げてしまいます。

ヘッドコピーで、アクセス者を引きつけたら、その閲覧者は自動的にその下に続く「導入文」を読み、わずかな共感を得て、主要3コンテンツに興味を抱くようになります。

ここで必要なのは、「さらなる共感」もしくは「疑問点の明示」です。

読者は、コンテンツの内容に共感しただけでは、アクションを起こしません。「共感」は、次に続く文章などのコンテンツを読む「動機」につながるだけです。閲覧者にアクション(ボタンのクリックやフォームへの入力)を起こさせるには、読者の中で不明瞭のままになっている「疑問点」を明確に指摘することが肝心なのです。

もしくは、アクションを起こさずにはいられないレベルまで共感を高める必要があります。

そのため、特に検索経由のアクセス者に対しては、ヘッドコピーで共感を得て、ヘッドコピーに続く導入文を読ませ、その共感を高め、ヘッドコピーと検索キーワードに付随するテーマを深掘りする「主要3コンテンツ」には、「共感形」「共感疑問形」「ご存知ですか形」のコピーで閲覧者を誘導するわけです。

あとは、この流れを掴んだのちに、改善を加え、オペレーション効率を上げる誘導文や掲載コンテンツの変更を行なっていくわけです。

本サイトや私たちが運営しているサイトは、すでにこのコンセプトにおいて、数度のサイトリニューアルを果たしているので「共感形」「共感疑問形」「ご存知ですか形」のコピーから多少形態を変形させています。

トップページに掲載する文章の構成

トップページは俗に「インデックス・ページ」と呼ばれ、目次的な意味合いも持っています。しかし、サブページに誘導するだけのトップページでは、現在の検索エンジンは「ドアウェイページ」と判断し、コンテンツの質を低く評価してしまいます。

「ドアウェイページ」または「ドアウェイコンテンツ」とは、検索結果ページのように、目次機能しか果たしていない「リンクページ」のことを指して、こう呼ばれます。

検索結果のページ自体がGoogleが検索者に提示する「ドアウェイコンテンツ」ですので、そのページに続いて、各企業が運営するホームページのドアウェイページに誘導していたのでは、Googleの存在価値を検索者は感じづらくなってしまいます。

単純に言えば、ドアウェイコンテンツに連続してアクセスさせられたとすれば、ユーザーは、Googleによってインターネット上を「たらい回し」にされていると感じるわけです。

そのためにもトップページでも、検索者に「解決策(ソリューション)」を提示する必要があります。この「解決策」を検索エンジンは「コンテンツ」として、また「有益な情報」として評価します。

そのため、トップページには、ヘッドコピーに続く導入文章で、検索者へ「解決策がこのサイトにはある」ことを伝えつつ、新たな問題提起や提案を行う必要があるわけです。

直接的な「解決策」は、商品の購入だったり、問い合わせだったり、資料請求だったりします。これが「最短目標達成コンテンツ」と示した緑色の部分です。

画像内に「資料請求」「問い合わせ」と書かれたボタンのようなイメージを記載していますが、ここにはいずれかのみをリンクボタンとして掲載します。

メールマガジンへの登録でも良いでしょう。

トップページの役割は、この「最短目標達成コンテンツ」へ誘導することを目的に、文章を構成します。

この「最短目標達成コンテンツ」上部に位置する「主要3コンテンツ」は、「最短目標達成コンテンツ」にアクセスして、最速で問題解決を果たしたい閲覧者にするための「情報提供」という位置付けも含まれています。

「主要3コンテンツ」に移動するボタンの前後には、30〜60文字、ときには120文字程度の誘導文章を記載します。

この「誘導文章」の目的は「必要とあらば直近のボタンをクリックしてください」という程度で書くと良いでしょう。

トップページの主要目的は、あくまでも「最短目標達成コンテンツ」にアクセスさせることです。もちろん、ここは、「最短目標達成コンテンツ」を手に入れるために個人情報を入力するページにリンクしたボタンを掲載するだけでも良いですし、入力フォームを掲載しても構いません。

このサイトの場合は、運営年数が10年近くなるため、現在の構成はオペレーション効率を突き詰めた構成になっているので、多少参考にしにくい構成になっているかもしれません。また、この『SEO対策基礎講座』のコンテンツが今以上に充実すれば、トップページの「最短目標達成コンテンツ」を、この講座の目次ページへと変更する予定です。

その理由は、私たちがご提供したいサービスは、ホームページ制作のサービスではなく、ホームページの作成やSEO対策の運営を自社完結するために必要な「解決策」を、それぞれの事業環境に合わせて、ご提案することだからです。

ホームページの制作は、特に専門スキルが必要としない時代になりましたので、僭越ながら、ホームページ作成の相場と呼ばれる料金で、私たちがご依頼を受けていたのでは、私たち自身の経営効率を下げてしまいます。

私たち自身の経営効率を下げてしまうということは、お客様にご提供できるサービスの質が下がってしまうことを意味します。これでは、本末転倒だと私たちは考えているのです。

もしかすると、本サイトや、私たちが運営しているウェブサイトで公開している情報は、他社では料金を支払わなければ、開示していただけない内容かもしれません。

私の拙著『【改訂増補版】実践:小さなサイトの儲かる秘訣、大きなサイトが掘る墓穴。』をお読みいただければ、この講座以上に体感していただけることは、少なくはないでしょう。

トップページに決して掲載してはならないコンテンツ

検索者は、Googleが返す検索結果の中から、あなたのコンテンツを見つけ、タイトルと説明文を読み、興味を持って、あなたのサイトにアクセスします。

そして、そのアクセス者は、初めに表示された画面の中で、もっとも大きな文字(ヘッドコピー(「ヘッドライン」とも言う))に目を奪われ、そのページの内容を読むかどうかを決めます。

「読み続けると決める」と、言うことは、アクセス者に「あなたの選択は間違っていない」ことを、伝える意味もあります(←ヘッドラインを考える際に参考にしてください)。

ヘッドラインを読んで、そのページを読み続けると決めた閲覧者は、その下に続く「導入文」を読み、さらに、ページをスクロールしながら、「主要3コンテンツ」への誘導文を読み、共感や情報を蓄積しながら、どの主要3コンテンツに移動するボタンもクリックしなかったと言うことは、次に続く「最短目標達成コンテンツ」のパーツに到達します。

そのために、「主要3コンテンツ」と「最短目標達成コンテンツ」の間には「リード」と呼ばれる、次のコンテンツに誘導する文章が差し込まれ、「最短目標達成コンテンツ」へのアクションを行わなかった場合は、「そのアクションを起こすために必要な情報を、読者はキャッチできていない」と、考えるのがセールスライターの思考経路です。

読者が顧客としてのアクションを取らないと言うことは、「アクションを起こすのに十分な情報が得られていない」ただ、これだけです。

これは、セールスでも同じで、リアルな現場でセールスをしていても、目の前の見込み客が商品を買わなかったり、契約を結ばない理由は、あなたのことを否定しているからでも、嫌っているからでもなく、「契約を結ぶために必要な情報を得ていない」だけなのです。

ですので、トップページで提供できる、最後のコンテンツになる「サブコンテンツ2種」を提示して、トップページを締めくくります。

この最後に準備した2種類のサブコンテンツへのアクションも起こさなかった閲覧者は、「トップページから買わない客」なだけです。それ以上でもそれ以下でもありません。

しかし、そこはホームページです。

リアルなセールスの現場ではありません。トップページ上でのセールスが完結しないからといって、リアルなセールスのように、次の見込み客にさっさと移っていたのでは「ウェブコンテンツとしての役割」を果たさずに終わってしまいます。

ウェブコンテンツの役割には、「閲覧者に情報を提供すること」と「次の閲覧者を獲得する「種」を得ること」の2つの役割があります。

各コンテンツは、「閲覧者に情報を提供すること」を主目的としますが、1ページで提供できる「情報量」には限界もあります。そうしなければ、今度は検索エンジンが、何に関する情報が掲載されたコンテンツなのかを適切に理解できなくなるからです。

検索エンジンが、そのコンテンツには何が掲載されているのかを適切に理解できるようにすることも、ウェブコンテンツの役割ですから、これが「SEO対策」と言うことになります。

SEO対策とは、検索エンジンが、検索者に打ち込まれるキーワードに対して、そのコンテンツを掲載することが有益だと分からせるための施策です。第1の目的(閲覧者に情報を提供すること)が果たせなかった以上、次のページに誘導する必要があります。

しかし、1つのコンテンツでは「1・3・1・2」の構成を通じて、予測できる範囲で閲覧者に提示する「次の情報」または「さらなる詳細情報」へネタを提供し続けています。

もう、これ以上、検索ワードに付随したサイト運営者が「予測可能」な情報はないので、「ここまでお読みいただき、興味を持ってくださったのなら…」という思いを込めて、「最新のブログ記事」や「メールマガジンへの登録」にページの下部で誘います。








ここで、2012年以降、もっとも多い大きな間違いが、SNSのタイムラインなど「SNSに誘導する」コンテンツを掲載してしまうことです。

ホームページにSEO対策を行うのなら、SNSはフォロワーをホームページに誘導するためのツールであり、ホームページから離脱させてまで、アクセスさせるツールではないことを肝に銘じる必要があります。

SNSを主軸に置いており、そこに決済コンテンツや販売ページがあるのなら、話は変わってきますが、ウェブサイトのことを「ホームページ」と呼ぶように(少し語源的な意味合いは異なりますが)、見込み客の「ホーム」となり得るページとして、あなたはウェブサイトを運営するべきなのです。

ですから、SNSのタイムラインや「SNSウィジェット」と呼ばれるコンテンツは、トップページには掲載する必要のない、無駄なコンテンツでしかないと、覚えておいてください。

女性:右

あれ?私たちのコーポレートサイトには、松村さんのツイッターが掲載されていたのでは?

指し棒(左)

私たちのコーポレートサイトは、検索経由のアクセスを望んでいないよね?

運営方針に「検索経由のアクセス獲得」が、含まれないのなら、それ以外の目的に合わせてSNSフィードを掲載することはあります。ここでは、話が広がりすぎるので、ホームページの運営方針に「検索経由のアクセス獲得」が、含まれるのなら、SNSフィードは掲載しないと覚えておくだけで十分です。

女性:右

あれ?でも、このサイトでも確かSNSフィードを掲載したページがありましたよね?

松村(左)

うん、そう言うページも確かにあるね。でも、よ〜くそのページを見て、そのページの目的を考えてみると、なぜ、そのページにだけ「外部サイト」にあたるSNSへ誘導するようなコンテンツが掲載されているのかの理由が見えてくるよ。

最新情報の掲載は最下部が鉄則

ホームページのトップページの最上部、もしくは、スクロールせずに表示される画面範囲に、最新情報を掲載しているウェブサイトをたまに見かけます。

また、この範囲に最新のブログ投稿記事の目次リンクを表示させたいと要望される方が、時折いらっしゃいますが、月間数100万アクセスを誇るような…そして、検索ではなく、インターネットを開いた時に自動的に表示されている、それこそユーザーのホーム画面に設定されているようなウェブサイト以外、このような配置は、無意味でしかありません。

なぜなら、それぞれのウェブコンテンツが果たす役割の「第一目的」は、そのページに掲載された情報を閲覧者に伝えることです。

ウェブサイトのトップページに担わせる目的が「最新情報を伝える」ことなら、最新の投稿ページへの目次リンクを掲載するのではなく、最新情報そのものをトップページに掲載すべきなのです。

もちろん、この場合なら、毎回、トップページの内容が大幅に更新され変更されますので、サイト名以外の検索キーワードで検索経由のアクセスをトップページが獲得することはないでしょう。

その代表的な例がYahoo!

ヤフーのトップページに「ヤフー」以外の検索キーワードでアクセスして、そのキーワードに付随する情報をトップページから得ることは出来ません。

これは、楽天でも同じです。

試しに、楽天のトップページに掲載されている文章をコピーし検索窓に打ち込んで見てください。きっと、楽天サイト内にある商品ページに関する情報が検索結果に並ぶだけで、楽天トップページが検索結果の1ページ目に表示されることはないでしょう。

このように、すでにインターネットユーザーが、あなたが運営するサイト名を常に気にして、そのあなたが運営するウェブサイトの最新情報を求めていない限り、インターネットユーザーは、トップページに最新情報を求めていないわけです。

ユーザーが求めていない情報をページの上部に掲載するとどうなるか…。

それは、検索エンジンにとっても、検索ユーザーにオススメすべき(検索ランキングに表示すべき)コンテンツとは判断しないと、考えるのが自然な流れではないでしょうか。

そのため、ウェブサイトに随時追加しているブログ記事や最新コンテンツの情報は、トップページを何度かスクロールした後に掲載するのが適切です。

これまでページの「流れ」を見てきた通り、主要コンテンツにも興味を持たず、すぐに問い合わせや資料請求をするでもなく、また「念押し」とも言えるサブコンテンツにも興味を持たなかった閲覧者に対して「私たちは、こんな情報を最近は取り扱っています」という意味合いで、最新情報のサムネイルなどを掲載し、興味を持ってもらえるかどうかを確認する意味で、最新のブログ記事などの情報を掲載します。

さらに、トップページに掲載している情報というのは、往々にして、それぞれの企業が提供しているサービスの一部、または概要しか伝えることが出来ていません。そのため、何かしらの詳細情報にアクセスしていただく意味も込めて、ページ下部に最新情報を、サムネイルリンクなどを掲載します。

そうすることによって、SEO的な意味合いにもなる「ページビュー数」を「1」追加し、ページの滞在時間を記録することによって、検索エンジンの評価を得るとともに、アクセス解析を使った改善を行うために必要なデータを蓄積することにつながるわけです。

アクセス解析とは、通常、各ページに設置された「解析タグ」を読み込むことでデータを蓄積します。そして、各ページの滞在時間は、次に閲覧されたページに設置された解析タグが読み込まれた時間から引き算され算出されます。

そのため、1ページだけ閲覧された場合、「2ページ目の解析タグ」を読み込まないため、その滞在時間をデータ化することができません。

このような「1ページだけを閲覧してサイトを離れる」ことを「直帰」と呼びます。そのため「直帰率」が高いウェブサイトの場合は、各コンテンツがどれだけユーザーに情報を提供できているかを分析することが難しくなってしまいます。

「直帰率」と「ウェブサイトの成果」に直接的な因果関係はありませんが、「直帰率の改善」は、アクセス解析データの分析精度を高めるために、重要な項目であることは確かなのです。

まとめ

  1. トップページも含め、各ページには、閲覧者に情報を伝える「流れ」が重要。
  2. そのページで「満足できる情報」を手にした閲覧者は、サイト運営者の誘導に従って、指示されたアクションを取り、顧客へと変わる。
  3. ページのコンテンツ構成は、共感→疑問点の明示→共感の順で進む。
  4. 王道のトップページ構成は「1・3・1・2」
  5. トップページにSNSのタイムラインを埋め込むのは、お客を逃がすようなもの。
  6. トップページに最新情報を掲載するのなら、ページの最下部が最適。