ブログ

こんばんは。

先日BtoB向けサービスサイトの改修案を考えている時に、参考になりそうなサイトをザッピングしていた時に出会いました。やらなきゃいけないアプローチ。
その名も「あのページも、このページも、ファーストビューで完結やん！」です。

…簡単にお伝えすると、このアプローチはリード情報を獲得するためのサービスサイトなら、下層ページにもファーストビュー箇所にリード獲得用コンテンツを準備しようということです。

気付きを得たWebサイトの紹介（才流さん/Sansanさん）

今回、私はコンサルティングで有名な株式会社 才流さんと、名刺管理で有名なSansan株式会社さんのサイトを拝見したことで気付きを得ることができました！ありがとうございます！

気付きを得た才流さんのページ

気付きを得たSansanさんのページ

ちなみにこの２つのWebサイトには「どうやったらリードが増えるん～。予算は厳しいし、なんかWebサイトでできることないんかな～。」と関西弁で嘆いていた時に出会いました。

正直、最初見た時は「下層ページのファーストビューに資料提供か〜。トップページやったらわかるけど、下層ページでこの感じはガツガツしすぎやろ。お客さんにもガツガツしてるって思われるやろ。資料ダウンロードしてほしいのが伝わったら嫌われそうやな～。」と思っていました。

ですが、何度も「どうやったらリードが増えるん～。予算は厳しいし、なんかWebサイトでできることないんかな～。」と嘆きながら、才流さんとSansanさんのサイトを何度も見ていると気付きました。
下層ページのファーストビューに資料を設置するのは、ガツガツしているわけではない。
「ページ訪問者への最適な情報提供」と「ビジネスとして必要なリード獲得」、両方の需要と供給のバランスがとれた施策だと。

その時に思ったこと

• 訪問者がほしい資料の準備があっても、存在を知ってもらえないとダウンロードは発生しない。
• 製品ページを訪問した方に、製品資料のダウンロードを案内するのは訪問者のため。
• すべてのユーザーがホワイトペーパーや資料ページに到達するわけではない。
• 訪問者の求めている情報を提供するのは良いこと。
• ファーストビューを有効活用できている。

どこのページにコンテンツを追加するかの判断について

良いコンテンツであることに気付いた以上、改修案に組み込まないわけにはいきません。

となれば、どこのページにコンテンツを追加するかが重要になるわけですが、私の場合はサーチコンソールとMAツールを使いました。GA4も使えるとよかったのですが、得意ではないので今回は使用していません。

判断方法

まず始めに、コンテンツを追加するかを決定したかったので、サーチコンソールを使いページ毎の訪問数を確認しました。一定の流入が見込めるページを実施対象に決めて、ボリュームが多い順に優先的に対応することを決定しました。

続いてMAツールを使って、コンバージョンしたユーザーが閲覧しているページが漏れていないか確認しました。
こうすることで、検索キーワードにあった資料を提供でき、更にコンバージョン可能性があるユーザーに資料の存在を紹介することができます。

リード獲得用の資料について

対応するページが決まったら、必要になってくるのは資料です。

サービスページなら「サービスに関する資料」、料金ページなら「料金に関する資料」、事例ページなら「事例に関する資料」、導入の流れページなら「導入に関する資料」と、ページにマッチした資料が必要になります。

「そんな都合の良い資料は無い。作り方もわかんない。」という方は、自分で作るチャンスです！大丈夫です！思っているより簡単ですし、一回つくればこっちのもん。エンドのお客様への理解をさらに深めるチャンスです。

初めて資料を作る場合は、これまでにダウンロードした資料を参考にして、資料を見る人の気持ちになって構成を組みましょう。私の経験上ですが、資料の「見応え」と「ダウンロードする意図（需要）とマッチしているか」を意識して作成すると営業でも使える、ひと粒で2度美味しい資料を作成できます。
また、資料を作る際は数字を使った訴求ができると説得力が増すので、「Webサイトや営業資料に必要な数字の作り方」もご覧ください。

