松村(左)

コンテンツ・デザインと聞くと「洗練された、スタイリッシュなコンテンツ」をイメージしてしまいますが、実はそれだけじゃないんです!

アップル社のホームページは洗練されたデザインでとても有名ですよね。だからと言って同じような画像の使い方やテキスト配置をデザインしたところで、そもそものブランド力が異なれば、閲覧者に与えるデザインの影響は大きく変わってきます。

下記の動画の中でご紹介している、JimdoやBindクラウドサービスでも凝った演出を用いたコンテンツ・デザインを実装することはできますが、なぜ、このような演出やコンテンツ・デザインを行なっているのかを理解していなければ、ただ単に「ガチャガチャと騒がしい」だけのサイトになってしまいます。

それでは、「なぜ、コンテンツ・デザインを行うのか」から解説していきましょう。そして、各種演出や装飾を行う際の注意点も合わせて解説していきますので、あなたに最適なコンテンツ・デザインを実装してください。

コンテンツ・デザインを充実させる目的

コンテンツ・デザインを充実させる目的にはいくつかあります。すぐに思いつくのは「ブランディング」ではないでしょうか。やはり、かっこいいサイトだと「何か他と違う!」ということを印象つけることができますよね。ただ、「何か他と違う」と感じさせたところで、あなたのサービスや商品が売れるかどうかは、別の話です。

この「スタイリッシュなデザイン」と表現されたり「洗練されたコンテンツ」と呼ばれる企業サイトのコンテンツ・デザインには、とても思慮深い「デザインコンセプト」が、コンテンツによる「訴求力」とSEO的な観点からも充実しているのです。

アップル社のMacページに見るコンテンツ・デザインとSEO

まずはこちらの動画でアップル社のMacページを確認してください。

先にご紹介したJimdoとBindのホームページとは違い、Macの総合ページには動きのある演出はありませんでした。洗練されたキャッチコピーと大きく美しい画像、そして「さらに詳しく」「購入」というテキストリンクが配置されているだけです。

さらにページをスクロールしていくと100文字程度の簡単な説明文があり、必ずその下にはリンクが掲載されています。
画像で始まり、中盤で文字を読ませ、再度終盤は画像で視点を止め、次のページに促す短めの誘導文とリンクといったコンテンツ・デザインが施されています。

このページの原稿を書く際に改めてアップル社のホームページを見て分析してみましたが、「見事」としか言いようがありません。インターネットの閲覧導線を心理学的にも理にかなったコンテンツ・デザインになっています。必ず短い誘導文の下にはリンクが掲載してあることで、SEO的にも「閲覧ページビュー数」を増やすことになりますので「直帰率」を引き下げています。私のサイトは文字ばかりですが、Macの総合ページにも3300文字が書かれています。そして次の図をみてください。これは、同じくMac総合ページでキーワード出現率を解析した結果です。

アップル社のホームページ キーワード出現率

近年SEO業界では「Googleはキーワードの出現率を見ていない」と言われていますが、アップル社は『SEOについて:本文にまつわるSEOの技術仕様』でも触れている通り、「人は相手に何か重要なことを伝える際に、適宜『伝えたいこと』を繰り返す」ということを着実に行なっています。もちろん、検索で「Apple Mac」と検索して、アップル社のページが上位に表示されるのは、このキーワード出現率やタイトル要素、メタディスクリプションだけが影響しているわけではありません。

スタイリッシュなデザインを実現しながらでも、抑えるべきところは確実に抑えている。それが「ブランド・メーカー」だというわけです。では、演出効果についてみてみましょう。

ウェブサイトの演出効果について(注意!)

他社のコンテンツ・デザインを研究し、あなたのサイトに応用する場合は、あなたにとって見込み客となる人たちが、その研究対象のサイトをどのようなシーンで閲覧するのかを前提に見ていく必要があります。

例えば、アップル社のホームページを閲覧する場合「便利なパソコン」「機能が豊富なパソコン」が、欲しいといった心理状態でアクセスすることはないでしょう。また「パソコン 安い」「コスパの良いパソコン」といったキーワードでも検索されることもないでしょう。

これに加え「アップル社のパソコン」と検索することもまず考えられません。アップル社のホームページにアクセスする人たちは、すでにアップル社が提供する商品名を知っており、大方の仕様や機能、デザインなどについても知っている場合が多いのです。ではなぜ、すでにアップル社の商品について「情報」は得ているのにホームページを見るのでしょうか。

