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

UIデザイン提案に不可欠!顧客の納得度を上げるために意識すべき4つの条件(スライド付)

去る6月22日(木)に渋谷で行われた、株式会社アジケ主催のイベント「UX dub〜UX/UIの現場、最前線〜」に登壇させていただきました。今回のエントリーはこのイベントで発表させていただいた内容のフォロー記事になります。

日頃のクライアントへのUIデザインの提案において、なかなか作ったものに対して納得していただけない、スムーズに話が進まない、といった状況は、誰しも経験するものかと思います。しかし近年、私自身の経験を振り返ると、以前に比べてスムーズに提案が進むようになったと感じていました。

そんな時にお誘いいただいた、このイベントの「UX/UIの現場、最前線」というキーワードを聞き、私の所属するベイジではどのようにパートナーをリードしてUIに落とし込んでいるのか?をお話してみようと思いました。

この内容について、我々が作るWebサイト自体のUXやUIを深く追求することももちろん大切なのですが、そこに加えて我々自身がクライアントに最良のCX(カスタマーエクスペリエンス)を与えることも大切だと考えています。そこから、主に以下4つの内容でお話させていただきました。

  • 1)良好な関係性を築きやすい顧客を選んでいるか
  • 2)顧客が安心できる進行を心がけているか
  • 3)論理的なデザイン提案を行っているか
  • 4)専門家としてリーダーシップを発揮しているか

1)良好な関係性を築きやすい顧客を選んでいるか(P15)

企業に所属する個人のデザイナーで関与できる人は限られますが、良好な関係性を築けそうな顧客を選んで仕事をすることは、プロジェクトを円滑に進める上でも非常に重要なポイントです。計画性が低く、制作会社を下に見ているクライアントからプロジェクトを受注すると、スムーズな進行が阻害される危険性があるということです。

ベイジではプロジェクト開始前にここを厳しくジャッジしているため、クライアントから不条理な難題を押し付けられることもなく、建設的にプロジェクトを進めることができています。実はここをしっかり抑えている会社は、デザイナーにとっても非常に仕事がしやすい環境であると言えるのです。

しかし、ジャッジする以前に問い合わせ自体が少なければ、仕事を選り好みすることはできません。そこで必要になるのが、戦略的にクライアントになりうるターゲットに対して、常日頃から自分たち自身の強みを積極的に発信し続ける行動です。オンライン・オフライン問わず様々なチャネルから自分たちの強みを可視化しておくことで、プロジェクトを進める段階で良好な関係性を築きやすくなります。

UIデザインを提案する以前に、そもそものところでこの道筋を作っているかどうか、道筋に沿って強みを理解してくれている顧客を引き寄せているかが大切になるのです。

2)顧客が安心できる進行を心がけているか(P22)

プロジェクトを通して、常にクライアントは不安を感じているものです。提案内容自体のクオリティの高さは当たり前に求められるものとして、その上でクライアントに安心してもらえるような質の高いコミュニケーションを心がけることも、提案内容の納得感に間接的に影響を与えると考えています。

その点、コミュニケーションは非常に属人的になりがちです。上流工程から下流工程に渡って、人が変わっても質の高いコミュニケーションを継続するためには、チーム全体でクライアントにどのように対応すべきか?を共有しておく必要があります。具体的に言えば、以下のようなコミュニケーションルールを整備しておく、ということです。

  • プロジェクト定義書の共有
  • WBSによるスケジューリング
  • メールは誰かが1時間以内に一時返信
  • 打ち合わせ前日までに当日の確認資料とアジェンダを共有
  • 打ち合わせ後は1営業日以内に議事録を共有
  • 必要事項はWBS以外にイシューリストで担当者と機嫌を明確化
  • 行動指針と日報で何のためのルールかを認識