逆に「見応えがない」「期待していた内容と違う」「ホームページに書いている内容と同じ」と思われた場合は、「連絡先がほしかっただけか」「がっかり」とリード情報を獲得できたとしても、セールスがやりにくいリードになってしまいます。

どうせ作るなら、お客様もセールスも喜ぶ資料を作っちゃいましょう。

コンバージョンページの構成について

最後にコンバージョンページの構成についてですが、コンバージョンページは主流となっている「資料名＋アイキャッチ＋目次＋フッター＋フォーム」の形式が蛇足がなく目的がハッキリしていて良いと思います。

フォームの内容に関しては、セールスと相談して決めるのが一番です。
しかし、項目が増えれば増えるほどダウンロード率は下がってしまうので、4つから5つを目指しましょう。

リード獲得でお悩み中の方は、是非お試しください。

こんにちは。
Webサイトのデザインをしている時に好きなデザインにテイストが寄ってしまい、周囲にワンパターンなデザイナーだと思われていないか不安になる、Webデザイナー兼広告運用者のゆうです。

このような何も言われていないのに不安な気持ちになる同志たちに今日は、Webサイトの見出しデザインをパターン別に、これまで培ってきた観点からSEO視点で考える見出し文言の作成方法を紹介します。

次のような悩みを解決できます

• 見出しデザインのパターンを増やしたい
• 見出しデザインがしっくりこない
• メディア運用せずにSEO対策したい

見出しデザインの重要性

見出しのデザインは、章の区切りやブロック・セクションを明確にする要素であり、伝える側にとっても見る側にとても重要です。そのため、見出しはただ単にデザインするのではなく、「リズムがよく、読みやすい」「間が空いているので、見やすい」「世界観に合っている」などを意識して作成します。

見出しデザインの種類

見出しデザインは、いくつかの種類で構成されています。
この後にも紹介しますが、例えば「日本語+英語」や「日本語+アイコン」などは目にする機会が多いと思います。ここでは定番の見出しデザインを4つ紹介します。

１つ目 英語を足す

スタンダードな手法ですが、英語を追加することで急におしゃれそうに見えるのが不思議です。
ただ、今回のように「求人=Recruit」と意味がわかるものなら良いのですが、全く認知度のない英単語や十数文字あるような英単語が出てきた時に意味が伝わったり、デザイン性を保てるか重要になります。

２つ目 装飾する

アイコンや飾り罫による装飾もスタンダードな手法の一つです。
文言の意味を表現するアイコンをつけることで、視認性とデザイン性を高められます。アイコンを自分で作成できる場合は問題ないのですが、Adobe StockやPIXTAなどの購入サイトで購入する場合は線の太さや丸み、塗りつぶしや線画などのデザインテイストを統一する必要があります。

３つ目 背景をベタ塗り

背景を塗ったデザインは、単色でシンプルな見栄えになります。
最近ではブログや記事メディアで見かけることが多いですが、まだまだ多く使われています。

４つ目 背景に画像を敷く

背景に画像を敷くパターンは、BtoB向けのWebサイトのページヘッダーで使われている印象です。
ページの意図に合う画像を準備することで意図を視覚的に伝えられますが、大抵の場合、画像には多くの色や陰影があるので誰が見ても見やすいように色の調整や文字サイズを調整して可読性を担保しましょう。

このように見出しにはデザインのパターンがあります。新しい物を知ったら試したり、使いたくなりますが、企業や製品の雰囲気や懐いてほしい印象、読みやすさなどを考慮した上で最適な物を選定してください。

見出しデザインで意識するポイント

デザインパターンを紹介しておいてなんですが、「デザイン時に意識するポイントは、全体のバランスと情報の見やすさ」だと思っています。

というのも、パターンを蓄えると飽きの来ないデザインができたり、引き出しからさっとデザイン案を出して早い対応ができたりと良いことしかありません。ですが、どれだけデザインの引き出しがあったとしても要素同士のサイズや距離感、正しい配置、グルーピングといった全体のバランスと見やすさを調整できないと、Webサイトは閲覧しにくくなり一番大切な情報を伝えることができなくなってしまいます。

