色とマーケティング

新商品のマーケティング戦略を検討するとき、消費者への視覚的アプローチは極めて重要な要素です。

特定の商品を購入した理由として、85%の顧客が色が主要な理由であると認識しています。

色とブランディング

色がブランドの認知度を80%向上させます。

色と消費者

色はデザインの重要な要素のひとつです。しかし、全世界において共通しているとは言えません。北アメリカで注目されやすい色がインドでも同じとは限りませんよね。下記は北アメリカのオンライン消費者への色の働きです。

黄色

楽観的・若々しさ。ウィンドウショッピングをしている人の注意を集めるために使われます。

赤

エネルギッシュ。心拍数を高める色。緊急性があり、セール中の商品に使われます。

青

信頼と安全の色。銀行や企業のメインカラーとして使われます。

緑

裕福・リラックスを連想させる色。目に優しく、一連のプロセスを容易に見せます。

オレンジ

活発・活動的な色。「購入する」「購読する」などのCTAボタンに使われる事が多いです。

ピンク

ロマンチック・女性的な色。若い女の子や女性に向けたECサイトで使われます。

黒

パワフル・滑らか・光沢など。高級な商品を扱うサイトで使われます。

紫

落ち着き・静けさを象徴する色。美容系の商品に使われます。

また、色は特定のタイプの消費者を引き寄せる力、消費者の行動を変える力を備えています。

その他の要素

消費者の行動に影響を与えるのは色だけではありません。ECサイトのデザインではキャッチコピーや利便性も関係してきます。

全体のデザイン

多くのオンライン消費者が操作性・ユーザビリティの悪さやサイト全体のデザインの悪さを理由に商品を購入しません。

動作スピードの効果

動作スピードの影響力と利便性は消費者をECサイトへと導く理由のひとつです。サイトの動作がライバル社より5秒でも遅ければ大きな損害となり得ます。

言葉の力

企業は消費者を誘導する言葉の力に期待を寄せています。消費者が商品を購入するとなった時、同じ商品でも有力なキャッチコピーは他店との違いとなります。

ECサイトのみならず、商品のマーケティングにおいて色は重要な役割を持っていますね。衝動買いの消費者・予算内の消費者など、タイプによって色が与える力というのもなかなか興味深かったです。過去記事の「ECサイトをデザインする時の8つのポイント」もあわせて読んでみてくださいっ

元記事: How do colors affect purchases?

1. 背景のマリオを十字キーで操れるサイト！【Nihilogic】

2. Webデザイン: デザイン会社のWebサイト45。デザイン会社なだけあって素晴らしいセンスです。

3. IE9のスクリーンショットが流出？

4. livedoorのサイトが美しく変わったみたいです。広告の量で見た目がかなり違いますね。

5. グラフィックデザイン: 最新の技術をレトロな広告で宣伝！ギターヒーロー（8番目）に注目！

6. Photoshop: 無料のPhotoshopパターン2000個！どれから使おうか迷っちゃいます

7. 【速報】ハリウッド、YouTubeでの有料映画配信を開始へ！最新作でも500円以下に…

8. ネタ: どうでもよすぎるｗ iMacで未来的ヘルメット

9. Photoshop: 地味に使えるPhotoshopパターン16個

10. WordPress: クライアントに頼まれやすい機能を補えるWordPressプラグインいろいろ

Codaの特徴を簡単に

詳しい説明はリンクをクリックでジャンプします。

• Mac専用
• 美しいビジュアル
• 便利なプレビュー画面
• PHPやJavaScriptの動作確認も
• 素早いタグ打ちが可能
• 有料 9800円

はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて！ちなみに私はCoda英語版をインストールしているため、スクリーンショットが全て英語版のものとなっています。

美しいビジュアル

Dreamweaverはなんだかごちゃごちゃしたイメージがあるのですが…（私だけ？）、Codaのデザインはすっきりシンプル。Apple Design Awardにも輝いています！

サイトのサムネイル画像。ペタッと貼り付けた感じがかわいい。

» CodaのWebサイトから体験版をダウンロード！

Codaの特徴 目次へ。

便利なプレビュー画面

画面を分割

Codaの最大の特徴（たぶん）として、自由に画面レイアウトを設定できる機能があります。Dreamweaverでも分割できるのですが、HTMLファイルを開いていたなら、そのコードビューとデザインビュー（WYSIWYGモード）のみ。CodaだとHTMLファイル・CSSファイル・プレビュー画面が一度に表示することができます。

右上の分割アイコンで分割。デフォルトでは横分割ですが、オプションキーを押しながらクリックすると縦分割できます。また、環境設定からオプションを押さなくても縦分割できるように設定できます。

