自分自身は経営者兼デザイナーとして仕事をし、今まで多くのデザイナーを見てきました。その私の経験則でいえば、デザイナーは大きく4つのタイプに分類できると考えています。例えば採用面接などで新たにデザイナーと出会った際には、まずはこの4タイプを手がかりにして、その方の理解を深めていったりします。

私が考えるデザイナーの4つのタイプとは、縦軸に「挑戦的」「保守的」、横軸に「感覚的」「論理的」を置いた4象限で表現できます。以下がその図です。

ここからは、理想実現型、成果追求型、共同作業型、実務遂行型の順に、それぞれのデザイナーの典型的な特徴について、もう少し詳しい解説を行っていきます。

自らが考えるデザインの理想を実直に追求するタイプのデザイナーです。

言語化できない感覚的・エモーショナルな領域を大切にします。デザイントレンドにも敏感です。「ダサい」ことを極端に嫌います。口癖は「本当にいいものが作りたい」です。ただし「いいもの」の定義は曖昧で、多くの場合は「自分がいいと思うか」に帰結します。ビジュアルに寄ったデザインを特に好む傾向があり、未熟なデザイナーはUXやユーザビリティやコンテンツよりビジュアルの印象を優先する傾向があります。

仕事のモチベーションは高く、非常に勉強熱心です。自分がいいと思うものを作るためなら時間を惜しみません。ディテールが好きで、普通の人が気づかない細部にも心血を注ぎ込みます。デザインのあるべき姿について語りだすと止まりません。勉強熱心なので基本的にはとても優秀です。あるいは優秀に育ちます。

ただし自我、あるいは承認欲求が強い部分がマイナスに働く場合もあります。ビジネス上の要求と承認欲求が対立する場合、理由を付けて後者を優先させる傾向があります。自らの美意識にそぐわない仕事が続くと会社を辞めてしまいます。給与や待遇、福利厚生、最新のマネジメント、売上や生産性は、モチベーションの源泉にはなりません。経営やビジネスサイドの理屈は頭で理解できても、それだけでは気持ちが付いていきません。近年のUXデザインの潮流に対して、その基本的な考え方に理解を示しつつも、手を動かすことができない人たちが「デザイナー」と名乗っていることを歯痒くも思っています。

新しいことに挑戦し、創造性を発揮する仕事を好みます。半面、ルーチン作業や事務処理が苦手です。仕様書や原稿をなぞるような仕事をさせるとミスを連発する傾向があります。バナーやLP制作の仕事ばかりになると会社を辞めたくなります。

結局は自分の感性を優先させるため、筋の通った言語化はやや苦手です。自分のアイデアや好みが採用されるための都合のいい理由付けをしてしまう傾向があります。ビジネスに貢献したいという気持ちはウソではありませんが、業界内の尊敬する先輩デザイナーたちから「すごいね！」「いい仕事してるね！」と評価されること方が嬉しかったりします。コンバージョン率が2倍になることより、デザイン賞を獲得することの方に喜びを感じます。オールドスクールなデザイナー像に近く、美大や美術系専門学校からデザイナーになる人に比較的多いタイプともいえます。

成果を上げなくては意味がないと考えているタイプのデザイナーです。

成果といっても「ブランディングに貢献する」といった曖昧な成果ではありません。利用者が増える、売上が上がる、コスト削減される、といった事業に直接影響する成果を求めます。近年のビジネスシーンで特に求められているデザイナーともいえます。元々理想実現型のデザイナーであったけど、紆余曲折を経て成果追求型になる場合もあります。ビジネスの成長・課題解決のためにデザインしているという点でいえば、本質的な意味でのデザイナーであり、スタートアップや事業会社が求めるタイプのデザイナーともいえます。ただし成果主義が行き過ぎて、デザインをドライに捉えすぎる傾向もあります。

目に見える数字以外の成果を軽視するため、感情に作用する非言語化領域／非数値化領域に無頓着です。理想実現型と同じく、モチベーションが高く勉強熱心な人が多いですが、優秀な理想実現型デザイナーが時に作りあげるような、一目見て心を鷲掴みされるようなデザインを作るのはやや苦手です。

業界のデザイナーの間での評価などはあまり気にしておらず、デザイナーより経営者やマーケターとの交流を好みます。勉強熱心であるためデザインには詳しいですが、例えばタイポグラフィなどのデザインの細部を深堀するより、マーケティングや経営などに興味が向かいがちです。UXデザインに対して好意的な印象を持ち、求められれば自らそれを利用します。A/Bテスト、グロースハックといった経験、知識も持っています。

このタイプも成長や挑戦を感じられない仕事は好みません。事業が安定してルーチンワークが多くなると、仕事や会社に興味を失いがちです。ルールやガイドラインを作ることは楽しめますが、それらを厳格に遵守することにモチベーションが保てません。特に他人が作ったルールは、守るより壊したいと思うタイプです。事業の立ち上げに関わることに喜びを感じるため、ジョブホッパー的なキャリアを歩むことも珍しくないでしょう。

チームで一緒にいいものを作り上げることにやる気を見出すタイプのデザイナーです。

クオリティや数字といった成果より、メンバーが喜んでいる、顧客が満足している、といった人間関係におけるポジティブな結果を大事にするタイプです。良いデザインを追求するうえで良好な人間関係や信頼関係の構築が重視だと誰よりも強く感じています。そのための関係構築が自らの強みと考えています。

チーム意識が高く、チームワークを大切にする反面、デザインや技術のトレンドにはやや疎い傾向もあります。不真面目な怠けものではありませんが、理想実現型や成果追求型ほどストイックに勉強しません。コミュニケーション能力が高く、それ故に知識や技術ではなく人間関係で問題を解決しようとしがちです。スキルや知識ではなく、人間関係に依存した仕事の仕方をする傾向があります。プレイヤーとしてあまり優秀でなくても、ディレクターやマネージャーになったときに才能が開花する可能性があります。

人間関係に依存した仕事を好むため、周囲に流されます。保守的な環境で働くとそれに馴染み、時代の変化に気づかず、いつまでも古い価値観を持ち、時代遅れの仕事の仕方をし続ける可能性があります。学習意欲が高すぎる理想実現型や成果追求型からは尊敬されないこともあります。

このタイプがチームリーダーになったとき、衝突を好まず、周囲の顔色を見すぎた結果、中途半端なデザインになるリスクがあります。短絡的に協調することを優先するがゆえに、成果やクオリティを追求せず、納期や顧客満足をゴールに仕事をし、結果として目立った成果が出ないというパターンに陥ることもあります。

組織やチームの規模がある程度大きくなると、デザイナーたちとの潤滑油的な存在として必要となります。また、共同作業型のデザイナーばかりを集めると、アットホームで衝突の少ない、一見過ごしやすい組織になります。ただし協調性を重視するあまり、ビジネスやデザインに対して妥協するような風土が生まれ、知識やスキルを軽視し、組織力が低下するリスクも高まります。

与えられた職務をきちんと丁寧に遂行していきたいと考えるタイプのデザイナーです。

明確な指示を好み、速やかに対応します。曖昧な指示は好まず、場合によっては指示を出した側に差し戻します。9時-5時の働き方を好み、朝令暮改を嫌います。理想実現型や成果追求型のような時間を惜しまない働き方はブラック労働の温床と考えています。仕事以外に大事なことがあり、デザインは経済的手段と考えています。

0から1を生むことも1を10にすることも苦手ですが、10から11、12、13と段階的に改善するアプローチは得意です。創造的ではないと思われがちですが、経験者の発想力は豊かであり、それなりのクオリティのデザインを素早いペースで生み出すことができます。労働生産性が高く、作業量が読みやすいため、このタイプのデザイナーのスケジュール管理は容易です。創造的でなくともプロ意識は強く、ルール厳守、時間厳守を徹底します。

一般的なデザイナー像からするとクリエイティブではなく、デザイナーではない、とすら言われる可能性もありますが、組織がある程度の規模になると確実に必要になってきます。特に決まったスケジュールで決まったタスクが発生するサービス、運用案件を多く請けている受託会社では、地味な仕事に不満を言わずコツコツとミスなく時間内に仕上げてくれる彼らは非常に頼もしい存在になります。

元々デザイナーになりたかったわけではなく、消去法でデザイナーを選んできた人が多いです。そのためそれほど勉強熱心ではなく、同じやり方を繰り返します。トレンドには疎く、勉強会などにも参加せず、業界の著名人なども知りません。ただし仕事はでき、ルールの整備や品質構造の取り組みなどを任せると結果を出します。組織の立ち上げ期、成長期には不向きですが、拡大した組織を維持するフェーズで俄然必要とされます。

デザイナーのいる組織でよくある問題

このように同じデザイナーであっても、デザイナーのタイプによってモチベーションの源泉や価値観、最適な接し方は大きく異なります。そのことを考慮せずにデザイナーを採用したり、プロジェクトを編制したりすると、例えば以下のようなことが起こりえます。

例1）売上や生産性の話をしてもやる気を出してもらえない

理想実現型や共同作業型のデザイナーで起こりがちです。売上や生産性は、組織やビジネスを発展・維持ために必要ということは、多くのデザイナーは頭では理解できています。しかし仕事のモチベーションの源泉がそこにないデザイナーにとっては、そのことが仕事に関心を持つ理由にはなりません。仕事に対する感覚的・感情的な不満が解消されなければ、いくら売上や生産性の面から見て合理的な取り組みや説明であっても、心理的な問題の解消に繋がりません。

特に理想実現型は「売上や生産性の面で大事なんだ」といくら丁寧に説明をしても、彼らの美意識を満たすような仕事を提供できず、ルーチンワークや、ルールやガイドライン遵守の性質の強い仕事ばかりさせていると、やがてその会社から去っていくことでしょう。

例2）ディレクションの仕事を頼んでいたら辞めたいといわれた

基本的に、デザイナーを管理できる人材というのは非常に希少です。そのため、デザイナーが2人、3人と増えていくと、一番優秀なデザイナーに彼らの教育や管理を任せてしまいがちです。しかしこの判断こそが、優秀なデザイナーを失う切っ掛けになります。

特に理想実現型、成果追求型は、一日の大半を人の管理や調整で過ごすようになると、かなりの確率で辞めたくなってきます。事実私もデザイナーとしてまだまだやりたい時にディレクター職を命じられ、会社を辞めようと決意しました。今となってはその経験が良かったと思える面もありますが、やはり本人が心から納得していないディレクターへの配置転換は避けるべきと考えます。

そもそもデザインを通じて何かを作り上げる仕事と、教育や管理の仕事とでは、喜ぶポイントが全く異なります。経営者や管理者の中には「教育や人の管理もクリエイティブの一貫だ」などと強引な理屈を立てる人もいますが、その二つを自然に結びつけて、心から納得して捉えることは非常に困難です。多くのデザイナーは「こんなことをするためにデザイナーになったのではない」と思うことでしょう。

基本的に、デザインの仕事に満足しているデザイナーにはデザインの仕事をさせ続けるべきです。彼らにマネジメント業務をさせるのは、彼ら自身が自発的に、「マネジメントがやりたい」「自分にはマネジメントの経験が必要だ」という気持ちになる、そう言いだすまで、待つしかないのです。

例3）デザインに関心がない人の下で働きたくないと言われた

これも特に理想実現型、成果追求型のデザイナーにありがちな発言です。デザイナーに限らず、多くの人は仕事に「生活の質」と「仕事の質」の向上もしくは安定を求めています。生活の質とは、給与、勤務体系、福利厚生などです。仕事をするうえで生活の質を重視する人は多いでしょう。多くのデザイナーにとってもそれはとても大事で、許容できる最低限のラインというものがあります。

しかし一方、生活の質だけではやる気が出ないのがデザイナーです。意識の高いデザイナーほど仕事の質にも非常にこだわり、時には生活の質が低下しても仕事の質の向上を選ぶこともあります。私自身も一般のサラリーマンからデザイナーに転職した際に年収が半分になりましたが、デザイナーになりたくて仕方がありませんでしたし、デザイナーの仕事が楽しくて仕方ありませんでした。

ともあれ、多くのデザイナーにとって、仕事を通じて、仕事の質を上げる体験ができるということは非常に重要です。そのためには、「誰と働くか」ということが重要な条件となります。デザイナーももちろん馬鹿ではないので、すべての経営者や上司がデザインに精通してくれるとは思っていません。非デザイナーがデザインのことを知らないのは当たり前ということは分かっています。

しかし、上長が「デザインに無関心」となると話は別です。知らないなりにも興味は持ってほしいと考えています。にも関わらず、「おれにはよくわからん」といって権限委譲という名の無関心と放置を繰り返していると、デザイナーはやがてそういう人の下で働きたくない、もっと価値を分かってくれる人の下で働きたい、と思い始めます。デザイナーにやりたいようにやらせているのに、ある日突然「辞めたい」と言われてしまうのは、このパターンが多いです。勘のいいデザイナーは人の無関心を見抜くのです。

例4）凡ミスが多い

理想実現型や成果追求型は、作る過程からある程度形が見えて固まるくらいまでにモチベーションのピークがあるため、ある程度の完成が見えてしまうと緩やかに集中力を失っていく傾向があります。ここでいう完成とは、納品という意味ではなく、それぞれが理想とする形がようやく見えた、と思える状態です。

そのため、最終段階でのチェックなどで抜け漏れや凡ミスをしてしまうデザイナーが多いです。ゼロ段階から没入して作っているため、客観的な視点を失い、当たり前のミスに気付かなくなる傾向もあります。これはデザイナーの注意力というより、人間が誰しも持っているバイアスであり、普遍的な特性であるともいえます。

もちろん、あまりにもミスが多すぎる場合には、ミスが発生しにくい制作プロセスへの見直しやチェックシートによる自助努力を促す必要もあります。しかしそもそもデザイナーに対して一番期待していることは、一片のミスもなく完璧に仕事をすることなのでしょうか。多くの会社や組織は、デザイナーには他の職種が持ち得ていない発想力や視覚化能力に一番期待しているのではないでしょうか。もしそうであれば、ミスを神経質に指摘してデザイナーを委縮させてしまうより、自由に発想させる環境作りを優先し、ある程度のミスはワークフローで吸収することを考えるべきです。

またあるいは、決まった通りのことを決まった通りにこなしてほしいのであれば、実務遂行型のデザイナーに仕事を依頼すべきです。ただし彼らは、創造的な仕事が苦手な傾向もあります。デザイナーだからと言って、なんでもかんでもできると考えるのはやめて、他の職種と同じく、適材適所で考えていかなければなりません。

例5）残業がなく給与も低くないのに辞めたいと言われた

サービスが安定稼働してきたり、受託でも継続案件が増えてきたりすると、売上も経営も安定します。やがて給与水準が上がり、労働環境も安定します。経営者としては望ましい状態です。しかしデザイナーにとっては必ずしも望ましい状態とは限りません。

サービスや事業が安定してくると、徐々に保守や運用の仕事が増えてきます。デザイナーも小さな改善や更新業務が増えてきます。しかしこれは、「ゼロからデザインを作りたい」「色々なデザインを経験したい」という志向のデザイナーには苦痛な環境です。こういったデザイナーを満足させ続けるためには、「デザイン的な挑戦」ができる環境を作り続けなくてはなりません。さもなければ、残業もなく給与も悪くないのに優秀なデザイナーが辞めてしまう、という事態を止めることは難しいでしょう。

例6）デザイナー同士が仲良くない

デザイナー同士であれば、同じ職種同士、似たような価値観で、阿吽の呼吸で仕事をしてくれるのと思いがちです。しかし現実はそんなに甘くはありません。それどころか、同じデザイナー同士だからこそ、仕事に対する価値観や働き方の違いを許容できない、という事態も起こりえます。

例えば、理想実現型デザイナーには、他のデザイナーが以下のように見えている可能性があります。

成果追求型からはこう見えているかもしれません。

共同作業型はどのタイプのデザイナーとも比較的うまくやっていけるでしょうが、それでも本心ではこう思っていたりしませんか。

