コンテンツデザインとSEOの関係を理解するためには、まず、上部に掲載した画像をよくみてください。この6つの画像を見ただけで「2つ以上のこと」に、お気付きなら、本ページの内容を8割理解したも同然です。

最上部の画像は、左から、本サイトのトップページ、中央が、ある拙著のセールスページ、そして、右は『SEO対策基礎講座のコンテンツページ』のスクリーンショットを撮影し、用途別のレイアウトデザインの違いをわかりやすく画像化したものです。

トップページのパソコン版デザイン(画像上段左)スクリーンショットのみ、一部加工しており実際の画面とは異なります。下段は、それぞれのスマホ対応時のスクリーンショットです。

WEBコンテンツには、大きく分けて2種類のレイアウトデザインがあります。『トップページデザインの基本』で紹介している通り、まずは、トップページに採用される1カラムデザインがあり、セールスページ(上部、中央イメージ)のような、トップページ以外にも「1カラムレイアウト」を採用するコンテンツがあります。そして、右のキャプチャ画像のようにサイドメニューを伴った2カラムレイアウトがあります。

それぞれ、各ページの運営方針や各コンテンツが担う目的と役割に応じて、これらのレイアウトは選択され、それぞれのレイアウトによって、異なるデザインが採用されなければ、的確にコンテンツが担う役割を果たすことはできません。

このページでは、このように目的や役割別にレイアウトを選択するコツや採用するデザインの基本部分を解説いたします。なお、トップページに関しては、『トップページデザインの基本』にて、詳細を解説していますので、本ページでは割愛します。

2種類ある1カラムコンテンツ

WEBコンテンツの中で1カラムレイアウトを採用する基準には2種類あります。ひとつ目はトップページに代表されるような「ナビゲーション・コンテンツ」で、基本的に1カラムレイアウトでデザインします。2つ目は、セールスページなどに代表される「セールスコンテンツ」です。

また、これまで国内企業サイトでは、あまり見かけることはありませんが、詳細情報を掲載したページに1カラムレイアウトを採用する場合もあります。

ナビゲーション・コンテンツは、トップページだけに限りません。大きなテーマを取り扱うケースで段階を経ながら訪問者に情報を伝える必要がある場合にも、1カラムを採用し、ナビゲーション・コンテンツとしてのデザインを施します。

サイドメニューを伴わない1カラムの利点は、余計な情報を読者に与えず、意図したコンテンツにだけ的確にナビゲートできることです。

そのため、顕著な場合はセールスページに関しては、「トップメニュー」すら掲載しないことも多々あります。

1カラムレイアウトのページに採用するデザインには、『トップページデザインの基本』で紹介している「ナビゲーション・デザイン」とリスティング広告のランディング先に設定されるセールスページに施される「セールス・デザイン」があり、詳細情報を記したページに採用するデザイン手法が、さらに2種類あります。

そのひとつが詳細情報に集中させる「パワーポイント・デザイン(「プレゼンテーション・デザイン」とも言う)」です。

「セールス・デザイン」と、詳細ページに採用するもうひとつのデザイン様式に関しては『ページデザインとコピーライティング』のページで解説していますので、そちらを参考ください。

1カラムレイアウトのデザインに関して本ページでは『最短で利益を上げるサイトデザインと運営方法』にも直結する「パワーポイント・デザイン」と、詳細情報を1カラムでデザインする際のテクニックについて解説します。

2カラムレイアウトに関するデザインとSEOの関係は、本ページの後半でお伝えしています。このページも「2カラムレイアウト・デザイン」の基本に沿って作成しています。

パワーポイント・デザインとは

パワーポイント・デザインとは、パソコン版デザインのみに採用する表現手法です。

この「パワーポイント・デザイン」では、通常のウェブページのようにマウスのスクロール「量」に連動して画面がスクロールするのではなく、一定量のスクロールが行われた際に画面単位で表示されるコンテンツが切り替わるデザインです。

ちょうど、セミナーや講習会などの「スライド」で使われるパワーポイント資料のページめくりに似ていることから、このように呼ばれています。

このパワーポイント・デザインですが、2017年まで日本国内ではあまり例を見ないコンテンツデザインのひとつでした。その理由は様々あるでしょうが、おそらく日本のウェブコンテンツ活用が海外のそれと比べて大きく遅れていることが原因だとも考えられます。

また、パワーポイント・デザインは、その名の通りマイクロソフトのプレゼン資料作成ソフト「パワーポイント」に似た表現手法ですので、プレゼンテーションやセミナー資料として活用することを主な目的として作成されます。

このことからも分かる通り、パワーポイント・デザインで作成されたページでは自然発生的な検索経由のアクセス獲得を目的としません。

加えて、スマホ対応デザインで、この「一定量スクロールすると画面が切り替わる」と言う挙動は、スマホユーザーに馴染みがないため、閲覧時に「違和感」を感じさせ閲覧を中断させてしまう恐れがあります。

そのため、この「パワーポイント・デザイン」を、スマホ対応させているコンテンツを見ることはありません(私たちの知る限りではありますが…)。

パワーポイント・デザインに関しては、本サイト内『Webデザインの全体像』や『ホームページのデザインとコピーライティングの関係』のページで採用していますので、一度体感してみてください。

Microsoftブラウザ(インターネット・エクスプローラ)では、バージョンによってパワポ・デザインを適切に表示できない場合があります。お手数ですが、Google クローム(Chrome)やFirefox、Safariなどで閲覧ください。

詳細ページ1カラム・デザイン・テクニック

詳細ページは、その名の通り「情報の詳細」が掲載されているページですので、検索エンジンに高く評価されやすいページのひとつです。

