デジタルマーケティングにおいてデザイナーが持つべき2つの視点

より優れたデザイナーになりたい –– 現状のスキルに対して、漠然とした不安を抱えている方も多くいらっしゃるでしょう。自身の制作物に合点がいかない理由として、やはり「ビジュアル」に関するデザインスキルが不足していると感じているのではないでしょうか。そして、改善策を誰かに相談してみても「経験を積む」という強引な落とし所へ陥りがちではないでしょうか。

しかし、デジタルマーケティングにおけるデザイナーにはデザインスキル以外にも求められるものがあります。それが、プロジェクトにおける戦略や目的への理解です。

このブログでは、デジタルマーケティングにおいてデザイナーが持つべき2つの視点にフォーカスします。デザインスキルの向上だけでない、“デザイナーとしての成長”に繋がる考え方をご紹介します。

designers-2-perspectives-for-digital-marketing-1

1. 上流工程へのコミットメント

デザイン上の課題を把握する

まずは、プロジェクトの最上位にある「目的」を把握しましょう。プロジェクトにおけるすべての行動がこれに基づくからです。例えば「購入促進」が目的であれば、そのKPI(中間指標)は「eコマースへの誘導率」などが考えられるでしょう。プロジェクトの目的とKPIを理解することで、デザインにおいて「eコマースへの誘導ボタン」が“プライオリティ”の高い要素であると導かれます。そして、行動を喚起すること(CTA = Call To Action)もまた必要不可欠となります。

designers-2-perspectives-for-digital-marketing-2

トーン&マナーを定める

次に「ターゲット」の理解です。ターゲットのデモグラフィックやインサイトを理解することで、デザインにおける“トーン&マナー”を決定する為のキーワードを抽出することができます。

例えば、商材を男性用カミソリとした場合。ターゲットのデモグラフィックが10代〜20代男性の学生・社会人であれば、「男性的」「若々しさ」などのキーワードが考えられます。そして、彼らのインサイトが「肌へのケア」を求めているのであれば「潤い」「マイルド」といったキーワードも浮かび上がるでしょう。その結果「フォントをゴシック体にする / 斜体にする / キーカラーを青にする」「水しぶきや水滴など水のモチーフ / 緩やかなグラデーション」などトーン&マナーのルールが次第に定まり、実作業の指針となります。キーワードが明確になることで“デザインの理由”を言語化することもできるようになります。それによって、ディレクターやクライアントに対してのデザイン提案もより説得力を増すでしょう。

designers-2-perspectives-for-digital-marketing-3
designers-2-perspectives-for-digital-marketing-4
シック ブランドサイト

このように、プロジェクトの「目的」「ターゲット」を理解することで、デザインにおける“プライオリティー” “トーン&マナー”を明確にすることができます。

2. デザインだけでない、アウトプットに対するコミットメント

さらにデザイナーは、ビジュアルだけでなくフロントエンドまで目を向けることで貢献の幅を広げられます。前述にもある通り、プロジェクトの「目的」や「ターゲット」を理解している事で、その内容をデザインだけではなくフロントエンドにも活かす事ができるからです。

フロントエンドによる「戦略」のサポート

上流工程を理解したことで戦略上必要なデータを蓄積できるようなウェブサイト設計を行えます。例えば、アンケートでAと回答したユーザーがどのコンテンツに対して興味を持っているかというデータも、スクロール値や時間など条件を組み合わせることで想定することができます。「Aという回答にどのようなコンテンツが共鳴するか」というデータは、次回施策の精度を高める上で非常に価値あるものです。フロントエンドにおいても、上流工程を理解することでプロジェクトに貢献することが可能なのです。

“トーン&マナー”をさらに豊かに

アニメーション実装によりデザインの強化も行えます。パララックスを用いればビジュアルに奥行きが生まれ、世界観の表現に厚みが生まれることで“説得力”が増すでしょう。イージングをとってみても、easeOutはエレガントさであったりスマートさを、BounceやElasticはポップさを表現することができます。WebGLやGLSLを用いれば、その圧倒的な表現力でユーザーの体験はよりリッチなものになるでしょう。

designers-2-perspectives-for-digital-marketing-5
リプトン スイーツティー デジタルプロモーション

上流工程への理解はデザインやエンジニアリングそれ単体だけでなく、“プロジェクトにおけるアウトプット”として包括的にクオリティを向上することに繋がります。

Design is not just what it looks like and feels like. Design is how it works.

「デザインは“単に”どのように見えるかや感じるかでなく、どのように機能するかである」と、かのスティーブ・ジョブズは言葉を残しています。ビジュアルとしての美しさはもちろん向上に努めるべきですが、“アウトプットを担う”ことに対してのマインドを確立することで、デジタルマーケティングにおけるデザイナーとしてプロジェクトの成功(目的の達成)へと大いに貢献できるのではないでしょうか。

グラフィックデザイナーに学ぶ、表現の幅を広げるためのヒント

デザイナーとして日々の制作に向き合っていると、自分のデザインにマンネリを感じることはありませんか。クライアントや商品が変わっても同じあしらいをよく使っていたり、アクセントの付け方が似ていたり。もちろん自分の中で定番のデザインがあることは、効率的でもあり、デザインの個性とも言えます。しかし、そのマンネリを抱えたままで良いのでしょうか。

そこで今回は、Webの領域から少し視野を広げて、ビジュアルコミュニケーションの源泉とも言えるグラフィックデザインから、表現の幅を広げるためのヒントを探ります。

現在フリーランスで活躍されているアートディレクター/グラフィックデザイナーの横山 徳(よこやま のり)氏をFICCにお呼びし、勉強会を開催しました。普段どのような考え方でデザインを制作し、またどのようにその表現力を身につけているのか。Web制作にも活かせそうなヒントを伺いました。

expand-designing-expression-with-graphic-design-tips-2
お互いの実績を紹介し合い、気になったポイントを質問しながら進行しました。

”◯◯っぽい” を大切にする

expand-designing-expression-with-graphic-design-tips-3
スウェーデン大使館で行われたイベント告知のロゴ、招待状、パンフレット。招待状の文字部分にはホログラム加工がされており、紙にはロゴの色を取り入れた8枚の合紙が使われている。

Q.このロゴは何をイメージして作られたんですか?

— 横山氏 「一言で言うと、オーロラっぽいロゴにしようと思いました。誰もがスウェーデンと聞いて思いつく3番目くらいまでのイメージに、オーロラがあると思います。アウトドアというトピックを扱うイベントだったことや、北欧の持つ柔らかい国民性やデザインと、この有機的なフォルムは相性がいいと思ったんです。」

この「オーロラっぽいロゴ」とあるように「◯◯っぽい」というフレーズは、横山氏の説明の中で頻繁に登場し、柔軟な表現のために欠かせない感覚であるという事が見えてきます。

例えば、書体を選ぶ時でも、一般的な使用例や固定概念に縛られて、つい「こういう条件で選ばなければいけないのでは…」と硬く考えがちですが、「この書体は◯◯っぽい」というシンプルな直感を大切にし、一度発想を解放し自由に考えてみましょう。そうすることで、表現の幅が広がる可能性があります。発想のきっかけは、たとえどんなに単純で些細なものでも良いのです。

また「◯◯っぽい」という感覚のバリエーションを増やすには、普段から物事を観察することが大切です。物事をよく観察し、出来るだけたくさんの特徴を見出すことで、特徴のストックが記憶の中に蓄積されます。特徴のストックが多ければ多いほど「◯◯っぽい」という感覚が養われ、バリエーションも増えていくはずです。

<大衆的な視点も意識する>
自身のオリジナリティを大切にする一方で、大衆的な視点も意識することが必要です。「これを見たらほとんどの人はこう感じるはず」といった大衆的な視点も持ちあわせることで、多くの人に受け入れられながらオリジナリティの光るデザインになるでしょう。横山氏はこの相対する2極のバランスを、案件の特性によって変えていて、それを検討する事にかなり時間を使うそうです。

デザインのアイディアを100案出してみる

Q. デザインのアイディアはどのように出していますか?

— 横山氏 「まずはアイディアを出す前に、案件の根本にあるものを掘り下げます。掘って掘って、掘った先にある、その案件が生じた根本的な原因を見つける。そしてその原因を解決するためのコンセプトを考えます(既にある場合は照らし合わせます)。割合的には手を動かす時間は3割くらいで、考える時間の方が圧倒的に多いです。

expand-designing-expression-with-graphic-design-tips-4

そこからコンセプトに沿ってキーワードを出していきます。キーワードから連想されるイメージを考えつく限りラフで描き起こし、描いたラフから別のイメージが生まれれば、またそれを描いていきます。

expand-designing-expression-with-graphic-design-tips-5

平均で100案近く作ってみて、それらを地道に検証する方法が多いですね。文字との組み合わせを検証したり、徐々に細部の検証へと移っていきます。」

大事なのは、すぐに形に起こす作業に入るのではなく、アイディアの元となるコンセプトを固め消化し切ることが重要です。このプロセスを経て出されたラフのアイディアは、コンセプトの核心を突きブレの少ないものとなるはずです。そしてアイディアを大量に出してみて、それらのアイディアの中から精選していくことで、より精度の高い表現へと仕上げることができるでしょう。100案というのはひとつの指標として捉え、とにかく一度アイディアを出し尽くしてみましょう。

<アイディア出しの環境を変えてみる>
横山氏はその都度、アイディアを出すのに最適な環境を作って、インプットしやすい状態に身を置いてるとのこと。BGMや場所を変えてみたり、そのアイディアに近しい印象の環境に身を置いてみたり、または逆のイメージの環境で考えてみるそうです。

デザインから離れる時間を作る

Q. 制作が行き詰ったことはありますか?その時はどんなことをしますか?

— 横山氏 「全然あります(笑)そんな時は思い切って一旦手を止めて、一切何もしません。もしくは気分転換に映画や動画を見たりします。時間を置いてからまたそのデザインを見ると、良くなかった部分が見えたりしますね。がむしゃらに制作を進めていた頃に比べて、今は良くも悪くも制作をスムーズに進めれるようになった。それでも一旦デザインから離れる時間を作って、多面的にコンセプトや表現について、俯瞰しながら考え直す時間を作るようにしています。」

時間に余裕があれば、数日間そのデザインを見ずに別の作業をしましょう。時間がなければ、制作順序を工夫したり、画面を遠くから見てみるだけでも違います。いかに自身のデザインを客観的に見れるかが重要です。

毎日、少しずつ表現のトレーニングをする

expand-designing-expression-with-graphic-design-tips-6
1日1案、グラフィック作品を制作し、365日分を納めた3冊の本。一枚一枚全て違う種類の紙を選び、印刷技法にもこだわっている。デザイン表現への挑戦が随所に感じられる。

この本を作ろうと思ったきっかけは何ですか?

— 横山氏 「表現のリサーチをしていると、挑戦してみたい技術や表現方法がたくさん出てくる。でも、挑戦してみたいからといってそれをクライアントワークにはめるのはただのエゴになってしまう。とはいえ、実践したい気持ちや表現は溜まっていく一方で…。

そこでライフワークとして一度アウトプットしようと思って作り始めたのがきっかけです。見るだけじゃなく体現したほうが身になりますし。スクラップブックの延長のようなものですね。

そんなきっかけで始めましたが、あとに引けなくなって気付けば毎日作るようになりました。作品数もたまってきたので、ファイリングしようと思ったんですが、せっかくなら全部違う紙を選んで製本までしちゃおうかなと。そんな風に作りながらイメージが膨らんで完成しました。今でもこの時のトライアルがかなり役に立っていているので、やって良かったと思っています。」

こうした日々のトレーニングは、表現の幅を広がることはもちろん、デザインの瞬発力も上がります。もしあなたが限られた時間の中で、より高いパフォーマンスを発揮したいと思っているのであれば、日常的にアウトプットする時間を10分だけでも作り、いつでも表現のアイディアを出せるよう瞬発力を養いましょう。

しかし、いきなりそういったアウトプットに落とし込めないという人もいるかと思います。そんな時はアウトプットの一段階手前のトレーニングとして、日常的に自分の好きなデザインを分析する癖をつけると良いでしょう。例えば、ふと目に止まったデザインがあったとして、そのデザインはなぜあなたの目を止めさせたのか、そのデザインの構成や要素を分析していくと、必ず理由があるはずです。その理由を発見できれば、自分でアウトプットするための手がかりとなるはずです。

まとめ

expand-designing-expression-with-graphic-design-tips-7

ビジュアルコミュニケーションの源泉とも言えるグラフィックデザインの考え方は、様々な分野のクリエイティブにおいても共通項が多く、応用できる事が多いと言えます。

— 横山氏 「これまで様々な分野に挑戦していますが、全てのクリエイティブに共通する部分は必ずあって、それはとても単純なものであると思います。伝えたいこととそれを伝える方法を探り、それに対して最適なコミュニケーション方法を創る。グラフィックデザインは、どんなコミュニケーションであっても常に重要な役割があり、そこで培ってきた軸は、活動する場が広まっても非常に太いと感じています。」

グラフィックデザイナーでもWebデザイナーでも、領域は違えど、デザインをする上での共通項は多く、新鮮で有益なヒントがたくさんあります。Webデザインの新たな表現を考える上で、グラフィックデザインの領域に目を向けてみるのも有効な手段ではないでしょうか。


横山 徳(よこやま のり)
http://noriyokoyama.com/

2007年 多摩美術大学美術学部グラフィックデザイン学科卒業。デザイン制作会社勤務後、2010年フリーランスへ転身。アートディレクション・グラフィックデザイン・イラストレーションを軸にWeb・映像・空間等多岐にわたり活動。

デザイナーがワイヤーフレーム作成時に気をつけるべき6つのポイント

Webサイト制作時に作成する「ワイヤーフレーム」。デザイナーの方は、ディレクターからワイヤーフレームを受け取り、それを元にデザインに着手することが多いと思います。
では、デザイナーの方がディレクターにステップアップし、実際にワイヤーフレームを作成する側の立場になった際、どのような点を押さえておくべきでしょうか。“デザインのラフ案”のように作成してしまうと、トンマナを確認するものなのか、構成を確認するものなのかとクライアントが困惑してしまい、本来確認すべきポイントがかすんでしまうなどという事態に陥ります。
ワイヤーフレームの役割をきちんと理解した上で、プロジェクトの内容に応じて最適なワイヤーフレームを作成できるよう、基本的なポイントについて紹介します。

ワイヤーフレームはチーム全員のイメージを共有するツール

6-points-how-to-make-wireframe-by-designers-1

そもそもワイヤーフレームとは、これから作り上げるWebサイトの設計図としてクライアントやチーム内で視覚的に確認し、認識を合わせるためのものです。決して「デザインの方向性を確認するもの」ではありません。ここをきちんと理解していないと、クライアントとのミーティングの場でもデザインの話に終始してしまい、このタイミングで確認すべきポイントを見落としてしまいます。

制作フェーズの前に確認すべきポイントをワイヤーフレーム上で押さえておく事ができれば、それだけ制作フェーズでの抜け漏れを防ぎ、後々「思っていたものと違う」というようなクライアントからのフィードバックや、制作のやり直しで慌てるというような状況を回避できます。

ワイヤーフレーム作成時で気をつけるべき6つのポイント

<ワイヤーフレームに取り掛かる前に>

1. ターゲットを理解する

6-points-how-to-make-wireframe-by-designers-2

Webサイトには必ずコンテンツを届ける相手、すなわち「ユーザー」が存在します。ワイヤーフレームを作成する際は、そのコンテンツをどのようなユーザーに、どのようなコミュニケ―ションで届けるべきかを意識しましょう。

そのためには、プロジェクトの全体像を理解し、数あるタッチポイントの中での“Webサイト”の役割を理解しておくことがとても重要です。そしてWebサイトに対して、どのような経路で、どのようなターゲットが訪れるのかを踏まえ、作成を進める必要があります。

FICCでは必ず、プロジェクト全体の「パーセプションフロー」を作成し、Webサイトに訪れるユーザーがどのような“パーセプション”でサイトを訪問し、どのような“刺激”を受け、“行動”を起こすかを定義しています。このように、効果的なWebサイトを目指すには、ワイヤーフレームの作成前の段階からプロジェクト全体の戦略を理解しておく必要があります。
※パーセプションフローに関するブログ記事はこちら

2. ワイヤーフレームの役割を確認する

6-points-how-to-make-wireframe-by-designers-3

ワイヤーフレームの役割は、プロジェクトのタイプによって微妙に異なります。例えば、新製品を大々的に告知するためのキャンペーンページなのか、それともマイナーチェンジをした新製品を紹介するページなのか、それだけでもページの完成形は異なり、ワイヤーフレームの時点で確認すべきポイントにも少なからず影響してきます。

