Web・モバイル業界専門　求人情報満載サイト【ウェブタント(Web担当)】

職種別求人情報: Webディレクター; Webデザイナー; htmlコーダー; ネットショップ運営; リスティング運営業務; 携帯サイト運営; WEB系一般事務; その他; 特集

渕上　雅己

大学卒業後、ウェブ制作の専門学校を経て、ネットショップに特化したウェブ制作会社に入社。ウェブデザイン、SEO（検索エンジン最適化）、SEM（検索エンジンマーケティング）、ユーザビリティ、アクセシビリティ、ネットショップ運営等を学びつつ業務を行なう。

2006年9月に独立し、MINCSを本格的に立ち上げる。現在、ネットショップ構築、(X)HTML+CSSによるマークアップ、 SEO対策などのウェブマーケティングを中心に業務を行う。

----------
サポタントのスキルアップ研修では、Dreamweaver、MT、SEOなどの講師を担当していただいています。
http://www.webtant.net/seminar/

キャッチイメージのコピーを読みやすくするポイント

準備中

全ての記事を見る

WEB制作会社で役立つPhotoshop活用術


	キャッチイメージのコピーを読みやすくするポイント

こんにちは！今回から連載を受け持つことになりました、ミンクスの渕上と申します。

毎回、ネットショップのページ制作、ウェブ制作に使える、Photoshop のネタをご紹介していきます。ぜひご活用いただけると嬉しいです。

さて、第１回目は「キャッチイメージのコピーを読みやすくするポイント」です。

ネットショップで目につくのが「キャッチイメージのコピーが読みづらい」というもの。

「ネットショップは見た目が９割！」と言っても過言ではないくらい、第一印象というのは大事です。カナダの大学の研究では、「人がウェブページの内容を判断するのは 0.3 秒」とまで言われています。

つまり、キャッチイメージ＆キャッチコピーでお客さまのハートをしっかりつかむことが、売上アップ／顧客獲得につながるのです。

そのことを踏まえて、以下の画像を見ていきましょう。「焼き鳥セット」を販売しているページのキャッチイメージです。

まず、以下のコピーをキャッチイメージに使うことにします。

背景が「白」であれば、コピーは問題なく、読むことができますね。では、このコピーをそのまま、キャッチイメージの画像に載せてみましょう。

せっかく、美味しそうな焼き鳥の写真が使われているのに、コピーはほとんど読むことができません。これでは、せっかくお店に来ていただいたお客さまもガッカリして帰ってしまいます。

そこで一工夫して、コピーを読みやすくしてあげましょう。

まず、「コピーに境界線を設定する」

キャッチコピーのレイヤーにおいて、「レイヤースタイル」から「境界線」を設定してあげることで、キャッチコピーに境界線が設定されます。背景画像とキャッチコピーとの間に区切りができるので、コピーが読みやすくなりました。

次に、「境界線のかわりに『光彩』を使う」方法

「境界線」でキャッチコピーを読みやすくすることはできますが、メリハリがつきすぎる印象も与えます。

「境界線」のかわりに「光彩（外側）」の設定を使うことで、境界線を背景となじませ、高級感を演出することができます。

最後に、「コピーの背景を塗る」方法

キャッチコピーの背景に「長方形ツール」で長方形を描くことで、キャッチコピーが読めるようになります。

そのままでもコピーが読み取りやすくなりますが、「塗り」の値を「０％」に設定し、「レイヤースタイル」のグラデーションオーバーレイ」で、背景色にグラデーションを加えたり、不透明度を調整して背景を少し透過させると、より高級感を演出することができます。

キャッチイメージにコピーを載せる時、「どうも読み取りづらい」とか、「もっと高級感を出したい」という際に、コピーに一工夫を加えることでキャッチコピーと商品とのメリハリを生むとともに、商品画像の印象を良くすることができます。