その答えは「今、買うべきか」を決断するためにアップル社のファン、Macのファンやアイフォーンのフャンはアップル社のホームページにアクセスするわけです。そのため、スタイリッシュな画像と商品への期待値が上がるような短文のキャッチコピーが掲載されており、その「期待」を、さらに掻き立てるような情報は「次ページにある」ことを示すように「さらに詳しく」と書かれたテキストリンクが掲載されているわけです。

「ファン心理」とは、その対象について同じファンよりも「さらに詳しく」情報を持つこと、そして商品やグッズを所有することを何よりも好みます。このような視点で、もう一度アップル社のホームページを見ていくと、そのファン心理を上手に掴むようなコンテンツ・デザインになっていることがよくわかります。

そういった視点で、JimdoやBindサービスが提供しているホームページの演出について、もう一度確認してください。確かに、ホームページを「できれば無料で手にしたい。」そして、できればプロが作ったようなスタイリッシュなホームページを自分で作ることができれば、かなり得した気分になりますよね。

この衝動に気持ちが傾くと、本来ホームページを必要としている理由からかけ離れた「欲求」が触発され、無料登録を行って、その優れた操作性に浸りながらスタイリッシュなデザインのホームページを作ってしまう。「SEOについても完備されています」と解説されれば、なんだか「勝手に作っても」(いや、これはちょっと言い過ぎですね)、マニュアルに書かれた通りにホームページを作っていけば、検索エンジンに最適化されたホームページを作ることができ、検索の上位に表示されて、無料のアクセスが獲得できてしまうと錯覚を起こしてしまう。

言うまでもなく、検索結果は「ランキング」形式で表示されます。

全てのサイトが「SEOについても完備されている」サービスやホームページ作成サービスを使って、ウェブサイトを立ち上げ運営するようになった場合、検索結果がどのように変わるのかを一度想像してください。ここで全てを私がお伝えしなくても、すべてのサイトが「SEO完備」のサイトだったとしても、検索結果はランキング形式で上から順に表示されます。この「SEOについても完備されている」という文言が、中身を持たない「装飾語」でしかないことは、もうこれ以上お話しすることもないでしょう。

その理由は、検索ランキングを決定するサイトへの評価は、絶対評価ではなく相対評価だからです。仮にGoogleが認める検索エンジン最適化の要素をすべてのウェブコンテンツが満たしていたとしても、検索結果は、すべてのコンテンツに何かしらの優劣を付けランキング形式で表示されるわけです。

では、なぜ、コンテンツ・デザインに演出を使うのでしょうか。

各コンテンツをデザインする「演出」が持つ唯一の目的とは

各コンテンツに施されている「演出」が持つ目的はひとつしかありません。それは、

「閲覧者の目を留めること」

画像を掲載するのもスライドショーを掲載するのも、それは、閲覧者の目を止めることが目的。動画がコンテンツに掲載されているのも、文字だけを置くよりも閲覧者の目を止めやすいので、動画を掲載しています。単純に動画を視聴させたいのなら、YouTubeへのリンクボタンを掲載しておけばいいだけなのです。コンテンツに直接動画を掲載する場合でも、YouTubeへのリンクボタンが掲載している場合でも、閲覧者は同様に1回のクリックで動画の視聴を始めることができます。それなのに、なぜ、動画を自サイト内に掲載するのか…

その理由も「ひとつ」です。

コンテンツに記載された「テキスト情報」を、素通りされることなく、動画に目を止めてもらい、そしてコンテンツから離脱されることなく、動画に続く情報を読んでもらったり、動画やその前後で指示している行動を閲覧者に起こしてもらうために、動画をウェブサイト内に掲載するわけなのです。

では、スライドショーやスクロールしていくと画像が浮かび上がったりテキストが浮かび上がってくる演出は、なぜ、行われているのでしょうか。

これも、閲覧者の目を止めるためです。決して閲覧者に「かっこいいサイトだな〜」と感じさせるためではありません。

このように、コンテンツに演出を用いる理由は、閲覧者の目を止めることを目的にだけ、行われているのです。ただ、このようなお話をすると「目的はひとつなのに、なぜ、演出技法は多岐に渡るのか?」と質問をいただくことがあります。