ビジュアルを大きく見せる、インタラクションを多用する、しっかりとテキストを読ませるなど、提案内容がクライアントやチームに分かるように作成しなくてはいけません。

また、確認ポイントをしっかり盛り込んだワイヤーフレームでも、クライアント担当者によっては情報過多な印象を受け、確認が億劫に感じられてしまうかもしれません。プロジェクトの進行状況やクライアント担当者のリテラシーによって、確認すべきポイントを絞り込むなどし、臨機応変にワイヤーフレームの形を変える必要があります。

<ワイヤーフレーム作成時に>

3. 一度情報を頭の中で整理する

6-points-how-to-make-wireframe-by-designers-4

まず基本的なポイントとして、クライアントから提供された情報をきちんと読み、自身の中で理解しておきましょう。もし資料の内容やクライアントの意向がユーザーにとって分かり辛いと感じた場合は、より分かり易くなるよう提案することも大切です。

自分の中で咀嚼できていないままワイヤーフレームに着手すると、何を伝えたいのかがしっかり表現できない上に、制作フェーズの段階で構成から見直す事態にもなりかねません。また、いきなりイラストレーターなどを使って描き始めるのではなく、一度紙に書くなどして頭の中でイメージをまとめてから着手すると良いでしょう。

4. プライオリティを明確にする

6-points-how-to-make-wireframe-by-designers-5

製品ビジュアル、リードテキスト、ボタンなど、ページの目的を踏まえ、何が一番に目立つべきなのかを明確にしましょう。ワイヤーフレームの段階で、誰が見てもそのページの目的やメッセージがはっきりと理解できるように作成しておくと、デザインの段階でのクライアントやデザイナーとの齟齬が少なくなります。

5. Call to Actionを明確にする

6-points-how-to-make-wireframe-by-designers-6

プロジェクトの戦略に基づいて、キャンペーン応募、会員登録、シェアなど、ページでユーザーにどのようなアクションをさせたいのかを定義し、Call to Action(CtA)を明確にします。
もしそれがボタンクリックなのであれば、ユーザーの行動を喚起できるような位置にボタンを配置します。ここをワイヤーフレームの段階できちんと定義しておくことで、デザイナーもデザイン時の参考にしやすくなります。

6. インタラクションの箇所を明確にする

6-points-how-to-make-wireframe-by-designers-7

Lightboxでのコンテンツ表示、パララックスサイトのスクロール、その他JSで構築できるインタラクションなど、Webサイトによってはインタラクティブな要素を多く盛り込むことも多々あります。さらにスマホサイトの場合、スワイプやタップをさせるなどのスマートフォン特有のインタラクションもあります。
こうしたインタラクションは、結果的にはモックアップで検証することが多いですが、ワイヤーフレーム作成時に予め考慮しておくことで、ユーザーアクションやシステムに関連する懸念点を洗い出す機会に繫がります。また、制作メンバーから技術的な意見を引き出すきっかけにもなり、Webサイトの精度を高めていくことができます。

まとめ

以上の点からもお分かりの通り、ワイヤーフレームを作成する上で求められるのは、Webサイトの目的を踏まえてコンテンツ設計を行う点、そして、プロジェクトのタイプや状況を踏まえてワイヤーフレームで担うべき役割をきちんと理解しておく点です。そして作成時の基本的なポイントを抑えることで、目的に応じた、より意義のあるワイヤーフレームを作成できるはずです。

デザインのディテールへのこだわりが必要な理由

もしあなたがデザイナーで、何らかのプロジェクトのデザインを任された時、何を基準にしてデザインを詰めればいいか不安になったことはないでしょうか。または、あなたがディレクターやプロデューサー側の立場で、デザイナーからあがってくるデザインの善し悪しを判断しなければならなくなった時、何を基準にして判断すればいいのか、基準が曖昧だったりした経験はないでしょうか。

デザインの善し悪しを判断する上で、判断材料となる項目は非常に多く複雑ではありますが、根本的に欠かせないものの一つが「デザインのディテール」です。どんなに素晴らしいストラテジーや目標を立てられたとしても、それが最終的に伝わるべき「イメージ」を持ち、正しい品質として「カタチ」となって表れてこなければ、誰にも伝わることはありません。

デザインのディテールとは何なのか、なぜディテールにこだわらなければならないのか。このブログ記事を通じて、デザイナー自身が自分のデザインに自信と確信を持って取り組めるようになれたり、デザイナーではない方々がデザインについて少しでも理解を深めていけるよう最初のきっかけになれたら幸いです。

デザインのディテールは「そのものらしさ」を表す

reason-why-detail-of-design-is-important-1

例えば、ブランディングやキャンペーンなどのプロジェクトでユーザーに何らかの体験をしてもらう必要があるとします。体験に入ってもらうためにはまず、キャンペーンのイメージを視覚的に伝える必要があります。キャンペーンがどういう性格で、どういう内容を持ち、どういうことができるのか、それらをイメージとして伝えられなければなりません。もし、イメージを正しく作れることができなければ、そのキャンペーンが何であるか、何が言いたいのかがユーザーに届かず、体験に入ってもらう前にユーザーのニーズとマッチすることができず、興味から外れてしまいます。最悪の場合、想定するイメージと全く違う誤解を受けたままプロジェクトが終了してしまうなんてことにもなりかねません。では、正しくイメージを作るためには何に注意すればいいのでしょうか。

ブランドやキャンペーンなどのイメージを生み出すものは、視覚的なデザインエレメントである「形状」「テクスチャ」「余白」などの一つひとつのディテールから生まれます。しかし、ただ単純に〇〇っぽいデザインエレメントを並べればいいというわけではありません。エレメント一つひとつのクオリティやエレメント同士の全体のバランスが一体となって一つのイメージを生み出しているのです。何か一つでも余計な要素があれば全体のイメージが大きく変わってしまう要因になります。最終的に自分たちのデザインが求めるイメージを表現できているか注意しましょう。

デザインのディテールは「品質」を表す

デザインのディテールは性格を表せるだけではありません。ブランドやキャンペーンの品質までも正確に表現することができます。よく陥りやすいことは、高品質な商品のプロモーションなのに、デザインのディテールが荒く作られてしまったり、求められる水準にまでディテールが研ぎすまされておらず、せっかくの高品質な商品が安いイメージで受け取られてしまうことです。そうなれば商品だけでなくブランド自体にも悪影響を及ぼしかねません。品質を正確に表現するためにも、デザインのディテールに注意しましょう。

そして、品質を表す要素は大きく2つあります。

1つ目の要素は、デザインエレメントそのものの精度を上げる方法です。世の中の著名なプロダクトは、必ず職人が手間をかけて一つひとつの素材から丁寧に作られていたり、有名なデザイナーが細部にこだわって設計されていたりします。それと同じように、デザインエレメントも素材一つひとつの精度を高めて作っていく必要があります。テキストのカーニングは正確か、オブジェクトのテクスチャの具合は不自然ではないか、ドロップシャドウの気持ちが良いと感じる分量はどのくらいか、必要なもの以外の余計なモノが入っていないか、など一つひとつを研磨していくことで全体の品質をコントロールすることができます。

reason-why-detail-of-design-is-important-2
ラグジュアリーブランド ティファニーのフォトグラフは非常にコントラストが高く、細部までハッキリとしたクリアなビジュアルで構成されています。製品の細部まで精密に映し出すことで、製品品質への信頼とティファニーブランドの美しさを表しています。
reason-why-detail-of-design-is-important-3
全く逆の例です。こちらはファストファッションブランドGUのロゴ。GUのファストファッションの性質や安価な品質を正しく表現しています。ただディテールを詰めてデザインの品質を上げればいいのではなく、どの段階で止めるか、その判断もブランドのパーソナリティを正しく表現するにはとても大切です。グラフィックデザインはあくまで視覚的情報伝達なので、このように嘘偽りなくブランドのイメージは正しく作られるべきです。

2つ目の要素は、デザインエレメントの組み方です。素材が完璧に仕上がっているなら、あとはそれらエレメント同士のバランスです。情報を詰め込み過ぎてはいないか、閑散としすぎてはいないか、グリッドのルールは統一されているのか、逆にルールがガチガチになりすぎて抑揚やリズムが失われてつまらない印象になっていないか。そういったことに注意しながら組み合わせていくことで、全体に決して単純ではない深みのある佇まいを醸しだせたり、余白を多めにとることで高級感を演出したりすることができます。そうしてデザインする対象の品質を表すことができます。

reason-why-detail-of-design-is-important-4
無印良品の雑誌広告のレイアウトデザイン。余白やグリッドガイドラインをうまく使い、無印良品の「省資源」「低価格」「シンプル」「匿名性」「自然志向」などのアイデンティティやヴィジョン、品質へのこだわりがレイアウトの配置だけで伝わってきます。

デザインのディテールは「優位性」を与える

デザインのディテールはイメージや品質を表しますが、その他に様々な影響を与えます。その一つが優位性です。現代社会のように、非常に似通った機能や性能を持ったプロダクトやサービスが溢れる時代において、デザインのディテールは他の競合する対象よりも強くその存在感を示し、人々に印象づけることができます。機能や性能はもはや、現代社会では差別化には繋がりにくい状況になってきています。そういった市場で生き残っていくためにも、競合するモノ達よりも、より特別で新鮮な体験を提供していく必要があります。デザインのディティールは特別な体験を生み出し、差別化や優位性を与えることができます。

reason-why-detail-of-design-is-important-5
グラフィックデザイナー大高 猛氏によりデザインされた日清食品 カップヌードルのロゴ、パッケージ。同じカップ麺ブランドの製品に比べて圧倒的に差別化され、世の中に認知されています。また、コンビニやスーパーで並べられた時にも、他の製品より格段に早く見つけることができます。

デザインのディテールは「強度」を与える

デザインのディテールの精度を高めることは、そのままデザインの強度を持つことにも繋がります。強度とは、ここでは2つの意味を指します。1つ目は、時代に左右されない、どれだけ時間が経っても対象の印象や鮮度がすり減らない、造形的な美的感覚を持ち合わせていることと、2つ目は、一つの目的・媒体のためだけに作られたデザインだとしても、Webやアプリケーション、紙やツールなど多用途に展開されてもすり減らない、印象や品質が変わらないことを指します。デザインに強度を持たせるために一つよい見方があります。それは、デザインが一つの造形物としての美しさ、品格を兼ね備えているかどうかを見極めることです。優れた美しさと品格を兼ね備えた造形物はたとえ時代や媒体が変わっても、素材そのものの品質として恒久的に衰えることはありません。歴史に名を残すグラフィックデザインやファインアートなどは、その高い水準の品格や強烈なイメージにおいて、今なお色褪せることはなく、新鮮さすら感じさせます。そして、逆にディテールへの配慮がないモノが、永くこの社会や人々の心に残ることはありません。ディテールへの配慮が、対象を社会に永く留まらせ、世の中に広げていく最良の手段となります。

reason-why-detail-of-design-is-important-6
日本のグラフィックデザインの父、亀倉 雄策氏によるグッドデザインのロゴ。1957年に制作され、約60年経った今でも一切古さを感じさせない、鮮度を持った造形です。そして多様な媒体に使用されてもシンボル自体の存在が薄れない、優れた造形物としての力強さも併せ持っています。

reason-why-detail-of-design-is-important-7
1986年に松永 真氏によりデザインされ、今も愛され続けている箱ティッシュScottie。国際コンペのパッケージのみのデザインから始まったが、パッケージを越え販促ツール、ロゴタイプ、さらにはブランドのCIへと発展され、その造形的な品格は今なお愛され続けています。

このようにデザインのディテールはイメージ、品質のみならず、優位性、強度など様々な効果を与えてくれます。 あなたが本当にクライアントやブランドのことを大切に思い、成果を出すために社会にしっかり対象を根付かせていきたいと思うのなら、最終的に形として表れてくるデザインのディテールについて理解を深め、それをカタチとして実現できるようにしましょう。

最後に、デザインのディテールに成り得る要素についてまとめてみました。これら一つひとつの項目も非常に専門知識や感性を必要とするものですが、経験値を詰まなければ何事も再現することはできません。これらのディテールを理解し突き詰めるのはもちろん、それらの最適な組み合わせのバリエーションなども目的に合わせて理解し、判断できるようにしておきましょう。

  • 形状
  • テクスチャー
  • タイポグラフィ
  • 写真
  • 映像
  • グラフィック
  • イラストレーション
  • レイアウト、グリッド、余白
  • モーション

勉強方法としては、それぞれの歴史や歴史の中の著名人の作品や解説を見て勉強するか、現在におけるそれぞれの最先端の人間の動向をチェックするなどがディテールへの理解に繋がります。

インサイトに基づくコンテンツプランニング

どんなに面白く,インパクトのあるものでも,感覚的に作られたコンテンツが大きな利益につながることはありません。視聴者・読者を購買へと導くためには,相手の徹底的な理解が不可欠です。しかし,速いペースで消費されるWeb・デジタルコンテンツに,多くの調査やプランニングのリソースをかけることはできません。コンテンツの費用対効果を高めるためには,製作者自身がインサイトに基いたコンテンツのプランニングを行うためのフレームワークが必要です。

“Always enter the conversation already occurring in the customer’s mind.” – Robert Collier

1930年代に活躍した作家・コピーライターのロバート・コリアーは,人を説得するコピーライティングの原理として,「既に顧客の心の中にある会話から始めよ」という言葉を残しています。日常生活の中で,ターゲットが抱えている不満を理解できれば,商品やサービスに興味を抱いてもらうために最適な伝え方を知ることができます。

ライフスタイル・インサイト

商品の購買動機には,その機能や特性に直接関係のないものが存在します。「情緒的ベネフィット」などと呼ばれるこの一見不合理な購買動機は,消費者が日常的に抱えている不満の解消を感じた時に発生します。この購買行動を左右する,日常生活の不満要素に対する理解を「ライフスタイル・インサイト」と呼びます。ターゲットに対する理解を十分に持った状態で次の質問に答え,ライフスタイル・インサイトを導き出します。

  • Discontent:ターゲットが日常的に抱えている不満は何か?
  • Anxiety:ターゲットが常に不安を感じていることは何か?
  • Agitation:ターゲットが焦り・動揺を感じていることは何か?
  • Anger / Irritation:ターゲットが怒りや苛立ちを感じているものは何か?
  • Fear:ターゲットが恐れているものは何か?
  • Despair:ターゲットが叶わないと思っている望みは何か?

フィーチャーとベネフィット

商品の特性(フィーチャー)を伝えるだけでは,該当するニーズを持った人物にしかアピールできません。商品に対する興味をより多くの人に抱いてもらうためには,それらの特性を便益(ベネフィット)に変換するする必要があります。まずは,ターゲットから見た,商品の主なフィーチャーをリストアップします。次に,先ほどのライフスタイル・インサイトを基に,フィーチャーをひとつずつ,ターゲットにとって価値のあるベネフィットに変換していきます。

  • Features:ターゲットから見た,商品やサービスの主な機能や特性は何か?
  • Benefits:ライフスタイル・インサイトを基に,それぞれのフィーチャーに対し,ターゲットが価値を感じるベネフィットは何か?

イシュー,コンセクエンス,ソリューション

人は主に,新たな便益を得るためではなく,目の前の問題を解決するために行動を起こします。購買行動を喚起するためには,ターゲットが解決したいと思う問題(イシュー),許容できない結果(コンセクエンス),商品が解決法(ソリューション)となる根拠を定義します。

  • Issue:ターゲットが解決したいと思う問題は何か?
  • Consequence:解決しないことで,ターゲットが許容できない結果は何か?
  • Solution:商品が問題の解決法となる根拠は何か?

バリア

商品の購入には様々な障壁(バリア)が存在します。すべての障壁を段階ごとに払拭することができなければ,消費者が購入に至ることはありません。商品特性の理解からその優位性の確信まで,バリアの払拭に必要な情報を洗い出します。

  • Understanding:商品特性を理解するために必要な情報は何か?
  • Relevance:商品が自分に適していると感じるために必要な情報は何か?
  • Credibility:商品品質を信頼するために必要な情報は何か?
  • Superiority:競合商品に対する優位性を確信するために必要な情報は何か?

コールトゥアクション

すべてのマーケティング施策は,相手の行動変化を目的としています。商品の特性や便益を伝え,ひとつずつ障壁を取り除いたとしても,自主的な購買行動の喚起(コールトゥアクション)には更なる刺激が必要です。特に,消費者が何のためらいもなく離脱することができるWeb・デジタルコンテンツには,できるだけ多くの行動喚起につながる情報を含める必要があります。

  • Minimum:求められる行動にかかる,最小の(時間や労力を含む)コストは何か? コストを最も少なく表現する方法は何か?
  • Value:行動によって得られる,コストを大きく上回る価値とは何か?
  • Urgency / Scarcity:直ちに行動を起こすことが,なぜ重要なのか? どのような希少価値があるのか?
  • Loss:行動を起こさなければ,どのような損失につながるのか?
  • Action:相手はいつ,どこで,どのように行動を起こせば良いのか?

