エンジニアデザインをリファクタしてみた

はじめまして。デザイナーの金井です。
マネーフォワードでの業務内容は、デザイン全般・飲み会要員・社長の心のケアなど、幅広い守備範囲を誇っています。

ブログ編集長からエンジニアブログ寄稿命令依頼を受け、「エンジニアじゃないのにエンジニアブログか困ったなー」っということで、社内のエンジニア衆にネタを募ってみたところ、「金井さんに”エンジニアデザインｗｗ”ってdisられるけど、何が悪いのか分からない。どうしたら良くなるのか分からない。」という声が！！！

（※弊社における「エンジニアデザイン」とは、エンジニアが各自のデザインセンスを総動員して、レイアウト＆機能実装を行ってしまった画面を指します）

そんなわけで、悩めるエンジニアのために、カンタンに“レイアウトのコツ”をご説明させて頂きます！

デザインの「4つの基本原則」とは

ところで、ノンデザイナーズ・デザインブックという本をご存知でしょうか？
非デザイナーに向けた、デザインの基本ルールを教えてくれる教科書的存在の本です。

本稿では、こちらに載っている「デザインの4つの基本原則」に沿って説明したいと思います。
「4つの基本原則」
・整列
・近接
・コントラスト
・反復　

まず「整列」と「近接」で要素の整理

では、まずこちらを見てください。

■Before（エンジニアデザイン）

＊当時のキャプチャーなので、現在とは機能が違います。

仕訳一覧リストの上部に「検索」と「一括編集」の機能があるようです。
が、要素がごちゃっと詰め込まれてしまって、何をどう操作すればいいのか、ユーザーは一瞬考えてしまいそうです。このままだとユーザーに対する負荷が高いので、まず要素の整理をするべく、「4つの基本原則」の「整列」を適用してみます。

「整列」は、ざっくりと乱暴に言うと、秩序を作るために基本のラインを定めて、そのラインに合わせて要素を配置しましょうということです。

操作系のボタンの位置を、キレイに揃えてみます。
・・・うーんこれだけじゃまだ雑然としたままなので、次は「4つの基本原則」の「近接」を適用してみます。

「近接」は、これまたざっくり乱暴に言うと、要素・情報をグルーピングしてまとめましょうということです。ここでいうと、「検索項目」のグループと、「一括編集項目」のグループに分類されているので、もっとグループ化を分かりやすくするために、見出しを付けて区切ってみます。

■After

これで、ユーザーは「検索」と「一括編集」が出来ることが分かりやすくなったのではないでしょうか？
ごちゃごちゃしてしまった場合は、まず「近接」と「整列」で要素を整理してみることがオススメです。

※ちなみにコレは“レイアウト”のセオリーであって、“UI”という観点になってくると話はまた変わってくる場合があります。
（デザイン的に右寄せがキレイでも、この機能の使いやすさ的には「連続して入力してる前提だから入力項目のそばが使いやすい」など）

「整列」と「近接」したら、「コントラスト」で差別化する

では、次にこちらを見てください。

■Before（エンジニアデザイン）

キャーーーーーーーーーーー
（実際に見た時のリアルな反応）

エンジニアのみんなは、コードも、考え方も、机の上も、あんなに理路整然としているのに、ひとたびデザインとなるとナゼこんなに散らかってしまうのか。
このままじゃ、ユーザーはどこをどう見て良いのか悩んでしまいます。

さきほどの「近接」と、「コントラスト」を使って整理してみましょう。
繰り返しになりますが、「近接」は、要素・情報をグルーピングしてまとめることです。ここでグループ化できそうなのは、表組みの「項目」と「内容」になりそうです。

さらに、「コントラスト」でそれぞれのグループのプライオリティを分かりやすくします。
「コントラスト」は、要素に大きな差異を作ることです。項目を差別化することに有効です。

■After

項目部分に背景色を敷いて、内容部分とのコントラストを付けています。
文字の折り返しに気をつけることや、表のセルの中にマージンを取ることなどは「整列」に含まれます。

まとめ

長くなってしまったので、4原則の「反復」に関してはまたいずれ機会があったら書こうと思います。

このように、特別なセンスやテクニックを持っていなくても、大まかな基本ルールを知っておくだけで、だいぶレイアウトが見やすく分かりやすくなるはずです。

「ノンデザイナーズ・デザインブック」は今まで読んだことがなかったのですが、今回ブログを書くにあたって、いつも華麗なエンジニアデザインを披露してくれる某エンジニアから拝借して読んでみました。

デザインの基本ルールが抑えられると思うので、社内デザイナーに笑われて密かに傷ついているエンジニアの皆さんは、良かったら一度読んでみてください！

エンジニア・デザイナーの方へ

マネーフォワードでは、各種エンジニア、デザイナーを募集しています。
エンジニアデザインをボコボコにDisられたいエンジニアの方、クソUIエンジニアデザインを片っ端からリファクタしていきたいフロントエンド＆デザイナーの方は、ぜひ一緒に働きましょう。
（注：現場はとても和やかです）

マネーフォワード採用サイト
https://recruit.moneyforward.com/