誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック

【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。
ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました

デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか?

・最終的に何を言いたいのか結論が見えないよ。
・関係性が複雑すぎて理解しずらいんだけど。
・要素が多すぎて全てを把握するのが大変。
・何をどこから見れば良いの?
・結局一番言いたいことはなんなの?
・文字サイズがたくさんありすぎてまとまりがないね。
・安っぽいチラシみたいでダサイなぁ。
・全体的にバランスが偏ってて不安定。
・このスペースがぽっかり空いてて…寂しくない?
・なんだか派手な色使いで賑やかすぎる。

私も後輩のデザイナーの作る図に対して、日々あれこれフィードバックを出しますが、自身をふと振り返ってみると、こういった「図」の作り方について誰かから体系的に作り方を教わったという記憶はなく、長年かけて自分なりに失敗を繰り返して技術を習得してきたものだったなと思いました。そんな中、もっと効率的に「分かりやすく美しい図」を誰もが作ることはできないか?と感じていました。

というわけで今回は「分かりやすく美しい図の超具体的な作り方」として、自分が知っているノウハウをできる限り具体的に明文化し、デザイナーはもちろんのこと、デザイン業務以外に携わる方にとっても役に立つ、図の作り方のヒントとしてご紹介してみたいと思います。

分かりやすく美しい図を作るための3つの原則

原則1)一番伝えたいことは何か?を的確にとらえる

図解は、文章よりもスピーディーに大まかな概念を伝えるための手段です。時間をかけて長文を読ませなくても、図を見せれば一番言いたいことの概略を数秒で伝えることができます。最も重要なのは「一番伝えたいことをいかに的確にとらえるか」です。いくら図が美しくても、内容が伝わらなければ意味がありません。チャートでもグラフでも地図でも「この図で伝えたいのは◯◯」と一言で言えることが、分かりやすい図を作るための最初の一歩になります。

原則2)ルールと要素を可能な限り減らす

スピーディーに情報を伝えるためには、何よりも「シンプル」であることが重要です。シンプルをもう少し具体的な言葉に落とし込むとすれば「要素やルールが少ない」と言い換えることができます。文字サイズ、色数、線の種類、線の細さ、マージン、形などなど、すべての要素において最低限のルールで作成することが、シンプルさ、分かりやすさにつながります。

原則3)デザインの4つの基本原則を守る

分かりやすさと美しさを併せ持つ図を簡単に作る、魔法のような裏技はありません。必要とされる力のベースとして、デザインの基本原則を徹底的に身につける必要があります。スポーツ選手にとっての筋肉のようなもので、これを鍛えずして全ての結果には結びつきません。近接、整列、コントラスト、反復の4つの原則を図の細部に渡るまで突き詰めることで、自然と分かりやすさと美しさは向上します。

参考)ウェブデザインに応用するデザインの4つの基本原則

チャート作成のテクニック

01)規則正しい形を使う

図版の役割は複雑なものをシンプルで分かりやすい形で伝えることが大原則です。その前提で考えると、図版内で使う要素もシンプルな形であればあるほど良いと言えます。正円、正三角形、正方形、正五角形…など、規則正しい形で表現することを心がけましょう。長方形を使う場合でも黄金比(1:1.618)の比率にするといった工夫で美しさを保つことができます。

02)全体の形をシンメトリーにする

シンメトリーな構成は安定感があります。構成する内容を左右対称なバランスで表現できそうであれば、積極的にこの形に収めると良いでしょう。もちろん、全ての図版において左右対称に表現するのは不可能と言えますが、やはり左右や上下のバランスが違うとシンプルさに欠ける印象につながります。図版に個性は不要です。より安定した印象につながる表現を追求するようにしましょう。

03)情報を囲む際は一重にとどめる

情報をグループとして見せる一番簡単な手法は「囲む」です。囲みは一つのグループと見なされ、情報構造を整理するのに役立つ反面、要素が増えるために複雑な形へと近づきます。囲む以外にも「近づける」「同色にする」といった表現でグループは表現できます。初心者の方はまず二重以上に囲まないことを徹底し、囲み以外でグループを表現することを心がけましょう。

04)線は最低限の部分のみに使う

囲み同様に、線も情報の区切に多用されます。最も簡単な例は、AとBを区別するために間に線を引く、といった使い方です。しかしこの線自体には情報としての意味はないため、可能であれば無い方がよりシンプルになります。線は増えれば増えるほど図版の印象を複雑になり、少なければ少ないほどシンプルで洗練された印象になります。線を引く以外の情報の表現方法を優先して考えるようにしましょう。

05)色はベース、アクセント、ポイントの3色に絞る

配色は、最も多くの面積で使われるベースカラー、キーとなる部分で使うアクセントカラー、ごく一部の目立たせる箇所に使うポイントカラーの3つに絞るのが鉄則です。3色にどんな色を使うかは、掲載される媒体全体の配色設計に合わせるのが無難です。例えばWebサイトで、グレーベースのコーポレートサイトであれば、ベースはグレーに、アクセントはブランドカラーにすると奇麗にまとまります。

06)文字はサイズ2種類、書体2種類(欧文と和文1種類ずつ)に絞る

クオリティの低い図版に共通して言えるのは、文字のルールが必要以上に沢山あることです。一つの図版の中でサイズが何種類もあったり、書体もあれこれと違うものを使うのは望ましくありません。書体は欧文和文それぞれ1種類、サイズはキャプション用の小さい文字を1種類、見出し用の大きな文字を2種類ほどに抑えると、シンプルさを保てます。文字サイズは明確に違いがわかるサイズに設定しましょう。

07)重複語、修飾語、冗長な語尾を削除する

図版のスペースは限られているので、できるだけ無意味にスペースをとってしまう要素を省く努力が必要です。それは図形などの形だけでなく、言葉も関係します。同じ言葉が繰り返し使われる場合には、一つひとつは省いてタイトルでまとめたり、長過ぎる言葉は箇条書きレベルに言葉を削ったりと、工夫できる部分は沢山あります。可能な限り情報を減らすことが、分かりやすい図版を作る上では重要です。

08)矢印は最低限の大きさに止める

矢印の形ひとつでも図版の印象は変わります。実はこの矢印は、小さくても、また控えめな配色であっても、視線を誘導するのに十分な力を発揮します。図の中で重要となるのは、関係性が指し示された「要素」であるため、関係性を指し示す矢印自体は控えめな表示でよいのです。最低限、矢印がどちらを向いているかが分かるレベルに調整するのが良いでしょう。

09)吹き出しは角丸とツノを小さくする

人の声を表現する際に使う吹き出しの表現には、明確にクオリティの低さを避けるテクニックがあります。まず角丸を使う際にはRを小さくすることです。3〜4pxほどにとどめるのが良いでしょう。角丸が大きすぎると大雑把な印象につながります。またこれはツノにも同じことが言えます。ツノについては、ルールを最低限にする大前提も踏まえ、設置する位置も可能な限りルールを減らしましょう。

10)平面的に表現する

よほどの複雑で特殊な内容でない限りは、関係性はすべて平面的に表現できます。奥行きをもたせた立体的な表現は、パースが狂って違和感が出る、他の図版との統一性が保ちにくくなる、作成に時間がかかるなどのデメリットが多くなります。できれば平面的に表現する方が良いでしょう。図版の構成でオリジナリティは不要です。誰もが見慣れた形にする方が、分かりやすさにつながります。

グラフ作成のテクニック

11)グラフの項目同士の配色は明確に違いがわかる色にする

グラフの項目同士の色味の変化が小さいと、一目見て隣接した要素同士の区分けが分かりにくくなります。色の違いははっきりと分かるようにしましょう。項目数が多い場合には多色使いも検討しますが、散漫な印象になりやすいため、できれば色数は少なくしたいところです。単色で作る場合も、十分に項目同士の色の違いが認識できるようにしましょう。

12)指し示す線は可能な限り短くし、角度は90度・45度・0度の3種類を使う

グラフには何のパーセンテージなのかを説明するテキストを入れますが、数値が小さいものはオブジェクト内に言葉が入りきらないため、線を引いてテキストと結びつける表現を使います。その際使う線も、要素を減らすという大前提から考えると不要な要素ですので、できる限りルールを減らして必要最低限の存在感にとどめましょう。具体的には、線は短く、角度も90度・45度・0度以外は使わないようにします。

地図作成のテクニック

13)素材を表現別に数種類ストックしておく

地図をゼロから作るのは非常に時間がかかり、且つ正確さを担保するのは難しいため、基本は素材を使うことが前提になります。世界地図、日本地図、日本地図でも市区町村ごとにレイヤーが分かれたものなどが必要になるため、日頃からの素材リサーチ能力が重要になります。また地図はリアルな形やデフォルメされた形など、UIの印象によって使い分ける必要があるため、そのバリエーションも踏まえて収集しておくと良いでしょう。

参考)Webデザインに使える商用可能な地図を配布しているサイトまとめ
参考)日本の白地図

14)地図自体に枠、影、立体感を付けない

地図自体が複雑な形のオブジェクトなため、必要以上に装飾を施すとそれだけで野暮ったい印象につながります。また伝えたい情報は、その地図のどのポイントに何があるか?ということなので、地図自体をそこまで目立たせたり、装飾したりする必要は無いと言えます。基本はベタ塗りとし、その上に乗る要素に視線が集まるようにしましょう。

15)文字は縦書きと横書きを使い分ける

決められたエリア内で文字が入りきらない場合、縦書きをうまく利用することも検討しましょう。「ルールは少ない方が良い」という前提から考えると、もちろんすべて横書きで統一されている方がよりシンプルになりますが、そのルールを守るために狭いエリアで文字を何度も改行させてしまうくらいであれば、縦書きを使ってスマートに表現した方が良い場合もあります。柔軟に検討しましょう。

アイコン作成のテクニック

16)フリーのクオリティの高いアイコン素材を使う

アイコンは特に図版の印象を左右します。アイコンがいびつだと、それだけで図版全体のクオリティが低く見えます。もちろん、クオリティに自信があれば自作するのも良いのですが、自信が無い場合はフリーの素材を使ったり、それらをベースに少し改良するなどして作成すると高いクオリティを保つことができます。フリー素材の知識もデザイナーの能力の一つです。常に自分のライブラリを更新しておきましょう。

参考)Material icons – Google Design

17)ピクセルのズレをなくす

ピクセルのズレは全体的にボンヤリとした印象につながります。Webサイトに限って言えば、UI自体がシンプル化の一途をたどり、図版の印象が全体の印象につながりやすくなっているため、こうしたボンヤリ感はサイト全体の見た目の印象に大きく影響します。ピクセルにスナップする設定にしたり、パスの位置を細かく調整するなど、ピクセルのズレに繋がるオペレーション上の悪い癖は早々に無くすようにしましょう。

18)想像で形を作らず、参考を見てディティールを研究する

想像スケッチという遊びがあります。アニメのキャラなどのお題を出され、記憶を辿ってその絵を描くというルールですが、あのゲームの面白さは、頭の中にあるイメージとアウトプットされたイラストのギャップにあります。こうしたゲームが成り立つほどに、人の記憶は曖昧だと言えます。ゼロからアイコンを作成する場合、Googleの画像検索などで対象物のディティールをしっかり研究し、特徴を抑えるようにしましょう。

全体バランスのテクニック

19)デザインのトンマナに質感を合わせる

ここまでのテクニックで、図はできるだけルールを少なく、シンプルに作ることを述べてきました。基本的な考え方としてこれらは意識しておくべきですが、図を包括するグランドデザインによっては、適宜アレンジを加えることも重要です。例えばこちらの例のように、グラデーションがデザインのポイントになっている場合はグラフにグラデーションを活かす手もありますし、アイコンには透明感をプラスして重ね合わせるような手法も考えられます。シンプルであることと、デザインのトンマナを合わせることは別次元と心得ておきましょう。

20)同居する別図ともルールを共有する