多くのWeb・デジタルコンテンツは,製作者の感覚に基づいて作られ,商品の特性や強みを一方的に伝えるだけにとどまっています。しかし,効果的なコンテンツを作るためには,受け手側の視点に立ち,必要となる情報を客観的に整理しなければいけません。視聴者・読者を徹底的に理解し,相手の優先事項に働きかけることで,行動を喚起し,目的の達成が可能になります。コンテンツのプランニングを行う際は一度,上記20の質問に答え,相手の説得に必要となる情報を洗い出してみてください。

広告クリエイティブのアイディエーションプロセス

クリエイティブな広告は、マーケティングメッセージに溢れた環境の中で消費者の注目を獲得し、新しい手法で広告主の課題を解決するものです。クリエイティビティとは「未だ見ぬものを形にすること」であるとも言われています。独創的であり、既存のアイディアに依存しないものがクリエイティブであると言えるでしょう。

ideation-and-creativity-1

しかし、新規性だけがクリエイティブの定義ではありません。二つ目の側面として有用性があげられます。マールボロマンの広告で有名なレオ・バーネットは、クリエイティビティを「本来無関係なものの間に、新たな有効な関係を確立する技術」と定義しました。広告の場合、消費者にベネフィットを伝えるということが広告主にとって有要な価値であると考えられ、優れた広告クリエイティブは「新しい方法でベネフィットを伝える」ものと定義できます。

従来、クリエイティブは、コピーとアートワークの組み合わせによってもたらされるものでした。しかし、現在では、ソーシャルメディアなど、消費者がクリエイティブに参加できるタッチポイントや、様々なテクノロジーなどの要素も含まれるようになり、クリエイティブの幅は大きく広がっています。

クリエイティブの要素

優れたクリエイティブには4つの要素があるとも言われます。広告クリエイティブの有効性を評価する4-Dモデルには次の4要素が含まれます。

  1. 新規性(想像性・独自性・革新性・斬新性・驚き)
  2. 有用性(有意味性・説得力・戦略性・記憶容易性)
  3. 影響力(好感度・情緒的な魅力・共感性)
  4. ユーモア
ideation-and-creativity-2

すべての広告が必ずしもクリエイティブである必要はありません。特定の情報を伝えるだけの広告も多く存在します。しかし、効果的な広告クリエイティブの多くは上記の4要素を含むものが多いため、4-Dモデルは優れたクリエイティブの評価基準であると言えます。

クリエイティブのプロセス

『アイデアのつくり方』の著者、ジェームス.W.ヤングはクリエイティブのプロセスを5段階に分けています。

  1. Ingestion 情報を収集する
  2. Digestion 目的と収集した情報を理解する
  3. Incubation タスクから離れ、無意識下で情報を組み合わせる
  4. Inspiration アイディアを発見し、理解する
  5. Verification アイディアを評価し、実現に向けて改善・開発する

エージェンシーではアイディエーションをグループで行うことが一般的です。ブリーフやリサーチの内容を共有し、複数のメンバーが異なる視点からソリューションを考える「ブレーンストーミング」が一般的ですが、誰もが過去の知識や情報をもとに考えるため、新規性が重要である広告クリエイティブには適していません。より効果的な手法として、イノベーション・コンサルティングを提供するSIT社のサブトラクション、マルティプリケーション、アトリビュート・ディペンデンシーなどがあります。商品の構成要素や消費者の可変要素などを分解し、1つずつその状態を変化させることでアイディアを生み出して行くシステマチックなプロセスです。

ideation-and-creativity-3

サブトラクションでは、商品やサービスが提供する体験の構成要素を分解し、重要なものを1つ取り除きます。商品が提供するエモーショナルなベネフィットなどを描くのに効果的です。上記のハインツの例では、最も重要なケチャップのボトル自体を映像から無くし、「幸せな食卓」というベネフィットを演出しています。MazdaのBe a Driverも同じような方法で考えられたのかもしれません。

ideation-and-creativity-4

マルティプリケーションも同様に体験の構成要素を分解しますが、今度は1つの要素を増やします。ポイントは増やしたことによって定量的ではなく、定性的な変化を起こすことです。上記のAXEの例では香りに惹かれる女性が無数に登場します。この場合、ベネフィットは「もっとモテる」ではなく、「最も」または「モテすぎる」というものです。ベネフィットを大袈裟に表現する際に効果的です。

ideation-and-creativity-5

アトリビュート・ディペンデンシーでは、広告の対象となる商品やサービスの構成要素(内的要素)と、消費者や市場などの可変要素(外的要素)を分解し、洗い出します。その一つひとつをシステマチックに掛けあわせ、新たなベネフィット表現の可能性を検証します。既成概念を取り払って考えるため、ブレーンストーミングよりも多くのアイディアが生まれます。また、過去のクリエイティブの模倣にならず、クリエーターが既存のイメージにとらわれることもありません。テレビネットワークの例ではホッケーの試合を試聴する回数と、ユーザーの強さ(痛みに対する耐性)をつなげています。一見全く無関係なものをつなげ、新しいベネフィットを見出す手法は、世の中のイノベーションの3分の1を生み出しているとも言われています。

ideation-and-creativity-6

内的要素と外的要素に加え、チャネルの次元を足すことにより、インタラクティブな企画のアイディエーションにも使えます。上記のパンテーンの例では、製品の「効果・仕上がり」「天候・気温」と「アプリ」を掛けあわせ、「どんな天気でも美しい髪でいられるアプリ」を作り出しています。

ideation-and-creativity-7

クリエイティブのプロセスはアイディエーションだけではありません。エージェンシーだけでなく、広告主や(リサーチなどを通じた)消費者を含めた、各ステークホルダーのコンセンサスを得ながら開発を進める必要があります。広告クリエイティブの制作は、複数のステークホルダーによるインプット、アウトプット、評価が必要となる複雑なプロセスであるため、アトリビュート・ディペンデンシーのようなロジカルなアイディエーションプロセスと、4-Dモデルのような客観的な評価方法が採用することが効果的であると言えます。

2014年のWebデザイントレンドと本当に必要とされるデザインと手法

去る6月25日(水)、竹橋マイナビルームにてマイナビ様が主催する「Creator’s Career Lounge(以下、CCL) vol.6」が開催され、FICCから戸塚、福岡、冨田、STANDARD社から鈴木 健一氏が登壇しました。「Webデザイントレンドの潮流」をテーマに、これまでのWebデザインが歩んだ歴史と背景、そして現在Webの現場で活躍するWebデザイン技法について、約2時間に渡った講演の内容を振り返ります。

web-design-trends-for-2014-1

スライド

デザインには目的がある

web-design-trends-for-2014-2

大前提として、ここでお話しする「デザイン」とはただのスキンやその作り方だけの話ではありません。「買ってほしい」「知ってほしい」「シェアしてほしい」などの目的を達成するための手段がデザインなのです。目的が変わればデザインも変わります。そしてWebサイトを取り巻く環境の変化によって目的もまた変化してきました。

環境の変化、要求の変化、デザインの変化を振り返る

まずWeb制作の環境の変化を、FICCが設立された2004年を起点に振り返ります。2004年のFlash全盛期から2006年のWeb動画登場で一気にリッチコンテンツに傾いていった一方、2005年のmixi、ブログブーム、その後のソーシャルメディア勃興とIT分野の発展も目覚ましく、広告・サービスが平行して時代が進みました。

しかし2008年、iPhoneの登場によってWeb制作の現場は一転。FlashからHTMLへ、Web制作の潮流が一気に変わります。iOSの特徴的なスキューモーフィックなデザインはWebの世界に流入し大きなトレンドに成長しました。やがてスマホの普及とバリエーションの増加、さらにタブレットの登場でターゲットととなる閲覧環境が分化していった、これが現在に繋がるWeb環境の変化でした。その時代を反映するように、Web制作のトレンドが発生し、変化していったのです。

ただの流行ではないフラットデザインの意義

web-design-trends-for-2014-3

現在のWebデザインにおいて最も特徴的なトレンドと言えば「フラットデザイン」でしょう。iPhoneの流行とともに世界を席巻したスキューモーフィックデザインでしたが、現在はそれを塗り替えるかのようにフラットデザインが主流となっています。なぜこのような変化がWebデザインの現場に起きたのでしょうか。大きな要因の一つとしてコストの問題が挙げられるのではないでしょうか。スキューモーフィックデザインでサイトを一通り作るとなるとボタン一つを制作するにも時間と労力がかかります。また現実にある楽器のツマミをスクリーン上で再現しても実際につまんで操作できるわけでもないように、リアリティのあるデザインがユーザビリティの向上に結びついていたのか疑わしい部分もあります。ボタンがボタンとしてユーザーに理解できるのであれば、スキンがリアルであれフラットであれ効果は変わらないはずなのです。

web-design-trends-for-2014-3

ではフラットデザインの利点とは何でしょうか。それは解像度にデザインが左右されないという点です。iPhoneの登場以降、ブラウザ内で拡大・縮小を行えることが当たり前になり、Retina解像度を持つスマホや、画面サイズの異なるタブレットの登場により、「ピクセルパーフェクトなデザイン」を行うことが理に適わなくなってきました。CSS上で再現できる、解像度に囚われないデザインとしてフラットデザインは非常に適しています。余白を使ったデザインであるところが情報の整理にもなり、そして自然とコンテンツを引き立てるデザインであることも人気に繋がった要因ではないでしょうか。

web-design-trends-for-2014-5

一方でフラットデザインにも苦手とすることがあります。

web-design-trends-for-2014-6


冨田「同じキャンペーンサイトをフラットデザイン、スキューモーフィックデザインそれぞれでデザインしましたが、フラットデザインでは “盛り上がり感” の演出に欠ける部分があります。情報整理と演出、それぞれのデザインの良いところを適宜利用するのが望ましいのではないでしょうか」

フラットデザインはあくまで器であり、そこに入るコンテンツをどう伝えるかを一番に考える必要があるのではないでしょうか。

レスポンシブデザインは自由のために自由を捨てている?

1つのHTMLソースで複数のデバイスでの表示に対応したサイトを作る「レスポンシブデザイン」。既に多くのサイトで取り入れられている技法です。1ソースでページを管理することによるコストの低減を目的とすることが多いレスポンシブデザインですが、本当に低コストでのサイト制作に繋がるのでしょうか?

web-design-trends-for-2014-7

コストを下げる要因としては「ワンソースなので管理がラク」「(UAなどを使った)事前のページ振り分けを考えなくていい」という2点が挙げられます。ウィンドウ幅だけでビューを変えることができるからこその大きな利点です。一方コストを上げる要因になりうるのが「デバイスによってコンテンツを大幅に変えることができない」「結局CSSを書く総量はさほど変わらず、むしろ保守が難しくなる可能性がある」「JSの対応に注意」「各種ブラウザ対応(特にIE)」です。扱い方を誤れば手数が増えてしまう可能性があるのもレスポンシブデザインの特徴です。コンテンツの性質もあわせ、事前にレスポンシブデザインに適したサイトであるか確認する必要があるでしょう。

レスポンシブデザインの目的はそもそもマルチデバイス対応です。マルチデバイスに対応したサイトの作り方は他にもあります。まず「viewportを固定しサイトを拡大・縮小して表示」する方法です。iPhoneのサイトがスマートフォン対応をしていない、というのは有名な話ですが、そもそもスマホブラウザは拡大・縮小が標準の機能となっています。むしろレスポンシブデザインで拡大・縮小機能を殺してしまうことで、ユーザビリティが低下する可能性だって考えられるのです。文字サイズを大きく設定する(16px以上が目安)など読みやすさを向上させる工夫を施しましょう。また「そもそもスマートフォン向けサイトだけを作る」という発想もあります。最初から小さいスクリーンサイズに向けて作れば、PCでも表示できるわけです。ファーストフードの短期キャンペーンなどでよく見られる手法です。

web-design-trends-for-2014-8


戸塚「キャンペーンサイトでは、こうした方法で作成することも少なくないです。例えば、メインユーザーが若年層で、スマホユーザーが多いとか、予算の関係でPC版とスマホ版の両方は作れないというケースなど、必ずしもレスポンシブデザインが必須というわけではなくなってきました」

大切なのはまずユーザーがどのようにコンテンツを閲覧するか考えることです。レスポンシブデザインの採用を決めるのはその後に考えましょう。

楽しい?苦しい?「パララックスサイト」の使いどころ

web-design-trends-for-2014-9

突然降って湧いたように出現した「パララックスサイト」。ウィンドウスクロールに応じて演出を発生させる技法の総称として用いられていますが、そもそもなぜこれだけの流行を見せることになったのでしょうか?近年ではPCのトラックパッドの進化や、スマホの登場により、スクロールすることの抵抗感がなくなりました。するとクリックよりもスクロールの方がアクションのハードルが下がり、コンテンツをページに分割しない、1ページ完結型のサイトが増加しました。そんな中、クリックが発生しない中で演出を加えると考えると、スクロールにフックすることしか考えられなかったということではないでしょうか。

しかしスクロールに演出を加えたり、スクロールを制御したりする行為はユーザーから反感を買うこともしばしばです。挙動も重く、読み込み量も多いとなればユーザーは「不要な演出」と感じるでしょうし、スクロールをJSでコントロールすることで「いつものスクロール感覚と違う」気持ち悪さを感じます。パララックス演出はこの注意点を踏まえた上で導入を検討しましょう。

web-design-trends-for-2014-10

本講演ではスクロール量に応じた演出が入る「イベント型」とコンテンツをページに別けて表示する「ページ分割型」の2種類を定義しました。「ページ分割型」は演出というよりむしろ新しいUIの形と捉えてもいいかもしれません。スクロールは現代のWebサイトと切っても切れない大切な要素です。

Flash以後のリッチコンテンツ復権

Web広告の分野に置いてあれだけの存在感を放ったFlashも、iPhoneの普及によって追いやられてしまった現在。Flashの採用は少なくなりましたが、リッチコンテンツが再び増えつつあるように感じます。

web-design-trends-for-2014-11

canvasタグやWebGL、UnityといったFlashと競合となるテクノロジーの成長だけでなく、今までFlashできなかったアニメーション、映像、音楽といった演出がHTML5やCSS3、JSの組み合わせでも実現できるようになってきたことも背景にあります。

web-design-trends-for-2014-12

旧来のFlashサイトでは一つのFlashを全画面展開し、その中でコンテンツを描画するものでしたが、今ではHTMLにとけ込む形でパーツとしてリッチコンテンツを使う、というケースが多いのではないでしょうか。

リッチコンテンツが盛り上がるのはある意味2周目ともいえます。FlashがあれだけWeb広告の世界で熱狂して受け入れられていたところから一転、姿を消していったのは必ずしもiPhoneの登場だけとは言えないのではないでしょうか。リッチで思いも寄らない演出に気を取られ、Webサイトの本来の目的、結果と結びつくことを忘れてしまっていたということはないでしょうか。「カッコいいサイトならブランディングになる」という声もあるでしょうが、サイトの目的はブランディングだけでないということは明白でしょう。サイトの目的は何なのか、その中でリッチコンテンツはどういった役割を果たすのか、まず考えてみることが必要ではないでしょうか。

Webなのに?今求められる「エディトリアルデザイン」

Webサイトは情報を発信するメディアとして、第一党と言ってもいいほどの成長を遂げました。ソーシャルメディアの登場で「シェア」という情報伝播方法も加わり、SEO中心時代の「情報を置いておくだけ」の世界から「読み手を意識した情報」の世界へとシフトしています。さらに今までではWeb上にいなかった人が流入してきたことで需要と供給が増え、コンテンツを魅力的に見せる競争はさらに激化しているのが現状です。

web-design-trends-for-2014-13

そんななかフリーペーパーのようなレイアウトを持った情報サイトや雑誌の誌面がそのままコンテンツになったようなサイトなど、Web上で誌面を再現したようなデザインが増えています。ただ誌面を再現するだけでなく映像やインタラクティブな要素を加えることができるのもWebの強みです。ブラウザの進化やCSS、JSのノウハウの蓄積がこのようなレイアウトを可能にしています。今後もさらに魅力的なデザインのサイトが生まれてくるのではないでしょうか。

Webトレンドの背景に流れるもの

このような形で2時間ほどの講演を行いました。駆け足の内容ではありましたが、現在のWebの現場を賑わすWebデザイントレンドとその背景にある目的をおさらいすることができたかと思います。講演後Googleがリリースしたマテリアルデザインのように、Webトレンドは今後も次々に生まれていきます。その背景にはどのような目的があるのか考えていただければ嬉しいです。