↓分割する方法を簡単に説明。初めて動画を作った＆Youtubeにアップした…どきどき。

コマンドキーと 1-6 でもモードを切り替えられます。コマンド＋２、コマンド＋３はエディターとプレビューを切り替えるのでとても便利！

いろんなブラウザーでチェック

プレビュー画面の右上にあるブラウザーアイコンを長押しするとプレビューするブラウザーを選択できます。し・か・も、VMWare Fusionをインストールしている場合、IEで確認もできます！（IEが起動します）詳しい方法は 「VMWare 上の Internet Explorer でプレビューする」が参考になります。

ホームにジャンプ

ツールバーの「サイト」にある 「ホームページを表示」を選択するとダイレクトに設定されたルート URL にジャンプ。何気に便利。

» CodaのWebサイトから体験版をダウンロード！

Codaの特徴 目次へ。

PHPやJavaScriptの動作確認も

プレビュー画面で、Dreamweaverではまったく表示されなかったPHPやJavaScriptの動作を確認しながら作業できます。jQueryも！動くんです！

追記: Dreamweaver CS5の「ライブビュー」機能を使うとPHP、JavaScriptの動作確認ができます。Adobeさん失礼しました！

Hello World！PHPがうまく表示されない場合は「動的にローカルの内容をプレビューする 」が参考になります。

複数行まとめてコメントアウト。オプションキーを押しながらドラッグするとブロック編集モードになり、行のはじめに文字を入力すると、選択された範囲のすべての行に同じ文字が入力されます。エスケープで解除。

» CodaのWebサイトから体験版をダウンロード！

Codaの特徴 目次へ。

素早いタグ打ちが可能

基本のタグ打ち

これはカスタマイズされたDreamweaverでは実現可能と言えますが、一応紹介。例えば<div>と打つと閉じタグも同時に挿入されたり、ヒントもスムーズに表示されます。

画面下の「クリップ」をクリックすると、よく使うフレーズやタグが表示されます。「挿入」をクリック、またはドラッグ&ドロップで挿入可能。自分で好きなタグを登録することもできるので、自分仕様にカスタマイズできます！

書式 > カラーパネルを表示 から色のパレットを表示できます。色をドラッグ＆ドロップでWebカラー16進数の数値が表示されます。

WordPressモード

プラグインもいろいろでてます。Dreamweaverでいうエクステンションですね。こちらはWordPress用タグが簡単に挿入できるプラグイン「WordPress Mode」。書式もしくは画面左下のギアアイコンの 構文モード からWordPressを選択するとヒントが表示されるようになります。

Zenコーディング

Zenコーディングのプラグインが「Tea for Coda」という名前で配布されています。F1キーで展開できます。Zenコーディングの詳しい使い方は「知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた」がわかりやすいです。

» CodaのWebサイトから体験版をダウンロード！

Codaの特徴 目次へ。

他にもFTPサーバーにアップロードするのが簡単！リファレンスブックを登録できる！ターミナルがついてる！値段もDreamweaverの49,875円に比べて格安です！15日間無料体験版があるので、ぜひ試してみてください！さよならDreamweaver！

1. iPhone4購入から1ヶ月｜失ったもの、そして得たもの

2. HTML5: HTML5を使った55のWebサイト。参考になります。

3. Webデザイン: 1つのページでインパクト大！シングルページのWebサイトいろいろ

4. グラフィックデザイン: 日本では実現不可能…？インパクトのある履歴書のデザインいろいろ

5. ロゴ: 洗練された美しい企業ロゴ30

6. CSS: 画像と同じく美しい！CSSで作った27のアイコン・ロゴ

7. Googleチャットから電話がかけられるようになったので試してみたよ！

8. Webデザイン: ECサイトの美しい商品写真とその見せ方いろいろ

9. 著作権フリーフォトサイト19と紹介されてるけど著作権フリーじゃない件

10. Webデザイン: クリエイティブな企業Webサイトいろいろ。その会社の特徴がひと目でわかりますね。

お助けコードを使う前に

今まで動いていたのに突然動かなくなった！そんな時は慌てず、とりあえず以下を確認してみてください。プラグインが原因で動作しなくなる事が多いですね。

• 有効化しているプラグインをすべて無効化して試す
• </head> の前に <?php wp_head(); ?> があるか
• </body> の前に <?php wp_footer(); ?> があるか
• PHPコード（特にif構文）に間違いはないか

上記で解決できない場合は以下のコードをチェックしてみてください！

jQueryが動かない！