演出技法がなぜたくさん存在し、その演出を実装するプログラムがたくさんあるのかといえば、ひとつは、同じ演出ばかりだと閲覧者が慣れてしまい、目を止めることができなくなるからです。そしてもうひとつは、製作者もしくはコンテンツの制作を依頼した「依頼主」の満足度を満たすためです。

派手な演出ほど、飽きられるのも早いということは、あなたも知っての通りです。「派手な演出」に関して、ウェブコンテンツ上では「動きのあるコンテンツ」と置き換えても差し障りないでしょう。

通常ウェブコンテンツは「静的なもの」で、出来ており「動的なもの」ほど、通信回線の影響を強く受け、受信している端末のスペックによって、「滑らかに再生される」場合もあれば、エラーを起こし、正しく表示されないこともあります。

もちろん、実装するための費用は、静的な演出よりも動的な演出のほうがプログラム的な専門知識も必要となりますし、依頼を出せば高額を請求されるようになります。そして、すでにそういったことは、あなたも含めてほとんどの人が理解し、その現実に対しても納得しています。このような観点からもJimdoやBindで提供されている演出が実装可能なホームページ作成サービスに人気が集まるわけです。

しかし、ちょっと立ち止まって思い返してください。

確かに、かっこいい、プロが作ったようなモーション演出が実装可能な無料のホームページ作成サービスは、世の中にたくさんあります。
ではなぜ、無料で実装可能なモーション演出のサービスがたくさんあるのに、なぜ「他と違う」と感じてしまうのでしょうか。

その理由は言うまでもないでしょう。ほとんどの人が採用しないからです。

採用しない理由には、そういったサービスの存在を知らないからともいえるでしょう。その場合なら、そういったモーション演出が高額で提供されているだろうと予測することもできるので、少しは憧れの眼差しでサイトを閲覧してもらえるかもしれません。ライバルサイトから羨望の眼差しを向けられることもあるかもしれません。

きっとウェブオーナーや、そのサイトを作った制作者の自尊心は満たされていることでしょう。しかし、ただ、それだけです。

コンテンツに演出を行う目的が「見込み客の目を止めること」である以上、それ以上の効果は無駄な効果だともいえます。

コンテンツ・デザインとは、まさしく、見込み客の目をそのコンテンツ上にとどめ、そして図を見せたり前後の文字を読ませたり、動画を視聴させ、最終的には、あなたの指示に従って、問い合わせを行ったり商品を購入するに繋がるだけの情報を適切に受け取ってもらうことだけを意識して、デザインを施し、必要に応じて演出を行うことが大切なのです。

コンテンツ・デザインこそ「王道」を採用しよう

コンテンツ・デザインの「王道」には、まず「白黒」があります。これは出版界でよく用いられるコンテンツ・デザインなのですが、出版界では漢字が多い原稿のことを「黒い」と表現し、読みづらい原稿のことを意味します。そのため、難読漢字でなくても、「ひらがな」で記述した場合に誤解釈が起こらない場合は「ひらく」といって、漢字をひらがなに直します。

上の段落も、比較的漢字の多い段落ですが、「その『単語』をあらわす」の箇所は「表す」と、漢字で表記しても意味は変わりません。そのほかの部分も「ひらく」をおこなっていくと「難読漢字」は「読むのが難しい漢字」と「ひらく」ことができますし、「存在した」は「あった」にひらくことができます。

この「ひらく」というコンテンツ・デザインは、読者の視点をとめる演出ではありませんが、精読率をあげる(「ひらく」と「読みやすさをあげる」)、コンテンツ・デザインの王道として、長年採用し続けられている「定番」の技法です。誰でもちょっと気を配れば使えるようになるテクニックですし、ここにお金はかかりません。

このほかにも、古くから使われているコンテンツ・デザインの王道には「段組と行間」というテクニックがあります。

「段組」とはまさしく、一行あたりの文字数を整える「書式」でもあり「行間」とは、段落と段落の間に設けるスペースのことを意味します。もちろん、段落中の行間も、行間ですが、段落と段落の間に適宜「一行分のスペース」をとり、コンテンツの「黒さ」を薄めることは、読者にとっても読み進めるストレスを軽減する働きを持っています。