web-design-trends-for-2014-14

今回このような機会にお声がけいただきましたマイナビ様、そして本講演ご来場いただきました皆様、本当にありがとうございました。

講演の最後に賞品争奪「フラットデザイン・カラーコード当てゲーム」を行いました。CreateJSを使いローカルで構築した本講演だけの特別なプログラムです。

5STEPでブランドイメージを的確に表現できるデザイン方法

Webデザイナーがブランドサイトをデザインするとき、求められる項目は多岐にわたります。目的や状況に応じて変化しますが、大きく分けて「ブランドイメージの的確な表現」、「競合との差別化」、「コンバージョンの達成」、「ユーザビリティ」などがあります。

品質の高いブランドサイトを制作するためには、これらの項目全てに応えなくてはなりません。しかし、経験の少ないデザイナーはほとんどの場合、これらの項目を全て一緒に考えてしまうため、そのサイトで何を達成したかったのか、分からなくなってしまいます。

全ての項目に的確に応えるためには、これらを一つ一つ整理し、順を追って制作していく必要があります。ここでは、その中で、まず最初に取りかからなくてはならない「ブランドイメージの的確な表現」について紹介します。

ブランドイメージを表現する際に達成しなければならない3つの要素

5-steps-design-brand-image-1

ブランドイメージを的確に表現するためには、表面的に優れたデザインを行うだけではありません。ただ魅力的な装飾を加えるだけではなく、ブランドのもつ価値を正しく理解し、ターゲットに伝えなければなりません。

それに加え、そのブランドの価値が本当にターゲットに求められているのかどうかも重要です。ターゲットが求めるイメージ像から極端に離れてしまえば、ターゲットは必ず違和感を感じて離脱してしまいます。

ターゲットに興味を持ってもらい、正確にブランドイメージを伝えるためには、ブランドのコンセプトとターゲットのイメージを結びつける必要があります。

また、表現するイメージが、競合する他のブランドと同じようにならないように注意しましょう。イメージが十分に差別化できなければ、ブランドのもつ製品やサービスの品質が、他社製品と同じように捉えられてしまい、パーソナリティが正しく伝わらなくなってしまいます。

これらのことを最初に意識し、正しい手順で制作することで、的確にブランドイメージが表現できるようになります。では、実際にどのように制作に落とし込んでいけば良いのでしょうか。

STEP1. 「ブランドがターゲットに提供できる価値」と「ターゲットがブランドに求める価値」をキーワードにまとめる

5-steps-design-brand-image-2

まず最初に、デザインに取りかかる前にデザインのリサーチに必要なキーワードをまとめます。キーワードをまとめる際、2つの視点が必要です。

まず1つは、「ブランドがターゲットに提供できる価値は何か」です。例えば、ケラスターゼというヘアエステティックブランドでは「美しい髪と心身ともにリラックスできる至福の時間」というものがブランドコンセプトです。そして、ターゲットに「プロフェッショナル」「高品質」「リラクゼーション」「テクノロジー」などを提供できます。これらを一度キーワードとしてまとめます。

2つ目は、「ターゲットがブランドに求める価値は何か」です。ターゲットは美しい髪になりたいと思い、「高品質な製品」、「リラクゼーションの体験」、「プロフェッショナルなサービス」などを求めてやってきます。それをキーワードにまとめます。

これら2つの視点から、お互いにマッチするキーワードを抜き出し、それをデザインリサーチに使います。ここで重要なことは、ターゲットが求めていないキーワードはターゲットに響かないということです。ケラスターゼでは「テクノロジー」がターゲットに提供できますが、ターゲットには「テクノロジー」のような専門的な情報はほとんど理解してもらえません。こういったミスマッチが積みかさなってしまうと、ターゲットは求めているイメージとの違いを感じ、離脱してしまいます。

このように、最初にキーワードを整理することで、ブランドの伝えたい内容を、的確にターゲットに届けられるようになります。

STEP2. キーワードに合うデザイン・ビジュアルをリサーチする

5-steps-design-brand-image-3

キーワードが決まれば、それに合うイメージ・スクリーンショットを集めます。私がよくアイコンやUIで参考にするのはdribbbleです。キーワードのテイストやイメージを検索する場合だとPinterest。webサイトではS5-StyleWeb Design Servedなどをよく参考にさせて頂いてます。

また、EmberなどでリサーチしたイメージやwebサイトのURLを保存し、蓄積できるようにしておきましょう。そうすることで、新しいプロジェクトをこなせばこなすほど、参照できるイメージが多くなり、表現の幅が広がっていきます。

リサーチする際のポイントとしては、タイポグラフィ・見出し・説明ビジュアル・特殊演出など、各エレメントがどのようにブランドイメージを際立たせているかを意識して集めます。どのようなタイポグラフィで見出しを組めば、目的とするブランドイメージを表現できるか、どのような色や形を使えば、どのようなイメージが生まるのか、それを意識して集めます。

STEP3. リサーチ結果をまとめる

5-steps-design-brand-image-4

リサーチしたイメージが集まったら、今度はそれをまとめます。まず、集めたビジュアルをSTEP1でまとめたキーワードごとにまとめ、最初に設定した表現するべきキーワードからブレないようにします。まとめ方は、イメージボードを作成し、視覚的に確認できるようにしましょう。そうすれば、他のプロジェクトメンバーに説明するときに、コミュニケーションがとりやすくなるので便利です。また、時間がないときでも、参考サイトのリンクをテキストエディタにをまとめたり、参考イメージをフォルダにまとめておくだけでも十分効果的です。

STEP 4. リサーチ結果をデザインに落とし込む

5-steps-design-brand-image-5

リサーチがまとまったらあとはデザインにおこすだけです。「メインビジュアル」「フォント」「カラー」「見出し」「レイアウト」「ボタン」「線」など、各エレメントを一つ一つキーワードに沿ってデザインしていきます。

□高品質で自信のあるイメージを表現するために、製品ビジュアルを堂々と大きくレイアウト。
□プロフェッショナル感を表現するために、配色を落ち着きのあるモノトーンに。
□リラクゼーション感を表現するために、各要素の余白を十分にとり、淡く優しい配色に。
□女性らしさを演出するために、和文書体を明朝体に。
□ラグジュアリー感を演出するために、ボタンやUI、背景をデコレーション。

STEP5. ルール化する

5-steps-design-brand-image-6

最後に、ブランドサイトのページ全体で、ブランドイメージがぶれないようにルール化します。

ブランドサイトにはほとんどの場合、階層下ページがあります。また、サイトが公開した後は、そのブランドサイトのデザインをベースに、キャンペーンページの制作やサイト内コンテンツを更新する運用業務も発生します。もし、階層下ページや更新のタイミングで、ブランドイメージが変わってしまえば、ターゲットは混乱し、サイト内の情報をスムーズに閲覧してもらえなくなります。

また、大きなプロジェクトでは、複数のデザイナーやアシスタントが制作に関わってきます。その場合でも、プロジェクトメンバー全員でルールを共有化することが重要です。各デザイナー間で表現が違ってしまえば、ブランドイメージがぶれてしまい、品質の低下に繋がってしまいます。

ページ全体の表現のぶれを抑えるために、一度ブランドイメージが固まったタイミングでガイドラインを作成しましょう。そうすることで、他のプロジェクトメンバーにもイメージを共有しやすくなるので、階層下ページの制作や、公開後の更新もコントロールしやすくなります。時間がない場合は、STEP1でまとめたキーワード、STEP3でまとめたリサーチ結果を共有するだけでも十分効果的です。

ブランドサイトの世界観の演出は非常に重要です。制作したブランドのイメージが適切でなければ、せっかく作りこんだビジュアルもターゲットに届かず、ブランドの伝えたいイメージも内容も伝えることはできません。上記のように、デザインに入る前にしっかりとブランドの価値とターゲットの要望を明確にすることで、効果のあるハイクオリティなブランドイメージが制作できるのではないでしょうか。

バズを起こすブランドサイト

私たちWeb製作者の仕事は今や、サイトを作り、ユーザーに見てもらうだけではなく、更にそのコンテンツをシェア(共有)してもらうことまでも含まれる時代になりました。そのためにはWebサイトに一見の価値があるだけでは足りず、知り合いに「薦めたい」と思わせるほどの何かが必要になります。ブランドの強化が主目的であるブランドサイトにとって第三者の情報共有が引き起こすバズは重要です。では、自然と消費者の会話に登場するようなブランドサイトにはどのような特徴があるのでしょうか?世界のトップブランドを例に見てみましょう。

独自性の強いビジュアルデザイン

視覚的に美しく、ブランドを表現するデザインはブランドサイトにとって最も初歩的な要件だと言えるでしょう。しかし、シェアされるためには機能的かつ、今までに無いデザインを通じて強いインパクトを与えなければいけません。Pepsiのブランドサイトはいち早くWindows 8のModern UIを採用しました。画像のボックスと読みやすいテキストを基調とし、サイトをユニークでありながらも使いやすく、楽しめるものにしています。

brand-site-create-buzz-1

その反面、ディズニーのサイトはレスポンシブデザインというトレンドこそには対応していますが、残念ながら独自性を表現できていません。左上のロゴを他のメディア企業と置き換えたとしても違和感は無いでしょう。ブランドサイトのデザインはトレンドを追うのではなく、ブランドの独自性をしっかりと表現し、細部までこだわることが大切です。

brand-site-create-buzz-2

驚きを与えるコンテンツ

ブランドサイトのコンテンツに実用性や面白みが無ければシェアされることはありません。しかし、そのリーチを爆発的に広げるためには、意外性の強いコンテンツでユーザーに驚きを与えなければいけません。RedBullのブランドサイトには、エクストリームスポーツの映像コンテンツが1日1~3本のペースでアップされています。この積極的かつ継続的なコンテンツへの投資で、RedBullは他のブランドを大きく引き離し、膨大なリーチを生み出しています。

昨年10月に公開され、Youtubeだけで累計3.6億回も視聴されたフェリックス・バウムガルトナーの成層圏からのスカイダイビング映像シリーズは記憶に新しい方も多いでしょう。

しかし、世界的なブランドサイトの中にも未だ大したコンテンツを持たず、商品やサービスのアピールに留まっているものも数多く存在しています。RedBullのように世界中に驚きを提供することは出来なくても、ユーザーにとって有益なコンテンツは提供できるはずです。ブランドサイトは単にブランドについて語るだけでなく、ユーザーが求めるコンテンツを提供し続けなければいけません。コンテンツマーケティングに対して積極的な取り組みを行なっていないブランドは今一度デジタルマーケティングのリソースやROIの考え方を見直すべきではないでしょうか。

コミュニティの一部になる

どのブランドにもコミュニティが存在します。彼らは提供される商品やサービスのファンであり、自主的に周りへそのブランドを薦めてくれています。しかし、ブランド側がこのコミュニティの一部にならなければ、そこで発生する会話に影響をおよぼすことはできません。MTVでは、2010年にVideo Music Awardsの放送と連動した投票、ライブブログやチャット機能を提供しています。TVとサイトが提供するコンテンツを通じてコミュニティとのエンゲージメントを深め、大きな注目を集めました。

広告やインフルエンサーを通じてサイトを広めても、何か新しい試みが無ければバズは起きません。ユーザーの注目を引き、バズを起こすためにはデザイン、コンテンツ、コミュニティに対する斬新な取り組みが必要です。しかし、新しいコンセプトへの挑戦には常に大きな失敗の可能性も付きまといます。「バズを起こす」という目標のためには、失敗に対する寛容さと今までに無い取り組みに挑戦し続ける意欲が必要なのではないでしょうか。

配色でブランドが決定する”ブランドパーソナリティを表現する配色方法”

First impression : 人はWebサイトを見た瞬間に印象を決めている

Webサイトを作成する際に、配色はなぜ重要なのでしょうか。はじめに下記Webサイトの配色を見てください。配色のみで、何かのブランドを想像できるでしょうか?

colorscheme-1

上記のサイトは日本コカ・コーラ社のサイトです。この配色だけを見て何かしらのブランドが想像ができたならば、あなたは色を見てブランドのイメージを決めたということになります。それは、文章を1文字も読まず、配色だけで印象を決めたということですね。他にも、赤と白で配色されたブランドのロゴには以下のようなものがあります。

colorscheme-2

私たちは普段、新しいWebサイトを見た瞬間に「〇〇っぽいサイトだな」とか「〇〇系だな」など無意識にそのサイトを何かのカテゴリーに当てはめ、イメージを作っているのです。その全体的なイメージは色によるものです。

カナダのカールトン大学で行われた研究のレポートによると、人の脳はWebサイトが表示されてから1秒の1/20の時間で印象を決定しているという結果が発表されました。詳細内容としては、被験者に50ミリ秒(つまり1/20秒)Webサイトを表示させて、Webサイトを評価するというもので、結果は長時間表示させて評価したものと、ほぼ一致した結果が得られました。つまり短時間でも長時間でも、人がWebサイトを見て受ける印象にさほど変化がないということです。

このことから、ユーザーはあなたのWebサイトを見た瞬間に印象を決めていることになります。ですから、そのファーストインプレッションはとても重要であり、私たちはWebサイトを制作する際にブランドイメージに沿った配色を考えるのは必須なのです。配色は人がブランドを共感する上で、大切な要素の一つです。

人がブランドに共感する配色とは

人がブランドに共感する配色とはターゲットユーザーが求める‘色のイメージ’とブランドの‘ブランドパーソナリティ’(ブランドパーソナリティとはブランドが持つ性格のことですね)がマッチしたものです。なので配色を考える際は2軸で考えるとわかりやすいです。

まず1つ目の軸は「ターゲットユーザーが求めるイメージ」ですが、これはブランドが色で確立されている場合とされていない場合があります。 例えば、コカ・コーラのサイトが突如、青い背景に変わっていたらユーザーは全く違うブランドのWebサイトに来てしまったかのように思い、驚いてしまうでしょう。 そのように、色でブランドイメージが確立されているものに関してはユーザーもサイトを訪れるときは赤と白の配色をなにかしら想定していますし、ロゴに合わせた色を考慮することは当然考えておくべきです。

一方でイメージカラーが確立されていないブランドは、色彩が持つ心理(ピンクは優しい、青は清潔・冷静など)やターゲットユーザーに合わせた色を考えていきます。 例えば20代から30代の女性が産婦人科のサイトを探していたとして、その産婦人科のサイトが黒背景であればユーザーは戸惑ってしまいます。 ユーザーは「優しさ、暖かさ」などが印象に残る色を想定してサイトに訪れてくると当然予測できるので、ターゲットユーザーが求めている目的のイメージに沿った配色を選ばないと、共感は得られないでしょう。

また、ユーザーがWebサイトで情報を得るということは何かしらの目的があって検索をしているので、ターゲットユーザーがどんな人なのかを知らなければなりません。 インターネット上では見えない場所で情報が発生し、拡散している可能性があるので、Googleアラートgoogleキーワード検索yahooリアルタイムなど無料でユーザーの動向が調べられるので、確認するのをお勧めします。

次に2つ目の軸は「ブランドのブランドパーソナリティ」ですが、これは相手にどんなことを感じてほしいのかというブランド側からの色伝達の意図ということです。 ブランドパーソナリティを決めるところから始まり、ターゲットユーザーに対するコミュニケーションの方向性なども含みます。ブランドパーソナリティを考えずにコミュニケーションをしていると、どんなにデザインされた意図のあるサイトでも人に共感してもらえないサイトになってしまいます。

上記の2軸がマッチすると、ターゲットユーザーに正しくブランドパーソナリティが伝わるWebサイトになるでしょう。 このことをWebサイトを作成する前に決めておかなければ、後々サイトのリニューアルする際など、コストも時間もかかってしまい面倒になりますね。そのようなことを省くために初期の段階で、ターゲットユーザーの動向と色伝達の意図を考えておくのは大切なことです。

ブランドサイトから見る配色について

では実際にブランドサイトではどんな配色をしているのかブランドパーソナリティを交えて見てみましょう!

colorscheme-3
ポカリスエット公式サイト

ロゴに合わせて青でまとめられたページです。 ロゴに合わせることで色の印象が強く与えられるサイトになります。 一般的に飲食で青は食欲を減退させると言われていますが、ポカリスエットの青色からイメージできるものは爽快感ですよね! サイトでは青空と海が爽やかさをもたらしパッケージから連想できるイメージにマッチしています。 画像の持つイメージとブランドを印象づける配色が、相乗効果を生み、ブランドをより強化しています。

またこのサイトの配色パターンは「同系色」の部類に入り、色相が同じで明度・彩度などを変化させた色の組み合わせです。 同系色のメリットは統一感がありすっきりとして見えます。色の印象を強く与えるので、製品のサイト(パッケージに沿った色)なんかでよく見かけます。