WordPressにはjQueryやPrototypeなどのJavascriptライブラリーもデフォルトでインストールされています。コンフリクトを避けるため、jQuery使用の際は $ の代わりに jQuery を使いましょう。

$("p.neat").addClass("ohmy").show("slow");
// ↑この＄部分を jQueryに。

jQuery("p.neat").addClass("ohmy").show("slow");

jQuery.noConflict(); を使ってもOKです。

$j=jQuery.noConflict();

$("p.neat").addClass("ohmy").show("slow");
// ↑この＄部分を $j に。

$j("p.neat").addClass("ohmy").show("slow");

Pタグ（パラグラフタグ）が邪魔！

WordPressで記事やページを作成すると自動的に <p> でくくられちゃいます。それを取り除くには wp-includes/default-filters.php にある add_filter('the_content', 'wpautop'); と add_filter('the_excerpt', 'wpautop'); を探してコメントアウトします。

// この２つをコメントアウト
// add_filter('the_content', 'wpautop');
// add_filter('the_excerpt', 'wpautop');

特定の箇所のみPタグを無効化

the_content(); の直前に remove_filter を記述して特定の箇所のみPタグを無効化できます。

<?php remove_filter ('the_content', 'wpautop'); ?>
<?php the_content(); ?>

コンタクトフォーム7のPタグも邪魔！

同じくPタグ関連。こちらはプラグインの「コンタクトフォーム7」に自動挿入されるPタグを無効化します。wp-confing.php に下記コードを挿入すればOK。

define( 'WPCF7_AUTOP', false );

ページ送りが動かない！

「次のページへ」をクリックしても次に行かない、プラグイン「WP-PageNavi」を有効化してもうまくページ送りできない、example.com/page/2 ←直接URL書いても表示されない…そんな時は if(have_posts()): の部分に下記を追加してみてください。

<?php if (have_posts()) :  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts( $query_string . "&paged=$paged" );  ?>

複数のページ・投稿を同時に表示したいのに！

WordPressを完全CMS化し複数のページや投稿を並べて表示していると、query_posts でIDを指定していても、先に表示したページ・投稿が表示されてしまう事があります。例えば今見ているこのページ。記事に続いて「関連する記事」「コメント欄」が表示されています。関連する記事を表示する際、クエリーをリセットしないと、コメント欄にはこの記事に対するコメントではなく、「関連する記事」で表示された記事に対するコメントが表示されてしまいます。endwhile; と endif; の間にリセットするコード wp_reset_query(); をサクッと入れておきましょう。

<?php endwhile; wp_reset_query(); endif; ?>

もっと詳しいコードは過去記事「プラグインを使わずWordPressに6の機能をつける」の「2. 関連する記事を表示する」が参考になります。

Moreタグが動かない！

同じく複数のページや投稿を並べて表示していると、Moreタグの設定をしていても「続きを読む」が表示されず、全文表示されてしまう事が。私が陥ったケースでは全ページのヘッダー下に「Welcome message」というタイトルのページコンテンツを表示、続いて各記事のタイトル・コンテンツを表示していました。すると「続きを読む」が表示されず、記事の全文が表示されちゃいました。global $more; で無事解消。

<?php global $more; $more = FALSE; ?>
    <?php the_content('続きを読む'); ?>
<?php $more = TRUE; ?>

サムネイル画像のパスが必要！

WordPress 2.9からサムネイル画像の設定が簡単にできるようになりました（WordPress 3.0からはアイキャッチと呼ばれているらしい）。詳しい設定は「WordPress 2.9 の新機能の投稿サムネイル画像の使い方」が非常にわかりやすいです。サムネイル画像を出力する時は the_post_thumbnail(); を記述すればいいのですが、画像のパスが必要だったり、クラスやIDをつけたい場合は下記コードを参照してみてください。

$thumb = get_the_post_thumbnail($post->ID);
$pattern= "/(?<=src=['|\"])[^'|\"]*?(?=['|\"])/i";
preg_match($pattern, $thumb, $thePath);
$theSrc = $thePath[0];

if($thumb == ''){
　　echo '<img src="sample.jpg" />'; // サンプルの画像を表示
} else {
　　echo '<img class="thumb" src=" '.$theSrc.' " />'; // サムネイル画像をクラスを付けて表示
}

ログインしたユーザーのみコンテンツを表示したいのに！

サクッと動作確認したい時にも便利なこのコード。if で囲んだ部分はログインしたユーザーにのみ表示されます。

<?php if (is_user_logged_in()) : ?>
　　ここにコンテンツなど
<?php endif;?>

その他、みなさんが命拾いしたお助けコードがあればぜひ共有しましょう！