そのため、詳細ページは検索経由のトラフィックが集まりやすいと言えるのですが、より多くの検索経由のトラフィックを獲得できる詳細ページには、関連する一つの検索キーワードを中心に、複数の語句と組み合わさった「複合キーワード」由来の検索経由トラフィックが発生します。

『複数の語句と組み合わさった「複合キーワード」由来の検索経由トラフィックが発生する』と、言うことは、検索者のニーズが多岐にわたる可能性を示唆しており、通常、このジャストニーズとならない訪問者を逃さないために「サイドメニュー」の2カラムレイアウトを採用し、関連コンテンツがあることを訪問者に伝えます。

詳細ページに1カラムレイアウトを採用すると言うことは、この「救済措置」を設けないと言うことを意味します。

このサイドメニューによる「救済措置」を設けないと言うことは、より幅広いテーマで閲覧者のニーズと向き合いながらも「詳細情報」を掲載するのが、詳細ページ1カラム・デザイン・テクニックになります。

詳細情報を掲載しないのなら、それは「ナビゲーション・コンテンツ」となるわけです。

ナビゲーション・コンテンツは、その名の通り「ナビゲーション」が主な目的です。そのため、詳細情報は掲載されず、抽象的な検索キーワード由来のトラフィックが発生することはあっても、検索欲求が多分に含まれた「複合キーワード」でのトラフィックは発生しにくいという特徴を持っています。

検索エンジンの性質上「発生しない」と言う表現には、語弊があります。しかし、ナビゲーション・コンテンツに検索欲求の高い複合キーワード由来のトラフィックが偏る場合、サイト全体の成果効率は悪くなっていると言えるでしょう。

例えば、サイト全体の目標達成率が低い場合は、成果達成までの閲覧ページビュー数が多すぎるため成果率を下げていることが考えられます。

また、ナビゲーション・コンテンツ1ページだけで、閲覧者に提示するアクションは、アクションハードルの低いものに限られますが、この「詳細情報1カラム・デザイン」のテクニックを使えば、アクションハードルのもっとも高い「支払い」を起こすことも可能になります。

「アクションハードル」とは、ウェブコンテンツ上で、閲覧者に行動を起こさせる心理的ハードルのこと。詳しくは『コンテンツのコンセプトと3種類のコピーライティング』を参照

故に、セールスページなどは、この「詳細情報1カラム・デザイン」のテクニックが使われていると言うわけです。

ただし、「セールスページ」の場合は、視覚的なデザインよりもコピーライティングが重視されます。そのため正確には「詳細情報1カラム・デザインの基本」を抑えながら、視覚効果を最小限に抑え、コピー(文章)による訴求力を補助する役割としてデザインが活躍していると言ったほうが良いかもしれません。

詳細ページ1カラム・デザイン・テクニックを使った本ページ内のデザイン事例は『WEBコンテンツの設計』と、なりますので、リンク先のページを参考にしてください。
(解説は『詳細ページ1カラム・デザイン・テクニック(解説)』にて)

2カラム・デザインの必須事項

2カラムレイアウトを採用する利点は、前述の通り「詳細に絞った本文」に関連するページをサイドメニューに提示し、訪問者の「直帰(1ページのみ閲覧して離脱すること)」を減らすことができる点です。

しかし、逆を言えば、本文に集中させることができなければ、サイドメニューに掲載した画像やバナーに目が移ってしまい、肝心な訴求が出来ずに別ページに移られてしまいます。

このため、サイドメニューの上段には、そのページに掲載した詳細情報による訴求よりも、訴求力の強いページへのバナーや画像リンクを掲載します。

ただし、(これは、頭を悩ませる要因のひとつでもありますが…)詳細情報ページには、ニッチな検索欲求(「潜在購買欲求」と、言い換えても◎)の高い検索キーワードに由来するトラフィックが多く見込まれます。そのため、やはり、サイドメニューに掲載した訴求力の強いページに移動されるよりかは、その詳細情報ページを最後まで読み続けさせたほうが、成果率は高まります。

その理由は、サイドメニュー最上部に掲載するリンク先の「セールスページ」などは、「売りが強い」ため、広告ではない検索結果(自然検索)経由のアクセス者は「売り込まれること」を望んでなく「情報」を望んでいることが多いからです。

広告ではない検索結果(一般的に「自然検索結果」と、言う)経由のアクセス者は、自身の悩みや欲求を解決するための「情報」を望んでいるだけで「ツール(「解決道具」としての商品やサービス)」への欲求は低いと考えるのが、適切なコンテンツデザインとSEOの関係と言えるからです。

それでは、コンテンツデザインとSEOの関係を「コンテンツ設計」と言う視点と「コンテンツの視覚的デザイン」の視点から解説していきましょう。

本文に集中させる「初めの一手」

サイドメニューの存在は、あくまでも訪問者に対し「関連する情報にもアクセスできる」という安心感を与えるだけです。それ以上に、コンテンツの作成者は、訪問者に対し「あなたの求めている情報がここにあります」ということを、明確に伝えなければなりません。

その役割を果たすのが「目次」です。

そのため、詳細ページを最上部から「アイキャッチ画像」「導入文」「目次」と配列した場合でも、ファースト画面(ページにアクセスされた場合に、はじめに映し出される表示範囲)内で「目次」の存在に気づかせることはとても大切です。

ファースト画面の「表示範囲」は、アクセスされる端末ごとに異なりますが、2018年現在において、iPhone5(320px x 568px)のファースト画面範囲内で目次の上端を気づかせることができるデザインができていれば充分だと考えています。