colorscheme-4
ダノンビオ公式サイト

こちらのサイトもパッケージの色を連想させる配色です。 ダノンビオのサイトは曲線の黄色や背景のベージュから女性的で柔らかい印象を受けます。コアターゲットは渡辺満里奈さんを起用しているところや、競合のヨーグルトの価格を比較して、子持ちの主婦30代~40代くらいなのかなと想定できます。 こちらのサイトもサイトから受けるイメージとブランドパーソナリティが合わさっていることがわかりますね。

配色パターンですが、「隣接色」の部類に入ります。 色相環で同じような色系統に属する色の組合せです。つながっている雰囲気がありつつ、異なる色相なのでサイトにリズムが出ます。 このサイトは赤色だけが緑系統では対比の色ですが、この色を引き立たせたい場所に入れることで誘目性が高くなります。(誘目性とは色が人目を引く度合いのことです。例えば、交通標識の警戒標識や消防の救助隊員の服装などは人の目に止まりますね。 良いとされているのは、暖色系(赤、黄、橙)の高彩度の色が効果が高いとされ、寒色系(青、緑、紫)などの色だと低いとされています。) 対比の色はアクセントカラーとしてもよく用いられます。

配色の振り分けについて

実際の配色方法はたくさんありますが、私は大体ベースカラー・メインカラー・アクセントカラーの3色を決め、サイト全体を100%とした際の割合を振り分けています。 大体60%はデザインの全体的なトーン、サイトのベースとなる色(ベースカラー)。30%は視覚的に印象的な効果を作成するための色味(メインカラー)で10%は アクセントカラーを用います。 これらを目安として用いて必要な場合は足したりしてバランスを見ましょう。

colorscheme-5
KIRIN一番搾りの英語版サイト

白ベースが約6割(全体的なトーン)、黄色ベースが約3割(コンテンツカラー)、黒ベースが1割(アクセントカラー、見出し部分)。 またターゲットユーザーは外国人なので日本の和を印象付けるインターフェイスとなっています。

colorscheme-6
キューピーマスタードのサイト

こちらは黄色ベースが結構占めてます。7割くらいでしょうか。白ベースが約2割(コンテンツカラー)、黒ベースが1割(アクセントカラー、見出し部分) 食事をするときの楽しげな雰囲気が伝わったきます。 またこちらのサイトはブランドが色で確立されていないものに入るでしょう。キューピーマスタード=黄色とは想像できないので、色彩が持つ心理やターゲットユーザーに合わせた色を考えています。 黄色は明るく活発なイメージで食欲を増進させる効果があります。

更に効果的な配色にするためには

視認性と可読性を意識してみましょう。 視認性とは文字のみやすさで可読性とは文字の読みやすさです。 配色においては、背景と文字が重なったときのコントラストのことで、見やすく、読みやすい配色とは明度差が大きくはっきりしているものが良いとされています。白背景の黒文字はよくみえますよね。 逆に、明度と彩度が近いもの同士だと読みにくいものになってしまいます。

NextStep

配色が苦手だなと感じる方は、まずWebサイト作る際のリサーチ段階で、競合のブランドサイトを見てその中から参考にしたいサイトを一覧にまとめてみましょう。 そしてまとめた各ブランドサイトはどんな性格を持っているのかパーソナリティ性は何か想定して言語化してみます。 これをすると業界の配色パターンもわかり、尚且つ各サイトのブランドパーソナリティが理解できれば自分がサイトの制作をする際、配色の参考にするサイトを見つける近道になります。 要は言語化することで自分の考えるブランドパーソナリティに近いブランドサイトの配色を参考にできるということです。

また先ほど述べた、色の配色パーセンテージの方法として大体の色を分析してくれるツールがあります。

WebSiteColorPicker
Webサイトの色分析しパーセンテージを出してくれます。

pictaculous
カラーパターンを抽出してカラーパレット作成してくれます。

とても便利ですね!

colorscheme-7

別の方法としては、Webサイトのスクリーンショットをとり、それにぼかしをかけることで大体の配色分割がわかりやすくなります。 写真などいらない要素は削除してみると更にわかりやすくなります。

実際の配色方法についてはWebサイトだけに限らず、洋服のデザイン、雑誌や本、建築物など様々なデザインから考えることもできます。 配色方法について理解が深まると、Webサイトだけではなく日常生活でも役に立つことがあるでしょう。 例えば部屋の家具選び、料理の盛りつけなど楽しくなりますよね! デザインは、人々が日々の暮らしをより良く快適に、楽しくなるように考えられてきたものなので、より良くする為の一つの要素として配色についても考えてみてはいかがでしょうか。

Webサイトをリニューアルする本当の理由

私たちWeb製作者の多くはクライアントにリニューアルを依頼されると、すぐに制作に取り掛かろうとしてしまいます。しかし、必ずしもリニューアルが最善の策ではない場合もあり、専門家であるWeb制作者にはクライアントに正しい助言を行う義務があります。

多くの企業にはWebサイトを定期的にリニューアルする文化が存在します。それは大抵何かに大きな不満を感じた経営者による「より先進的なWebサイト」の要求から始まります。多くの予算と時間を費やし、製作会社を選定し、古いWebサイトを完全に捨て去り、新しいものに置き換えます。しばらくは誰もが新しいWebサイトを評価しますが、コンテンツの更新が滞り、新たなテクノロジーが次々に登場し、Webサイトはまた古くなります。数年後、劣化したWebサイトがまた経営者の目に止まり、リニューアルが始まるのです。

リニューアルは無駄なのか?

次にリニューアルの依頼を受けたら、すぐに制作には取り掛からず、その理由や結果についてクライアントとしっかり話をしましょう。リニューアルではおそらく全ての要素を置き換えられ、問題なく機能している部分も作りなおされます。変更する要素が多ければ、有効性の検証も困難になります。ユーザーが慣れていた仕様が変更されれば、ネガティブな体験も生まれかねません。もちろん多額の投資を必要とするため、定期的に繰り返すことはビジネス上健全ではなく、いくら高額なリニューアルを行なってもコンテンツの更新や技術的なメンテナンスを怠れば直ぐに劣化してしまうのです。

リニューアルよりもリアラインメント

Webサイトをリニューアルせずに継続的に改善していく『リアラインメント』という考え方があります。Webサイトはビジネス課題の解決や、目標の達成にに向けて、継続的な改善施策を施せば数年おきに作り直す必要は無いのです。この考え方に賛同し、継続的なWebサイトのPDCAサイクルを推奨する制作会社は多く存在します。しかし、リアラインメントはWebサイトの継続的な改善を推奨するだけでなく、「完成したWebサイトを納品する」という考え方を否定します。Webサイトには完成は無く、ユーザーの行動から常に学び、より良い解決法をデザインに反映し続けなければならないのです。

Webサイトのデザインを継続的にテストし、改善し続けることには定期的なリニューアルを行うことよりもたくさんのメリットが存在します。しかし、全てのプロジェクトでリアラインメントをリニューアルに優先すべき、ということでもありません。

リニューアルされるべきWebサイト

FICCでもWebサイトの継続的な改善を推奨していますが、今も多くのリニューアル案件に関わっています。Webサイトのデザインを大きく変えない場合も、大抵ゼロから作り直すことになります。その理由は元のWebサイトが長期的な開発を視野に入れずに制作されているからです。リニューアルを行う主な理由は継続的な改善が行えないことにあります。

時には繰り返される改善施策自体がリニューアルの理由になることもあります。多くの追加や変更が加えられたWebサイトにはユーザーインターフェースの矛盾が蓄積され、新たな設計が必要となります。これは設計やデザインだけでなく、コードにも同じことが言えます。つまり、どのようなWebサイトにも、いずれリニューアルは必要になるということです。大切なことはその時期を正しく見極めることができるかです。

リニューアルのサイン

Webサイトがデザインやコードの矛盾を抱えきれなくなると、そのパフォーマンスの低さや運用のストレスからリニューアルの必要性が明確になります。Webサイトをゼロから作り直すことで、コードや動線などを最適化し、ナビゲーションやサイト構造などの設計を抜本的に見直す事が可能になります。しかし、正当なリニューアルの理由はWebサイトの機能に関係するものばかりではありません。企業やブランドのビジネスに関連した外的要因も多く存在します。

マーケティング戦略やポジショニングの見直しなど、ビジネスの大きな改革はWebサイトの目的・目標を変えてしまいます。ビジネスモデルの変更、ブランドのリポジショニング、市場動向の大きな変化に伴い、Webサイトのデザインやコンテンツの大幅な見直しが行われるのは当然です。また、多くの企業やブランドにとって象徴的な役割を担うWebサイトはインターナル・ブランディングにも大きな影響を与えるため、組織に変化を意識させることも正当な理由になります。

「見た目が古く、気に入らない」というビジュアルデザインやコンテンツに対する主観的な意見ではなく、Webサイトがビジネスのニーズをサポートできなくなったという事実こそがリニューアルのサインです。しかし、急速な対応が必要で、リニューアルに十分な時間が無い場合はもちろん部分的な改善施策を行うべきです。リニューアルは多くの費用だけでなく、時間も必要とし、新しいWebサイトを待つことが大きなリスクや機会損失につながることもあります。

解決すべき課題によってWebサイトに加えるべき変更は異なります。簡単なテキストの変更で対応できるものもあれば、全面的なリニューアルが必要なものもあります。変更の規模やタイミングはビジネス課題に基づき、その後の継続的な改善施策を視野に入れなければなりません。私たちWeb製作者にはリニューアルの正しい時期を見極め、その後のリアラインメントを通じたWebサイトの成長を可能にする義務があるのです。

ゲームに学ぶ”ユーザーに嫌われない”Webデザイン6つのポイント

“ゲームの楽しさを取り入れたWebデザインを考える”
ゲームって楽しいですよね。私も大好きです。最近ではゲームの考え方(ゲーミフィケーション)を取り入れたデジタルコンテンツが増えています。ゲーミフィケーションとは一体なんでしょうか。Wikipediaの定義の項目を要約すると、

  • 楽しんでもらえるようにする仕組み
  • 長く付き合ってもらえるようにする仕組み

ということのようです。確かにゲームを遊ぶと楽しいし、ハマって何時間も遊んでしまうことがあります。逆に遊んでいてつまらない、すぐにやめたくなってしまうゲームは俗に「クソゲー」なんて言われて嫌厭されています。Webサイトだって使ってて楽しく感じてもらいたいですし、もっと長く滞在してくれたらうれしい。何より「クソゲー」ならぬ「クソサイト」なんて言われたら制作者としてもショックです。ですからゲームが持つ「楽しんでもらえる仕組み」をWebデザインに適用できたら素敵じゃないでしょうか。

しかしゲームはどうして “楽しい” と感じるのでしょう。私の個人的な考えですが、自分が1入力したら1以上返ってきたとき人はそれを “楽しい” と感じる、と考えています。どんなゲームも「ボタンを押す」→「押した結果が返ってくる」の繰り返しなのです。では皆さんが想像しやすいように誰もが遊んだことのあるゲームの王様、スーパーマリオで考えてみましょう。

「1入力したら1以上が返ってくる」状態を続けよう

gamification-web-design-1

コントローラーのAボタンを押す、これが「1を入力した」状態。普通はただマリオがジャンプしてそのまま落ちてくるだけです。これだけでも楽しいけどあまり見返りがありませんね。

gamification-web-design-2

ではタイミング良くそこに敵がいたらどうでしょう。なんと踏みつけて倒すことができました。嬉しいですね。感じ方は人それぞれですがこれで「1入力した」(ボタンを押した)状態から「1以上が返ってきた」(敵を倒せた!)状態に遷移しました。

gamification-web-design-3

そして時に敵を踏みつけたついでに蹴飛ばした亀の甲羅が次々に他の敵を倒して行き華麗に1UPしてしまうこともあるでしょう。1の入力がとんでもない成果(10、100…)に化けました。これをここでは「リターンの爆発」と呼びましょう。

gamification-web-design-4

逆にボタンを押してもうまく操作できない、ボタンを押した結果がよく分からない、思い通りに行かない、理不尽に一方的にやられる…そんなとき人はゲームをつまらなく感じます。

「1入力したら1以上が返ってくる」そして「リターンの爆発」、これが繰り返されることがゲームを楽しいと感じる正体です。マリオもドラクエも、ソーシャルゲームもケータイ向けブラウザゲームもみんなそうです。「1入力したら1以上が返ってく」ればいいわけですから、捉え方次第ではいろんなものをゲームとしてとらえることもできるでしょう。Google検索だって、ウェブサイトだってゲームと捉えることもできそうですね。続けることが苦しい勉強だって(脳トレ)、フィットネスだって(Nike+)、ダイエットだって(WiiFit)、現にゲームになっているわけです。

「1入力したら1以上が返ってくる」なんて当たり前の、簡単だと思うかもしれせんが、制作したコンテンツが本当にそれを満たしているかどうか。改めて考えてみる必要があるでしょう。

1. アクションを適切に誘導できていますか?

そもそも ”1入力” がなければ何も返すこともできません。さてゲームを始めたけど何をすればいいかわからない、なんてクソゲーの典型です。ここは何のためのページですか?ユーザーが何をすればいいかわかるようになっていますか?登録画面など一連の動作が必要な場合はチュートリアルやヘルプメッセージの充実が求められるでしょう。

2. 常に「ユーザーに対してアクションを促し続ける」インターフェースになっていますか?

例えば、メールを開いたら自然と「返信」ボタンが表示されるように、行動を促すインターフェースを作りましょう。ユーザーのアクションを止めてはいけません。スクロールしたら「次へ」、商品のページでは「購入導線」、どんなWebページでも必ず次の指示、次のアクションの提示を行いましょう。

3. アクションに対して、ユーザーが期待した応答ができていますか?

ユーザーが行ったアクションに対して何が起こったかを適切につたえられていますか?ボタンを押して何も反応がない、予期した動作が行われない、のは大問題です。また「検索しても検索結果が何もない」「入力エラー処理」など予期せぬ事態に対するユーザーへの対応も重要です。「しかし、なにもおこらなかった!」だって立派なユーザーアクションへの反応なのです。

4. アクションに対する適切な演出ができていますか?

表現力はゲームが最も強みとする部分です。適切な演出がついていないとユーザーの勘違いを引き起こす可能性が出てきます。RPGならダメージと回復では違う演出がついています。もしこれがあべこべだったりわかりづらかったらユーザーは “こんらん” することでしょう。「ゲームをクリアしたときには…」「魔法を使ったときには…」「宝箱を開けるときは…」など具体的な例を思い浮かべてみるのもいいでしょう。「押すだけで楽しい!」が実現できたなら最高ですね。なめこの刈り取り作業などなどはそれだけでも楽しいことの一例です。

5. アクションが必要以上に複雑になっていませんか?

アクションのコストを下げましょう。「1入れて1以上」返さなくても「0.5入れて1以上」返せばいいのです。例えば「2つのラジオボタンと1つの送信ボタン」と「2つの送信ボタン」では同じ結果でもアクションの数が違います。最低単位は1クリック、1タッチ、1スライド。適切で簡単な入力をさせましょう。

6. アクションの選択肢が多すぎませんか?

選択の自由は選択の煩わしさでもあります。もしゲームで「HPを10回復する薬草」「HPを15回復するポーション」「HPを13回復する飲み薬」…と同じような効果でたくさんの種類のアイテムがあったら選択するのすら面倒です。大して違いがないなら選んでも選ばなくても一緒、という割り切りが必要です。ユーザーに選ばせる時点でコストになる、と肝に銘じましょう。メニューの数やカテゴリーの数はよく考えて、導線がたくさんあるのもいいですが結果的にユーザーを惑わせないように。よくソーシャルゲームなどは「決定ボタンをただ押してるだけじゃないか」などと揶揄されたりしますが、それはある意味アクションのコストを極限まで下げたゲームの形と言えるでしょう。

ゲームは長い歴史の中で「人に面白いと感じてもらえる方法」を追求してきました。ハードの性能向上によるグラフィックの変化だけでなく、もはや説明書を読んでプレイするゲームが存在しないように、プレイヤーへの対応も劇的に向上していきました。一方Webサイトにはそもそも説明書も、攻略本もありません。「楽しんでもらえる」「長く付き合ってもらえる」ために見た目だけではない、”ユーザーをアクションを促し、望んでいる反応を返す” Webデザインを制作していきましょう。

今回は「1入力したら1以上が返ってくる」ことについて集中してお話ししましたが、次回は「リターンの爆発」についてお話しします。どうすれば人は「リターンの爆発」を経験し「ハマる」のか?を考えてみましょう。

Webデザイナーが成長するために学ぶべきROIとPDCA