ここまでこのエントリーでも様々なチャートやグラフ、アイコンを掲載していますが、作成の際には全てを並べた時の統一感を考慮しています。それは配色、書体の種類やサイズ、マージン、テクスチャ感など、いろんなルールが絡んできます。数多くの図を作成しようとすればするほどルールは増えていきますが、無駄なルールを増やさないこと、時にはルールを増やして表現の幅を広げること、見栄えを優先することのバランスをとることが重要です。このバランスは誰からも具体的に教えてもらえるものではありません。

まとめ

細々としたテクニックを述べてきましたが、図を作ることに自信のない方は、まずは冒頭で述べた3つの原則から実践してみてください。図で伝えるべきことは何で、何が最も重要であると伝えるのか?その情報をいかにして少ない要素とルールでシンプルに伝えるのか?最後はデザインの原則をいかに細部にまで浸透させることができるか。これらを如何に突き詰めることができるかが、分かりやすさと美しさを併せ持った図を作るためのヒントになると、私自身は考えています。

【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。
ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました


dots.CareerMeetUp – UIUXの巻「うちのUIUX事情/基調講演:BCG Digital Ventures Experience Designer 坪田 朋 氏」

11月26日(土)に渋谷にて、UIUX担当者向けのイベントとして「dots.CareerMeetUp – UIUXの巻」というイベントが開催されました。登壇者はBCG Digital Ventures のエクスペリエンスデザイナー坪田さん、Speeeのアートディレクター篠原さん、ランサーズCTOの横井さん、ウエディングパークのマネジャー西脇さん、三井住友銀行IT戦略室の木村さんという顔ぶれでした。今回は登壇者の方々の話の中で学びになった点をまとめたいと思います。

関係者にどうやってUXデザインの価値を理解してもらうか?

UXデザインは何をもって成功とするかは非常に難しい、という話題はこのイベントでも会話に出てきました。成功したことが実感できるタイミングが数ヶ月・数年後というケースもあるなど、効果を短期的に、且つ明確にで測りにくい概念です。故に、その重要性と身近さ、緊急度、決裁の難しさが多くの企業にあるようです。

実際に制作を担当する人からプロジェクトに関わる関係者たちに、どうやってその重要性を示していくのか?という問題に対して、Speeeの篠原さんからは「権力者を巻き込むこと。社長をワークショップに巻き込むこと。」という意見が挙げられました。

元々トップの意思決定によってUXデザインが事業の中で重視された経緯があれば、トップダウンで社長の口からその重要性を語ったり、一緒にワークショップに参加してもらう機会を作れば、自然と関係者のUXデザインに対する意識も改革されていくというお話でした。

様々な会社の社長の著書の中でも、社長自らその姿勢を行動で示し、結果的に社内のスタッフの意識が変革されていくケースはよく目にします。我々のように実際に手を動かす人たち自身が自分たちの必要とする活動をアピールし、権力のある人の賛同を得ることは、様々な社内政治が渦巻く環境の中では大切であることが伺えました。

UXデザインの価値が通じない環境の場合どうするか

質疑応答の中で「UXデザインの価値を分かってくれない場合はどうしたらよいのか?」という質問があった際、坪田さんからは「価値を認めてくれる会社を選ぶ。自分で選択することが大切。」という回答がありました。

意思決定者が多く、フットワークが重くなる企業の中で、新しい価値観や考え方を受け入れてもらうためには並々ならぬ努力が必要です。自分自身は過去に何千人規模の大企業に勤めた経験はありませんが、やはりそうした無理ゲー感を感じた経験は少なからずあります。

どちらが正しい・間違っているといった話に固執し、貴重な時間をモヤモヤとした気持ちで過ごすくらいであれば、やはり自分が大切にする価値観を共有できるステージに自分自身が近づくことも非常に重要です。時間は無限にあるわけではないので、クリエイター自身も自身のキャリアを厳しい目で見つめて判断する力が必要になります。

このイベントで三井住友銀行の方が登壇していらしたことからも顕著ですが、スタートアップだけでなく、大きな企業もデザインシンキングを取り入れ始めていることがリアルに伺えました。そうした流れの中で、文化を根付かせるところにコミットするか、すでにデザイン文化がある環境でサービスをグロースさせるところにコミットするのかは、クリエイター自身が意識的に選ぶ必要があると感じました。

UI/UXデザイン担当者が身につける必要があるスキル

質疑応答で「UI/UX担当者が今後身につけていく必要があるスキルは?」という質問に対して、ランサーズの横井さんから「知識の深さ、視野の広さ、視差の高さ」という回答がありました。知識の深さは自分自身の専門分野のこと、視野の広さは横軸に居る別の職能に対する理解のこと、視差の高さはビジネスの上流行程への理解のことです。

また別の質問「イケてる・イケてないUX/UI担当者とは?」に対し、三井住友銀行の木村さんからはイケてる人として「ビジネス、エンジニア、デザイナーの架け橋になっている人」という回答が、Speeeの篠原さんからはイケてない人として「UXと言いながら、自分のポジションに閉じてしまう人」という回答がありました。

どの回答からも共通しているのは、UXデザインに関わる際にはビジネス全体を見通す視点を持ち、職能に関係なく目的達成のために協力・理解を惜しまない姿勢を持つことが重要という話です。自らの作業のみの完遂だけを目標とするような視野の狭さでは、ビジネスを通じて顧客に良いUXを与えることはできません。

またUXデザインとは、ユーザビリティやアクセシビリティ同様に、デザイナーやエンジニアなどUXデザイナーという肩書きでなくとも、自分自身の専門知識に加えて持つべき知識です。その考えに対して登壇者の方々の回答は非常に納得できるものでした。

各々の専門分野のスキルや知識は深めつつ、すべてのクリエイターがUXデザインの考え方を身につける必要があると感じました。

サイトパフォーマンスからUXを追及する

見落としがちな視点として、サイトパフォーマンスの視点を大切にするという話がWedding Parkの西脇さんから語られ、非常に参考になりました。情緒的な演出を目的に取り入れた表現がパフォーマンスの悪化を生み、結果的にUXに悪影響を及ぼすケースは多々あります。特にデザイナーは実装フェーズから離れていることが多いため、パフォーマンス観点での使い勝手は改めて認識しなければならないと感じます。

Wedding Parkでは社内の文化としてサイトパフォーマンスを考える活動があり、パフォーマンス改善を盛り上げる社風、パフォーマンス向上のためのハッカソンや合宿、KPI達成による成果報酬(社長からのご馳走)といった文化が作られているという話でした。

海外ではパフォーマンスエンジニアと呼ばれる職業も確立しており、サイトパフォーマンスがUXに密接に関係していることは明白です。Yasuhisa hasegawaさんのポッドキャスト、Automagic Podcastの#175、竹洞陽一郎さんの回でサイトパフォーマンスについて非常に詳しく語られているのを思い出しました。UXをパフォーマンスの視点で考えるヒントが沢山詰まっているので、ぜひ一聴されると良いと思います。

Automagic Podcast #175 竹洞陽一郎さん

人生であと25個くらいしかサービスを作れない

キーノートの坪田さんの話の中で「人生であと25個くらいしかサービスを作れない」という話がありました。自分の現在の仕事のペースを俯瞰して見ると、何年でいくつくらいのサービス開発に関わっているのかが分かります。自分自身が引退する年齢を考えると、あと幾つくらいのサービス開発に関われるのかが分かるということなのですが、坪田さんの場合は「25個」というお話でした。

この件は自分も最近考えることが多く、とても共感できました。近年の自分の働き方を振り返ってみても、長いものだとデザインのフェーズが約半年ほど続く場合もあったり、継続的にサービスをお手伝いするケースも増え続けているため、一定期間に関わるプロジェクト数は減少傾向にあります。

30代を超え、定年する頃の自分のイメージが見え始めると、その時自分はどんなふうに今の自分を振り返るのだろう?と考えるのですが、やはり「全力でやりきった」と言える仕事が沢山あったなと振り返りたいだろうなと感じています。

そうした話を踏まえると、日々目の前にある今現在関わっているプロジェクトこそが、その結果に如実に結びついているということがリアルに感じられるようになります。毎回毎回のプロジェクトに対して、どこまで自分自身の思考を深めることに向き合えるのか、が大切であると感じました。

意識すべきキャリア

坪田さんはキーノートの中で、会社という枠にとらわれずに自身の強みをアピールすることの大切さが語られていました。具体的な例で言うと、SNSを使ったアウトプットであったり、登壇の期会に自身の考えを来場者に伝えるといったものです。

私自身も今年に入って積極的にブログを書くようになり、様々な人と知り合う機会が増えたことで、その大切さを以前よりも意識するようになりました。自ら積極的に思いや考えをアウトプットすると、自分の欲する情報が自然と入り込んでくる流れが生まれ、徐々に環境が変わるものだと感じています。自らの活動をより活性化させるためには、思考を外へ外へと出すことが大切であると感じました。

登壇者の方々の当日のスライドはこちらからご覧ください


読書の効果が格段にアップする!精神科医が教える「忘れない読書術」

皆さんは読んだ本の内容をどのくらい覚えていますか?

私は月に2〜3冊ほどのペースで、今現在自分が持っていない分野の知識を知るために読書する習慣があります。エンタメというよりも勉強の感覚が強いのですが、一つの悩みとして「数ヶ月経つと読んだ内容を忘れてしまっている」という問題がありました。

時間をかけて読み終えた時には「勉強になった!」とひとしきりの満足感を感じるのですが、いざその知識を思い出そうとするとスラスラとその話ができなかったり、もしくはその話があったことすらも忘れてしまっている場合もあります。

読書の目的は「知識の蓄積」ですので、読むという行動自体には意味がないと言えます。後々その内容を説明できたり、どこかで引用したり、その内容について自分なりの考えを議論したりできるようになっていなければ意味がありません。

自分にとって価値のある情報をもっとしっかり記憶に定着させたい!そんなふうに考えていたところで「精神科医が紹介する忘れない読書術(著/樺沢紫苑)」という本に出会ったのですが、その内容がこの悩みを解決する上で非常に参考になったので、今回はその簡単な概要と、記憶に定着させるための3つのポイントをご紹介してみたいと思います。

記憶に定着するのは「何度も利用する情報」と「心が動いた情報」

人は経験したことを全て覚えられるわけではありません。人の脳は自然と不要な情報を忘れていくようにできています。具体的な脳の部位で言うと、情報は一時的な記憶場所である「海馬」で一旦仮保存され、重要であると判断されたもののみ、記憶の金庫とも言える「側頭葉」に本保存される、という流れになっています。

本を一通り読んだ時には、新しい情報が海馬に記憶として仮保存されますが、その後しばらくその情報に触れることがなければ、再利用される価値のない情報とみなされ、次々と流れ込んでくる新しい記憶に追いやられ、忘れ去られてしまいます。

つまり記憶に残すためには、その情報が大切なものなんですよと脳に判断させる必要があるのです。本書では、そう判断させるための二つの基準が紹介されています。それが「何度も利用すること」と「心が動くこと」です。

ポイント1)情報を何度も利用して記憶する 〜1週間に3回アウトプットする〜

まず何度も利用することですが、「利用する」とはすなわち「アウトプットされる」ということです。話に出したり、文章に書いたり、といった行動がアウトプットにあたります。本書の中では「最初のインプットから7〜10日以内に3〜4回アウトプットすることにより、記憶に定着する」と語られています。

具体的に紹介されているアウトプット方法としては、マーカーで線をひく、人に話す、SNSに感想を投稿する、書評を書く、といった方法が紹介されているのですが、私は以下の流れで3〜4回のアウトプットを重ねると、いつもより記憶に定着していることが実感できました。

1回目)Twitterにメモや感想を投稿する

まずTwitterを使って覚えておきたい情報をアウトプットしています。マーカーで線を引くのも手軽なアウトプットですが、私の場合は外部への情報発信と兼ねた行動にしたいので、Twitterを利用しています。入力に手間がかかるのが懸念点ですが、音声入力を利用すると手軽です。

2回目)会社での日報に感想を書く

