UIを4つの構成要素（レイヤー）に分類してレビューしてみてる。
情報発信をすると決めてから半年、まずはTwitterで細切れに発信をしてきましたが、そろそろネタも溜まってきたのでnoteをはじめます。
SEREAL（シリアル）は「世の中を変えるデザインをする」をビジョンにしていて、スタートアップや新規事業のデザインパートナーとして活動しています。僕はUI/UXデザイナー、サービスデザイナーとしてプロジェクトにジョインすることが多いです。
仕事柄UIデザイン（アプリやWEB）のレビューをすることが多いのですが、ここ最近はインターン生によるUIデザイントレーニングがはじまったこともありレビューの回数が爆増しました。この毎度のレビューで自分がずっと感じていた問題は自分の指摘部分がUI全体のどの部分を指しているのか相手が理解ができない、個別で指摘した部分ははよくなっても別のプロダクトで再現できがないということでした。
そんな問題の解決になればいいなと思い自分がUIをレビューしているときに見ている要素を5つのレイヤーに分類してみました。
1. UserStory（ニーズ）
ユーザーストーリーはユーザーの行動、ニーズを設計するレイヤーです。
ユーザーストーリーに関して説明すると長くなってしまうのでまた別の機会に詳しく説明しますが、もともとアジャイル開発で使われる言葉で、カスタマージャーニーの中で起きるユーザーのタスク（要求）を「誰が Who」「何を What」「なぜ Why」で定義していきます。
例 : 小学生が店頭で目的の本を簡単に本を見つけられるようにする
ユーザーストーリーがわかりにくい方は（偉い人に怒られそうですが）ユースケースと思ってもらうとわかりやすと思います。
シリアルではユーザーストーリーの作成はサービスデザイナーが行いますが、UIをレビューする際はUIデザイナーがユーザーストーリーを考慮しているか画面ごとにその設計意図を確認します。
UIデザイナーやWebデザイナーのほとんどはこのレイヤーの視点に欠けることが多く、僕もレビューで伝えるのに苦労する部分でもあります。スタートアップでデザイナーをしている方、CEOに「UIはいいけどなんか違う」と言われて困った経験はないですか？そんな時はユーザーストーリーを見直してみるといいかもしれません。
2. Feature(機能)
プロダクトの機能を設計するレイヤーです。ユーザーストーリーと機能は主従関係にあり、すべての機能はユーザーストーリーの要件を満たすために存在します。
例 :（UserStory）小学生が店頭で目的の本を簡単に本を見つけられるようにする（Feature）ひらがなでのフリーワード検索機能
機能設計も基本はサービスデザイナーが行いますが、細かい仕様の設計やUIへの落とし込み（下記 Layout & Interaction）はUIデザイナーが担当することが多いです。レビューではユーザーストーリーの要求にあわせた機能設計ができれいるかを確認しています。
3. Structure(構造)
アプリやサイト全体（サイトマップ）の設計を行うレイヤーです。ほとんどのプロダクトは複数の画面を必要とされるのでそれぞれの画面への導線設計はユーザビリティを高めるために重要です。
このレイヤーをレビューする際に一番注視するのはナビゲーションの設計です。プロダクトは複数のストーリーで利用され、それぞれが一セッションで同時に行われることもあります。（料理を撮影して投稿するなど）どのようなユーザーストーリーを想定しているか、それぞれが実行しやすい導線、ナビゲーション設計になっているか確認します。
4. Layout & Interaction
各画面それぞれのレイアウトやインタラクションを設計するレイヤーです。
画面単位で目でみえるので、人間が認知しやす部分です。一般的にUIデザインというとこれ以降のレイヤーのことを指していう方が多いいのではないでしょうか。
レビューでは各画面ごとの役割（ユーザストーリー群）を決めているか、またその役割にあった機能が最適なレイアウト、インタラクションで表現できているかを確認します。
またそれとは別にOSのガイドラインに則ったものか、デファクトスタンダートからはずれたものでないかも確認しています。
5. Visual
ビジュアルは情報の視認性を上げたり、世界観を出すために重要なレイヤーです。
レビューでは世界観が出せているか、ブランドの統一はできているか、視認性はいいか、一般的に美しくできているかなどを各要素ごと（配色、ジャンプ率、マージン、フォント、フォントサイズ、アイコンの統一など）にチェックています。
いかがでしたか？
今回はUIのどの部分の議論かを明確にしするためにUIを5つのレイヤーに分類してみました。レイヤーを分けてのレビューは現在運用中なので効果や改善点があればまた共有しますね。
おまけ
かなりハードルを上げてインターン第2期生の募集をしようと思います。ハード目なレビューを受けながら短期間でUI/UXデザイナーを目指したい方はTwitterでDMください。どんな人がいいかはTwitterでちょいちょいつぶやいているのでそちらを確認してみてください。それでは！
この記事が気に入ったらサポートをしてみませんか？