SEO視点で考える見出し文言の作成方法

すでに運用されているWebサイトの場合、サーチコンソールから検索ニーズを読み解くことや獲得したいキーワードでWebページを配信できているかをSEO視点で判断できます。

意図したカタチでWebページを配信できている場合は問題ありませんが、配信できていない場合は既存ページへのコンテンツ追加や新しいページの作成を行い、該当ページへ誘導するなどの対策が必要になります。

新しくWebサイト・Webページを立ち上げる場合、内容が正しい・充実しているからといって上位表示されるわけではありません。むしろ、コーポレートサイトやプロダクトサイトの場合は、検索上位に表示されているページの多くは記事サイトやサービスのまとめサイトです。そのため、新しくプロダクトサイトを作ったとしても課題が顕在化しており、企業名または製品名での検索以外での上位表示は難しいと思います。

ですが、SEOを意識して見出し作成を行うことでページを読み込んでもらえたり、ユーザーニーズを満たした検索結果を提供できたり、意図を読み取りやすい見出しを作成することは健全な施策であると考えています。

例えば、以下のようなアプローチを実施したことがあります。

まとめ

以上です。
いろいろ書きましたが「見出しデザイン」も「見出し文言」も結局は、Webページを見てくれる人に取ってわかりやすい、使いやすいものであるのが一番だと思います。検索キーワードに合わせて、違和感のある見出しに変更して一時的に検索結果の上位に表示されても、意図が伝わりにくい流入ページは、きっと直帰が高くなります。

そうなれば、結局は評価が下がり「見にくいサイト」という認識だけが訪問者に残ってしまいます。
なので、これからも一緒にWebページを見てくれている人を念頭において、試行錯誤していきましょう。

Webデザインの目的

Webデザインの目的は、Webサイトの目的・企画を達成しやすくするためにビジュアルでユーザーにアプローチすることです。ターゲット（サイト閲覧者）を意識し、対象が感じる「見やすさ、伝わりやすさ、印象、理解など」を高めます。

Webサイトの目的

では、Webデザインが補助するWebサイトの目的はどのようなものがあるでしょうか？

「認知の拡大・印象を変えたい・見栄えを良くしたい・読みやすくしたい」など他にもありますが、やはり最終着地は売上の拡大です。信用や印象のためにという目的もありますが、それも信用や印象が売上に影響を及ぼすという判断からです。それらを踏まえたうえで、デザインの良し悪しについて

デザインの良し悪し

Webデザインの目的で話した『ターゲット（サイト閲覧者）を意識し、対象が感じる「見やすさ、伝わりやすさ、印象、理解など」を高めることができたか？』これに尽きると思います。「いいな！購入しようかな！」「わかりやすい！他にも何か知りたい情報あるかな！」など次への行動に繋げる事が重要です。

良いデザイン

• 保育園のサイトを見て、信頼できる安心できる印象を受けて見学会を問い合わせた。
• 動物園のサイトを見て、どんな動物がいて、特別な楽しみを知って訪問した。
• コスメのサイトを見て、世界観が理想にあっていて試してみたい気持ちになってトライアルを購入した。

悪いデザイン

• 50代以上を対象としているWebサイトなのに、文字が小さく見にくい。
• 旅行のサイトなのに暗い印象の色使いをしていて、楽しい旅をイメージしにくい。
• ネットショップなのに気になる細部のディティールなどの写真が無く購入に踏み切れない。

Webデザインに必要な習慣と経験と知識

最適なデザインをするために、他のWebデザインを見る

場面にあった、良いデザイン・最適なデザインをするためにまずは「見る」という行為が大切になります。

「見る」という行為は、ただ単に眺めるということではありません。デザインの背景にどのような意図や思いがあり、このデザインや構成にしているのか、スペースは何故この大きさなのか、この文字サイズは読みやすい、この色の組み合わせはキレイなどを考えながら見ることが重要です。

