How IT Works

プログラマーやっています。技術よりも人間学的なところが好きです。

デザインとの邂逅

デザインとどう触れ合ってきたか

前の仕事

前の仕事ではデザインは一緒に働いていたエンジニアが主にやっていました。

やりかたはたぶん似たようなデザインのサイトを探してきて、それに近い構図、テーマ、配色を持ってきて、それを微妙にアレンジするという感じでした。

自分はたまに色についてだったり、配置するコンポーネントの種類について聞かれて答えているぐらいで、興味もほとんどなかったです。

バックエンドだったり、フロントエンドのデータのフローをどうやってきれいに設計するかというのが好きでそちらにのめりこんでいました。

今の仕事

デザイナーとの出会い

そんな感じの人間なのになぜかフロントエンドが仕事の中心になっていて、デザイナーと一緒に仕事することになりました。JavaScript自体は好きなので、何とかうまくはやれるだろうと思っていました。

最初のデザイナーとの話し合いは確か、ダイアローグの余白と文章の見せ方がこれでいいかというもので、普通に中央寄せと余白を12pxぐらいとっておいてぐらいの助言をもらいました。

そこまで細かく見るんだと思いながらも、前のエンジニアもそれぐらいは考えていたので、正直なところこの時点ではデザイナーのすごさが実感としてありませんでした。

デザインシステム

そのあと、デザインシステムを本格的に作ろうというプロジェクトに入りました。

既存のデザインを色んなコンポーネントに落とし込んでいたのですが、細やかさの極致でした。

  • フォーカスが入った時の挙動や、アクティブな挙動をすべて設定する
  • 余白を何段階にも設定する(余白のpxも必ず8の倍数)
  • コンポーネントの丸みも統一する
  • 似通った色を統一しつつ、近い色でインタラクティブな挙動を定義する
  • 使うアイコンの線の太さ、角度、雰囲気、余白を統一する
  • PCとモバイルでフォント周りの設定をすべて切り替える

このうち一つ二つは前職でやった可能性はあったとしても、すべてを統一しようとは間違いなく考えなかったと思います。

これを見ると、自分はデザインしていたんじゃなくて、見た目で思い付きで整えていただけだったんだなぁと感じ、デザイナーすごい!という思いが出てきました。

ブランドイメージ

自分はまだ関わっていないですが、デザイナーたちの話のなかで、ブランドイメージの話がよく出てきます。

サイト全体をこういう風に印象付けたいから、ここはこうしたいとか。この画面ではこういうことをしてほしいから、こういうUIにすべきだみたいな話です。

先に書いたように前の仕事では何となく他のサイトの見栄えをまねしているだけで、統一感はあったものの、目的意識はありません。

ただ、コンポーネントをきれいに配置しているだけで、上から考えるのではなく下から考えている気配が強いかったんだなぁと今になって感じています。

デザインの勉強

デザインの方法

周りのフロントエンドエンジニアは結構UIに意見を言うことが多かったのですが、自分は思いついたことを言えませんでした。なぜかというと、何が正しいのかがいまいちわかっていないので、説得ができなかったからです。

だから、基礎的なところから本を読み直しました。

読んだ本

ここら辺の本を読みました。

『ノンデザイナーズ・デザインブック』は構図の整列の仕方だったり、強調の仕方だったりを教えてくれます。デザインの初歩の初歩にはいい本でした。

フラットデザインで考える 新しいUIデザインのセオリー』はコンポーネントの目的だったり、思想を教えてくれる本で、ちょうどプログラマにとってはわかりやすかったです。

『インタフェースデザインの教科書』はユーザーはどういうふうにUIを見るかという心理学的な話がまとまっていて、抽象的ではありますが、UXって何?というところが少し感じられるようになりました。

ノンデザイナーズ・デザインブック [第4版]
Robin Williams
マイナビ出版 (2016-06-30)
売り上げランキング: 1,305

デザインの思想

問題意識

デザイナーの手法とか考え方がずいぶんわかってきたなぁという段階になりました。その折に、GoogleMaterial Designガイドラインを見るといいよと言われたので見てみました。

material.io

それで事例みたいなものを見ていたのですが、驚きました。

ナビゲーションの遷移の発想と美しさ、コンポーネントの造形、配色しかたのどれをとっても自分に作れるとは思えなかったからです。

下のようなUIの事例集の本を見ていても、やっぱり自分の頭からこうしたデザインが出てくるのは想像できません。

【新版】UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX
安藤剛 水野勝仁 萩原俊矢 ドミニク・チェン 菅俊一 鹿野護 有馬トモユキ 渡邊恵太 須齋佑紀/津﨑将氏
ビー・エヌ・エヌ新社 (2018-10-19)
売り上げランキング: 13,670

実世界のデザインは基本的なテクニックのはるか先にあるように感じられるのです。

それでデザインに関係しそうな領域の本を色々と読み流しました。

