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

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

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

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

登壇者の皆さんのお話

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ+おまけ

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

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

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


1記事ではてブ数4901を獲得した私が伝えたいアウトプットに対する考え方

先日公開した「誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック」という記事が、予想を遥かに超えて様々な方から多くの反響をいただきました。現時点での結果としてわかりやすい数字をご紹介すると、はてなブックマーク(通称はてブ)でブックマークされた数が約4900、Facebookでのシェア数が約11000、Newspicsでのシェア数が約6000となりました。

キャリア論、精神論、自分語りは、実力を兼ね備えた人の話しか影響力はありません。冷静に考えて、特に名があるわけでもない一介のWeb製作者の私が自分の経験談を語っても参考にならないため、極力このブログでも避けてきました。しかしこうした結果が生まれた今なら、自分自身のキャリアと行動を振り返って、自分なりのアウトプットに対する考え方をお話するのも良いかと考えました。

このエントリーで私が伝えたい結論は「他人に影響を与える質の高い自発的なアウトプットは自分自身のキャリアや生活に良い影響を与えるので、若いうちから積極的にアウトプットする習慣を身につけると良い」という話です。最初に言っておきますが、長いです。何卒ご了承の上で読み進めてください。以下、サマリーです。

  • 1. アウトプットの定義
  • 2. アウトプットに適した内容3種類
  • 3. 他人に影響を与えるアウトプットの2つの特長
  • 4. アウトプットの効果
  • 5. 自発的アウトプットと強制的アウトプットの違い
  • 6. アウトプットを阻む2種類の問題
  • 7. 私自身のアウトプット(4つの経験談)

1. アウトプットの定義

そもそもアウトプットとは何でしょうか。私の中では「自分以外の誰かが認識できる情報」と定義しています。私のようにブログに書く文章という形もあれば、絵、写真、映像、音楽、言葉など、人によって様々な形があります。

共通しているのは、頭の中の「思考」が目に見える形(もしくは耳に聞こえる形)となり、初めて「情報」となって、第三者に影響を与えるものだということです。ただ頭の中で考えているだけの「思考」は、他人に影響を与えることはありません。

アウトプットされた情報は物理的に存在するため、発信すると波が寄せ返すように、自分自身へのフィードバックとして影響が跳ね返ってきます。感謝、同意、反発といった感情もあれば、給料や報酬といったものもある意味フィードバックと言えます。

人は外部からのフィードバックを通して喜び、悲しみ、成長する生き物です。アウトプットによって多くのフィードバックを得る人ほど、感情が豊かになり、思考に深みが増します。人がアウトプットすることにはこうしたサイクルがあるということをまず覚えておきましょう。

2. アウトプットに適した内容3種類

私の中でのアウトプットの内容は、3種類に分類して考えています。「好きなこと」「できること」「学びたいこと」です。

(1)好きなこと

もっとも多くの人が始めやすいアウトプットは「好きなこと」です。私のようにブログに限らずとも、バンドを組んでライブをする、絵を描いて個展を開く、写真を撮ってギャラリーサイトを作る、小説を書いて賞レースに応募するなど、人によって様々な形があります。無条件に自分が好きなこと、表現したい欲求を解放すると、少なからず他人に影響を及ぼします。

(2)できること

自分がこれまで生きてきた中で培ったノウハウを公開することもアウトプットに向いています。身近なところで言えば、料理のレシピを他人に共有したり、育児日記を公開したりすることもありますし、講演を開いて多くの聴衆に語りかけるといった方法もあります。私が更新してきたデザインに関するブログもベースはここにあります。自分にとっては当たり前のことでも、他人にとっては非常に有益な情報になり得るのです。

(3)学びたいこと

知識が少ない分野の学びを深めるために、情報を蓄積することもアウトプットに適しています。脳科学的な話で言えば、頭の中にもやもやとある思考を言葉に置き換えて情報化すると、記憶は一時的な記憶装置である海馬から、記憶の金庫とも呼ばれる側頭葉に移動し、忘れにくい知識となって脳に定着するため、学びが加速します。(詳しくはこちら)またこうした学びのアウトプットには、類は友を呼ぶという言葉の通り、自然と共通の思考を持った人が集まり、知りたい情報が集まってくる特性があります。

