こんにちは。livedoor でディレクターをしている有賀です。
今日のお題は、「人の目を引くクリエイティブ（ビジュアル基本編）」についてです。
前回の「ライティング編」でお話ししたように、私たちは日夜“一瞬で理解できるモノ作り”を試行錯誤しているわけですが、それとツートップとなるのが前回お話した「コピー（文字）」と、今回お話しする「ビジュアル（視覚表現）」です。
多くのユーザーは、ウェブページを見てから数秒で「見るべきものかどうか」を判断するというシビアなご時世。その数秒のほとんどは、実は、ビジュアルの印象で占められているのではないかと思います。
私もユーザーとしてサイトを見た場合、ページを開いてから一瞬で目にする構造（レイアウト）や色、形や動きなど、文字を読む前にインプットされる情報によって、多くの判断をしていることに気が付きます。
今回は、そんな「ビジュアル」についての概念を簡単にお話します。
ウェブサイト構築においての第一印象は、ファーストビューで決まると考えています。ファーストビューとは、そのページを表示したそのままの状態のことです。つまり、ブラウザで表示した最初に（スクロールせずに）見える範囲（＝First View）にあるもの、ということです。
ウェブでは、このファーストビューが第一印象そのものなので、ここに伝えたい重要な要素やイメージを凝縮することが、肝要になります。主要なナビゲーションなども当然、ここに配置されることが望ましいことになります。このファーストビューで気を引けない場合、当たり前ですがファーストビュー以外の部分や、訪れて欲しい次のページなどには、目を向けられないと考えなくてはなりません（とはいえ、ファーストビューになんでもかんでも詰め込み過ぎるのは得策といえません）。余談ですが、広告価値としてもファーストビュー内が一等地ということになります。
【関連リンク】livedoor.com の広告掲載について
〜livedoor の各コンテンツ毎の広告価格は媒体資料に掲載しています〜
さて、ここで問題になるのが閲覧者ごとに画面サイズが違うということ。これには“livedoor Blog PRO”などでもお馴染みの、アクセス解析が指標になります。利用者の大体の動向をアクセス解析結果からつかむことができます。この『livedoor ディレクター Blog』の場合、1280 x 1024ピクセル 環境での利用が4割弱、1024 x 768ピクセル 環境での利用が3割弱ということで、ブラウザのアドレスバーや余白を考慮すると、だいたい上部から600ピクセルぐらいが、大多数の利用者に向けてのファーストビューと定義してよいでしょう。
イタリア料理店の看板は、たいてい赤や緑ですよね。プールの底は水色、医療機関の内装は淡色……と、お決まりのような色使いは、どうやら偶然や慣習ではないようです。色彩にはそれぞれ意味があって、人間は直感でそれを察知します。
さらに美的・情緒的効果だけでなく、「理解しやすさ」や「見ていてストレスを感じない」など、色彩は機能的効果も持ち合わせています。ウェブ構築においても、当然それを計算しなくてはいけません。
livedoor には、各サービスカラーというものがあります。各サービス名の入ってる横に細長いバーがあり、それが基調色となっています。サービスカラーは、対象を想定しているユーザー層や関連ページとの関係を考慮して決めています。
【関連リンク】この色の名前はなに？ を教えてくれる『Name That Color』を紹介しているページ
ポータルサイトの運営には、多くのレギュレーション（制作規定）の遵守が義務付けられています。それは、livedoor 全体で一定の統一感を持たせることで利用者の使い勝手をよくしたり、開発自体をスムーズにする目的で制定されているのですが、一度決まったルールも、世情や技術進歩に合わせて日々議論を重ねて更新していくので、策定作業は終わりのない旅のようなものです。
そのなかでも、もっとも厳格なものが、livedoor ロゴのレギュレーションです。これは、サービスロゴの基本的な冠になると同時に、弊社のコーポレートロゴでもあるからです。
気を引くというと、「日付以外はすべて誤報」といわれるほどの『東スポ』に代表されるような、スポーツ新聞の見出しが真っ先に思い浮かびます。
これは、コピーワークの威力がものをいうデザインではありますが、やはり独特のテイストは視線を奪われます。ここでは、色彩の効果とともに、「ジャンプ率」という概念が奏功しているといえます。
ジャンプ率とは、もともと紙媒体の紙面レイアウトにおける用語ですが、簡単にいうと、「本文に対する見出しの大きさの違い」のことです。ジャンプ率とは、まさにメリハリのことで、重要でキャッチーな文字は極大で、それ以外を限界まで小さく、といった技法によって、躍動感や扇情感が醸成できるというものです。
【関連リンク】ジャンプ率とは（livedoor 検索）
ウェブページにおいて、人の目を引くためにビジュアルでできることとは？ ウェブの種類にもよりますが、「ファーストビューに流行のビジュアルモチーフを、色彩の意味を意識して、メリハリを効かせて」レイアウトすることだと思います。
もちろん、人の気を引いただけで、実効コンテンツが伴ってなくては本末転倒なわけですが、そもそも人の目を引いて認知してもらわないことには、どんなに素晴らしい（と思っている）サービスも意味がないわけです。ですから、ウェブディレクターは、サービス自体の設計の基幹部分に、「人の気を引くこと」を入れて、日夜、試行錯誤しているわけです。
今後とも、livedoor および『livedoor ディレクター Blog』をよろしくお願いします。
今日のお題は、「人の目を引くクリエイティブ（ビジュアル基本編）」についてです。
前回の「ライティング編」でお話ししたように、私たちは日夜“一瞬で理解できるモノ作り”を試行錯誤しているわけですが、それとツートップとなるのが前回お話した「コピー（文字）」と、今回お話しする「ビジュアル（視覚表現）」です。
多くのユーザーは、ウェブページを見てから数秒で「見るべきものかどうか」を判断するというシビアなご時世。その数秒のほとんどは、実は、ビジュアルの印象で占められているのではないかと思います。
私もユーザーとしてサイトを見た場合、ページを開いてから一瞬で目にする構造（レイアウト）や色、形や動きなど、文字を読む前にインプットされる情報によって、多くの判断をしていることに気が付きます。
今回は、そんな「ビジュアル」についての概念を簡単にお話します。
【01】ファーストビューという一等地
ウェブサイト構築においての第一印象は、ファーストビューで決まると考えています。ファーストビューとは、そのページを表示したそのままの状態のことです。つまり、ブラウザで表示した最初に（スクロールせずに）見える範囲（＝First View）にあるもの、ということです。
ウェブでは、このファーストビューが第一印象そのものなので、ここに伝えたい重要な要素やイメージを凝縮することが、肝要になります。主要なナビゲーションなども当然、ここに配置されることが望ましいことになります。このファーストビューで気を引けない場合、当たり前ですがファーストビュー以外の部分や、訪れて欲しい次のページなどには、目を向けられないと考えなくてはなりません（とはいえ、ファーストビューになんでもかんでも詰め込み過ぎるのは得策といえません）。余談ですが、広告価値としてもファーストビュー内が一等地ということになります。
【関連リンク】livedoor.com の広告掲載について
〜livedoor の各コンテンツ毎の広告価格は媒体資料に掲載しています〜
さて、ここで問題になるのが閲覧者ごとに画面サイズが違うということ。これには“livedoor Blog PRO”などでもお馴染みの、アクセス解析が指標になります。利用者の大体の動向をアクセス解析結果からつかむことができます。この『livedoor ディレクター Blog』の場合、1280 x 1024ピクセル 環境での利用が4割弱、1024 x 768ピクセル 環境での利用が3割弱ということで、ブラウザのアドレスバーや余白を考慮すると、だいたい上部から600ピクセルぐらいが、大多数の利用者に向けてのファーストビューと定義してよいでしょう。
【02】第一印象はほとんど色彩で決まる
イタリア料理店の看板は、たいてい赤や緑ですよね。プールの底は水色、医療機関の内装は淡色……と、お決まりのような色使いは、どうやら偶然や慣習ではないようです。色彩にはそれぞれ意味があって、人間は直感でそれを察知します。
さらに美的・情緒的効果だけでなく、「理解しやすさ」や「見ていてストレスを感じない」など、色彩は機能的効果も持ち合わせています。ウェブ構築においても、当然それを計算しなくてはいけません。
livedoor には、各サービスカラーというものがあります。各サービス名の入ってる横に細長いバーがあり、それが基調色となっています。サービスカラーは、対象を想定しているユーザー層や関連ページとの関係を考慮して決めています。
【関連リンク】この色の名前はなに？ を教えてくれる『Name That Color』を紹介しているページ
【03】ポータルサイトのレギュレーション
ポータルサイトの運営には、多くのレギュレーション（制作規定）の遵守が義務付けられています。それは、livedoor 全体で一定の統一感を持たせることで利用者の使い勝手をよくしたり、開発自体をスムーズにする目的で制定されているのですが、一度決まったルールも、世情や技術進歩に合わせて日々議論を重ねて更新していくので、策定作業は終わりのない旅のようなものです。
そのなかでも、もっとも厳格なものが、livedoor ロゴのレギュレーションです。これは、サービスロゴの基本的な冠になると同時に、弊社のコーポレートロゴでもあるからです。
【04】人の気を引くビジュアル例
気を引くというと、「日付以外はすべて誤報」といわれるほどの『東スポ』に代表されるような、スポーツ新聞の見出しが真っ先に思い浮かびます。
これは、コピーワークの威力がものをいうデザインではありますが、やはり独特のテイストは視線を奪われます。ここでは、色彩の効果とともに、「ジャンプ率」という概念が奏功しているといえます。
ジャンプ率とは、もともと紙媒体の紙面レイアウトにおける用語ですが、簡単にいうと、「本文に対する見出しの大きさの違い」のことです。ジャンプ率とは、まさにメリハリのことで、重要でキャッチーな文字は極大で、それ以外を限界まで小さく、といった技法によって、躍動感や扇情感が醸成できるというものです。
【関連リンク】ジャンプ率とは（livedoor 検索）
【05】まとめ
ウェブページにおいて、人の目を引くためにビジュアルでできることとは？ ウェブの種類にもよりますが、「ファーストビューに流行のビジュアルモチーフを、色彩の意味を意識して、メリハリを効かせて」レイアウトすることだと思います。
もちろん、人の気を引いただけで、実効コンテンツが伴ってなくては本末転倒なわけですが、そもそも人の目を引いて認知してもらわないことには、どんなに素晴らしい（と思っている）サービスも意味がないわけです。ですから、ウェブディレクターは、サービス自体の設計の基幹部分に、「人の気を引くこと」を入れて、日夜、試行錯誤しているわけです。
今後とも、livedoor および『livedoor ディレクター Blog』をよろしくお願いします。
コメント