読んだ本

もっといい本があるだろと言われそうですが、自分はデザインとは何かという根本的なところが知りたくてこんな感じのところに手を出しました。

これ以外にも色々本を読んで、とにかくデザインとは?というところについて考えました。

システムの科学
システムの科学
posted with amazlet at 19.05.18
ハーバート・A. サイモン
パーソナルメディア
売り上げランキング: 16,379
欲望のオブジェ
欲望のオブジェ
posted with amazlet at 19.05.18
エイドリアン フォーティー
鹿島出版会
売り上げランキング: 492,016
デザインに哲学は必要か
古賀 徹 板東 孝明 伊原 久裕 山内 泰 下村 萌 シン・ヒーキョン 小林 昭世 池田 美奈子 藤崎 圭一郎
武蔵野美術大学出版局
売り上げランキング: 43,720

デザインとは何か

色々定義はありましたが、例えば「現在ある問題に対する最適な回答」といった定義が印象に残っています。

これに続く言葉は、問題を徹底的に観察して、新しい見方を探し続けること、というものでした。

配色について考えるなら、色を見た時に自分はどういう風に感じるのかを観察し、ユーザーを見るときはユーザーの言葉を聞くのではなく行動、環境を観察すること。

時間が変われば問題は変わり、その時自分はどう感じているのかを観察すること。

そして、それらに対する徹底的な洞察。

これを見た時に知識がないのが問題ではなくて、単に世界のUI、自分の行動、あらゆるものを観察すらしていない自分自身の態度が問題だったのではないかと思いました。

デザインは答えではなくそれを見る人、使う人への問いかけである、そういう言葉も見てとても腑に落ちたような感覚を覚えました。

フロントエンドとデザイン

コンポーネントで考える

何度か書いているようにエンジニアはコンポーネントに画面を分割して作り始めます。サイドにナビゲーションを置いて、こっちはメインで、こっちにはカードを置けばいいかというふうに。

デザイナーの人はそうではなくて、こう考えます。

ユーザーにどういう行動をしてほしいのか、そのためにはどのような感情の起伏をさせればいいのか、そのためにはどういう風にナビゲーションを設置すればいいのか。

その結果、ナビゲーションがいらない場合だったあるかもしれませんし、あるページ内のナビゲーションは他のページのナビゲーションとは違うかもしれない。

ユーザーは誰だろう。料理中だったら、タッチ数を減らしながら操作できないとだめだ、そもそもインターフェースは画面なのか? 音声のほうがよい?

こういう発想の違いは知識としては知っていましたが、最近ようやく共感できるようになってきました。

パーツの種類

Material Designを初めとするUIを眺めていて、色々なテキストボックスを見ました。

背景色が紫、読み込み中に罫線が点滅する、アイコンが中に入っているだけ、hoverで色が全く変わるもの……

こういうものを書き出してスケッチに集めてみると、数10種類はありましたが、自分の中では完全にBootstrapがテキストボックスの代表で、テキストボックスの可能性について何にも考えていないことに気づきました。

コンポーネントは再利用しておけばいいという考えがありましたが、本当にそれでいいのかと考えるようになりました。

生活とデザイン

デザインを勉強し始めて、生活もよりよくなるようになりました。

メモもKeepあたりに適当に箇条書きしていたのですが、スケッチブックを使って強調、配列、アイコン、その他もろもろを使うようになりました。

自分の頭の中をデザインとして整理することで、すごく色々なアイデアが出ますし、問題を分析することができるようになりました。配色の研究にもなります。

家の中もレイアウトや配置に慎重になり、自分の行動に対して一番短い経路にモノを置いたり、ずぼらながらも整理整頓ぐらいはするようになりました。

料理をするときもそうで、何が主役で何をサポート役にすえるかと考えることで、調味料のバランスなどをスムーズに考え付くようになりました。

レーニングも自分の感情の起伏だったり、意味に応じて練習を分類・整理することで自信をもっていいという練習メニューを作れるようになりました。

残念ながらファッションは興味がないのであんまりですが、どうしてこの組み合わせなのかを見ながら考えたりはします。

デザインは生活自体に対する挑戦であり、問いであると思います。

まとめ

デザインという思考を取り入れることでとても新しい世界が開けたようでとても楽しいです。

設計は見栄えでしょうとか、センスでしょう、あるいはもしかしてロジックでやっていけばうまく行くんじゃないかと適当なことを考えていた過去の自分を説教したい気持ちです。

これからもっと自分の思考、自分の考えを見つめ直して、もっと本質的な可能性を問うていくようなそんな生活・思考がして行けたらとてもすてきだなと思います。

デザインの領域はアートだったり、編集だったり、音楽だったり、色々な領域にとびとびで学ぶことも多いですが、その分楽しんで生活できる日が続くんだろうという期待があります。

フロントエンドエンジニアになってよかったなと思います。