3. 他人に影響を与えやすいアウトプット3種類

前述の通り、人によってアウトプットの形は様々ですが、他人に影響を与えやすい内容は共通しており「面白い」「共感できる」「役に立つ」に分類することができます。何かを発信するときは、この3つのうちのどれに該当するか?を考えましょう。

(1)面白い

見て、読んで、聞いて、「面白い」と感じさせるものは、他人に強い影響を及ぼします。人気のお笑い芸人の漫才、人気作家の最新の長編小説、読んで笑えるWeb上の記事などはこの面白さに該当します。また人気音楽アーティストの音楽など、五感で感情を揺さぶるアウトプットもここに分類されます。

(2)共感できる

情報の受け手が発信者の考えに強く同意できる内容は、この「共感できる」アウトプットに分類されます。音楽の歌詞に共感できる、エッセイの経験に共感できる、アート作者の感情に共感できるなど、大きな共感を生み出すものは強く人の心を惹きつけ、感情を揺さぶり、多くのフィードバックを生み出します。

(3)役に立つ

情報の受け手が発信された情報を活用することで、物事を効率化できたり、悩みを解決したりできる情報は「役に立つ」アウトプットに分類されます。私がこのブログでデザインに関するノウハウを発信していた記事も、この「役に立つ」に分類されます。前述の2つよりも、この「役に立つ」は意図的に実践しやすいアウトプットです。

4. 多くのフィードバックを得るために意識すべき3点

アウトプットの定義でお話したサイクル図を思い出してほしいのですが、より多くのフィードバックを得るために、意識しておくことが3つあります。これらを知っておくと、より多くのフィードバックを生むことができます。

(1)メッセージが絞られていること

一つのアウトプットの中に伝えたいことがいくつも含まれていたり、結局何が言いたいのかわからない場合、メッセージの受け手はそこから何を感じれば良いのか迷ってしまいます。例えば飲食店で考えてみると、「ラーメン+うどんセット」をお店の売りにしたい!と考えて発信しても、ラーメン好き・うどん好きのそれぞれの人からは「どちらも極めてない中途半端な店だなぁ」と感じられるでしょう。自分自身が伝えたいことを一言で言い切れるくらいにメッセージが絞られていればいるほど、良かれ悪かれ、他人に影響を与えやすくなります。

(2)受け手のメリットを優先していること

自分へのメリットを考慮するのは悪いことではありませんが、そちらを優先すると他人に影響を及ぼしにくくなります。人と会話していて「あ、なんかこの人の話は自慢臭いなぁ」「人より自分が優れてまっせアピールしたいんじゃないか」と感じたことはありませんか?自分自身のメリットがアウトプットに過剰に隠されていると、受け手は想像以上に敏感に察知します。基本的に受け手はマイナス目線で懐疑的に物事を見るため、自分自身へのメリットを優先したアウトプットは他人に影響を与えにくいのです。

(3)対象者の母数が多いこと

メッセージを絞り、受け手のメリットを優先してアウトプットしたとしても、受け取る人自体の人数が少ないと、影響の度合いは小さくなります。ニッチな分野で影響を及ぼすことも無意味ではありませんし、自分自身がどうしても発信したい情報に対して「対象者が少ないからやめておこう」と考えるのは、アウトプットを継続するためのモチベーションを著しく下げてしまうため、前者の2つほど過剰に意識することはありませんが、現実問題として踏まえておくことは重要です。

5. アウトプットが生み出す効果

好きなこと、できること、学びたいことからアウトプットを開始し、さらに他人に影響を与えやすい内容を考慮し始めると、自分の身の周りにも、自分自身にも、数多くの良い変化が生まれます。

周囲の変化

