トレンドは反転を繰り返す

トレンド、つまり流行を知ることはデザイナーに限らず様々なシーンで求められる能力である。個人としても組織としても、早めに流行を知ることができればより早くユーザーのニーズを掴むことができるし、早めに流行に合わせた製品やサービス開発に時間やリソースをかけることができる。

され、では流行を知るにはどうしたらいいのだろう。今の流行を知るのはそれほど難しくはないが、未来の流行を知るにはどうするべきだろう。

UnsplashKrisztian Taboriが撮影した写真

もちろん未来を完璧に予想することはできないが、比較的高い確率で予想することはできる。次の二つの視点で過去を振り返れば、未来もある程度予想可能なのである。

  • 短期的には反転を繰り返す
  • 長期的には良くなる

反転を繰り返すというのは過去の歴史の様々な出来事を振り返ればわかりやすいだろう。アールヌーボー時代の次にアールデコが来たのなどはかなり古い例だが、ここ数十年の動きに限って言えば、UIデザインの流行などは、リアルを追求したスキューモーフィズムの後に、単純化したフラットデザインが来て、その後再びわかりやすさをやや重視したマテリアルデザインへと移っていった流れは高齢といえるのではないだろうか。

そもそもこのような流行の変化はなぜ起きるのか、それは個人や組織が抱きがちな2つの思いに由来するだろう。

  • 〇〇っぽくありたい
  • 〇〇のなかで目立ちたい

立ち上げたばかりの会社を想像するとわかりやすい。彼らが最初にやりたいことの一つは会社の立派なロゴを作ることである。このようなときにロゴデザインは会社のロゴっぽいデザインになる。なぜならしっかりとした会社っぽく見られたいから。これが〇〇っぽくありたいの例である。周囲と同じ行動、つまり右へ倣えは安全を考えたときには論理的な選択なのである。

ただ、右へ倣えは安全のためには正しい選択でも、成功のためには必ずしも正しいとは言えない。なぜなら競合の多い世界では、成功のためには目立たなければならないからである。これが○○のなかで目立ちたいという思いである。

〇〇っぽくありたい人や組織は流行のど真ん中を狙う一方で、〇〇のなかで目立ちたい人たちは流行からあえて外すのである。

しかし、流行からあえて外した人や組織が成功者として認知されると、その後大多数がそれに倣うこととなるのだ。このようにして流行は反転を繰り返すのである。

ただし、同じ箇所を行ったり来たりしているわけではない、反転を繰り返す過程で、本当に不要なものは少しずつ削ぎ落とされ、時代や文化のなかで新しく必要になっった要素が少しずつ取り入れられていくのだ。これが長期的には良くなる理由である。

こうやって様々な世の中の出来事を振り返ると、5年後、10年後、どんな方向に向かうか予想ができるのではないだろうか。

ムードボードの力

デザイナーとしてもっと早く知っておきたかったことは何か?と聞かれたら、迷わずムードボードの使い方と答えるだろう。これを聞いて同意できない方はきっとムードボードを使い方やその秘めたる力を知らないのではないかとさえ思う。

Fiona Murrayによる写真: https://www.pexels.com/ja-jp/photo/17789974/

ムードボードとは何か。定義するなら、向かうデザインの方向に近いデザインを集めたものとなるだろう。

基本的に僕が勧めるムードボード作成は、依頼主と一緒に作るものであり、流れは次のようになる。

  • 1.デザインの言語化
  • 2.ムードボード作成
  • 3.デザインの再言語化
  • 4.ムードボード調整
    以降3, 4の繰り返し

最後の3.デザインの再言語化と4.ムードボード調整は、精度がこれ以上上がらないというところまで繰り返すといいだろう。長くても1時間程度で終わるはずである。場合によっては、通常の向かうべきデザインを集めたムードボードだけでなく、惜しいムードボードも作るといいだろう。自分がかなり高い形でこちらも用意する。

惜しいムードボードとは向かいたいデザインから際どく外れたデザインを集めたものである。ムードボード作成・調整のためにデザインを収集している際に、依頼主から「近いけどちょっと違うかな」みたいな言葉で却下されたデザインがここを集める。さらにその際、ストライクゾーンからどの方向になぜはずれているのかを確認するといいだろう。そうすると、ちょっと女の子っぽすぎる、とかちょっと色使いがおとなしすぎる、とか意見が出るだろう。