実はここでお伝えしている内容は、ベイジのコーポレートサイトの中でお客様向けに紹介しています。我々自身が約束する行動を、プロジェクトが始まる前段階で見える化しておくことも、一つのコミュニケーション作りと言えます。こちらでさらに詳しくその内容を紹介していますので、ぜひご覧ください。

プロジェクト管理 | 株式会社ベイジ

3)論理的なデザイン提案を行っているか(P29)

ベイジではデザイン提案の際、完成したビジュアルだけを見せるようなことはありません。提案したデザインに対して、なぜこうすべきなのか?を論理的に説明します。プロジェクトやクライアントの特性によって順序や内容は変わりますが、代表的な説明事項として以下の5つをご紹介しました。

デザインの役割定義(P31)

UIデザインはコンテンツ、構造、機能、情緒表現の4つで構成されています。その中でも、提案するビジュアルデザインにおける役割は機能と情緒表現になります。この話を最初にクライアントと共有しておくことで、デザインの見た目の表層的な部分(機能や情緒表現)と内容自体の根本的な部分(コンテンツや構造)の問題は分けて考えましょう、と話ができるようになります。

ターゲットの再確認(P35)

ベイジでは戦略提案の時にターゲットを定義して共有していますが、デザインを提案した際には、個人的な好みの話、抽象的な感性の話、なんとなく好き(嫌い)といった話が出てきがちです。そうした際に事前に定義したターゲットを振り返り、作り手である我々がどう思うかではなく、ターゲットならどう考えるか?という視点に立ち返りましょう、と伝えるようにしています。

ブランドの明確化(P41)

ブランドは基本的に目には見えので、具体的な言葉にして共有しておく必要があります。ベイジではクライアントのブランドを、属性・ファクト(誰も否定できない事実)、機能ベネフィット(機能面での効能や作用や利便性)、情緒ベネフィット(顧客が受ける精神面での便益)、ブランドパーソナリティ(ブランドを擬人化するとどういう人なのか? )、ブランドタグライン(ブランドの約束)で構成されるピラミッドに構造化して共有しています。

トレンドやセオリーの啓蒙(P45)

クライアントによっては最近のWebデザインの特性を知らないこともあります。タッチデバイスの普及によるUIの大きさの変化、マルチデバイス化に伴うデザインのシンプル化をはじめとした、技術革新によるUIデザインのトレンドやセオリーの変化の話です。これらあらかじめ説明しておくことで、提案するデザインに妥当性が生まれ、認識の違いによる無駄な議論を回避することができます。

デザインの提案(P50)

実際のデザイン提案の際に気をつけるポイントは3つあります。1つは提案の幅をもたせること。提案物の数を増やせばいいという話ではなく、クライアントが予想しない部分まで考え抜かれていないとデザインに対する納得感というものは得られにくいものです。そして2つ目は意味をきちんと説明すること、3つ目は対面することです。経緯や意図を、必ず会って説明することが大切です。

4)専門家としてリーダーシップを発揮しているか(P57)

この「専門家としてのリーダーシップ」が特に、クライアントにデザインを納得してもらう上で大切になるポイントです。クライアントは我々に対して専門家としての意見を求めているため「この場合◯◯するのがベストです」「◯◯と考えるべきです」と自信を持って対応できなければなりません。

具体的に言えば、言われたままの要望をそのまま返すような行為、こういう姿勢であればあるほど、提案は後手後手にまわって、クライアントの信頼は獲得できなくなります。また、もしもクライアントの認識が間違っていれば指摘してがあげる態度も必要です。

そして、専門家びいきな説明をしない、という点も重要です。「デザイン的に見るとこれが優れている」とか、「デザイナー的にはこうした方がいい」といった、根拠のない話は回り回って提案物の評価に悪影響を及ぼします。

まとめ

Webサイトを作る作業は、デザインデータやHTMLを作ることだけではなく、クライアントとの関係性や、チームの関係性を作ることも含まれます。単純にブラウザに映し出される絵だけを作るという意識を変え、それらを作るために関わる人々とどのような関係性を築いていくか、という部分まで配慮することで、クライアントからの信頼を得ることができるのではないでしょうか。

