ページデザインとコピーライティング2018-03-14T17:55:57+00:00

デザインとライティングの関係

当ページでは、ホームページデザインとコピーライティングに関する「概要」を基礎講座形式で解説しています。また、このページでは幅801px以上の端末で閲覧の際には「パワーポイント・デザイン」で表示され、800px以下の端末で閲覧の場合は「目次」が表示され、通常通り画面スクロールが有効です。

幅801pxから1279pxの画面サイズでは、各セクションに「次へ」のボタンが表示されますが、幅1280px以上の画面では右端にナビゲーションバーが表示され、「次へ」のボタンは表示されなくなります。一定量マウスをスクロールし画面を切り替えるか、ナビゲーションバーをクリックしてお進みください。

本ページでも、それぞれの端末でアクセスされた際の状況を踏まえたコンテンツデザインを行なっています。

「次へ」ボタンならびにナビゲーションバーをクリックして画面を切り返す場合、都度「ページめくり」などの挙動を起こすことがありますが、不具合ではございません。表示が落ち着くまで1、2数秒お待ちください。

次へ

ページデザインとコピーライティング

コピーライテングの構成

コピーライティングには、基本構成があり、「ヘッドライン(大見出し)」から始まり「リードコピー(導入文)」へと続き、「サブヘッド(「サブコピー」とも言う:小見出し)」と「ボディーコピー(本文)」へと展開されます。

「サブヘッド」と「ボディーコピー」の中で、展開されるのは、セールスではなく情報提供です。その理由は、「人は売り込まれたから買うのではなく、買うために必要な情報で満たされた時に行動を起こす」からです。

この時の情報提供は、「オファー」内容(価格や購入条件など:以降で解説)を魅力的、もしくは「妥当」だと、判断できるような情報提供を行うことが大切です。

最後の「アクション」は、入力フォームや「カートに入れる」ボタンを掲載するだけでは足りません。

では、この流れに沿ったデザインを見てみましょう…

次へ

デザインは対象顧客層に合わせる

コピーライティングの構造は、セールスコンテンツであれ、詳細情報を解説するコンテンツであれ変わりありません。

なぜなら、企業サイトにおいて、詳細情報を掲載したページであっても、最終的には読者に行動を起こさせ、「次のページ」に誘導するか、資料請求やお問い合わせを発生させてこそ、初めて、そのコンテンツが役割を果たしたことになるからです。

ひとつのウェブサイトには、大きく分けて「ナビゲーションコンテンツ」「セールスコンテンツ」「情報コンテンツ」の3種類があり、デザインは、それぞれ異なります。また、同じ種類のコンテンツでもアクセス経路割合の偏りによって、デザインを変更します。

アクセス経路には「WEB広告経由」「自然検索結果経由」「SNSなどの外部サイト経由」「直接アクセス」「サイト内コンテンツ経由」の5種類があります。

アクセス経路は「サイトの運営方針」ならびに「ページの運営方針」によって変化し、結果的に検索経由のアクセス割合の変化によって、成果と見比べ改善する必要があります。

次へ

レイアウトの選択

2カラム、右サイドバーのデザイン

「レイアウトの選択」とは、サイドメニューのある2カラムのページを採用するのか、それともサイドメニューのない1カラムレイアウトにするのかと言うことです。

1カラムレイアウトは、読者に余計な情報を与えることなく、本文に集中させることができますが、アクセス経路が多岐にわたる場合、1カラムレイアウトは不向きです。

しかし、昨今のようにスマートフォンによるアクセスが多発するインターネット事情を顧みれば、サイドメニューを頼りにしたユーザーナビゲーションは、アクセス解析データを煩雑にし、サイトの改善を難しくするだけとも考えられています。そのため、「2カラムレイアウト不要論」なども出てくるようになりました。

特に、検索経由のトラフィックは予測が不可能なため、成果対象を「トラフィック数」と、するのではなく「実質的な成果」や各ページに定めた「目標達成割合」を成果対象と定めることが重要です。(成果達成割合にリンク)

次へ

WEB広告経由のアクセス傾向

広告経由のアクセスは、スピード勝負

広告経由のトラフィックには、リスティング広告(検索連動型広告)と、バナー広告(リマーケティング広告など)、SNS広告など大まかに3種類のアクセス経路が予測されますが、「アクセスの質」に、それほど違いはありません。

なぜなら、リスティング広告は、自発的に検索窓にキーワードを打ち込み、比較的購買欲求が高いトラフィックだと考えられていますが、その他の広告も、そのバナー広告やSNS広告が掲載されていた周辺の情報から、購買欲求等が触発されたトラフィックだと考えることができるからです。

また、「広告経由」のトラフィックには「短い文章に触発された」という共通点があります。

そのため、広告経由のトラフィックは、1ページのみでセールスを完結させるコンテンツデザインが求められるわけです。

そして、ここで選択されるのは、1カラムレイアウトのコンテンツデザインです。

次へ