最終的にこのような流れを経て、ムードボードと場合によっては惜しいムードボード(実際にはGoodデザイン、Badデザインと名付けてしまうことが多い)が作成できればムードボード作りは完了である。

ちなみに僕自身はこの作業をPinterestを使用して行うことが多い。選択したデザインと近いデザインを表示してくれて、コメントもつけられるPinterestはムードボード作りに大変役立つツールである。

ムードボード作りのメリットは2つある。

  • 1.デザインを作らずにデザインの方向性を高い精度で確認できる
  • 2.依頼主の中のデザインを固める

1は言うまでもないだろう。言うまでもないことだが、ムードボードを作らないと無駄に却下される案作りに時間を費やすことになり、僕自身も昔はそんな無駄デザインをたくさんやっていたし、今でもやっているデザイナーは多いだろう。

ただし、むしろムードボードの効果として多くの人が見過ごしがちなのは2の依頼主の中のデザインを固めるの方である。そもそも依頼主は非デザイナーであることが多く、作りたいイメージがデザイナーが思っている以上にぼやっとしたまま依頼していることが多い。

ぼやっとしているからこそ、かっこいいデザインに出逢ったら「カッコイイデザインにしてほしい」と言いたくなるし、かわいいデザインに出逢ったら「かわいいデザインにしてほしい」と言いたくなるのである。

ムードボード作りは、そんな依頼主のぼやっとしたイメージを少しでも具体的な方向へ固めるためにこそ最高に力を発揮するツールなのだ。

クライアントの言うことがころころ変わる、というのはよくデザイナーが口にする不満だが、そんなときは依頼主が悪いから良いデザインができない。と嘆いて投げ出したり適当なデザインを出すべきではない。ムードボードを使ってデザイナーがうまく依頼主を導ければその問題は解決するのである。

「早めに取り組む」は不幸を招く

UIデザインはエンジニアとの共同作業であり、多くの場合デザイナーがデザインを作り、それをエンジニアが実装するという流れで進む。しかし、常にエンジニアとデザイナーの作業量のバランスが取れているわけではない。

悩ましいのはエンジニアが忙しいが、デザイナーの手が空いている時である。そんなときありがちなのが、

実装は先になってしまうが、先にデザインだけ作っておこう

という展開である。リソースを有効利用しているように聞こえるこの提案は、残念ながら多くの場合、不幸しか招かない

Andrea Piacquadioによる写真: https://www.pexels.com/ja-jp/photo/3807738/

問題は、そのデザインを作るデザイナーもそのほかの関係者も、このデザイン作業を急ぐ必要がないということをわかっているという点である。デザイン作業に限ったことではないが、効率よく作業を完遂するために適度な締め切り設定ほど重要なものはない。締め切りまでの時間が短が過ぎれば成果物の質を落とさざるを得ないのは明らかである。

しかし、逆に締め切りまでの時間が長ければ良いかというとそんなことはない。個人としても組織としても必要以上に修正や試行錯誤を繰り返すこととなるだけである。結果、リソースの無駄遣いだけでなく、デザイナー自身のモチベーション低下にも繋がることさえある。

最悪の場合、せっかく作成したデザインがお蔵入りすることもある。なぜなら実装の目処が経った頃には、デザインしたときとはビジネスやサービスの状況が変わっていて最初から考え直さなければならないこともあるからである。

デザイン作業とは発散と収束を経て完成になる。時間があればいくらでも発散することができるが、その一方で永遠に完璧には辿り着けないのもデザイン作業の特徴である。時間をかければ良いものができる、というのは間違ってはいないが、気をつけなければいけないのは、費やした時間に比例してデザインがよくなるわけではないということだ。

結局、作成したデザインが望んだ効果を生むかは、リリースするまで誰にもわからないのである。時間をかけ過ぎずに適度なタイミングでリリースするべきなのだ。

では、デザイナーの手が空いて、エンジニアが忙しい時、デザイナーは何をすべきか。そんなときこそ、デザインシステムなどのデザイン環境の整備や、社内へのデザイン文化の布教活動に時間を使うべきである。

デザイン本の使い方とデザイナーの語彙力