自分の考えに賛同・共感してくれる人が身の回りに現れます。もちろん場合によっては炎上するような大きな否定を生み出す可能性もありますが、それはある程度影響力を持った人のみに起こりやすいことです。逆に、前の章で述べたメッセージの絞り込みと、受け手のメリットの優先を守れば、自分を高く評価してくれる人が現れる可能性の方が高いのです。

自分の変化

本当に他人に伝わるものが何なのか?どうすればその内容が伝わるのか?本来達成すべき目標は何なのか?を突き詰める、深い思考力や洞察力が身につきます。ここで身につけた力は、日々取り組む仕事の中にも、プライベートにも十分に応用することができ、より物事を円滑に進めたり、より他人をスムーズに説得したりすることができるようになります。

6. 強制的アウトプットと自発的アウトプットの違い

さてここで一つご自身のアウトプット経験を思い出してください。何かの情報を発信することがアウトプットであるなら、学校で指示された課題も、会社で指示された仕事も全てアウトプットと呼べるのではないか?だとすれば毎日自分はアウトプットしているのではないか?と思いませんか?しかしながら、自発的に行なったアウトプットと他人に強制されたアウトプットには、大きな違いがあるのです。

強制的アウトプット

強制的アウトプットとは、自分以外の誰かに指示を受けて行うアウトプットです。指示された資料を集めること、指示された議事録を作成して共有すること、指示されたデザインを作ることなど、作業を完了させること自体が目的であると捉えがちなのです。本来はそのアウトプットの先にある気づきや学びが重要なのですが、そこに視点が及ばないケースが多いのです。

自発的アウトプット

自発的アウトプットとは、自分自身の意志によって行うアウトプットです。自分の撮った写真を見てもらいたい、作った音楽を聴いてほしい、書いた文章を読んでほしいなど、行動の先には他人からのフィードバックへの渇望があります。自発的にアウトプットすると、ほんの小さなフィードバックさえも敏感にキャッチできる、大きなアンテナが働くのです。

7. アウトプットを阻む2種類の問題

人によってはどうしても「自分にはできない」と語る人もいます。その原因は物理的な問題と、精神的な問題に分けることができるのですが、どのようにしてその問題に対処すれば良いのでしょうか。ここでは私なりの考え方・対処法を述べておきたいと思います。

(1)物理的問題 〜時間がない〜

もっとも多くの人が語る理由が「時間がない」という物理的な問題です。実際に年をとればとるほど、子育てや人付き合いなどで自分の時間を持つことは難しくなります。しかし実は、この「時間がない」という言葉は真意の上辺であって、本当のところは「そこまで何かしらアウトプットしなければまずい!」という危機的な状況に無いのです。現状の生活を変えたくない、変える必要がない、変えるための面倒さ・痛みを受けるくらいなら今のままで良い、という選択をしているのです。

本人の意思ありきでなければアウトプットは継続できないため、他人が「そんなことじゃダメだ!」と言って行動を変えようとすることには意味がなく、逆にストレスを与えてアウトプットを敬遠させることになります。

しかし長い人生の中では、会社の中でも私生活の中でも、周囲から変化を求められる時が必ずやってきます。その時に自分の変化するストレスから逃げ、目先の安息を優先したり、変化しない自分を「時間がない」といった言葉で肯定していては、自分の求める生活の豊かさ(地位や報酬の向上、円滑な人間関係など)を得ることはできません。

まず「時間が無い」と言ってしまう人は、自分自身をそうした上辺の言葉で肯定していることを冷静に受け止め、今自分が新たなアウトプットを開始すべきなのかどうか、しなければどんなデメリットがこの先起こり得るのかを、落ち着いて考えてみることをお勧めします。

(2)精神的問題 〜恥ずかしい・否定が怖い〜

精神的な問題でまず挙げられるのは、恥ずかしいという感情です。「薄い知識だなぁ」「考えが浅いなぁ」と見られるのは、誰しも恥ずかしいと感じるでしょう。実はこの問題は、匿名という方法で簡単に解決できます。ブログ業界で言えばちきりんさんなど、匿名でも大きな影響力を持つアウトプットを残す人は数多く存在します。まず匿名で始めてアウトプットが他人に影響を及ぼすようになってから、必要に応じて匿名をやめるという手もあります。ただ実名の方が現実の周囲と関係が近いため、強いフィードバックを得やすくなります。

