UIデザインにバーティカルリズム（Vertical Rhythm）という考え方がある。その名の通り縦方向のリズムという意味である。

水平方向に対しては多くのデザイナーが4px, 10px, 8px単位などのグリッドに沿ってデザインしているにも関わらず、垂直方向に対してはグリッドに添わせることができてないのである。

そもそもデザインする時に8pxなどのグリッドで考えているなら、すべての要素は水平方向も垂直方向もグリッドに沿うはずである。グリッドにそわない理由はなんなのだろう。

その答えはline-heightである。line-heightをサイト共通で1.4とか1.6といったように相対指定をしてしまうとバーティカルリズム（Vertical Rhythm）は崩れてしまうのである。

たとえば8pxのグリッドに合わせてデザインしようとした時、サイト全体ですべてのフォントに1.5のline-heightを指定していると、大きさ16pxのフォントの1行は24px（16px × 1.5）になり8pxのグリッドに沿うが、大きさ18pxのフォントだと27px（18px × 1.5）となりグリッドからずれるのである。

つまりバーティカルリズム（Vertical Rhythm）を維持しようとするなら、フォントサイズに応じてline-heightを変えなければならないのである。上の例であれば、18pxのフォントで8pxのグリッドに沿わせたいのであれば、line-heightは32pxまたは24px（もしくは4pxを許容して28px）と絶対指定すべきであろう。

バーティカルリズム（Vertical Rhythm）の意識があるかないかはline-heightの指定でわかるのである。

デザインのなかで線は重要な役割を果たします。情報と情報を結びつけたり、領域を明確にしたり、線が必要な場所をあげたらキリがありません。しかし、優れたデザイナーは線をむやみに使わないのです。

まず覚えておいて欲しいのが、線というのは綺麗なものではないということです。例えば一本の線を左から右に引くとその上下に線が2本できます。マジックなどで太い線を引くとそれは明確です。

無駄な要素が多ければ多いほどデザインは汚くなるとうのは誰もが知っているでしょう。線を引く場合も同じことです。1本の線があれば十分のときに、線を引くと悲しいことに2本の線ができてしまうつまり無駄な要素が増えるのです。

では、どうやって領域やグループを分けるかというと、まずはスペース（余白とも言う）でそれを実現します。スペースを開けて分割したり、同じグループのものを近づけて、異なるグループのものを遠ざけるということですね。もちろん全体のデザインスペースの大きさや、フォントサイズの関係で実現できないときもあります。

そんなときに2番目の選択肢を考えます。塗りです。つまり2つの色の差によってできあがる線を使うということです。この線であれば2本できてしまうことはありません。

そして、それでも実現実現できない場合のみ線という選択を考えるのです。

僕が、今の会社に転職したばかりの時、その会社のサービスのサイトは線であふれていました。ほとんどすべての情報の境目に線がひかれていたのです。最初の半年ぐらいでせっせと不要な線を取り除きましたが、今もまだ不要な線はたくさん残っています。線は見た目を汚くするたけでなく、不必要に硬い印象を与えるので、不必要な線がないか常に目を光らせておきましょう。

これから少しずつデザインマニュアルとして、デザインを作成する時に参考にできる内容を書いていければいいと思っています。初回の今回は目的の定義です。

目的の定義はどんなデザインにおいても最初にやらなければならないことです。ひょっとしたらこれを読んでいる人の中には、「目的の定義」と聞いて、「何を今さら」とか「そんなこと言われるまでもなくやっているよ」と思った人もいるかもしれない。

しかし、実際には目的の定義をしたつもりになって、曖昧なまま進んでいるプロジェクトが世の中には多々あるのです。特に、複数の人が関わる場合、目的を共有できていることによって無駄なすれ違いや誤解を防ぐことができるのです。

リーフレットにもスマートフォンアプリにも目的があるし、サービスのUIの1つ1つのコンポーネントにも目的があるのです。

そしてその目的は、人と行動の組み合わせで