UX dub について







※掲載写真はすべてアジケさん撮影

今回はアジケさん初主催のイベントで、告知当初からUX/UIに関心の高い多くの方々から多くの申し込みがあり、結果的に大盛況のイベントとなりました。このイベントの趣旨を、アジケの神田淳生さんから以下のように伺っています。

dubとはレゲエ用語で、曲をリメイクすること。UXの視点を活用してWebサイトやサービスをより成長させることや、クリエイターが集まって一つのサービスを(リ)メイクすることをイメージして付けたタイトル。

アジケさんのオフィスではBGMにdubを流しているというところから、イベントの最中も緩いdubのBGMが流れており、非常にアジケさんらしい、緩やかなムードのイベントでした。今後もこのイベントは継続的に開催されるとのことです。

今回一緒に登壇されたのは、オハコ菊池涼太さん、アルチェコ熊澤宏起さん、スタンダード鈴木健一さん、そしてアジケの梅本周作さんといった面々で、各社の業務を通じたUX/UIに関する、まさに最前線の情報が語られました。私がお話した内容以外の部分は、すでに仕事の早い方々がまとめてくださっていますので、こちらに関連情報として掲載する形とさせていただきます。

今回の登壇の機会を与えていただいたことで、私自身が日々行っているデザインの提案や、デザイン提案にまつわるコミュニケーションがどのようにクライアントとの関係性作りに影響を与えているのかを、改めて見直すことができました。お誘いいただいたアジケの梅本さん、神田さんに深く感謝いたします。

レポート記事

【UX dub Vol.1 イベントレポート】UX/UIデザインの現場、最前線
【イベントレポート】UX dub「UX/UIデザインの現場、最前線」(前編)
【イベントレポート】UX dub「UX/UIデザインの現場、最前線」(後編)
「UX/UIの現場、最前線」イベントレポート

UX dub 座談会

独立部隊、掛け持ちナシ…?クライアントにコミットするUX/UIデザイン4社の仕事術とは
これから進むべき道とは?UX/UIデザイン会社が思い描く未来像
職域を超えろ。ステレオタイプに捉われない、UX/UIデザイナーのあるべき姿とは


デザイン力に伸び悩むあなたが劇的にブレイクスルーするための3つの解決策

デザイナーとして数年間のキャリアを積み上げた方なら、ある程度の実力を身に付けてきたと感じる反面、自分の成長が「停滞している」と感じることはないでしょうか。幾つもの仕事を経験し、デザインの表現や作業スピードには自信が付いた、これまでの経験に沿って仕事をこなすことで大きな失敗にはならないけれど、でもどこか大きく進歩もしない、そんな状況です。

私も20代後半、特にその悩みを感じることがありました。正直なところ、そうした自分の停滞を感じつつも、見て見ぬふりをしているような心境もありました。そこには、会社に所属していてある程度の実力があれば、目の前の仕事は経験則からそこそこの力でこなすことができるし、急に進退を迫られるような切迫した状況には陥らないことなどが影響していたと言えます。停滞に対して「そこまで急いで対処する必要はない」「いつかは変わる」と自分の今の環境を肯定していたのです。

しかしこうした停滞に対する静かな焦燥感は、成長したいと思う気持ちの現れとも言えます。そこを一歩自分から乗り越えることで状況は変化するものです。私の場合、そのきっかけは転職にあり、今所属するWeb制作会社ベイジに入社後は、年を重ねるごとにその停滞から脱出していくことができました。

今回は私の経験を元に、停滞を感じるデザイナーがその状況を打破し、ブレイクスルーするために改めて見直すべきだと考えていることを3つご紹介しようと思います。

  • 1)デザインを基礎から突き詰めて学び直す
  • 2)広義のデザインに触れることができる環境に身を置く
  • 3)練習・勉強することの楽しさを知る

