こんにちは！今回は「UIデザインサイクル」というデザインの進め方についてシェアしていきます。
この記事は、UIデザインサイクルを身につけるレッスン動画シリーズの中の1つで、「そもそもUIデザインサイクルって何なの？」という全体像を説明するパートになっています。具体的なやり方は次のパート以降で1つずつ解説していくので、まずはこの記事で「何をするのか」「どういう意味があるのか」を掴んでもらえればと思います！
UIデザインサイクルとは何か
※デザインサイクルについての概要は「動画」をメインにして、テキストは補助と考えてください。
UIデザインサイクルとは、デザインを進める基本の流れのことです。「流れ」というと一直線をイメージするかもしれませんが、基本的には回転、つまりサイクルなんですね。
具体的には「リサーチ → アイデア → 制作・実験 → 評価・計画」という4つのステップを繰り返し回していくことで、デザインを完成させていきます。
このサイクルを身につけると何が変わるのか？
- 闇雲にデザインを作り始めることがなくなる
- 意図的に自分でデザインを進められるようになる
- 自分で考える力が身につきやすくなる
- 正しく成長しているかどうかの指針になる
デザインを学んでいる人、これから始める人にとって、この進め方を知っているかどうかで成長速度がかなり変わってくると思っています。
サイクルが悩みを解決します
自分のやり方が合っているかわからない
デザインを学び始めると、いろんなやり方や考え方が出てきますよね。探せば探すほど「身につけなきゃいけなさそうなもの」が無限に出てくる。
でも、実際にそれでいいのかどうか、何をやったら自分は成長できるのか、あやふやなまま進めている人も多いんじゃないでしょうか。
「やってはいるんだけど、これでいいのかな...」と思った瞬間に、やる気がなくなってしまう。そんな経験がある人もいるかもしれません。
結果として、なんとなくでデザインを進めてしまっているわけです。
時間が空くと止まってしまう
デザインをやっていて、ふと時間が空いたときに「次、何をしたらいいんだろう」とぽっかり空いてしまって、身動きが取りづらくなることってありませんか？
明確な次のステップが見えないから、手が止まってしまうんですよね。
1案しか検討していないことに気づかない
「なんかできたっぽいけど、これでいいのかな...」という不安。
実はその不安の正体は、1案しか検討していないことだったりします。でも、そもそも他のパターンを検討するという発想自体がないと、気づけないんですよね。
デザインの誤解を解く
UIデザインサイクルを身につけることで、以下のような誤解を解消して、正しくデザインを進められるようになります。
誤解①：デザインはセンスがないとできない
「自分にはセンスがないから...」と思っている人、多いんじゃないでしょうか。
でも、センスって何なのかというと、知っている量とそれを使った経験から来るものなんです。有名なデザイナーの水野学さんも、自身の著書でこの内容を書かれています。
つまり、センスがあるかどうかは、知っているかどうか、またその使い方を自分で扱えるようになっているかどうかで決まるわけです。生まれ持った才能ではないんですね。
サイクルとの関係： UIデザインサイクルでは、最初にリサーチをするので世の中のデザインの知識がどんどん増えていきます。そして繰り返し作ることで経験も積める。つまり、サイクルを回せば回すほど、自然とセンスが磨かれていくわけです。
誤解②：できる人は最初から上手いものを作っている
「あの人は最初の工程から自分よりはるかに上手いものを作っているんだろうな」と思っていませんか？
実は、デザインの最初の工程はいかにたくさんのアイデアを実験して失敗するかというのが非常に大切なんです。最初から完璧なものを作っているわけではないんですよね。
サイクルとの関係： UIデザインサイクルのアイデア→制作・実験のステップでは、失敗を前提にいろんなパターンを広げていきます。「失敗していい」という前提があるからこそ、自由にアイデアを出せるようになるわけです。
誤解③：見た目のクオリティだけが評価される
転職などを考えている人は特に気になるポイントだと思います。「デザインのアウトプット、つまり見た目のクオリティが一番見られるんでしょ？」と。
もちろん見た目も大切なのですが、それだけではありません。見た目＋そこに至るまでの考え方、つまりプロセスがかなりよく見られます。
デザインというのは「なんとなくこれが良い」というものではなくて、目的やユーザーから考えて、明確に「このデザインが良い」というものを導き出す行為なんです。様々なパターンやアイデアを作って検証した中から、どう最適解を見つけ出すのか。その探索や発見のプロセスを通して、最終的に形を定義する。それがデザインなんですね。
つまり、見た目だけ良くてもダメだし、考えているだけでもダメ。両方をサイクルのように回しながら進めることが重要なわけです。
サイクルとの関係： UIデザインサイクルを回すこと自体が、まさにこのプロセスを作ることになります。リサーチして、アイデアを出して、実験して、評価する。この流れがそのまま「どう考えてこのデザインに至ったか」というストーリーになるんですね。
UIデザインサイクルの4ステップ
ここからは、UIデザインサイクルの具体的な中身を解説していきます。
全体像
UIデザインサイクルは4つのステップで構成されています。
- リサーチ
- アイデア
- 制作・実験
- 評価・計画
この4つを一直線に進むのではなく、サイクルとして回していきます。最後の「評価・計画」で自分が作ったものを評価して、「ここがもっと足りない」「ここはもうちょっとこうした方がいいんじゃないか」「こういうパターンもあり得るんじゃないか」というアイデアをまた立てる。そうすることで次のサイクルに進むことができるわけです。
このブラッシュアップと実験のサイクルを回し続けることによって、デザインが完成していく。これがUIデザインサイクルの全体像です。
ちなみに、この考え方は有名なデザインフレームワークであるダブルダイヤモンドやデザインスプリントなどとも通じるものがあります。UIデザインサイクルは、その中でも個人でできる最小のものとして整理したものだと考えてもらえればと思います。
ステップ①：リサーチ
最初のステップはリサーチです。何をリサーチするのかというと、今回は入門編なので「どういうUIを作るのか」にフォーカスしています。
実際に自分が作ろうとしている画面や画面の要素が、世の中ではどういう表現になっているのかを調べるところから始まります。
自分の思いつきではなくて、まず世の中の表現がどうなっているのかを知る。一般的に自分が作ろうとしているアイデアに近いもの、または本当に似ているものはどういうものになっているのかを観察するわけですね。
ステップ②：アイデア
次にそのリサーチを使ってアイデアを出します。
自分の思いつきだけではなくて、「世の中では一般的にこうなっている」「それにはこういう理由があるからかもしれない」という知識や観察を経た上で、アイデアを出していくわけです。
ここでは失敗を前提に、いろんなデザインのアイデアを出していきます。「これはうまくいかないな」「なんかイメージがつかないな」という失敗をすることで、「じゃあどうしたらもっと良くなるのか」という視点に立つことができるんですね。
ステップ③：制作・実験
出したアイデアを実際に作ってみるステップです。
ただアイデアを出すだけではなく、具体的に自分が触れる形、触れるUIの形で制作をしていく。そうすることで「実際どうなのか」を自分で検証することができるわけです。
ステップ④：評価・計画
最後に、作ったものを自分で評価して、次の計画を立てます。
いろいろなパターンをアウトプットしたものを比較などして評価していく。どのデザインはどういうところが良くて、どこが良くないのか。そういうメリット・デメリットを考える機会になります。
そして「次はこういうところをもっと試した方がいいな」「今回ちょっとこういうところが足りてなかったから、ここをもう少し足したパターン、強化バージョンを作ろう」という計画を立てて、また次のサイクルに進んでいくわけです。
補足
今回紹介しているのは入門編の内容なので、扱う内容が変わればこのステップも変更する可能性があります。
また、UIデザインサイクルという名前をつけていますが、基本的にはバナーやLP、ポスターなど他のデザインでも同じ考え方で進めていくことができると考えています。
なぜUIデザインサイクルを身につけるべきか
各ステップで身につくこと
リサーチで身につくこと
世の中のデザイン表現のインプットになります。思いつきではなくて、世の中の一般的な「いわゆるセンス」というものをちゃんと自分で把握した後に作り始めることができる。つまり、作れば作るほどどんどんそのデザインに詳しくなれるわけです。
アイデアで身につくこと
思いつきだけではなく、観察ベースでアイデアを出せるようになります。また、失敗を前提にいろんなパターンを広げられるので、「なぜそのデザインじゃないといけないのか」という思考をする機会にもなります。
制作・実験で身につくこと
見たものをアウトプットしたり、アイデアをアウトプットするところまでつながるので、自分のアウトプットの表現力がつきます。
評価・計画で身につくこと
自分のデザインを批評することで、デザインの言語化力やデザインを見る目が鍛えられます。
総合的に得られるもの
サイクルを通してデザインをやっていくことで、以下のような力が身についていきます。
- 考える力：考える機会がたくさんあるので、レベルが上がりやすい
- センス（知識）：世の中のものをいっぱい見たり調べたりするので、おのずとつく
- 試行錯誤するスキル：自分で考えて検証して「このデザインかな」と決めていく力
- 作る力：いっぱいアイデアを作るので、そもそものデザインを作る力も上がる
そして何より、「このデザインでいい」と自分で確信を持てるようになるはずです。
ステップを踏まえていけばいいので、次にやることもイメージしやすくなります。だんだんとサイクルを回すことによって、それが自然とできるようになっていくと思います。
これがUIデザインサイクルであり、デザインの進め方を初心者のうちから身につけておくべき理由です。
このシリーズでできること
このシリーズでは、サイクルの進め方を解説＋実践の動画で見ることができます。
お題が用意されているので、そのお題をまずは1サイクル、動画の内容・実践の内容のやり方を真似して進めていく。そうすることで、サイクルの進め方、つまりデザインの進め方の基礎が身につけられる。そんな実践的なレッスンシリーズになっています。
このクエストではデザインサイクルについて解説をしています。
サイクルステップの具体的な進め方は次のクエストから進むことができます。