○○が〇〇する

と定義することができます。

例えば、あるコンサートのポスターを作るとしましょう。この場合この目的は何になるでしょうか。よくありがちなのは

音楽ファンがコンサートに来る

というものです。しかし、これではかなり曖昧ですし、そもそも通りすがりに見るポスターが、音楽ファンがコンサート会場に来るところまで責任を担うというのはかなり無理があります。おそらく実際には

音楽ファンが予約サイトにアクセスする。
音楽ファンが予約窓口に電話する

ぐらいが現実的、かつ具体的なのではないでしょうか。実際には音楽ファンが予約するは窓口の担当者や、予約申し込みをするウェブサイトの目的になるはずです。

これぐらいの精度で目的が定義できていないと、細かい議論が起きた時に決めることができません。たとえば、

コンサート会場への地図を掲載する必要があるかないか

という話になったとき、予約サイトへのアクセスというレベルまで目的が明確であれば、会場へのおおよその時間がわかれば十分ということになります。つまり見ながら会場へたどり着けるほどの細かい地図は必要ない、という判断ができるのです。

同じようにWebサービスやスマートフォンアプリのUIのコンポーネント一つ一つにも目的がはっきりしている必要があります。

例えば、僕が関わっているサービスは、オンラインで授業を受けられるサービスなのですが、もちろん授業内容から検索することができます。さて、検索結果に該当する授業が一覧で表示されますがその授業1つ1つのサマリーの目的は何でしょうか？

授業の魅力を知り興味がわけばタップする。

授業の受講の可否を知り受講できるならタップする

どちらも考えられます。こんな細かいところまで定義する必要があるのか、と思うかたもいるかもしれませんが、特にUIのように組織の複数の人間が関わっている場合この粒度で定義する必要があります。

例えば、授業の日付を載せるか載せないか、という議論になった時、授業の受講の可否を知ることが目的なら日付は必須ですし、授業の魅力を知ることが目的であれば一覧性を重視して日付は不要、という判断ができるのです。

どうでしょう、目的を明確にすることの重要性が伝わったでしょうか？

海外に比べると日本のデザイナーの給料は低いと言われています。日本のなかを考えても、デザイナーの方がエンジニアより希少価値が高いにも関わらずそれほど給料は高くありません。その原因の1つはデザイナーの交渉下手なのではないでしょうか。ただでさえデザイナーは視覚的なものを操るのが得意な一方で、その反動でか言葉を操るのが苦手なのです。それを自分の利益のための給与交渉に使うなどというのを求めることに無理があるのかもしれません。

しかし、僕自身も一人のデザイナーとして、デザイナー全体の給与水準が上った方が幸せになれるわけで、僕自身がここ数年の採用面接で給料を聞く際にやっていることを紹介したい。

正直僕も

給料いくらぐらいくれるんですか？

などとは聞きずらいのです。それまで散々会社の方向せとか、社長の考え方とか社風とか聞いときながら「結局金かよ？」とは思われたくないのです。

とはいえお金も重要な要素の一つ。

ではどうしているかというと、面接の際には、その会社が求めているデザイナー像を聞いて、それが自分の技術や進みたい方向にマッチしているかどうかを確かめると思いまが、それを聞いた後に次のように聞くのです。

なるほど、御社はそんなポジションを埋めるデザイナーを探しているんですね。ちなみに、そのポジションに御社はいくら払う予定ですか？

その会社はそのポジションを埋める人材にどれくらいの価値を感じているのか。これこそがこの質問の真意で、あくまでも自分は御社の採用状況を聞いているだけで、まだそのポジションに正式に志望表明をしたわけではないし、給与によってはそのポジションに立候補することも辞退することもあるということを示唆する質問なのである。

交渉術の話になるが、値段交渉に関して一つの大きなルールがある。それは

オープニングオファーを最初にしてはならない。

というものである。つまり希望金額は最初に相手に言わせた方が交渉は有利に働くということなのです。この辺を詳しく知りたい方は交渉術を勉強するといいと思います。