私たちは日々インスピレーションを得るために多くのリニューアルされたサイトを目にしています。
しかし、それらのサイトはなぜリニューアルを行ったのでしょうか?『バックエンドのシステムが古い』『ブランドのコミュニケーションが変わった』など色々な理由は考えられますが、その一因に『期待した成果をWebサイトが上げられていない』ということが考えられます。

本来、Webサイトは広告とは違い、一度の投資に対して長期間にわたり効果を発揮するものです。私たちはクライアントに対し有効性の高いソリューションを提案・実行し、投資に対する効果を証明出来なければ、ビジネスの成長や、自身のWebマーケティングに対するスキルも成長すらも見込めないでしょう。

そこで、Webデザイナーも知るべきROI(Return on Investment : 投資対効果)とPDCAの6つのポイントをご紹介します。

PDCAによるチューニングポイントを明確化する

緻密なリサーチやストラテジーに基づいたWebサイトでも、公開しただけでは本来のパフォーマンス発揮できず、PDCA(Plan Do Check Act : 分析と改修)を迅速に行わなければ、投資に対し得られるはずの多くの効果を無駄にしてしまうことになります。
しかし、複数のマーケティング施策が同時に行われ、アウェアネスレベルの異なるユーザーがWebサイトに訪れるなか、コンテンツやデザイン要素の最適化を行うのは非常に困難です。効果的かつ効率的なPDCAを実施するためにはビジネスゴールに基づき、その目標の達成度合をKGI(Key Goal Indicator : 重要目標達成指標)と目標到達プロセスの実施状況を観測するKPI(Key Performance Indicator : 重要業績評価指標)を、予測される成功要因に基づき数値化しモニタリングを行いながら実行に移しましょう。

KGIを設定しゴール達成へのプランニングを行う

Webサイトの目的によってKGIは様々です。例えば、弊社が運営するデザイナー向けポートフォリオサイト「JAYPEG」を例にすると、「新規クリエイターの登録」がビジネスゴール、KGIは「月間◯◯人のユーザー登録(コンバージョン)」となります。しかし、達成状況が予測を下回る場合、KGIの数値だけではその原因を特定する事が難しく、結果無駄な時間を多く費やしてしまったという事態になりかねません。

成功要因を明確にしチューニングすべき的を絞る

Webサイトのコンバージョンが『会員登録』など1つしか存在しない場合、複数の成功要因とコンバージョンとの因果関係を明確にできなければ、チューニングすべきポイントを定めることができません。そこで、KGIに対して大きく影響を及ぼす主要な成功要因を予めリスト化することで的を絞っていきます。

成功要因のパフォーマンスを観測する

パフォーマンスを定点的に観測するためにKPIを設定しましょう。コンバージョンとは別の中間観測ポイントを設けることで、個々の成功要因のパフォーマンスを出来るだけ正確に把握し観測することができます。大抵の場合、KPIが上がればKGIが上がるという風に、数値は互いに関係しながら変化するはずです。KPIが変化してもコンバージョンに影響を及ぼさないか、影響度合が他の指標より低い場合はKPIを見直す必要があるでしょう。

改善施策はより早く確実に成果を出す

KPI数値を改善するコンテンツやデザイン要素の調整を行い、その結果を見るには約1週間程度の期間が必要です。そのため、改善施策にはA/Bテストを行いより少ない回数で実施することが重要です。
また、KPI設定後の十分な観測データを得たら、KGIとKPIの影響度合いからチューニングすべきポイントに対しプライオリティをつけ調整を行いましょう。更に素早く結果を出すことが可能になり、またその結果、コストパフォーマンスの合わないプロモーションや広告の出稿などは見なおす良い契機を見つけ出すことが可能になります。

Webデザイナーのブランドやストラテジーに対する理解が成功の鍵

現在行っているプロモーション施策のほか、CRMを通じた顧客リレーションや、口コミ、ソーシャルメディアやコミュニティサイトでのバイラルなど、環境や時期によって変化する要因もあり、それらは必ずしもアクセス解析だけで見つかるとは限りません。

ブランドやストラテジーに対する理解を持ち最適なクリエイティブを提案できるWebデザイナーがPDCAやROIのノウハウを身につけ蓄積することが、プロジェクトが成功させるための大きな要因となるでしょう。

全てのプロジェクトで上記の取り組みを行うことは難しいかもしれません。しかし、Google Analyticsであなたが作ったWebサイトは本当に機能しているのか? それを確認することは可能なはずです。
まずはそこから学び蓄積していくことで、次のクリエイティブへと活かしてみてください。

Webデザインのスキルを磨く10のポイント

Jakob Nielsenは、「How Long Do Users Stay on Web Pages?」の記事にて「ページごとの平均滞在時間は1分弱となっており、実際に訪問しているページのテキストの4分の1しか読む時間がない」と述べています。もちろん、サイトの性質や使われ方にもよりますが、私達が制作しているページのうちの75%はほとんどのユーザーに読まれていないことになります。あなたもブログ記事のイントロを読み、途中をざっと流し読みして、最後のまとめだけを読んだ経験はありませんか?

私達がサイトを閲覧する時の殆どは明確な目的を持っています。 必要とする情報以外のテキストをじっくり読むことはなく、自分が求めている情報を探すためにざっと斜め読みし、目当てとなる情報を探していることが殆どです。早急に答えを求めるユーザーにとって、あれもこれもと次々と情報を訴求するウェブサイトは、斜め読みされ、離脱されてしまい、ユーザーを効果的に誘導できていないのではないでしょうか。

一方で、効果的にユーザーを導き、成果を上げているウェブサイトも数多く存在します。 そのようなサイトを分析し、共通項となる原則を見つけ出し活用することができれば、読まれていなかった75%の領域までユーザーを導くことができるのではないでしょうか?それでは、ユーザーを効果的に導くためには、Webデザイナーは具体的にどのようなアプローチをすべきでしょうか。

1. ユーザーを考えさせない

ウェブサイトのデザインは、そのページがどんなページであるかを明確に説明している必要があります。 ページを見てすぐに、何をするためのページかが理解できることはユーザーの離脱を防ぐために非常に重要な要素となり、ページ見て疑問を抱かれてしまうようなサイトではそれ以上読み進められることはありません。ナビゲーションが直感的でない場合にも、ユーザーがサイトの構造を理解するのは難しく、同様に離脱の原因となります。自分の居場所がわかり、別のページに移動することが明確なリンクを設けることでこの問題を解消できるでしょう。

10-principles-of-web-design-1

ネットショップ作成サービスのBASEの場合、ファーストビューに記載された「ネットショップの作成が、今までで一番簡単に。」というキャッチコピーが、そのままサイトで出来ることを明確に伝えています。さらに、登録のためのフォームを並列で配置することで、ユーザーに次のアクションを提示し、ECサイトの運営を検討するユーザーを登録へ促すことが出来ていると言えます。ウェブサイトが提供できるメリットがユーザーに理解されない限り、そのサイトが使われることはありません。

2. ユーザーを強制しない

あなたが制作しているサービスやツールは、ユーザーが最小限のアクションで試すことができるものになっているでしょうか? 新規のユーザーは、自分が見つけたサービスやツールを体験しようとする気持ちはありますが、1つのアカウントを作るために延々と続く長いフォームを埋めてまで利用するということは稀です。また、一度アカウント作成に負担に感じたサービスはそれ以降使われることはないでしょう。そのため、ユーザーがアカウントを作成する際に必要とされないような情報まで一度に取得しようとすることは妥当ではなく、最小限の項目で登録を完了させることが重要になってきます。

Ruby on RailsやBasecampの開発元として知られる37signalsのRyan Singerは「ユーザーは、彼らが実際にサービスやツールを体験し、そのサービスを自分が求めていると感じる場合、必要とされる情報を提供してくれるだろう。彼らは自分が得たことに対しリターンをする考えを持っている」と述べています。実際、Basecampのトライアルのために必要とされる情報は自身の名前とログインのためのID/PWのみとなっており、ユーザーが気軽にサービスを体験できる配慮がされています。

10-principles-of-web-design-2

不要な必須項目を削り、ユーザーに登録までのハードルを感じさせないフローになっているか確認しましょう。

3. ユーザーの興味を惹くものを明確化する

サイトを構成する要素にはいくつかの側面があります。画像はテキストより目を引きやすく、太字がプレーンテキストより目立つように、それぞれの要素が固有の誘目性を持っています。どんなビジュアル要素が、ユーザーの興味に影響を与えられるのかを知ることで、ページのゴールを達成するデザインに近づけることができるでしょう。例えば、人間の目は、ページ上で動いている要素を瞬時に認識することができます。現在では、映像や動きのあるバナー広告は非常に目に付くため迷惑がられていますが、マーケティングの観点からすると、それらはユーザーの関心を引くことを達成していると言えるでしょう。

10-principles-of-web-design-3

アスリートのためのメガネを開発したパリミキのスペシャルサイトでは、この原理を利用しています。中央に向かって放射状にブラーがかかった写真によって、視線は自ずと中央のエリアに向けられます。エリア中央の再生ボタンを押すことで、製品のベネフィットを伝える動画が再生され、ユーザーは閲覧して1分もしないうちにこの製品の魅力を理解することが可能になります。

特定のエリアにユーザーの注意を誘導するためにビジュアル要素を活用する事は、あなたのサイトを閲覧するユーザーを点AからBに移動させることをサポートすることができるでしょう。

4. ぱっと見て機能がわかる

ひと目見ただけで明確に機能が分かる構造やデザインは非常にユーザーフレンドリーです。

10-principles-of-web-design-4

ベビー用品を扱うグレコのサイトでは、ページ上部のグローバルナビゲーションと、ページ下部の製品カテゴリへのナビゲーションという、ひと目見ただけで明確に9つのナビゲーションと2つの入力フィールドがあることがわかります。この、見ただけでそれが機能を持ったものだとユーザーに理解されることがUI設計の基本原則となります。これらのUIがひと目見て機能が理解でき、操作するのが快適だと感じさせることが良いユーザー体験へ繋がります。

5. 効果的なライティングをする

ウェブは印刷とは違い、ユーザーの好みやブランドが形成すべき人格にあわせ文体を変える必要があります。また、広告的なテキストは読まれることはなく、画像や太字や斜体でキーワードを指定していない長い段落はスキップされ、誇張された内容は無視されます。さらに、気取った、または巧妙な言い回しや会社固有の言葉、馴染みのない技術的な言葉は避けられる傾向にあります。もし、あなたがサービスを説明し、ユーザーにアカウントを作成させたい場合は、「我々のサービスを知る」よりも「今すぐはじめる」のほうが優れています。

10-principles-of-web-design-5

開発者向けホスティングサービスのSQALEでは、これらの要点を踏まえたライティングがされています。気取った言葉や誇張された表現もなく、代わりに開発者がまず知りたい特徴、手間、運用にかかる費用が端的に書かれています。また、実際に始めるために押すべきボタンも明確にされています。

効果的なライティングのための最適な方法としては、

  • 短く、簡潔なフレーズを使うこと(できるだけ早く本題に入る)
  • 斜め読み可能なレイアウトを使う(コンテンツを分類し、複数の見出しレベルを使用し、均一な段落ではなくポイントとなる画像や箇条書きを使う)
  • 飾らなく、客観的な言葉であること(広告的な印象や説得を含む言葉は広告のように思われます)

を心がけるべきでしょう。

6. 簡潔にする

サイトデザインの第1の目標であるべき原則として、Keep It Simple(KIS)というものがあります。ユーザーがサイトのデザインそのものを楽しむということはめったにありません。さらに、ほとんどの場合、デザインがあったとしても、ユーザーは自分が必要とする情報を探してサイトを訪れています。余計な要素、装飾などでページを複雑にする代わりに、簡潔になるよう努めましょう。

10-principles-of-web-design-6

シンプルさは構造の把握にとても役立ちます。上記で紹介したこれらのサイトはどちらも日本語ではなく、意味は読み取れませんが、直感的にナビゲーションやヘッダー、コンテンツエリアやフッターを認識することができるでしょう。簡潔さを保つには、不要なコンテンツを持たず、詰め込みすぎずにユーザーに選択肢を提示できることが必要です。

7. 空白を恐れない

行間や文字間、要素間などに適度な空白(ホワイトスペース)を設けることにより、ユーザーが読む際の負担を減らすことに繋がります。実際の所、前述の要因だけを大きく評価することは難しく、空白を設ける事は、ユーザーが読む際の負担を減らすのに役立つ反面、一度に見える情報量を制限することにもなります。

しかし、複雑な情報は、流し読み、分析する作業が困難になります。初めてページを見るユーザーは、デザインされたレイアウトに対し、ページを流し読みして、コンテンツ領域を区分して情報のグループを把握しようとします。そこで、2つの要素間のスペースを、線または空白で区切ることでグループの把握をサポートできますが、空白で区切ることにより、構造が複雑になるのを防ぐことができます。更に、インデントなどで視覚的に階層構造を持たせることで、コンテンツ同士の関係性を認識しやすくすることができます。

10-principles-of-web-design-7

Appleのウェブサイトはホワイトスペースを効果的に用いている優れた例です。テキストブロックの周囲にゆったりと設けられたスペースと、メリハリのある文字サイズがコンテンツの構造を把握しやすくし、斜め読み可能なレイアウトを実現しています。

8. ビジュアルコミュニケーションを効果的に使う

ビジュアルコミュニケーションとは、メッセージまたは文脈を伝えるために使われるグラフィカルな要素の全てを指しており、主にレイアウト(フォーマット、構成、グリッド)、タイポグラフィ(書体の選定、文字の扱い)、色とテクスチャ、アニメーション等が該当します。Aaron Marcusは論文で、効果的なビジュアルコミュニケーションに必要とされる3原則について述べています。

10-principles-of-web-design-8

ビジュアルコミュニケーションを整理する
明確で一貫した構造の考え方をユーザーに提供します。画面のレイアウト、情報の関係性、導線は、整理するために重要な要素で、同じ規則やルールは、全ての要素に適用されるべきです。

ビジュアルコミュニケーションを効率よく利用する

  • 効率よく利用するために、4つの考慮すべき点があります:シンプルさ、明快さ、独自性、強調
  • シンプルさ:コミュニケーションのための最も重要な要素だけが含まれているか
  • 明快さ:意味があいまいなコンポーネントはないか
  • コントラスト:重要な機能は他と区別できる要素になっているか
  • 強調:最も重要な要素は簡単に認識できるか、一番目立っているか

ビジュアルコミュニケーションを伝える
UIが正常に機能するために、見やすさ、読みやすさ、タイポグラフィ、シンボル、multiple views、色や質感のバランスを整える必要があります。場合に寄りますが、使用する書体は3種類以内、サイズのバリエーションは3サイズ、1行に18単語、50〜80文字のテキストにしましょう。

9. 慣習を活用する

昔からの慣習に沿ったからといってつまらないサイトになることはありません。実際には、そのルールがあることで、サイト設計に関する動作、学習コストを減らすことに貢献することができます。例えば全てのサイトで、RSSフィードのアイコンが全く別のものだったら、わかりにくく、フィード登録の際の手間が嵩んでしまうことが予測できます。

10-principles-of-web-design-9

私達の普段の行動と同じように、データを整理したり、ページを見たりするという行動は慣習化されるものです。慣習に基づいたルールを利用することで、ユーザーの信頼、信用を獲得でき、サイトの信頼性を証明することができます。

10-principles-of-web-design-10

全く違う言語のサイトだとしても、UIのルールが適用されている場合、ユーザーは、言葉が理解できないとしても、その要素が何の機能を持っているのかを想像することができ、目的達成までのステップを短くすることができます。もちろん、既存の設計を覆せるような革新的なアイデアがある場合はこの限りではありませんが、そうでなければ、慣習に基づいたルールに則ることでサイトの信頼性を向上させましょう。

10. 早期に、そして頻繁にテストする

ユーザーテストと聞くと専門の検証会社が実施する敷居の高いものを想像するかもしれませんが、ここでお伝えするテストの原理は、高度な機材を必要とせずに実施することが可能です。ワイヤーフレームを被験者に渡すか、画面上で表示してもらい、行なって欲しい事を伝え、達成できるかを見ることで、意図したアクションを行なっているかを知ることができます。

また、デザインが意図したバーソナリティを感じさせるものになっているかを検証するためにもテストは有効です。「クラシック/モダン」「慎重/積極的」「簡潔/複雑」「女性的/男性的」のような対となる印象のキーワードを設定し、制作しているデザインがどのような印象を与えたいかを予め決めておきます。その上で、テスト対象の方にデザインを見てもらい、自分が感じた印象が前述のキーワードのどちらに近いかを、最もあてはまる/ややあてはまる/どちらとも言えないのような段階を付けた表をもとにチェックをつけてもらうことで、意図した印象を感じさせることが出来ているかの検証をすることが可能です。