また実務遂行型にとっては、他のタイプのデザイナーはこのように見えていないでしょうか。

ここにあげた例はやや極端なものですが、お互いが本心で認め合っていない状態のまま一緒に仕事をしていると、日々のコミュニケーションがうまく行かなくなり、アウトプットの質にも影響を与えます。

ここでいうそれぞれのタイプは、デザイナーが意識的・計画的に身に付けたものではありません。幼少期から成長期を経て社会人になるまでの一連の人生経験の中で培われた価値観などに基づいており、急に別のタイプのデザイナーに変わることは極めて困難です。

そのため、会社やチームとしてやれることは、以下のようなことに限られてきます。 

1. どの種類のデザイナーを採用するか、採用段階から方針と基準を決める
2. 仕事における最低限必要な価値観を、デザイナー同士できちんと合わせる
3. 異なるタイプのデザイナーと協業することの意義を、常日頃から啓蒙する

なお、2や3のためのツールとして行動指針があげられます。しかしこの行動指針も、抽象的で耳当たりが良い綺麗事ばかりでは意味はありません。仕事の中でどのような行動・判断を取ることを会社として推奨するのか、それを具体的に表明したようなものでなければなりません。また当然ながら、それを浸透させる活動がなければ、絵に描いた餅になるだけです。

まとめ

ここまで、私が考えるデザイナーの4つタイプを中心に紹介してきました。当然ですが全てのデザイナーがこの型に収まるというわけではありません。またこの型に収めてデザイナーを理解しましょう、という話でもありません。これは、千差万別なデザイナーを理解する手がかりの一つにすぎません。

イベントなどで経営者や管理者の方から話を伺うと、「デザイナーのマネジメントに苦労している」といった悩みを打ち明けられることがあります。実は私自身は「デザイナーをマネジメントする」という言葉に若干抵抗があります。なぜなら私自身もデザイナーであり「マネジメントする」という言葉に、クリエイティブとは正反対のニュアンスを感じるからです。

しかし一方、私は経営者でもあるので、「デザイナーのマネジメント」と呼ばれる領域で悩みを持つ方の気持ちもよく分かります。私自身、似たようなことで今まで数多く悩んできました。さらにいえば、未だに「こうすればいいですよ」といえる正解を持ってもいません。

しかし、このように難解で正解の見えないデザイナーのマネジメントについて、忘れてはいけない大事な視点が一つあると思っています。それは「なぜ彼・彼女は、数ある職業の中からあえてデザイナーを選んだのか？」ということです。

働いて生計を立てるためであれば、数多くの選択肢があります。もっと楽な仕事、もっと華やかな仕事、もっと穏やかな仕事、もっと儲かる仕事を選ぶことだってできたはずです。しかしそれらを選ばず、彼・彼女はデザイナーになりました、そこには、デザイナーに繋がるその人だけの人生とストーリーがあるはずです。

そのストーリーの先を会社が描いてあげられるのか、そのストーリーと人生に、きちんと本心から関心を持ち、（迷惑がられない程度に）向き合ってあげられるか。それがデザイナーをマネジメントする経営者や管理者には、最低限不可欠な視点ではないかと思うわけです。

こういった大前提を理解した上で、ここで紹介したタイプ別のデザイナー特徴を一つの参考にしていただけると幸いです。

近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自身がデザイナーでなくとも、デザインをジャッジすべき立場になることも当然あるでしょう。

非デザイナーであっても、仕事の中で色を扱うシーンは他にもあります。PowerPointで文書作成をするとき、誰もが色を用いるでしょう。色の知識があればより効果的なドキュメント作成が可能になります。このように考えると、色はデザイナーだけの専門知識ではなく、デザインに関わるビジネスパーソンを含めたすべての人が知っておくべき基礎知識の一つではないでしょうか。

このエントリーでは、デザイナー以外の方が読むことを想定し、最低限知っておくといい色と配色の基本をまとめました。基本なので、細かいことは端折って簡単にまとめています。しかし、駆け出しのデザイナーでも十分参考にできる骨太な内容ではないかとも思います。

基本とはいえ、いきなりすべてをマスターする必要はありません。理解できる部分から使うという考えでまったく問題ありません。この記事をブックマークしておき、必要になったら読む、ということを繰り返していれば、1～2年もすればあなたにデザイナー並みの基本的な色の知識が身に付いているでしょう。

発色方法

まず手始めに、色には2種類の発色方法があることを知っておきましょう。

加法混色

黒を下地とし、色を重ねるごとに白に近づきながら色を作り出していく発色方法です。スマートフォンやPCのスクリーンにおける発色はこれにあたります。R（赤）、G（緑）、B（青）の配分を変えていくことで、様々な種類の色を生み出します。

加法混色は、光による混色とも言えます。そのため、光を出力する装置が必要になります。このことは、装置の性能やメーカーによって、発色が異なることを意味してきます。また、個々人のディスプレイ設定の影響もうけますし、モバイルなどでは、環境光の影響も強く受けます。つまり加法混色は、状況によって見え方が変わりやすい混色方法であるとも言えます。

しばしばWebサイトなどで、意思決定者や担当者のディスプレイに合わせた微妙な色味調整の指示が飛ぶことがありますが、これはほとんど意味がありません。加法混色によってデザインされるものは、環境による色の差異はある程度許容する必要があります。

減法混色

白を下地とし、色を混ぜることで黒に近づきながら色を作り出していく発色する方法です。絵具やインクを使った発色はこれにあたります。通常の印刷機の場合、C（シアン）、M（マゼンダ）、Y（イエロー）、K（ブラック）のインクを混ぜ合わせることで、様々な色を表現しています。なお、理論上はCMYだけですべての色が表現できるはずですが、黒以外の色を混ぜて黒を作ることが難しいため、黒専用のインク（K）が使われます。

減法混色は、インクと下地で決まる混色とも言えます。加法混色に比べると、人による見え方の違いが起きにくい混色とも言えます。ただし、インクや素材（材質や紙質など）によって見え方が変わることもあります。また、印刷機器のメーカーによっても微妙に色味が変わることがあります。完全に統一したい場合には、インク、素材、印刷機器をすべて統一して出力する必要があります。

加法混色から減法混色へ

仕事の中で加法混色と減法混色の違いを身近に感じるのは、PCで作成した文書をプリンタで印刷した時でしょう。PCのスクリーンは加法混色であり、インクを混ぜ合わせる印刷は減法混色となります。発色方法がまったく異なるため、PCのスクリーンでの色を印刷で完全に再現することはできません。特に減法混色では繊細な色表現が難しいため、印刷前提のドキュメントを作成するときには、PCで作成している段階から、コントラストが低い微妙な色使いは避け、なるべくハッキリした配色を行う必要があります。

色の種類

色を分類にはいくつかのバリエーションがありますが、ここでは代表的なものをご紹介します。

有彩色と無彩色

青や赤、黄などの色味を持ったすべての色を有彩色と呼び、白と黒およびそのグラデーション上に位置する灰色などの色味を持たない色を無彩色と呼びます。有彩色は色の選択と組み合わせで豊かな表現が可能になる一方、組み合わせによって色の効果を打ち消すこともあります。無彩色は無機質で固い印象になりがちですが、色味がないため、どんな有彩色と組み合わせても馴染む特性があります。

暖色と寒色、中性色

赤や黄など、暖かみを感じさせる有彩色を暖色と呼び、青や紫など、冷たさを感じさせる有彩色を寒色と呼びます。活発さや暖かみの表現に暖色は適しており、飲食店のロゴなどに多く使われます。一方、落ち着きや知的さの表現には寒色が使われやすく、金融機関や公共機関、IT、BtoB企業などは寒色をCIにすることが多いです。なお、暖色と寒色の中間に位置する緑や赤紫は中性色と呼ばれることもあります。

純色、清色、濁色

鮮やかさが強い色群は純色と呼ばれこともあります。もっとも鮮やかな色相（ヴィヴィッドトーン）がこれにあたります。純色に白もしくは黒を混ぜたものが清色、白と黒の中間色である灰色を混ぜたものが濁色と呼ばれます。清色は色に淀みが少なく、白方向に行く（明清色）とパステル調、黒方向に行く（暗清色）とダーク系の色になります。一方でその中間色が濁色となります。名前の通りに受け取ると濁った色ということになりますが、濁色を上手に使うことで微妙で繊細な色彩表現が可能になります。

トーン

色には3つの属性があります。色相（色味）、明度（明るさ）、彩度（鮮やかさ）と呼ばれるものです。このうち、明度と彩度が同じ色相グループを「トーン」と呼びます。PCCS（日本色研配色体系：Practical Color Co-ordinate System）では、縦軸を明度、横軸を彩度とし、以下のように体系化されています。

トーンはデザイン教育の初期に身に付ける基本知識の一つですが、デザイン教育を受けていない人は、これをほとんど意識していません。そしてこのトーンに対する意識の有無が、デザイナーと非デザイナーにおける色の認識違いを生む一因になりやすいです。例えばデザイナーが作ったグレイッシュ系の配色に対して、発注者がビビッドな赤を入れるように指示してしまうことは、トーンの理解が双方にあればある程度回避できるでしょう。（もちろんトーンを理解したうえで意図的にそうする、というのであれば問題はありません）

つまり、トーンの概念を理解しているかどうかが、デザイナー的な色彩感覚を持っているかどうかの一つの指標になるのではないかと思います。以下では代表的なトーンについて、詳しく紹介します。

ビビッド

彩度が最も高い色相群です。色に淀みがなく、色の効果を最大限引き出し、鮮やかで活き活きとした印象を与えることができます。目に付きやすいため、ロゴマークにもよく使われます。色を強く打ち出すことができる半面、繊細な表現には不向きであり、無計画に色を組み合わせると安っぽい印象になることもあります。

ブライト

ビビッドよりやや明度を高く、彩度を落とした色相群です。明るく健康的なイメージから、スポーツウェアなどによく採用されています。カジュアルでポップなイメージもあり、女性や子供をターゲットにした商材のパッケージデザインなどにもよく使われます。ファッションでマカロンカラーと言われる色もこの一群に属します。

ストロング

ビビッドよりも彩度をやや落とした色相群です。ビビッドとほぼ同じ派手で力強い色の印象を与えますが、彩度が少し落ちることでより自然で馴染みやすい色調となるのが特徴です。スクリーンの設定や印刷の仕上がりによっては、ビビッドとほとんど差がなくなることも多く、トーンの解説から外されることもあります。

ディープ

ビビッドに対して彩度と明度をやや落とした色相群です。少し黒が混ざることで、クラシックで上品な印象を与えます。色の鮮やかさや豊かさを残しながら、落ち着いた印象も与えることができるため、秋冬のファッションなどにもよく使われます。また、和を演出するための配色にもよく用いられます。

ライト

ブライトからさらに彩度を落とし、明度を上げた色相群です。ソフトで軽い印象があり、爽やかで清潔なイメージを与えるため、生活用品などによく使われます。かわいい印象もあるため、女性向け商材にもよく使われ、逆に男性向け商材にはあまり登場しません。パステルカラーと呼ばれるのもこの一群になります。

ソフト

ビビッドから彩度のみを落とした色相群です。ライトトーン同様、優しく穏やかな印象を与えますが、より鈍くぼんやりしています。扱うのは比較的難しく、下手に使うと、濁って汚れたような配色になりがちです。上手に使えば、色味を感じさせつつ、派手すぎない上品で落ち着いた配色に仕上げることができます。

ダル

ビビッドから彩度と明度を落とした色相群です。ソフトトーン以上に暗く濁った印象を与えます。やはり微妙な色のバランス感覚を必要とされるため、デザイナー以外には扱いにくい色かもしれません。上手に使うと、大人っぽく落ち着いた、品のある配色になります。

ダーク

ビビッドに黒を多く混ぜた色相群です。ソフトトーンやダルトーンと異なって濁った印象は薄く、色味を感じさせながら、大人っぽく重厚な印象を与えます。国家や王室が開催するイベントや授賞式など、格式を求められる場でも比較的よく使われるトーンです。

ペール

白に近づけたような淡い色相群です。透明感があり、優しく女性的な印象を与えることができます。色の印象は弱く、白と組み合わせた時の視認性もよくないため、背景色や模様などによく使われることが多いです。ロゴのメインカラーに使われることもあまりありません。

ライトグレイッシュ

ペールトーンをやや濁らせたような色相群です。やはり背景や模様などに使われることが多いですが、彩度がおさえられているため、ペールトーンよりは大人っぽい印象になります。似たような彩度のトーンと組み合わせて上手に使うと、上品な雰囲気を作り出すことができます。

グレイッシュ

ライトグレイッシュをさらに明度を落として暗くした色相群です。ライトグレイッシュよりは色の印象は強く、アースカラーともいわれます。ナチュラルさを売りにするようなブランドのキーカラーとしても、しばしば採用されています。

ダークグレイッシュ

明度も彩度も最大限落とした色相群です。重厚さの表現に適していますが、それぞれの色が持つ個性はほとんどなくなっており、何色を選択しても似たような印象に仕上がります。印刷の仕上がりやスクリーンの設定によっては、黒とほとんど区別がつかなくなることもあります。

代表的な色

色の印象はトーンによっても左右されますが、当然、同じトーンの中でもどの色を選ぶかによっても大きく変わります。また、色にはポジティブな印象とネガティブな印象があり、使われる文脈で変わります。ここでは代表的な色をいくつかピックアップし、基本的なイメージの違いをご紹介します。

赤【Red】

RGBで三原色の一つを構成する色です。青と並び、非常に多くの企業ブランドで採用されてる人気のある色です。日本を象徴する色でもあることから、特に日本人には好印象を抱かれやすい色ともいえるでしょう。赤から受ける印象は「炎」と「血」からの連想が多くを占めます。

■ポジティブなイメージ
熱く、エネルギッシュで、生命力に溢れる赤は、勝者や成功者、リーダー、ヒーロー、正義の象徴です。アメリカ大統領は重要なスピーチで赤いネクタイをし、アカデミー賞では受賞者が赤いカーペットの上を歩きます。戦隊ヒーローのリーダーの色は必ず赤です。

■ネガティブなイメージ
赤は危険や警告も意味します。信号の赤は停止を意味し、緊急車両には赤いランプが搭載され、非常ベルは赤くカラーリングされ、警告文の多くで赤文字が使われ、サッカーで即退場を意味するのはレッドカードです。ホラー映画では、血を連想させる赤を大々的に用い、生命に及ぶ危険や不吉さを演出しています。

■バリエーション
明度を落としたワインレッドは、高貴さや王者の象徴として世界中で使われています。彩度や明度を大きく落とした赤は一般的に茶色といわれ、大人っぽさや高級感、大地に由来するオーガニックさから、排泄物に由来するネガティブなイメージまで、幅広い印象を形成します。また青にやや近づけた赤や明度が高い赤はピンクや桃色といわれ、女性の象徴や性的な色として使われます。一般的に「赤」というとビビッドもしくはそれに近いトーンの色を指し、明度や彩度が変わると「赤」以外の呼び方がされることが多いです。

青【Blue】

RGBで三原色の一つを構成する色です。代表的な寒色であり、赤同様に企業のブランドカラーとしてはよく用いられます。落ち着いた色で鎮静効果があり、信頼や誠実さも感じさせるため、保守的な日本人が好む色といえます。その印象は、「空」「水」「地球」といったものからの連想が多くを占めます。

■ポジティブなイメージ
清潔感、爽快感を想起させ、信頼や誠実さ、平和を象徴します。ビジネスマンのスーツは青系が多く、国連は青をシンボルカラーにし、信号の青は進行可能な状態を表現しています。落ち着いた印象は冷静さや知性の象徴ともなり、テクノロジー系企業やコンサルティングファームのCIカラーなどにもよく使われています。