そしてもう一つが、否定が怖いという感情です。残念ながらこの感情は、傷つくことから身を守るという、人が生まれ持って兼ね備えた自己防衛本能に紐付いた感情なので、消えることはありません。消えることはないものとして自分の中に受け入れ、折り合いをつけて心の中に同居させる必要があるのです。時に大きくなることも、小さくなることもあるこの否定への怖さを「消えるものではない」と受け入れた時、PPAPが世界で爆発的なヒットを飛ばすような、全く想像することのできない可能性につながることだってあるのです。

8. 私自身のアウトプット(4つの経験談)

以上が、私自身が経験の中で考えてきた、私なりのアウトプット論です。ここからは、そうしたアウトプット論にたどり着くまでに、私がどんな経験を経てきたのか、アウトプットからどんな恩恵を受けてきたのかをお話してみたいと思います。(Web業界に偏った話になります)

経験その1)初めての個人Webサイト

GOONEE.NETというドメインで、自己紹介、日々の日記、仕事の中で思うこと、写真、好きなサイトのリンク集などを掲載。FLASHでおもちゃのようなUI表現を追求。現在は運営終了。

もともと私がデザイナーとして働き始めた14年ほど前は、インターネットが劇的に世の中を変えていく流れがありました。私の感覚では、今の若いクリエイターよりも、当時のクリエイターの方がアウトプット欲が強く、こぞって自分のサイトを作ってセルフブランディングしていた記憶があります。

例にもれず、私自身も「人から羨望の眼差しで見られるサイトを持っていたい」と考るようになり、自らのドメインでサイトやブログを作って、ロモで撮った写真を掲載したり、自分の日々あった出来事などを発信したりするようになりました。自分の好きなことを自由に発表し、周囲からの反響を得る日々はとても楽しく、苦もなくアウトプットを継続できました。

最初に作った個人のWebサイトを経由して、当時海外に住んでいた見知らぬカメラマンからMixi経由で連絡をもらって個展のロゴやDMを作らせてもらったり、浅草に住む老舗和菓子店の若女将から個人的なサイト制作の依頼をいただくこともありました。どれも自らのアウトプット無しには成し得なかった経験でした。

経験その2)会社の昼休みを利用したランチブログサイト

そろそろひるめし@赤坂というサイト。赤坂でのランチを写真付きで紹介。のちにワンコインランチの店だけを集めた特集、自分なりのベストランチ特集といった企画ページを作成。現在は更新停止中。

7年ほど前には当時所属していた赤坂の会社で働く昼の時間を有効活用して、ランチブログサイトを運営してみました。会社の仕事だけではどうも張り合いがなく、どうせ誰が注目しているわけでもなし、気楽に好きなことをやってみようと、それまでやったことのないことを自由に試してみました。誤解を恐れず言うなら、暇つぶしです。

そのサイトでは、ランチの写真を撮るためにカメラを買ってみたり、自分の好きなロゴを作って面白がってみたり、さわったことのないWordpressをいじってカスタムしてみたり、ダウンロードできるワンコインランチマップを作ってみたりと、様々なことを試してみました。そうしているうちに、周囲から徐々に反応をもらえるようになりました。

最終的に転職を迎え、赤坂を去ると同時にそのサイトの運営はストップしましたが、自主的なWebサイトの運営経験は現在私が所属するWeb制作会社ベイジに転職する際の強力な武器になりましたし、冗談半分で作ったロゴは日本タイポグラフィ協会主催のタイポグラフィ年鑑への入選も果たしました。またサイト自体を有名なデザインポータルサイトロゴポータルサイトにも取り上げてもらえましたし、社内で話したことのない仕事のデキる先輩とも交流する機会を得ることができました。この頃には、アウトプットとは何か?を十分に理解していたつもりでした。

