本文にCTAを設置する場合は？どこに入れればいいの？

前回はCTAを設置する場所をWEBページ全体の構成から考えてみました。
ヘッダーやファーストビューに設置すれば、サイトに訪れてすぐコンバージョンへ誘導することになります。
最後まで読んでもらえれば、フッターに設置されたCTAも印象的になりますが、途中で離脱される可能性もありますね。
どこに置けばいいのか、悩みどころです。
今回は、本文の中にCTAを設置する場合のポイントについて谷宜樹と考えてみましょう。

■本文の上に入れる？下に入れる？

CTAはヘッダーやフッターのような本文の外に置くだけでなく、中にも置くことができます。
Aという記事とBという記事があるとして、それぞれの記事の途中に入れたり、AとBのサムネイル画像と並べて入れたりする方法があるでしょう。
例えば、記事の途中で入れたい時。
「そんなことでお困りなら、ぜひ弊社にご相談を」という一文の下に「見積もり依頼」というCTAボタンが設置できます。
記事一覧に入れるなら、いくつかの記事を並べた後に「もっと見る」というCTAボタンを設置し、これをクリックすると定期購読の申し込みページに移動する、というのも考えられますね。
効果的なCTAにするにはボタンの文字よりも、前後の内容を魅力的にするべきだと谷宜樹は思います。

■CTAボタンがありすぎると…

本文中に何度も「資料請求はこちら！」というボタンが出てきたら、ユーザーはどう思うでしょうか。
「しつこいな…もう見るのはやめよう」と離脱してしまうかもしれませんね。
また、「お問合せはこちら」「詳しくはこちらをクリック」「まずは資料請求」とCTAボタンが乱立しているのもちょっと怖いですね。
CTAボタンは最小限にして、クリックしてから移動したページの中でユーザーが選択できるような仕組みにすると良いでしょう。
ただし、高額商品や定期購入の場合は、段階的なCTAの設置が効果的である場合もあります。
例えば、化粧品の商品購入を促すページでは、「単品で購入する場合はこちら」「お得な定期便はこちら」など、複数の選択肢をCTAボタンで表示しているでしょう。
複数使う場合はメインのCTAボタンを決め、それに付随するものがメインを引き立てるようなデザインにすると良いですね。
例えば「資料請求はこちら」を大きなボタンで表示し、その下に「無料お試し」「簡単見積もり」「お問合せ」の小さいボタンを並べるというのが谷宜樹のおすすめです。

今回はCTAを本文の中に入れるとはどういうことなのか、谷宜樹がお話しました。
CTAボタンのデザインも重要ですが、どこに入れるかもかなり頭を悩ませるポイントだと思います。
次回は、CTAボタンのデザインについて詳しく見ていきましょう。

CTAはどこに設置する？WEBページ全体から考えてみよう

前回は、「CTA」についての概要を解説しました。
私たちWEBデザイナーは、サイトのイメージに合わせてCTAボタンのデザインを考えています。
今回は、谷宜樹がCTAボタンを設置する場所についても解説していくので、サイト運営者の方はぜひ参考にしてみてくださいね。

■どこに設置したらいい？効果的な場所は？

「資料請求」「ご注文はこちら」などのボタンを設置するならどこが良いと思いますか？
ページの一番上、ヘッダーでしょうか。
それともページの一番最後に出てくる方が良いでしょうか。
サイトによって異なりますが、一般的によく置かれている場所にはこんなものがあります。

・ヘッダー
ページの一番上に表示される部分です。
ここに会社のロゴや、ホーム画面・企業説明・注文・お問合せなどの子ページに移動するボタンを設置することが多いでしょう。
どこにCTAを設置しようか迷ったらとりあえずヘッダーに置いておく、という人もいます。

・フッター
サイトページの一番下です。
最近では企業のイメージや会社の外観とともに、電話番号・住所（アクセス方法・駐車場の案内など）をデザインするホームページをよく見るようになりました。
その下に「予約はこちら」「お問合せメール」などのボタンが設置されています。

・グローバルメニュー
ヘッダーに組み込んで使うメニューバーです。
どのページに移動しても常に表示されるため、ユーザーが「注文したい」と思った時にすぐCTAボタンを探し出すことができます。
コンバージョンに誘導するために最も効果的で簡単ではないかと谷宜樹は思います。
グローバルメニューがないと、1ページ1ページを確認しながら探さないといけないのでとても不便です。
特に企業サイトは、これを設置するのが必須かもしれません。