■ネガティブなイメージ
青は寒色であることから、冷たさや不安の象徴にも使われます。憂鬱な月曜日は”ブルーマンデー”と表現され、血色がない顔は青冷めているといわれます。写真に青みがかったフィルターをかけると、途端に暗く陰鬱な印象になることもあります。

■バリエーション
明度を上げた青や水色、空色などといわれ、清涼感や透明感をより強調する色として使われます。明度を落とした青は紺色などともいわれ、フォーマルで礼儀正しい印象を与えます。また、明度を落としてやや紫に近づけた色は群青色やウルトラマリンなどとも呼ばれます。なお、日本の信号の青は緑に近く、青緑や青紫も含めて、非常に多くの色が「青」と表現されるのも特徴です。

緑【Green】

RGBで三原色の一つを構成する色です。身近な色でありながらも、暖色でも寒色でもない中間色で、主張が強くないため、緑をCIに採用する企業は少数派です。緑から受ける印象は植物からの連想が圧倒的に多いのも特徴です。

■ポジティブなイメージ
自然やエコ、環境といった、植物にちなんだイメージを受けることが多く、そこから穏やかさや安らぎといった印象に繋がります。また「若葉」という言葉から想起されるように、若さを象徴する色としても使われます。英語では信号の青は「グリーン」と表現され、安全を表現する色としても使われます。

■ネガティブなイメージ
主張が強くないため、直接的にネガティブな印象を与えることは稀ですが、中途半端で平凡、魅力がない印象を与えることもあります。また、海外ではモンスターの肌や血の色に緑が採用されることも多く、醜さの象徴として使われることもあります。

■バリエーション
黄に寄せた緑（黄緑）の効果は暖色に近く、明るい、ポジティブ、ポップ、幼い、といった印象を与えます。明度を落とした緑は深緑といわれ、カモフラージュカラーや、上質感の訴求に使われます。また、彩度を落として明度を上げた緑としては、うぐいす色、抹茶色、カーキ、オリーブ色などが存在します。

黄【Yellow】

赤と並ぶ代表的な暖色です。色相の中で最も明度が高い色です。白と組み合わせるとコントラストが弱くなるため、ロゴなどでは他の色との組み合わせて使われることが多いです。黒と組み合わた黄色は、警戒色としてよく用いられます。

■ポジティブなイメージ
「ヒマワリ」「レモン」「とうもろこし」といった植物のイメージが強く、そこから明るさ、暖かさ、幸福、親しみやすさ、といった印象を与えます。太陽や光の色としてもよく使われ、かわいらしさ、子どもっぽさ、愛嬌の意味も持ちます。戦隊ヒーローでは黄は大抵ひょうきんものです。

■ネガティブなイメージ
代表的な警戒色で、信号では注意を、サッカーでは警告を意味します。黒と組み合わせて工事現場や危険物の表示にも使われます。人が黄色と黒に警戒するのは、ハチの色から来ているともいわれています。また、幼さとともに、幼稚で軽薄な印象を与えることもあります。

■バリエーション
明度を上げた薄い黄は卵色などと呼ばれ、子供っぽい印象をより強調します。彩度を落とした黄色は白や黒と組み合わせて金の代替色としても用いられます。赤にやや寄せた黄は山吹色と表現されることもあります。また、やや赤に近づけて彩度と明度を落とした黄は黄土色やラクダ色などと表現されることもあります。

紫【Purple】

色相環では赤と青の間に位置する中間色です。暖色と寒色の両面を持つゆえに、高貴さと品のなさ、神秘性と不安などの両極端な印象を内包します。企業やブランドのカラーとしては、黄色以上に使われない色です。

■ポジティブなイメージ
日本では古くから高貴さの象徴とされ、冠位十二階では最も高い位は濃紫の絁を身に付けていました。また、女性的な色でもあり、ファッションでは優雅さの象徴とされます。またその神秘的なイメージから、王や神、宇宙と結び付けられることもあります。

■ネガティブなイメージ
使い方によっては上品さとは正反対のイメージを持ち、不良、水商売、自信過剰、不遜さを想起させることがあります。また紫の持つ神秘性は不安の象徴ともなり、怪しく信頼のおけないイメージや、不健康なイメージを与えることもあります。

■バリエーション
赤に寄せた紫は赤紫、青に寄せた紫は青紫とも呼ばれます。明度を落とした紫は藤色と呼ばれるなど、日本の伝統カラーであることから、日本語には紫のバリエーションを表現する様々な色名が存在します。ただし一般的にほとんど使われず、赤紫や青紫も含めて、「紫」とひとくくりに表現されることが多いです。

橙【Orange】

色相環では赤と黄の中間に位置する色で、暖色です。色の効果は赤や黄に似ており、非常に人気が高い色で、赤や黄と組み合わせて使われることも多いです。いわゆるビタミンカラーの一つとしても扱われます。

■ポジティブなイメージ
太陽や柑橘類の印象から、エネルギッシュ、元気、ビタミン豊富といったイメージを持ちます。食欲をそそる色であることから、飲食ブランドのロゴにもよく使われます。夏を象徴する色でもあり、楽しく賑やかな印象を与えます。また、黄や黄緑、ピンクと同じく、ポップで子供っぽい印象も与えます。

■ネガティブなイメージ
企業ロゴなどにオレンジがよく使われる理由の一つには、ネガティブな印象があまりないためです。ただし使い方によっては、安っぽく大衆的、高貴さや知的さに欠ける、といった印象を与える可能性があります。

■バリエーション
やや黄を加えて明度をかなり上げたオレンジは肌色と呼ばれ、明度を上げて彩度を落としたオレンジはベージュとも呼ばれます。肌色やベージュは温かみがありながら他の色との親和性も高く、背景色にもよく使われます。彩度と明度を落としていくと、赤と同じく一般には茶色と呼ばれる色になります。

黒【Black】

代表的な無彩色です。もっとも明度が低い色であり、他の有彩色と組み合わせて使うことで、その色が持つ効果を際立たせることもできます。様々なイメージ展開をする子ブランドを多く抱える親ブランドでは、特定イメージに流されない中立的な立場を示すために、黒をメインカラーにしていることも多いです。

■ポジティブなイメージ
真の黒は明度も彩度も持たない唯一無二の色であり、硬質で重厚さを感じさせ、権威、気高さ、プロフェッショナリズム、伝統の象徴として扱われます。黒字という言葉のように安定や優秀さの象徴としても使われます。他になびかない強く先鋭的なイメージがあり、ラグジュアリーブランドではかなりの頻度で使われます。

■ネガティブなイメージ
黒は一方で、闇や死を想起させます。多くの悪魔は黒をメインカラーとしており、喪に服すときは世界中で黒を身にまといます。暗い、寒い、古い、陰鬱、冷酷といったイメージもあり、黒を支配的に使うと、全体をネガティブな印象に覆ってしまう懸念も出てきます。

灰【Grey】

黒と白の中間に位置する無彩色です。一口にグレーといっても、濃いグレーと薄いグレーでは使われ方や印象が異なります。多少色が含まれていても、極端に彩度が低い場合には一般にはグレーと呼ばれることも多いです。また、シルバーの代替色として用いられることもあります。

■ポジティブなイメージ
彩度の低い色と同じく、落ち着いた上品な印象を与えます。大人っぽさ、エレガントさを引き立てます。都市や金属から連想される、先進的でスタイリッシュな印象、鋭く知的なイメージ作りにもグレーはよく使われます。

■ネガティブなイメージ
無機質で曖昧な視覚的印象から、不安や薄暗い印象を与えます。グレーゾーンという言葉のように、疑惑がある、信用できない、といった意味が込められることもあります。また、機械的で温かみがない、煤けてて廃れたような印象を与えることもあります。

白【White】

黒と対極にある、もっとも明度が高い無彩色です。プロダクトの世界では色の一種になりますが、紙やスクリーンにおいては、白＝無色透明と認識され、他の色と組み合わせなければ存在しえない色になります。

■ポジティブなイメージ
純粋さ、けがれのなさを表し、クリーン、公正、神聖、平和の象徴として使われます。結婚式のドレスは白と決まっており、平和を祈る場では白いハトを飛ばします。清潔なイメージを持つことから、医療現場や水回りなど、衛生的な印象を与えたい場合にも、白はよく使われます。

■ネガティブなイメージ
白は無を意味し、白の多い配色は空虚さや味気なさを感じさせることがあります。特にデザインのリテラシーが低い利用者をターゲットにすると、白が多い＝何もしていない、手抜き、デザインされていない、という印象を与える可能性もあります。特定の色のイメージを持たないゆえに、冷たく人間味がない印象も与えます。

配色

複数の色を組み合わせる「配色」には、いくつかのセオリーや考え方があります。配色は奥が深く、マスターするにはデザイナーでも数年かかりますが、ここまでお伝えしてきた知識の範囲で、簡単に応用できる基本的なものをいくつかご紹介します。

無彩色を使った配色

白、黒、グレーといった無彩色は特定の色を持たないため、どの有彩色と組み合わせてもうまくまとまります。特に黒・白は、合わない色はほとんどありません。色が苦手な人でも、有彩色は1色にし、あとは無彩色で構成すれば、手軽にまとまりある配色を実現できるでしょう。

グレーも比較的使いやすい色ですが、明度が近い色と組み合わせると、ボンヤリとした印象になったり、視認性が悪くなったりしがちです。グレーと組み合わせるときは、明度に差が付けるようにこころがけましょう。

隣接してると馴染んでいないように感じられる色同士でも、間に無彩色を挟むことで調和させることもできます。セパレーションと呼ばれる配色テクニックです。（セパレーションは無彩色以外でも行われます）

同系色を使った配色

無彩色との組み合わせと同様に、非デザイナーでも比較的うまくまとめることができるのが、同系色を使った配色です。同系色とは、主に以下の3パターンとなります。

• 明度もしくは彩度だけが異なる色の組み合わせ
• トーンは異なるが同じ色相の色の組み合わせ（トーン・オン・トーン）
• トーンは同じで、色相上隣り合う色（隣接色）の組み合わせ

まとまりが出やすく、洗練された印象を与える半面、単調で抑揚のない配色になってしまうこともあります。それを避けるために、明度や彩度、トーンでコントラストをつけることも多いです。

色相差を使った配色

無彩色や同系色を使った配色は簡単に実践できる半面、配色に大胆さが欠けてしまいがちです。色の効果をより引き出すためには、色相差を利用した配色がおすすめです。色相を変えて配色するには、同一トーン内での配色がもっとも簡単です。隣接トーンも比較的まとまりますが、トーンが離れると、配色は難しくなる傾向にあります。ここでは主に、色相差を用いた代表的な配色パターンをご紹介します。

■類似色相配色
色相環の角度で30~60度の色相差がある色を類似色相と言います。ほぼ同系色となる隣接色相と比べると、より色の変化を感じさせることができる配色です。色相環上は比較的近い色になるため、同系色と同様に、比較的扱いやすい配色ともいえます。

■補色色相配色
色相環の角度でほぼ正反対にある色（補色）を組み合わせた配色です。色の差が大きいため、ダイナミックな印象、カジュアルな印象を与えることが可能になります。また、補色を少量用いることで、主となる色を強烈に引き立てることもできます。

■対照色相配色
色相環の角度で120~150度の色相差がある色を対照色と言います。補色と比較的近い、ダイナミックな印象を与えることができます。補色と比べる色の距離は近く、選択肢も多いため、より多彩な印象形成が可能です。ロゴなどでは、補色よりも多く使われる配色です。

■マルチカラー配色
3色以上の色を組み合わせた配色です。トーンや色相を合わせるというルールがあるわけではありませんが、同一トーン内で規則性のある色を選択すると、比較的まとまりやすい配色になります。

自然界の法則に習った配色

人の目は、見慣れた配色には調和を感じ、見慣れない配色には違和感を覚えるようにできています。特に自然界が生み出した色の組み合わせには、調和を感じる傾向があります。つまり、自然界の色の原則に従うと、調和した配色を生み出すことができるというわけです。

自然界では、明るい光は黄、暗い影は青紫を帯びています。この法則にしたがい、黄に近い色の明度を上げ、青紫に近い色の明度を下げると調和した配色になります。これを「ナチュラル・ハーモニー」と呼びます。

逆に、黄に近い色を暗くし、青紫に近い色を明るくすると、自然界の法則に反するため、違和感のある配色が生まれます。これを「コンプレックス・ハーモニー」といいます。違和感があるがゆえに、個性を生み出したい際には意図的に使われる配色でもあります。

プロのデザイナーは、狙いたい効果に合わせてナチュラル・ハーモニーとコンプレックス・ハーモニーを意図的に使い分けています。しかし、非デザイナーが業務の一環として色を使う程度の目的であれば、ナチュラル・ハーモニーに従って配色するのが無難といえるでしょう。

最後に）色を扱う時に覚えておきたい5つのこと

ここまで色と配色の基本をお伝えしてきました。非デザイナーであれば、このレベルを知っているだけで十分かと思いますが、最後にそんな色と上手に付き合うために覚えておきたい4つの心構え的なことをお伝えして、本エントリーを終えたいと思います。

1. 色はプロのデザイナーもいつも悩んでいる

私がビジネスマン向けに時々開催している『提案書デザイン講座』などで、非デザイナーの方に聴くと、皆さん「色は難しい」といいます。しかし実は、デザイナーやアートディレクターも色は難しいと思っています。入稿の最後の最後まで色が決まらず、微調整を加え続けることも難しくありません。それほどまでに難しい色だからこそ、「自分には色のセンスがない」と、ことさらに苦手意識を持つ必要はありません。

2. 色数はできるだけ少ない方がいい

色が難しくなるのは、たくさんの色を同時に使おうとするからです。例えば、白と黒、白と赤だけの配色を見て、バランスが悪い、まとまりがないと思うことはほとんどありません。しかし、そこに青や黄などが混ざってくることで、配色は一気に難しくなります。裏返せば、色をできるだけ使わないようにすれば、誰でもそこそこまとまりのある配色にすることができるということです。

3. 色で意味を伝えようとしない

色をたくさん使おうとしてしまう人の根底には、意味の違いを色で表現しようという発想があります。しかし、色には意味を正確に伝える機能はありません。例えば、信号の青・黄・赤を見て私たちが行動を決めることができるのは、色に意味があるからではありません。その色に何の意味をあるのか、という情報が頭にインプットされているからです。だから例えば、情報がまったくインプットされていないWebサイトで赤と黄と青のボタンが並んでいても、私たちはそれを見て何をすべきか判断することはできません。色ではなく、文字や文脈による説明があってはじめて、私たちは意味を知るのです。このような色の限界を知ったうえで、本当に必要な色だけを使おうと心がけるようにしましょう。

4. 色以外にも大事なデザイン要素がある

無計画に色を使わないためには、色以外にもデザインできる要素があることを知るべきです。情報の区切りをハッキリさせるために、色の帯を引く必要はありません。線でも余白でも表現できます。注意を惹きたいからと言って、必ずしも赤にする必要はありません。文字を大きくする、太くする、左上に置く、アイコンを併用する、などでも目立たせることはできます。そして何よりも大事なのは文字情報です。文字がしっかりしていれば、ことさらに色付けしなくても、大事な情報は伝わります。色を活用することで様々な効果を引き出すことはできますが、色だけがデザインの中で特別な要素というわけではありません。色の効果を知りながらも、色以外の要素も含めて、総合的に考えるようにしましょう。

5. 人は色だけで印象を決めていない

印象形成に色はもちろん影響を与えますが、色だけが印象を決めているわけではありません。例えばオレンジは明るく賑やかで食欲をそそる色と一般に言われていますが、オレンジをブランドカラーにしている吉野家とエルメスで同じ印象は持つ人はいないでしょう。印象とは、文脈によっても変わるものなのです。当然、その背景にある社会や文化の特性によっても変わります。同じ色でも日本人と欧米人で受け取り方がまったく違う、ということも珍しくありません。色を使う場合には、色の効果だけを単純に考えるのではなく、その色が使われている文脈、背景、そして伝えたい相手のことを考えて判断する必要があります。