経験その3)下北沢を舞台にしたカフェブログサイト

東京昼カフェというサイト。東京都内のカフェを写真付きで紹介。下北沢が多めだが、東京都内を色々と掲載する展望を持っていた。現在は更新停止中。

以前のランチブログというアウトプットが自分に良い流れを生み出したことを踏まえ、現在所属するWeb制作会社ベイジに転職後は、職場が下北沢ということも踏まえ、カフェブログという形で新たなサイトをスタートさせました。関西出身で東京の地理に疎い私にとって、お洒落な街に繰り出して洒落たカフェを記録していくことはとても楽しい作業でした。

またこの頃から世間ではFacebookが台頭し始めました。一つひとつの投稿に対して「いいね!」という形でフィードバックが得られることは、何よりの楽しみでした。「いいね!」の数が増えれば増えるほど、自分自身の存在が認められていると感じ、毎回更新する度に楽しさは増していきました。結果的には都内のカフェを80件ほど取り上げました。

しかし、運営を開始してから2年ほど経ったある時、会社の面談の中で代表から「カフェブログやめたら?」という言葉を投げかけられました。カフェブログは写真や言葉がある程度のボリュームで掲載されているものの、そこに私自身の「思考や考察」が含まれていない、というのが指摘の理由でした。

指摘の通り、アウトプットを継続はしているものの、特に周囲にも自分自身にも何か際立って大きな影響を生み出してはいませんでした。ただ「アウトプットを継続している」ということだけが、自分自身を肯定する唯一の言い訳でした。

ここで思い出していただきたいのが前段で述べた「他人に影響を与えやすいアウトプット」の話です。私が指摘を受けた「思考や考察」とは、どのようにすれば第三者に強く影響を与えることができるのか?を深く考えること、だったのです。

私のカフェブログに全くそれが無かったとは言いませんが、それが深い考察であったか?と問われると、Yesとは言えませんでした。この時ばかりは流石に心が折れ、しばらく何かをアウトプットすることはありませんでした。

経験その4)デザイナーとしての考察ブログ

TomoyukiArasuna.comというブログ。デザインに関するノウハウ、書評、イベントレポートを中心に記事を掲載。現在も更新中。

アウトプットをやめた私の成長曲線は停滞しました。会社で与えられるプロジェクトを一生懸命こなしましたが、30歳を超えると徐々に、結果を出して当たり前、綺麗なデザインなんて出来て当たり前、専門知識があって当たり前、という状況になるのです。そうしたベースの能力に加えてさらに上のキャリアを目指すためには、他人への強い影響力が求められるのです。

この状況を打破するためには、周囲に影響を与えることができる、新たなアウトプットを始めるしか道はありませんでした。そこで始めたのがこのブログです。もともと私の会社の代表がブログで多くの人々に強い影響を与えていたため、不器用ながらも見よう見真似でまずは始めてみました。

もともと文章を書くことは苦手ではなく、やろうと決めたら文章自体をまとめることに楽しさは覚えましたが、開始当初の周囲の反応は薄いものでした。一生懸命考えて何日もかけて作った文章でも、びっくりするほど反応がありませんでした。

反応がない時には自分自身に「これは自らの言語化能力を鍛えるための活動だから、反応がなくても焦ることはない」と言い聞かせました。しかしその自分への言い訳こそが、私の能力にフタをしてしまっている原因だということに、投稿の回を重ねる毎に気がついていきました。

ある時、Googleからマテリアルデザインが発表された際、自分自身の勉強の意味も兼ねて概要をまとめたエントリーを投稿したところ、急にはてなブックマークが50を超える反応がありました。驚いてアクセスを見てみたところ、PV数は2000を超えていました。これは…と思い、カフェブログのアクセスを改めて見返してみると、MAX値でもPV数はたったの200ほどしかありませんでした。

ランチブログやカフェブログは一生懸命作っていました。しかし、より大きなフィードバックを受けるための「他人に影響を与えるにはどうすれば良いのか?」という視点が決定的に欠けていたことを、この時身をもって体感しました。