・サイドメニュー
ページの右側・左側に表示されるメニューです。
ページ数が多いサイトの場合、一覧にして目的のページを探しやすくすると良いでしょう。
サイドメニューをお問合せページにして、ユーザーが入力した内容によって表示するページを変えるのも面白いですね。
例えば、保険会社のホームページなどは、サイドメニューに簡単なアンケートを載せ、該当する項目にユーザーがチェックするとおすすめの保障内容が表示される仕組みになっています。
これで「オンライン見積もり」というコンバージョンが1つ達成できますね。
上手く考えたな…と谷宜樹も思いました。

・ファーストビュー
サイトにアクセスした時に、一番初めに出てくる場所です。
スクロールしなくても見えている部分ですね。
ここに「初回無料！」とか書いてあれば、ついクリックしたくなります。
まずCTAボタンを堂々と設置し、その下で詳しい説明をするというのも1つの手です。

CTAを設置できる場所は、他にもあります。
今回はWEBページの構成全体から考えてみました。
次回は、本文の上下、中に盛り込んでいく方法について見ていきましょう。

「CTAボタン」とは？どんなデザインが効果的？

WEBページの構成についての解説で、谷宜樹がお話した「CTA」を覚えていますか？
サイトの閲覧者に注文やお問い合わせをしてもらうために、「注文はこちら」などのボタンを設置することがあります。
これが「CTAボタン」ですね。
このボタンをどこに設置するかによって、商品購買率が変わることもあります。
今回は「CTA」のデザインについて谷宜樹と見ていきましょう。

 

■「CTA」とは？「コンバージョン」とは？

サイトの閲覧者に商品購入や会員登録、お問合せなどの行動を促すものを「CTA（Call To Action）」といいます。
また、WEBデザインによく使われる用語として「コンバージョン」もあるので併せて覚えておいてください。
「コンバージョン」はサイトの閲覧者が商品の購入や資料請求などの行動を起こした状態のことです。
閲覧者が行動を起こせば「コンバージョンを獲得」「コンバージョンしてもらう」なんて言い方をします。
この「行動」とは、サイト側が目標としているものです。
例えば商品を販売しているサイトであれば注文入力、サブスクリプションのサービスであれば会員登録、学校などのホームページであれば資料請求などがコンバージョンの対象になります。
「コンバージョンを獲得するために、CTAが設置される」と覚えましょう。

■CTAボタンのデザインを考えよう

より多くコンバージョンしてもらうには、CTAボタンを効果的なデザインにする必要があります。
商品の購入が目標であれば購買意欲をかきたてるデザインに、会社の資料請求であれば信頼感を持たせるデザインにすると良いですね。
トレンドのファッションアイテムを取り扱うECサイトなどは、メルマガの購読を促すCTAボタンにカラフルなデザインをすることもあります。
ビジネスマン向けのスーツ・ネクタイブランドではブルーやネイビー、若い女性向けのカジュアルファッションではパステルカラーなど、サイトの閲覧者が好みそうな色を選ぶと効果的ですね。

■どこに配置すれば良い？

「商品を購入したいけれど、どこで注文すれば良いか分からない」
「気になる会社があって質問したいんだけど、連絡先が分からない」
ということがあると、閲覧者は不便さを感じます。
サイト側もせっかくのコンバージョンのチャンスを逃してしまうことにもなりますよね。
ユーザーが使いやすいと思うのは、欲しいと思ったその時にCTAボタンが出てくるというサイトでしょう。
今サイトを閲覧している人が何を思っているのか察知するのは不可能（AI技術が搭載されていればできるかもしれませんが…）なので、WEBデザインをする際にある程度の予測を立てる必要があります。

「CTA」や「コンバージョン」はWEBデザインでよく出てくる用語なので、ここで理解しておきましょう。
次回はCTAの設置場所について、谷宜樹が詳しく解説していきます。

色が与えるイメージは？テーマカラーは効果的なものを選ぼう

前回、色には「色相」「彩度」「明度」という3つの要素があると解説しました。
WEBデザインをする時は、この3要素を上手く調節しながらページのイメージカラーや文字の色を決めていきます。
今回は、色が持つイメージや、その色が与える効果などについて谷宜樹がお話していきましょう。

■色のイメージとは？食欲がわくのはどっち？