スマートデフォルトという考え方があります。簡単に言うとユーザーが選択するであろう選択をデフォルト選択にするということです。

例えば、現在関わっているサービスは、ユーザーが自分の学びたい内容の講座を探して、受講するサービスなのですが、検索画面には講座を地域から絞り込めるUIがあります。地域を「都道府県」または「全国」から選択できるのですが、このUIにおけるスマートデフォルトは何でしょうか。

もしユーザーがすでにユーザー登録していて、住んでいる地域を登録していたら、その地域をデフォルト値として選択しておけば、ユーザーは毎回その選択をする必要がなくなります。これがスマートデフォルトです。

ログインしていないユーザーなどは住んでいる地域がわからないので、デフォルト値は「全国」にするしかないですね。その場合も「未設定」や「未選択」ではなく「全国」とラベルを明確にすべきです。

若干ラベルの話にまで広がってしまいましたが、UIがあるとき、常に

スマートデフォルトはどうあるべきか？

自問しましょう。

余談ですが、最近はコロナのせいでオンラインの講座が増えてきたので地域の重要度は少しずつ下がっています。

「直感的なUIとは」直感的なUIがいい。とはよく言うければ、そもそも「直感的」とは何を指すのか。今回は書籍「Intuitive Design」の内容を参考に自分なりの解釈を加えたものを書いてみたい。

僕自身もつい最近まで、UIを考えるときPerceptibility, Predictability,Feedback, Consistency, Learnabilityという5つの考え方を基準に考えていた。しかし「Intuitive Design」では次の8つの指標を推奨している。

1.Discoverability

ターゲットユーザーが目的を達成するためのUIを発見できるか

2.Affordance

Aターゲットユーザーに操作可能なUIであり、どのように操作するかが伝わるか

3.Comprehensibility

ターゲットユーザーがそのUIの意味を理解できるか

Comprehensibilityは次のような点が判断指標となる。　　

• ユーザーの言葉で語っているか
• 期待通りの動作をしているか
• 的確なアイコンを表示しているか

4.Responsive Feedback

ターゲットユーザーの現在の状況や操作の結果を正確、
明確かつ即座に示せているか

5.Predictability

ターゲットユーザーが操作する前にその操作の結果を予測できるか

6.Efficiency

ターゲットユーザーが不要な動作や繰り返しをせずに最優先事項を完了できるか

7.Forgiveness

ターゲットユーザーの誤操作を防げるか、誤操作による打撃を最小限に抑えているか、誤操作から簡単に復旧できるか

マウスアップで動作させているか、タップエリアは十分大きいかなどがForgivenessの一例である。

8.Explorability

ターゲットユーザーがミスをすることや迷うことを恐れずに使えるか

次のような明らかなナビゲーションがあること

• タスクの完了方法、および次のステップへの移動方法が明らかである
• 前へ戻る方法が明らかである
• 現在のタスクのキャンセル方法が明らかである
• ホーム画面へ戻る方法が明らかである

保存方法が明確である

• 即時保存の場合、保存が実行されていることを示す
• 手動保存の場合、保存ボタンを明確にする（スクロールしないと見えないとかはだめ）

デザイナーとして仕事をしていくうえで、必要なのは「発想力」「デザイン力」「伝達力」などいろいろあるが、今回はそんな「発想力」について書いてみたい。「発想力」とはいわゆるアイデアを出すための能力である。いろんなアイデアを思いつくためにはどんなことをすればいいかというと、もちろん

たくさんのものに触れること

とはよくある答えで、それは常に心がけるべきである。英語のデザインのオンラインコースでは

The only thing you should know as a designer is everything.

（デザイナーとして知るべき唯一のことはすべて）

と語っており、この言葉は自分にとっても非常に印象に残っていて、本や映画、漫画、アニメ、音楽、スポーツ、格闘技あらゆるものに時間の許す限り手を伸ばすようにしている。とはいえ、そんな途方もない話をしてもなんのヒントにもならないので、もう少し具体的に、デザインのアイデアを出すために普段やっていることを一つ話したい。それは