いくら美しい写真を掲載し、自分の好きな言葉を並べたとしても、見る人が少なければ自分に多くの良いフィードバックが返ってくることはありません。特に見た目へのこだわりの強いデザイナーという職業柄、この落とし穴には気がつきにくいものなのです。

それ以降のエントリーは、徹底的に読み手への影響を突き詰めて考え、精度を上げることに邁進しました。

最初にバズを生んだのは、Webデザイナーがワイヤーフレーム通りにデザインを作ってしまう問題を取り上げた記事です。この記事は、自分自身が過去に悩んだ問題を取り上げていて、当時の自分にアドバイスするならどう言えば伝わるのか?確実に失敗しなくなるためにはどう言えば良いか?を徹底的に考え抜きました。結果、はてブ数は400に到達しました。

その後、目立ってバズを生んだのはスマートフォンのUIに関する考察や、ランディングページのデザインノウハウをまとめたものでした。情報を記録したスプレッドシートも、数多く集めたサンプルも、記事を見る人のためになるという判断の元で惜しみなく公開しました。どちらも私自身が関わるWeb制作業務の話で、自分と同じWeb制作者には有益になるであろうと考えて発信した情報でした。

その後、今年に入って公開したのが先日の「誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック」という記事でした。元々、同じ会社で働く若いデザイナーが図の作成に苦戦する姿を何度も見ていたため、自分自身のノウハウを共有するために作成したものでしたが、記事の読み手をデザイナーだけに限定すると、読み手の母数が少なくなってしまうことを、経験則で学んでいました。

また、以前に代表のブログのエントリーで提案書づくりのデザインに関する記事が人気を集めていたことを思い出し、デザイナーだけでなく、提案書づくりに関わる人をターゲットに含めれば、より多くの人々に響くのではないかと考えました。そしてどうすればそこで苦戦する人たちの問題が解決するか?を考え、解りやすい文章やサンプルを作成しました。

当初の想定では、はてブ300〜600くらい行けばいい方かな?と考えていましたが、結果は自分の想像をはるかに超える4901という数字で、アクセスは初日でおよそ10万PVありました。この結果は、私の的確な分析が全ての要因とは思っておらず、外部要因もあると考えています。しかし、徹底的に読み手の目線に立ってコンテンツを作るということが、他人への影響力と密接に関係しているということを改めて教えてくれました。

記事はまだ先週公開したばかりですが、自分の身の回りで様々な変化が起こり始めました。Facebookのフォロワーは約250人、Twitterのフォロワーは約300人ほど増え、これまで知り合うことの無かった方々からFacebook経由で多くの感謝のメッセージをいただきました。また登壇へのお誘いもいただくようになりました。

振り返ってみると、私のキャリアの中でジャンプするタイミングは、すべて自発的なアウトプットが関連していました。歳を重ねるごとに活動のスタイルは変わりますが、可能な限り今後も他人に有益な情報とは何か?を考えて、アウトプットを継続していきたいと考えています。

まとめ

冒頭で述べた通りの結論に戻ります。私がここにまとめた一連のアウトプットに対する考え方と、自らの経験から伝えたいメッセージは「他人に影響を与える質の高い自発的なアウトプットは自分自身のキャリアや生活に良い影響を与えるので、若いうちから積極的にアウトプットする習慣を身につけると良い」という話です。

「若いうちから」という言葉が入っているのには理由があります。それは、年齢を重ねれば重ねるほど身動きが取りづらくなることを身を持って経験していることや、大きな結果を残している人ほど、早くからアウトプットする習慣を身につけていることに、年齢を重ねてから気がついたからです。

また、アウトプットするかどうかは本人の自由です。誰に強制されるものでもありません。しかし、多くのアウトプットを重ねて思考を深めている人の方が、多くの企業、引いては世の中全体で必要とされる人材であり、自分の求める生活の豊かさ(地位や報酬の向上、円滑な人間関係など)を得られるという事実から目を背けてはいけません。その事実の前で、自分がどういった行動をとるか、できるだけ早く考えておくべきでしょう。

