つみきでは、様々な業種のクライアントからアプリ、Webサービスのデザインについてご相談を受けます。サービスの機能やユーザー体験を一から相談したいというお話もあれば、すでにあるサービスの機能は変えずに、使い勝手を改善したいというお話しもあります。様々なニーズに応えながら、ユーザーに選ばれ、愛着を生むUIを生み出すために、つみきでは以下のような制作フローを取り入れています。

制作フローは大きく２つのフェーズに分かれます。

1. 調査・戦略・構想フェーズ
2. 設計・デザイン・開発フェーズ

1 - 調査・戦略・構想フェーズ

調査・戦略・構想のフェーズでは、制作するアプリ・Webサービスの目指すべき姿を文章や構造、デザイン案で可視化します。アプリやWebサービスの立ち上げ・リニューアルには多くの人が関わります。クライアント企業の担当者や決裁者、ディレクター、デザイナー、エンジニアなど、普段から異なる視点と責任を持って仕事に取り組んでいるため、認識のズレや議論のすれ違いがしばしば起こります。
プロジェクトの序盤で目指す姿を明らかにすることで、その後の制作での認識のズレや、議論のすれ違いにより時間を浪費することを防ぎます。

1.1 - 分析・戦略立案

このフェーズでは、現状把握から取り組みます。サービスや事業とユーザーを知り、現実と理想とのギャップを認識します。ご相談の内容に応じて手段は異なり、ヒアリングやアクセス解析、UI課題の分析、関係者でのワークショップなどを行います。

例えば、関係者を交えたユーザーストーリーを可視化するワークショップでは、時系列にユーザーの行動を列挙して現状を把握し、課題点や要件を検討します。

1.2 - UXデザイン

UXデザインという言葉が示す範囲は広いですが、ここではユーザーがどのような人で、どのように行動するのか？ユーザーにとって価値があることは何か？についての仮説を立てることに主眼を置きます。必要に応じてユーザーアンケートやインタビューを行い、シンプルなフォーマットでユーザー像を言語化します。

ユーザー像の解像度を高め、欲求や課題を導き出すことにより、コンテンツやデザインの検討材料とします。ここで仮説を立てたユーザー像は、画面遷移図でユーザーが辿る理想的な導線の検討材料となったり、ユーザーテストを行う際の対象者の選定や、デザインを判断する際の判断材料となります。

1.3 - 構造・デザイン案

アプリの場合は画面一覧、Webサービスの場合はディレクトリマップを作成し、完成後のサービスの全体像を明らかにします。画面数や画面の役割、コンテンツや名称など、全体の情報を精査して表にまとめます。画面遷移図では、ユーザーが辿る導線をフロー図形式でまとめます。

合わせて主要な２〜３画面のワイヤーフレームも作成します。サービスの核となる機能や全体に共通するテンプレート、ナビゲーション、各要素の優先順位などを設計します。

デザイン案では、主要な画面を複数案作成します。ブランドやユーザー像を元に、サービスにふさわしい印象をキーワード化し、配色やモチーフ、イラストのトーンなどを具体化していきます。補足資料により、各案の特徴や利点、ユーザーに与える印象を関係者にわかりやすく説明します。

2 - 設計・デザイン・開発フェーズ

調査・戦略・構想のフェーズで、プロジェクトで目指すべき制作物の姿が明らかになりました。設計・デザイン・開発フェーズでは、アプリ・サービスとしての使いやすさ、ユーザーがワクワクしたり愛着を感じるような作り込み、統一感と汎用性のあるデザインを形にしていきます。

2.1 - UI設計・プロトタイピング

各画面での構成要素に加えて、エラー・未ログインなど、異なるステータスでの表示の違いや、操作時の挙動の詳細もドキュメントとして記述します。全体の画面フローや操作感を確認するために、各画面をつなぎ合わせたプロトタイプも作成します。

2.2 - UIデザイン・インタラクションデザイン

UI設計を元に各画面のデザインをSketchやXDなどのUIデザインツールで作成します。各画面や状態変化を静止画として作成し、ボタンなどの状態変化を伴う要素をパーツ単位で作成したり、必要に応じて複数画面サイズでのレイアウトの変化を定義します。

また、アプリの使い方を動画で説明したり、ボタンを押した際の反応にアニメーションを取り入れたり、静止画では表現できない「動き」はアニメーションモック、インタラクションモックとして作成します。目的に応じて動画ファイルとして作成したり、XDやProtoPieなどのプロトタイプツールを使用します。

2.3 - 開発

社内で開発を行うケースは少なく、開発パートナーの企業や、クライアントから依頼をした他社の開発会社が担当することが多いです。デザインまでをご依頼いただく場合にも、デザインの汎用的なルールや意図、画面サイズ、OSの違いに応じた差異をスタイルガイドとしてまとめたり、コミュニケーションツール上でのやりとりで伝え、開発する上でのデザインの再現性をサポートします。

----

つみきでは、このような制作フローにより、「誰か」を心地よくさせたり、ワクワクさせたり、ドキドキさせたり、夢中にさせるデザインを目指しています。そんなアウトプットを期待される方からのご相談をお待ちしています。