私の会社では、自分が日々感じることを行動指針と照らし合わせて文章に綴る日報というルールがあるのですが、こちらを書く際に読んだ本の感想をまとめています。ここではある程度、人が読んで文脈を理解できる文章にしなければならないので、ネットでその情報について再度検索したり、参照元の書籍を読み返すこともあります。

3回目)人と話をする時に会話に盛り込む

次に、人と話をする時に積極的にその話題を持ち出すようにしています。と言っても、わざわざ「この間こんな本を読んで…」という形ではなく、なんとなく会話の内容が以前に読んだ本の内容と近しい時、「そういえばこういう話が…」といった形で会話に取り入れることがあります。

4回目)ブログに書評を書く

本書に限っては、最終的にこうしてブログに文章をまとめることで、4回アウトプットしていることになります。ここまでできると記憶の定着率は高くなります。こうして記憶を何度も利用することで、海馬にある記憶が側頭葉に移動して本保存され、自分の知識として今後も使えるようになるというわけです。

ポイント2)心を動かして記憶する 〜脳内物質分泌による記憶力強化を利用する〜

そしてもう一つの、情報が大切であると脳に判断させるための基準「心が動く」ことですが、これは喜怒哀楽など激しい心の変化が記憶に伴うことを指します。美しい景色を見て感動したこと、大好きな人やペットとの別れ、交通事故に合った瞬間、徹夜で仕事をして心底追い詰められたことといった記憶は、覚えておこうと意識しなくても記憶に刻まれます。

心が大きく動く時、人は脳内物質を大量に分泌しており、それらが記憶力を増強させるという原理が働いています。上記の図にある5つの物質、アドレナリン、ノルアドレナリン、ドーパミン、エンドルフィン、オキシトシンの分泌が、科学的裏付けによって記憶力に影響していると認められています。ここではその原理の活用例をご紹介します。

覚えておきたい内容や感想をSNSに投稿する

SNSへの投稿は、第三者に見られることが前提になります。発言内容に責任が伴うため、内容の正確な記録のために思い出す作業にも真剣になり、それなりの緊張感が生まれて記憶に定着されやすくなるのです。また、第三者からの「いいね」や「リツイート」といったフィードバックには「嬉しい」「見てもらえた」という感情が働くことも記憶に良い影響を与えます。

読了の目標期間を決める

人は頑張ればギリギリ達成できる、程よい難題に取り組むと、ドーパミンが分泌されてより集中力が高まり、記憶力が高まります。読書に制限時間を決めると、集中力が高まり、脳が高いパフォーマンスを発揮するのです。この章を電車を降りる前に読み切ろう、お昼の間にここまでを読もう、といった小さなマイルストーンから、今月は3冊読もう、今年は30冊読もう、といった大きな目標も効果的です。

自分にとって少し難しいくらいの本をセレクトする

頑張ればギリギリ達成できる程よい難題は、書籍のセレクトでも設定できます。当たり前の内容で易しすぎる内容だったり、逆に難しすぎて全く頭に入ってこない書籍をセレクトすると、ドーパミンは分泌されません。出てくる言葉を少し調べながら読み進めるくらいに程よく難しい本が、最も適切なレベルと言えます。本書内では自分の知識レベルを客観的に把握して書籍を選ぶことがとても重要であると語られています。

ポイント3)スキマ時間を利用して読書する

日頃なかなか読書の時間を確保できない、と考える方は多いのではないでしょうか。本書で特に驚いたのは、読書はあらたまって一定の時間を確保しなくても、日頃の活動の「スキマ時間」を利用する形でも十分に学びの効果は得られる、という内容でした。

人は何かの作業を行う時、初めと終わりで集中力が高まることが知られており、心理学ではこの現象をそれぞれ「初頭努力」「終末努力」と呼んでいます。要は、最初の「やるぞ!」という気持ちと、最後の「ラストスパート」のことです。

15分で本を読むと、初頭努力で5分、終末努力で5分、合計10分間記憶力の高い状態での読書が可能になり、これを4回繰り返すと40分、記憶力の高い状態になります。60分連続で読書すると、初頭と終末で10分しか記憶力の高い状態が保たれません。

このように、15分程度のスキマ時間の繰り返しでも、長時間の読書以上の効果が得られるのです。私自身、あまり長時間本と向き合って読書を続けるのが苦手なタイプなのですが、この話を知ってからはより短い読書時間を積極的に確保し、気持ち的にもリラックスして読書ができるようになりました。

まとめ

私は本の虫と呼ばれるほどの熱心な読書家というわけではなく、前述の通り、長時間集中して1冊の本を読み続けるのが非常に苦手なタイプです。しかし、何か物事を深く知る時には、Web上での断片的な「情報」よりも、書籍からまとまった「知識」を得ることの重要性はひしひしと感じていました。そんな中で上記のような、精神論ではない科学的な実証データに基づいた効果的な読書術を知ることができたのは、非常に得るものが大きかったと感じています。

また今回ご紹介した記憶のメカニズムを知ると、読書だけでなく仕事や私生活など、幅広い応用が可能になります。インターネット環境が充実した今の時代で生きる上では、様々なアウトプットの期会があります。これらを積極的に活用し、自分の知識の増強に役立てることが重要であると、改めて感じました。

こちらで紹介した内容以外にも本書には、読書が人生に与えるメリット、書籍の選び方、効率的な読書術など、読書を始める前に知っておくと非常に効果的な情報が沢山詰まっています。全体を通して読みやすく、短いながらも実践的な内容も含まれているため、今後読書で自分の知識を厚くしていきたいと考えている方には役立つ内容です。

読書を充実させたい人に、ぜひおすすめしたい一冊です。(Kindle Unlimitedに登録している方なら無料で読めます。)


ランディングページ8要素におけるデザイン表現セオリー(サンプル165点付)

WebデザイナーがデザインするWebページの一つに、広告を経由して1ページ内で商材の特長を説明し、お問い合わせや購入へと導く「ランディングページ」があります。

ランディングページは、ユーザの興味を惹くビジュアルの魅力(シズル感)を特に強調したり、瞬時に内容を理解させるためのメリハリのコントロール力も特に求められるため、高いクオリティでページ全体をまとめ上げるには、幅広い表現力が求められます。

私もこれまで多くのランディングページのデザインに関わってきましたが、過去を振り返ると、制作に与えられる時間はタイトな割に、ページ内に掲載するボリュームは非常に多く、またメリハリを出すために様々な表現をいくつもの箇所で検討しなければならない、というケースが多々ありました。

デザイナーにとっては、いかにして効率的に、早く、且つ高品質でランディングページをデザインするのか?が大きな課題になるわけですが、多くのランディングページを分析してみると、特定の要素ごとにデザインの「セオリー」があることに気がつきます。

セオリーを意識せずにデザインを進めた場合、手当たり次第にデザインを考えるため、スムーズに進む時と進まない時の差が生まれますが、セオリーを知れば表現の幅が見えるため、無駄な方向に思考が拡散することが無くなり、効率的に作業を進めることができるのではないかと私は考えています。

ということで今回は、そんなランディングページで使われているデザインのセオリーを8つに分類し、そこにまつわる表現サンプルをまとめてみました。サンプル自体のクオリティよりも、表現の幅がこれだけある、という部分で参考になるかと思います。

  • 01)文章
  • 02)写真
  • 03)人物
  • 04)評価
  • 05)現実メタファ
  • 06)関係
  • 07)背景
  • 08)境界

01)文章

文章はランディングページ内で最も重要な要素です。ユーザは一行一説をじっくり読むことはなく、早いスピードで興味のある言葉のみを拾い読みしていくため、単語ごとにメリハリをつけたり、重要な言葉を特に目立たせたり、といった工夫が求められます。

1-1)マーカー

最低限ここだけは読んでほしいという文章に使うと効果的。ある程度長い文章でも使える。乱用しすぎず、一文の中なら1箇所を目安にすると良い。

1-2)強調点

見出し内で特に目を留めてほしい、短い単語に使うと効果的。長い文章に使うとワンポイントにならないので、あくまでも単語に使うのがポイント。

1-3)左右に斜線

見出しにちょっとした「勢い」を加える表現。大げさに入れる手もあるが、小さく入れるだけでも十分アクセントとして効くので、使い勝手が良い。

1-4)部分的な色変更

文章内で特に目を留めてほしい単語に使うと効果的な強調表現。色を変えた文字だけサイズを少し大きくすると、さらにその言葉の強調度合いが増す。

1-5)袋文字

言葉にボリューム感を持たせる表現。影やグラデーションを加えて密度を出すのも良い。多用しすぎると野暮ったくなるので注意が必要。

1-6)手書き文字

人っぽさ、人の温かさを出したい時に使える表現。ランディングページにおいては、お客様の声などで使われるケースが多い。

1-7)打ち消し線

元々の意味よりユーザに対するメリットが大きくなっている時に使える表現。金額が安くなっている場合などによく使われる。バツや二重線などバリエーションがある。

1-8)ギザギザ丸

サブ的な扱いとなる言葉をワンポイントとして入れる際に役立つ表現。大きく使うと大雑把感が出るため、小さくワンポイントにとどめておく方が良い。

02)写真

写真に関する表現は大きく3つ「角版」「丸版」「切り抜き版」に分類されます。少し変わった特徴的な表現が求められる場合には丸版や切り抜き版が、スタンダードで安定感が求められる場合には角版が使われます。

2-1)角版(四角でトリミング)

安定感のある表現。多くの商品写真を並列に整然と見せる際などに有効。画像の縦横の比率は3:4、2:3、1:1など実際の写真の比率と合わせると良い。

2-2)丸版(特殊な形でトリミング)

ポップさ、柔らかさ、かわいさ、親しみやすさ、といった印象を出す際に適した表現。丸をフリーハンド風の緩いラインにする手法もある。

2-3)切り抜き版

要素の形状をしっかり見せたい場合に使える表現。部分的に飛び出させることで、ワンポイントにするといったテクニックがある。

03)人物

ランディングページにおいて人物の表現は、お客様の声や、こんなお悩みありませんか?をはじめ、様々な箇所で多用されます。加えて、人が発した言葉をどういった表現で見せるかがポイントになります。

3-1)吹き出し

人が発した言葉、感じた言葉を伝える表現。丸、四角、モコモコした形など、形状も様々。タイトルに小さくアクセントとして使うのにも有効。

3-2)シルエット

人の写真が使えない時、匿名性を持たせたい時などに使える表現。ベクターデータのフリー素材がネット上に豊富にあるのでそれらを活用すると良い。

04)評価

その商材が賞を受賞している、ランキングで上位、品質が保証されているといった場合には、その事実を特に分かりやすく伝える必要があります。一目で伝えるためには、その内容を想起させる物理的なモチーフを使うことが定石になります。

4-1)メダル

金や銀のグラデーション、月桂樹を組み合わせた形、下からリボンが出た勲章風など、様々な表現がある。中に自由に言葉を入れて使う。

4-2)証書

紙にプリントされた賞状や保証書がモチーフになることが多い。こういったモチーフでよく併用される、飾り罫をうまく取り入れると良い。

05)現実メタファ

UIデザイン表現はフラットでシンプルな方向に流れていますが、ことランディングページにおいては一目見た時のインパクトが特に重視されるため、商材によってはまだまだ現実メタファを用いて緻密に作り込んだ表現が必要とされる場合があります。

5-1)紙

複数ある情報を一つにグループ化する際に最も多用される表現。ノート、メモ帳、付箋紙など様々なバリエーションがある。

5-2)紙+α

より強く紙らしさを演出する際に使う表現。クリップや押しピン、テープなどを組み合わせて使うことが多い。

5-3)プリント写真

クラフト感を演出する表現。文字が書き込めるポラロイド風もある。こちらは角版と同様に、実際の写真の比率(3:4や2:3)を守るのが鉄則。

5-4)手紙

お客様の声や企業からの心を込めたメッセージなど、人間味のある気持ちを伝える際に使える表現。ペンを添えるケースもよく見られる。

5-5)黒板

専門的な知識を伝える際授業のようなシーンや、カフェなどのメニューを模した印象を演出する表現。チョークの多色使いも併用される。