1)デザインの基礎を徹底的に突き詰めて学び直す

30歳の頃、私はすでに3社の制作会社を経験していました。新卒で入社した大阪の小さな広告制作プロダクションでは右も左もわからない状況からスタートしましたが、退職する時にはある程度仕事を任せてもらえるようになり、デザインに対する自信も付いていました。

そこから上京して就職した会社では多くの方から「ちやほや」されました。自分で言うのもなんですが、基本的に前向きな性格であるがゆえに、任せてもらえる仕事には心血を注いでチャレンジし、土日だろうが深夜だろうが、与えられたデザインのクオリティを上げることに集中する日々でした。

そんなところから、荒砂はデザインができる、と声をかけていただける状況になり、大きな挫折も少なく、順調な毎日が続きました。そしてその上り調子の時に会社が傾き、あえなく転職することになりました。

そこからは非常にもどかしく、苦しい期間でした。転職活動を続ける中で、自信を積み上げてきたはずのデザイン力は社外で通用するほどの芯の強さが無いことに気がつきました。一歩会社の外に出てみると、もっとレベルの高い仕事を、圧倒的なスピードでこなしている優秀な方が多く居ました。

正直に言えば、社外の人と積極的にコミュニケーションをとったりすることが無かったこの頃、自分の市場価値がどのレベルのものなのかは見て見ぬふりをしていました。なぜなら、会社の中に居れば優位な立場を追いやられるようなこともなかったからです。

しかし転職する機会に、自分の力がいかに井の中の蛙であったかを思い知りました。そしてそこで改めて思ったことが、もっと骨太で、どこでも誰にでも通用する、市場価値の高いデザイナーになりたい、ということでした。

そんな時、私は今でも第一線で活躍しているクリエイターのブログをよく見ていました。そこで語られるデザインに対する想いや、作られたもののクオリティの高さを横目で見つつ、なんとか自分もこうした人たちと同じ土俵に入れないものか、と考えていました。

そんな時に出会ったのが現在所属するベイジです。もともと代表がブログでデザインやwebビジネスに対する学びを公開していたのを外から眺めていたのがきっかけでした。自分もこうして外に語れるような、強いデザインに対する思考力が欲しいと心底思いました。

そして30歳でベイジに入社するわけですが、正直なところ、1~3年目は特にボロボロでした。それまで積み上げてきた感覚頼りのデザイン力はベイジで求められるデザインクオリティには耐えかねるもので、日々葛藤と焦り、力量不足に悩む日々でした。まさに基礎からの再スタートです。

デザインにおいて、ベイジでは4つの基本原則のおさらいからスタートしました。本を読み、練習し、実践することの繰り返しです。もちろん最初からうまくいくわけではなく、原則に反した判断から何度もやり直す日々が続きました。

思い返しても辛いと感じたシーンは多々ありますが、そんな中でもしぶとく継続できたのは、転職の際に経験した自分のデザイン力の薄っぺらさにほとほと嫌気がさしていて、その時の自分から少しでも脱却したい、という気持ちが常に根底にあったからだと振り返っています。

ベイジのデザインの特長は、デザインの基本原則やビジネスで求められる論理性、デザイナーびいきの視点に囚われないことに徹底的に忠実なところと、時にその原則うんぬんをさて置いて、パッと見で魅力的なのか?グッと人の心を引き込む力が宿っているのか?という、いわば論理性を度外視した感性の部分を、同時にバランス良く追求し続けるところにあります。

写真一つ、書体一つ、色一つ選ぶにしても、なぜその写真、書体、色である必要があるのか?という理由と共に、一目見て人の心ハッとさせるような魅力があるのか?という部分を徹底的に自分自身に問い続け、磨き続けていくような作業です。