検索経由アクセスの特徴

検索経由のアクセス

検索経由のアクセス特徴は、検索されるキーワードに込められる購買欲求濃度により変化します。

例えば、抽象的でより頻繁に検索されるようなキーワードで、トラフィックを獲得できるような「検索上位表示」を果たすことができたとしても、1ページだけの閲覧で訪問者が顧客化につながるアクションを起こすとは考えられません。

そのため、このようなキーワード特性から発生するトラフィックのランディング先は「ナビゲーションコンテンツ」となります。ナビゲーションコンテンツに関するコピーライティングとコンテンツデザインに関しては、『トップページデザインの基本』などを参考にしてください。

より具体的な検索キーワードに由来するトラフィックは、「情報ページ」に集まります。具体的な検索語由来のトラフィックを見込むページを作り込む場合は、キーワードの特性と顧客化までの閲覧導線を設計し、各ページのライティングを行うことが大切です。また、定期的にアクセス解析データをチェックし改善を行うことは欠かせません。

次へ

SNS経由のトラフィック

SNS経由のトラフィック特性

SNS経由のトラフィックには、意図的に発生させるものの他に、自然発生的に起こるトラフィックがあります。

「意図的に発生させるトラフィックとは」SNSにリンクを掲載した投稿を行なった場合に発生するものです。

「自然発生的に起こるトラフィック」とは、そのリンクを掲載した投稿が拡散された時に起こるトラフィックと、名刺交換やSNSの交換を行なったのちに、プロフィールに記載したホームページアドレスをタップし発生するトラフィックの2種類があります。

意図的に発生させるトラフィックと投稿が拡散された際に起こるトラフィックは、比較的具体的なキーワードで検索された場合と類似した閲覧動機があると考えられますので、1カラムで詳細コンテンツ用のデザインを採用します。

その後のデザイン改善は、検索経由のアクセスもSNS経由と同程度発生しているのなら、キーワード特性に従いデザインを改善すると成果の改善が見込めます。

次へ

コンテンツライティングの手順

コンテンツライティングの手順

まずは、コンテンツデザインとコピーライティングの関係を整理しましょう。

ページコンセプトと3種類のコピーライティングに関しては、詳細ページで!(リンクはページ最終部に)

コンテンツの文章を書く際には、まず、そのコンテンツにアクセスが発生するだろう「キーワード」の選定から始めます。

しかし、ここで重要なのは、トラフィックの多さと成果は必ずしも比例しないということを踏まえて、作業に入ることです。

より多くのトラフィックを見込めるキーワードを見つけることができても、そのキーワードで検索上位表示を達成し、維持し続けなければ、その目論見はかないません。

より、多くのトラフィックを見込めるキーワードを見つけるということは、そのページの「テーマ」を見つけたのだと捉え方を変えてみてください。そのような人気キーワードに由来する検索経由トラフィック獲得は「結果論」だと、割り切りましょう。

あくまでも、ページに記載する文章のテーマがぶれないように「設定」するだけです。そのテーマによって「1ページで、どこまで読者に情報を伝えるのか」と、「情報量」と「読者のページビュー数」を設計するために、キーワードを選定すると覚えておいてください。

次へ

WEB特有のヘッドライン

WEBコンテンツのヘッドライン

WEBコンテンツのヘッドラインは、コンテンツ最上部に掲載する「大見出し」「アイキャッチ画像」に加えて、検索結果に表示される「ページタイトル」、そして、SNSに投稿をシェアした際に表示される「og:title」を含めて考えます。

「ページタイトル」「og:title」ともに、ページのソースコードを直接編集する必要があります。そのため、ホームページを作成する時にはWordPressなどのCMS(コンテンツ・マネジメント・システム)を導入し、本文と同様にご自身で簡単に編集できる環境を整えることが、とても重要になってきます。

基本的に「ヘッドコピー」は「読者対象」で始めます。

紙媒体のコピーでは、ある種、無作為に広告が手に取られるため、また「広告」だと知るとゴミ箱に直行するため「あなた」で、始めることが良いと言われますが、WEBコンテンツの場合は、検索エンジンの存在を無視できませんので「あなた」をヘッドコピーに使う場合は、「アイキャッチ画像」の中に記載し、ページ最上部の大見出しは、目立ちすぎないようにデザインします。

次へ

「導入文(Introduction)」の役割と重要事項

リードコピーの役割とは

導入文とは、ヘッドラインに続く200文字弱で抑える短めの文章です。検索結果に表示される「ページの説明文(メタ ディスクリプション)」と同じ文章を用いる場合もありますし、ページの説明文を記載していない場合は、この「導入文」が、多くの場合、検索結果に表示されます。

ナビゲーション・コンテンツの場合は、そのまま「次のページ」ボタンをクリックさせるパーツになることもあり、この場合、省略記号の「[…]」を用いて、文章を途中で終わらせるテクニックを用いることもあります。