5-6)リボン

見出しやアクセントなど、様々な箇所で使える汎用性の高いモチーフ。横にまたいだり、角に掛けたり使い方に大きく幅がある。

5-7)クリップボード

チェック、現場感、調査といった意味合いで、枠組みとして使われる。紙の表現、マーカー文字の表現とも相性が良い。

06)関係

ランディングページには、最終的に商材の申し込みへと繋ぐにストーリーがあります。自然にそのストーリー伝えるためには、要素同士の関係性をどれだけ分かりやすく表現するかが重要になります。

6-1)接続

情報をつなぐ表現。「つまり」「だから」「こちら」などで使われることが多い。矢印は強力な視線の誘導になるため、使いこなすと内容がグッと伝わりやすくなる。

6-2)比較

ビフォーアフター、こんなに変わりました、といった際の表現。変化前を抑えめにし、変化後の方を強く強調してメリハリを持たせるのがポイント。

6-3)並列

複数の要素を同等に扱う表現。チェックボックスと言葉を組み合わせたり、ナンバリングを使って幾つの情報があるのか一目で分かるようにした表現が多い。

6-4)ステップ

お申し込みなどの手順を説明する表現。矢印や三角で左→右、上→下に流れを表現するのがベター。商材の性質にもよるが、ステップは3〜5にとどめると分かりやすい。

07)背景

ランディングページはあっという間に読み進められるため、狭い範囲に要素を詰め込むより、広い範囲に要素を大きく並べていく方が読みやすくなります。反面、広く合いたスペースを寂しく感じさせないよう、背景をどう処理するかを考える必要があります。

7-1)放射線

特定の要素に対して、登場感や凄みを出す際に使う表現。主にメインタイトルや商品写真の背景に使える。

7-2)写真

ワントーンで薄い色にした写真を敷いたり、レンズのボケをイメージさせて手前の商品を目立たせる表現などがある。

7-3)パターン

規則的に同じ形を並べる表現。毎回パターンを作るのは非常に手間がかかるため、ネット上にあるフリーのパターン素材をストックしておくと便利。

08)境界

ランディングページ内は幾つかの大きな情報の括りが存在しますが、ユーザに飽きさせずにページを読み進めてもらうためには、その区切り毎に強くメリハリをもたせる必要があります。情報同士の境界線部分をどのように表現するかがポイントになります。

8-1)見出し帯

帯と言葉で情報の括りを示す表現。ページ内で統一して一つの表現を使い回すのも良いが、同じパターンが続く退屈なデザインになっていないかに注意する必要がある。

8-2)見出し帯+角(つの)

見出し帯が上下、どちらを指し示すのかをより分かりやすくした表現。矢印があることで、より情報を読み進める作用も働く。

8-3)斜め

スポーティーさ、アクティブさ、エッジーさを表現する際に有効。境界線上に商品をかぶせるように置くと、より画面に動きが出る。

8-4)波

大きな波の形で柔らかな印象にしたり、小刻みで尖った形でポップな印象にしたりと、表現したい印象によって手法も様々。いろんなルールを併用しない方が良い。

まとめ

実際のところ、ランディングページは星の数ほどあるため、ここで取り上げたもの以上にまだまだ数多くの要素やセオリーがあるはずです。ランディングページ制作の依頼が来た時にそのセオリーやサンプルを調べ始めるよりも、いつも見ているデザインの参考をチョコチョコとストックして定期的に整理することが、効率的且つ高品質でデザインを仕上げるためのコツなのではないかと思います。みなさんもぜひ、自分なりのセオリーを見つけ出してみてはいかがでしょうか。


16種類(45カテゴリ)の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選(スライド付)

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。

我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。

しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。

というわけで少々前置きが長くなりましたが、今回は昨今のスマートフォンサイトで取り入れられているUIのルールや手法、共通点などを改めて探るべく、多種多様な業界(16業界45カテゴリ)のスマートフォンサイト(150サイト)を設計の視点、デザインの視点で調査してみました。調査対象は、その業界の中でも特に多くの年代に知名度の高い企業をセレクトして調査しています。

調べるにあたって作成したスプレッドシートはこちらからご覧いただけます。

  • 1. グローバルナビゲーション
  • 2. ローカルナビゲーション
  • 3. パンくずナビゲーション
  • 4. 移動ナビゲーション
  • 5. ボタンの固定
  • 6. カルーセル
  • 7. ミニドロップダウン
  • 8. フォーム
  • 9. テーブル
  • 10. 演出の工夫

01)グローバルナビゲーション

1-1)要素別の割合

まずは調査の結果をグラフにまとめてみました。63%のサイトにハンバーガーメニューが設置されています。様々な業界の多くのスマートフォンサイトで、ハンバーガーアイコンから開くメニューは表示方法として定着していると言えます。ラベルの有無やアイコンの形についてしばしば議論になることがありますが、今回調べた中ではラベル無しの3本線アイコンが最も多いことが分かります。およそ予想通りという結果ですが、3本線のラインだけではメニューであることが分からないユーザのために「メニュー」という言葉とセットで表示しているサイトが次いで多いことにも注目すべきと言えるでしょう。位置としては右上が半数を占めています。展開方法はドロップダウン形式とドロワー形式が半々といったところでした。

1-2)右上は優先要素の配置位置

ハンバーガーメニューの表示位置は右上が過半数でしたが、逆に左上にある場合、右上にはグローバルナビゲーションよりも優先したい要素を配置している傾向があることが分かります。優先している要素はサイトによて違いがあり、ログイン、検索、カート、言語選択、サービスサイトへのリンク、番組表などがありました。

1-3)スプリングボード形式でのメニュー表示

中にはハンバーガーボタンがないサイトもありました。そういったサイトでは、利用頻度の高いメニューをスプリングボードで露出させているケースが該当します。メニューボタンを押す一手間を省き、使い勝手を向上させていると言えます。

1-4)アコーディオンとの組み合わせで検索性を向上

ドロワーやドロップダウンで展開したメニューの中で、さらにアコーディオン形式の開閉メニューを組み合わせたサイトが多く見られました。ページを遷移せずに目的へと次々辿れるところが検索しやすさを向上させていると言えます。

1-5)その他

表現の変わりダネとしては、3本線のアイコンにその企業のロゴのディティールをエッセンスとして加えてオリジナリティを出しているサイトや、更新されていることが分かるバッチをつけたサイトも見られました。

02)ローカルナビゲーション

グローバルナビゲーションほど設置位置が固定されていない印象のローカルナビゲーションですが、配置パターンとしては以下の4種類ほどがあります。使い勝手を考慮した上で決定する必要がありますが、H1下で横スライドは調べた中でもサントリーのもの1つだけでした。別のモジュールでも後述しますが、横スライドはスライドできることに気が付かない可能性がありますので、この方式を採用するのは十分な注意が必要です。

03)パンくずナビゲーション

調査した中ではパンくずナビゲーションは61%のサイトが「なし」という結果でした。PCと違って小さなスクリーンの中では、現在地がどこかを表示するよりも、他の要素の表示を優先している傾向が強いと言えます。

表現の部分では、PCサイトは通常左から右へと階層を横並びで表現するのが一般的ですが、スマートフォンサイトでは要素を縦に積んだり、スクロールできるようにしたりと、面積の狭さをうまく解消するよう工夫した表現が見られました。

04)移動ナビゲーション

スマートフォンはPCと比較してスクリーンが小さく、1スクリーン内に掲載できる要素が限らるため、目的に応じてコンテンツ間の移動を補助するためのナビゲーションが多く採用されています。

定番の「ページトップに戻る」ボタンは、最下部に設置してあるパターンが42%でした。右下に半透明固定で置く方法もありますが、ページの先頭に戻ることは大きな目的ではないこと、コンテンツエリアを隠してしまうことから不採用としているのではないかと、私は推測しています。

05)ボタンの固定

ユーザが目的とするアクションをいつでも実行することができるよう、様々なボタンをスクリーンの中に固定で表示させるサイトが多く見かけられます。まず多くの並列情報群から目的の一つを探し出すタイプのサイトでは、検索ボタンの固定が見られました。

そして最終的に購入やお問い合わせなどのアクションを起こす詳細ページにたどり着いた際には、CTAボタン自体を固定表示させる造りが多く見られました。

その他にも様々なサイトで、そのページを閲覧している際、次に何をしてほしいのか?を考慮して、様々なボタンを固定表示させています。

06)カルーセル

6-1)使われ方の幅が広がったカルーセル

狭いエリアに複数のコンテンツを効率的に見せる上で便利なカルーセル表示は、元々写真などのビジュアル要素を含むコンテンツをスライドさせて見せる傾向が強い印象でしたが、最近ではその使われ方の幅が広がりつつあるように見受けられます。まずはカテゴリをスライド式で見せる方法や、検索を補助するキーワードを複数表示するために用いられている例がありました。

また、Yahoo!ニュースのコメントやGoogleの検索結果に表示されるAMPのように、テキストを主体としたコンテンツにも最近はカルーセル表示を取り入れている事例も多々あります。

6-2)カルーセル使用時の注意点

複数のコンテンツを省スペースで見せるのに便利なカルーセルですが、採用する上で注意しなければならない点があります。それは「横にスライドできる」ということが一目で伝わらなければならないことです。一つの事例として、2015年に開始されたApple MUSICのスマートフォンサイトはメニューにカルーセルを採用していましたが、2016年にはアコーディオン方式のメニューに変更されています。これはメニューが横にスライドできることに気がつきにくいため、改修されたのではないかと推測できます。

以下の2つのサイトでは該当箇所に到達した際、横からメニューの内容がスライドしてくるアニメーションを設定して「スライドできる」ことが認識できる工夫が施されています。重要な選択肢に対してカルーセルを採用する際にはこうした「気づく」ための工夫が必須になると言えます。逆を言えば、サイトの目的達成にさほど強く関係しない要素(全て見なくても大きくは問題ない要素)に対して使用するのが望ましいと言えるでしょう。

07)ミニドロップダウン

多くの選択肢を小さなエリア内に効率的に格納できるドロップダウンメニューですが、メニューをタップした際に表示されるピッカー(画面の下半分に現れる選択肢を選ぶためのUI)で選ばせるほど多くの選択肢を含まない場合には、その場で小さなドロップダウンメニューを表示させてしまう事例があります。選択肢が少ない場合に便利な見せ方と言えます。

08)フォーム

元々スマートフォンの検索では、検索したい文字を全て入力するより前に、サジェスト結果をタップして入力の手間を省く傾向が強くあります。この特性を踏まえ、サイト内の検索フォームにサジェスト機能を備えているサイトが見かけられます。また郵便番号や電話番号など、入力する文字があらかじめ数字に限定されている場合には、数字専用キーボードを表示させる配慮を施したサイトもあります。フォームではスマートフォンの特性を踏まえ、入力を補助する施策が重要だと言えます。

09)テーブル

小さなスクリーンの中で特に多くの情報を見せなければならないテーブルは、表示方法が悩ましいUIの一つです。表示方法をスマートフォンサイト用に再レイアウトする手法もありますが、「スクロール」「ピンチアウトしてご確認ください」といった具合に、ユーザに操作してもらうことを割り切った見せ方が幾つか見られました。

10)演出の工夫

心地良い操作感や閲覧体験を実現するため、細かな演出の精度を高めたサイトが多々あります。表示に時間を要する箇所にはローディングを設定したり、操作方法を理解させるために要素を小さくアニメーションさせたり、アプリを操作するようなシームレスな画面遷移を実現したりと、様々な演出方法が追求されています。

珍しい表現、演出としては、Webフォントを使ってOSに依存しない書体を表示させたサイトや、往年のPCサイトでよく見かけた、初回読み込み時にスプラッシュイメージを表示させたサイトが見られました。

まとめ

目で見て、実際に触って、日々その流れを追うことも、UIデザインに関わる者として必要であると感じます。何気なくサイトを見続けるのではなく、いつも「何か変わったところは無いか?」と見続ける視点を養うことが、日々の制作業務の中で活きるノウハウになるのではないでしょうか。