アイキャッチ画像の役割は、視覚的に、そのページが、訪問者が望んだページだとわかる画像や、「悩み系検索キーワード」に由来するコンテンツなら、その「悩みを解決した近未来」をイメージできるような画像。もしくは、悩みをほったらかしにしてしまった場合の近未来を占う画像などを用いて、訪問者をそのページに引きつけます。

アイキャッチ画像の下に続く「誘導文」は、120文字以内程度の文章で、アイキャッチ画像で訪問者が感じた「感覚」を文字で鮮明にしたり、「目次」や「本文」を読むための動機づけとなる文章を掲載します。

そして、『スマホ対応デザインとPC版デザインの関連性』でも、お伝えしている通り、画面の下に「コンテンツが続いている」と感じられるようなデザインを施し、閲覧者のスクロールを誘発することが、スマホ対応デザインでもパソコン版デザインでも、本文に集中させる「初めの一手」と、なります。

掲載情報に即したアクションの提示

詳細情報ページであっても、コンテンツの製作者が閲覧者に望むことは「顧客」と、なってもらうことでしょう。しかし、詳細情報1ページだけでは、その願いもはかなく消えてしまうことは少なくありません。

これまで多くの企業サイト改善相談をいただいてきましたが、アクセスが多くても顧客化につながっていないウェブサイトには顕著な特徴があります。

その「顕著な特徴」とは詳細情報ページの最下部で閲覧者に提示するアクションが、「問い合わせ」や「資料請求」に偏ってしまっているということです。これは、セールスライティングの世界ではよく言われることなのですが「夜も眠れないほどの悩み」について情報を提供すれば、ウェブユーザーを顧客に変えることは簡単です。

しかし、冷静になって考えてみると「夜も眠れないほどの悩み」について、インターネットで夜な夜な検索し情報を探すような人は、ほとんどいません。

インターネットユーザーは、「ふ、とした疑問」に関して検索することが多く、「事あるごとに思い出さされる悩み」に対する解決策を求めて検索を行います。

また、彼らは、「ふ、とした疑問」にお金を払いたいとは考えていませんし、「事あるごとに思い出さされる悩み」が、簡単に解決できるとは感じていません。

加えて、この「簡単に解決できる」ということと、「何か商品を買って使えば解決できる」こととをイコールにしていたり、「サービスを受ければ解決できる」ことともイコールにして、自身の悩みと向き合っているケースが多いのも事実です。

要するに、簡単に解決できる自身の問題については「情報」を探すのではなく、直接商品やサービスを検索すると言うわけです。

よって、この場合、「詳細情報ページ」へのアクセスは発生しません。

逆に「簡単に解決できる方法」に、飛びつくユーザーは、目移りも激しくリピートしにくい傾向もあります。

このようなことを押さえた上で、詳細情報ページをどのようにデザインするかと言うと、リピート購買につながる優良顧客を獲得するためには、あなたの考え方やスタンスに共感を覚えてもらう情報を掲載することがとても大切になります。

そのため、詳細情報ページの文末では、「関連する悩み」や「関連する欲求」を提示し、それらの課題を解決する情報へのアクセスを促すアクションを提示します。

問い合わせや資料請求へのページへのリンクは、トップメニューに記載してあったり、各ページのフッター部分(各ページの最下部)、サイドメニューに掲載しておけば、訪問者が「問い合わせ」や「資料請求」を必要だと感じた時に、自ら探してアクションを起こしてくれます。

詳細情報ページで、本文を終えた後に「はい!お問い合わせはこちら」と言う感じで問い合わせボタンを掲載したところで、それは「売り込み」にしか読者は感じないわけです。

詳細ページに視覚的デザインは必要?

さて、ウェブデザインで頻繁に議論となる「視覚効果」について、あなたはどう考えていますか?

ご存知の人も多いかと思いますが、ホームページの作成を依頼した場合、もっとも費用が必要となるのは、ウェブコンテンツでの視覚効果を狙ったデザインです。

中には、前の一文を読んで、過去にホームページの制作を依頼した見積書を見直しながら「そんなことはない!」「一番費用がかかっているのは『ディレクション』と言う項目だ!」と、反論する人もいるかもしれません。

では、質問です。

ホームページのディレクションに、あなたはどれだけの価値を感じていますか?

おそらく、その「ホームページ作成のディレクションで、実施されたのは、コンテンツ設計に関することだったと思います。しかし、本サイトを見てもわかる通り、詳細も明言していますが、反応の取れる「コンテンツ設計」には「型」が、あります。

このことに関しては拙著の中で、かなり詳しくお話ししていますが、ホームページの製作も行なっている者として言えることは、一番工数がかかるのが、「視覚効果を狙ったデザイン」で、語弊を恐れず告白すれば、もっとも利益を上げやすい(「高単価を付けやすい」)項目が、この「ディレクション」です。

それを証拠に、「ウェブデザイナー」よりも「ウェブディレクター」のほうが、地位が上という傾向はありませんか?

しかし、この「ディレクション」ですが、上級者になると、どんな業種でも、一定のフォーマットに落ち着かせることができるようになります。

理由は、一定のフォーマットに落ち着かせた方が、その後の改善が効率的になるからです。

そのため、ホームページの「テンプレート」が、無数に販売されているのです。ホームページのテンプレート販売がビジネスとして成り立っている理由は2つ。

ひとつは、どんな業種業態であっても、ディレクションを突き詰めれば、一定のフォーマットに落ち着くと言うこと。

2つ目は、視覚効果を狙ったデザインには専門スキルが必要だと誰もが感じているものの、適切にその効果を計測できない現状が拭えていないからです。

