1
/
5

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では一緒に働ける仲間を探しています


リードデザイナー候補
リードデザイナー候補/1つでも多くの仮説を検証しユーザーに向き合い続ける
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works
エンジニア
CTO室立ち上げ!技術で経営課題を解決できるエンジニア募集!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works
AI・機械学習エンジニア
AI・機械学習を使って複業を世の中に広めるプロダクトを作りましょう!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works
インフラエンジニア
SREチーム立ち上げ!一人目クラウドエンジニア募集!!
成約手数料無料で複業したい人と企業をつなぐプラットフォーム「Another works」を運営しています!企業は必要なタイミングで、必要なプロジェクトに、必要な人材を自由に仲間にすることができます! Another worksは成約手数料も初期費用も無料で、直接つながることができるので、高額な手数料や複雑な契約形態に悩むこともありません!また、約15,000名の登録者もAnother worksに入れば複業案件を自由に探すことができ、エントリーや企業にメッセージを送ることができます! 今話題の【複業】×【SaaS】領域です! トレンドの最先端の領域で、新しい働き方の概念を発信していきます! 副業市場はどんどん拡大しており、Another worksも急成長をしております!創業期メンバーとして一緒にAnother worksを盛り上げてくれるインターン生を募集しています!
株式会社Another works
アプリエンジニア
React Native/創業メンバーのエンジニアとして働きませんか?
成約手数料無料で複業したい人と企業をつなぐプラットフォーム「Another works」を運営しています!企業は必要なタイミングで、必要なプロジェクトに、必要な人材を自由に仲間にすることができます! Another worksは成約手数料も初期費用も無料で、直接つながることができるので、高額な手数料や複雑な契約形態に悩むこともありません!また、約15,000名の登録者もAnother worksに入れば複業案件を自由に探すことができ、エントリーや企業にメッセージを送ることができます! 今話題の【複業】×【SaaS】領域です! トレンドの最先端の領域で、新しい働き方の概念を発信していきます! 副業市場はどんどん拡大しており、Another worksも急成長をしております!創業期メンバーとして一緒にAnother worksを盛り上げてくれるエンジニアを募集しています!
株式会社Another works
フロントエンジニア
複業クラウドをReactで開発するフロントエンジニア募集
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しています。 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、 事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。 Another worksが契約の間に入らないからこそ実現できています。 専属のCSが採用成功に向けて伴走し、導入2ヶ月以内の採用成功率は70%以上です。 ◎新規事業開発 2020年11月よりリリースをした自治体様との事業『複業クラウド for Public』 1年間で19都道府県20自治体様にご利用いただき、 地方自治体が抱える課題と都内の優秀な複業人材のマッチングを通して 場所にとらわれない挑戦機会の最大化を実現しています。 これからも『複業』というドメインにおいて事業開発をし続けます。 ■中途在籍メンバー出身 ◎ビズリーチ、EPARK、パソナ、パーソル、JAL、レバレジーズ、フォトシンス
株式会社Another works

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

ビジネス

その他

株式会社Another worksでは一緒に働く仲間を募集しています
5 いいね!
5 いいね!
同じタグの記事
今週のランキング