元々社内の勉強会用に準備した今回の記事、配布用にSlideshareにもまとめとして公開していますので、よろしければ併せてご参照ください。


7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法

「ちょっと〇〇君!これワイヤーフレームそのままじゃない!」

Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。

この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。

「ビジュアルを作る力」と「情報を理解・提案する力」

ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。

ビジュアルを作る力は幅広い表現の中から適切な手法を選んで絵に落とし込む力のことで、情報を理解・提案する力は誰に・何を・どのように伝え・どうなってほしいのか?を考える力のことを指します。

これだけだと分かりにくいので、この2つの力が制作の結果にどう影響するのかを、経験度別に3人のデザイナーのモデルケースに当てはめてみたいと思います。

新入社員 Aさん

ステータス

ビジュアルを作る力 × / 情報を理解・提案する力 ×

状況

デザインの引き出しが少なく、時間内に間に合わせようとするあまり、ワイヤーフレームで簡易的に作られた絵を参考にして、デザインを仕上げてしまう。内容も深く理解せずに決められた絵を作ろうとするため、ワイヤーフレームに描かれた配置や言葉、すべてを疑うことなく正として信じ、デザインに反映する。

結果

ディレクターがパワーポイントなどで簡易的に作ったレイアウトや配置がそのままデザインに反映されるため、設計からデザインに進んだ段階でUIのクオリティが上がらない。加えて、指示された内容以上の+αの提案はないため、提案物としての全体的なクオリティも低い。

ディレクターからの一言

うーん、ワイヤーフレームのままですね。。。

経験1年目 Bさん

ステータス

ビジュアルを作る力 ◯ / 情報を理解・提案する力 △

状況

実務でさまざまな案件を担当して経験を積んだことで、ある程度柔軟に、ビジュアルを作ることができる。しかし情報設計への理解力・提案力はまだ乏しいため、ワイヤーフレームで決められた要件は満たしつつ、より最適な見せ方を提案したりはできない。

結果

絵的にはそこそこ綺麗なものに仕上げるのでとりあえず提出はできるが、情報設計への理解を踏まえたデザイナーならではのアイデアが無いため、ワイヤーフレーム設計者やクライアントの期待値を超えることができず、フィードバックが重なる。

ディレクターからの一言

えーっと、、まぁとりあえず一旦、これで提出してみますかね。ありがとうございまーす。

経験5年目 Cさん

ステータス

ビジュアルを作る力 ◎ / 情報を理解・提案する力 ◎

状況

多くのデザインの引き出しの中から、伝えたい内容に対して適切なUIの表現を選定し、綺麗なビジュアルを作ることができる。ワイヤーフレームは要素と重要度を示したものと理解した上、そこに記された内容が本当にユーザに対して伝わる内容かどうかを精査し「ユーザにとってこうあるべき」という強い主張をデザインに盛り込むことができる。

結果

ワイヤーフレーム段階では詰め切らない詳細な表現が、しっかりと作り込まれたデザインが出来上がる。また、情報設計の視点からワイヤーフレームに記された方法以外の可能性も探り、現実的な選択肢をデザインバリエーションとして作ることもできるので、提案物としてのトータルクオリティが高い。

ディレクターからの一言

ありがとうございます!!!これで提案してみます!!!

3人の能力の比較

このように「ビジュアルを作る力」と「情報を理解・提案する力」が伴うほど、ワイヤーフレームから何を読み取り、どういった表現でデザインすべきかを、柔軟かつ適切に判断できるようになります。これらが盛り込まれたデザインこそが「ワイヤーフレーム通り」でないデザインですね。

しかしながら、この2つの力は短期間で身につくものではなく、コツコツと地道に経験を積み重ねていくことで少しずつ磨かれていくものです。そういった「近道は無い」という前提はありつつも、ここからは具体的にどんな点に気を付けていけば良いのか?何をすればより早く力がつくのか?を考えてみたいと思います。

STEP(1)ビジュアルを作る力を伸ばす

2つの力が大切と伝えましたが、まず先にデザイナーに求められるのはビジュアルを作る力です。デザインの基本原則(近接・整列・コントラスト・反復)を使いこなせること、表現の引出しを増やすこと、数多くのWebサイトを見てUIの作法(セオリー・決まり・しきたり)を徹底的に身に付けることが重要です。どれも短い時間で身に付くものではありませんが「コレを意識するとより早く身につくよ」という4つのコツをご紹介したいと思います。

1)細かい要素のサイズや配置は自由に決める

ワイヤーフレームは、ナビゲーションの位置や要素の順序など、大きな要件は固められているものですが、モジュール内の細かなレイアウトまでは深く考えられていないことが多いと思います。どんなレイアウトにすれば、ユーザにとって見やすく、使いやすいUIになるのかは、デザイナーがデザインする際に自らの知見を基に考える必要があります。まずはワイヤーフレームの姿形そのままをデザインに落とし込もうとせず、これらの要素を分かりやすく伝えることができる良いレイアウト方法はないか?をゼロベースで考えてみてください。

NO GOODでは、タイトルやアイコンの位置、それぞれの要素のサイズ感など、ほぼワイヤーフレームと同じです。しかしGOODでは、電話とメールを左右に並べてバランスをとったり、メールはボタンにしたり、情報の優先度がより分かりやすいよう考慮されています。

NO GOODは要素全体が安定するよう、中央に揃えられていますが、メニューを横に並べる形はワイヤーフレームから変更されていません。GOODは情報の階層構造が分かりやすいよう文字の大きさとレイアウトを変え、メリハリをつけています。

NO GOODはワイヤーフレームのレイアウトのままで、今ひとつ魅力に欠けます。GOODは英語を大胆に配置してインパクトを出しつつ、ボタンの体裁もやめ、より洗練されたイメージにしています。このくらい思い切ってワイヤーフレームから変更しても良いのです。

2)作成するデザインの参考を必ず複数探す

UIや図版の表現方法は一つではありません。大切なのは、パッと頭の中に浮かぶ表現をすぐに採用してしまわず「もっと全体のテイストと合った表現はないか?」を粘り強く探ることです。デザインポータルやGoogle検索から自分のプロジェクトと質の近い表現を探して、作成時の参考にすると良いでしょう。それも一つだけを見るのでなく、必ず2つ以上探すのがポイントです。そうすることで、多角的にデザイン表現を考えられるようになります。

タブひとつでも様々な表現があります。吹き出し風な表現もあれば、四角の色の違いだけで表現する方法もあります。自身のプロジェクトの全体のトンマナに近いものはどういった表現でしょうか。

5つの丸をつないだ事業図を作る指示ですが、1)のように商品写真を加えてリッチに見せる方法もあれば、2)のように半透明の丸が重なり合ったシンプルなイメージも検討できます。どちらの表現がユーザに響くのか、もしくはもっと違った表現なのか、作成する前によく検討しましょう。

3)参考デザインをモジュール別に毎日クリップする

先ほどの「参考を複数探す」という話ともつながりますが、見つけたデザインはどんな手法でも構わないので必ずクリップしておきましょう。PinterestやTumblrでスクリーンショットをポストするのもアリですし、スプレッドシートにURLを蓄積して整理する方法もあります。日々コツコツとネタを貯めておくことで、いざデザインを作り始めた際に参考探しに時間を割く必要が無くなります。

例として、私は参考になりそうなモーションの表現をスプレッドシートで管理しています。一部実際のシートをこちらからご覧いただけます。

4)優れたデザインのサイトを週に1サイト模写する

模写をコツコツ続けるのが、表現の幅を広げる上で「最も効果的」です。表現の参考になるサイトのスクリーンショットをとり、それを上からトレースすることなく、テクスチャや文字のサイズなども完全再現を目標に、見比べながら、マージンを一つ一つ測りながら、全く同じものを作ってみましょう。非常に手間はかかりますが、3ヶ月続けるだけで、驚くほど自分の表現手法が増えていることに気が付くでしょう。大事なので2回言いますが、この方法が「最も効果的」です。

こちらは私が過去に模写していたものです。写真はストックフォトから似た画像を探して使っています。実際に見比べて作ることで、様々な表現手法、レイアウト感覚を体得することができます。

STEP(2)情報を理解・解釈して+αを提案する

ビジュアルを作る力を付けつつ次に意識するのは、情報を理解・解釈して+αを提案することです。+αとは、ビジュアル作りの担当範囲を超えた設計に対する提案や、インタラクションに対する提案などです。ワイヤーフレームの中の情報を解釈し、ターゲットは誰なのか、何を、どのように伝え、どうなってほしいのか?という考察に基づく提案ができると理想的です。手法は様々ですが、ここでは簡単にできる3つの実践例をご紹介します。

1)「イメージ」の内容は自分で決める

ワイヤーフレーム作成者は、隣り合う文章の内容を補足するビジュアルが欲しい、という意図でこの「イメージ」という言葉をよく用います。この時、まずはその文章をしっかりと読んで内容を理解しましょう。雰囲気や実際の様子を示す場合は写真を、関係性や数値を見せた方がユーザに伝わりやすい場合は図にするという選択肢もあります。どちらが最適かは、デザイナーが内容を読み取って判断して良いと思います。

この内容で一番伝えたいのは、見出しにもある通り「売却を先行するか、購入を先行するか」という話です。抽象的な住宅写真を用いる手もありますが、アイコンを使って関係図的に表現すると、より文章の内容が伝わりやすくなります。

2)すでに決められた文章を調整する

プロジェクトによっては文章を一文字たりとも変更してはいけないものもありますが、そうでない場合はデザイナー側から積極的に文章の変更を提案しても良いと思います。というのも、言葉は非常に重要なインターフェイスの一つなのです。ワイヤーフレームには必ずしも最適な表現が使われているわけではないことを頭に入れておきましょう。

特に重要なのは、見出しで結論を伝えることです。ユーザはその結論が自分にとって興味のある内容かどうかで、以降の内容を読み進めるかどうかを判断するため、ワイヤーフレームでその条件が満たされていない場合には積極的に提案すると良いでしょう。

ワイヤーフレームに記された文章の内容を読み取り、端的な結論を抜き出して見出しにするだけで、情報の伝わりやすさが格段に上がります。

1ブロックで伝えるには長すぎる文章も、内容を読み取って見出しをつけるだけで、読み手の負担は軽くなります。

3)最適なインタラクションを積極的に提案する

どのように情報を伝えるか?という部分でデザイナーの大きな役割になるのが、インタラクションのアイデアを出すことです。ワイヤーフレームは要素と重要度を示すものですので、インタラクションの具体的な表現まで詰められていないことが多いです。そういった場合は、デザイナーから積極的に表現を提案してみると良いでしょう。

その際は「面白そうな表現だからやってみたい」ではなく「この表現の方がユーザにとって使いやすい・分かりやすい・好まれる」という視点を大切にしてください。ユーザにとってメリットのない演出に価値はありません。デザイナーの「表現したい欲を満たす」ためでなく、「ユーザの満足を満たす」ための演出を考えられるとベストです。

こまかな説明テキストは表示を省略し、マウスオーバー時に写真の色の変化とズームを加え、さらに説明テキストが下からスライドインしてくる、というインタラクションを考えた例です。

まとめ

ワイヤーフレーム通り問題について今回はさまざまなコツや提案例をご紹介しました。結局のところ即効性のある裏技というものはなく、日々コツコツと表現の幅を広げたり、内容を真剣に読み取ろうと地道に努力することが大切ということだと、私は考えています。

デザイナー視点で考えると、「ワイヤーフレーム通りじゃん…」という指摘に対して「変えてもいい箇所、変えてはいけない箇所が判断できない」という声を挙げる人もいるでしょう。クライアントとの打ち合わせの場にも参加できず、ワイヤーフレームで決められた内容をビジュアルに落とし込むデザイナーにとって、そういう思考に走ってしまうのも無理はないと思います。