色が与える効果を体感するために、ちょっとイメージしてみてください。
熱々のステーキがお皿に乗っていて、これからシェフが仕上げのソースをかけます。
ソースは2種類。
同じ味ですが、真っ赤なソースと真っ青なソースです。
どちらのソースをかけた時の方が美味しそうに見えるでしょうか。
赤やオレンジ、黄色などの暖色系は、食欲を増進する効果があると言われています。
反対に、青や紫などの寒色系は、食欲を抑える効果があります。
同じ味だと分かっていても、赤いソースがかかっている方が美味しそうに見え、青いソースがかかっている方はちょっと不気味かもしれませんね。
これは、自然界にある食材では青や紫のものが極端に少ないためだと言われています。
トマトやパプリカ、レモンが料理の付け合わせによく用いられるのも、この色の持つ効果が理由です。

■色が与える効果の例を見てみよう

WEBデザインでは、色が与えるイメージをサイトのテーマカラーに利用しています。
例えば、彩度を高くした鮮やかな赤は購買意欲をかきたてるために使います。
「限定○点！」とか「まとめ買いセール」という言葉には赤い色が多く使われているでしょう。
赤は興奮や衝動を促す効果があり、元気になったり、期待感をあおったりすることができます。
この色を広告で使えば、より「買いたい」という気持ちを盛り上げてくれますね。
反対に、青は落ち着いたイメージのある色です。
爽やかさや知的なイメージがあり、見る人を冷静にする効果もあります。
製薬会社や保険会社の企業紹介でよく使われる色であり、信頼感や安全性をイメージさせるでしょう。
また、紫は日本では古くから高貴な色として用いられてきました。
高級感や上質さをイメージさせる色です。
高級ブランドのサイトや、大人の女性向けのサイトによく使われます。
また、神秘的なイメージもあるので占い・スピリチュアル関係のサイトにも効果的ですね。

谷宜樹の会社でも、色の持つ効果を考えながらWEBデザインをしています。
サイトがどのようなジャンルの内容を取り扱うのかによって、使う色を選ぶことが大切です。

テーマカラーを決めよう！WEBデザインに必要な色の属性とは？

WEBページをデザインするうえで、テーマカラーを決めるというのはとても重要です。
気まぐれに色を決めていると、ちぐはぐな印象になったりまとまりがない文章に見えたりします。
また、目に飛び込んでくる色の情報が多すぎると、見ている人が混乱してしまいます。
まずは、持たせたい印象やテーマに合ったイメージを考えて、WEBページのメインカラーを決めていきましょう。
今回は、谷宜樹がWEBページで使われる色の考え方について解説していきます。

■色の属性を理解しよう！

WEBページなどに使われる色は、「色相」「彩度」「明度」の3つによって印象が変わります。
それぞれどんな特徴があるか見てみましょう。

・色相
「赤」「青」などの色の区別のことです。
「赤みがかかった」「青ざめた」「緑がかった」という表現があるように、色相は色味と色調を左右します。
例えば、同じピンクでも赤みが強ければ明るいピンクに、青みが強ければ紫にも見える暗いピンクになりますね。
また、色相には「色相環」というものがよく使われます。
「赤・オレンジ・黄色・黄緑・緑・青・紫」という虹のようなものをイメージしてみてください。
近い色を順番に並べていって輪にすると、色相環ができあがります。
対になっている色は真逆の性質を持つ色、「補色」です。
例えば赤と緑、黄色と紫、オレンジと青は補色の関係になります。
補色を使うことでお互いの鮮やかさを強調することができるでしょう。

・彩度
色の鮮やかさ、くすみを表します。
彩度を高くすれば、より鮮やかになります。
「ビビッド」と表現されることもありますね。
鮮やかな色味にすれば、人の目を惹く効果があるでしょう。
彩度を低くすれば、くすんだような落ち着いた色味になっていきます。

・明度
色の明るさ、暗さを表します。
彩度はその色の濃さが変化しますが、明度は色に当たる照明の強さが変化するイメージです。
明度を上げれば明るい色になっていき、どんどん白に近づきます。
反対に明度を下げれば暗い色になっていき、どんどん黒に近づきます。

■クライアントからの指示を理解しよう

WEBデザインでは、クライアントから一度提案したデザインの変更を求められることもあるので、色相・彩度・明度の意味を正しく理解しましょう。
例えば、ピンクを
「色相はそのままで、明度を上げてほしい」
「色相を青よりに変更、明度は下げてほしい」
という要望があります。
それぞれどんな風に色が変わるのか想像できますか？
編集ツールでは色相・彩度・明度をスライドバーで調節できるものがあります。
実際に使ってみて、どんな風に色が変わるのか確かめてみましょう。

今回はWEBページのデザインの基本、色に関連する解説でした。
次回からも、谷宜樹がWEBデザインの要素をお話ししていきます。