マルチデバイス、マルチブラウザが進み、レスポンシブWebも選択肢の一つとして一般化した昨今では、Webデザインの没個性化はますます進んだ印象があります。例えば、Googleが公開しているマテリアルデザインのガイドラインを見ても、デザインのパターン化と属人性排除の思想を如実に感じることができます。また、データドリヴンなサイト改善を積極的に行っていくと、「デザインの個性」と成果に大した因果関係がないことを痛感します。

没個性なデザインと個性的なデザインのどちらがいいかは、ターゲット特性とWebサイトの目的次第であり、基本的にはデータで裏を取って判断すべきでしょう。その上で個人的には、これらの一連の「没個性化の潮流」は「Webデザインの合理化」を意味し、「Webデザインの正しい進化」と好意的に捉えています。

認知容易性とWebデザイン

ノーベル経済学賞受賞の認知心理学者ダニエル・カーネマンによる、ヒューリスティックやバイアスなどの観点から人の意思決定のメカニズムを詳しく解説した著書『ファスト&スロー（上・下）』の中に、「認知容易性」という言葉が出てきます。認知が容易なものに好意を抱くという人の心理特性を表したもので、端的にいえば「慣れ親しんだものが好き」という心理です。

本の中に登場する図を、本の内容を汲んでさらに追記すると、認知容易性は以下のような構造で好意的印象に繋がると表現できます。

これをWebサイトのデザインに置き換えると、以下のように解釈できます。

① 繰り返した経験
既視感のない斬新かつ個性的なデザインより、どこかのWebサイトやアプリケーションで何度も使ったことがある見慣れた操作体系の方が、好意的印象に繋がる可能性が高い。アニメーションを使った演出なども、それが目新しいものであるほど、不利に働く可能性が高まる。

② 見やすい表示
Webデザイナーは時に文字が大きいことを「ダサい」と捉え、文字を小さく押し込めてしまいがちだが、Webサイトが扱っているブランドや商材に好印象を持ってほしいのなら、文字は大きく見やすい方がいい。（個人的見解だが、長文できちんと読ませるべき本文要素の文字サイズが16pt未満というのはデメリットしかないと感じる）

③ 見覚えのある体裁
グラフィックデザインに由来するがWebでは珍しい特徴的なレイアウトより、ナビゲーションであればヘッダか、左右カラムに常設され、一番広い領域にコンテンツが配置されたような、例え個性はなくとも「いかにもWebサイトらしい佇まい」のWebサイトの方が、好意的な印象に繋がる可能性が高い。

④ 発音しやすい言葉
Webサイトを見ながら言葉を発するケースは稀だが、メニューなどのラベリングは見たことも発したこともない言葉を使うより、日ごろから使っている言葉をラベルにした方が認知容易性に繋がると考えられる。

⑤ プライム（先行刺激）がある
利用者数で勝る競合を相手にする場合、競合サイトとまったく異なるデザインにするより追随した方が認知容易性の面で有利と解釈できる。例えばヨドバシカメラやビッグカメラをはじめ家電量販店のECサイトの多くはAmazonを模倣しているが、国内利用率が80%を超え、誰もが過去に訪問した経験がある（プライムがある）Amazonとあえて異なるデザインにするより、追随した方が認知容易性の面でメリットが大きいと考えられる。

⑥ 機嫌がいい
Webで訪問者の機嫌をコントロールすることは難しいが、子供へのプレゼントを買うために訪問するWebサイトと、交通事故にあって弁護士を探すために訪問しているWebサイトでは、認知容易性は変わる。後者のUIは認知容易性の面からみて不利であるからこそ、他の部分で認知容易性を優先させたデザインの方が無難と判断できる。

もちろん、あえて認知容易性に反するデザインを提供することでユーザの記憶に爪痕を残す、という選択肢もありえるでしょう。しかし、大多数のユーザはデザインを楽しむためではなく、情報収集や購入などを目的にWebサイトに訪問しています。そう考えると、Webデザインは「マジョリティーに合わせる」が基本戦略であり、「ありふれた没個性なデザイン」は常に最有力候補となります。

Webデザインの個性とブランディングの関係

もし「Webデザイン個性推進派」という流派が存在するとすれば、錦の御旗として掲げられるのはブランディングでしょうか。この流派はデザイナーよりもクライアントサイドに多く見られ、「もっとデザインを特徴的にしたい」「競合と明らかな差別化をしたい」「もっと遊びを入れてほしい」という要望に繋がってきます。おそらく「デザインの個性がブランドイメージになる」という前提があるのだと思いますが、これはWebデザインの影響を過大に捉えすぎているともいえます。

商材や企業のブランドは、様々なタッチポイントにおける経験の積み重ねで形成されます。Webサイトはそのタッチポイントの一部です。さらに、Webサイトの中でも印象形成にもっとも強く影響を与えるのは、多くの場合コンテンツです。その次に影響があるのが機能でしょう。一方でWebデザインがブランドイメージに与える機会は、極めて僅かといえます。

例えばCASIOのコーポレートサイトは近年見られる典型的なコーポレートサイトのデザインであり、個性的とは言い難いものがあります。しかしこのWebサイトの見た目の印象から、CASIOにネガティブな印象を持ったり、CASIO製品が培ってきたブランドイメージに傷が付いたりするでしょうか。もしなんらかの印象の変化が起こるとすれば、そこに掲載されたコンテンツ内容、あるいは紹介されている製品によってではないでしょうか。

一方、大塚製薬のコーポレートサイトのWebデザインは非常に個性的です。しかしそのことで、カロリーメイトやポカリスエットなどで蓄積された大塚製薬という会社の印象が変わるでしょうか。「隅から隅まで創造性」というメッセージの理解を本当に促したいのなら、それを個性的なデザインに託すのではなく、それを証明する活動をコンテンツ化し、デザインはオーソドックスにし、コンテンツを読むことにユーザを没入させた方が、ブランディングの観点からいってもより効果的ではないでしょうか。

例えばGoogleのように、サービスとのタッチポイントがほとんどインターネット上にしかないはずの企業でさえ、Webサイトのデザインではなく、ニュースや巷で広がっているGoogleにまつわる情報から、私たちは彼らのブランドイメージを形成していたりします。

かつて、個性のないコーポレートサイトを指し、「ロゴを隠してもどの企業かわかるようなデザインにすべきだ」という意見を聞いたことがあります。これもWebデザインの個性にブランド価値が生まれるという考えが前提にあっての発言と思いますが、これは明らかに、現実的な考え方ではないでしょう。なぜならロゴを隠しながらWebサイトを見るユーザなどいないからです。そんなありえないシチュエーションを想定してデザインを最適化する必要はまったくありません。

必要な個性と不必要な個性

多くのビジネスにおいて、競合に対する差別化や優位性の構築が至上命題となり、それ故にサービスや製品には、他社にはない独自の個性が宿ることは珍しくありません。その個性に由来する必然的なWebデザインの個性は、あってしかるべきでしょう。特にWeb上でサービスそのものを提供するタイプのビジネス（ECサイトやWebサービスなど）は、Webで提供する機能やインターフェース自体がその個性を受け継ぎ、結果的に他社では見られない特徴的な姿になることがあります。

しかし、そういった必然性がないWebサイトも少なくありません。コーポレートサイト、ブランドサイト、製品紹介サイト、採用サイト、IRサイトなど、これらWebサイトは情報提供が主であり、搭載されたコンテンツにこそ個性はあれど、コンテンツを読ませるためのインターフェースに個性を求められるわけではありません。このようなケースにおいて、あえて認知容易性に反して個性を追求してリスクを取る必要は、果たしてあるのでしょうか。強迫観念のように、デザインするからには個性がなければと考える必要はなく、リターンとリスクの関係を冷静に考えると、デザインを個性的にするメリットは少なく、没個性なデザインの方が遥かに理にかなった選択になることの方が多いのではないでしょうか。

デザイナーの間で「半歩先のデザイン」という表現がしばしば使われます。「一歩先」は行き過ぎだが、「半歩先」であればユーザに新鮮な驚きを与え受け入れられる、といったニュアンスの言葉です。インターネットの世界は移り変わりが激しいこともあり、トレンドの先を読み、ユーザの許容範囲を推し量って新しいデザインにチャレンジすることは、仕事としては非常に楽しいものがあります。しかし、そのようなデザインの先取りが功を奏するよりも、リスクをもたらすことの方が多いのが、Webデザインの世界ではないでしょうか。「半歩先のデザイン」よりむしろ、完全に浸透しきっている良質なデザインパーツの組み合わせだけで構成する「半歩後のデザイン」くらいの気持ちでいた方がいいのかもしれません。

より没個性化する未来のWebデザイン

さらに未来に目を向ければ、没個性なWebデザインは制作工程の自動化との親和性が非常に高いといえます。ビジネスの複雑性や不確実性から、Web制作のすべてが自動化されるにはまだかなり時間がかかるでしょう。そもそもWebサイトというものがいつまであるのかという別の論点もあります。しかしそう遠くない未来に、Photoshopを触る必要性はなくなるかもしれません。マーケティングKPIや目標値、コンバージョンポイント、サイト構造、配色などの基本情報を設定し、あとは管理画面からコンテンツを投入していけば、没個性ではあるが、高品質で使いやすく、きちんとコンテンツに没入できるデザインが実現するような世界です。MA（マーケティングオートメーション）やCMSがさらに進化し、より高度化した予測スコアリング機能が搭載されれば、デザインの自動最適化も難なく実現するでしょう。

その頃には、今以上にWebデザインの没個性化が進んでいると思われます。やがてWebサイトの個性は、コンテンツ（文章や写真）だけになります。企業は、それらを管理・統括するマーケティング戦略と組織運営、それらが生み出す成果に価値を置き、そこへの投資を今以上に強めていくでしょう。完全に没個性化したWebデザインには、その創造主であるWebデザイナーのクラフトマンシップ、つまり主観的な視覚的美意識に対する「想い」や「こだわり」が乗る余地は完全に失われます。データがWebデザインの主（あるじ）となり、冷徹なまでに「課題解決の手段」となって、その役割を果たしていく時代がやってくるでしょう。

• 設計者がコーダーに文書構造の意図を説明する時間の無駄
• 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄
• コーディング時にWFやPSD上のテキストをコピペして移し替える無駄
• リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄
• 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄
• PC用とスマホ用の2種類のWFを作る無駄
• 更新するたびに新しいWFを印刷する紙の無駄

いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？という疑問は常に頭の片隅にありました。そこで、アプリ界隈で勃発したプロトタイプで設計をする流れに乗っかり、1年半ほど前にWFの撤廃とHTMLプロトタイプへの移行を決めました。

今現在、WFを作ることはほとんどなくなり、HTMLプロトタイプがすっかり定着しました。こうなるまでに私たちが取り組んだことや移行して感じたことなどをここで共有したいと思います。

ワイヤーフレームを捨てるためにしたこと

プロトタイプで設計をする場合、まずペーパープロタイプを作り、それから専用ツールでプロトタイプを作るという流れが一般的ではないでしょうか。ペーパープロトタイプを作るのは私たちも同じですが、実は専用ツールは特に使わず、テキストエディタなどを使い、ソースコードベタ書きでプロトタイプを作っています。非効率に思える方法を選択したのは主に以下のような理由からです。

1. できればそのままコーディングの工程で使える精度の高いソースコードにしておきたい
2. 設計者とコーダーの制作・実装環境を統合したい
3. 設計者も基本的なHTMLなら自分で書けるくらいに理解しておいてほしい
4. 個別性の高いUIは、都度カスタマイズできる柔軟性がほしい
5. 私たちの会社では設計者がHTMLを扱えたので、そのスキルを活かしたい

最近はプロトタイプツールも多様化しており、すでに私たちの希望を満たすツールも存在しているかもしれませんが、1年半前の時点では、上記のような理由からソースコードベタ書きでプロトタイプを作るという選択になりました。とはいえ、毎回一からプロトタイプを作るのはさすがに効率が悪いため、基本テンプレートを用意してすぐに使えるようにしました。

このように数種類のレイアウトパターンのテンプレートが用意されています。

パーツごとにソースコードが用意されており、ソースのコピペでプロトタイプが作れるようになっています。

マルチデバイス対応されているので、スマホ用に（PC用に）わざわざ何かを作る必要はありません。

メモ機能があり、デザイナーやコーダーへの連絡事項があればページごとに書き込めるようになっています。

設計者はこのテンプレートを使って設計をします。以下は一番最近作ったプロトタイプですが、作る時間だけでいえば、だいたい30ページほどのプロトタイプを1日程度で作っています。（作る時間よりもその前に考える時間の方が長い）

DTJプロジェクトのプロトタイプ

ちなみにペーパープロトタイプもこんな感じの印刷用テンプレートを用意してて、印刷して使っています。

スマートフォン用のテンプレートと実際にスケッチしたサンプル

PC用のテンプレートと実際にスケッチしたサンプル

ペーパープロトタイプについては、私たちの場合はクライアントに見せる機会はほとんどありません。というのも、私たちは直請け案件が多く、大抵は担当者や意思決定者がWebに詳しくなく、ペーパープロトタイプを見せられてもどう判断していいかわからない、となりがちなためです。そのため、ペーパープロトタイプは主に社内での議論や意思疎通を目的に作っています。

ワイヤーフレームを捨てて良かったこと

ワイヤーフレームを捨ててHTMLプロトタイプに移行したことはメリットの方が多かったと感じています。具体的には以下のような点です。

• 設計時のファイルがコーディング時に流用できるため、制作全体の生産効率が少し上がった。
• 設計者が考えたことがHTMLに反映されていない、ということが減った。
• titleタグやMetaタグなど、わざわざそれを指定するためのドキュメントを設計者が作り、そこからコーダーがデータを入力する、といった余計な手間が減った。
• ヘッダやフッタなどの共通パーツの外部ファイル化やエディタの一括置換が使えるようになったことで、変更が速やかに行えるようになった。
• クライアントのリテラシーによっては、提出用にわざわざ印刷物を用意する必要がなくなった。
• リンク構造、画面サイズや文字量、レスポンシブの振る舞いなどは、プロトタイプを見れば理解してもらえるようになった。
• 設計が終われば、CMSの基本テンプレート作成などをビジュアルデザインと同時並行で進めることも可能になった。（ただし手戻りのリスクが高まるので基本的にはやらない）

ワイヤーフレームを捨てても変わらなかったこと

一方で、HTMLプロトタイプも完全ではありませんでした。以下のような部分は、WFと大差ありませんでした。

• プロトタイプで作ったHTMLをそのまま活用してコーディングはCSSとJSに集中できる、というところまではいかなかった。コーディング時に作り直す箇所は多く、プロトタイプ段階でHTMLの精度にこだわってもあまり意味がなかった。
• 「完成したデザインを見なければ判断できない」というクライアントも多く、結局はビジュアルデザインが仕上がってから設計に関するフィードバックが来ることが多かった。
• 一見レイアウトが完成しているように見えるため、デザイナーがそれに引っ張られて、安易にそのレイアウトを踏襲するという「完成度の高いWF」と同じ問題が起きがちだった。
• 1ページだけのランディングページやミニサイトの場合は、WFを作った方が早いこともあった。

Web制作の場合、プロトタイプ化によってクライアントの意思決定がよりスムーズになるのでは？という期待は大きいと思いますが、ペーパープロトタイプにしろ、HTMLプロトタイプにしろ、WFにしろ、未完成のものから完成品を想像するのは結構リテラシーが必要で、これができるクライアントは少なく、やはりビジュアルを見てから色々と気になってきて要望が来る、ということは非常に多いのが実情です。

そのため、WFをやめてプロトタイプにすることでビジュアルデザイン以降の差し戻しが減るんじゃないか、というのはあまり期待しない方がいいと思います。

クライアントからのフィードバックで作り直しなどの手間は増えないのか？