この「価格の適性を把握できない」ぬぐいがたい現状があるため、購入者はパッケージとして、そのデザイン技術を買い、販売者は「テンプレート化」することによって販売数を上げ、コスト率を下げることを見込んでいるために、ホームページのテンプレート販売ビジネスが成り立っています。このほか、テンプレート購入者からの「更なる依頼」などを目的にしているケースも多々あります。

ホームページ制作の見積書で「デザイン費用」よりも「ディレクション費用」が、高額になっている理由は、工数を必要とするデザインでは価格への理解が期待できないため、なにやらもっともらしい「ディレクション」という項目に転嫁されているだけです。

そして、検索エンジンがまったく気にしていないのも、この閲覧者に対する視覚効果を狙ったデザインです。さらに加えて言えば「ディレクション」に対しても、依頼者が何やら意味不明な項目だと感じていると制作会社が察した場合は「SEO対策費用」に転嫁し、最終的に必要とする制作費用の帳尻を合わせます。

これは、個人的な意見ですが、視覚効果を狙ったデザインには、工数がかかり費用が必要だと素直に伝えてくれるホームページ制作会社は、とても良い制作会社だと思います。

と、言うわけで、従来のホームページ制作会社の多くは「視覚効果を狙ったデザイン」ではなく、依頼者が求める「自分(依頼者)好みのデザイン」に、合わせたコンテンツデザインしか実施するスキルを持ちません。アクセス解析によるデザイン改善方法も必要だとわかっているもののニーズと収益性が伴わないため、スキルを磨くこともなく、ウェブデザイナーの多くがアクセス解析を使えないという現状を残してしまっています。

前置きが長くなりましたが、「詳細ページに視覚的デザインは必要?」と、言う本段落のタイトルの答えは見つかりましたか?

答えは「必要」です。

「必要」か「不必要」かどころではなく、必要不可欠だと、私たちは考えています。しかし、これももちろんのことですが、各ページの役割や目的に応じた「視覚効果デザイン」は、欠かせません。

詳細ページに必須なデザインとは

詳細ページに必須な視覚効果を狙ったデザインは、どんなページに、どんな役割や目的があろうとも共通する項目があります。

それは…
「精読率を上げるデザイン」です。

詳細ページには、検索エンジンが好む「詳細情報」が掲載されているため、検索由来のトラフィックが発生しやすいと、本ページの冒頭でもお伝えしましたが、実は「詳細情報」を掲載するだけでは、検索経由のトラフィックを増やすことはできません。

検索経由のトラフィックを増やすためには、確実に読まれることが重要です。

SEOは「検索エンジン最適化」のことですので、検索エンジンが「良質なコンテンツ」だと評価する指標だと考えられている「ページの滞在時間」は、適切に確保することが、SEOを意識した視覚効果を狙ったコンテンツデザインとなります。

この「滞在時間」は、長ければ良いと言うものでもないと、私たちは考えています。

例えば、このページなら2万文字弱ほどの情報量がありますので、精読し終えるまでには、短くても精読に5分は必要でしょう。

検索エンジンは「直帰された場合の滞在時間」を計測することができませんので、仮説の域は脱しませんが、このページがもし、関連する人気のキーワードで上位表示を果たすとしたら、このページが検索経由のランディング先となった場合、3分以上5分程度の滞在後、次ページに閲覧者を誘導し続け、その誘導先もばらつきが少なく誘導できている場合に、そのような結果を得ることができるでしょう。

「仮説の域を脱しない」理由は、検索ランキングを決める「検索アルゴリズム」は、Googleの中でもトップシークレット事項だからです。そのため、経験知によって記述しています。

もちろん、「精読率をあげる視覚的コンテンツデザイン」は、検索エンジンの評価を得られる以外に、それこそ読者の精読率を上げますので、コンテンツの成果率を引き上げることにもつながります。

「コンテンツ設計」を意味したコンテンツデザインの章でお話ししている『掲載情報に即したアクションの提示』でお伝えした、関連ページへの誘導や文末に提示した「更なる欲求への喚起」に成功することができると言うわけです。

それでは、精読率をあげるコンテンツデザインについて、いくつか、実際のデザインを用いながら解説致しましょう。

この章以下は、お時間がある場合は『スマホ対応デザインとPC版デザインの関連性』ページと合わせてお読みください。リンク先のページは特に、お手持ちのスマートフォンやタブレット、パソコンなど複数の端末で比較しながら閲覧いただくと、よりコンテンツデザインに関して深い学びを得ていただけると思います。

精読率をあげるコンテンツデザインの基本

精読率をあげるコンテンツデザインの基本は、本サイトでも度々各ページでご紹介していますが「スクロールフック」です。

このスクロールフックは、画面をスクロールさせる「きっかけ」を視覚的にデザインする仕組みですので「スクロールトリガー」とも呼ばれることがあります。

スクロールフックには「文字装飾」「背景色の切り替え」のほか「画像」や「段落の厚み」で演出することができます。

スマホ画面やパソコンの表示範囲最下部に、通常「白地に通常文字色」で進む本文に変化を感じた場合や、表示範囲以下にも文章が続くと、人は無意識に画面をスクロールさせ、次の文章を読み進めます。

さらに、読み進めた段落の先に、文字装飾された一文があると、その装飾された文章を「重要な箇所」と認識し、その装飾部分まで読み進めたいと言う心理が働きます。

このような精読欲求を喚起しながら、画面を下へ下へとスクロールさせ、本文を読ませるのが、スクロールフックの役割です。

逆にスクロールフックではありませんが、精読欲求を削いでしまうデザイン・ミスもあります。

それは、「一文字改行の連続」や「見出し文の違和感のある改行」など、文章の意味を理解しようとする自然な心理に違和感を植え付ける文章デザインは、精読欲求を減少させてしまいます。それでは、具体的な事例とともに、確認していきましょう。