実は私のように、感覚値だけである程度のデザインレベルに到達する人は世の中に五万といるのです。しかしその上のレベル、ユーザの心に強く正確に働きかけたり、企業のビジネス上の成果に論理的にひも付けて提案できるようなデザイン力に到達するためには、徹底的に感覚値や自己都合を排除した上で、ネガティブチェックに耐えうる論理的なデザインを導き出す、自分への厳しさが求められます。

私はそもそも感覚値でステップアップしてきただけに、自らそうした思考に至ることはできなかったと振り返っています。しかし、転職を期に基礎から再度積み上げることが求められる環境を選んだことで、そうした自分の特性を抑えた上で、デザインに対する思考を深めることができました。

そうして入社から6年、自分のデザインはお客様のビジネスの中での機能を果たした上で、様々なデザインポータルサイトにも掲載されるようになり、自分のデザインに対する考えをブログで社外に発表して、時には大きなバズを生み出すことも経験しました。30歳を過ぎた頃、自分が欲しいと考えていた「強いデザインに対する思考力」が少しは身につきました。当時の自分が今の自分を見たら、それこそタイトルにあるような「劇的な成長」だと感じるのではないかと思います。

当時の私と同じように、デザインが好きで誰にも負けたくなくて、でも本当に自分の力が外で通用するのかについては実は不安である、実は自分の力が人と比べて薄っぺらいことを知っているけれど、見て見ぬふりをして誤魔化している、今居る環境にとどまっていれば危機的状況に陥ることはないと思うけれど、実際に状況が変わった際のことを想像すると不安で仕方がない、そしていつかは本質的でどこでも通用する、強いデザインに対する力をいつかは身につけたい、と考える人が居たとしたら、もう一度基礎から徹底的に学びなおすことができる環境に身を置くことは、最適な選択肢の一つなのかもしれません。

しかし20代後半のタイミングを逃すと、こうした環境に身を置くことは難しくなります。なぜなら30代を過ぎた人材には基礎の学び直しよりも、チームをリードするような働きが求められるようになるからです。でもこの記事のタイトルにピンと来た方なら、まだ間に合うのではないでしょうか。

2)広義のデザインに触れることができる環境に身を置く

書体、配色、写真を選ぶといったデザインの手法は「狭義のデザイン」と言えます。まさに先に述べたような内容です。その上で、クライアントに対してwebを使ったマーケティング施策の提案や、UXデザインの手法を取り入れたサイト構築を行う上流工程の仕事は「広義のデザイン」の意味合いが強くなります。

例えば我々が制作に携わる企業サイトはテクノロジーの進化と共に、役割が変化しています。上の図を見ていただくと分かるように、1994〜2002年頃は企業の看板的な意味合いや、会社案内としての意味合いが強くありました。存在するだけで価値があった時代と言えます。この頃のWebデザインは見た目の新しさ、表現の面白さといった「狭義のデザイン」であっても十分に効果を発揮しました。

その後、徐々に役割は戦略実現のためのツールとして、またコミュニケーションのプラットフォームとしての役割を強め、リードの獲得、ブランドの形成への働きかけが強く求められるようになりました。そこでは前述したような表現手法にあたる「狭義のデザイン」よりも、人の心をどのように動かすのか?という「広義のデザイン」の力が求められるようになったのです。

ここで最初の話に戻りますが、実は停滞を感じるデザイナーは、ある意味狭義のデザインは一定の水準まで到達した人であると言えます。そしてその後のさらなる成長を望むのであれば、広義のデザインに目を向けなければならない、と私は考えています。

元々Webであれグラフィックであれ、デザインにはこの広義のデザインの考え方が根本にあります。しかし、就職した企業によってはこうした考え方、働き方を求められず、いかに表現のスキルを上げるかだけを課題として掲げられたり、広い意味でのデザインの意味に触れることができない環境も多く存在します。そうした企業の属した場合、デザイナーとしての働き方は時代の流れと逆行する形となって先細りしていきますし、さらなる成長を感じる事も難しいでしょう。