Web制作でWFを捨ててHTMLプロトタイプにするときの一番の懸念は、いきなりHTML化してしまうと、修正や要望が出た時にWFよりも手間がかかるのでは、という点ではないでしょうか。結論からいうと、恐れることはまったくありませんでした。以下のようなことがその理由です。

• どういうページを作るかを事前に入念に協議してから着手するため、HMTLプロトタイプを大幅に作り直さないといけないような大きな認識違いがそもそも起きにくかった。
• WebサイトのUI設計は割とパターン化しているところもあり、クライアントの想像を大きく超えるようなことにはほとんどならなかった。
• クライアントの関心はWebサイトの目的と、それを達成するために掲載されるコンテンツ内容に向かうことがほとんどであり、設計やUIの細部の判断は任せられることが多かった。
• ビジュアルデザインまでいかない段階では、クライアントも細部を入念に見ないことが多かった。
• 建設的な議論だけしてあとは前に進むようなディレクションをすることで、設計段階での不毛な試行錯誤や時間の浪費を防いでいた。
• 検索や置換が容易に行える開発用のエディタを用い、また共通パーツをテンプレート化するなどしているため、むしろ速やかに要望を反映できることも多かった。

課題とまとめ

というわけで、私たちの会社ではHTMLプロトタイプへの移行はメリットの方が圧倒的に多く、今後もWFは極力作らないつもりですが、今の私たちのやり方の最大の課題は、設計者にHTMLのスキルをそれなりに求める点でしょう。

たまたまHTMLが分かるメンバー構成だったから実現できましたが、HTMLは扱えないが設計業務はできるというメンバーが入社した際には、やり方を考えなくてはなりません。HTML自体は1か月もやれば習得できますが、PowerPointのWFと同じ速度で自在に思考し、オペレーションするにはもう少し時間がかかりそうな気もします。

ただこのあたりは、ツールで解決できるかな、とも思っています。先日AdobeからXDというプロトタイピングツールがリリースされたように、今後はプロトタイピングツールがますます多様化・充実してくることが予想されます。私たちもおそらくどこかの段階で、ツールを使うワークフローに移行するでしょう。そうなれば、HTMLを書けないといけないという私たちの問題は、自然に解決されるのではないかと思います。

というわけで、結論としてプロトタイプへの移行はおすすめです。WFを作っている制作会社の方々も、是非積極的にチャレンジしてみてください。

UIデザインの歴史

人がコンピューターを操作するためのユーザーインターフェース（以下、UI）は、テープやカードに打ち込まれた信号からコンピューターに出力させる、バッチインターフェースから始まりました。やがてより人が扱いやすいように、テキストを入力するコマンドラインインターフェースへと進化し、グラフィック性能の向上に伴い、1980年代以降はグラフィカルユーザーインターフェース（以下、GUI）が主流となっていきました。

1964年に登場したIBM社のIBM029（左）は、タイプで穴をあけたパンチカードを読み込ませて命令を送るバッチインターフェースを採用していた。1978年に登場したDEC社のVT100（右）では、テキストをタイピングして命令を実行させるコマンドラインインターフェースが採用されていた。

現在、一般的にUIといえばGUIのことを話していることが多いことと思います。ただ、GUI以外のUIも数多く存在し、例えば声や脳波を使ったUIなども今度発展すると考えられています。とはいえ、それらはあくまでGUIと共存するものであり、それらがGUIの全てを置き換えるというのは、いささか飛躍的な考えでしょう。つまり、GUIおよびそれをデザインするためのUIデザインというジャンルは、プロダクト戦略やマーケティング戦略の中で引き続き重視され続けると考えられます。

GUIが生まれた1980年代から、PCのディスプレイ用のUIデザインはマウス操作を前提としてきました。しかし、マウスが主要な操作手段という前提が変わらなくとも、その時々の技術的な時代背景の影響を受け、UIデザインは変化を続けてきました。

テレビゲームやATMのような情報端末を通じて、一般の生活者もGUIに触れる機会はありましたが、GUIによる操作をより日常的にしたものとして、Windows95を無視することはできません。Windows95がUIデザインに大衆性をもたらしたといっても、言い過ぎではないでしょう。

PCのOSにGUIを先駆的に取り入れたのはマッキントッシュだが、GUIを洗練化させただけでなく、一般に広く流通させたという意味で、Windows95の存在意義は大きい。

また同時期に爆発的に広まったインターネットにより、ブラウザの中のGUIをデザインするためのWebデザインというジャンルが生まれました。ほどなくしてWebサイトが企業のマーケティングツールとして使われだし、ここからグラフィックデザインなどの広告表現とUIデザインが密に融合するようになりました。また、インターネット回線の高速化は豊かなビジュアル表現を可能にし、リッチなUIの登場を促しました。2000年代にFlashが全盛だったころから、まるで映像作品のようなWebサイトも数多く見られるようになりました。

1997年ごろのAppleのWebサイトと現在のAppleのWebサイト。マウス操作が主流のPC向けのWebサイトという共通点があって、グラフィック表現がこれだけ進化している。

このように、UIデザインのトレンドの背景には、必ず技術的なトレンドが影響を与えています。そして、こういったトレンドの背景に横たわっている必然性を理解していないデザイナーが、ただやみくもにトレンドに追随し、企業が無駄な投資をする、という歴史が繰り返されて来ました。

近年のUIのトレンド

そういった中で、ここ数年UIデザインに大きな影響を与えているのは、スマートフォンやタブレットの台頭です。マルチデバイス化とタッチスクリーンの波が、「優れたUIデザイン」の基準を大きく変えました。

マルチデバイス化でなにより求められるのは、シンプルさです。様々なサイズの画面で平均的にバランスよく見えるようにするためには、デザインパーツのモジュール化と汎用化が不可欠になります。ある特定の環境に絞り込んで、細部まで作りこんだような複雑なデザインの価値は低下し、テクスチャやグラデーションなどの装飾をはぎ取った、できるだけシンプルで汎用的なフォルムであることが「優れたUI」の基本パターンとなっていきました。

タッチスクリーンは、より直感的な操作と省スペース化のメリットから以前より使われてきましたが、iPhoneの登場とともに、一気に普及していきました。スマートフォンやタブレットのみならず、近年ではモバイル用PCでタッチスクリーンが搭載されることも珍しくなくなってきています。そのタッチスクリーンの普及は、マウスポインターではなく指で押しやすい大きなUIを求めるようになりました。GoogleやAppleはそのガイドラインの中でボタンの大きさに対して具体的な基準を示していますが、これはマウス時代を踏襲した細かなUIデザインによるユーザビリティ低下を防ぐためでしょう。また、タイル状のモジュールが多くなったのも、タッチパネルでの操作に最適化した結果と考えられます。

このようなUIデザインに対する要求の変化にいち早く反応したのがOSを開発している各社です。

8.0以降のWindowsは、PCとスマートフォンの両方で資料されることを前提に設計されている。幅が変わっても柔軟に可変できるようにタイル型となっており、タッチパネルでも支障なくタップできる大ぶりのデザインとなっている。

2012年、MicrosoftはのWindows8でメトロUIという名のUIを採用し、大胆なデザイン変更を行いました。続くAppleも2013年に発表されたiOS7で、基本デザインをフラットデザインに刷新しました。Googleも2014年のAndroid 5.0 Lollipopの発表とともに、フラットデザインを進化させたマテリアルデザインなるデザインコンセプトを提唱し、OSやアプリへの反映を開始しました。

このようなOS側の変化を受けて、その上で駆動するアプリケーション、ブラウザに表示させるWebサイトのUIも当然ながら大きく影響を受けていきました。スマートフォンやタブレットに限らず、いまだに大きな画面でのマウス操作が多いPC向けのWebサイトでさえも同様の変化が見られるようになりました。

このようなトレンドは、元々はWindowsのようなマルチデバイスOSや、レスポンシブWebデザインの浸透といった技術的な影響に起因するものでしたが、ある程度の数を超えたあたりから「従来型のUIデザインだと古臭く見えてしまう」という情緒的な理由も生まれ出し、現在では見た目の印象だけを理由に、トレンドっぽいUIデザインが採用されるようにもなってきました。

トレンドを踏襲したあるべきデザインとは

ここまでご説明したように、UIデザインの見た目というのは、単に「流行りだから」「目新しいから」ということだけではなく、そこに至った必然的な背景があります。上記では主に技術的な背景に特に焦点を当てて解説しましたが、実際にはその他にも、マーケティング的背景や社会的背景、行動心理的背景などから複合的に影響をうけて、UIデザインのトレンドが生み出されていきます。

これは単純化した図式だが、様々な要因がそれぞれ複雑に関与しあいながら、UIデザインのトレンドに影響を与えている。業界や、国ジャンルを超えるトレンドは、技術的背景の影響が比較的強い。

例えば、EC業界では現在、AmazonのようなUIデザインが大流行していますが、これはAmazonがEC市場を支配するようになったというマーケティング的背景、それによりAmazon型UIが使いやすいと感じるユーザが多く存在するようになったという行動心理的背景の影響を受けて、そのようなUIデザインのトレンドを形成するようになったと考えられます。（このケースにおいては、技術的な背景の影響は少ないでしょう）

では、このような多様な背景を受けて生まれるUIデザインのトレンドを、私たちはどのように取り入れていけばいいのでしょうか。そこではまず、トレンドありきではなく、その企業やWebサイト特有の課題から考えていかなくてはなりません。

以下は、UIデザインの構成要素と言い換えてもいいであろう、UXの第一人者であるJ.J.Garret氏が定義したUXの5階層モデルです。

見た目のイメージ、つまりビジュアルデザインは、表出したレイヤーに過ぎない。その下に連なるすべての段階のデザインが一貫していることこそが重要となる。

見てもわかるように、見た目のデザイン、つまりビジュアルデザインとは、この最上位階層に位置する要素です。しかしこのビジュアルデザインは、骨格、構造、要件、戦略といった下位の段階との一貫性がなければ、UIとしてきちんと機能しません。

つまり、「トレンドだから」という理由でビジュアルデザインにそれっぽい要素を組み込んでいっても、それが下位の各段階の意図を汲み取ったものでなければ、実態としてはうまく機能しない、ということです。

つまり大事なのは、まずは戦略からビジュアルデザインに至る妥当な道筋をきちんと考えることです。この基本があったうえで、トレンドの表層的なところを真似するのではなく、トレンドの背景にある「なぜそういうデザインなのか？」という理由に目を向けて、戦略や要件と合致する部分にのみトレンドを取り込んでいく、というのが、トレンドの上手な取り込み方です。逆に、そういう発想をしないと「トレンドを踏襲した実用的なUIデザイン」には決してならないのではないでしょうか。

最後に

2015年11月26日に発売された日経SYSTEMS12月号の特集『SEが知っておくべきUIデザイン』として、6Pほどの原稿を寄稿させえいただきました。このブログ記事は元々はそれ用に書かれたものです。実は元々書いていた原稿は全体の文量が多く、掲載にあたって多くの部分を割愛したのですが、その割愛した部分をつなぎ合わせてまとめなおしたのが、この本エントリーとなります。

特集記事ではこういった内容以外に、システム開発フローへのデザインの取り入れ方、エンジニア向けのおすすめ書籍やデザイン会社の選び方などをの解説も行っています。SEやエンジニア向けの記事ではありますが、デザイナーが読んでも納得してもらえる内容に仕上げています。よろしければ、こちらも是非手にとって見てください。

日経SYSTEMS 2015年12月号の詳細はこちら

そんな中、最近気になっているのが、新たなデザインツールとして徐々に広まりつつあるSketch。海外ではPhotoshop並みに使われているという調査もありします。そこでPhotoshop歴10年（途中3年ほどFireworks）の弊社アートディレクター兼デザイナーの荒砂が、PhotoshopとSketchの機能を比較し、最終的にどう判断すればいいか、スライドにまとめてくれました。

詳細はスライドを見ていただくとして、特に異なっている点だけを表にまとめて比較すると、以下のような感じになります。

○：機能として存在し、優れている
△：機能として存在するが、やや劣っている
×：機能として存在しない、もしくは大きく劣っている

結果として、Sketchは機能を絞り込んでいるため、Photoshopのようになんでもできるツールにはなっていませんが、UIデザインやWebデザインに特化している分、より使いやすく軽量というのが最大の特徴になっています。位置づけとしては、Photoshopに対するかつてのFireworksに近いものを感じました。

複雑な画像編集を必要とせず、書体もOSやWebフォントで用意されているものを呼び出すだけで、画像テキストをほとんど作らないようなアプリケーションのUIデザインでは、非常に重宝するツールであると感じます。

Photoshopの優位性であるテキストや画像の編集機能は、フラットデザインやマテリアルデザインのようなシンプルなデザインが主流になっている今の時代には、使用頻度は低い機能ではないかと思います。そう考えると、ますますSketchが魅力的に見えてきます。

ただ、結果として弊社ではSketchの導入を見送りました。一番の理由は「Windows版が用意されていない」という根本的な問題です。Sketchのメリットを享受するには、少なくともデザイナーとフロントエンドエンジニアはSketchを使う必要があり、そのためにはメインマシンをMacに変えなくてはなりません。

ところが、直クライアント案件が多く顧客から提供される資料はほどんとがWindowsで作られている、作るのはPCサイトがまだまだ多くそのターゲットはほとんどがWindowsユーザである、クロスワークを推奨しておりデザイナーが設計やエクセル仕事やディレクションをするなどの作業が想定されるなど、弊社ではWindows環境であることが不可欠です。それに対し、制作スタッフ全員をMacへ乗り換えさせるほどではないかな、と判断して導入を見送りました。

つまり、Photoshopが劣っている面は確かに多々あるものの、それはそれほど致命的ではなく、他の方法で解消可能である、という結論になったということです。

私としては、もしすでに開発環境がMacに統一されているような会社で、テキストや画像をゴリゴリ編集するような仕事が少ない場合には、制作環境をSketchにしてしまってもいいように思います。

しかし、Windows環境に統一もしくは混在していたり、あるいは画像加工系の仕事が結構多かったりする会社の場合には、無理をしてまでSketchに移行する必要はないかな、と感じました。最終的には、チーム全体の生産性を総合的に考えたうえでの判断でよいでしょう。

ただ、UIデザインの流れを考えるとSketchは非常に魅力的なツールで、Windows版がリリースされるか、別の理由で弊社の制作環境をMacに統一するようなことが将来あった場合には、再びSketchに乗り換えることを検討してみたいと思います。

以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。

クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プロセスは4段階ですが、本エントリーでは6つのステップとします）

ステップ１：デザインの役割を定義する（P.２～P.3）

「先進的な印象を与えたい」「親しみのある印象も与えたい」など、デザインとして相反する方向性の要望で中途半端な方向に行くことはないでしょうか。こういったことは、デザインの役割を定義していないために起こりえます。ユーザはデザインだけですべての印象を決めるわけではありません。コピーや写真のモチーフなどで受け取る印象は大きく変わります。

そのため、まずはこれから議論するデザインとはWebサイト全体の構成要素のどれを指し、デザインにはどういう役割を与え、どういう役割は与えないのか、ということを明確に定義します。これによって、デザインを確認する時の基本的な視点を共有します。

ステップ２：ターゲット像を描く（P.4～P.7）

デザイン提案で失敗するのは、クライアント企業の担当者とデザイナーの主観で議論を進めてしまうことです。デザイナーが勝手に信じている「私はこう思う」（I）の視点ではなく、デザイナーがクライアントの顔色を窺った「あなたはこう思いますか？」（You）の視点でもなく、「顧客はこう思うだろう」（They）の視点で、双方が議論しなければなりません。そのために必要なのがThey、つまりターゲットの定義です。

このプレゼンでは、ターゲットとなる人事担当者のユーザ特性と価値観を整理しています。氏名や性別、年齢までを細かく定義したペルソナにしていないのは、デザインに影響を与えるであろう特性にのみフォーカスするためです。この内容の妥当性は、顧客を知るクライアントへのヒアリングから行います。