ナビゲーション・コンテンツ以外のコンテンツ以外では、ヘッドラインを受け「ふむふむ」と、自然な流れに沿って読ませ「共感」を得る文章とし、次の「サブヘッド」への興味づけとなる文章の締め方をするケースもあれば、「挨拶文」形式で、そのまま、あなたの資格や経歴などを示し「信頼」を得る文章を掲載することもあり「導入文」は、実に様々です。

どのような様式で導入文を作文するにしても、その役割はヘッドラインとサブコピーをつなぐセンテンスであることに変わりはありません。

次へ

サブヘッド(小見出し)展開のテクニック

サブヘッド(小見出し)展開のテクニック

サブヘッドは、「サブヘッドライン」の略で「リードコピー」とも呼ばれます。この「サブヘッド」と、次の「ボディーコピー」は、コンテンツの中で適宜複数回使用され、記事を展開し、「オファー」へと繋げます。

サブヘッドの展開は、ヘッドコピーに呼応し、始めることが第一です。ヘッドラインで奇をてらったコピーを使う場合は、初めのサブヘッドで「共感」、もしくは「信頼」を得るためのコピーを掲載します。また、ヘッドコピーに検索キーワードと呼応した文章を掲載した場合は、インパクトのある画像やデザインを併用し、初めのサブヘッドで、読者へ「問題提起」を行い、本題への更なる興味付けを行います。

その後は、情報提供に徹し、淡々と本文で情報提供を行う中、その漫然としがちな本文に飽きさせない小見出しを作文する工夫が求められます。

特に、このページのような「基本事項」を記載し、次の「詳細ページ」に促すコンテンツを作成するときなどは、サブヘッドが鍵になります。

次へ

読まれるボディーコピー(本文)デザイン

ボディーコピーの役割

文章が苦手だという人の多くは、ご自身の書く文章に「魅力を感じない」もしくは、「内容が薄い」「表現力が乏しい」と、卑下されています。しかし、WEBコンテンツとしての文章が、人の役に立つかどうかに文才は必要ありません。

なぜなら、「役に立つ」か、どうかは、読者の「状況」に大きく左右されるからです。

ましてや、現代人は「早合点」しがちです。本ページは14のセクションから成り立っています。冒頭の数セクションだけ読んで役に立つと評価くださる閲覧者もいれば、14セクション全てを読んでも、役に立たないと評価する人もいるでしょう。

同じ文章なのに、読みやすいと感じる人もいれば、読みにくいと感じる人もいます。私たちは、WEBコンテンツには、「役に立つだろう」と、考えている内容を出来る限り専門用語などを使わずに淡々と記述すれば良いと考えています。必要なのは、「次を読みたくなる仕掛け」です。詳しくは、ページ最終部より『次を読みたくなるコンテンツデザイン』をご確認ください。

次へ

Actionに繋げるOffer

オファーの書き方

「Offer」とは、「購入条件」のことです。直訳すると「提供」や「勧める」と訳され、まさに、訪問者に「何を」「どのように」「提供できるのか」もしくは「なぜ、オススメなのか」を、このセクションで伝えます。

セールスコンテンツに限らず詳細情報を掲載したコンテンツでも「次のページ」を勧めることもあれば、資料請求や問い合わせを促すこともあるでしょう。

「Offer」で重要なことは、次のセクションに当たる「行動喚起(Action)」に記述する文章に従って読者に行動を起こす「メリット」や「魅力」を具体的に伝えることです。

また、「Offer」で、具体的な金額を提示するときでも、同じ100万円の商品でも、「Offer」に至るまでの内容によって、「安い!」と、感じる人もいれば「高い」と感じる場合もあります。コピーライティングは「Offer以前」までに「値ごろ感」に繋がる情報を掲載し「価格感度」を引き上げます。そして「Offer」は、読者に「次の行動」を起こした際の近未来をイメージさせ「Action」のセクションに進ませる役割を持っています。

次へ

読者に行動を促すポイント

WEBコンテンツのヘッドライン

読者にどのような行動を促すかは、読者とあなたの関係によって変わります。基本的には「ベイビーステップ」と言われる、「もっとも簡単な行動」から、読者に促します。「支払い」が発生するアクションよりも「無料」のほうが行動は起こしやすいと考えがちですが、この場合「タダより怖いものはない」の心理が働くことを忘れてはいけません。

「30万円はするかな?」と、「Offer以前」までに感じていたコンテンツが、「Offer」で無料だと伝えられれば、「怪しさ」を感じることも考慮する必要があります。

「なぜ、無料で手にできるのか」「なぜ、無料で提供しているのか」を、読者が納得できる理由をここで記載します。また、訪問者に提示するアクションには「支払い」「フォームへの入力」「ボタンのタップ」があります。「フォームへの入力」は、入力項目の妥当性が低ければ、行動を躊躇させてしまいます。

それでは、具体的な『ページコンセプトと3種類のコピーライティング』に関して、下記ボタンよりご確認ください。

さらに詳しく…