カテゴリー別アーカイブ: デザイン

Service Design Night vol.4 ~事業会社とデザイン会社 デザイナーぶっちゃけトーク:スキルアップやキャリアパスについてどう思う?~への登壇にあたって考えたこと

2月28日(火)に渋谷で行われた「Service Design Night vol.4 ~事業会社とデザイン会社 デザイナーぶっちゃけトーク:スキルアップやキャリアパスについてどう思う?~」というイベントに登壇させていただきました。テーマは、事業会社と制作会社でデザインに関わる人がそれぞれの視点で、今後デザイナーはどのようにキャリアアップやスキルアップを図るのか?という問題を掘り下げて考えるというものです。

デザイナーに求められるスキルが多様化・細分化される中、数年後にどんな人材になっていれば良いのか?今後何を身につけていくべきなのか?という疑問は、多くの方が抱いている問題です。今回私は事業会社で働いたことのない、生粋の制作会社視点の立場でのスピーカーということで、お声がけいただきました。このエントリーでは、私自身が発表した内容を補足と合わせてご紹介してみたいと思います。

一緒に登壇されたのは、株式会社バンクの河原香奈子さん、株式会社rootの古里祐哉さん、株式会社Fablicの”わりえもん”こと割石裕太さんという顔ぶれでした。

登壇者の皆さんのお話

キャリアは考えすぎない(バンク河原さん)

バンクの河原さんは制作会社から事業会社に転職した経歴で、制作会社勤務の時代に培った「スピードと引き出し」を武器に事業会社へと転職し、現在は新サービスの立ち上げに邁進中。サービスの成長と共にリアルなユーザの声や周りの反応を感じられるところ、チームの一員としてサービスを作り上げる醍醐味がある、というお話はとても興味深い内容でした。制作会社のデザイナーは、制作内容や社内のレイヤー構造の面でも、最終的な受け手の反応を感じ難い場合が多いので、事業会社のデザイナーが得られる働き甲斐がよく分かるお話でした。

デザイナーはセルフブランディングが重要(Fablic割石さん)

Fablicの割石さんのお話はセルフブランディングに対する考え方でした。変化のスピードが速いWeb業界において、都度自分のスタンスを合わせることよりも、確固とした自分自信のデザイナーとしてのコンセプトを持つことで、他のデザイナーとの差別化を図ることが大切、というお話でした。割石さんは今回初めてお会いしましたが、割石さん自身のキャラクターと作り出すデザインの世界観が一致していること、そこをブラさずに外に向けてアウトプットを続けていることは、デザイナーとして生き抜く上で非常に重要であると感じました。

デザイナーに求められるのは横断的スキル(root古里さん)

rootの古里さんは事業会社から制作会社に移られた、河原さんや割石さんとは逆パターンのキャリアパスで、サービス開発に携わるデザイナーには、上流工程から実装に渡るまでの「横断的スキル」が必要であるというお話でした。昨今のデザイナーは表面的なデザインスキルに加え、デザイン思考に基づいたビジネス自体への理解がより具体的なスキルとして求められるようになったこと、そして進化し続ける技術的な側面への理解もキャッチアップしていく必要があること、両側面のバランスをうまくとりながらスキルアップしていく必要があることが再認識できるお話でした。

私が考えるキャリアパスとスキルアップ

そして私からはこんなスライドで、今後デザイナーとしてキャリアアップを図る上でどんなことが重要になるのか?具体的にどうやってスキルアップしていくのか?という点について、自分自身の経験を交えてお話させていただきました。要約すると、結論は次の2点です。

キャリアパス「ビジネスへの理解を深めて市場価値を高めることが重要」