「このアイデアは他でも応用できる」というものをできるかぎり保存しておくこと

である。

毎日少なくとも30分程度PinterestやDribbbleをさまようって「インプットの時間」を設けるようにしている。そして、「このアイデアは他でも応用できる」と思えるデザインを保存して、アイデアに困った時にすぐに参照できるようにしている。Pinterestではこちらののこちらのボードに保存している。

https://www.pinterest.jp/masatos7/design-idea/

例えばこちらの人間よりも大きなダックスフントを散歩している画像を見て欲しい。

これは結局、「人物やオブジェクトを異常な大きさにする」というアイデアで、ダックスフントに限らず同じ考えは様々な場所で応用できる。

また、こちらのシアトルの風景のなかに文字が埋め込まれている画像。

こちらも結局、「フォントを写真とオブジェクトの裏に配置する」というアイデアで、こちらもフォントを写真に載せる時に、少し個性を出したい時など応用できる場面はたくさんある。

このように、他でも応用可能なアイデアをひたすら集め、機会があれば使うようにしている。

アイデアとは「あるときふと頭に浮かぶもの」と考える人も多いかもしれないが、僕にとってはそれは、毎日のインプットの積み重ねによって成し遂げられることである。いいアイデアも一度見て感心するだけでなく、繰り返し眺めて、繰り返し使って、初めて自分のものになるのだ。

今回転職をするにあたって、20社ほどのIT企業やスタートアップの採用担当者と話を聞いた。そんななか驚いたのは、多くのスタートアップがデザイナーの探し方がわからないということ。探し方がわからないだけでなく評価の仕方、そして自分たちにフィットするのがどんなデザイナーなのかがほとんどイメージできていないということ。

まず、デザイナーを探している企業の担当者に知って欲しいのは、

高いデザイナーが、優れたビジュアルデザインをするわけではない

ということ。

また、

デザイナーはいくらもらえるかよりも何ができるか

にずっと興味があるということ。

簡単にデザイナーの種類を思いつく範囲で整理すると次ようになる。

30代後半から40代前半のデザイナーは、Webの黎明期で乱立する小さな制作会社で、デザイン、コーディング、プログラミングなどすべてをこなすことを強いられたWebクリエイター出身者か、DTP等の紙媒体を専門としてきてWebに転向したDTP&Webデザイナーのとちらかだろう。

Webクリエイター出身者は全体的に広くこなせるが、ビジュアルデザインの質はそれほど高くはない。一方でDTP出身はビジュアルデザインの質は高いがプログラムなどに対する苦手意識は強い。

Web業界が大きくなってから入ってきた30代前半までのデザイナーは、ビジュアルデザインを作る「デザイン部」、HTMLのコーディングやJavaScriptを組む「マークアップ部」、PHP等のコーディングを行う「開発部」というような、分業制のなかで経験を積むことが多いのでWebのビジュアルデザインで経験を積んでいることが多い。その過程ででHTML、CSSのコーディング程度は出来る人間もいるだろう。

UXという言葉が全盛の時代に業界に入ってきた20代のデザイナーは、ユーザー調査などの上流工程に関わるUXデザイナーか、アプリなどのデザインと比較的簡単なHTMLコーディングをこなするUIデザイナーのどちらかに別れる傾向があるようだ。

このようにIT業界に限って見ても世の中にはいろんな「デザイナー」がいるのである。自分たちの会社で求める人物像をはっきりさせないで採用を始めても、結局ミスマッチとなり、お互いに無駄な時間を費やすハメになるだろう。

もし、知り合いにデザイナーがいたり、知り合いの会社のデザイナーに話を聞けるなら、そのデザイナーに、どうやって自分たちの求めているデザイナーをさがせばいいか聞くのが一番いいだろう。