もっとも簡単な視覚的コンテンツデザイン

もっとも簡単な視覚的コンテンツデザインは「文字装飾」によるスクロールフックです。文字装飾には、「本文よりも大きめの文字」「太文字」「色文字」「マーカー」「斜体」「下線」などがあります。

文字装飾によるスクロールフックは表示画面の下端に「見切れ」を出現させスクロールを促す働きではなく、装飾された文章を人は「重要な箇所」と認識するため、その前後の文章も併せ読みし、重要箇所(装飾部分)だけでも読み理解しようとする精読欲求を喚起する演出です。

このページでも、スクロールフックはデザインしていますが、詳細ページとナビゲーションページのようにコンテンツの役割が変われば、スクロールフックに使うデザインにも変更を加えます。

特に、詳細情報を記述したコンテンツでは、この文字装飾がかえって邪魔になり精読欲求を減退させてしまう場合があるので注意が必要です。

その中でも「文字のカラー装飾」に使用する「色数」は、控えることをお勧めします。

本サイトでは、通常の文字色を「薄めの黒」に設定しています。そのため「太文字」の文字色には「黒」を用いて、注意を引く必要がある箇所に「赤」を採用しています。しかし、「赤文字」で改行を含む装飾とならないようデザインしています。

質問です。

では、なぜ、赤文字で改行を含むような装飾を行わないのでしょうか…

その理由は、文字装飾はあくまでもスクロールを喚起するためのアクセントだということ。そして、2行以上の赤文字が続くと人はその装飾文章に「強要性」を感じてしまうため、精読欲求を減退させてしまうからです。

「本を読みなさい!」と、
言われるのは子供の頃嫌でしたよね?

そのため、文字装飾を行う場合は「あなたが強調したい部分」に装飾を行うのではなく、スクロールフックとなりうる箇所で、周辺文章を読む動機付けになるような一文に装飾を行います。

ただし、文章の途中で装飾を終えてしまうと、かえって違和感を感じさせる場合もあります。

そのため、2行以上にわたって文章装飾が必要な場合は、「下線」や「マーカー」による装飾を行います。

「本を読みなさい!」と、
赤で書かれると、キツイですよね?

加えて、読者層属性にもよりますが、文字色によるデザインは「3色」以内に止めることをお勧めします。

その理由は、本文の内容以上に4色以上の文字色が視界に飛び込むと、人は「騒がしい」と、感じたり、記事全体に「ポップさ」を感じるため、情報の理解よりも「情報発信者の雰囲気」に意識が向いてしまうからです。

情報の信頼性や権威性ではなく、情報発信者との親近感を演出したい場合などには、ポップなデザインが有効な場合もあります。

顔文字も「(笑)」なども、アイキャッチ的な役割を果たし、スクロールフック的な目的を果たす場合もありますが、読者層を把握できていない場合は、控えることをお勧めします。

閲覧者の無意識をコントロールする

スクロールフックは、あくまでも読者の精読欲求を喚起するデザインですので、スクロールフックをデザインする以前に、重要な箇所、あなたが必ず伝えておきたいと言う箇所には、ポイントを絞って、あらかじめ文字装飾や「囲み」などを使って、デザインしておく必要があります。

スクロールフックは、読者の「無意識」にアプローチし、ページ全体を読み進めさせるデザイン・テクニックです。

「閲覧者の無意識」には、情報発信者にとって「都合の良い無意識」もあれば、「都合の悪い無意識」もあります。

「都合の良い無意識」には「一慣性の法則」に従った「読みかけた段落を最後まで読む」もしくは「気になった箇所の前後を読む」などがあります。

「都合の悪い無意識」には、先述した「違和感」のほかに「プレッシャー」と呼んでいる読者が無意識に感じてしまう精読欲求を減らしてしまう精読感情があります。

この「プレッシャー」という精読感情は、「画面に映り込む単一色の文字量」によって感じさせてしまいます。

私たちは出版業も営んでいますが、この「読者が無意識に精読欲求を減らしてしまう」原因のひとつに「原稿が黒い」と呼んでいる状況があります。

この「原稿が黒い」状況は、通常「漢字が多い」原稿を指してこう呼びます。人は漢字が多い文章を堅苦しく感じ、難しく感じてしまうので「読み続けたい」という欲求を失っていくのです。

人は漢字が多い文章を堅苦しく感じ、難しく感じてしまうので「読み続けたい」という欲求を失っていくのです。

そうは言うものの、あまりにも漢字が少なすぎると「軽い文章」と感じさせてしまいます。「軽い文章」には、権威性を帯びさせることもできず、信頼も得にくいと言う特徴があります。逆に「軽い文章」と言う感覚は「共感」を得やすいとも言われています。

そのため、段落の内容や記事全体の構成の中で、権威性を感じさせたい箇所や信頼を獲得するパートと「共感」を獲得するパートで、この「原稿の黒さ」を調整するのも精読率をあげるデザイン・テクニックのひとつです。

そして、この「黒い原稿」という精読欲求を減退させる状況は、ウェブコンテンツでは、書籍や雑誌などとは違った方法で緩和することが一般的です。

通常、出版の場合、黒い原稿は漢字をひらがなに直したり(この作業を出版界では「ひらく」と、言います)、段落の厚みを薄くして「行間」による余白を設け改善します。

しかし、ウェブコンテンツの場合は、閲覧する端末の画面範囲によって、改行される文字数が変化しますので、漢字をひらがなに直せば、行数が増えると言うジレンマが付きまといます。

このジレンマを解消する役割としても「文字装飾」が使われます。