どこの書店にもデザイン関連の本を扱ったエリアがある。大部分が簡単に見た目を良くするための工夫だったりと、どちらかというとデザイン初心者向けの本で、ターゲットとなるのはせいぜい5年程度までのデザイン経験を持つデザイナーか、またはちょっとデザインをかじってみたい非デザイナーだろう。

どれも一冊1,500円から2,000円程度するので、デザイナーになりたての頃は頑張って買って読んだかもしれないが、デザイナーとして経験を重ねるに従って、内容も知っていることばかりになるので、次第に遠ざかっていくことだろう。

Büşra Karabulutによる写真: https://www.pexels.com/ja-jp/photo/30383406/

しかし、初心者を脱したかけたデザイナーにこそ、このようなデザイン本をこれまでとは異なる視点で読むことをお勧めする。なぜなら、デザイン書籍には、デザインを説明するための言葉が詰まっているから。

そもそもデザイナーの求められる能力とは何か。デザイナーとして最初に求められるのはもちろん一般的なデザイン作成能力、つまり見た目を良くする能力である。そして、その後、経験を積むに従って徐々にビジネス目標とデザインをより密接に関連づけるための橋渡しとしての役割も求められていく、つまりデザインを非デザイナーに説明するコミュニケーション能力である。

ここでデザインを説明する語彙が必要性が強くなってくる。デザインに限った話ではないが、「伝える」とは、自分の言葉で語ることではない。相手の理解しやすい言葉を選んで感覚的に理解させることである。そのためには自分の説明スタイルを一つ持っていて常にそのスタイルを貫いたところでまったく意味はない。言葉や表現を相手や状況に応じて使い分けなければならないのだ。

そんなデザインを表現するための語彙がデザイン本には詰まっているのである。デザイン本を見ながらデザインでなく言葉を覚える、という矛盾した行為だからこそ見過ごしがちであるが、ぜひデザインコミュニケーション能力向上の手段として選択肢に入れていただきたい。

テンションのあるデザイン

デザインを考えるときにデザイナーは常にバランスを考える。形のバランス、色のバランスなど、バランスはデザインを始めると最初に意識することと言ってもいいだろう。バランスをしっかり考えるからこそ綺麗なデザインが出来上がるのである。

しかし、残念ながら良いデザインとはバランスの良さだけで成り立つものではない。もちろん、それは何をどんな目的でデザインするかによって大きく変わる。例えば、毎日触れるようなアプリのUIであれば、綺麗でシンプルなデザインの方が飽きず長く使ってもらえるだろう。一方で、わずかな接点から行動を起こさせるバナー広告などは、綺麗でバランスが良いだけではなかなか記憶に残らない、もちろん結果にもつながらない。

そこで考えるべきがテンションである。バランスだけでなくテンションを使いこなしてこそ良いデザインを生まれるのだ。

テンションを一言で説明するのはなかなか難しいが、人間はどんなときに行動を起こす必要性を感じるか、つまりどんなときに焦るかを考えるとわかりやすいだろう。それは誰かが怒ったり泣いたりしているとき、何かが倒れたり崩れたりしようとしているときである。

自分が最もテンションの説明としてわかりやすかったのは次のようなものである。

バランスは良いがテンションがない
バランスは良くテンションもある
バランスは良いがテンションがない
バランスは良くテンションもある

テンションとバランスの違いが伝わっただろうか。

こちらの記事ではテンションという言葉を使ったが、動きのあるデザイン物語(ストーリー)のあるデザイン、などの言葉も同じようなことを指すと考えていいだろう。

デザインを作る際、今作っているデザインにテンションがあるべきかテンションが込められているか、を常に考える癖をつけるといいだろう。

デザインレビューのマインドセット

最近はデザインレビューという文化が浸透してきた。未だデザインレビューが浸透していない組織においても、上司や他のデザイナーから自分の作ったデザインのフィードバックの指摘を受ける機会はあるだろう。それはデザイナーとして生きている限り、デザイン力向上のためには避けて通れない時間である。

Christina Morilloによる写真: https://www.pexels.com/ja-jp/photo/1181346/

このフィードバックの時間が怖いデザイナーがいるようだ。自分の過去の同僚の中にもデザインの改善点や感想を述べただけであからさまに不機嫌になったデザイナーは何人か思い浮かぶ。限られた進歩の機会を自ら潰しているそんなふるまいはもったいないの一言に尽きる。そんなデザイナーへのアドバイスはこうである。

自分のデザインから自分という存在を切り離せ