ステップ３：ターゲットに与えるイメージを決める（P.8～P.10）

描いたターゲットに対して、どういうイメージを与えたいかを整理し、方向性を導き出します。この提案では、まずは企業のブランドイメージを解体してキーワード化し、優先順位を付けています。その後、優先度の高いキーワード群をイメージスケールに落とし、全体の配色やトーン＆マナーの大きな方向性を決めています。配色を決めるときは、CIとの兼ね合いもあるので、ポジショニングしたい領域の中で、CIと相性が良い配色を選んでいきます。なお、選定から漏れたキーワードの中で重要なものは、デザインではなく、コンテンツやコピーで実現していくことになります。

ステップ４：参考サイトから共通パターンを抽出する（P.11～P.20）

参考サイトの抽出は、多くのデザイナーがすでに行っていることでしょう。しかし、その抽出基準を「自分が提案したいデザイン」あるいは「顧客が作りたがっているデザイン」に置いて、デザインポータルから見映えがいいサイトを選んでいないでしょうか？

これだと、前述でいうところのIやYouの視点であり、誰かの主観に委ねた決定を促すことになります。そしてその主観が折り合わずにデザインが決まらず、スケジュール遅延やデザイナーの疲弊を招きます。そうではなく、ここでもTheyの視点を基準とし、参考サイトを選ばないといけません。

MSC様の場合は、信頼感の訴求が情緒的役割における最重要課題でしたので、「ターゲットが信頼を感じるのは、実際のところどういうデザインなのか？」という視点から参考サイトを選びました。ここでは参考サイトを「誠実な企業賞」を受賞した企業のWebサイトから選定しています。ポイントは、「信頼できるイメージを持ったWebサイト」ではなく、「信頼できるイメージを持った企業」を起点に選ぶという点です。

例えば、青を採用すると信頼感が増す、と一般的には考えられています。しかしこれは、信頼感のある企業の多くが青い色を採用しているから、青→信頼感と人々が認識しやすい、とも考えられます。色の場合はある程度配色理論が存在するのでこの方法でも通用しますが、レイアウト、書体、形状といった他の要素になると、明確な理論があるわけではありません。例えば、明朝とゴシックと、どちらの方が信頼感を訴求できるでしょうか？個人的な感想以上のことをきちんとは答えられる人はいないでしょう。

さらに、「信頼できるWebサイト」を基準に選定すると、その時点からWebデザイナーによる「信頼できるデザインはこれ」という固定観念によってフィルタリングされてしまいがちです。これもまた、結局はWebデザイナーの主観的なイメージを起点にすることになり、Webデザイナーの固定観念を超えるアイデアを導き出すことが難しくなります。

このあたりを突き詰めると完全に客観的になることはできませんが、できるだけ客観的な評価や指標を交えながら、「ターゲットが信頼感を抱くであろう企業」を選び、その企業が採用しているデザイン要素を分解し、共通パターンを見つけ出し、それを採用する、という方法をとっています。

なお、こういう選び方をすると、クオリティの低いデザインが含まれることが気になるかもしれません。しかしそのことは問題ありません、参考サイトは模倣するために選んでいるわけではないからです。あくまで、「印象の方向性」を掴み、信頼感を与えている企業が採用しているデザイン上の共通パターンを導くために選んでいるためです。

ステップ５：啓蒙する（P.21～P.25）

参考サイトのみを基準にした方向性の絞り込み方をすると、過去を基準にしてしまう、正しくない方法を正しいと解釈してしまうリスクがあります。そのため、最新のトレンドと一般的な理論も検討材料に含めます。

トレンドに関しては、以下のような領域について採用する、と意識する必要があります。

• 採用することに機能的なメリットが明確にあると考えられる領域（積極的採用）
• 明確な効果は分からないが、企業側にも強い要望がない領域（消極的採用）

トレンドに従うことにメリットがあるのであれば、当然それは積極的に採用すべきでしょう。一方で消極的な理由でトレンドに従うという判断もあり得ます。つまり、誰も正解が分からないのであればひとまずみんながやっていることに従ってみよう、という考え方です。そして、デメリットやリスクがある、他に優先すべきことがある場合には、トレンドの採用は見送ります。間違っても「トレンドだから従うべき」といったような思考停止状態でトレンドに追随してはいけません。

また、トレンド以外に、一般的なユーザビリティのセオリーについても少し触れています。ここでのはシンプルな説明に徹しています。それは、クライアントの担当者はユーザビリティの勉強をしたいわけではないからです。制作者は時に、紙面と時間を使った啓蒙活動をしてしまいがちですが、過度な情報提供は本当に理解すべきポイントを見失わせます。デザイン提案の趣旨はあくまで円滑なコミュニケーションと認識の共有であり、勉強や講義ではないので、ポイントのみをシンプルに解説するのが良いでしょう。

最後に、デザイン決定で陥りがちな注意事項を整理し、間違った方法でデザインの意思決定をしないようアドバイスを行っています。

ステップ6：実際のデザインに落とし込む

このように、ブランドとして追求したいトーン&マナー、似たような印象を与えている企業におけるデザインの共通パターン、トレンドやユーザビリティのセオリーなどを踏まえて作った最初のデザイン案の一つが以下のようなものです。

資料内で定義した諸条件に即しながら、実際の見え面として綺麗に収まるように微調整を加えていきいます。例えば、参考サイトから導き出した共通パターンでは、メインビジュアルは直接的なモチーフで、キャッチは明朝体であることが多い、ということでしたが、デザイナーの判断でこのバリエーション案においてはそこを変えています。

これは、理屈だけで固めたデザインが必ずしも良いデザインになるわけではないためです。料理に例えるなら、概ねレシピ通りに作りながらも、味見をしながら塩加減を調整は入れる、といったことに近いでしょうか。ただし、いくら塩加減が足りないからといってレシピにはない調味料を加えると味が壊れてしまうように、論理的に詰めた基本的な前提条件を無視すると、ビジネスへと繋がるデザインのコンセプトを見失ってしまうため、あくまで行うのは微調整の範囲とします。

このようなプロセスで行った一番最初のデザイン提案の後、クライアントからの意見を吸収し、最終的に公開されたのが以下のデザインになります。（実際のサイトはこちら）

クライアントとの協議の後、やや冷たく暗い印象を軽減するために青を追加したり、メインビジュアルの変更や調整は行いましたが、デザイン提案の基本からは外れることなく、できるだけ客観的な視点で調整を加えていきました。結果、デザインの基本的な方向性で躓くことはなく、スムーズにその後のデザイン展開に入っていきました。

このようにクライアントに対して、「なぜ私たちはこういうデザインに至ったのか？」という思考のプロセスを説明することは非常に大切なことなのではないかと思います。クライアントから与えられたインプット情報からデザイナーが頭の中で考え至ったことを追体験してもらえれば、主観や感情に流されずにデザインを受け取ってもらえることも多いでしょう。

もちろん、デザインを一発で通すのが目的ではなく、最終的には、様々な制約のもとにもっとも合理的な判断をするのが目的です。だから、デザイン提案の後に議論やフィードバック、軌道修正が発生することは悪いことではありません。それでも、このように前提条件の共有がきちんとできていれば、議論やフィードバックも建設的なものになるのではないかと思います。

この提案の課題

さて、ここで紹介したデザイン提案方法は、あるプロジェクトで実際に行ったものですが、これも万能ではなく、いくつかの課題や弱点があります。例えば、以下のようなことです。

１．斬新なアイデアが出にくい

特に参考サイトを抽出するプロセスでは、発想の起点を既存の他社サイトに置いています。またトレンドの採用には妥当性を加味し、ユーザビリティーの最低限のセオリーにも従っていきます。そのため、今までに見たことのない驚きのあるデザイン、画期的なデザインにはなりにくい傾向があります。エッジの立った斬新なデザインを求められる場合には、これとはまったく異なるプロセスでの検討と提案をしなければならないでしょう。

２．意思決定権者不在では意味がない

いくら丁寧に説明を行っても、それを聴くのが担当者だけで、最終的な意思決定権者に届かなければあまり意味はありません。デザインのコンセプト提案時には、必ず意思決定者を同席してもらう必要があります。

３．デザイナー側が論理的でなければならない

デザインをロジカルに提案するということは、デザイナー自身が日ごろから論理的にデザインしなければならない、ということを意味します。ディレクターがいくらがんばって付け焼刃的に説明資料を作っても、デザイナーにその意識がなければ、議論の末に前提条件が変わったり、新しい要望が出てきたりするたびに、コンセプトとデザインが壊れていってしまいます。大事なのは、クライアント主導でもディレクター主導でもなく、デザイナー主導で提案を行うことです。

４．スピード感がなくなる

例えば「明日までにデザインを作ってくれ」というような要望には、このような提案は不向きでしょう。なぜならコンセプトや調査に最低でも2日はかかるからです。それなりの検討時間が取れるプロジェクトでなければ、こういった提案はできません。ただし、クライアントが協力的で、デザイナーとディスカッションしながらともにコンセプトを作り上げるというフローが可能であれば、スピードの問題は少しは解消されるかもしれません。

最後に

弊社では、デザイン提案はあまりパターン化すべきではない、と考えています。実際、クライアントとの関係性、担当者のリテラシー、プロジェクトが置かれている状況、デザインの役割などによって、私たちの提案内容は大きく変わります。デザインの方向性について既に十分に握れていて合意形成できている場合には、デザインだけを提案することもあります。また、もう少し大規模な案件であれば、リサーチにもっとコストと時間を費やすこともあります。ここで紹介した提案はまだまだヒューリスティックの範疇であり、客観性については完全ではないと弊社でも考えています。

いずれのやり方を取るにしろ、このような資料を作る目的は一発でデザインOKをもらうことではありません。最終的にもっとも合理的な判断をするために、もっとも効果的でコンパクトな方法で認識の共有化を図るのが目的です。そのため、最初のデザイン提案の後に、フィードバックや軌道修正が発生することは悪いことではありません。それでも、このように思考のプロセスを明示し前提条件を押さえておけば、主観や思い込みの衝突が減り、議論もずいぶんと建設的になるという実感があります。

というわけで、ここで紹介した方法はあくまで一例であり、例えばこのような提案の仕方もあります、というくらいの気持ちで参考にしてもらえれば幸いです。

スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これはアプリ」「これはWebサイト」という区別はしていません。そのため、一般的なアプリとWebサイトの振る舞いが異なると、ユーザを戸惑わせる原因になりえます。

AppleとGoogleのガイドラインを比較する目的は、両者に共通する部分、いずれかが優れた部分を抜き出し、スマートフォン向けのWebデザインにおけるセオリーを学習するためです。

以下は、主な比較項目をまとめたスライドです。詳細はスライドを見ていただくとして、要点のみをこのエントリーでは記載しておきます。

1. 文字

1-1. 最小サイズ

欧文＝11pt、和文＝13pt

Apple、Googleともに文字の最小サイズに関する具体的な指定があります。双方を判断し、欧文は11pt相当、和文は13pt相当を最小サイズとするのが良いでしょう。

1-2. 見出し

13pt←15pt（基準）→17pt→21pt→24pt→34pt→45pt→56pt→112ptでサイズ変化

Appleには指定がありませんが、Googleでは、 欧文・和文ごとに、サイズ、ウエイト、行間についてかなり細かく指定されています。Googleのガイドラインはあくまでマテリアル・デザインのためのガイドラインであるため、厳密に踏襲する必要はないでしょう。ただ、デザインをシンプルにするためには、見出しの装飾を極力抑える必要があり、そうなると、文字サイズの違いで見出しレベルを表現しなければならなくなります。その参考値として、Googleが規定している文字サイズを捉えておくとよいのではないでしょうか。

1-3. 行長

欧文＝60字以内、和文＝30字以内

Appleに指定はありませんが、Googleには欧文のみ、本文は60文字以内、見出しは40文字以内で折り返すという指定があります。これを参考とし、欧文では60字以内、和文は30字以内を行送りの基準と捉えるといいでしょう。

1-4. 字間

大きな文字は狭く（-5～-10）、小さい文字は広く（+5～+10）

Apple、Googleともに、文字が小さいほど字間を広くし、大きいほど狭くすべきと書かれています。Googleではトラッキングの値も明確にされています。こちらも厳密に踏襲する必要はありませんが、大きな文字は狭く（-5～-10）、小さい文字は広く（+5～+10）、という定石があると捉えておくとよいでしょう。

1-5. 書体

書体の種類、ウエイトはできるだけ少なく

Appleでは書体を一つに絞る、Googleでは決められた書体を使う、と規定されています。書体はCIやブランド戦略が優先されるべきであり、やはり厳密に踏襲する必要はありません。ただし、書体数、ウエイト数はできるだけ少なくする、というのがセオリーであることは、念頭に置いておくとよいでしょう。

1-6. 色

文字色と背景色の輝度を「4.5:1」以上に

Apple、Googleともに、文字色と背景色のコントラストに関する具体的な規定があります。Googleは色の指定まで行っていますが、これを遵守するとブランドに合わせた配色ができなくなります。ここではAppleのガイドラインを優先し、輝度を「4.5:1」以上の比にする、と捉えておくと良いでしょう。

2. ボタン

2-1. サイズ

横96px×縦96px以上（物理サイズ9mm×9mm以上）

Apple、Googleともに、ピクセル数や物理サイズの規定があります。やや大きめのGoogleを参考値とするのがよいでしょう。

2-2. 形

一般的な形状で、種類は3つ以内に

Apple、Googleともに、形状に関する記述があります。Appleはテキストのみの表現としていますが、これは難しい制約でしょう。フラット（文字のみ）、ライズド（長方形）、フローティングアクション（円形）と3種類の形状を設定しているGoogleのガイドラインの方がより現実的といえます。厳密に守る必要はありませんが、一般的な形状を採用する、種類は3つ以内に押さえる、と捉えておくとよいでしょう。

2-3. 装飾

立体表現を用い、最低限の装飾を施す

Appleではグラデーションやドロップシャドウなどの立体表現を非推奨とし、Googleでは立体表現の活用を推奨しているのが対照的です。フラットデザインのミニマリズムは継承しながら、より分かりやすいUIを規定したのがマテリアル・デザインという歴史に習うわけではありませんが、やはりGoogleのガイドラインの方が現実的でしょう。装飾過多になるは避けながらも、立体表現も活用し、リンクをリンクと認識できるルールをサイト内に敷設すべきです。

2-4. マージン

ボタン同士は16px以上離す

Googleのみ、隣接するボタン同士は16px相当以上空ける、という規定があります。基本的にはこれを参考値として捉えるとよいでしょう。

2-5. ラベル

シンプルな動詞を用いる

ボタンのラベル（文字）について、Appleのみがシンプルな動詞を用いるべきという記述があります。Webサイトもこれに準じるのが良いでしょう。

2-6. 配置

目的を達成するボタンを右、行動を取り消すボタンを左に

行動を選択させるボタンを左右のどちらに配置するか、ということについて、Appleでは破壊的かどうか、Googleでは肯定的かどうかを基準としています。UXに従って考えるべきで、通り一辺倒のルール化は禁物ですが、多くの場合、目的を達成するボタン（「確認」、「実行」など）を右側、行動を取り消すボタン（「キャンセル」「クリア」など）を左側に置くのが基本と捉えておくのがよいでしょう。

3. 配色

3-1. 原則

色を多用せず、基本色は2色以内に。機能上の必然性に従いルール化

Appleでは、色は対話の手段であり使いすぎてはいけない、と記述されています。Googleではプライマリカラーとセカンダリカラーの2色を選び、さらにその各色から3色相を選ぶ、という具体的な規定がなされています。色もブランド戦略の影響を受けるものであり、何も考えずAppleやGoogleに従うべきではありませんが、色は機能を補完するもの、ユーザフレンドリーなUIにはシンプルな配色が望ましい、という基本は押さえておくべきでしょう。

3-2. コントラスト

前景色と背景色の輝度を4.5 : 1以上に