基本的に日本人の場合は、段落の「形」に対して、横書きの場合は「横長の長方形」を好み、読みやすさを感じます。縦書きの場合は「縦長の長方形」を、読みやすいと感じます。正方形の段落や横書きなのに縦長の長方形になっていると、文章自体に「増長感」を抱くようになり、読みやすさにマイナス効果を与えてしまいます。

しかし、人は「慣れ」の動物でもあります。

昨今のインターネット事情を振り返ると、パソコンでコンテンツを閲覧した場合には、文章は横書きで、段落は「横長の長方形」に、まとまっていたとしても、スマートフォンで閲覧した場合には「縦長の長方形」になってしまっている場合が多くあります。そのため、同じテキスト量のコンテンツだったとしても、文字量が多いコンテンツでは、スマートフォンでの閲覧より、パソコンからの閲覧のほうが成約率は高いとも言われます。

笑顔(右)

このことを考えると、なぜ、SNSが人気なのかも、頷けますよね!

SNSの投稿は、横書きで、そのほとんどが「横長の長方形」に収まっているので、閲覧者は読むことにストレスを感じないのです。

しかし、この閲覧端末によって読みにくくなってしまう「縦長長方形の段落」を読み進めさせるコンテンツ・デザインにも「王道」と呼ばれる方法があり、それが、文字装飾です。

成約率を高める王道のコンテンツ・デザイン

文字装飾とは、このページにも適宜採用されていますが、太文字や赤文字、下線やマーカーといった文字や文章を強調する装飾のことです。各段落を長方形に保つのも誰にでも費用をかけずに実施できる王道のコンテンツ・デザインですが、この文字装飾も同じように、採用するのにお金もスキルも必要ありません。

しかし、通常この「文字装飾」は、重要な箇所を強調するために用いられると考えられています。これは、小学校でのお勉強や受験勉強の名残ではないかと私は考えています。筆者が重要だと感じるところ「目立たせたい」「強調したい」という箇所に、この文字装飾が偏ってしまうと、セールス色を強く感じるコンテンツになる恐れがあり、特に「つまみ読み」をする閲覧者の場合は、どうしても文字装飾箇所に目がいきますので、セールス要素ばかりを読まれてしまう恐れが出てくるのです。

ウェブサイトの原稿を書く場合、きっと誰もが、その原稿をすべて閲覧者が読んでくれれば、最後に提示している「あなたからの指示」に従って、行動を起こしてもらえるだろうと考えながら原稿を書いているはずです。少なくても、そうやって最後まで読み進めた段階で、あなたの指示に従って行動を起こしてくれた人が見込み客であり、行動を起こさなかった人は「顧客にはならない人たち」と割り切ることができるようにコンテンツを制作するでしょう。また、原稿も書くことでしょう。

そのような、コンテンツを作る目的、原稿を書く目的で始まっている以上、主張したい箇所すべてに文字装飾を使って強調していくと、文字装飾だらけの「チカチカする」コンテンツが出来上がってしまいます。

文字装飾を「成約率を高める王道のコンテンツ・デザイン」に仕立てるためには、私たちが「スクロールフック」と呼んでいるルールで文字装飾を行うことが重要になってきます。

この「スクロールフック」とは、スマートフォンの画面をスクロールさせ「次を読ませる」ための文字装飾です。画面を「スクロールするキッカケ」として文字装飾を行うので「スクロールフック」と呼びます。

セールスライティングは基本だけを学べば、それだけで充分

 実はこの「スクロールフック」は、インターネット時代になって登場した用語です。しかし、そのコンセプトは紙チラシの頃からセールスライティングの基本中の基本として教えられているコンセプトから生まれています。その「セールスライティングの基本中の基本」とは、次のことです。

セールスライティングの基本

  • ヘッドラインの目的は、これに続くサブコピーを読ませること
  • サブコピーの目的は、次のリードを読ませること
  • リードの目的は、それに続く、サブコピーを読ませること。そのサブコピーは、さらにその下に続くボディコピーを読ませること。

チラシを作ること自体が「売り込みを行うこと」で、ある以上、チラシを手にした人が初めに読むヘッドラインで売り込みを行う必要もなければ、その下に続くサブコピーでも売り込みを行う必要はありません。リードで売り込む必要もなければ、ボディコピーで売り込む必要もないわけです。