その環境を具体的に言うなら、プロジェクトの背景も満足に伝えられず、ただ決められた企画に沿って絵を作り、そこに自分の考えを反映しようと思っても、上流での決定事項は変えることができず、「なぜこんなもの作らないといけないんだ」という疑問が出やすい職場で働くようなイメージです。

もちろん、狭義のデザインのみに特化して働くキャリアもありますし、その働き方が自分の中でのデザイナー像である、と考える人もいます。しかし昨今のAI技術の進化に伴って、こうした狭義のデザインの部分については自動化が進み、細かなデザイン表現の場が奪われていく時代であることも認識しておくべきでしょう。

そうした中、心のどこかで広義のデザインへの関与を望む気持ちがある場合には、できるだけ早いうちにそうした考え方を重要と考える環境に身を置くことが大切です。ある程度、狭義のデザインである表現手法を追求することも重要ですが、例えば私のように転職などのタイミングで、デザイナーとしての働き方、未来を見据えて自らのデザイナーとしてのポジションを見直すことも大切です。

この点において、私は現在の会社に入社した後、ビジネスの戦略、マーケティング、ブランディング、UXといった広義のデザインを、直クライアントに提案する機会に多く関わることができています。制作会社も色々とありますが、こうしたビジネス戦略に強みを持たない企業に属した場合には、広義のデザインに触れる機会は少なくなります。

デザイナーとしてキャリアを積み上げる上では、最終的に自分はどういったデザインを作り、どういった規模の、どういった人々に影響力を発揮していくのか?を考えるべきです。そして自分の強みを知り、戦略的に進むべき道を検討する必要があります。

3)練習・勉強することの楽しさを知る

この記事を読んでいるあなたは、練習・勉強することは好きですか?学校でいうところの勉強とは、授業を受けてその内容を頭に叩き込み、テストでその回答を自分の頭から引き出す、というものです。本来、人はこうした自己成長に喜びを得られるものですが、なかなかその勉強すること自体の楽しさを知っている人は少ないものです。

先にも書いた通り、私はもともと根っから感覚値で物事を判断して結論を出しやすい性格のため、熱心に厚い本を読んで歴史から基本を学んだり、広い事実からセオリーを導き出したり、といった活動とは、学生の頃から無縁の生活を送っていました。

しかし、好きという気持ちは根底にあるため、意識的に「練習・勉強するぞ」とならずとも、興味の働くままに物を作ってみたり、目の前の課題をクリアするために努力したり、といった行動はその都度とってはいました。ある程度まではこうした行動パターンでも成長することは可能です。

ですが、人にその知識を体系立てて説明できたり、説明を受けた人が同じように再現できるレベルの勉強と、自分だけの感覚値としてプラスになるというレベルの勉強には大きな差があり、歳を重ねるごとに基礎体力の差に開きが生まれてきます。

私のように、場当たり的でミニマムな勉強方法は、目の前の課題をクリアする上では一時的に機能することもありますが、より高いレベルの仕事をクリアする時、不確定要素だらけのビジネス上の課題に対する答えを求められる時、チームや顧客に対する強い影響力が求められる時ほど、通用しなくなります。それはどんな企業、どんな職種を選んだとしても同じです。

私の場合はベイジで活動を続ける中で初めて、練習・勉強することの楽しさを知りました。例えば、先にも挙げたデザインの基本原則の知識を自分なりにまとめて資料を作り、勉強会を開いて人に教えることは、強く自分の知識として定着しました。また、デザインポータルに掲載されているような優秀なデザインの模写を練習として一定期間続けたことで、仕事の中ですぐに活かせる力になりました。

両方に共通するのは、自発的に積み上げた知識を人の目に触れるところにアウトプットしていたことです。こうすることで、知識は完全に自分の引き出しに格納され、いつでも自由に引き出すことができるようになります。これがいわゆる勉強というもの、学びというものであることであることを知りました。