変えてよい箇所・いけない箇所を設計者に確認するのも一つの手ではあるのですが、根本的に大切なことは自分自信がユーザの目線に立ち、どういったデザインにすればユーザにとって内容が解りやすいのか?を、自分の頭で考えることなのです。その視点が備われば極端な話、ワイヤーフレームを全て変えてしまうくらいの提案をしても良いと、私は考えています。

短期間で身につく力ではない故に、毎回のデザイン制作で苦戦する人は多いと思います。しかし、野球に例えるなら、デザイナーにとってはワイヤーフレームを渡された時が、バッターボックスに入った瞬間です。その瞬間までに様々なトレーニングを重ねていなければ、華麗なヒットを打つことはできないのです。

今日から「ワイヤーフレームそのまま」と言われないためにも、ここで紹介した話を参考に、ぜひコツコツと学習を深めてもらえると幸いです。


宣伝会議タイポグラフィ実践講座(無料体験講座)での古平正義さんの話

タイポグラフィの実践講座

宣伝会議がタイポグラフィの実践講座を開催するそうで、本講座に先立って無料体験講座が4月21日に開催されていたので、参加してきました。講座の内容は、実践というよりは古平さんの実績紹介を通じ、タイポグラフィで気をつけているポイントの紹介、というスタイルでした。

自分自身の専門はオンスクリーンではありますが、文字表現の根本的な考え方は媒体に左右されるものではないので、ぜひこの機会に話を聞いてみたいと思い、参加に至りました。大きく3つほどの学びがあったので、ここでメモしておきたいと思います。

古平正義さんのプロフィール(宣伝会議のサイトより)

FLAME アートディレクター/グラフィックデザイナー。1970年大阪生まれ。アキタ・デザイン・カンを経て、97年よりフリーランス、2001年FLAME設立。主な仕事に、「ラフォーレ原宿」広告・CM、「アートフェア東京」「ローリングストーン日本版」アートディレクション、INORAN・一青窈・GLAY等のCD/DVDジャケット・ミュージックビデオ、BAO BAO ISSEY MIYAKE とのコラボレーションなど。建築のサイン計画や展覧会の会場構成等も手がけている。ONE SHOW 金賞・銀賞、D&AD Yellow Pencil、東京ADC賞など受賞。

1.文字はいじらない

講座中、一貫していたのは「文字の形自体を変えることは好まない」という話でした。その想いの裏側にあるのは、自分が美しいと思えるレベルの文字自体を作るのはとてつもなく難しい、ということへの割り切りと言えます。

文字自体を開発することよりも、既存にある美しい書体の持つ力を利用して求められる課題に対する表現を考えるところに自分の力を注いだ方が結果として効率も良いし、強いデザインになる、ということだと感じました。

文字の形自体をいじって、何かしらの面白い表現、変わった見栄え、デザインされた感を出そう、出してやる!と考えるのはデザイナーのエゴ以外の何物でもなく、本質からズレた話というのは非常に納得できる話です。

反面、自分はわりと「いじられた文字」というものが好きだったりします。それはいじられたことで、既存の書体の形では伝えることができないなにかしらのちょっとした特徴や、いびつさ、個性、といったものがチラリと見えるところに面白みを感じるからです。

確かに古平さんが言われる通り、文字の形自体を「いじる」ことはともすれば自分の知識の無さを露呈してしまいかねない非常に勇気が要る手法とも言えます。

古平さんは文字自体はいじらず、印刷技術をはじめとした+αの要素なりアイデアなりで、表現対象の個性の部分を表現する方であるように思いました。

どちらが正しいという話ではなく、どちらか一方の手法をとり続けなければならない、という話でもありませんが、文字というものはとてつもなく緻密な設計の元に作られている、ということをデザイナーは認識した上で取り扱うべき、と言えます。

2.奇をてらわない

文字組み、レイアウトでも「いじらない」マインドは一貫していると感じました。とにかく、なにかしらデザイナーの「デザインしてやった感」といった部分を出してはならない、本質ではない、という話です。

タイポグラフィ年鑑をパラパラとめくれば、不思議なレイアウトのポスターなりグラフィックなりを見かけることがあります。

おそらくそれらは作者自身のタイポグラフィ哲学を突き詰めた上での到達地点である(であってほしい)と思いますが、そこに憧れてそれっぽい表現を真似るというのは間違っている、という話だと感じました。それはいわゆる、「流行りだから取り入れる」といった考え方と同じものですね。

本質は、伝えたいメッセージをきちんと伝えること。その上で必要となる表現を選ぶこと。

ある程度経験を積んだデザイナーであれば「デザインした感」「デザイナーが作った感」といった表現がわかってきます。しかし本来そこは誰からも求められていないものです。

そこが本質ではないことをどれだけ強く自分の中で持ち続けることができるか、上辺を飾ることで楽して「デザインしました感」を出さないか、という部分にいかにストイックに向き合えるかが重要だと感じました。

3.原稿からがデザインの領域

印刷媒体であれ、オンスクリーンであれ、全てを一人で製作することは少なく、多くの場合は分業されています。しかしながら、分業される中で「自分の製作範囲はここからここまで。それ以外はお金もらってないからやらない。」といった考え方を持ってしまっては、本質に向き合う自分の行動範囲を制限してしまうことになります。

自分の担当する範囲を意識することなく、そもそもの問題は何なのか、それを解決するには何をすべきなのかを、職責や担当範囲に関わらずに考える真摯さが重要である、という話かなと思いながら話を聞いていました。

具体的な話でいうと、原稿の内容のコントロールから印刷までがデザインの領域という話で、Webデザインで言えば、原稿の内容のコントロールからブラウザに表示されるまでがデザインの領域です。

原稿を作る人は必ずしもプロではありません。おおよそがそういった原稿製作を生業としない人が忙しい通常業務の合間を縫って、本業ではない原稿を作成していたりすること多々です。

提供された原稿の裏に隠された、本来表に出さなければならないもの、表に出すことでよりその内容が伝わることは何なのかをデザイナーは注意深く探り、とらえ、表現しなければならないのだと思います。


日常生活の中に隠されていた、Webユーザビリティ10の視点

ユーザビリティ

Webサイトをデザインして、上長であるディレクターやクライアントといった第三者にそのデザインを見せた際に「これボタンに見えないよ」「綺麗だけど文字小さすぎない?」「これリンクなのかどうか分からなかった」といった指摘を受けたことは、誰しも1度は経験があるのではないでしょうか。

UXの構造やユーザビリティについての理解が浅いうちは「見た目に綺麗、カッコいい、かわいいといったビジュアルを作ること」が自分の仕事と捉えてしまい、先に挙げたような指摘を受けることが多くなります。特にユーザビリティに関する知識は、UIをデザインする上で、魅力的なビジュアルを作る能力と並行して身につけていきたい知識です。

そこで今回は経験の浅いWebデザイナーの方に向けて、ユーザビリティとは何なのか?を知る入門編として「ほんとに使える「ユーザビリティ」」という非常に読みやすい書籍をご紹介したいと思います。本書は人が生活する中で起きる身近な「使いにくさ」からユーザビリティについての視点を語り、Webサイトのユーザビリティはどうあるべきか?という流れで話が進むため、自分が作っているWebサイトが目的達成のためのツールであることを改めて認識できる内容になっています。

本エントリーでは本書の流れに沿って、ユーザビリティを「使いやすさ(実質的な面)」「優美さ・明快さ(心理的な面)」の2つの観点から、私自身の解釈と思い浮かんだ良い例・悪い例を含めてポイントをご紹介したいと思います。

Webユーザビリティ10の視点

※悪例としてピックアップしている項目は、対象ユーザや状況によって悪例にはならない場合もあります。

使いやすさ

1)機能性 ~きちんと動作する~

機能性とは、最も基本的な「きちんと動作するか?」ということです。いかにUIが美しいものでも、そもそもの目的が達成できない、実行できないものであれば、全く意味を成しません。当たり前のことのようにも思いますが、UIをデザインすることを目的に作業をすると、案外見失いがちな視点と言えるのではないでしょうか。

日常生活での悪例)

  • スイッチを入れても明かりが付かない
  • 蛇口をひねっても水が出ない
  • 呼び鈴を押しても音が鳴らない

Web上での悪例)

  • リンクをクリックすると404エラーが表示される
  • フォームに万人が持ち得ないFAXの番号が必須になっている
  • ページの読み込み時間が極端に長い

“機能性”

Amazonでは、未ログイン状態で購入手続きを進めようとすると、まずログインすることを要求されます。後々、様々な情報をフォームに入力した後で、もしもこのIDとパスワードを忘れていたらどう感じるでしょうか。

2)反応性 ~動作していることが分かる~

反応性とは、ユーザが自分のアクションに対して動作していることを理解できることです。信号を見る(視覚)、警告音を聞く(聴覚)、触るとザラザラする(触覚)、甘いと感じる(味覚)、香りを嗅ぐ(嗅覚)など、人間は五感を使って反応性を判断します。Webサイト上では、主に視覚と聴覚に対してのフィードバックを返すことで、反応性を確保することができます。

日常生活での悪例)

  • カフェで店員を呼んでも返事がない
  • キーボードのボタンを押しても押し心地がない
  • マウスをクリックしてもカチッと押した感がない

Web上での悪例)

  • ボタンにカーソルを合わせてもカーソルが指に変わらない
  • ローディング中の読み込み状況が表示されない
  • ECサイトで商品を購入した後、確認メールが届かない

反応性

ANAはボタンであれナビゲーションであれ、マウスオーバーアクションが設定されていません。使えない訳ではありませんが、反応性が重視されているとは言えないでしょう。

3)人間工学性 ~人間が自然に使える~

人間工学とは、人間の動作や特性を前提に快適な環境を目指す学問です。人に何か物事を達成してもらう時には、人間の肉体的・心理的な能力を理解した上で、自然にストレスなく目的を達成できるよう、配慮しておく必要があるのです。馴染みの深いところで言えばアーロンチェアなどが分かりやすい例ですが、Webサイトの中でもこの視点での配慮が必要になります。

日常生活での悪例)

  • テーブルと椅子の高さが合っていない飲食店のテーブル
  • スーパーの通路で2台のカートがすれ違うのにギリギリな幅しかない
  • 汗をかくと滑って握れず、文字を書きにくいボールペン

Web上での悪例)

  • ナビゲーションのクリッカブルエリアが小さすぎる
  • 入力フォームでTABキーを押しても項目間を移動できない
  • ページをスクロールしていてGoogle mapの上にカーソルが乗るとMapを拡大してしまう

人間工学性

ライオンのグローバルナビはドリルダウン形式のメニューですが、カーソルを合わせて展開されるタイミングが少しだけ遅く設定されているため、「開発STORY」にカーソルが当たってもすぐに反応しないよう配慮されています。

4)利便性 ~必要なものが必要な場所にある~

利便性とは「ユーザに必要な物が必要な時に必要なところにきちんと存在すること」「ユーザにとって手軽であること」です。綿密に設計されたカスタマージャーニーの元、その瞬間、そのシチュエーションでユーザが何を思い、何を必要としているのかをできる限り具体的に想定し、最適な選択肢を用意しておく必要があります。

日常生活での悪例)

  • スーパーの肉売り場と焼肉のタレの売り場が離れた場所にある
  • お好み焼き店に口や手をふくためのティッシュが無い
  • ホテルの部屋内の幾つかの照明スイッチがあちこちに散らばっている

Web上での悪例)

  • 主要なナビゲーションが画面上のあちこちに散らばっている
  • 掃除機の詳細ページに専用紙パック詳細ページへのリンクが無い
  • 200字までしか入力できないことがエラーが表示されるまで分からない

利便性

グリコのサイトはあるサイズではグローバルナビがハンバーガーボタンになります。ハンバーガーボタンがメニューであることに気がつかない人、ウィンドウサイズを広くするとメニューが表示されることに気がつかない人はどう感じるでしょうか。

5)万人保証性 ~正しい方向へ導く~

「人はそもそも間違えるものである」という前提に立ち、誤った使い方をしても利用者に被害が出ないよう考慮するということです。制作・設計者の想いとは裏腹に、ユーザは思わぬアクションを起こすことがありますが、そういった行動も優しく正しい方向へ導くことが求められます。