まずキャリアパスは、デザイナーとしての主力武器であるデザインの表現力を磨きつつ、ビジネス面への理解を深めて市場価値の高い人材になることが重要です。キャリアスタート時、デザイナーはまず決められた指示書に従ってインターフェースやビジュアルを作る作業を任されます。そこで様々な表現方法を身につけていくわけですが、30歳を過ぎたあたりから「綺麗なデザインは作れて当たり前」という状況を迎えます。重要なのはその当たり前な状況の中で、どのように自分自身の市場価値を高めていくのか?ということです。よりマーケティングやUXを含めたビジネス的な視点でデザインの対象について語れるゼネラリストになるのか、テクノロジーの進化と共に変わり続ける最先端の表現を扱うスペシャリストになるのか。自分自身の特性を踏まえて見据えておく必要があります。

スキルアップ「広い対象に向けてアウトプットを継続することが重要」

そしてスキルアップについては、広い対象に向けて継続的にアウトプットを行い、フィードバックを得続けることが大切です。自分のアクションが他人に影響を与え、そこからフィードバックを得る、というのが一般的な学びのサイクルです。自分から何も発信しなければそのフィードバックを得る機会が少なくなるため、ハードスキル・ソフトスキル共には伸びることはありません。正直なところ、会社の仕事だけで手一杯になっていて「休めるときはしっかりと休みたい」と考える人も居るでしょう。しかし、そうしたしんどい時こそどうすればアウトプットできるのか?時間をかけなくても継続できることは何か?を考えて新たな一歩を踏み出す人こそ、スキルアップのスピードは早くなります。そしていつの間にかアウトプットが習慣となり、苦労せずとも自然とスキルアップする循環を自分の中に持てるようになるのです。

制作会社が良いのか、事業会社が良いのか

今回のイベントは「制作会社 VS 事業会社」的な構図ととらえがちですが、結局のところデザイナーにとってどちらでキャリアを積むのが効率的か?は、個人によって変わる、と言わざるを得ません。しかし、会社や業務内容によって違いがあることは大前提としつつ、上記の図のような傾向があるのではないか?と、このイベントに向けて資料をまとめる中で考えていました。どちらからキャリアをスタートしても、最終的に主力武器となるデザイン力と、ビジネスへの理解力、両方の力を付けていくことがデザイナーに求められることであると私は考えています。

制作会社のデザイナーはデザイン表現の幅を広げやすい

制作会社からのキャリアスタートとなった場合に得られるメリットとしては、やはりデザイン表現の幅が広くなる、という点が挙げられます。数少ない特定のサービスに絞られることなく、様々な業種のデザインワークを短期間でこなしていく日々は、確実にデザイン表現の幅げます。まずもってビジュアル表現で幅を広げたい人にとっては、やはり制作会社からのキャリアスタートが望ましいのではないでしょうか。デメリットとしては、事業会社ほどデザインした対象が結果的にどうなったのか?を知る機会が少ないことが挙げられます。それは言い換えると、一つのビジネスとしてデザインがどのように機能したのか?が分かりにくい状況である、と言い換えることもできます。

事業会社のデザイナーはビジネス的な視点が身に付きやすい

逆に事業会社からキャリアをスタートした場合には、自分が作ったデザインに対してユーザがどう感じたのか?という結果を知りやすい、というメリットがあります。自分の背後にカスタマーサポートが居て、機能のローンチ当日にその結果を実際の声に触れることができる環境もあるでしょう。その点は、制作会社ではなかなか味わいにくい仕事の醍醐味であると言えます。デメリットは、制作会社ほど表現に幅を求められることが少ないため、表現力が広がりにくいことではないでしょうか。また勤務時間についても比較的無理を強いられる場合が少ないため、デザイナーとしての限界値を求められる機会も少なくなります。積極性がなければデザインスキルが伸びにくい、と言えるのではないでしょうか。

まとめ+おまけ

今回こうした登壇の機会をいただいたことで、自分自身に今後求められることや目指すべき方向、日々のスキルアップ方法について、改めて深く考えることができました。登壇終了後は多くの方からご挨拶いただいたのですが、時間の関係でお話できなかった方もいらっしゃいました。そこで、期間限定で「制作会社のデザイナーに聞いてみたいこと」と題して、気軽に質問を書き込んでいただけるスプレッドシートをご用意しました。制作会社で働くデザイナーの話をもっと聞いてみたいという方は、ぜひこちらのシートに質問を書き込んでみていただければ、可能な範囲で回答させていただこうと思います。