Appleには数値化された明確な規定があり、Googleには「コントラストを確保する」という緩やかな記述があります。様々な光量下での閲覧が想定されるスマートフォン向けのWebサイトでは、コントラストがユーザビリティに大きな影響を与える可能性があります。ここではより厳密なAppleを踏襲し、前景色と背景色の輝度比を「4.5 : 1」以上に保つと考えておきましょう。

4. アイコン

4-1. 形

シンプルで分かりやすいものに

両社ともにシンプルであるべきと規定されています。Appleではストロークについて、Googleではベースの形状にまで言及していますが、シンプルという大きな指針のみ、参考にするのが良いでしょう。

4-2. 色

基本は単色。非選択時は塗り方とコントラストも調整

Appleでは、選択時と非選択時の色の塗り方に関する言及があります。Googleでは、色の濃度を%で指定しています。双方とも厳密に守る必要はありませんが、単色が基本であるというのは、意識しておくとよいでしょう。

4-3. モチーフ

誰もが分かるモチーフに

Googleの、無生物に人間らしさを与えない、という記述が特徴的ですが、これに従うべきかは議論の余地があるでしょう。Appleが規定している「ユーザが認識しやすい普遍性」というのは順守すべき基準になりえるでしょう。独創的なアイコンはNGということです。

4-4. サイズ

アイコン本体は24 x 24 px～50 x 50 pxの間、タッチエリアは44 x 44 px以上

Apple、Googleともにサイズに関する規定があります。両者を統合し、アイコン本体は24 x 24 px～50 x 50 pxの間とし、タッチエリアは44 x 44 pxを最小値とするのがよいでしょう。

5. その他

5-1. イメージ

必然性のある自然で具体的な画像

Googleのみ、画像は飾りではなくツールである、という考え方が述べられています。厳密や制約事項はありませんが、目的に対して明確に機能する自然で具体的な画像であるべきという考え方は、一つの指針にできるでしょう。

5-2. レイアウト

左上が起点。グルーピングと階層化を活用。8がグリッドの最小値

Apple、Googleともに、それぞれ異なる視点からレイアウトに関する言及があります。双方を統合して参考にするのが良いでしょう。

5-3. ライティング

ユーザの知識に合わせた簡潔な表現

Appleでは術後を用い、Googleでは簡潔さを満たすいくつかの基準が示されています。いずれも普遍的なことであり、UIに載せるコピーの参考にできるでしょう。

そこでこのエントリーでは、現在スマホ対応ができていないWebサイトが、今回のアルゴリズム変更をどう判断すべきかのポイントを整理してみました。

企業サイトにおけるモバイル訪問比率の現状

弊社で実施している数多くのWebサイトに対するログ解析やヒアリング内容から、サイトタイプ別のモバイル流入比率はだいたい以下のようになっていると考えられます。

比率の少ないWebサイトでも20～30%に達し、モバイルと親和性の高いWebサイトでは80%前後まで至ることもある。ただし実際にはビジネスモデルやターゲット特性、掲載コンテンツによっても大きく変わるため、あくまで参考程度。

このうち、比率が60%を超えるゾーンAは当然のことながら、ゾーンBで50％前後を記録しているWebサイトの多くは、おそらくすでにスマホ対応をしていることでしょう。逆に、まだPC向けのWebサイトしか用意していないのだとしたら、Googleのアルゴリズム更新と関係なく、早急な対応をしないといけません。

今回のアルゴリズム更新を脅威に感じているのは、ゾーンBでモバイル比率が40%を切っている、もしくはゾーンCに属するWebサイトでしょう。例えば多くのB2Bサイトではモバイルユーザの割合が少なく、スマホ対応が見送られてきました。このようなモバイルユーザが多いのか少ないのか判断しかねるWebサイトを運営する企業では、今回のGoogleのアルゴリズム更新に困惑しているのではないでしょうか。

今回のアルゴリズム更新で気にすべき点

今回のアルゴリズム更新に対して、様々な専門家が様々な解説を行っていますが、以下のGoogleの公式情報およびGoogle社員による発言が、もっとも信頼できる情報源となるでしょう。

• 検索結果をもっとモバイル フレンドリーに（Googleウェブマスター向け公式ブログ）
• モバイルフレンドリーについての疑問にGoogleが直接答えてくれた！ ～The 13th In-house SEO Meetupレポート

これらの情報を整理すると、4月21日のアルゴリズム更新に対する判断基準となるのは、特に以下の点です。

• モバイル検索にのみ適応される
• 評価はページ単位で行われる
• ナビゲーショナルクエリには影響しない
• モバイルフレンドリーテストで使われている基準だけで判断される

言い換えれば、デスクトップ検索には影響せず、サイト全体の評価が落ちるわけではなく、企業名やブランド名、商品名を指名するような検索には影響を与えず、評価基準はシンプルで改善箇所は明確である、と捉えることができます。つまり、早急なスマホ対応が必要なWebサイトは限られており、対策が必要であったとしてもそれほど難しくはない、というわけです。

緊急性を見極めるポイントと応急処置の方法

前述の話から、Googleの新しいアルゴリズムをどう判断し、スマホ対応をどう実施すべきかをまとめたのが以下のチャート図になります。

図の中で数字の付いている個所について、以下でより詳しく解説します。

1. モバイルユーザはビジネス上重要か？

モバイルでの訪問比率は判断を決める一つの指標ではありますが、大事なのは%の大小ではなく、モバイルでWebサイトに訪問するユーザがビジネス上重要かという点です。例えばモバイルユーザは既存顧客やパートナー企業がほとんどで、売上げ等へのインパクトがほとんどないのであれば、対応を急ぐ必要はありません。一方、モバイルユーザにリード（見込み顧客）が多く含まれてたり、人材獲得に影響がありそうであれば、対応は急ぐべきかもしれません。ちなみに、ビジネス上重要かどうかは、モバイルユーザがどのコンテンツにアクセスしているか、どういう検索キーワードを使っているか、Webサイト内でどのような行動経路を辿る傾向があるかなど、経験則や「そんな気がする」ではなく、データを元に判断しなければなりません。

2. SEOはWebサイトへの流入施策として重要か？

そもそもの話として、Webサイトへの流入経路として自然検索が重要でないのであれば、今回のアルゴリズム更新に合わせた対応は不要でしょう。広告などのペイドメディアでの流入、イベントや営業で接触してからの訪問、SNSからの流入がほとんどを占めるようなWebサイトでは、少なくとも現時点では、モバイル向けのSEO対策は戦略上重要ではありません。もちろんユーザ体験を高めるためのスマホ対応は将来的に重要になってくるでしょうが、4月21日に向けての早急な対応は不要と考えられます。

3. モバイル検索には、一般キーワードが多いか？

ログを解析した上で、モバイルユーザが使うキーワードが企業名やブランド名、製品名ばかりであれば、新アルゴリズムを恐れる必要はありません。なぜなら、ナビゲーショナルクエリと呼ばれる類の検索には影響しないためです。例えば現在、企業名で1位に表示されていれば、新アルゴリズムでもおそらく1位に表示されるでしょう。ユーザが求める情報に適切に誘導する、というGoogleの本質を考えると当然のことです。一方、具体的な固有名詞が入らない一般キーワードでの検索流入が多い場合には、アルゴリズム更新によって流入が減少する可能性があり、早急な対策を講じる必要があるでしょう。

4. 競合サイトもスマホ対応が進んでいるか？

SEOを考える場合、内部要因／外部要因だけでなく、検索結果における競合サイトとの関係も重要です。上位表示を狙いたいキーワードでモバイル検索をした時に、競合サイトの多くがスマホ対応されておらず、あるいは対応に時間がかかりそうなWebサイトばかりであれば、急ぐ必要はないかもしれません。Webサイトの活用が遅れている業界では起こりえることです。一方、ほとんどの競合サイトがスマホ対応を終えている場合には、4月21日以降に順位が急落する可能性があります。4月21日までに対策を実施していく必要がでてくるでしょう。

5～6. モバイルユーザにおけるランディングページの把握とスマホ対応ページの決定

アルゴリズム更新に向けて、なんらかの対応を早急に実施する必要がある場合、まずはログを確認し、モバイルユーザがランディングしているページを把握しましょう。新アルゴリズムはページ単位でしか反映されないので、Webサイト全体をスマホ対応させる必要はありません。つまり、モバイル検索でよくランディングされるページをまず気にしておけばいいわけです。

ランディングページを確認したら、訪問比率と作業負荷から、対応ページを決めましょう。例えばモバイル検索で7割以上がホームにランディングしているようなWebサイトであれば、まずホームだけをスマホ対応するでいいかもしれません。また、利用頻度は高くないが、動線上重要であり、かつ構造的に簡単にスマホ対応できるページが存在するなら、改善対象に含めてもいいでしょう。

7. モバイルフレンドリーテストと改善個所の把握

スマホ対応するページが決まったら、Googleが提供しているモバイルフレンドリーテストにかけて、改善ポイントを改めて把握しておきましょう。ちなみにモバイルフレンドリーテストでは、以下の4点についてチェックされます。

• テキストの大きさ
• リンク同士の近さ
• モバイル用viewportの有無
• 画面幅の大きさ

逆にいえば、この4つを押さえておけば、アルゴリズムが更新されても評価を落とすことはありません。4月21日に向けての応急処置としては、まずはこの4点の改善に集中すべきで、それ以外のデザインのディテールやOSによる表示差異などは、対応に時間をとられるのなら後回しにしましょう。

8～9、レスポンシブデザインにするか、独自ページ+リダイレクトにするか

SEOを意識したスマホ対応というと、ソースコードやURLが一つのレスポンシブデザインの方が有利と誤解するかもしれませんが、必ずしもレスポンシブデザインにする必要はありません。モバイル専用の独自ページを用意し、そこにリダイレクトをかけても、きちんと評価されるようになっています。

では、どちらがいいかということですが、まず、PCとスマホでコンテンツを変える必要があるか、というのが最初の判断基準になります。PCとスマホで見せる情報を変えるのであれば、独自ページ+リダイレクトで対応した方がいいでしょう。逆に、PCとスマホで情報を変えない（もしくはどう変えていいかまだわからない）ということであれば、基本はCSSの改修だけで、画像生成やHTML改変は最小限に抑えられるレスポンシブデザインの方がいいでしょう。

なお、古いWebサイトの場合、構造上の制約でレスポンシブデザイン化が難しいケースがあります。その場合にも、独自ページ+リダイレクト対応にした方がいいかもしれません。

まとめ

本エントリーでは、Googleのモバイルフレンドリー・アルゴリズムに対して、もし応急処理が必要であればどうすべきか、という話を中心に解説しました。しかし誤解していけないのは、スマホ対応は、SEO対策の一環でやることではありません。スマホ対応とは、スマートフォンを使うユーザのメリットのために行うもので、本タイトルにあるような「グーグル新アルゴリズム向け」という観点は、本質ではありません。

弊社経験では、スマホ対応をしていないWebサイトでは、デスクトップユーザに比べてモバイルユーザの直帰率が高く、1訪問あたりの平均閲覧ページ数も低くなる傾向があります。またスマホ対応を行うと、デスクトップとほぼ同レベルにパフォーマンス改善されることがほとんどです。

さらに、同一コンテンツを提供するレスポンシブデザイン化されたWebサイトのログを見ると、閲覧ページ数も閲覧しているページの種類も、デスクトップとモバイルでほとんど変わらないことが多いです。ユーザ特性やコンテンツ構成に依存しますが、スマートフォンでもPC並みに積極的に情報取得をするユーザが増えている証ではないでしょうか。

このようにスマートフォン利用が一般化する中で、モバイルフレンドリーではないWebサイトをそのまま放置することは、機会損失を意味します。もちろん、ビジネスへのインパクトや対応の優先順位、Webサイトに求められる役割等を総合的に判断して対応を決めることになりますが、スマホ対応はすでに「やってて当たり前」のものとなっています。

今はまだ30%未満だから大丈夫、うちはB2Bだから関係ない、と単純に考えるのではなく、この先の利用動向の変化も見据えつつ、今回のアルゴリズム変更を一つの契機として、スマホ対応をどうすべきか考えていくと良いのではないでしょうか。

ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。

• 表示デバイスの多用化
• スマートフォンアプリの一般化
• タッチスクリーンの普及

トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景の推測を含めてまとめてみました。

1. Big UI / Low Density / Long Pageの潮流

かつてPCサイトといえば、限られた領域にいかに要素を詰め込んでいくか、という設計が多かったように思います。しかし現在では、UIパーツは大型化し（Big UI）、密度は低くなり（Low Density）、ページは長くなる（Long Page）傾向にあります。

元々は海外のクリエイティブ系、スタートアップ系のWebサイトを中心に採用されていたこのような設計は、海外企業の日本進出や、先駆的な目を持つWebデザイナー、それを採用する企業のWebサイトによって、徐々に日本でも広まってきました。この流れはフラットデザインとも呼応し、2013年以降にリニューアルされたWebサイトの多くが、このBig UI / Low Density / Long Pageに基づいた設計思想になっています。

2014年にリニューアルされたLIXILのWebサイトは近年のトレンドを踏まえた設計、以前から存在する東京メトロのWebサイトは、密度が高く情報が詰め込まれていたやや古い設計であるといえる。

このようなトレンドには、単に見た目を今風にする、ということだけでない、合理的な理由がいつか存在します。開発側の思惑としては、レスポンシブWebにしやすいという点があげられますが、ユーザ側の立場に立つならば、見やすい、わかりやすい、迷わない、ということ以外に、タッチスクリーンで利用しやすいサイトになることも、メリットとして大きいのではないでしょうか。

近年はタブレットのみならず、ノートPCでもタッチスクリーンの実装が当たり前になってきました。スマートフォンサイトを用意しない場合には、スマートフォンでの閲覧もある程度許容できるUIが求められてきます。

タッチスクリーンでは、指でのタッチが基本操作となるため、細かな操作はできません。そのため、UIを大きくし、要素間のスペースもゆったりさせる必要が出てきます。UIが大きく、密度が低くなれば、当然画面に映し出される要素が少なくなるため、ページは長くなり、スクロールが前提となってきます。

このエントリーで以降に紹介するトレンドの多くは、このBig UI / Low Density / Long Pageの潮流から派生したものです。これはファッションとしてのトレンドではなく、現在のユーザ行動に最適化された設計思想であるといえます。

2. 1カラムレイアウト

Big UI / Low Density / Long Page に適したレイアウトとしてよく採用されているのが、1カラムレイアウトです。

かつては、右もしくは左にメニューバーやバナーなどを設けた2カラムのレイアウトがPCサイトのUIの主流でした。ECサイトなどの情報量が多いサイトでは、3カラムレイアウトも多くみられました。しかし現在では、左右のカラムを取り去り、コンテンツ部分だけにフォーカスする、1カラムレイアウトが増えてきています。

ユーザからすると、不必要なノイズが目に飛び込んでくることがなくなり、本当に必要なコンテンツに集中できるようになりました。文字はより読みやすく、画像はより大きく表示されるようにもなりました。

一方、目に飛び込んでくる情報量が減り、バナーなどを散りばめることによる偶発的な出会いは演出しにくくなりました。そのため、ユーザ動線の設計は、より慎重に行わなければならなくなりました。

また、サイドカラムにローカルナビゲーションを設置する手法は、他階層化したWebサイトにおいて、ユーザを迷わせないという大きなメリットがありました。これを取り去ってしまうということは、サイト全体を低階層化し、さらにメニューをできるだけ少なく絞り込むなど、1ページ内のレイアウトにとどまらず、サイト全体の設計の考え方を、見直すことを意味します。

逆にいえば、多階層化が前提のメガサイトにおいては、1カラムレイアウトが適切な解でないことも多く、その判断は慎重に行わなければなりません。

グリーのコーポレートサイトでは、1カラムレイアウトを維持するために、ローカルナビがヘッダ下に並んでいる。これだけの数のメニューを改行してまで並べているのは珍しい。一方、KDDIのコーポレートサイトでは、従来型の2カラムレイアウトを併用している。