そして、この『閲覧者の無意識をコントロールする』の章は1,000文字を超え、ウェブコンテンツとしては、あまりお勧めできない文字数を記載した小段落で「黒い原稿」に当たるのですが、実際にこの章段落で行っているような背景色をデザインすることで、黒さを薄め、また、背景色にグラデーションを用いることで、スクロールフック的な役割も果たしながら、文字を追い続けるストレスを精読欲求が上回るようにデザインしています。

どうですか?読み終えていただけましたか?

ありがとうございます。

スマホとパソコンでデザインを切り替えてSEO

本ページは「コンテンツデザインとSEO」と言うテーマでお伝えしています。

しかし、ここまでSEOに関することは「精読率」に関わることだけで、SEOに繋がるデザイン・テクニックは「精読率の改善」にしか、貢献しないのか?と、疑問を持っている人もいるかもしれません。

これまで、コンテンツデザインには「記事構成を設計する」と言う「設計」視点でのデザインと「視覚効果をデザインする」と言う「意匠」視点でのデザインの2通りがあるとお伝えしてきました。

記事構成を設計する「設計」視点でのコンテンツデザインでは、ページの精読率をあげ、関連ページへの誘導を促します。

また、記事構成を「設計する」と言うデザイン作業の中には、アクセスのキッカケとなる検索キーワードの想定も含まれ、検索結果に表示されるページのタイトルやページの説明文の工夫も含まれます。

この辺りは『WEBデザインの全体像:WEBコンテンツの設計』ページでお伝えしていますので、まだ、お読みでない方はこちらをご覧ください。

本ページでは特に、視覚効果をデザインする「意匠」的な視点でのデザインに関して、そのテクニックとテクニックの裏側にある「狙い」をご紹介しています。

ある種、このページは「ネタバラし」をしているページですし、本サイト全体が「ネタバラシ」的な記述が多いため、デザインの狙い通りに精読率をあげられていない可能性は否めません。

ただ、ここまで約13,000文字が書かれていますので、ここを読んでくださっているということは、「精読率を上げるコンテンツデザイン」は、ネタがわかっていても有効ということかもしれませんが…

前章タイトルの『閲覧者の無意識をコントロールする』という一文は、あなたも目を引いたかもしれません。しかし、あなた自身も「閲覧者の一人」だと、気付いた時には「無意識をコントロールする」という言い回しに拒絶感を感じたのではないでしょうか。

本ページでは、通常1つの章で推奨できる文字数の800文字を大幅に超える章をいくつか作成し、意匠的なコンテンツデザインを体験していただけるような設計を行なっています。

段落の構成も、パソコンで閲覧した場合は、3〜5行くらいの段落でまとまりますが、意匠的なデザインを施さないままだと、スマートフォンで閲覧している場合、画面の約半分を1つの段落で埋め尽くしてしまう「黒い部分」も機種によっては出来てしまいます。

各段落の行数に変化をつけることで、文章にリズムをつけることはできますが、表示画面範囲に5段落以上表示されるような場合は、この「リズム」も演出することができます。しかし、スマホ画面で、5段落以上を表示範囲に含めると言うことは、まず不可能です。

スマートフォンは、画面の「幅」が狭いため1行に表示できる文字数が少なくなるので、自然に「行数」が増え、段落の行数がどうしても増えてしまいます。

スマートフォンの画面に合わせて、段落の行数を調整すると、パソコンで閲覧した場合には「異形段落の連続」という「箇条書き」をイメージさせるページになってしまいます。

この閲覧端末の違いを考慮して意匠的なデザインを行うことも、とても重要なコンテンツデザインの要素です。

制作会社にホームページの作成を依頼する場合、この緻密なレスポンシブWebデザインまでを依頼すれば、高額になることは避けられませんし、ご自身で採用しようとすれば、細かな作業が付きまとい、とても骨の折れる作業になることは必至です。

また、レスポンシブWebデザインを設計する場合には、各ブラウザには「開発ツール」というものがあって、そのツールを使いながら擬似的に各端末での表示様式を確認しながらデザインしていきます。

レスポンシブデザインモード

ただし、あくまでも「擬似的」なツールですので、実機との違いが出ることもしばしばです。

流石に世間で使用されているiPhoneの全機種とアンドロイド・スマートフォンの全機種を揃えることはできませんので、多少実機とのズレもあるかもしれませんが、本ページは、次の章でご紹介する、『業者も嫌がる緻密なレスポンシブWebデザイン』を行っています。

これまで私たちは2012年以降レスポンシブWebデザインでホームページを作り続け、データもとり続けてきましたので、確かに、次に紹介する緻密なレスポンシブWebデザインの設計は有効だと感じています。

ただし、コストや労力、作業時間が成果に見合うかどうかは、コンテンツの役割やサイトの運営方針の影響も多大に受けます。そのため実装するかどうか、制作会社に依頼するかどうかは、しっかりと依頼主となる、あなたの判断にかかっていますので慎重に検討していただきたいと思います。

個人的には、『最短で利益を上げるサイトデザインと運営方法』を取り入れるホームページでしたら、費用対効果を確保し、また、運営し続ければ、続けただけ、その効果も挙げることができると感じています。

業者も嫌がる緻密なレスポンシブWebデザイン

制作会社がレスポンシブWebデザインを嫌がる要因や制作コストが上がってしまう理由のひとつは、論拠やデータの裏付けを伴わない、依頼者の好みやセンス、依頼者が使っている端末での表示に合わせたデザインの変更や修正がつきまとうからです。

よほど、お絵かきレベルのWebデザインしかできない制作会社(意外と多いのでご注意を!)以外は、閲覧者のことや普及サイズ(パソコンやスマートフォンの主流機種)を想定しデザインします。