制作会社のデザイナーに聞いてみたいこと

最後に、こうした機会にお声をかけていただいたrootの西村和則さんに深く感謝しています。会場にいらした方も含め、お礼を申し上げます。


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

【追記】この記事に多くのアクセスをいただきましたので、自分なりのアウトプットに対する考え方をまとめてみました。こちらもぜひご覧ください。
1記事ではてブ数4901を獲得した私が伝えたいアウトプットに対する考え方

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

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

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

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

分かりやすく美しい図を作るための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つの原則から実践してみてください。図で伝えるべきことは何で、何が最も重要であると伝えるのか?その情報をいかにして少ない要素とルールでシンプルに伝えるのか?最後はデザインの原則をいかに細部にまで浸透させることができるか。これらを如何に突き詰めることができるかが、分かりやすさと美しさを併せ持った図を作るためのヒントになると、私自身は考えています。

【追記】この記事に多くのアクセスをいただきましたので、自分なりのアウトプットに対する考え方をまとめてみました。こちらもぜひご覧ください。
1記事ではてブ数4901を獲得した私が伝えたいアウトプットに対する考え方


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を使ったアウトプットであったり、登壇の期会に自身の考えを来場者に伝えるといったものです。

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

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


ランディングページ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サイトのデザインも使い勝手を考えられるようになるのではないでしょうか。


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

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

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

デザイン制作時

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

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

プレゼンテーション前

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

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

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

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

プレゼンテーション時

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

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

(5)例を話そう

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

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

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

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

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

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

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

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

まとめ

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


今さら聞けない!?正しいマテリアルデザインとの付き合い方

マテリアルデザインとの正しい付き合い方

Googleの新しいデザインガイドラインとして先ごろ発表された「マテリアルデザイン」。早速この新しいトレンドを取り入れた事例や、スムーズに導入するためのフレームワークが紹介されたりするのを見かけますが、UIの開発に携わるクリエイターとしては、取り入れる前にその思想をしっかりと理解しておく必要があります。というわけで、思想の背景やデザインのポイント、注意点をまとめてみました。

マテリアルデザインが定義された背景

Googleの生み出すサービスは、もはやスマートフォンやタブレットやPC(Android OS)だけに限られたものではなく、腕時計やメガネといったウェアラブル(Google glass、Google Fit)、ハンズオンでの操作を可能にする自動車用システム(Android Auto)などなど、様々な分野に広がっています。

今後も更に様々なスクリーン環境、操作環境が増え続けるのは確実です。そこで、誰もが迷うことなく、尚且つどんな環境でも一貫したブランドを正確に分かりやすく伝えるUIを作成するための、根本的な思想を定義する必要がありました。そこで大きく、ビジュアル・モーション・インタラクションに分けてガイドラインとして定めたものが、マテリアルデザインと呼ばれるものです。

マテリアルデザインの哲学

Googleのデザイン担当ヴァイスプレジデントであるマティアス・デュアルテ氏へのインタビューがGizmodoに掲載されていますが、これを読むとマテリアルデザインの根本に流れる哲学を知ることができます。思想の源にあるのは「我々が生きている実在の世界にある物理的なルールをインターフェイスの中に取り入れ、考えることの負担を軽くする」ということです。

我々人間は生きている中で自然とこの現実世界のルールを学んでいます。光が当たっているものには影が付くというルール、ボールが転がると最初は勢いがあって最後はゆっくり止まるというルール、水面に何かが落ちれば波紋が広がるというルール。こういった現実世界のルールは我々がこの世に生きている以上は変わらないルールです。しかし、新しいOSや様々なサイズのスクリーン、数々のアプリケーションが増え続けるデバイスの世界においては、それぞれに独自のルールが適用されることが多々あります。そんな時に我々は「これはどう操作すればいいんだろう?」と悩んでしまうのです。