デザイン力の自信のなさからくる部分ももちろんあるだろうが、自分とデザインを密接に関連させ過ぎているからこそ、デザインの改善点や懸念点の指摘を、自分自身の否定と受け取ってしまうのである。

デザインレビューの時間にやるべきは、他のメンバーと一緒に目の前のデザインがより良くなる道を模索することなのである。さらに付け加えるなら、改善点や懸念点は一つの意見であって絶対的なものではない。必ず従わなくてはならないものではないということ。つまり、それは

自分が手に入れた新たな選択肢

なのである。ということはどういうことかというと、その時間に得られる考えは自分がデザイナーとして成長する宝の山なのである。そう考えるとデザインレビューが恐怖の時間ではなく、楽しみな時間になるのではないだろうか。

年齢とともに組織内で少しずつ立場が上がってくると、周囲の人間も若かった頃よりもデザインのフィードバックを与えづらくなるもの。そうなると当然上達も頭打ちになる。どのように自分からフィードバックを取りに行くか、上達の手がかりを探しに行くかがデザイナーとして向上し続ける人と成長が止まる人を分ける鍵となる。ぜひ、貴重な機会をプラスに利用してほしい。

バーティカルリズム Vertical Rhythm

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

文字のベースラインも4px(図の線は8pxグリッド)グリッドに沿わせることができる

水平方向に対しては多くのデザイナーが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の指定でわかるのである。

優れたデザイナーは「線」を使わない

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

Photo by Damir Omerović on Unsplash

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

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

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

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

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

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

デザインマニュアル1 目的の定義

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

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

Photo by Charles Deluvio on Unsplash

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

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

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

○○が〇〇する

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

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

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

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

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

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

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

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

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

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

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

授業の魅力を知り興味がわけばタップする。
授業の受講の可否を知り受講できるならタップする

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

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

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

デザイナーに英語は必要か?

デザイナーに英語はあまり必要ないという印象を持つ人が多いかもしれません。英語の有用性は多くの人が理解していたとしても、デザイナーは主に視覚的な制作物を扱う職業なので、英語はあまり使わない、と思うのではないでしょうか。

しかし、視覚的だからこそ、国や文化に関係なく通用し、だからこそ日本の情報からしか学ばないのはもったいない。デザインを英語で学んでいる人と、日本語だけで学んでいる人では圧倒的な差ができてしまうのです。

Photo by Annelies Geneyn on Unsplash

もちろん日本のフォントは日本語でしか学ぶことはできないでしょう。そのほかにも、日本の習字や水墨画など、日本でしか学べないものも確かにあります。

また、どちらかというと日本はデザイン後進国だということも、英語を使えた方がいい理由の一つです。つまり、あなたがデザイナーとして悩んでいることは、すでにデザイン先進国でたくさんの人が悩み、そしてそのうちの何人かは解決策を知っているのです。英語を知っていればその解決策はインターネット上や洋書で見つけることができるかもしれません。

ちなみに、日本でヒットしたテレビ番組や、インターネットサービスや、YouTubeのチャンネルの多くは、もともとは海外でヒットしたものを、日本で広めただけだって知っていましたか?

僕は、ロゴデザインを教えたりしていますが、海外のデザイン講座で学んだものを自分なりに練習して、日本語で言語化して伝えているだけなのです。つまり、英語で世界の情報に触れている人は日本語の情報にしか触れていない人に価値あるコンテンツを提供することができるのです。

もちろん、言語をマスターするにはそれなりの時間が必要なので、人それぞれの価値観次第ですが、昔と違ってインターネットを利用するとかなり安い費用で身に付けることができます。28歳のときに英語を勉強し始めて、英検1級、TOEIC970の僕の感覚からコツを伝えるとするな、何時間勉強するかよりも、毎日少しの勉強を何年続けるかなので、始めるなら早ければ早い方がいいです。

ちなみに僕は、8年ほど前からLynda.com(今はLinkedIn Learning)、そして今でもSkillshare.comで毎朝1時間ほど勉強しています。日本のデザインのなかでは聞いたことなかったテンション視線移動配色はこちらで学びました。最初は聞き取るの大変で速度を遅くして、途中は止めて、スクリプトをみたりして理解していましたが、最近はプレゼンターの英語のくせにもよりますが1.5倍速で聞いたりしています。結局慣れだということですね。