サイト閲覧をする際はビジュアルや業界から見たいジャンルを選択しやすい、まとめサイトやピンタレストなどがおすすめです。

人気のWebデザインまとめサイト

• SANKOU!様
• MUUUUU.ORG様
• Web Design Clip様

コーディングに関する知識

コーディング（マークアップ）は、デザインをWebサイトとしてインターネットで表示するために構築することを言います。「私はWebデザインがしたいからコーディングの知識は要らない！」という考えの方も、コーディングの知識を蓄えることによって、デザイン表現の可否を判断できたり、コーディング担当への実装相談ができるようになったりします。

この判断ができることと、相談ができることが業務をスムーズに進めるためには重要な要素です。例えば、良いデザインを作ることができ、クライアントの確認もクリアした後に構築段階で実装できない事がわかったとしましょう。めちゃくちゃ面倒ですよね？もし、実装できても追加の予算が必要になったり、残業続きになったらどうでしょうか？

コーディングの知識を蓄えておくと、このような面倒を回避することができます。

デザイン開始前の準備

では、実際にあなたがデザインを作成するとなった際、どのような準備をする必要があるでしょうか？

目的を確認

まずは、先述しましたWebサイトとデザインの目的を把握しましょう。

認知を拡大したいのか、印象を変えたいのか、はたまたターゲットの属性が変わったからそれに合わせてデザインを最適化したいのか。Webサイトの目的を把握し、デザインを見るターゲットはどのような人で、どのような悩みを抱えている人なのかを明確にディレクターやクライアントからヒアリングしましょう。

競合他社をチェック

競合他社をチェックすることで、市場におけるデザインのメジャーなサイズ感やあしらいを把握できます。

また、競合と比べた際の強みや弱みの把握、ワイヤーフレームにはないけど追加した方が良い構成の発見など強調すべき場所や抜け漏れの予防へ繋がります。追加した方が良い構成を発見した場合は、構成通りにデザインしてほしいディレクターと構成をより良くしてくれるアイディアを求めるディレクターがいるので、勝手にコンテンツを追加せずに一度相談しましょう。

デザインのルール・セオリー

野球やサッカーなどにもルールや戦術のセオリーがあるように、デザインにもルールやセオリーがあります。スポーツの場合はルールを守ることでゲーム性が高まったり、規律が守られます。そして実績のあるセオリーの戦術を取り入れることで得点を得る確率は高くなるでしょう。

デザインの場合も同様です。デザインはクリエイティブだから、「感性を大切にしたい」「個性を表現したい」などの強い思いもあるでしょうが、まずはルールに則って見やすく、使いやすく、わかりやすいWebサイトを作りましょう。

情報のグルーピング

グルーピングは、情報の整理整頓です。どこからどこまでが情報Aなのか、どこからどこまでが情報Bなのか。見た人がわかりやすいように情報をグループ化しましょう。余白をしっかりと確保して見やすいデザインにしましょう。

要素を揃える

要素を揃えることで見栄えが整えられ、コンテンツはグッと見やすくなります。見にくいWebサイトになってしまうと、記載している情報を理解することの難易度もあがります。

繰り返す

同じ要素は、デザインを繰り返すことで統一感を出して、見栄えを整えて見やすさを担保しましょう。

重要度を意識する

デザインをする上で、コンテンツの重要度を意識することは要素の主従関係に大きく影響します。大見出し、中見出し、小見出し、本文、補足文章、文章内のリンク、ボタンリンクなどを見てわかるようにデザインしましょう。

最後に

Webデザイン初学者向けにWebデザインの目的や考え方、意識するべきルールについても紹介しました。クリエイティブな職種の印象がありますが、基本となる考え方や作り方のルールやセオリーがあります。

基礎をしっかりと身に付け、基本ができる上で感性や個性をいい方向へ爆発させましょう。