日常生活での好例)

  • 正しい向きにしか挿入できない電池ボックス
  • ドアが閉じなければ起動しない電子レンジ
  • 人が座っていないと水を噴射しない洗浄便座

Web上での好例)

  • フォームを閉じる際「入力したデータが削除されますがよろしいですか?」というアラートが出る
  • 404ページにサイト内の主要ページへのリンクが表示される
  • URLのタイプミス対策としてサブドメインでワイルドカードが設定されている

“万人保証性”

日立ソリューションズのお問い合わせフォームは、項目入力途中にページを離脱しようとすると、入力完了までの件数と、離脱すると入力内容が消えることをアラートで教えてくれるため、誤った操作をしたユーザに優しい作りと言えます。

優美さ・明快さ

6)可視性 ~きちんと見える~

可視性とは「要素が目に見えること」です。一生懸命時間をかけてUIをデザインしたとしても、それが見えない、あるいは認知できない場合、存在しないのと同じことになります。何かに隠されたり、視界にあっても認識できなかったりといったことのないよう、デザインする際に考慮する必要があります。

日常生活での悪例)

  • 車のバックミラーの角度を操作するスイッチがどこにあるか分からない
  • 調味料のラベルに書かれた調理法の上に大きな値引きシールが貼られている
  • 半分に折られたタブロイド紙。トップ記事の見出しが折られた下半分に配置されている

Web上での悪例)

  • 重要なボタンがデコレーションされすぎてバナーのように見える
  • ファーストビューで情報が完結しているように見え、スクロールできることが分からない
  • リンクテキストがリンクテキストに見えない。

“可視性”

DELLのサイトはスクロールするとウィンドウ上部に固定のナビゲーションが表示されますが、少々分厚すぎるため、コンテンツの内容を隠す面積が大きくなっています。

7)理解可能性 ~基本的理解を共有する~

理解可能性においては「使う人と作った人が同じ基本的理解を共有していること(共有参照)」が重要であると、本書の中では語られています。作り手にとっての当たり前だと考えていることも、使い手にとっては未知の領域でだったりします。その共有していない部分を、言葉・イメージ(写真や図版)・音などで補足する必要があります。

日常生活での好例)

  • バス停の電子時刻表に「あと3分で到着」と表示されている
  • お風呂のバスマットに足の形がプリントされていて、バスタオルと間違えないで済む
  • どこの国の硬貨・紙幣にも数字が大きく表示されている

Web上での好例)

  • アイコンの下にアイコンの意味を示すテキストがある
  • ECサイトの洋服で、地面に置いた写真でなく、モデルが着た写真を使っている
  • PDFへのリンクにデータ容量(⚪︎⚪︎KB)が表示されている

“理解可能性”

Tumblrのダッシュボードの右上には様々なアイコンが並んでいますが、方位磁石、笑顔、雷といったアイコンが何を意味するのか、一目見ただけで理解するのは困難でしょう。使い慣れれば分かるのかもしれませんが…。

8)論理性 ~なぜ?と思わせない~

使い手は目的が達成できない時や、達成はできるが違和感を感じる時、「なぜ?」と思います。ユーザに対して「なぜ?」と思わせるシチュエーションには、ユーザビリティ的な欠点が潜んでいると言えます。作り手は使い手に対して「なぜ?」と思わせないタスクフローを想定し、用意しておく必要があります。

日常生活での例)

  • エレベータのボタンを押しても点灯しないのはなぜ?
  • このシャンプーのキャップは手が濡れていると開けられないのはなぜ?
  • 冷蔵庫の扉は閉まっているのにピーピーと警告音が鳴り続けるのはなぜ?

Web上での例)

  • ボタンに見えるのにクリックできないのはなぜ?
  • 掃除機用の紙パックが本体と同じページに掲載されていないのはなぜ?
  • 航空券販売サイトがマイレージ番号を登録させてくれないのはなぜ?

“論理性”

楽天の商品詳細ページで購入ボタンをクリックしようとした時、先に選択しておかなければならない項目があった場合には、そのことを伝える内容が表示されます。購入できない「なぜ?」に対する答えが用意されている好例です。

9)一貫性 ~ルールを保つ~

現実世界でもWebサイトでも一貫したルールが保たれることで、ユーザは目的をより達成しやすくなります。言葉による言い回し(ラベル)が統一されているか、同じ機能を持つものは視覚的に同じものと認識できるか、世の中に広く普及しているルールとあえて違うルールにする必然性があるか、といった点を考慮する必要があります。

日常生活での悪例)

  • 1つのボタンに2つ以上の機能が備わっているテレビのリモコン
  • 開け方が分からないワインボトルの栓
  • お洒落なカフェのトイレにある水の出し方が分からない蛇口

Web上での悪例)

  • お問い合わせボタンの色や形がページや配置箇所によって変わっている
  • ナビゲーションの位置がページによって違う場所に配置されている
  • 2つの異なる機能に対して、1つの同じアイコンが使われている

“一貫性”

NHKネットクラブのログイン画面には、緑のテキストリンク、オレンジのテキストリンク、緑の強調文字が混在しています。どれがリンクでどれがリンクでないのか、一目でわかるような一貫性が保たれていません。

10)予測可能性 ~次に何が起こるか分かる~

予測可能性とは「次に何が起こるかがはっきりと分かる」ということでです。期待通りの動きをしてくれない時、ユーザは使いにくさを感じます。また、斬新さや追求するあまりに一般的な表現から外れることも、ユーザの予測から外れやすくなります。ユーザの状況を踏まえて予測するであろう答えを分かりやすく用意しておくことが大切です。

日常生活での悪例)

  • コンビニ各社のドリップコーヒーのサイズ表記に、Small・Mediam・Largeと、Regular・Largeが混在する
  • タッチパネルとモニタの下の料金ボタンを組み合わせて使う大阪地下鉄の券売機
  • 室内照明のスイッチがドアを開けたところと違う場所にある

Web上での悪例)

  • 特殊すぎる形で一般的な形からかけ離れたナビゲーション。
  • いくつステップがあるのか分からないお申し込みフォーム
  • 別ウィンドウが開くことを明示していないテキストリンクやボタン

“予測可能性”

ポカリスエットのサイトで、画像をカルーセルで切り替えられると思ったらページ自体が切り替わってしまいます。画像を切り替えたいと思っていたユーザは予想しない挙動に一瞬混乱するのではないでしょうか。

まとめ

ユーザビリティとは、日常生活の中でもWebサイトの中でも同じように存在するものです。本書を読み進める中で、自分が作り出すWebサイトにも、普段生活の中で使う道具やサービスと同じように、利用可能性や使いやすさがあることを自然と認識できるため、ユーザビリティの着眼点が身につくと思います。このエントリーの説明はあくまでも、本書の抜粋と私自身が探した事例ですので、より深く知識を身につけたい方は実際に本書の方をご参照の上で、自身が作るWebサイトにユーザビリティ的な問題点が無いかを検証してみてください。

冒頭の話題に戻りますが、絵作りだけを目的としてしまう経験の浅いWebデザイナーは、Webサイトは目的を達成するためのツールであることを、早い段階で認識し直す必要があります。分業化されて部分的な作業のみを担当する中では、最終的に手がけたWebサイトが実際に人に使われているということを想像しづらい面もあるでしょう。しかし、自分が作り出すWebサイトにも確実に使い手が存在し「このサイト便利だな」「このサイト全然使えない…」といった感情を抱いていることは事実です。

また一つ気を付けたいのは、ユーザビリティとは「誰にでも共通して使える・使いやすい」ということではない、ということです。上記で掲載している悪い例であっても、想定するユーザが容易く使える場合には、問題が無いと言えます。また使い勝手の悪さを想定した上でもビジネス的にそのように作るべき、と判断する場合もあることを心得ておきましょう。

美しいビジュアルを作る力を磨くと共に、上記で紹介したような「ユーザビリティへの理解」を深めていくことをオススメします。

“カフェで感じたユーザビリティ”

今回の冒頭のイラストは、とあるカフェで見かけた光景でした。ユーザが目的を達成しやすいのはどちらでしょう?子連れの母親だったら?学生カップルだったら?と様々な視点で考えてみると、ユーザビリティに対する視点は確実に深まります。そういった視点を養えば、おのずとWebサイトのデザインも使い勝手を考えられるようになるのではないでしょうか。


継続できないあなたが今あらためて読むべきバイブル「自助論」のススメ

自助論

誰しも人は仕事を続ける中で「昨日より今日、今日より明日、去年より今年は成長していたい」と考えると思います。デザイナー・アートディレクターであれば「もっと魅力的なデザインを作りたい」「プレゼンが上手になりたい」「後輩に効率的に自分の持つ力を伝えたい」といった願望を持つと思います。しかし、そういった将来必要になるスキルを身につけるための活動は、いかんせん目の前の忙しさにかまけてないがしろになりがちです。どうしても今、目の前の仕事をこなすことで精一杯になり、その先につながる活動を続けるまでのバイタリティが保てない…と感じる人は多いのではないでしょうか。

そんな中、昨年末に「自助論」という本に出会いました。この本は1858年にイギリスで出版されたもので、現在書店に数多く並ぶ自己啓発本の草分け的な存在と呼ばれています。日本では明治時代に出版され、当時福沢諭吉の「学問のすすめ」とともに大ベストセラーとなっており、今現在でもAmazon.co.jpのレビューで100件以上のレビューがありながらも評価の平均は4.4という高評価を得ている本です。

本書には、忙しいことや時間が無いことを言い訳にせず、どうやって自分が決めた活動を継続するのか?という問題に対してのヒントが沢山詰まっています。このエントリーでは、私自身の成長を見据える上でとても参考になった考え方、心に響いた考え方を5つ、実際の文章を抜粋してご紹介したいと思います。

(1)自助の精神を持て

どんなに立派で賢い人間でも、確かに他人から大きな恩恵を受けている。だが、本来の姿から言えば、我々は自らが自らに対して最良の援助者にならなければいけないのである。

「自らの最良の援助者」という言葉は少々回りくどい言葉ですが、言い換えれば「自分自身に投資し、自らを磨く」という意味です。上司や世間からの応援・評価を活動エネルギーの源に据えると、そういった第三者の一挙手一投足によって自分の意思が影響されがちですが、自らで自分自身に投資を続けることを活動の根源に据えると、他人からの影響は受けません。目標を達成するためには、他者を起点に置かずに自分自身にベクトルを置くべきだ、という考え方です。

もちろん「上司に認められたい」「アイツにだけは負けたく無い」といった活動エネルギーがプラスに働くこともあると思います。しかし、途切れることのない自分自身への投資こそが、自分自身への最大の応援になるという考え方は、自分が掲げる目標に向かう上で非常に理にかなった考え方だと感じます。

(2)結果は必ず努力の上に成り立つもの

人間の優劣は、その人がどれだけ精一杯努力してきたかで決まる。怠け者はどんな分野にしろ、すぐれた業績を上げることなど到底できない。骨身を惜しまず学び働く以外に、自分をみがき、知性を向上させ、ビジネスに成功する道はない。

当たり前な話で、言葉にすると「ただの正論」と思う方もおられると思いますが、やはり生きることの基本として「努力」は非常に大きな力がある、という話が強く語られています。

書籍全般を通じて様々な偉人の実例が語られているのですが、誰一人として楽をして結果を出した人は登場しません。血の滲む努力と多くの時間を費やすることを覚悟し(もしくは自然とそのように行動し)、自分の生き方に真っ向から向き合ってこそ、人間の優劣は決まるものだと説いています。努力することもなく結果を求めるような都合の良い考え方は通用しない、と言い換えることもできます。

(3)勤勉の習慣を身につけよ

最大限の努力を払ってでも勤勉の習慣を身につけなければならない。それさえできれば、何ごとにおいても進歩や上達は目に見えて早くなるだろう。