10-principles-of-web-design-11

テストは常に有益な結果をもたらします。良かった時はあなたの洞察が証明されたこととなり、悪かったとしたら構造上の問題を理解することができます。1人のテストをすることは、テストをしなかったプロジェクトより100%良い物になり、プロジェクト早期に1人のテストをすることは、プロジェクト後期に50人のテストを行うことと同じくらいの効果があります。可能な限り早い段階で実施するべきでしょう。早期に実施することで、実装フェーズでのロスを減らすことが出来、最終的なアウトプット品質の向上に繋がります。

考慮する点として、テストの被験者となるメンバーは、プロジェクトに携わっていない人である必要があります。プロジェクトメンバーは数週間そのサイトに従事しており、実際にどのように動くかや、全体の構造も知っていて、新鮮な気持ちで接することは不可能となり、有効なテストができません。プロジェクトの背景や事情を知らない第三者に行なってもらうことが理想でしょう。

Webデザイナーになりたての時期は、ビジュアルの作り込みや技術を少しでも早く習得してスキルアップを図りたいと感じるかもしれません。しかし、見栄えだけがいいデザインではユーザーを効果的に導くことができず、せっかく作りこんだビジュアルも、見られない、機能しない無駄なものになってしまいます。そのようなことを避けるために、上記のような原則を念頭に置いておくことで、デザインをする際の指針ができ、より説得力のあるアウトプットができるのではないでしょうか。

また、10の原則については全て考慮すればいいというわけではなく、状況に応じて判断していく必要があると思います。デザインを制作していく中で、どの原則があてはまり、どのように改善することができるかを判断し、クオリティを上げていくことで、自分のデザインについてロジカルに判断をすることができるようになり、Webデザイナーとしての能力も向上させることに繋がります。

すぐに実践できるプロジェクトが無いのであれば、普段使っているサイトで上記の原則に当てはまるものがないか探してみましょう。それらのサイトが、原則をどのように活用しているのか考えてみたり、今回の原則を使うことで改善できる点を探したり、今すぐ取り組める事から実践してみることが重要です。

Webデザインで陥りがちな4つのユーザビリティミス

Webサイトを制作しているうちに、様々なしがらみによって、そのクオリティを劣化させてしまった経験があなたにもあるのではないでしょうか。クライアントの要望を取り入れたためにデザインの統合性が取れなくなったり、ディレクターとデザイナーで意見が衝突した末に納得のいかない修正をすることになってしまったり…。その原因は様々ですが、客観的な視点を持ってWebサイトを制作しなければ、ユーザーの心を掴むことはできません。Webサイトにおけるユーザーの使いやすさを表す指標として「ユーザビリティ」という言葉が用いられます。ユーザーを離脱させないためにユーザビリティを向上させることは必要不可欠ですが、悲しいことに、Webサイトのクオリティを向上させていたはずが却ってユーザビリティを悪くさせてしまったということは、往々にして起こりがちです。

ここで大切なのは、「ユーザーの視点」を常に忘れないようにすることです。あなたが担当しているWebサイトは、初めて訪れたユーザーにとって、使いにくいところやわかりにくいところがないでしょうか。少し視点を変えるだけで、気付くことのできなかった問題に改めて気付くことができると思います。制作に夢中になってしまうと客観的な視点がどんどん薄れていってしまいがちなので、適度なタイミングで自身のクリエイティブから距離を置いてみるようにしましょう。 次の項目では、特に気をつけて確認したいポイントをご紹介します。

1. 情報に優先順位がついていない

web-usability-miss-1

Webサイトの隅から隅までをユーザーが閲覧することはほぼありません。そのため、情報に優先順位がついていないWebサイトでは、訴求すべきだったポイントが簡単に読み飛ばされてしまいます。特にクライアントとのやり取りの中で起こりがちなのは、全ての情報を強調しすぎて、結果的に情報の差がなくなってしまうということです。1つ1つの情報のプライオリティーを考え、ときには引き算のデザインをして、重要な情報だけが強調されるようにしましょう。

2. コンバージョンを強要している

web-usability-miss-2

購入や申込みなどに代表されるKPIを達成するためのコンバージョンボタンは、Webサイトにとって非常に重要な要素です。しかし、ただ闇雲にボタンを目立たせたり数を多く設置するだけでは、ユーザーはボタンをクリックしてくれません。まずは商材を知らなかったり、不安に思っているユーザーに対して、安心・信頼を提供するようなコンテンツを制作するところから始めましょう。その上で、適切な位置・強調でコンバージョンボタンを配置することが、成果につなげるための第一歩になります。

3. ローディング時間が長い

web-usability-miss-3