3. 中央揃え

1カラムレイアウトの問題の一つは、文字の改行でしょう。文字が横幅いっぱいまで伸びるようになり、レイアウトを美しく保つのが難しくなりました。1行の文字数が40を超えると、人は読みづらいと感じるとも言われています。１カラムになったからといって、何も考えず、横幅いっぱいに文字を表示させるのは、避けたいことです。

これを解決する一つのアイデアが、中央揃えの併用です。横幅が広い１カラムレイアウトでは、中央揃えと左揃えをいかにうまく組み合わせるかが、デザインのポイントになってきています。

1カラムを採用する多くのサイトでは、中央揃えと左揃えを上手に混在させ、ストレスなく文字を読ませることが求められている。

中央揃えの活用には、いくつかの注意点があります。まず、ユーザの目線を無視した中央揃えは避けなくてはなりません。例えば、長文を中央揃えにすると、文章の開始点が行によって変わるため、読みにくくなってしまいます。もし中央揃えを使うのであれば、あまり改行されない短い文章、長い文章であれば左揃えにする必要があります。

また、近接する要素との関係性にも配慮が必要です。近接要素が横幅いっぱいの時は、中央揃えで配置しても、収まりの良くまとまります。しかし、近接要素が横幅いっぱいに存在しない場合、中央揃えは中途半端な位置に浮遊しているように見えてしまいます。そのため、ボックスやボーダーなどを駆使して、中央揃えを違和感なく見せる工夫が必要となります。

1や2のように、周辺に「中央である」と認識できる要素があれば、中央揃えの混在もキレイに見える。一方、3のように、周辺要素との関係で中央と認識しにくい場合、中途半端な位置に表示されている印象を与えやすい。また4のように、長すぎる文章は、見た目はシンメトリーでキレイに整列しているように見えて、読みにくくなることもある。

4. 固定ヘッダとヘッダの薄型化

固定ヘッダも、すっかり一般化してきました。多くの場合、ここにはグローバルナビゲーションが搭載されます。ページ内のどの位置にいてもすぐに主要コンテンツに横移動できる固定ヘッダは、サイドナビを持たず、ページが長くなる傾向の現在のUIにおいて、ユーザビリティを担保する合理的な機能です。

固定ヘッダは、数多くのサイトで採用されている。トヨタのように、ヘッダ全てではなく、ヘッダの一部（ローカルナビ）のみを固定化させるケースも多い。

ただし、固定ヘッダには、必要がないときにもそのエリアを占拠してしまう、というデメリットがあります。そのため、ヘッダはできるだけ薄く仕上げなければなりません。かつてのPCサイトでよく見かけたような、多段式の分厚いヘッダは採用しにくくなります。

このことは、ヘッダ内に配置する要素の絞り込みが必要になることを意味します。格納する要素が多いと、ヘッダはぶ厚くなり、固定化させづらくなります。メニュー数は絞るべき、というのは以前から言われてきたことですが、このことをより強く意識していく必要が出てきています。

5. 固定式の左ナビゲーション

近年、グローバルナビを左側に配置するレイアウトを見かけるようになってきました。といっても、かつての2カラムレイアウトが主流だった時代の左ナビとは、構造や機能が異なっています。

画面左に固定されて、スクロールに追随させるのが最近多いパターンです。また、メインコンテンツ部分は、基本的には1カラムレイアウトで、画面幅に合わせて伸縮させるリキッドレイアウトが採用されることも多いです。

様々な企業が導入し始めている左メニュー。固定式で、マウスオーバーやクリックでメニュー展開するものが多い。

このような設計は、アプリライクな操作感をもたらします。また、マルチデバイス対応にしやすくなる特徴もあります。スマートフォンファーストで設計し、レスポンシブWebやリキッドレイアウトでPCにも対応させるような場合に、このような構造が採用されやすい傾向があります。

ただし、注意しておかなければいけないのは、このような新しいレイアウトは、一般ユーザにはとっつきにくい印象を与える危険性もあります。また、メニューを多階層化させる際には、クリックやマウスオーバーで下層メニューを引き出すような操作も必要となるため、操作の難易度は上がります。

固定左ナビのデメリットも踏まえ、ユーザのリテラシー、全体の構造などから、導入の妥当性を見極める必要があります

6. リキッドレイアウト

デバイスが多様化する中で、画面解像度はかつてないバラエティとなってきています。以前は、横幅960～980pxあたりに収めていれば概ね問題なかったですが、この定石は通用しにくくなってきました。このような解像度の多用化に対する一つの回答が、画面幅に合わせてレイアウトを伸縮できるリキッドレイアウトです。

リキッドレイアウトは、要素や画像をピクセルではなく、%で指定します。そのため、どのようなサイズ、解像度の画面で見ても、ある一定のバランスでレイアウトされます。小さな画面に合わせた時のデメリットと、大きな画面に合わせたときのデメリットの両方を吸収することができます。

ビーナスベッドのサイトでは、画面の幅に合わせてレイアウトや画像が可変する。ロゴや文字サイズは変わらず、あくまでレイアウトと画像の伸縮だけでバランスをとる構造になっている。

留意しないといけないのは、これは各画面に「最適化」されたレイアウトではない、ということです。様々な解像度の画面を想定し、一番破綻が少ないと思われる最大公約数的な妥協点をまとめ、レイアウトする手法です。ある特定のサイズで感じるバランスの悪さは、ある程度許容しないといけない、ある意味非常にWebらしいレイアウトともいえます。

7. 立体表現への回帰

MicrosoftがWindows 8で、AppleがiOS7で提唱したフラットデザインは、それ以前に支配的だった装飾過多なスキューモフィックに対するカウンターとして強いインパクトを残し、アプリUIの世界では瞬く間に一般化しました。この流れはPCサイトにも波及し、2013年以降にリニューアルされているPCサイトの多くが、フラットデザインを取り入れています。

一方で、ここにきて行き過ぎたフラット化の問題も表出してきました。フラット化は、デザインの機能的側面に大きな足かせを与えることになります。特に画面要素が多いWebサイトにおいては、立体表現がないことで、クリック要素と非クリック要素の区別がつきにくくなったり、情報の重みづけや関連性が分かりにくくなったりするケースも出てきました。フラットデザインは、見た目のシンプルさや親しみやすさとは裏腹に、難易度の高いデザインであるともいえます。

不動産賃貸のエイブルのサイトは、意欲的にフラットデザインを取り入れているが、クリックできる場所とそうでない場所の区別が付きにくく、やや学習が必要なUIといえる。

このような行き過ぎたフラット化の反省から、最近では立体表現を再び取り入れる動きが出はじめてきました。その象徴と言えるのが、Googleが提唱するマテリアルデザインです。マテリアルデザインでは、レイヤーや影などといった現実世界に存在する3次元表現の積極的な活用をうたっており、UIは再び立体に回帰すべき、というメッセージとして受け取ることができます。

AndroidのWebサイトでは、UIのテクスチャはフラットが基本でありながらも、クリッカブル要素には積極的に影が用いられている。

UIはファッションではないので、流行に合わせてフラットデザインにしたり、マテリアルデザインにしたり、という判断は誤っているといえます。ただ、PCサイトのUIとして求められる目的を改めて考えた時に、フラットデザインに課せられた制約に大きな意味があるとは考えにくく、再び立体表現へ回帰していく流れになっていることは、妥当であると感じます。

8. スクロールと連動したギミック

PCサイトのページも長くなり、スクロールが必須の行為となる中で、スクロールに反応するようなUI上の工夫も多く見られるようになってきました。

数年前に流行したパララックス（視差効果）を使った表現も、この流れの一つといえます。ただ、現在はパララックスほどの大掛かりな仕掛けは少なくなっており、スクロールに合わせてメニュー要素が動いたり、ある位置に来るとポップアップが展開したり、文字がフェードインしたり、といったもう少し控えめなギミックが目立ちます。

スクロールに合わせて要素が動くことで、もっとスクロールさせてみよう、というユーザ心理が生まれくる。運送会社のリクサスのサイトでは、長い1ページに対して、トラックの旅を想起させるような仕掛けが施されている。

これは、JavaScriptのライブラリの普及、CanvasやCSSアニメーションの一般化で、UIを動かすことがより簡単になり、アニメーションを用いたUIの心地よさを追求しやすくなったためと考えられます。

ただし、動くUIは、人の目が動くものに反応してしまう生理的特性に訴えかけるものです。それゆえに、計画なく過剰に動かすと、目が休まらない、落ち着かない、本来の情報に目が留まらない、といったことを引き起こしかねません。やたらと動かしてしまうのではなく、確実に効果が得られる個所への、最小限度の利用に留めるのが得策でしょう。

9. シームレスな画面遷移とトランジション

Webサイトとアプリの違いの一つに、画面遷移がシームレスに行われるか否かという点があります。Flashが衰退し、HTMLのサイトが再び圧倒的な主流になり、画面遷移は画面もリフレッシュされて切り替わるもの、というのが常識になりました。

しかし、アプリライクな画面遷移を実現するpjaxのようなJQueryプラグインが生み出され、PCサイトでもシームレスに画面遷移するサイトを再び見かけるようになってきました。

pjaxは、Webサイトのファイル構造は維持したまま、画面遷移時に特定のソースコードだけを入れ替える動きを実現します。つまり、ページはきちんと存在しているため、FlashやかつてのAjaxを使ったワンスクリーンサイトでの「SEOに不利」といった欠点を回避しています。

最近ではさらに進化し、画面遷移時のトランジションもバラエティ豊かになってきています。

アーキタイプのサイトでは、CSS3のtransformプロパティを使い、3D的な画面遷移を実現している。

現在のところ、このような技術はデザインの情緒的側面を強化する演出としての要素が強く、サイトの目的や構造によっては、このような演出が適切ではないケースもあります。見た目の新規性にとらわれるのではなく、導入効果を十分に考慮したうえで、採用を決める必要があります。

10. Webフォントの活用

Webフォントを採用すれば、OSにはない書体の表示が可能になります。画像テキストを生成する必要がなくなり、更新性が高いサイトであっても、文字表現の幅が広がります。

海外ではGoogleなどがフリーで使える質の高い欧文Webフォントを積極的に公開しています。欧文の場合、26×2種類（大文字・小文字）＋記号しかないので、書体も比較的豊富で、現実的な選択肢となり、急速に普及しています。

日本国内でもその影響で、日本語のWebフォントを用いるケースが見られるようになってきました。

ミクシィのコーポレートサイトでは、全面的にAXISのWebフォントが使用されている。文字量の多いコーポレートサイトでここまで採用される例はまだ珍しい。

ただ、Webフォントは確かに今のPCサイトのトレンドではありますが、日本語Webフォントには、欧文ほど簡単には普及しない障壁があります。

日本語は欧文と違い、数万の文字データを必要とします。そのため、必要なフォントだけを引っ張ってくるようなサーバ側の仕組みが必要となりますが、これにより、表示が一瞬遅れたり、奇妙な挙動をしたりするケースが見受けられます。

また、アンリエイリアスが美しくないものが多く、特にWindows環境では汚いアウトラインの文字が多い点も、大きな問題です。欧文と違って文字が多いゆえに、カーニングをルール化することも難しく、文字詰めなどはほぼ、あきらめなければなりません。つまり、見た目にこだわるためにWebフォントを採用するのに、Webフォントを採用することで見た目が劣化する、という矛盾が起こるのが、今の日本語Webフォントの実状です。

普及を阻む要因はほかにもあります。それは、今までと支払い先が変わることです。前述のように日本語のWebフォントには、サーバ側の仕掛けがどうしても必要となるため、欧文のような無償提供が難しい実情があります。

そこで、日本語のWebフォント提供会社はトラフィックによる課金を行っているのですが、これにより、今までとお金の出所が変わってしまいました。インストール型のフォントであれば、制作会社がフォントを買いきってしまえば、クライアント企業が美しく個性的な文字を自由に扱えました。それに対してWebフォントでは、クライアント企業がフォントに対して対価を支払わないといけません。

もちろん商流的には制作会社が仲介して支払うこともあるでしょうが、有償である以上、普通の企業であれば費用対効果の説明を求めてくるでしょう。しかし、Webフォントとビジネスの相関関係が説明できない上に、上記のような、「必ずしも美しくなるわけではない」というデメリットも存在するため、導入に強い説得力を生む出すことができないのが実情です。それゆえに、Webの新しい技術に寛容な企業でのみ使われる、という現状になっているのではないでしょうか。

Webフォントは今後の潮流であると思いつつも、日本語に関しては制約やデメリットが多い、一般的な普及には大きな課題があると言えます。

11. SVGの利用

Web上の画像はでは長らくJPEG、GIF、PNGが主流でしたが、ここに来て増えているのがSVG形式の画像です。

SVGの最大の特徴はベクターデータである点です。これにより、大きさや解像度に依存せず、どのような環境でも、どのくらい拡大しても、常になめらかに表示させることが可能になりました。サイズも軽く、アニメーションさせることも可能で、モバイル＆マルチデバイスを前提とした閲覧に適した画像フォーマットといえます。

アップルサイトのグロナビやロゴは、どこまで拡大しても美しいアウトラインを維持するが、これはSVGを用いているからである。

SVGを利用するうえでネックとなるのが、対応ブラウザです。Internet Exploreでは、バージョン8以下はSVGに対応していません。そのため、IE８以下もターゲットとするPCサイトでは、代替手段の用意が必要です。一方、IE8以下を切って、モダンブラウザにフォーカスできる場合には、SVGの積極的な利用が可能になります。

画像の特性としては、色が少なく単純な図形の描画に向いていうという点があげられます。一方、写真のようにリアルな表現のものは、SVGには不向きです。そのため、すべてをSVG化するのではなく、画像の特性に合わせてJPEGやPNGを併用することになります。

12. 動画の活用

Flashが成熟期に入ったころ、UIと映像の融合が積極的に試みられていた時期がありました。Flashの衰退とともに、PCサイトは動きのない表現が一般的になりましたが、ここに来て再び、動画をUIに組み込んだようなWebサイトが増えてきつつあります。

最近では、背景に動画を組み込み、前面にキャッチコピーやボタンを配置する様なデザインが多くなっている。

HTMLでプラグインを使わずに動画を表示させるためには、基本的には<video>タグを使う必要があります。このタグはHTML5以降で提供されたものであり、HTML５をサポートしていないレガシーなブラウザでは、用いることができませんでした。しかし、近年HTML5を前提としたモダンブラウザが主流となり、HTML５での実装が前提となる中で、再び動画を積極的に用いやすい環境になっているのが、動画活用が加速している一因として挙げられます。

また、以前に比べて、動画を容易に作ることができるようになっている点も忘れてはいけません。かつての映像制作のような高額な支払いをせず、映像制作を請け負う会社が出てきています。質を求めなければ、スマートフォンなどで個人でも簡単に動画撮影ができるようになっているのも、一つの要因でしょう。

スマートフォンと異なり、PCサイトでは、回線速度にあまり神経質になる必要はありません。動画を用いることで、より効果的な訴求ができるのであれば、積極的に用いていきたいところです。

まとめ

というわけで、いくつかトレンドを紹介しましたが、注意点としては、「トレンドだから」という安易な理由で採用しないことです。UIがトレンドであるかどうかは、Webサイトが追っている使命とは関係ありません。もし、Webサイトが追求すべきビジネスが、トレンドではなくレガシーな技術を求めるのであれば、それを採用するのが、デザイナーの役割です。

トレンドを知ることで一番重要なことは、その背景にある外部要因やユーザ動向の変化の把握です。その本質を理解せず、トレンド・オリエンテッドでWebサイトのデザインを考えていくと、トレンドはキャッチアップできているけど、成果は全然出ない、といいことになりかねません。

トレンドは理解しながらも、それに使われるのではなく、選択肢の一つとしてうまく接していくことが、デザイナーには求められます。