人は学び続けることで人格が磨かれるという話です。30歳を超えてある程度キャリアを重ねてきた人であれば、自分自身のそれまでの経験を活かしてそれなりの活動を続けることはできると思います。しかし、今以上に活動の幅を広げたり、新しい目標を達成したいと考えるのであれば、やはり基本に立ち戻って新たな物事を学ぶ姿勢を持たなければ、前に進むことはできません。

またその勤勉自体の重要性と合わせて「学び方」についても参考になる節が幾つかあります。

単なる知識の所有は、知恵や理解力の体得とは全くの別物だ。知恵や理解力は読書よりもはるかに高度な訓練を通じてのみ得られる。一方、読書から知識を吸収するのは、他人の思考をうのみにするようなもので、自分の考えを積極的に発展させようとする姿勢とは大違いだ。

読書を自己啓発の手段と思い込んでいる人は多い。だが実際には、本を読んで時間をつぶしているだけの話だ。

自分自身が勉強すれば、その内容についての印象はいつまでも鮮明に残る。人から与えられた不十分な情報とは違って脳裏にはっきりと刻み込まれる。

ネット上でバズっている記事や専門書籍を読んだりすること、セミナーなどで著名人の話を聞きに行ってみたりすることは、さも自分が勉強しているような気分になりがちなのですが、実のところ、それ自体には本来意味が無いことを語っていると思います。重要なのは、それらをヒントに自分自身の環境に置き換えて考えてみたり、調べてみたり、実行してみたりといったアクションにまで結びつけることが、真に有益な学びである、という話だと感じました。

(4)克己心(こっきしん)を養え

自分の悪習をわずかでも改めるより、国家や教会を改めるほうが簡単だと思い込みがちだ。一般的にいって、人は自らの非を直すより隣人の非をあげつらうほうが、よほど好みにあっているようである。

克己心(こっきしん)とは、自分の欲望を抑える心です。人は往々にして、自分自身の行動を改めずに環境のせいにしたり、自分自身で決めたことをなにがしの理由をつけてやらなくなったりします。しかし自助論では、自分の将来の利益のために現在の満足を犠牲にする、という克己の精神が大切であることが語られています。また大切であることを語る反面、その克己の精神を身につけることは非常に難しいとも説いています。栄光や成功は、弱い自分の心に打ち勝ち続けてこそ得られるものであるということが分かります。

(5)修練無くして結果なし

ある時、ベネチアの貴族がミケランジェロに自分の胸像作成を依頼したところ、ミケランジェロはそれを10日で仕上げ、代金として金貨50枚を請求した。貴族は「たかが10日で仕上げた作品にしては法外な代金だ」と抗議したが、ミケランジェロはそれに対し「あなたはお忘れです、胸像を10日で作れるようになるまでに、私が30年間修行を積んできたということを」と答えた。

イタリアの彫刻家、ミケランジェロの非常にキャッチーなこのエピソードは、ネット上で見かけた方も多いのではないでしょうか。圧倒的な成果を残す人は必ずどこかでその成果にたどり着くための努力をしているものだ、という話がこの他にもいくつも紹介されています。先ほどの克己心とも重なる部分ですが、大きな成果を残す人は自らの弱い意思を制御し、コツコツとした努力を続けた事実が必ずあります。前回の記事で、上手なプレゼンテーションを行う際にも地道な練習が必要という話を挙げましたが、まさにこの話に通ずる部分があると感じました。

当たり前のことを当たり前にやる大切さ

書かれている内容は、斜めから読めば「正論」「きれいごと」「当たり前」と捉える人もいるでしょう。事実として中で紹介される実例は、2016年を生きる私たちの社会の環境にそのまま置き換えてみると、うまく当てはまらないものも多少はあります。加えて昨今の自己啓発本にあるような、具体的な行動パターンの変化を促すような実例もありません。しかし上記で紹介した考え方は、明日から使えるTIPSのような話があふれる現在、そういった上辺のテクニックに流されずに改めて大切にすべきこと、生きることの基本として心得る話だと私は感じました。

自助論は、当たり前のことを当たり前にやることが大切ということを、淡々と語りかけてくる本です。この本が出版されたのが今から150年以上も前の話。その当時から今に至るまで、世界中で永く読み継がれてきたと考えると、人の生き方とは?活動する意味とは?という大きなテーマに対して、普遍的で時代に流されない、数々のヒントやエッセンスが詰まっているのではないかと思います。

自分の成長に壁を感じる人にとっては、非常に得るものが多い書籍なのではないかと思います。私自身はこの自助論の内容を、改めて自分自身の活動の中での基本として据えておきたいと感じました。


地味だけど効果がある、デザインのプレゼンテーションスキルを上げる8つのコツ

デザインのプレゼンテーションスキルを確実に上げる8つのコツ

デザイナーは成長する中で、デザイン自体を作る力に加え、そのデザインを第三者に説明するプレゼンテーションの能力が求められるようになります。自分自身でデザインを作っている時には、頭の中だけで、そして自分自身の中だけでその説明が完結していれば良いのですが、いざ第三者に分かりやすく、言葉で伝えるシチュエーションになった時、しどろもどろになった経験を持つ人も多いのではないでしょうか。今回はそんなプレゼンテーションに必要な準備やコツといったところを、制作のフローの部分から照らし合せてまとめてみたいと思います。

デザイン制作時

(1)なぜそのデザインにしたのかを書き出そう

デザインを作成している際、「○○を表現するためにここの配色は○○にする」「○○な制約があるのでここは○○にしよう」といった判断をしているはずです。しかし、制作中は自分の頭の中だけでその考えが完結していれば良いので、わざわざ言葉にしておくようなことはしないでしょう。しかしながら、実はこれがいざ第三者に説明する際にスラスラと言葉が出てこない原因と言えるのです。頭の中で考えていることと、言葉に出して説明することには、大きな差があります。そのデザインがなぜその形であるべきなのか、その色であるべきなのかを自分の中で整理し、箇条書き程度でも文章でまとめるところまで落とし込めていれば、口頭で説明する際にはその言葉を思い出すことができます。もちろん慣れれば、わざわざ文章に書き出す必要もなく聞き手に説明できるレベルに到達しますが、なかなか人前でスラスラと言葉が出てこない人は、きちんと文章を作ってメモしておく、といった行動をとっておくべきでしょう。

プレゼンテーション前

(2)伝える内容とその背景を深く理解しよう

プレゼンテーション時には、作成したデザインに対する説明以外にも、現在のUIデザインにおけるトレンドやユーザビリティに関する知識、配色に関する知識、テクニカルな知識まで、聞き手からの質問に対してその場その場で自分の引き出しを開けて、説明できなければなりません。一夜漬けで提案書の中身だけを説明できるように頭に入れたとしても、説明が終わった後に実のある議論を展開することはできないでしょう。そのためにも、日々自分の関わる専門知識を深く理解し、人に説明できるレベルにまで引き上げておく必要があります。たとえば、誰かが書いた専門的な記事を読んで「ふーんなるほど」と思っているだけではこの力は強化されません。日々、書く、話す、といった行動が伴って、自分の筋肉となってプレゼン時の自分を支えてくれるものだと言えます。

(3)声に出して練習しよう

とても基本的なことですが、実際に声に出して話す練習をすることが、プレゼンテーション時の緊張を何より和らげる対策の一つです。かの素晴らしいプレゼンで世間をアッと言わせ続けたスティーブ・ジョブズも、声に出して何度もプレゼンテーションのリハーサルを重ねていたことは、ネット上の様々な記事でも見られる有名な話です。プレゼンテーションで緊張して言葉がスラスラと出ない人ほど、実は練習をしていない人が多いようです。デザインを作っている時には自分の頭の中で説明を考えているので、それをそのまま話せば良いという話しなのですが、いざ人前に立つと緊張して頭が真っ白になることは誰もが経験することです。そんな時でも練習を重ねていれば、ふとした拍子にその練習を思い出し、説明を続けることができるのです。また、練習は自分のプレゼンテーションにおける欠点を知るためにもとても有効です。きちんと人に伝わる声を出せているか、自信をもった話し方ができているか、ごまかしたような説明になっていないかなど、多くの改善ポイントを知ることができます。一度自分の説明音声を録音し、客観的に聞き直すのも非常に効果的です。

プレゼンテーション時

(4)説明資料は読まないようにしよう

プレゼン時には説明資料などを作成して自分と聞き手の手元に置き、その資料を一緒に見ながら説明することが多くあると思います。その際、資料の中に書かれている文字をそのまま読むような説明は、聞き手にとっては非常に退屈で、心に響かない説明になります。プレゼテーションの場では資料にある内容を、資料の中の言葉とは別の言葉で説明すると良いでしょう。見出しなどのポイントとなる部分だけは読んでもかまいませんが、その詳しい内容については細かい文章は追わず、自分自身の言葉の引き出しから説明すると、聞き手に伝わりやすい説明になります。

(5)例を話そう

資料の中に書いてある言葉以外で何を話せば良いのか?という話ですが、その際には「他社さんの例では…」「私の経験では…」といった具合に、実際の体験談や事例話すことも有効です。資料の中の話だけではない、別の角度でその内容を見つめることができ、かつ聞き手と似た会社や人、業務の人であれば、グッと理解が深まります。

(6)「伝えること」を目的にしないようにしよう

プレゼンテーション初心者が陥る落とし穴として、目的が「相手に内容を伝えること」にすり替わることがあります。気合いを入れて作ったプレゼン資料を読み込み、ここではこう説明しよう、ここではこの例題を話そうなど、色々と考えてプレゼンに臨むと思いますが、「相手に内容を伝えること」を最終目的にしてしまうと、説明を終えたところで燃え尽きてしまいまい、その後のディスカッションが有意義なものにならないという本末転倒な結果を招くことがあります。プレゼンテーションで重要なのは、聞き手の意思決定を促すことです。そのためには、目先の「相手に内容を伝えること」に焦点を当てるのではなく、プロジェクト全体の中での何のためのプレゼンテーションなのか?という部分を理解し、それを説明前に聞き手にも共有した上で、最終的な意思決定につなぐ流れを意識する必要があります。デザインの説明であれば、最終的にそのデザインのどこが良くて、ダメな部分はどこで、どのようにブラッシュアップするのかを、プレゼン後にきちんと聞き手と共有できているかどうかがポイントになります。

(7)話す時間のバランスを考えよう

プレゼンテーションの時間は限られています。1時間の会議のうち、40分がデザインプレゼンテーションで使える場合、説明に30分を使ってしまうと、議論に残された時間は10分と少なくなり、結果的にその場で話が進まないまま終了、もしくは次回へと持ち越しとなってしまいます。説明する内容にもよりますが、その内容はどのくらいの時間を使って説明するべきなのか?を考えておく必要があります。また聞き手の認識のレベルに応じて「ここはそんなに時間をかけて話さなくても良い」という判断ができると、さらにプレゼンテーションの時間を有効に使うことができるでしょう。

プレゼンテーション終了後

(8)失敗した点を記録しよう

私はプレゼンテーションを行った日は、決まってそのプレゼンテーションはどんな点が良かったのか、どんな点が悪かったのか、次回どこを改善しなければならないのか、を記録するようにしています。また、プレゼンテーションに参加していた人(同僚など)にも協力してもらい、自分自身のプレゼンテーションを客観的に見直すようにしています。そうすることで、回を重ねるごとに自分の弱点は補われ、徐々にプレゼンテーションに慣れていくのだと思います。

まとめ

プレゼンテーションのコツは「場慣れ」という話があります。これは誰もが口にする話で、回数を重ねるごとに自分の欠点に気が付き、改善されていくので間違いではありません。私自身も何度も失敗し、「次こそは」と思うにつれて少しずつ進歩していった経験があります。しかし、ただただ回数を重ねるだけよりも、具体的な改善ポイントを自分で把握して対策を立て、改善を試みる方が、効率的に上達を早めることだと気が付いた時、上記のようなポイントを自分なりにまとめてみることが重要だと思いました。自分自身の日頃の行動を客観的に見て、上手なプレゼンテーターとどこが違うのか?を考えてみるのが、上達への近道だと私は思います。