最後に、インターネットが普及している現在は昔と比べて、自発的なアウトプットで他人に影響を与えやすい環境が整っています。こうした時代に生きている中で自分の人生をより豊かにするために、その恩恵を賢く利用する道を選ぶのか、頑なに利用しない道を選ぶのかも、自分なりの考えを持っておくべきでしょう。私はWeb制作に関わる人間こそ、その恩恵を最もうまく利用して世の中に自分のアウトプットを数多く投げかけ、多くのフィードバックを受けて深い思考力や鋭い洞察力を身につけながら、力強く活躍していくべきだと考えています。

私のアウトプットに対する考え方と経験からの学びが、少しでも多くの方のお役に立てばと思います。


誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な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を使ったアウトプットであったり、登壇の期会に自身の考えを来場者に伝えるといったものです。

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

読了の目標期間を決める

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

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

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

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

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

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

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

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

まとめ

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

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

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

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


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

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

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

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

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

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

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

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

01)文章

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

1-1)マーカー

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

1-2)強調点

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

1-3)左右に斜線

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

1-4)部分的な色変更

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

1-5)袋文字

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

1-6)手書き文字

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

1-7)打ち消し線

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

1-8)ギザギザ丸

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

02)写真

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

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

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

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

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

2-3)切り抜き版

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

03)人物

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

3-1)吹き出し

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

3-2)シルエット

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

04)評価

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

4-1)メダル

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

4-2)証書

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

05)現実メタファ

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

5-1)紙

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

5-2)紙+α

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

5-3)プリント写真

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

5-4)手紙

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

5-5)黒板

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

5-6)リボン

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

5-7)クリップボード

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

06)関係

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

6-1)接続

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

6-2)比較

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

6-3)並列

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

6-4)ステップ

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

07)背景

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

7-1)放射線

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

7-2)写真

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

7-3)パターン

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

08)境界

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

8-1)見出し帯

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

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

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

8-3)斜め

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

8-4)波

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

まとめ

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


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

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

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

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

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

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

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

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

1-1)要素別の割合

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

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

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

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

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

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

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

1-5)その他

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

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

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

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

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

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

04)移動ナビゲーション

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

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

05)ボタンの固定

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

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

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

06)カルーセル

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

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

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

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

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

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

07)ミニドロップダウン

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

08)フォーム

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

09)テーブル

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

10)演出の工夫

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

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

まとめ

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

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


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

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

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

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

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

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

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

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

新入社員 Aさん

ステータス

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

状況

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

結果

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

ディレクターからの一言

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

経験1年目 Bさん

ステータス

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

状況

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

結果

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

ディレクターからの一言

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

経験5年目 Cさん

ステータス

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

状況

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

結果

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

ディレクターからの一言

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

3人の能力の比較

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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


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

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

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

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

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

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

1.文字はいじらない

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

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

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

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

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

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

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

2.奇をてらわない

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

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

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

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

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

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

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

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

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

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

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

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


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

ユーザビリティ

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

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

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

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

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

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

使いやすさ

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

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

日常生活での悪例)

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

Web上での悪例)

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

“機能性”

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

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

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

日常生活での悪例)

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

Web上での悪例)

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

反応性

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

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

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

日常生活での悪例)

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

Web上での悪例)

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

人間工学性

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

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

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

日常生活での悪例)

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

Web上での悪例)

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

利便性

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

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

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

日常生活での好例)

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

Web上での好例)

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

“万人保証性”

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

優美さ・明快さ

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

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

日常生活での悪例)

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

Web上での悪例)

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

“可視性”

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

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

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

日常生活での好例)

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

Web上での好例)

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

“理解可能性”

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

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

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

日常生活での例)

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

Web上での例)

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

“論理性”

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

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

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

日常生活での悪例)

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

Web上での悪例)

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

“一貫性”

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

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

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

日常生活での悪例)

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

Web上での悪例)

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

“予測可能性”

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

まとめ

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

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

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

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

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

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