いつも初心を忘れない!デザインの質を確実に上げるための制作フロー

img_kame_01

 

はじめに

この記事は「UI Design Advent Calendar 2015」へ寄稿した記事です。
http://www.adventar.org/calendars/987

 

今回は「UI Design」がテーマということで、私が普段CouplesのUIデザインを作成するにあたり、どういうフローでアウトプットを導き出しているか、自分自身の思考の整理も兼ねてまとめてみました!

 

考えるステップは大きく3つあります。

  1. 目的理解
  2. 必要な要素の分解・重要度付け
  3. UIパターン当てはめ・組み立て

この3ステップで考えを整理し、いつもUIを作成しています。

 
 


 
 

詳しく説明していくにあたり、具体例があった方がわかりやすいと思いますので、今回はCouples内に存在する「ギフト機能」が「50%OFFで利用できるキャンペーン」の架空お知らせをページを作成するフローに沿って進めます。

 
 

1)目的理解

まず行うことは、その画面 / 機能 / LPを作成することで達成したいゴール、つまり「目的」は何かを理解します。

 

今回で言えば、

「ギフト機能が50%OFFで利用できるキャンペーンが始まることを利用者に伝える」

となります。

 

例で用いている題材の目的がシンプルなのであまり難しく感じないと思いますが、この「目的」の部分を一番重要な軸として明確化させておかないと、適切なアウトプットはできません。

 

目的を理解していない状態でデザインを作ることなんてあるの? と思われるかもしれませんが、「目的を理解してUIデザインを作成する」というのでは不十分で、目的を達成するためのUIデザインを作成する、という意識のもと、プロセスを組んで行かないとアウトプットに大きく差が出ると考えています。

 
 

2)構成要素の洗い出し

次に、目的を達成するために必要な構成要素を、重要度を意識して書き出します。
この時に意識しているのは、要素をグルーピングして、親項目・子項目の階層関係を明確にすることです。

 

では実際に書きだしてみましょう。

 

-ナビゲーションバー -メインタイトル領域   -概要の伝わるメインコピー:ギフトが50%OFF   -開催期間   -キャンペーン説明 -大見出し:キャンペーン詳細   -小見出し:対象商品     -商品カテゴリ1     -商品カテゴリ2   -小見出し:注意事項   -小見出し:利用方法     -方法その1     -方法その2 -フッター:ロゴ

 

これを行うことで、上の要素を元に、「同じ種類の要素はデザインに統一性を持たせる」「異なる要素はデザインに差を持たせる」といったように作業の進め方がシンプルになります!

 

逆に言えば、適切なデザインアウトプットに時間が掛かっている場合というのは、上のまとめにおける要素の洗い出しに漏れがある、階層関係を正しく認識できていないことが原因になっていると私は考えています。

 

3)UIパターン当てはめ・組み立て

ここからようやくデザインを考える段階に入ります。
考え方としては、書き出した各要素に対して、それぞれ考えられるUIのパターンを当てはめていくイメージです。

 

少しわかりやすく表にしてみました。

 

img_kame_3

 

あとは各項目に対して、自身の脳みその中のデザインの引き出しのアウトプット、もしくは参考をひたすら調査して、UIパターンを当てはめていきます。

 

こうして考えられるUIのパターンを出したらそれを参考に、あとはパズルの感覚でテイストの合うデザインを組み合わせて作り上げていって完成です!

 

img_kame_04

 

ちなみに若干話は逸れますが、日々どのようにインプットしているかというと、参考になるサイトやアプリをひたすらキャプチャを撮って保存し、UIパターンを覚えるということをしています。

(過去に公開したスライドはこちら)
デザインは設計。パターンを覚えることが重要で、それが必勝法だと考えています。インプットあってのアウトプット!

 
 


 
 

おわりに

今回の内容以外に考えることとして「デザインのテイストはどうするのか」ということももちろんあるかと思います。ただそれは根本として、今回の内容であるUI / 情報構成が正しくなされた上に乗せていく付加的要素であり、別軸を立てて考えることだと考えていますので、そちらはまた次の機会にでも。笑

 

多くのデザイナーの方にとっては当たり前な内容だったかもしれませんが、今回まとめさせていただいたように、頭の中の感覚だけで目的 -> 構成 -> デザインを考えるのでなく、それを箇条書き、表、形式はなんでも良いので実際に順序を踏んで書き出すこと、これだけでアウトプットが変わってきます!一度試してみてはいかがでしょうか。私も初心を忘れず、今後も続けていきます!

 

最後までお読みいただきありがとうございました!

  • このエントリーをはてなブックマークに追加

エウレカでは、一緒に働いていただける方を絶賛募集中です。募集中の職種はこちらからご確認ください!皆様のエントリーをお待ちしております!

Recommend

【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】

SlackのSlash CommandsをApp Engineで稼働させる