僕自身もデザイナーの採用をすることはあるが、ポートフォリオから採用すべきデザイナーを決めるのは至難の技である。小さな企業であれば、すぐれたデザインをするだけでなく、そのデザインを論理的に非デザイナーに説明する言語化能力を持ったデザイナーの存在は強力な力となる

というわけで結局は

近くのデザイナーに聞く

というなんとも参考にならない答えになってしまったが。間違いなく確実な方法である。なによりもデザイナーはデザイナー同士の繋がりを持っていることが多いし、デザイナーのコミュニティに属していることもある。

世の中には組織の中で唯一のデザイナーとして働く人は多いだろう。そんな人は、エンジニアや社長やプロダクトオーナーと毎日戦いながら、その組織が提供するサービスを優れたデザインにするために孤軍奮闘しているのだろう。そして、弱気になった時ついつい

優れたデザインができないのは
周囲が悪いからだ

と思ってしまったりするのだ。これは悪い傾向である。（笑）

そんな人にとって有益なのは、「他の企業のデザイナーはどのように困難を乗り越えているのか」を知ることではないだろうか。

今日オススメするYouTubチャンネルのHigh Resolutionはまさにそのためのチャンネルである。Pinterest, Uber, Airb&bなどの有名企業のデザイナーたちにインタビューをしており、そのデザインに対する考え方に触れることができる。

1本1時間近くあるので、気軽に見ることができないが、重要な部分だけ短く切ったバージョンもあるようで、気分に応じて使い分けてもいいだろう。自分の場合一人で仕事している時、流し続けていたりしている。

個人的にはSpotifyのデザイナーRochelle Kingのデータドリブンデザインの話が印象的でした。これを聞いてすぐに書籍を購入して、社内にデータドリブンデザインの文化を根付かせ始めた。

もし、英語が苦手で「英語が難しくて理解できない」という箇所があったら個別に質問いただければ説明するので、ぜひトライしてみて欲しい。

UIデザインの手順方法を言葉にするのは簡単ではない。きっと世の中の多くのUIデザイナー、デザイナー同士レビューをしあったりした中で得られるた知識を、無意識に実行しているのだろう。それでも、いくつか言葉にできる考え方はあり、知っているだけで行き詰まった時の助けになる。今回は紹介したいのが僕自身がアクションのための要素（ボタン、入力フィールド）をデザインする中で、意識している考え方である。

それは、ある画面をデザインするとき、その画面のアクションを

・ユーザーがしたいこと
・ユーザーにさせたいこと

のいずれかに分類することである。

例えばAmazonのようなオンラインショップであれば、「ユーザーがしたいこと」は「商品を閲覧する」や「商品の評価を見る」ということで、「ユーザーにさせたいこと」は、「レビューを書く」（コンテンツを増やす）「シェアする」（ユーザーを増やす）などである。

「ユーザーがしたいこと」のためのUIを考えるとき、それはユーザー自身がそもそもアプリを使う目的なので、UIが多少見つかりにくくても、多少使いにくくても成立するのである。（もちろん作る側としての理想は、使いやすく、わかりやすくであるが。）

ところが「ユーザーにさせたいこと」のためのUIは、見つかりにくければまず使ってもらえないし、使いづらければすぐに離脱してしまう。つまり、より目立たせなければいけないのは、後者の「ユーザーにさせたい」行動のためのUIである。ただし、ここで気をつけなければならないのは、「ユーザーがしたいこと」をするためのUIを、「ユーザにさせたいこと」のためのUIが邪魔してしまってはならないということである。なぜなら、それはアプリ全体の不信へと繋がりユーザーの離脱へとつながるからだ。

こうやってそれぞれを1つづつ考えるとひどく当たり前のことに聞こえるかもしれないが、実際には「ユーザーがしたいこと」も「ユーザーにさせたいこと」も複数あることが多い。そんなときも、そのアクションはどちらのアクションなのか、しっかり考えるとあるべき姿が見えてくるだろう。