単純なホームページ作成ではなく、実質的な成果の改善を実行できるホームページを作っている制作会社は、デザインによる売上や集客への影響を過去の実績データなどから、たとえ「肌感覚」だったとしても把握しているものです(個人的には「なんとなく…」と、言う肌感覚だけではなく、数値化されていなくても論理化はされていたほうが、お客様の理解は得やすいと思いますが…)。

彼らは(私たちも含めて)、個人的なデザインセンスで彩られたホームページを納品し「ダメじゃん」と、言われることだけは是が非でも避けたいと考えているわけです。( 常に依頼者のデザインセンスが「ダメじゃん」と、なるとも限らないので悩ましい限りではありますが、この場合の改善は、やはり依頼者のセンスに依存することとなります。)

もちろん、ホームページの公開と同時に爆発的な成果が上がるかどうかはギャンブルと同じです。しかし、検証可能なデザインや改善を見越したデザインを施すことで、依頼者様には、ホームページから得られる成果を日々積み上げていっていただきたいと思っているのが、制作会社の本心です。

私たちも、通常3〜4タイプの表示範囲(端末の画面範囲)を想定してサイトを作ります。このサイトでは、ページの目的に応じて「特別」と言えるほど細かな設定を行なっていますが、自分たちが運営しているサイトでも「そこまでは、やらない」設計を行なっています。

そのひとつが、「タイトル文字の大きさ調整」です(この調整は、本ページでも行なっています。同じ「小見出し」の文章でも文字サイズが異なるタイトル文章があります)。

実機とのズレがある場合は、スクリーンショットと一緒にご報告いただけると助かりますが、この緻密な「タイトル文字の大きさ調整」を行なっているページでは、iPhone5、iPhone6プラス、iPhone X、Google Nexus4、Samusung Galaxy S7のスマートフォン画面サイズに合わせ、改行される位置が、文章的に違和感を感じないように、文字の大きさを調整しています。

パソコンの、モニターサイズでは、iPad miniにも該当する幅768px、iPad ProやiPad Airにも対応する1024pxのほか、1152px、1280px以上のモニターで適切な改行位置を保てるように微調整しています。

本ページは2カラムレイアウトを採用していますので、1カラムレイアウトでは、1280px以上の画面サイズでも微調整している場合があり、パワポ・デザインを採用しているページでは、Nexus7の横向き(960px x 600px)でも調整しています。

ただしこの細かな調整も、パソコン画面の下端に「メニューバー」を固定表示しているユーザーからの閲覧の際には、適切に表示されなかったり、インターネットエクスプローラ(IE)を古いバージョンのまま利用されている場合にも、この調整が再現されないケースがあります。

なぜ、このタイトル文字サイズ調整を業者が嫌がるのかといえば、それは、閲覧者が使っている端末で文字の表示サイズを変更している場合、この設計がすべて無視され、妙な位置で改行されるからです。

特に、年配者や(そろそろ私もですが)老眼が気になり始める年齢層が閲覧層の場合、本人が意図的に設定していなくても、スマートフォンの販売店が気を利かせて設定を変更している場合もあります。

タイトル文章の改行位置や、中央寄せにした文字列の改行位置が文節以外で改行されると、人は違和感を感じます。

時には文脈の意図を捉え違いする危険性もあります。そのため、この非常に細かな配慮は、精読率の向上に繋がります。

そして、もうひとつ制作行者が嫌がる理由があります。それは、文字サイズを変更しなくても「言い回し」の変更で、解決できるケースも多いからです。

Apple社のホームページなどは、この適切な文節改行にまで気が配られていると感じます。詳しくは調べていませんが、おそらく原稿でも、そしてコンテンツデザインとしても微調整を行なっていると思われます。

そのため、とても読みやすいコンテンツに仕上がっています。

ただ、こんな細かな調整が出来ることを
知らなかった人も少なくはないのではないでしょうか?

そのため、ホームページ制作の見積書に「タイトル文字サイズ調整:10万円」と、書かれていれば、この金額が「5万円」でも、「なんですか?この項目は!」と、なることと思います。

通常、人は、普段から他社のサイトを見たり、ご自身が閲覧者としてウェブコンテンツにアクセスしているとき「無意識のうちに感じる『違和感』によって『精読欲求』が削がれている」など考えながら閲覧することはありません。

そのため、各見出しの文章をいくつもの端末でチェックし適切な文節改行が行われるような微調整に価値を感じられません。

「ここの文字少し小さくして、改行位置を調整してくれない?」と、鉛筆で紙に書くように、簡単な作業を依頼するつもりで発した依頼も、ひとつひとつソースコードを確認し、それぞれの画面サイズで確認しながら調整する作業が必要なのです。

細かな配慮ですので、経験上、アクセスの多いページでこのような配慮を行うと、成果率を向上させるのは確かです。

次に、緻密な配慮ですが、製作者やその価値を知っている人以外、ほとんど価値を感じることができないレスポンシブWebデザインの仕様は、画面サイズに応じた装飾の変化です。

このページでも採用していますが、スマートフォンやタブレットでは「太文字」となっている箇所で、パソコンで見るとマーカー装飾になっている箇所が、いくつかあります。

また、このページでも取り入れており、他のページでも採用していますが、スマホ対応デザインでは背景色を付け、パソコン版デザインでは背景色を「白」に設定している章段落があります。

このように、スマホ対応デザインとパソコン版デザインで背景色の有無を切り替える理由は、画面内に表示できる「段落数」に違いがあるからです。例えば、スマホ画面に合わせたスクロールフックを文字装飾だけで行ったり、スマホ対応デザインをそのままパソコン版でも反映させると、パソコンでの閲覧の際に「騒がしいページ」になってしまいます。