回線速度の向上によって、リッチなコンテンツを提供するWebサイトが増えてきました。しかし、ユーザーからしてみれば、ローディング時間は苦痛を感じるものでしかありません。「オンライン動画において、再生開始までの時間が2秒を超えるとユーザーは離脱し始める」という研究結果も報告されています(出典:http://web-tan.forum.impressrd.jp/e/2012/11/20/14177)。画像の容量を可能な限り圧縮したり、過度なアニメーションは避けるなどして、ローディングの時間を少しでも削減できるように心がけましょう。

4.フォームの項目が多い

web-usability-miss-4

ユーザーの潜在的な情報を取得できるフォームではつい多くの設問を設けてしまいがちですが、項目が増えれば増えるほどユーザーが離脱する可能性は上がってしまいます。回答を必須としていない項目については、本当に必要なのかどうか改めて検討してみてください。また、郵便番号や電話番号などの項目で入力フィールドを分割することは、ユーザーの操作を増やしてしまう原因となってしまうため、なるべく1つのフィールドにまとめるようにしましょう。

もし、あなたが現在Webサイトを制作中なのであれば、まずはクリエイターの視点を一度捨ててみましょう。そして、Webサイトを利用する側――つまりユーザーの視点に立ち、改めてそのWebサイトを閲覧してみましょう。そうすることで、真に改善すべき問題点が見えてくるはずです。 また、可能であれば、そのWebサイトを閲覧したことがないユーザーに実際に使ってみてもらう、ユーザビリティテストを実行することも有効でしょう。

「ユーザビリティ」というような専門用語を聞くとつい身構えてしまいがちですが、ユーザーの視点を持ち、自身のWebサイトを客観的に見ることができれば、おのずと使いやすさは向上します。 実際の店舗とは違い、Webサイトではユーザーと対面することができません。だからこそ、ユーザーのことを真摯に考え、思いやる心を忘れないことが、ユーザビリティを向上させる第一歩なのです。

レスポンシブデザインがブランドにもたらすバリューとは

01

あなたのブランドサイトは無駄な労力やリソースを消費してしまっていませんか?

ここ数年、注目を集めているレスポンシブデザイン。
ご存知の通り、スクリーンサイズを基準にワンソース、同一URLでマルチデバイスに対応させる制作手法です。ワンソース・同一URLのため、SEOに強くソーシャルメディアのシェアやリンクが容易で、更新の工数も抑えられる最良のマルチデバイス対応と見られる事もあります。
また、Googleが公式にレスポンシブデザインを推奨した流れもあり、国内での実装事例も次々と出てきています。

ただ、我々制作会社からの立場でいえば、レスポンシブデザインを安易に発注者様に提案できないのも事実です。
その理由を、制作会社が発注者様に提供できるバリューという視点から考えて見たいと思います。

制作会社がクライアントに提供できるバリューとは

至極当然のことですが、我々制作会社が発注者様に行う全ての提案について、制作会社はバリュー(価値)を提供しなければなりません。
では、そもそもバリューとは何なのでしょうか。

02

上記の図のように、バリューとはコストと提供できるベネフィット(利益)の差分であると説明できます。この場合のコストとは、単純な制作費用だけでなく、発注者様の手間や制作にかかるマイナス要素全てを含みます。発注者様はかかる手間や制作費用以上にベネフィットを得られると感じなければ、提案を購入してくれません。
制作費用が決まっている場合、制作会社はベネフィットを積み上げることにより、発注者様やブランドにより多くのバリューを提供できると言えます。

それでは、スマートフォンを含むマルチデバイス対応において制作会社が提供できるベネフィットを具体的にいくつか挙げてみます。

  • 多くのデバイスに最適化させ閲覧機会を増やす
  • 操作しやすいインターフェースによりストレスによる離脱を最小化する
  • モバイル端末ならではの機能(GPS、お財布、電話)で新しい体験を提供する
  • 各デバイスでのSEOの強化により流入を拡大する
  • 回線の遅いスマートフォンでの軽くて高速な表示で離脱を防ぐ

バリューを提供するためには、コストを下げる方法もあります。

  • 制作費用を下げる
  • クライアントの手間を軽減する

これらが提供できるベネフィットの全てではありませんが、レスポンシブデザインに以上を当てはめてみて、バリューを再考してみたいと思います。
もしブランドサイトをお持ちなら、是非自社サイトと照らしあわせてみてください。

ベネフィットを増やせるか

03

多くのデバイスに最適化させ閲覧機会を増やす

( △ )
CSSのMedia Queryによりブラウザの横幅からいくつかのブレイクポイントを設定し、表示を切り替える一般的なタイプのレスポンシブデザインでは、各デバイスに最適化するのではなくブラウザの横幅に最適化するといえます。
ブレイクポイントを各デバイスの横幅ごとに細かく設定することも可能ですが、この場合は工数とデータ量の点から賢い選択とは言えません。(コストについては後述します。)
完全な各デバイス最適化をせず、ブレイクポイントを最小に留めることにより各社のスマートフォン、タブレット端末に汎用的に一定のユーザビリティを提供し、閲覧機会を獲得することは可能です。

操作しやすいインターフェースによりストレスによる離脱を最小化する

( △ )
CSSを切り替えることと、設計・デザインの工夫により各デバイスに最適なインターフェースを提供することができます。
ただ、ストレスを感じて離脱してしまうような事態は回避できますが、ワンソースであるがゆえにデバイス毎に大きくコンテンツを出し分けたり、本当に細かいチューンナップが難しいという問題もあります。

モバイル端末ならではの機能(GPS、お財布、電話)で新しい体験を提供する

( △ )
PC版と同じソースコード、コンテンツを提供する為、GPS機能やお財布機能等のスマートフォン専用機能を実装することは難しいです。もちろん全くできないという訳ではないですが、スマートフォン専用サイトやネイティブアプリに比べて弱いのは明らかです。

各デバイスでのSEOの強化により流入を拡大する

( ◯ )
ワンソース、同一URLのためPCとスマートフォンで同一のSEOを行うサイトには効果が期待できます。
ただ、逆にスマートフォンでユーザーのニーズや動きが異なる業種には向かないともいえます。

回線の遅いスマートフォンでの軽くて高速な表示で離脱を防ぐ

( ☓ )
各ブレイクポイント分の画像、CSSを予め準備しておき、それらの表示/非表示で切り替えを行うため画像を多く使用しているサイトでは表示が重くなってしまうケースが多いです。
ブログ等のテキストがメインコンテンツのWEBサイトや、WEBフォントとCSS3の組み合わせによってある程度解決することができますが、日本語のWEBフォントのクライアント提案レベルでの実用性がまだ疑問が残る点からも、根本的な解決には至っていません。

コストを下げられるか

制作費用を下げる / クライアントの手間を軽減する

04

( – )
レスポンシブデザイン制作においてバリューを提供できるかはこの点にかかっているといえます。

一般的にレスポンシブデザインを導入する大きな理由として、ワンソースの為、実装コストが抑えられるといったものがあります。
果たしてそうでしょうか。

無駄に多くのブレイクポイントを設定し、各デバイスに厳密に最適化させようと画像やコンテンツを多く切り替えるようにしてしまうと、制作や検証の工数が跳ね上がります。
レスポンシブデザインの場合、表示するコンテンツがどのデバイスでも原則同じなため、最終的な落としどころは一番画面サイズの制限を受けるモバイル端末となります。
これまでと同じく、PC版のデザインカンプを作成し、それを他デバイスに対応させていくような流れとすると変換の際に無理が生じてしまうこともあります。
そのため、デザインや設計も一新し、モバイルファーストの考えで進めることが必要となってきます。

また、発注者様にデザインや動作の確認をする際にも工数がかからないような注意が必要です。

ブラウザの横幅によって見え方が変わるというような概念は、制作サイドは理解していても、発注者様に言葉の説明だけで理解してもらうことは難しいことが多いです。そのため、結局確認の際に仮のコーディングを行うなど無駄な作業が発生してしまいかねません。それが数ページのサイトならまだしも数百ページもの大規模なサイトとなると…

このため、従来のようにデザインカンプを作成しそれをコーディングに当てはめるのではなく、ブラウザでデザインするインブラウザデザインで制作を行うなど制作サイドの作業方法も見直す必要があるかもしれません。

バリューを生む実装方法の可能性

以上のことからクライアントバリューを提供できる実装を行うためには、いかにコストを押さえるかが重要となってきます。
制作工数を押さえて効果的に活用する事例を紹介します。

1. エントリーフォーム × Twitter Bootstrap

05

デジタルマーケティングにおいて、コンバージョンに直結するエントリーフォームの最適化は必須です。
そして、スマートフォンでPCサイトを閲覧している際に、大きなストレスを感じ時に離脱にまでつながるのもエントリーフォームです。ある程度汎用性のあるエントリーフォームをスマートフォン、タブレットに工数をかけずに最適化できれば、コストを下げることができます。

Schick 替刃&ジェル一年分プレゼント クローズドキャンペーン

06

Schickのクローズドキャンペーンでは、Twitterが提供するCSSフレームワークBootstrapでエントリーフォームをレスポンシブ化することで、制作コストを押さえたマルチデバイス対応を行いました。
CSSフレームワークは、うまく活用すればオリジナルでCSSを作成するより制作時間、作業工数を圧縮できます。

フレームワークを利用するにあたっては仕様を理解し、その仕様から大きく逸脱しないようにすることに注意が必要です。
仕様から大きく外れて独自のカスタマイズを多くしてしまうと、そもそもの工数を下げるという目的から逸れてしまいます。細かくデザインを作り込むのではなく、画面サイズでの最適化であるとクライアントと共通認識をとり制作を行うことでコストを下げながら、レスポンシブデザインのベネフィットをキープできます。

2. Media Queryを使用しないワンソース、同一URL

Googleが推奨したことでさらに実装サイトが増えることも予想されるレスポンシブデザインですが、「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」を読んでみるとGoogleは「ブラウザサイズによる可変デザイン」を推奨している訳ではありません。
Googleが推奨しているのは、ワンソース、同一URLのスマートフォンでも操作しやすいサイトです。

次に紹介するサイトは、いわゆる画面幅反応型のレスポンシブデサインではありませんが、レスポンシブデザインのもつ

  • スマートフォンでの操作しやすいインターフェース
  • ワンソース、同一URLのためSEOに効果が期待できる
  • シェアやリンクが簡単にできる
  • 制作工数がかからない

という特徴を満たしています。

L’Oreal Paris ブランドサイト

http://www.lorealparisjapan.jp/

07

こちらのサイトは、ワンソース(コンテンツ部)、同一URLの形式でありながら、Media Queryでの画面幅切り替えをおこなっていません。

コンテンツ部分はPC、スマートフォン同一のものを使用し、スマートフォンで操作しづらいグローバルメニューのみを最適化するというものです。Media QueryではなくUser-Agentにより機種を判定し、PCとスマートフォンでphpでインクルードしたグローバルメニューを出し分けています。

コンテンツ部分は設計段階より、スマートフォンで操作することを前提にクリックエリア・各パーツを大きく設定し、指で操作した場合でもストレスを軽減するようにしています。
結局ページのフォーマットが変わればその分だけ、デザインをデバイス分作成しCSSを書き分けなければならないレスポンシブデザインと異なり、この場合、PCとスマートフォンでことなるのはグローバルメニュー部分のみなので、数百ページにわたるような大規模なサイトになればなるほど、工数の軽減を図ることができます。

繰り返しますが、制作会社はお客様にバリューを提供しなければなりません。

制作側から見れば、ブラウザサイズを大きくしたり小さくしたりして小気味よく可変してくれるレスポンシブデザインは大きなロマンを感じる技術ですが、そもそもスマートフォンではブラウザサイズを変更できませんし、一般ユーザーがそのような特殊な行動を起こすことはまず考えられません。

制作側のエゴにならず、クライアントバリューを最大限提供できるマルチデバイス対応を提案する際には、いかにコストを抑え、ワンソース、同一URLのでどんなデバイスでも見やすいWebサイトの制作ができるかという点が、制作側の課題となります。

一方で、マルチデバイスの提案を受ける側にもコストに見合ったバリューを享受できるのかという危機感が必要ともいえます。発注者様側からみれば、ページ数やコンテンツ内容に応じて適切なマルチデバイス対応方法を選択することで、浮いたコストはコンテンツ制作に投資することも可能になります。

日々増加しているスマートフォンやタブレット端末のユーザーに使いやすく読みやすいコンテンツを提供でき、ブランドにとってもバリューがあるサイトとなるように試行を重ねて制作を行うのがこれから求められていくのではないでしょうか。

ブランドパーソナリティを表現するWebデザイン

人の行動というものは大抵において衝動的であり、その判断は感覚的で不合理です。一見論理的な行動に見えても、そのほとんどは潜在的な感情に左右され、論理的な思考に達する前に決断が下されているものなのです。行動や判断において、人は情緒や感情から逃れる事はできません。そのため、私たちはデザインの情緒的側面を無視する事ができないのです。15世紀にカリグラフィを基にデザインされたヨハネス・グーテンベルクの活版印刷機から、今や誰もが愛してやまないアップル製品まで、私たちは常に機械のデザインに使いやすさや機能性以上の「パーソナリティ」を求め続けてきました。

Webデザインにも機能性だけでなく、情緒的なつながりを実現するパーソナリティが必要です。Webサイトが効果的に使用されるためには、機能性・見た目の美しさに加え、ユーザーが共感できる独自の特徴や視点を表現しなければなりません。また、Webデザインを通じたパーソナリティの表現はユーザーだけでなく、ブランドにとっても重要です。パーソナリティは競合がひしめく市場の中でブランドを差別化し、ユーザーの心を動かし、ブランドを長く記憶に残します。

では、Webデザインはどのようにブランドのパーソナリティを表現するのでしょうか?いくつかの事例を見てみましょう。

Fanta

web-design-for-brand-personality-1

FantaのWebサイトは過去に米アナリスト・ファームForresterのブランドイメージレビューの合格点を獲得した数少ない事例です。コンテンツだけでなく、フォントや背景などからファンタらしい「楽しさ」が伝わってきます。ボタンやフォームの要素などは汎用的なデザインですが、全体を通じて独特のブランドパーソナリティの表現に成功しています。

Mail Chimp

web-design-for-brand-personality-2

Webデザインにおけるブランドパーソナリティの事例として頻繁に用いられるのが、メール配信サービスのMail Chimpです。ブランドのシンボルであるチンパンジーのフレディー・ヴォン・チンペンハイマー4世にはブランドのペルソナが込められ、ソフトウェア会社のWebサイトには珍しいちょっとしたユーモアと親しみやすさを与えています。しかし、「使いやすさ」や「やさしさ」のパーソナリティを持つブランドとして、Mail Chimpはフレディーを必要以上に使うことはありません。代わりにインターフェイスのデザインをシンプルにし、明るい色や、丸みを帯びたボタンなど、人にポジティブな感覚を与えるデザインを施しています。

※フレディーのペルソナはこちらからダウンロードできます。

Aflac

web-design-for-brand-personality-3

Mail Chimpのシンプルなインターフェイスとは異なり、多くの情報の入力を必要とするAflacのサイトではお馴染みのアヒルがフォームに登場します。保険というシリアスなトピックであるにも関わらず、威圧感は無く、親しみと信頼を感じさせます。

Crayola

web-design-for-brand-personality-4

クレヨラのWebサイトには「創造性」を感じさせる細かいデザインが施されています。タイトルの文字が1文字ずつ色が違っていたり、ボタンの背景がクレヨンで塗りつぶされたようになっています。ちょっとした工夫ですが、Webサイトという機械ではなく、「創造を楽しんで欲しい」と思う人とのインタラクションを感じさせます。

Jack Daniels

web-design-for-brand-personality-5

テネシー・ウイスキーのJack DanielsのWebサイトでは、ボトルのデザインに合わせたデザインエレメントだけでなく、1つ1つのコピーからブランドのパーソナリティが伝わってきます。例えばニュースレターの登録ページでは「友人」や「つながり」という言葉が含まれ、まるでアメリカ南部の訛りまで聞こえてきそうな口調で書かれています。

Domino’s Pizza

web-design-for-brand-personality-6

これはWebサイトのインターフェイスからブランドパーソナリティがほぼ排除された事例です。例えば左上のロゴを競合のものと入れ替えたとして、大きな違和感を感じるでしょうか?このように機能性だけを追求したデザインの場合、インタラクションはポジティブな体験を生み出すことはできず、少しの機能性の問題が完全にネガティブな体験になりかねません。食品のサイトであるにも関わらず、まるで味や質感が全く無い食事をしているかのような気持ちにさせられます。

誰でも使いやすさより、魅力を優先して買うものを選んだことがあるはずです。このように、人は必ず、論理的な判断をする前に情緒的な反応をしてしまいます。美しく、共感できるデザインからはより優れた機能的な結果が得られるという研究結果も存在します。それでも毎日使うWebサイトのデザインにおいて、情緒的な表現やパーソナリティの重要性を見過ごすことができるでしょうか?

ユーザービリティはとても重要です。食べ物も「美味しい」ことである前に「食べられる」必要があります。しかし食べ物の味や質感のように、デザインにパーソナリティが無ければ、Webサイトの体験はせいぜい苛立つものか、良くてもつまらないものにしかなりません。ポジティブな体験を生み出すためにはパーソナリティが不可欠なのです。

まずはあなたのブランドのWebサイトが独自の特徴を伝えているか、またはポジティブな気持ちにさせてくれているかを確認してみましょう。

Webデザイナーなら知っておきたいWebタイポグラフィの基本

Webサイトを閲覧していて、文字を読まないということは滅多にありません。情報アーキテクチャの先駆者として世界的に有名なInformation Architectsは、「Web Design is 95% Typograpy」という記事で、「Webデザインの95%はタイポグラフィである」と述べています。 私たちの行動は文字によって喚起されます。例えば、オンラインショッピングをするときに、商品のイメージだけで購入することはほとんどないのではないでしょうか。価格をはじめ、特徴や仕様、レビューなど、文字が伝える情報を咀嚼して購買を決定しているはずです。オンラインショップは実店舗とは違い、商品を手にとって確認することができませんから、文字から伝わる情報がより重要性を増すのです。 これらは、タイポグラフィのデザインがWebデザインにとって無くてはならない役割を担っている証拠だと言えるでしょう。

それでは、Webデザイナーがタイポグラフィを用いて最適なコミュニケーションをするためには、どのようにすればよいのでしょうか?

Webタイポグラフィの役割

タイポグラフィによって情報を伝える方法は、「文字を見せる」ことと「文字を読ませる」ことの2つに大別されます。

文字を見せる

web-typography-basic-2

タイポグラフィには、サイズ、カラー、フォント、ウェイト(文字の太さ)など、デザインすべき要素が数多く含まれています。 例えば、線の太いゴシック体は男性的な印象を与え、逆に線の細い明朝体は女性的な印象を与えるなど、たとえ同じ文言を用いたとしても伝えられるイメージは千差万別です。

このような「見せる文字」は、しばしばキャッチコピーやロゴテキストに用いられ、ブランドイメージを伝えるための重要な役割を担ってきました。 これらの要素をうまく組み合わせることが、デザインクオリティを研ぎ澄ませ、ひいてはブランドイメージを向上させることに繋がります。

文字を読ませる

web-typography-basic-3

イメージを伝える「見せる文字」とは逆に、本文や脚注などの文章に用いられる「読ませる文字」は、情報を正確に伝える必要があるため、可読性・視認性に優れていなければなりません。 WebデザインではDTPとは違い、OSが出力するデバイスフォントを用います。これらのフォントはカーニングなどによる可読性の調整こそ困難ですが、CSSを用いた簡単な指定だけでも、文章の読みやすさを大幅に向上させることが可能です。 このような「読ませる文字」は、情報の受け取りやすさに大きく影響します。それはすなわち、ユーザビリティ・アクセシビリティに配慮することと同義なのです。

「見せる文字」なのか、それとも「読ませる文字」なのか、タイポグラフィの役割を考え、それぞれに最適なデザインをすることは、Webデザイナーにとって必要不可欠なスキルです。では、具体的にどのようにしてタイポグラフィをデザインすればよいのでしょうか?もちろんデザインに正解はありませんが、タイポグラフィにはルールとも言えるいくつかのセオリーが存在します。次の項目では、Webデザイナーが必ず身に付けたい、基本的なTipsをご紹介します。

Webタイポグラフィのクオリティを上げる基本的な5つのTips

これらのTipsは文字を見せる場合にも、文字を読ませる場合にも使える重要なテクニックです。タイポグラフィのセオリーはこの他にも数多く存在しますが、ここでは代表的な例をご紹介します。

1. 文字間を詰める

web-typography-basic-4

漢字、カタカナ、ひらがな、アルファベットなど、全ての文字はそれぞれの左右に異なる空白を持っています。そのため、グラフィックソフトでテキストを打ち込んだだけでは、文字間の空白がバラバラなため、乱雑な印象を与えてしまいます。このような場合は「文字詰め(カーニング)」を行い、それぞれの空白を調整しましょう。例えば、「クレジットカード」という文言の場合、「ッ」の左右や「ト」の左が大きく空いているため、これらを調整すると整った印象を与えることができます。

2. 大きさ・位置を揃える

web-typography-basic-5

同じフォント・同じ種類のテキストでも、文字の種類によって大きさや位置は大きく異なります。一般的に、漢字はひらがな・カタカナよりも大きく、逆にアルファベットはひらがな・カタカナよりも小さいとされています。特に和文と欧文で違ったフォントを用いる「混植」を行う際は、それぞれの大きさ・位置がバラバラにならないように、バランスを整えるようにしましょう。 上記の例では、欧文のサイズを大きくする他に、「!」のような「約物」と呼ばれる記号のバランスも整えています。

3. 動きを持たせる

web-typography-basic-6

上記で紹介した文字を揃えるテクニックとは逆に、大きさや位置を不揃いにして動きを出すことによって、特定の情報を強調する方法もあります。例えば、「円」や「年・月・日」などといった単位を表す文字については、サイズを小さくすることで、より重要な情報である数値の部分を強調することができます。同様に「を」や「から」といった助詞となる文字を小さくする方法も、情報の意味を強調する有効な手法として、広く用いられています。

4. 文字を変形させる

web-typography-basic-7

文字の縦横比を変えることで、本来持っていた印象を大きく変えることができます。例えば、「長体」と呼ばれる横幅を狭くした文字はすっきりとした印象を与え、逆に「平体」と呼ばれる縦幅を狭くした文字はどっしりとした印象を与えます。これらのテクニックは文字の印象を変えるだけでなく、限られたスペースに多くの情報を掲載するためにも有効です。また、「斜体」と呼ばれる文字を傾ける手法も、スタイリッシュな印象を与えるためにしばしば用いられます。

5. 行間と行長を調整する

web-typography-basic-8

複数行にわたる文章については、行間と行長を調整することが、文章の読みやすさを大きく左右します。一般的に、行間については150〜190%の値が読みやすいとされ、行長については最長で30〜40文字、最短で13〜15文字程度が読みやすいとされています。これらの基準値は、サイズやフォントといった様々な条件によって最適な値が変わるため、状況に応じた判断が必要となるでしょう。例えば、行長が長い場合は行間を広めに、逆に行長が短い場合は行間を狭めにすると読みやすくなります。

これらのセオリーを知っていると知っていないとでは、Webデザインのクオリティに大きな隔たりが生じます。Webデザイナーのプロとアマチュアの違いは、ここにあると言っても過言ではありません。逆を言えば、たったこれだけのセオリーを意識するだけで、一定以上のクオリティを保ったタイポグラフィをデザインをすることが可能だということです。

Webタイポグラフィのスキルを向上させるために今すぐできること

web-typography-basic-9

まずは様々な事例を見て、タイポグラフィから得られる情報に違いがあることを学びましょう。例えば、FICCのベストプラクティスであるシックレリッシュのブランドサイトでは、「ゴシックMB101」という同じフォントを用いているにも関わらず、ウェイトやカーニングが大きく異なるため、全く違った印象を与えていることがわかります。 このように、ターゲットユーザーの違うWebサイトを見比べてもいいですし、straightline bookmarkS5-StyleのようなWebデザインギャラリーサイトのタグ機能を利用して、同じジャンルのWebサイトを見比べてみても面白いでしょう。 そのときは、上記で紹介したTipsを意識するようにしてみてください。そこで気付いたことがあれば、忘れないうちにメモを取ってください。これらを繰り返し行うことで、デザインの引き出しが増え、タイポグラフィを見る目が養われるはずです。

普段Webサイトを閲覧する際に、少し意識を変えてみるだけでも構いません。たくさんの優れたタイポグラフィに触れることが、あなたのタイポグラフィスキルを向上させる第一歩となるのです。

□ ターゲットユーザーの違うWebサイトを見比べて、タイポグラフィの違いをメモにまとめる
□ 同じジャンルのWebサイトを見比べて、タイポグラフィの違いをメモにまとめる
□ 普段Webサイトを閲覧するときにも、タイポグラフィを意識して見るようにする

Webサイトのリニューアルを行う前に問うべき5つの質問

ビジネス目標を達成できなくなった時、Webサイトはリニューアルを迫られるものです。しかし、全面的なリニューアルは、部分的な改修より高額であり、より多くのリスクを含みます。高額な投資が無駄になるだけでなく、機能しないWebサイトからの乗り換えができなくなる可能性もあります。しかし、リニューアルをいつまでも先送りしていては、ビジネス目標の達成は出来ず、多くの機会損失にもつながります。

Webサイトのリニューアルを成功させるためにはまず、以下の5つの質問に答えましょう。

1. ターゲットと訪問者の属性は一致しているか?

現在あなたのWebサイトには誰が訪れているでしょうか?まずは訪問者の属性を流入キーワードの解析やアンケートから調べましょう。アンケートはGoogle Driveのフォーム機能やSurveyMonkeyなどを使って無料で作成することができます。ターゲットがWebサイトを訪れていなければ集客施策を見直す必要があります。ターゲットが誰であり、誰がWebサイトを訪問しているかを知ることで、Webサイトが応えるべきニーズや行うべき集客施策がわかります。

2. 訪問者が求めているコンテンツは何か?

Webサイトには有益なコンテンツが必要です。もしあなたのWebサイトが製品カタログに登録フォームを付けたようなものであれば、それはターゲットにとってあまり有益なものであるとは言えません。コンテンツマーケティングの重要性を認識し、ターゲットが学べる情報、活用できる情報、楽しめる情報を提供する必要があります。Webサイトの訪問者が求めるコンテンツが何であるかを考え、リストアップしましょう。

3. 訪問者に行って欲しい行動は何か?

目的が「情報を伝える」だけであれば、Webサイトは必要ありません。Webサイトは本来インタラクティブなものであり、ユーザーに特定のアクションを完了させるためにデザインされるべきです。あなたのビジネスに大きな影響を与えるユーザーアクションは何になりますか?ユーザーに行って欲しい行動をリストアップし、優先順位を付けましょう。

4. 目的を達成するデザインができているか?

これまでの項目でどのようなコンテンツを提供し、何を行って欲しいかが分かれば、それを訪問者にできるだけ簡単に達成させることがおのずとWebデザインの目的になってきます。ページの設計やコンテンツの内容、ボタンなどのインタラクティブ要素のデザインなどを最適化し、目標の達成を実現しましょう。

また、デザインの仮説を立てる前に、既存のWebサイトについても把握しておきましょう。ユーザーが離脱しているページはどこであり、その理由は何なのか?これらの問題点を正確に把握することでリニューアルが解決すべきことがわかります。

5. パフォーマンスを継続的に改善できるのか?

実はこれだけをやっても残念ながらあなたのリニューアルは成功しません(少なくとも一回では)。成功に近づくことは出来ますが、常に改善の余地は残るはずです。訪問者の行動を完全に予測するために必要な情報を揃えることは出来ないため、継続的な改善が必要となります。

リニューアルを依頼するデザイナーや制作会社には必ず継続的な改善を行う能力を求めましょう。また、継続的な改善を行うためのリソースも必要です。公開後も解析と改善を繰り返す準備をしてください。

Webサイトのリニューアルは大きなプロジェクトです。大きな投資であるだけでなく、将来の業績にも大きく影響します。しかし、オンラインでのビジネスを推進するためには必要なリスクなのです。リニューアルを検討するあなたにできる最善のことは準備をすること。これら5つの質問に答えて、プロジェクトに臨みましょう。

  1. ターゲットと訪問者の属性は一致しているか?
  2. 訪問者が求めているコンテンツは何か?
  3. 訪問者に行なって欲しい行動は何か?
  4. 目的を達成するデザインができているか?
  5. パフォーマンスを継続的に改善できるのか?