チラシ(コンテンツ)の最後に、チラシを読むという行動の続きを提示するだけで、その次の行動が「お問い合わせ」なら、その最後まで読み続けた人が見込み客なら問い合わせを「それまでの行動の続き」として、行うでしょう。「商品の購買」が、そのチラシ(コンテンツ)に続く行動だとすれば、商品が購入されるわけです。

人には「一貫性の法則」という心理メカニズムがあり、一度始めた行動に対し自発的にそれを中断することに対して、ストレスを感じます。もちろん、その一貫性の法則が絶たれる理由は、「自発的に行動を中断するストレス以上のストレスを、一貫性を保つこと以上に感じた場合」は、途中でやめてしまいます。そのために、私たちや、あなたが行わなければならないことは、ウェブコンテンツへのアクセス者に対し「目を止めてもらう」演出ではなく、「読み進めることに対するストレスを緩和する」ことなのです。もしくは、読み進めることに感じるストレスを上回る「読み続けたい衝動」を誘発するコンテンツ・デザインが必要になってくるわけです。

一貫性の法則を保たせる方法と中断してしまう要素

一貫性の法則をコンテンツ・デザインで保たせるためには、このページでも行っているような「見出し装飾」や画像、太文字や下線、マーカーなどの文字装飾でスクロールフックを施し、画面をスクロールするきっかけを閲覧者に与えます。これに加え、段落装飾やブレッドなどで、単調になりがちなテキストコンテンツに「読む際のリズム」を加えます。

このページにもパソコンで見た場合には「一行の段落」スマートフォンでも二行程度の「幅の薄い段落」が、あるように段落の塊にも行数でリズムを生み出すことができます。このように、画面をスクロールして「コンテンツを読む」という行動に対して働き始めた、一貫性の法則を維持させる方法もあれば、段落の幅でリズムをとって、読者にとって「長文を読むストレス」を緩和したり「この段落だけでも読むか」と感じさせるなどして、一貫性を保ってもらえるような工夫がおこなえるわけです。

そして、読者の一貫性を保つことができれば、あなたは、読者からの信頼を得ることができます。逆に掲載している情報がどれだけ素晴らしくても、どれだけ人の役に立つ情報だったとしても、また、あなたがどれだけ多くの人から尊敬され、支持され、信頼されている人物であっても、読者の一貫性を保てなければ、その読者から信頼や信用を得ることは出来ません。

 一貫性の法則を中断させてしまう要素には、先にあげた「黒い原稿」も、中断させてしまう要素となります。このほか、私たちが意識して修正を加えるものに「1文字改行」があります。段落の最後の行が「1文字プラス読点」で終わるような文章です。

レスポンシブWebデザインが採用されるようになり、あらゆる画面サイズの端末でウェブコンテンツを閲覧されるようになった今では、すべての端末で、この「1文字改行」をなくすことは難しいのですが、せめて主要端末と呼ばれる画面サイズにおいて、1文字改行が残らないようにコンテンツ・デザインを仕上げるようにしてください。

あなたは、このコンテンツをパソコンで見ていますか?パソコンで閲覧されているのなら、13インチのラップトップ画面以上でしたら1文字改行の段落はないと思います。また、iPadやiPad miniで閲覧されている場合も、1文字改行の段落はないと思います。

スマートフォンで閲覧している場合でしたら、iPhone6とiPhone6プラスでは、1文字改行がないでしょうし、コンテンツをどの位置に移動しても、必ず装飾された文字や段落が写り込んでいるのではないでしょうか。

このサイトで実装しているコンテンツ・デザインは、すべてボタンをクリックするだけで再現できるように投稿画面をカスタマイズし、これらのコンテンツ・デザインを実装してもネット回線の影響をほとんど受けることがないものを採用しています。いうまでもなく私たちはSEOを重視していますので、SEO的にもマイナスとならない記述方法を採用しています。

従来、このコンテンツ・デザインをクリックだけで再現できる投稿画面のカスタマイズは、ホームページの制作をご依頼くださった方だけに提供させていただいていた、特別なサービスでした。しかし、たくさんのご要望をいただいたことから現在は、WordPressで作られたサイトを運営中でしたら、ご提供させていただいております。

この投稿画面のカスタマイズに関する詳細や料金は下記のページにてご確認ください。