ここに現実世界にあるマテリアル(素材)という一定のルールを用いることで「考えることの負担を軽くする」というのがマテリアルデザインの哲学です。現実世界と同じく、触れるものには影があり、物が動く時には慣性があり、物は連続的に動いて消えたりしない、という法則をうまく利用することが、操作しやすいインターフェイスに繋がるということです。

ビジュアル・アニメーション・インタラクションの特徴

マテリアルデザインとの正しい付き合い方

ここまで読み解くと、appleのiOS6まで継続されてきたデザインのテイストであるスキュアモーフィズム(現実世界にある物の質感を取り込んだ視覚的なデザイン)と同じようにも聞こえますが、マテリアルデザインの一番の大きな違いは「脳が判断するのに必要とする分だけの、最低限のルールを利用する」ことと言えます。

ガラスでできたようなギラリとした光沢が無くても、うっすらとした影が付いたものがあるだけで、人はそれを「押せるボタン」と認識することができます。現実世界をそっくりそのまま再現するのではなく、理解に必要なルールを必要な分だけ取り入れるのが、マテリアルデザインの考え方と言えるでしょう。

少し気をつけておきたいのは、マテリアルデザインは根源となるルールをできるだけ分かりやすく定義するために、見た目をシンプルにすることに注力しています。今後また色々と環境が変わる中で、今とは違った見た目に変わるようなことも可能性としてゼロではないでしょう。ですから「フラットな面に少し影が付いて、キーカラー+グレーの配色で、クリックすると波紋が広がっているデザインがマテリアルデザイン」と、安易に解釈するのは危険です。変わらないのは、脳の判断を補助する最低限のルールを適用することと言えます。

アニメーションやインタラクションについてもビジュアルと同じく「脳が判断するのに必要とする分だけの最低限のルール」という考え方は共通しています。何かを操作している時に急に物が消えたり、違う場所に移動したりして「あれどこ行った? あ、ここか…」とならないために、アニメーションを利用するとあります。

ブランドが変わればデザインは変わる

違うブランドや会社でも同じ「マテリアル」の枠組みを使えるはずですが、会社が変われば違う使い方になる。

インタビューの中で注目すべき点として、こんな発言があります。この思想を私たちデザイナーやデベロッパーは深く認識しておく必要があります。

簡単に言うと、今Googleのサービスで適用されているマテリアルデザインは、Googleというブランドに最適化されたものであるということです。明るい楽観的な色使いや楽しくポップなアニメーションはまさにGoogleのブランドイメージ。ですから、今Googleのサービスに適用されているデザインをそっくりそのまま真似ると、Googleのブランドイメージになってしまうのです。

もちろん、定義されているグリッドシステムやカラースキームの使い方を闇雲に変えるのも間違っていますが、安易に出来映えだけを模すことは、マテリアルデザインの正しい使い方とは言えません。ブランドのイメージを適切に伝えるために、Googleが定義したグリッドシステムやカラースキームが使えるのであれば、そこはうまく利用するのが良いと思います。

最も優先すべきなのは、そのブランドが持つイメージを適切に伝えることであり、そこにマテリアルデザインの思想を適用するというのが正しい順序です。マテリアルデザインの哲学を抑えつつユーザ体験に一貫性を作りながら、如何にしてそのブランドのイメージを向上させるかが、マテリアルデザインとの正しい接し方だということを作り手として認識しておくべきでしょう。

…と、色々と思うところを述べてみましたが、私自身はこのデザインはとても良いなと感じています。マネーフォワードのデザインにマテリアルデザインを適用した例が先日紹介されていましたが、適用後は非常に洗練された印象になっていました。自分自身の制作の中にも、この考え方をうまく取り入れることにチャレンジしてみたいなと感じました。