伝えた人から「為になった」とコメントをいただくこと、そして何より、自分がその知識を利用して新たに大きな課題を解決できるようになった時には、場当たり的な勉強では得られなかった、自分の実力となったことへの実感と、喜びを得ることができます。自発的に勉強を重ねれば重ねるほど、自分の確固たる力と喜びを同時に得るサイクルが出来上がるのです。

勉強すること、練習することには苦労が伴います。私はよくこの話の際に、DRAFTの宮田識さんの言葉を思い出します。以下、著書である「DRAFT宮田識 仕事の流儀」からの抜粋です。

毎日の仕事に振り回されていたらダメですね。徹夜続きで何もできないっていうのは最悪。野球でもサッカーでもゴルフでも、スポーツ選手は試合とは別に、ものすごい量の練習をしています。バットが外れて負けた。そうしたら死ぬほどバッティング練習するじゃないですか。PKで負けた。そうしたらぶっ倒れるまでPKの練習をするじゃないですか。それを考えたら、「デザイナーは甘いんじゃないですか?どれだけ練習してますか?」ということですよね。世の中、簡単にうまく行く方法はない。自分が好きで選んだ仕事なら、やってみろと言うしかない。練習するにしても、言われたことをこなすだけじゃダメですよ。自分の意思で動かないと身に付きませんから。自分から求めて初めて分かること、覚えることがあるんですよ。それが長く記憶に残る。自分だけのアイデアソースになっていくんです。

誰もが凡人です。そうした凡人が結果を出すには、努力・練習するしかありません。これを毎日苦しい中でも継続することで、結果的に喜びや楽しみを感じることができるようになるのです。

私はこの「勉強する・練習する」ことを学んだのは、タイミングとして遅すぎたと感じています。世の中の優秀な方は若い頃から、勉強することの喜びと楽しさを知っていて、それを自然と生活の中に取り入れていることから、早くに高いパフォーマンスを発揮できているのです。

しかしそんな私でも30歳から勉強や練習を改めて意識しはじめたことで、人に自らの知識を伝え、自分の力で学んでいく喜びを覚えながら、伸び悩みや停滞感を脱出することができました。コツコツと自分が求められる力に対して前向きな勉強・練習を積み重ねる人であれば、私のように長い時間をかけなくても、短い期間で想像もしていなかった自分のポテンシャルを引き出すことができるはずです。

あとこの話で一つ気をつけておかなければならない話があります。それは自分が今いる環境が、練習や努力が報われる環境であるかどうかを客観的に把握しておくことです。こうした頑張りが報われない環境に居続けるのは、あなたのキャリアにおける大切な時間を無駄にします。そうした時は思い切って環境を変える必要があると、私は考えています。

まとめ

以上が、デザイナーの成長における停滞をブレイクスルーするために、私が改めて見直すべきだと考えている3点です。総じて言えば、まず基礎となる土台を積み上げることができる環境を選ぶこと、そしてそこで感覚的な判断基準を排除した論理的な考え方を身に付けるための活動を積み重ねること、が重要です。停滞期は辛いものですが、考え方一つ、行動一つでそれまでの停滞が嘘のように、ガラッと視界が開ける可能性は十分にあると考えています。

お知らせ

そして、もしもここでお話した内容に少しでも共感した、興味が湧いたという方がいらっしゃれば、ぜひ私の所属するベイジという会社もブレイクスルーのための環境として、選択肢に入れるのも良いと思います。採用サイトからご応募いただいて、お話を聞かせてください。もしくはFacebookTwitter経由で話しかけていただいても構いません。もちろん現状のスキルはある程度考慮されますが、それよりもここでお話した私の経験や考えに共感いただける方であれば、ぜひ積極的に応援していきたいと考えています。

興味を持っていただけた方はこちらから株式会社ベイジの採用情報をご覧ください


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