スマートフォンの場合は、幅が狭く縦に長いので、1行の文字数は少なくなり、自然と段落の行数は増え「黒く単調」な領域が増えがちになります。

画面が文字で埋め尽くされ「黒い画面」になると、気分も暗くなり読み続けるのにストレスを感じます。そのストレスを緩和するために、背景に色をつけ、その色によって気分を高揚させたり、軽やかな気持ちにさせたりします(暖色)。

寒色を用いる場合は、読者の頭の中をクールダウンさせる効果があります。

しかし、パソコンでの閲覧者に対しても同じような背景色の切り替えを見せてしまうと、画面範囲が広いので、複数の色が一度に目に飛び込んでしまい、文字情報に集中できなくなってしまいます。

そのため、コンテンツの内容や役割に応じて、スマホ対応デザインとパソコンでは背景色の有無など、精読率を上げるデザインの使い分けを設計するわけです。

特に、詳細ページでは、長い段落を用いた場合や1つの章の中で対比する情報を記述する場合などに背景色の切り替えを採用すると、「ながら閲覧」のスマホユーザーにも、配色の切り替わりで、文脈の変化を感じさせることができ、とても有効です。

パソコンでの閲覧の場合は、腰を落ち着け集中した状態での閲覧を予測できますので、出来る限り文字を追うのに余計な情報(視覚情報)を与えないように、背景色を使わず、文章に集中させるデザインを心がけることが大切になってきます。

詳細ページ1カラム・デザインテクニック

サイドメニューによる「関連ページへの誘導」といった救済措置を取らない1カラムレイアウトによる詳細ページのデザインは、まず、「コンテンツ設計」というデザインの視点からお伝えすれば、「全体像から詳細情報まで」を簡潔に伝える設計を行うことが大切です。

物事の全体像や概念、考え方に付随するような情報を取扱う中でも、その全体像を掘り下げる時、各段階を比較することで読者の情報享受性が高まる場合に詳細ページを1カラムでデザインすることが有効です。

「情報享受性」とは、読者の情報に対する「理解度」ではなく、情報を閲覧したことに対する「満足度」のようなものです。

語弊を顧みず極端な言葉でわかりやすく、この「情報享受性」を解説すると、「なんとなく分かった、もっと知りたい!」と、思われるかどうか、「なるほど、この人詳しいね!」と、ページにアクセスした本来の目的(情報閲覧を通じた自身の欲求解決)ではなく、アクセスしたこと自体に満足を示す場合に「情報享受性が高い」と、表現します。

また、詳細ページを1カラム・デザインで作成することは、上の囲み内で解説した「情報享受性」を高めますので、2カラムでデザインする詳細ページよりも高いアクションハードルを達成させることも可能になります。

詳細ページ1カラム・デザインを設計する際には、「全体像から詳細までの流れ」と「情報の比較」を行いながら、ページ末まで読み進めさせるコンテンツ設計が必要になり、必要に応じて文中から関連ページに移動できるリンクを掲載します。

この「詳細ページ1カラム・デザイン」の設計に関して、本ページで、これ以上詳細に解説してしまうと、かえって複雑に感じさせてしまいますので、実際に、このデザイン・テクニックによって設計されたページを「全体像から詳細までの流れ」と「情報の比較」を行いながらデザインすると言う視点で閲覧し、体感してみてください。

SEOとトップページデザイン

詳細1カラムページの視覚的デザイン

詳細ページの1カラム・デザインは『SEOとトップページデザイン』と『WEBコンテンツの設計』で採用しています。

この2つのページでは、アイキャッチ画像としても採用しているコンテンツ最上部のインフォグラフィックスの配色に合わせ、テーマごとに背景色を切り替えています。

どちらも1万文字を超えるページですので、一気に読むと疲れるページです。また、どちらの内容も各詳細内容同士の関連性や「全体を通しての流れ」が、理解を助けますので、閲覧利便性を考慮した場合、ページを1つにまとめるのが有効だと感じ、1ページにまとめました。

詳細情報ページの1カラム・デザインでは、通常よりも比較的アクションハードルの高い提案も達成しやすいと解説してきましたが、本サイトではアクションハードルの高い提案は行なっていませんので、安心してそれぞれのページをご確認ください。

どちらのページもご確認いただけると分かる通り、各章ごとに「導入」と「2つの詳細」といった構成でデザインされており、テーマごとの配色を行なっています。

このように、あるテーマについて詳細を伝える場合に「2つのことをセット」で伝えたほうが、情報への理解や情報享受性が高くなる場合に、1カラムレイアウトを採用します。

そして「2つセット」となっている詳細情報の配色には「同色の濃淡」で、色分けしデザインします。こうすることで、情報の関連性を読者は感じることができ、理解度や情報享受性を高める効果を上げることができます。

WEBコンテンツの設計』ページでは、一部タイトルの背景色と「2つセット」詳細情報の背景色にミスマッチが起こっていると感じるパートがあると思いますが、実は、この一文を読む前と読んだ後では、情報に対する感じ方が変化します。

これ以上、詳細をここで解説してしまうと、デザインコンセプトが崩壊してしまいますので、あなたなりの解釈で感じ取ってみてください。

流石の私でも企業秘密にしたいこと、有料でなければお伝えできないことはありますので、ご理解いただけると幸いです。

さて、
いかがでしたか?

このページの文字数は約20,000文字です。原稿用紙にして約50枚に相当します。本にすると30ページ前後にあたります。

文章の内容はとても大切ですが、WEBコンテンツとしてデザインされた情報が、本や原稿用紙に書かれた情報と違った感覚でお読みくださっていたのなら幸いです。