Lightning Talk_｢デザイン」ができるまで
：ロゴとUIデザインの製造プロセスを比較して

こんにちは。CDOのKimです。
＊この記事は2021年10月29日社内で行ったライトニングトークのスライドを元に作成しています。

今回はデザインのアウトプットができるまでのプロセスについて話そうと思います。

デザイナーがデザインするときに何を考えているのか。
どんなプロセスを踏んでアウトプットに至っているのか。
そして、品質を上げるために何を重要視しなければならないか。
が少しでもわかる助けになればいいなと思っています。

1. ロゴデザインの製造プロセス

まずロゴデザインのプロセスですが、こんな感じです。
ざっと見ていきましょう。

要件定義

なんのロゴなのか、使用用途はなんなのか、どんな印象を与えたいのか、姿勢やミッション、譲れないポイントは、、
場合によっては色味などもこのタイミングで指示があるかもしれません。

重要なのはとにかく情報を出し切ることです。

抽象化と像への落とし込み

要件が出たら次は抽象化（概念化）と像への落とし込みを文章化していくプロセスです。
いわゆるステートメントを書いていくプロセスです。
わかりづらいと思うので具体例を出しましょう。

Case: 複業クラウドのロゴ

複業クラウドのデザイン要件はまとめると

• 複業＝弊社という印象をつけたい
• テックカンパニーとしてのブランド
• 採用サービス特有のドライさ、冷たさは避ける

といったものでした。

ここから「複業」「テック」「冷たくなさ」とはどんなものなのかを文面で定義していきます

ターゲットオブジェクト→モチーフの抽出

ステートメントから像への落とし込みを行います。

「乗り物」「パートナー」「テクノロジー」といったビジュアルの元となる「ターゲットオブジェクト＝軸」を確定させます。

さらに、それらの像をダイアグラムやモチーフに落とし込んでいきます。

パターン出し

モチーフが確定したらパターンをとことん出します。
ここでも出し尽くすことが重要で、ここからビジュアルを選定し、確定させていきます。

ディテールの詰め〜完成

ビジュアルが確定したらディテールをとことん詰めます。
複業クラウドでは紆余曲折ありラクダのモチーフを採用し、1/100ミリ単位まで調整を行いました。

最後にイメージが湧きやすいように展開例（web / App / 資料 / バナー…）を出し、完了です。

2. UIデザインの製造プロセス

UIデザインのプロセスは、こんな感じです。
こちらも見ていきましょう。

要件定義

要件定義では、ターゲットを理解し、その課題がなんなのかインサイトはどこにあるのか、を抽出します。
*Another worksではインタビューを積極的に行うことでその課題の元となるユーザーボイスを集めています。その上で、課題に対してどんなソリューションを提供すれば具体的な価値になるのか、仮説を洗い出していきます。

最高のUXの定義

仮説からユーザーにとっての最高のUXのフローを確定させていきます。
生活の中で、どういうプロセスでプロダクトを触り何を感じて、どういう状態になるのかを定義します。

具体化のプロセス

体験を実現させるためのワイヤーフレームを作成します。
このとき、ワイヤーフレームがあるとメンバーの共通認識を取れるので便利です。

さらにプロトタイピングからユーザーテストを行い、必要に応じて改良を経てUIの確定と製造へとつなぎ込んでいきます。

3. 本題：デザインの製造プロセスに見る共通項

では、本日話したかった本題ですが
「製造プロセスには共通項があるよ」ということです。
ロゴデザインでも、UIデザインでも、その他デザインも同様です。

デザインの製造プロセスにおける共通項。
それは、発散と収束が必ず2回ずつ発生する、ということです。
（古めかしい言葉ですが）デザイン思考という領域でダブルダイヤモンドというダイアグラムになっています。

そして、ダイヤモンドの前半フェーズが定義づけ・後半が実行、と分けられます。
ロゴデザインでは
・要件定義〜ターゲットオブジェクトの抽出までが定義
・ビジュアルのパターン出しからディテールの詰めまでが実行

同様にUIデザインでは
・要件定義〜ワイヤー作成までが定義
・プロトタイピングとユーザーテスト〜UIデザインの詰めと確定までが実行
となります。

なぜ、こういったプロセスが必要か？

それは、デザインの使命が、その製品やサービスの品質を上げていくためにあるからです。

そしてもう一点重要なことですが、デザインのプロセスのほとんどは実行です。（80-90%）
定義づけフェーズで方向づけを行い、実行フェーズでパターン検証とディテールをとにかく詰め、精度を上げていくことが重要です。

実行フェーズでの検証を時間と回数をかけて行い、そこで得られた知見を定義フェーズにフィードバックすることで、プロセス全体の精度が向上され、結果製品やサービスの品質向上につなげることができるのです。

Anotehr works社のプロダクト開発ではようやく上記のプロセスを仕組みとして実行できるに至りました。言うは易し、で毎日多くの発見と改善点があり日々仕組み自体のチューニングを行なっています。

チームでデザインの力を最大化し、サービスの品質向上につなげる上で少しでも助けになっていれば幸いです。

複業クラウドに登録して一歩を踏み出してみませんか？

複業クラウドへの登録はこちら

Another worksでは一緒に働ける仲間を探しています

株式会社Another worksでは一緒に働く仲間を募集しています

• フロントエンジニア
• 人事労務
• SaaSカスタマーサクセス
• 開発フロントエンジニア
• アプリエンジニア
• サーバーサイドエンジニア
• インフラエンジニア
• エンジニア
• AI・機械学習エンジニア
• リードデザイナー（UX）候補
  

ビジネス

• 人事労務
• HRTechサービス新規営業
• SaaSプロダクト新規営業
  

その他

• SaaSカスタマーサクセス