こんにちは！カイクンです。
BONOのUIUXコースでUIデザインの見た目の基礎から進める人に向けて、上達を早める、かつ、基本的なデザイン制作の流れをお伝えします。
精度を高め、上達の高いデザインを作る流れのイメージは以下のような形です。
アイデアを試して、それを自分で評価して、改善するべき部分をブラッシュアップ、必要があれば再度参考を探したり調べたりしてどんどんアイデアをふくまらせたり、研ぎ澄ましていきます。最初のアイデアをいかに試して壊せるかが、デザインのクオリティアップには不可欠だと考えています。
とくに自分の作ったデザインを見る時間をしっかり持つと「こうしてるけど、これでいいのか？」と疑問に持つと思います。
そうなったら世の中の定番の動きを調べ直して、しっかり盗む。またパターンを作ってブラッシュアップする。
このクセを身につけるだけでかなりのスピードで基礎を身につけていけるはずです。
参孝：【初心者】最短で基礎を得るUIデザイン勉強法、それは定番UIのマネです
☝️htps://www.bo-no.design/contents/design-flow-basic-for-beginner-to-improving-your-design-skills
ただ闇雲に作ったり頭の中にあるアイデアだけに頼るのではなく、特に初心者が世の中のものを参考にしながらベストなデザインを形作っていくデザイン制作の流れの型と1つ出会うことができます。正解はありませんが、初心者がこのフローを真似することでデザインのインプットをしてすぐに試し、なぜこのデザインなのか？を言語化しながらブラッシュアップのサイクルを回すやり方のイメージを持つことができるはずです。
UIデザインだけではなくどんな制作にも応用できるやり方になります。具体的な紹介はBONOの別のコンテンツになりますが、イメージを掴んでいただけると幸いです。
このデザインフローのステップ3までを意識できる「ゼロから始めるUIビジュアル入門」と、ステップ４以降を体験できる「ゼロからはじめる情報設計」をBONOではメンバー限定で実践できます。
https://www.bo-no.design/series/tutorial-uivisual
BONOの「UIビジュアル基礎コース」に入っているミニコースです。
Figmaの使い方とUI見た目の基本的な作り方を学習できるのが「ゼロから始めるUIビジュアル入門」のシリーズになります。大枠どういうふうにUIを作っていくことでビジュアルスキルやUIそのものに詳しくなれるかをトレースしながらトレーニングしましょう
動画の中ではToDoサービスを動画にしたがって作成していきながら、世の中の基本UIを真似しながらUIを構築していくことで基礎を身につけるUI制作のやり方を理解できます。
https://www.bo-no.design/series/ui-architect-beginner
要件とユーザーがやりたいことから始めて、UIのアイデア出しをして最適なUI設計のするデザインフローを解説するミニコースです。ラフとパターンを作り、自分で自分のデザインに疑問を持ち、また新しいアイデアにブラッシュアップして質を高めていくデザイン制作の基本を身につけることができます。￥
最初のアイデアにずっと固執してデザイン内容をあらゆる角度で検討できなと、良いデザインに辿り着くチャンスを逃しやすいです。またデザインの検討のためにパターンを作ったり参考を色々見るのは、自分のデザインの妥当性を考えることにも繋がります。
この記事では各ステップの内容の全体像をまずは理解するために、理由とフローを見ていきましょう。
デザインやアイデアの基本は”組み合わせ”です。一部の人には残念かもしれませんが僕らはアーティストではありません。デザイナーです。求められることは、要件やユーザーに最適なUIを”選ぶ”ことで組み立てていく感覚です。
このステップの目的は自分がデザインする対象に近い世の中の参考事例を探し、自分が制作する際のイメージを具体的に持つことです。
参考記事：【初心者】最短で基礎を得るUIデザイン勉強法、それは定番UIのマネです
https://www.bo-no.design/contents/howtostudydesign-steal
デザイン初心者のうちは世の中の一般的な事例を知って研究することが基礎を身につける近道になります。
例えるなら、デートを成功させる服を選ぶ、大事なカンファレンスでの衣装を選ぶ、洋服のコーディネーターのような立ち位置です。自分で服を作ったとして、いつでもオリジナルのある服が求められるわけではありません。その目的に応じた機能や、”ふつう”のパターンがあります。それをうまく選んで成功の助けをします。UIデザインも似たようなものです。
そのためにはまず”世の中のふつうのUI”を知っていくことが大切です。既存で溢れいているUIに詳しくなることで適切なUIの知識が入り、適切なUIを選んで作っていくことができます。UIに詳しくないのに選ぶことも判断することも難しいでしょう。
なので必ずデザインをする前に自分が作ろうとしている機能や目的に近いUIを探してください。１つではなく複数探しましょう。そしてそれを参考にしてパターンを作るのです。
まずは”ふつう”を知ることでUIに詳しくなり、顧客や目的にぴったりのUIを作ることができますし、見た目も整ったUIをデザインすることができるようになってきます。
これはどの分野でも活かせます。例えばバナーのデザインからグラフィックを学ぶ際もまずはバナーデザインの普通を真似したり普段から見るようにします・
「センスは知識から：デザイン前に参考デザインを集める上達を加速する3つの理由」
真似しよう！と思うと「えー全く同じ機能や情報じゃないやつじゃないと、真似できなーい」と思うことでしょう。そういうことではないです。小さい単位から大きい単位まで、盗める目を養っていきましょう。
大きくは「構造」と「機能」と「ビジュアル」で盗んでいきます。この２つは全く別物ではなくそれぞれ重なっている部分があります。ただ大きな見方として2つに分けることができます。全く別物ではなくお互いに相関関係ということは、覚えておいてください。
（つまり、良い見た目は機能的になりうるし、使いやすい機能は見た目も良かったりします）
UIデザインの難しいところであり楽しい部分は構造が大事な点です。
構造とは具体的な例を出すと、
①そのページで表示する情報の優先度・並び、
②ページ間の関係性やナビゲーション、になります。
まずは見た目を考えると①から理解すると良いでしょう。
②に関してはBONOでは「使いやすいUIの秘密」シリーズでみっちりやっているので有料ですがぜひ興味を持った方はご覧ください。
①について：
例えば「そのページの主題は何か？」、「主題を構成する要素は何か」などです。以下のようなメルカリのページで考えるとどうなるでしょうか
このページは「ホーム」なので主題は「ホーム＝起点」になるページです。もっと具体化した方が良いので考えるとこのページにはマイリスト/おすすめの2つの画面があり、おすすめの中には「いいねした商品」「最近検索した商品（すのこ）」が並んでいます。
つまり自分の興味に基づいた商品を表示する仕組みがホームになっています。
つまり起点としては”自分がサービス上で直近興味を示したもの”がホームであり、その内訳としてマイリスト/おすすめがあります。
おすすめの中では上位2つとして「いいねした商品」「検索した商品」を並べています。
こういう表現の構造を「構造単位」です。
この構造が自分のサービスに使えそうか？どうかを確認して盗むことを構造単位での参考とこの記事では呼びます。
このメルカリの例の場合では、自分のサービスでもアプリの最初の画面をユーザーの行動を軸にした商品訴求にした方がユーザーのゴールに合致するなら参考にできますし、そうでなくても、カテゴリと商品をタイル上に見せる見せ方の構造を参考にできることもあります。
このように構造から自分の作っているUIやデザインの目的を達成する参考を盗むことを構造から盗むことです。
この部分はとっても難しいですがUIでは特に大切な部分にはなってきます。
初心者のうちからこの視点でUIを見れるようにはなっておくと、時間はかかりますが恩恵が得られるのが早まるでしょう
真似をする時に、まんま同じ仕様、要件、のページや画面はかなり少ないでしょう。1ページ全てを真似する、などと考えては当然真似しきれません。同じ顧客で、同じ要件と機能でないとそんなものは存在しないからです。まずは”機能単位”から盗めるものを考えましょう。
機能単位とは”今自分が作っているUIやページで達成しなければいけない目的”単位で盗むものを探すことです。具体的に例えるなら、「日付の期間を入力」しないといけないUIをデザインするのであれば、どんなサービスでもいいので「日付」の入力、「2つ以上の日付の期間」を入力するUIやサービスを探します。
何があるでしょうか？私生活で考えてみましょう。おそらく真っ先に上がりやすいのは「旅行」でしょう。そう考えると「ホテル予約」や「航空券予約」のUIを参考にすると「日付の期間入力」UIの参考を探せると思います。
自分が作っているサービスが全く旅行とは関係ないものでも、1機能だけのUIを見れば参考にできるものはあります。
盗む時は見た目だけではなく、機能面に着目して盗んでいきましょう。・どういう挙動をするのか？・入力するならどういうふうに入力？・どういう操作ステップか、などなど
UIデザインは絵を作るのではなく体験をつくるものです。そのため見るだけではなく触って確かめることを確実に行なってしっかり盗んでいきましょう
ビジュアル単位とは見た目の雰囲気を決める変数のことです。色・サイズ感・余白感・フォント・角丸・ボーダーなど、ビジュアルを構成する基本要素が対象です。同じ機能でもこれらのサイズや要素が違うだけで全く違うテイストのものに仕上げることができます。
そのためビジュアルを参考にするのなら「コレぐらいのタイトルの重要度に、どれぐらいのサイズを使っているか」「余白はどれぐらいのサイズを最低、最大で使っているか」など、全体のサイズやビジュアルシステムの感覚を吸収していくことが良いです。
そのため基本的なビジュアルシステムの理解をすることがビジュアルデザインを盗み上達するためにかなり有効になります。「UIビジュアル基礎」シリーズで学ぶことができます。
そのためビジュアルテイストに関してはUIであればUIを見るだけではなく、Webサイトやポスターなどからそれぞれの要素を盗むことも可能です。そのまま当てはめづらいですが、各要素がどのようになっているかは確認することができるため盗むを応用しやすいです。コレは機能単位で盗むのとは違います。
ToDoサービスをデザインする流れでテイストを変更する動画です。こちらの動画の内容のようにビジュアルテイスト面だけ参考にして取り入れることで昨日などはそのままに見た目の雰囲気を変更することができます
【動画】全く別テイストにUIを変更する方法を教えます
https://www.bo-no.design/contents/tutorial-uivisual-06
参孝
【メンバー限定】バナーデザイン：”イケてる””出したい雰囲気”のデザインを集めてクオリティUP
https://www.bo-no.design/contents/bannerbeginner-02-3
→バナーデザインを事例にしてビジュアルテイストの決め方について話している動画です
グラフィック入門：ムードボードを作って出したい雰囲気を作る方法（一部無料）
https://www.bo-no.design/series/graphicbeginner
→Webサイトのアイキャッチを作る過程でビジュアルテイストのアイデア創出の流れを体験できます
このステップの目的は、いきなり装飾的な部分からやるのではなく、まずは自分の制作物の目的を把握して、”何を満たす必要があるのか”からアイデアを考えていくことです。
どれだけ見た目が良くても目的と合致しなければその制作物に意味を見出すことは難しくなってしまいます。なのでまずデザイン制作の最初のステップでは、目的に合致するレイアウトなどはどのようなものか？からデザインを詰めていきましょう。
UIを作る時もバナーでも、まずは”機能”面から考えよう。
機能面とは作ろうとしているデザインにどういう情報が必要か？何を伝えないといけないのか？何をやってもらわないといけない画面か？を考えて画面のレイアウトから作っていくことです。
この段階ではそこまで見た目のテイストはまだ考えなくて大丈夫です。そこは後に回して作るべきUIで満たすべき内容を実現すると、どういうレイアウトになるのか？情報になるのか？を考えます。
機能や構造の参考を使って、そこから盗みながら機能面のデザインをまずは詰めていきます。
”ふつう”を知るのパートでも書いた通りまずは”ふつうのUI”に詳しくなることで、UI自体の理解が進みます。UI自体に詳しくなることでアイデアを出せるようになり、そのアイデアを組み合わせていくことでUIを自在に操り主体的に考えることができるようになります。
Webサイトやバナーなど、他の制作媒体も基本的には同じです。それぞれのジャンルでよく使われる表現・機能などが存在します。まずはそれを真似していくことで基本が身につきます。
そのため参考で集めたものを”真似すること”から始めましょう。パクリなどはないです。機能や要件や顧客設定まで全て真似しちゃうとパクリになりますがUI表現やUI機能表現にオリジナルのものはほぼ存在しません。1機能のUIを複数集めればわかります。そこまで違うことはしてません。違うのは顧客設定と要件です。
なのでまずは参考にしたものを真似してどんどんUIを作り、そのUI表現の良し悪しを自分で吸収していきましょう。
自分が体験したことない、認識したことのないUIを作っているなと感じたら即座に疑問を持ちましょう。そんなUIは存在しない可能性が高いです。その時は即座に参考を調べにいきましょう。
機能単位、ビジュアル単位で、まずは参考のものをトレースする勢いでどんどん参考にしましょう。
ログイン画面を作っているのであれば、同じジャンル（SNSならSNS、など）の参孝UIを集めて良し悪しを整理したら、その良いと思う部分をどんどん自分の作るべきUIに落としていきましょう。落とす時はトレースする勢いが最初はおすすめです。
なぜか。なぜならまだUIに詳しくない上に、表現にも疎い人がほとんどだからです。なのでそこから学ぶ、かつ、自分の中にない感覚ではなく世の中の一般的な感覚、つまりサイズ感や色の強さなどを参考にしてUIを作っていく方が結果、上達の観点、アウトプットの観点から良いからです。
そして逆に、1機能や1UIグループ観点でかなりサイズなどが違う、というものを探す方が難しいでしょう。ログイン画面の「フォームUI」だけのUIデザインを例に出すと、おそらく３種類全く違うものを見つけるのも難しいはずです。UIは微々たる違いでバランスを取っていたりもするので、その微細な違いに気づく、考える上でもまずは真似して作ってみる。
その複数作ったものを比較してみる、ということを通してうまくなっていくことが上達の近道であり、”ふつう”のアウトプットをすることにつながります。
なので、トレースだけの練習をせずに、自分で作る際にどんどん参考を調べてどんどんトレースする勢いでUIを作ってみる。それも1方向性ではなくさまざまなパターンを作ってみることをお勧めします。
デザインの作成能力を伸ばすには”目”を鍛えるしかありません。ただじゃあ”目”を鍛えろと言われても難しい。そこで大事なのが”比較”を使うことで。
比べることで違いに気づきやすくなります。そうすることで目の使い方を徐々に鍛えていくことがやりやすくなります。いきなり良いもの、と言っても難しいので、集めた参考を比較したりすることから始めるのが良いと考えています。
その中でも「自分が作ったものを比較する」ことで、自分のデザイン自体にも目を使いやすくなり気づきが多くなりやすいです。自分のデザインを壊せというと難しい、という人がいますがそういう人こそ比較を試してみてください。
ーー 参考のデザインと自分のデザインを比較する
ーー 複数のアイデアをつくり、自分のデザイン同士を比較する
特に自分のデザインに目を光らせて、改善してクオリティを上げていくことが1番目のトレーニングになります。なので必ず自分のデザインをする時はさまざまなアイデアを出して、それを比較しながらどんどんブラッシュアップする癖をつけていきましょう
いきなり1方向性だけでデザインを作り始めるのはお勧めしません。
なぜならその方向性より今回伝えたい・作りたいものを考えた時によりよい方向性がある可能性を確かめていないからです。そこまで考えなくてよいものであるならいいですが、デザインレベルが低いうちや経験が少ないうちほど、ラフデザインからさまざまな方向性を試しながら、どういう見せ方が機能的か？を考えておくことが重要です。これはUIに限らずあらゆる制作で使う考え方です。（プロトタイピングと読んだりします）
そのためデザインの工程としては「ラフ」→「パターンで機能や要件を満たせるか考える」→「方向性を絞りながら質を上げる」という風に考えて、詰めていくことがお勧めです。
自分が対峙している要件や機能に対して「こういう選択肢もあるかも？」を多く持てるようにしましょう。そして、そのUIパターンを全て形にして、それぞれの選択肢のメリット・デメリットをしらみつぶしで検証していきましょう。
この工程をデザイナーがサボると、だれも「本当はもっとこうできるかも？」「このUIパターンは良いのか悪いのか」を形にして試すことがほぼできません。
採用されないかもしれないけど、完成系に近いイメージを早く具体化して試すことができるのがデザイナーが持つ、他の職種にない強みです。（エンジニアリングではパターン作成に時間がかかるし、ディレクターなどはそもそも具体化できる力が弱いです）
なのでUIに責任を持つデザイナーが、UIのパターンはしらみつぶしに可能性を試すために形にしましょう。パターンを作成しましょう。パターンを試して気づきを得ましょう。気づきを得たら改善点にしてよりクオリティの高いUIを詰めていきましょう。
これをすることで自分のUIに対するフィードバックになるし、さまざまなUIを見て考えて吸収する機会になります。つまりデザインの上達機会にもなるのです。
全てのプロジェクトで１ヶ月可能性を検討できればいいかもしれませんが、要件などによってはリミットが存在します。そのため、どれぐらいパターンを作り検証するのか？はその都度変わるのですが「時間」と「検証すべき項目」の２つの変数を考えて期間などは決めましょう。
少なくとも「このUIで達成したい目的を果たせるのか？」が重要です。果たせない・果たせるかわからないUIでリリースするわけにはいきません。少なくともデザイナーはそこに責任を持ちます。
ステップ4の目的は作成した方向性のパターンを、新鮮な目で自分で確認することです。この工程をしっかりやることで”デザインをする目”を養うことができるでしょう。
目のレベルが高いと盗めるレベルも上がりますし、気づくレベルも上がります。結果として質の良いアウトプットの作成につながってくるのです。
UIが良いかどうかを１つのものだけ見ても判断するの難しいです。他のUIパターンや機能の良し悪しの知識ストックがあればそこと比較することができ、良い点・悪い点を言語化はやりやすくなります。
なので自分のUIを批評する、目指す形にこのUIでいいのか？他にブラッシュアップしたり、考えるべき点はないのか？を考えるためにも”UIのパターンをつくる”ようにしましょう。パターン同士を比較して自分のUIのクオリティを高める改善点は出しやすくなりますし、”こういう方向性の方が良いかもしれない？”も具体化することで、しっかり見定めることができます。
パターンを作り比較するのは時間が掛かりますが、これをサボると自分のスキル上達がかなり遅くなります。パターンを作れば作る量も増え、インプット量も増え、気づきも増えます。
パターンを作成してUIを比較する時は必ず「ユーザーが触れる形」で批評しましょう。FigmaなどでUIが並べられたものを俯瞰する形でユーザーはUIには触れません。
スマホアプリであればスマホの中に写されて手で持った状態、パソコンであればブラウザに表示された状態で触ります。その状態で自分のUIを見ることで客観的に見ることもでき、改善手にも気づきやすくなります。
必ずユーザーが触る時と同じシチュエーションでUIを評価するようにして触って改善点を見つけてください。
作成したUIパターンを批評する時は、パターンごとにメリットデメリットを出しましょう。そしてただ出すのではなく”目的とユーザーを考えた時のメリデメを出すようにしてください”。そうすることで単なる自分の感想ではなく、果たすべき要件や制約を考えた上での気づきになりやすいです。
例：ログインフォームを作るとき
ーーフォームにフォーカスが当たってる時はどういう状態であるとユーザーにわかりやすいか？世の中のフォームの機能は何か工夫してないか？
ーーフォームの入力内容がエラーの場合はどういう対応をされるべきか？世の中のUIはどうなっているか
ーー間違えてログインの方に来たが新規にいきたい時は？世の中のUIはどういう配慮や設計をしている？
これらを考えてメリットデメリットの観点でパターンごとに言語化します。この言語化を通して、次のブラッシュアップパターンに取り掛かります。
そして言語化することでUIを説明する能略、UIがなぜこの形が多いのか？と言った気づきにもつながり、UIデザインスキルのレベルアップに繋がります。
ステップ4までの気づきを使って自分の制作物の質を上げていくのがこのステップの目的になります。闇雲にブラッシュアップしろと言われても難しいですが、方向性の比較をしたりしてきたので気づきを得やすい状態になっているはずです。
最初の自分の考えにとらわれず客観的な目線で批評した今、よりよい形にするアイデアがきっと自分の中に手に入っているはずです。
UIでもWebサイトでも、いきなり１つの方向性だけで完成度を80度まで持っていくのはお勧めしません。軸となる表現が間違ってしまって要件と合わなかったり、表現そのもののクオリティが高まらない方向性で頭でっかちにやってしまうと、目的も表現力的にも間違うことが多いです。（時間が足りない時などはそういう時もありますが例外で考えてください）
基本的には以下のように考えます
1: まず今回伝えたいものや目的に合うアイデアを広く考える
2: ラフに作ってアイデアを具体化、具体の状態で検討する
3: 1-2を重ねてアイデアの強度を強くする
4: 1~3を繰り返して、だんだん方向性を固めていき表現も固めていく
こうすることでさまざまな表現の選択肢を検討することができるので、上手くいくパターンを発見してデザインの完成まで持っていくことを計画的に実行しやすくなります。
そのため、何度もブラッシュアップを重ねて完成に持っていきます。
参考を探し、パターンでアイデアを試して、チェックした結果、まだ方向性を考える必要がある場合は、表現を詰める前にアイデアの方向性自体を詰めていくべきです。
そういう意味では”方向性のブラッシュアップ”をするのもこのフローになります。具体的には気づきを得たものを新しく試すために、フローの最初である参孝探しから始めます。
え、また1から？と思うかもしれませんが、アイデアの方向性が悪いまま細かい部分を詰めていても土台が悪いので悪いままです。土台を固めるのがとても大切なので、臆せず、むしろ最初から初めのアイデアのまま行けるわけとは思わずに、壊す前提でデザイン制作を進めましょう。
1~4の流れは今まで書いてきた話です。比較で改善点を出したらそれをもとにまたブラッシュアップしていきましょう。
場合によっては途中で参考を集めないとイメージが掴めないことも多くあります。その場合は都度ブラッシュアップするたびに参考調べから戻り、アイデアを作り…と繰り返していきます。
これを繰り返すことで自分が作るべきものの精度、アウトプットの精度が高まりやすいです。
最初のアイデアに固執せずどんどん壊してブラッシュアップしていき、完成度を高めるデザインの流れを実践していきましょう。
オリジナルであるかなんてどうでもいいのか、とこの記事を読んで人は思ったかもしれない。そうではない。うまくなるために最初からオリジナルを考えることはできないから、世の中の”ふつう”＝基礎を吸収することからはじめよう。守破離の「守」を速攻でやる方が上達が早いよ。というのがこの記事の趣旨です。
ではUIデザインにおけるオリジナリティとはなんなのか？個人的な考えではそれは「コンセプト」に全て紐づきます。言い換えればサービスが持っている価値観であり、それが体験を通してユーザーに伝わったときにオリジナルは伝わると考えています。決して他と見た目が違う＝オリジナリティがあるという浅い話ではないということです。それはただ奇抜な目立ちたがり屋であると個人的には考えます。
たとえばHeadspaceという瞑想アプリがあります。DLしてみるとわかりますがかなりポップです。そしてイラストが穏やかさを演出しています。「瞑想」と聞くと、なんとなく怪しい、蓮の葉、なんか鐘の音が鳴りそう、などのイメージを持つことが大半な気がしますが、Headspaceはそういうイメージをもちにくいでしょう。
これはHeadspace自体が瞑想をもっと身近にしたいというコンセプトがあり、ユーザーが手に入れたい穏やかさをイラストで表現しているためです。つまりコンセプトがありその体験を表現する結果、こうなっているのです。見方を変えれば何かの絵本でHeadspaceのような表現を探すことはできるでしょう。そう考えると決して唯一の見た目＝オリジナリティではないことがわかります。
ユーザーにどういう体験をしてもらいたいか、それがユーザーに受け入れられるか？、その体験をどうやったら表現できるか？これが合わさって顧客に届いた時に、オリジナリティは生まれると思っています。
「アイデアのつくり方」という名著に”アイデアは組み合わせ”と書いています。スティーブ・ジョブズもiPhoneを何もないところから生み出したわけではないでしょう。すでにノキアがスマートフォンを出していました。逆にWindowsもAppleが開発したGUI（コードではなく今のパソコンのように擬似的なフォルダなどをクリックして操作するUIのこと。昔はパソコンはコードで操作していた）を真似てWindowsを成功させました。
盗みが良い悪いの前に、アイデアは組み合わせで進化してきていることに気づくのが大事です。今まで全く誰も見てきたものが次の新しいものとして受け入れられるのではありません。アイデアは組み合わせで進化したり、時代によって変化しています。
デザイナーとして作っていくためにはまずは「アイデア」を知る必要があります。そのためにも基礎として世の中の”ふつう”を知りましょう。その引き出しが増えてくるとそれを組み合わせられるようになってきたり、応用できるようになっていきます。
そうして顧客に即した体験のコンセプトを体現するビジュアルやUIをデザインすることであなたが作るデザインは”オリジナル”になるのかもしれません。
まずはさまざまなデザインから学び、作り、基礎スキルを伸ばしていきましょう。
BONOではこれからUIUXデザイナーを未経験から目指したい人や、UIUXデザインの基礎を身に付けたい現場１−2年のデザイナーに向けたコンテンツを制作、販売しています。
もしよろしければまずはUIUXコースを見てどういう基礎を身につけるべきかなど、覗いてみてください🙋
未経験からUIUXデザイナーを目指すUIUXコース
https://www.bo-no.design/rdm/roadmap-uiuxdesigner
こんにちは！カイクンです。
BONOのUIUXコースでUIデザインの見た目の基礎から進める人に向けて、上達を早める、かつ、基本的なデザイン制作の流れをお伝えします。
精度を高め、上達の高いデザインを作る流れのイメージは以下のような形です。
アイデアを試して、それを自分で評価して、改善するべき部分をブラッシュアップ、必要があれば再度参考を探したり調べたりしてどんどんアイデアをふくまらせたり、研ぎ澄ましていきます。最初のアイデアをいかに試して壊せるかが、デザインのクオリティアップには不可欠だと考えています。
とくに自分の作ったデザインを見る時間をしっかり持つと「こうしてるけど、これでいいのか？」と疑問に持つと思います。
そうなったら世の中の定番の動きを調べ直して、しっかり盗む。またパターンを作ってブラッシュアップする。
このクセを身につけるだけでかなりのスピードで基礎を身につけていけるはずです。
参孝：【初心者】最短で基礎を得るUIデザイン勉強法、それは定番UIのマネです
☝️htps://www.bo-no.design/contents/design-flow-basic-for-beginner-to-improving-your-design-skills
ただ闇雲に作ったり頭の中にあるアイデアだけに頼るのではなく、特に初心者が世の中のものを参考にしながらベストなデザインを形作っていくデザイン制作の流れの型と1つ出会うことができます。正解はありませんが、初心者がこのフローを真似することでデザインのインプットをしてすぐに試し、なぜこのデザインなのか？を言語化しながらブラッシュアップのサイクルを回すやり方のイメージを持つことができるはずです。
UIデザインだけではなくどんな制作にも応用できるやり方になります。具体的な紹介はBONOの別のコンテンツになりますが、イメージを掴んでいただけると幸いです。
このデザインフローのステップ3までを意識できる「ゼロから始めるUIビジュアル入門」と、ステップ４以降を体験できる「ゼロからはじめる情報設計」をBONOではメンバー限定で実践できます。
https://www.bo-no.design/series/tutorial-uivisual
BONOの「UIビジュアル基礎コース」に入っているミニコースです。
Figmaの使い方とUI見た目の基本的な作り方を学習できるのが「ゼロから始めるUIビジュアル入門」のシリーズになります。大枠どういうふうにUIを作っていくことでビジュアルスキルやUIそのものに詳しくなれるかをトレースしながらトレーニングしましょう
動画の中ではToDoサービスを動画にしたがって作成していきながら、世の中の基本UIを真似しながらUIを構築していくことで基礎を身につけるUI制作のやり方を理解できます。
https://www.bo-no.design/series/ui-architect-beginner
要件とユーザーがやりたいことから始めて、UIのアイデア出しをして最適なUI設計のするデザインフローを解説するミニコースです。ラフとパターンを作り、自分で自分のデザインに疑問を持ち、また新しいアイデアにブラッシュアップして質を高めていくデザイン制作の基本を身につけることができます。￥
最初のアイデアにずっと固執してデザイン内容をあらゆる角度で検討できなと、良いデザインに辿り着くチャンスを逃しやすいです。またデザインの検討のためにパターンを作ったり参考を色々見るのは、自分のデザインの妥当性を考えることにも繋がります。
この記事では各ステップの内容の全体像をまずは理解するために、理由とフローを見ていきましょう。
デザインやアイデアの基本は”組み合わせ”です。一部の人には残念かもしれませんが僕らはアーティストではありません。デザイナーです。求められることは、要件やユーザーに最適なUIを”選ぶ”ことで組み立てていく感覚です。
このステップの目的は自分がデザインする対象に近い世の中の参考事例を探し、自分が制作する際のイメージを具体的に持つことです。
参考記事：【初心者】最短で基礎を得るUIデザイン勉強法、それは定番UIのマネです
https://www.bo-no.design/contents/howtostudydesign-steal
デザイン初心者のうちは世の中の一般的な事例を知って研究することが基礎を身につける近道になります。
例えるなら、デートを成功させる服を選ぶ、大事なカンファレンスでの衣装を選ぶ、洋服のコーディネーターのような立ち位置です。自分で服を作ったとして、いつでもオリジナルのある服が求められるわけではありません。その目的に応じた機能や、”ふつう”のパターンがあります。それをうまく選んで成功の助けをします。UIデザインも似たようなものです。
そのためにはまず”世の中のふつうのUI”を知っていくことが大切です。既存で溢れいているUIに詳しくなることで適切なUIの知識が入り、適切なUIを選んで作っていくことができます。UIに詳しくないのに選ぶことも判断することも難しいでしょう。
なので必ずデザインをする前に自分が作ろうとしている機能や目的に近いUIを探してください。１つではなく複数探しましょう。そしてそれを参考にしてパターンを作るのです。
まずは”ふつう”を知ることでUIに詳しくなり、顧客や目的にぴったりのUIを作ることができますし、見た目も整ったUIをデザインすることができるようになってきます。
これはどの分野でも活かせます。例えばバナーのデザインからグラフィックを学ぶ際もまずはバナーデザインの普通を真似したり普段から見るようにします・
「センスは知識から：デザイン前に参考デザインを集める上達を加速する3つの理由」
真似しよう！と思うと「えー全く同じ機能や情報じゃないやつじゃないと、真似できなーい」と思うことでしょう。そういうことではないです。小さい単位から大きい単位まで、盗める目を養っていきましょう。
大きくは「構造」と「機能」と「ビジュアル」で盗んでいきます。この２つは全く別物ではなくそれぞれ重なっている部分があります。ただ大きな見方として2つに分けることができます。全く別物ではなくお互いに相関関係ということは、覚えておいてください。
（つまり、良い見た目は機能的になりうるし、使いやすい機能は見た目も良かったりします）
UIデザインの難しいところであり楽しい部分は構造が大事な点です。
構造とは具体的な例を出すと、
①そのページで表示する情報の優先度・並び、
②ページ間の関係性やナビゲーション、になります。
まずは見た目を考えると①から理解すると良いでしょう。
②に関してはBONOでは「使いやすいUIの秘密」シリーズでみっちりやっているので有料ですがぜひ興味を持った方はご覧ください。
①について：
例えば「そのページの主題は何か？」、「主題を構成する要素は何か」などです。以下のようなメルカリのページで考えるとどうなるでしょうか
このページは「ホーム」なので主題は「ホーム＝起点」になるページです。もっと具体化した方が良いので考えるとこのページにはマイリスト/おすすめの2つの画面があり、おすすめの中には「いいねした商品」「最近検索した商品（すのこ）」が並んでいます。
つまり自分の興味に基づいた商品を表示する仕組みがホームになっています。
つまり起点としては”自分がサービス上で直近興味を示したもの”がホームであり、その内訳としてマイリスト/おすすめがあります。
おすすめの中では上位2つとして「いいねした商品」「検索した商品」を並べています。
こういう表現の構造を「構造単位」です。
この構造が自分のサービスに使えそうか？どうかを確認して盗むことを構造単位での参考とこの記事では呼びます。
このメルカリの例の場合では、自分のサービスでもアプリの最初の画面をユーザーの行動を軸にした商品訴求にした方がユーザーのゴールに合致するなら参考にできますし、そうでなくても、カテゴリと商品をタイル上に見せる見せ方の構造を参考にできることもあります。
このように構造から自分の作っているUIやデザインの目的を達成する参考を盗むことを構造から盗むことです。
この部分はとっても難しいですがUIでは特に大切な部分にはなってきます。
初心者のうちからこの視点でUIを見れるようにはなっておくと、時間はかかりますが恩恵が得られるのが早まるでしょう
真似をする時に、まんま同じ仕様、要件、のページや画面はかなり少ないでしょう。1ページ全てを真似する、などと考えては当然真似しきれません。同じ顧客で、同じ要件と機能でないとそんなものは存在しないからです。まずは”機能単位”から盗めるものを考えましょう。
機能単位とは”今自分が作っているUIやページで達成しなければいけない目的”単位で盗むものを探すことです。具体的に例えるなら、「日付の期間を入力」しないといけないUIをデザインするのであれば、どんなサービスでもいいので「日付」の入力、「2つ以上の日付の期間」を入力するUIやサービスを探します。
何があるでしょうか？私生活で考えてみましょう。おそらく真っ先に上がりやすいのは「旅行」でしょう。そう考えると「ホテル予約」や「航空券予約」のUIを参考にすると「日付の期間入力」UIの参考を探せると思います。
自分が作っているサービスが全く旅行とは関係ないものでも、1機能だけのUIを見れば参考にできるものはあります。
盗む時は見た目だけではなく、機能面に着目して盗んでいきましょう。・どういう挙動をするのか？・入力するならどういうふうに入力？・どういう操作ステップか、などなど
UIデザインは絵を作るのではなく体験をつくるものです。そのため見るだけではなく触って確かめることを確実に行なってしっかり盗んでいきましょう
ビジュアル単位とは見た目の雰囲気を決める変数のことです。色・サイズ感・余白感・フォント・角丸・ボーダーなど、ビジュアルを構成する基本要素が対象です。同じ機能でもこれらのサイズや要素が違うだけで全く違うテイストのものに仕上げることができます。
そのためビジュアルを参考にするのなら「コレぐらいのタイトルの重要度に、どれぐらいのサイズを使っているか」「余白はどれぐらいのサイズを最低、最大で使っているか」など、全体のサイズやビジュアルシステムの感覚を吸収していくことが良いです。
そのため基本的なビジュアルシステムの理解をすることがビジュアルデザインを盗み上達するためにかなり有効になります。「UIビジュアル基礎」シリーズで学ぶことができます。
そのためビジュアルテイストに関してはUIであればUIを見るだけではなく、Webサイトやポスターなどからそれぞれの要素を盗むことも可能です。そのまま当てはめづらいですが、各要素がどのようになっているかは確認することができるため盗むを応用しやすいです。コレは機能単位で盗むのとは違います。
ToDoサービスをデザインする流れでテイストを変更する動画です。こちらの動画の内容のようにビジュアルテイスト面だけ参考にして取り入れることで昨日などはそのままに見た目の雰囲気を変更することができます
【動画】全く別テイストにUIを変更する方法を教えます
https://www.bo-no.design/contents/tutorial-uivisual-06
参孝
【メンバー限定】バナーデザイン：”イケてる””出したい雰囲気”のデザインを集めてクオリティUP
https://www.bo-no.design/contents/bannerbeginner-02-3
→バナーデザインを事例にしてビジュアルテイストの決め方について話している動画です
グラフィック入門：ムードボードを作って出したい雰囲気を作る方法（一部無料）
https://www.bo-no.design/series/graphicbeginner
→Webサイトのアイキャッチを作る過程でビジュアルテイストのアイデア創出の流れを体験できます
このステップの目的は、いきなり装飾的な部分からやるのではなく、まずは自分の制作物の目的を把握して、”何を満たす必要があるのか”からアイデアを考えていくことです。
どれだけ見た目が良くても目的と合致しなければその制作物に意味を見出すことは難しくなってしまいます。なのでまずデザイン制作の最初のステップでは、目的に合致するレイアウトなどはどのようなものか？からデザインを詰めていきましょう。
UIを作る時もバナーでも、まずは”機能”面から考えよう。
機能面とは作ろうとしているデザインにどういう情報が必要か？何を伝えないといけないのか？何をやってもらわないといけない画面か？を考えて画面のレイアウトから作っていくことです。
この段階ではそこまで見た目のテイストはまだ考えなくて大丈夫です。そこは後に回して作るべきUIで満たすべき内容を実現すると、どういうレイアウトになるのか？情報になるのか？を考えます。
機能や構造の参考を使って、そこから盗みながら機能面のデザインをまずは詰めていきます。
”ふつう”を知るのパートでも書いた通りまずは”ふつうのUI”に詳しくなることで、UI自体の理解が進みます。UI自体に詳しくなることでアイデアを出せるようになり、そのアイデアを組み合わせていくことでUIを自在に操り主体的に考えることができるようになります。
Webサイトやバナーなど、他の制作媒体も基本的には同じです。それぞれのジャンルでよく使われる表現・機能などが存在します。まずはそれを真似していくことで基本が身につきます。
そのため参考で集めたものを”真似すること”から始めましょう。パクリなどはないです。機能や要件や顧客設定まで全て真似しちゃうとパクリになりますがUI表現やUI機能表現にオリジナルのものはほぼ存在しません。1機能のUIを複数集めればわかります。そこまで違うことはしてません。違うのは顧客設定と要件です。
なのでまずは参考にしたものを真似してどんどんUIを作り、そのUI表現の良し悪しを自分で吸収していきましょう。
自分が体験したことない、認識したことのないUIを作っているなと感じたら即座に疑問を持ちましょう。そんなUIは存在しない可能性が高いです。その時は即座に参考を調べにいきましょう。
機能単位、ビジュアル単位で、まずは参考のものをトレースする勢いでどんどん参考にしましょう。
ログイン画面を作っているのであれば、同じジャンル（SNSならSNS、など）の参孝UIを集めて良し悪しを整理したら、その良いと思う部分をどんどん自分の作るべきUIに落としていきましょう。落とす時はトレースする勢いが最初はおすすめです。
なぜか。なぜならまだUIに詳しくない上に、表現にも疎い人がほとんどだからです。なのでそこから学ぶ、かつ、自分の中にない感覚ではなく世の中の一般的な感覚、つまりサイズ感や色の強さなどを参考にしてUIを作っていく方が結果、上達の観点、アウトプットの観点から良いからです。
そして逆に、1機能や1UIグループ観点でかなりサイズなどが違う、というものを探す方が難しいでしょう。ログイン画面の「フォームUI」だけのUIデザインを例に出すと、おそらく３種類全く違うものを見つけるのも難しいはずです。UIは微々たる違いでバランスを取っていたりもするので、その微細な違いに気づく、考える上でもまずは真似して作ってみる。
その複数作ったものを比較してみる、ということを通してうまくなっていくことが上達の近道であり、”ふつう”のアウトプットをすることにつながります。
なので、トレースだけの練習をせずに、自分で作る際にどんどん参考を調べてどんどんトレースする勢いでUIを作ってみる。それも1方向性ではなくさまざまなパターンを作ってみることをお勧めします。
デザインの作成能力を伸ばすには”目”を鍛えるしかありません。ただじゃあ”目”を鍛えろと言われても難しい。そこで大事なのが”比較”を使うことで。
比べることで違いに気づきやすくなります。そうすることで目の使い方を徐々に鍛えていくことがやりやすくなります。いきなり良いもの、と言っても難しいので、集めた参考を比較したりすることから始めるのが良いと考えています。
その中でも「自分が作ったものを比較する」ことで、自分のデザイン自体にも目を使いやすくなり気づきが多くなりやすいです。自分のデザインを壊せというと難しい、という人がいますがそういう人こそ比較を試してみてください。
ーー 参考のデザインと自分のデザインを比較する
ーー 複数のアイデアをつくり、自分のデザイン同士を比較する
特に自分のデザインに目を光らせて、改善してクオリティを上げていくことが1番目のトレーニングになります。なので必ず自分のデザインをする時はさまざまなアイデアを出して、それを比較しながらどんどんブラッシュアップする癖をつけていきましょう
いきなり1方向性だけでデザインを作り始めるのはお勧めしません。
なぜならその方向性より今回伝えたい・作りたいものを考えた時によりよい方向性がある可能性を確かめていないからです。そこまで考えなくてよいものであるならいいですが、デザインレベルが低いうちや経験が少ないうちほど、ラフデザインからさまざまな方向性を試しながら、どういう見せ方が機能的か？を考えておくことが重要です。これはUIに限らずあらゆる制作で使う考え方です。（プロトタイピングと読んだりします）
そのためデザインの工程としては「ラフ」→「パターンで機能や要件を満たせるか考える」→「方向性を絞りながら質を上げる」という風に考えて、詰めていくことがお勧めです。
自分が対峙している要件や機能に対して「こういう選択肢もあるかも？」を多く持てるようにしましょう。そして、そのUIパターンを全て形にして、それぞれの選択肢のメリット・デメリットをしらみつぶしで検証していきましょう。
この工程をデザイナーがサボると、だれも「本当はもっとこうできるかも？」「このUIパターンは良いのか悪いのか」を形にして試すことがほぼできません。
採用されないかもしれないけど、完成系に近いイメージを早く具体化して試すことができるのがデザイナーが持つ、他の職種にない強みです。（エンジニアリングではパターン作成に時間がかかるし、ディレクターなどはそもそも具体化できる力が弱いです）
なのでUIに責任を持つデザイナーが、UIのパターンはしらみつぶしに可能性を試すために形にしましょう。パターンを作成しましょう。パターンを試して気づきを得ましょう。気づきを得たら改善点にしてよりクオリティの高いUIを詰めていきましょう。
これをすることで自分のUIに対するフィードバックになるし、さまざまなUIを見て考えて吸収する機会になります。つまりデザインの上達機会にもなるのです。
全てのプロジェクトで１ヶ月可能性を検討できればいいかもしれませんが、要件などによってはリミットが存在します。そのため、どれぐらいパターンを作り検証するのか？はその都度変わるのですが「時間」と「検証すべき項目」の２つの変数を考えて期間などは決めましょう。
少なくとも「このUIで達成したい目的を果たせるのか？」が重要です。果たせない・果たせるかわからないUIでリリースするわけにはいきません。少なくともデザイナーはそこに責任を持ちます。
ステップ4の目的は作成した方向性のパターンを、新鮮な目で自分で確認することです。この工程をしっかりやることで”デザインをする目”を養うことができるでしょう。
目のレベルが高いと盗めるレベルも上がりますし、気づくレベルも上がります。結果として質の良いアウトプットの作成につながってくるのです。
UIが良いかどうかを１つのものだけ見ても判断するの難しいです。他のUIパターンや機能の良し悪しの知識ストックがあればそこと比較することができ、良い点・悪い点を言語化はやりやすくなります。
なので自分のUIを批評する、目指す形にこのUIでいいのか？他にブラッシュアップしたり、考えるべき点はないのか？を考えるためにも”UIのパターンをつくる”ようにしましょう。パターン同士を比較して自分のUIのクオリティを高める改善点は出しやすくなりますし、”こういう方向性の方が良いかもしれない？”も具体化することで、しっかり見定めることができます。
パターンを作り比較するのは時間が掛かりますが、これをサボると自分のスキル上達がかなり遅くなります。パターンを作れば作る量も増え、インプット量も増え、気づきも増えます。
パターンを作成してUIを比較する時は必ず「ユーザーが触れる形」で批評しましょう。FigmaなどでUIが並べられたものを俯瞰する形でユーザーはUIには触れません。
スマホアプリであればスマホの中に写されて手で持った状態、パソコンであればブラウザに表示された状態で触ります。その状態で自分のUIを見ることで客観的に見ることもでき、改善手にも気づきやすくなります。
必ずユーザーが触る時と同じシチュエーションでUIを評価するようにして触って改善点を見つけてください。
作成したUIパターンを批評する時は、パターンごとにメリットデメリットを出しましょう。そしてただ出すのではなく”目的とユーザーを考えた時のメリデメを出すようにしてください”。そうすることで単なる自分の感想ではなく、果たすべき要件や制約を考えた上での気づきになりやすいです。
例：ログインフォームを作るとき
ーーフォームにフォーカスが当たってる時はどういう状態であるとユーザーにわかりやすいか？世の中のフォームの機能は何か工夫してないか？
ーーフォームの入力内容がエラーの場合はどういう対応をされるべきか？世の中のUIはどうなっているか
ーー間違えてログインの方に来たが新規にいきたい時は？世の中のUIはどういう配慮や設計をしている？
これらを考えてメリットデメリットの観点でパターンごとに言語化します。この言語化を通して、次のブラッシュアップパターンに取り掛かります。
そして言語化することでUIを説明する能略、UIがなぜこの形が多いのか？と言った気づきにもつながり、UIデザインスキルのレベルアップに繋がります。
ステップ4までの気づきを使って自分の制作物の質を上げていくのがこのステップの目的になります。闇雲にブラッシュアップしろと言われても難しいですが、方向性の比較をしたりしてきたので気づきを得やすい状態になっているはずです。
最初の自分の考えにとらわれず客観的な目線で批評した今、よりよい形にするアイデアがきっと自分の中に手に入っているはずです。
UIでもWebサイトでも、いきなり１つの方向性だけで完成度を80度まで持っていくのはお勧めしません。軸となる表現が間違ってしまって要件と合わなかったり、表現そのもののクオリティが高まらない方向性で頭でっかちにやってしまうと、目的も表現力的にも間違うことが多いです。（時間が足りない時などはそういう時もありますが例外で考えてください）
基本的には以下のように考えます
1: まず今回伝えたいものや目的に合うアイデアを広く考える
2: ラフに作ってアイデアを具体化、具体の状態で検討する
3: 1-2を重ねてアイデアの強度を強くする
4: 1~3を繰り返して、だんだん方向性を固めていき表現も固めていく
こうすることでさまざまな表現の選択肢を検討することができるので、上手くいくパターンを発見してデザインの完成まで持っていくことを計画的に実行しやすくなります。
そのため、何度もブラッシュアップを重ねて完成に持っていきます。
参考を探し、パターンでアイデアを試して、チェックした結果、まだ方向性を考える必要がある場合は、表現を詰める前にアイデアの方向性自体を詰めていくべきです。
そういう意味では”方向性のブラッシュアップ”をするのもこのフローになります。具体的には気づきを得たものを新しく試すために、フローの最初である参孝探しから始めます。
え、また1から？と思うかもしれませんが、アイデアの方向性が悪いまま細かい部分を詰めていても土台が悪いので悪いままです。土台を固めるのがとても大切なので、臆せず、むしろ最初から初めのアイデアのまま行けるわけとは思わずに、壊す前提でデザイン制作を進めましょう。
1~4の流れは今まで書いてきた話です。比較で改善点を出したらそれをもとにまたブラッシュアップしていきましょう。
場合によっては途中で参考を集めないとイメージが掴めないことも多くあります。その場合は都度ブラッシュアップするたびに参考調べから戻り、アイデアを作り…と繰り返していきます。
これを繰り返すことで自分が作るべきものの精度、アウトプットの精度が高まりやすいです。
最初のアイデアに固執せずどんどん壊してブラッシュアップしていき、完成度を高めるデザインの流れを実践していきましょう。
オリジナルであるかなんてどうでもいいのか、とこの記事を読んで人は思ったかもしれない。そうではない。うまくなるために最初からオリジナルを考えることはできないから、世の中の”ふつう”＝基礎を吸収することからはじめよう。守破離の「守」を速攻でやる方が上達が早いよ。というのがこの記事の趣旨です。
ではUIデザインにおけるオリジナリティとはなんなのか？個人的な考えではそれは「コンセプト」に全て紐づきます。言い換えればサービスが持っている価値観であり、それが体験を通してユーザーに伝わったときにオリジナルは伝わると考えています。決して他と見た目が違う＝オリジナリティがあるという浅い話ではないということです。それはただ奇抜な目立ちたがり屋であると個人的には考えます。
たとえばHeadspaceという瞑想アプリがあります。DLしてみるとわかりますがかなりポップです。そしてイラストが穏やかさを演出しています。「瞑想」と聞くと、なんとなく怪しい、蓮の葉、なんか鐘の音が鳴りそう、などのイメージを持つことが大半な気がしますが、Headspaceはそういうイメージをもちにくいでしょう。
これはHeadspace自体が瞑想をもっと身近にしたいというコンセプトがあり、ユーザーが手に入れたい穏やかさをイラストで表現しているためです。つまりコンセプトがありその体験を表現する結果、こうなっているのです。見方を変えれば何かの絵本でHeadspaceのような表現を探すことはできるでしょう。そう考えると決して唯一の見た目＝オリジナリティではないことがわかります。
ユーザーにどういう体験をしてもらいたいか、それがユーザーに受け入れられるか？、その体験をどうやったら表現できるか？これが合わさって顧客に届いた時に、オリジナリティは生まれると思っています。
「アイデアのつくり方」という名著に”アイデアは組み合わせ”と書いています。スティーブ・ジョブズもiPhoneを何もないところから生み出したわけではないでしょう。すでにノキアがスマートフォンを出していました。逆にWindowsもAppleが開発したGUI（コードではなく今のパソコンのように擬似的なフォルダなどをクリックして操作するUIのこと。昔はパソコンはコードで操作していた）を真似てWindowsを成功させました。
盗みが良い悪いの前に、アイデアは組み合わせで進化してきていることに気づくのが大事です。今まで全く誰も見てきたものが次の新しいものとして受け入れられるのではありません。アイデアは組み合わせで進化したり、時代によって変化しています。
デザイナーとして作っていくためにはまずは「アイデア」を知る必要があります。そのためにも基礎として世の中の”ふつう”を知りましょう。その引き出しが増えてくるとそれを組み合わせられるようになってきたり、応用できるようになっていきます。
そうして顧客に即した体験のコンセプトを体現するビジュアルやUIをデザインすることであなたが作るデザインは”オリジナル”になるのかもしれません。
まずはさまざまなデザインから学び、作り、基礎スキルを伸ばしていきましょう。
BONOではこれからUIUXデザイナーを未経験から目指したい人や、UIUXデザインの基礎を身に付けたい現場１−2年のデザイナーに向けたコンテンツを制作、販売しています。
もしよろしければまずはUIUXコースを見てどういう基礎を身につけるべきかなど、覗いてみてください🙋
未経験からUIUXデザイナーを目指すUIUXコース
https://www.bo-no.design/rdm/roadmap-uiuxdesigner
こんにちは！カイクンです。
BONOのUIUXコースでUIデザインの見た目の基礎から進める人に向けて、上達を早める、かつ、基本的なデザイン制作の流れをお伝えします。
精度を高め、上達の高いデザインを作る流れのイメージは以下のような形です。
アイデアを試して、それを自分で評価して、改善するべき部分をブラッシュアップ、必要があれば再度参考を探したり調べたりしてどんどんアイデアをふくまらせたり、研ぎ澄ましていきます。
最初のアイデアをいかに試して壊せるかが、デザインのクオリティアップには不可欠だと考えています。
ただ闇雲に作ったり頭の中にあるアイデアだけに頼るのではなく、特に初心者が世の中のものを参考にしながらベストなデザインを形作っていくデザイン制作の流れの型と1つ出会うことができます。正解はありませんが、初心者がこのフローを真似することでデザインのインプットをしてすぐに試し、なぜこのデザインなのか？を言語化しながらブラッシュアップのサイクルを回すやり方のイメージを持つことができるはずです。
UIデザインだけではなくどんな制作にも応用できるやり方になります。具体的な紹介はBONOの別のコンテンツになりますが、イメージを掴んでいただけると幸いです。
このデザインフローのステップ3までを意識できる「ゼロから始めるUIビジュアル入門」と、ステップ４以降を体験できる「ゼロからはじめる情報設計」をBONOではメンバー限定で実践できます。
https://www.bo-no.design/series/tutorial-uivisual
BONOの「UIビジュアル基礎コース」に入っているミニコースです。
Figmaの使い方とUI見た目の基本的な作り方を学習できるのが「ゼロから始めるUIビジュアル入門」のシリーズになります。大枠どういうふうにUIを作っていくことでビジュアルスキルやUIそのものに詳しくなれるかをトレースしながらトレーニングしましょう
動画の中ではToDoサービスを動画にしたがって作成していきながら、世の中の基本UIを真似しながらUIを構築していくことで基礎を身につけるUI制作のやり方を理解できます。
https://www.bo-no.design/series/ui-architect-beginner
要件とユーザーがやりたいことから始めて、UIのアイデア出しをして最適なUI設計のするデザインフローを解説するミニコースです。ラフとパターンを作り、自分で自分のデザインに疑問を持ち、また新しいアイデアにブラッシュアップして質を高めていくデザイン制作の基本を身につけることができます。￥
最初のアイデアにずっと固執してデザイン内容をあらゆる角度で検討できなと、良いデザインに辿り着くチャンスを逃しやすいです。またデザインの検討のためにパターンを作ったり参考を色々見るのは、自分のデザインの妥当性を考えることにも繋がります。
この記事では各ステップの内容の全体像をまずは理解するために、理由とフローを見ていきましょう。
デザインやアイデアの基本は”組み合わせ”です。一部の人には残念かもしれませんが僕らはアーティストではありません。デザイナーです。求められることは、要件やユーザーに最適なUIを”選ぶ”ことで組み立てていく感覚です。
このステップの目的は自分がデザインする対象に近い世の中の参考事例を探し、自分が制作する際のイメージを具体的に持つことです。
参考記事：【初心者】最短で基礎を得るUIデザイン勉強法、それは定番UIのマネです
https://www.bo-no.design/contents/howtostudydesign-steal
デザイン初心者のうちは世の中の一般的な事例を知って研究することが基礎を身につける近道になります。
例えるなら、デートを成功させる服を選ぶ、大事なカンファレンスでの衣装を選ぶ、洋服のコーディネーターのような立ち位置です。自分で服を作ったとして、いつでもオリジナルのある服が求められるわけではありません。その目的に応じた機能や、”ふつう”のパターンがあります。それをうまく選んで成功の助けをします。UIデザインも似たようなものです。
そのためにはまず”世の中のふつうのUI”を知っていくことが大切です。既存で溢れいているUIに詳しくなることで適切なUIの知識が入り、適切なUIを選んで作っていくことができます。UIに詳しくないのに選ぶことも判断することも難しいでしょう。
なので必ずデザインをする前に自分が作ろうとしている機能や目的に近いUIを探してください。１つではなく複数探しましょう。そしてそれを参考にしてパターンを作るのです。
まずは”ふつう”を知ることでUIに詳しくなり、顧客や目的にぴったりのUIを作ることができますし、見た目も整ったUIをデザインすることができるようになってきます。
これはどの分野でも活かせます。例えばバナーのデザインからグラフィックを学ぶ際もまずはバナーデザインの普通を真似したり普段から見るようにします・
「センスは知識から：デザイン前に参考デザインを集める上達を加速する3つの理由」
真似しよう！と思うと「えー全く同じ機能や情報じゃないやつじゃないと、真似できなーい」と思うことでしょう。そういうことではないです。小さい単位から大きい単位まで、盗める目を養っていきましょう。
大きくは「構造」と「機能」と「ビジュアル」で盗んでいきます。この２つは全く別物ではなくそれぞれ重なっている部分があります。ただ大きな見方として2つに分けることができます。全く別物ではなくお互いに相関関係ということは、覚えておいてください。
（つまり、良い見た目は機能的になりうるし、使いやすい機能は見た目も良かったりします）
UIデザインの難しいところであり楽しい部分は構造が大事な点です。
構造とは具体的な例を出すと、
①そのページで表示する情報の優先度・並び、
②ページ間の関係性やナビゲーション、になります。
まずは見た目を考えると①から理解すると良いでしょう。
②に関してはBONOでは「使いやすいUIの秘密」シリーズでみっちりやっているので有料ですがぜひ興味を持った方はご覧ください。
①について：
例えば「そのページの主題は何か？」、「主題を構成する要素は何か」などです。以下のようなメルカリのページで考えるとどうなるでしょうか
このページは「ホーム」なので主題は「ホーム＝起点」になるページです。もっと具体化した方が良いので考えるとこのページにはマイリスト/おすすめの2つの画面があり、おすすめの中には「いいねした商品」「最近検索した商品（すのこ）」が並んでいます。
つまり自分の興味に基づいた商品を表示する仕組みがホームになっています。
つまり起点としては”自分がサービス上で直近興味を示したもの”がホームであり、その内訳としてマイリスト/おすすめがあります。
おすすめの中では上位2つとして「いいねした商品」「検索した商品」を並べています。
こういう表現の構造を「構造単位」です。
この構造が自分のサービスに使えそうか？どうかを確認して盗むことを構造単位での参考とこの記事では呼びます。
このメルカリの例の場合では、自分のサービスでもアプリの最初の画面をユーザーの行動を軸にした商品訴求にした方がユーザーのゴールに合致するなら参考にできますし、そうでなくても、カテゴリと商品をタイル上に見せる見せ方の構造を参考にできることもあります。
このように構造から自分の作っているUIやデザインの目的を達成する参考を盗むことを構造から盗むことです。
この部分はとっても難しいですがUIでは特に大切な部分にはなってきます。
初心者のうちからこの視点でUIを見れるようにはなっておくと、時間はかかりますが恩恵が得られるのが早まるでしょう
真似をする時に、まんま同じ仕様、要件、のページや画面はかなり少ないでしょう。1ページ全てを真似する、などと考えては当然真似しきれません。同じ顧客で、同じ要件と機能でないとそんなものは存在しないからです。まずは”機能単位”から盗めるものを考えましょう。
機能単位とは”今自分が作っているUIやページで達成しなければいけない目的”単位で盗むものを探すことです。具体的に例えるなら、「日付の期間を入力」しないといけないUIをデザインするのであれば、どんなサービスでもいいので「日付」の入力、「2つ以上の日付の期間」を入力するUIやサービスを探します。
何があるでしょうか？私生活で考えてみましょう。おそらく真っ先に上がりやすいのは「旅行」でしょう。そう考えると「ホテル予約」や「航空券予約」のUIを参考にすると「日付の期間入力」UIの参考を探せると思います。
自分が作っているサービスが全く旅行とは関係ないものでも、1機能だけのUIを見れば参考にできるものはあります。
盗む時は見た目だけではなく、機能面に着目して盗んでいきましょう。・どういう挙動をするのか？・入力するならどういうふうに入力？・どういう操作ステップか、などなど
UIデザインは絵を作るのではなく体験をつくるものです。そのため見るだけではなく触って確かめることを確実に行なってしっかり盗んでいきましょう
ビジュアル単位とは見た目の雰囲気を決める変数のことです。色・サイズ感・余白感・フォント・角丸・ボーダーなど、ビジュアルを構成する基本要素が対象です。同じ機能でもこれらのサイズや要素が違うだけで全く違うテイストのものに仕上げることができます。
そのためビジュアルを参考にするのなら「コレぐらいのタイトルの重要度に、どれぐらいのサイズを使っているか」「余白はどれぐらいのサイズを最低、最大で使っているか」など、全体のサイズやビジュアルシステムの感覚を吸収していくことが良いです。
そのため基本的なビジュアルシステムの理解をすることがビジュアルデザインを盗み上達するためにかなり有効になります。「UIビジュアル基礎」シリーズで学ぶことができます。
そのためビジュアルテイストに関してはUIであればUIを見るだけではなく、Webサイトやポスターなどからそれぞれの要素を盗むことも可能です。そのまま当てはめづらいですが、各要素がどのようになっているかは確認することができるため盗むを応用しやすいです。コレは機能単位で盗むのとは違います。
ToDoサービスをデザインする流れでテイストを変更する動画です。こちらの動画の内容のようにビジュアルテイスト面だけ参考にして取り入れることで昨日などはそのままに見た目の雰囲気を変更することができます
【動画】全く別テイストにUIを変更する方法を教えます
https://www.bo-no.design/contents/tutorial-uivisual-06
参孝
【メンバー限定】バナーデザイン：”イケてる””出したい雰囲気”のデザインを集めてクオリティUP
https://www.bo-no.design/contents/bannerbeginner-02-3
→バナーデザインを事例にしてビジュアルテイストの決め方について話している動画です
グラフィック入門：ムードボードを作って出したい雰囲気を作る方法（一部無料）
https://www.bo-no.design/series/graphicbeginner
→Webサイトのアイキャッチを作る過程でビジュアルテイストのアイデア創出の流れを体験できます
このステップの目的は、いきなり装飾的な部分からやるのではなく、まずは自分の制作物の目的を把握して、”何を満たす必要があるのか”からアイデアを考えていくことです。
どれだけ見た目が良くても目的と合致しなければその制作物に意味を見出すことは難しくなってしまいます。なのでまずデザイン制作の最初のステップでは、目的に合致するレイアウトなどはどのようなものか？からデザインを詰めていきましょう。
UIを作る時もバナーでも、まずは”機能”面から考えよう。
機能面とは作ろうとしているデザインにどういう情報が必要か？何を伝えないといけないのか？何をやってもらわないといけない画面か？を考えて画面のレイアウトから作っていくことです。
この段階ではそこまで見た目のテイストはまだ考えなくて大丈夫です。そこは後に回して作るべきUIで満たすべき内容を実現すると、どういうレイアウトになるのか？情報になるのか？を考えます。
機能や構造の参考を使って、そこから盗みながら機能面のデザインをまずは詰めていきます。
”ふつう”を知るのパートでも書いた通りまずは”ふつうのUI”に詳しくなることで、UI自体の理解が進みます。UI自体に詳しくなることでアイデアを出せるようになり、そのアイデアを組み合わせていくことでUIを自在に操り主体的に考えることができるようになります。
Webサイトやバナーなど、他の制作媒体も基本的には同じです。それぞれのジャンルでよく使われる表現・機能などが存在します。まずはそれを真似していくことで基本が身につきます。
そのため参考で集めたものを”真似すること”から始めましょう。パクリなどはないです。機能や要件や顧客設定まで全て真似しちゃうとパクリになりますがUI表現やUI機能表現にオリジナルのものはほぼ存在しません。1機能のUIを複数集めればわかります。そこまで違うことはしてません。違うのは顧客設定と要件です。
なのでまずは参考にしたものを真似してどんどんUIを作り、そのUI表現の良し悪しを自分で吸収していきましょう。
自分が体験したことない、認識したことのないUIを作っているなと感じたら即座に疑問を持ちましょう。そんなUIは存在しない可能性が高いです。その時は即座に参考を調べにいきましょう。
機能単位、ビジュアル単位で、まずは参考のものをトレースする勢いでどんどん参考にしましょう。
ログイン画面を作っているのであれば、同じジャンル（SNSならSNS、など）の参孝UIを集めて良し悪しを整理したら、その良いと思う部分をどんどん自分の作るべきUIに落としていきましょう。落とす時はトレースする勢いが最初はおすすめです。
なぜか。なぜならまだUIに詳しくない上に、表現にも疎い人がほとんどだからです。なのでそこから学ぶ、かつ、自分の中にない感覚ではなく世の中の一般的な感覚、つまりサイズ感や色の強さなどを参考にしてUIを作っていく方が結果、上達の観点、アウトプットの観点から良いからです。
そして逆に、1機能や1UIグループ観点でかなりサイズなどが違う、というものを探す方が難しいでしょう。ログイン画面の「フォームUI」だけのUIデザインを例に出すと、おそらく３種類全く違うものを見つけるのも難しいはずです。UIは微々たる違いでバランスを取っていたりもするので、その微細な違いに気づく、考える上でもまずは真似して作ってみる。
その複数作ったものを比較してみる、ということを通してうまくなっていくことが上達の近道であり、”ふつう”のアウトプットをすることにつながります。
なので、トレースだけの練習をせずに、自分で作る際にどんどん参考を調べてどんどんトレースする勢いでUIを作ってみる。それも1方向性ではなくさまざまなパターンを作ってみることをお勧めします。
デザインの作成能力を伸ばすには”目”を鍛えるしかありません。ただじゃあ”目”を鍛えろと言われても難しい。そこで大事なのが”比較”を使うことで。
比べることで違いに気づきやすくなります。そうすることで目の使い方を徐々に鍛えていくことがやりやすくなります。いきなり良いもの、と言っても難しいので、集めた参考を比較したりすることから始めるのが良いと考えています。
その中でも「自分が作ったものを比較する」ことで、自分のデザイン自体にも目を使いやすくなり気づきが多くなりやすいです。自分のデザインを壊せというと難しい、という人がいますがそういう人こそ比較を試してみてください。
ーー 参考のデザインと自分のデザインを比較する
ーー 複数のアイデアをつくり、自分のデザイン同士を比較する
特に自分のデザインに目を光らせて、改善してクオリティを上げていくことが1番目のトレーニングになります。なので必ず自分のデザインをする時はさまざまなアイデアを出して、それを比較しながらどんどんブラッシュアップする癖をつけていきましょう
いきなり1方向性だけでデザインを作り始めるのはお勧めしません。
なぜならその方向性より今回伝えたい・作りたいものを考えた時によりよい方向性がある可能性を確かめていないからです。そこまで考えなくてよいものであるならいいですが、デザインレベルが低いうちや経験が少ないうちほど、ラフデザインからさまざまな方向性を試しながら、どういう見せ方が機能的か？を考えておくことが重要です。これはUIに限らずあらゆる制作で使う考え方です。（プロトタイピングと読んだりします）
そのためデザインの工程としては「ラフ」→「パターンで機能や要件を満たせるか考える」→「方向性を絞りながら質を上げる」という風に考えて、詰めていくことがお勧めです。
自分が対峙している要件や機能に対して「こういう選択肢もあるかも？」を多く持てるようにしましょう。そして、そのUIパターンを全て形にして、それぞれの選択肢のメリット・デメリットをしらみつぶしで検証していきましょう。
この工程をデザイナーがサボると、だれも「本当はもっとこうできるかも？」「このUIパターンは良いのか悪いのか」を形にして試すことがほぼできません。
採用されないかもしれないけど、完成系に近いイメージを早く具体化して試すことができるのがデザイナーが持つ、他の職種にない強みです。（エンジニアリングではパターン作成に時間がかかるし、ディレクターなどはそもそも具体化できる力が弱いです）
なのでUIに責任を持つデザイナーが、UIのパターンはしらみつぶしに可能性を試すために形にしましょう。パターンを作成しましょう。パターンを試して気づきを得ましょう。気づきを得たら改善点にしてよりクオリティの高いUIを詰めていきましょう。
これをすることで自分のUIに対するフィードバックになるし、さまざまなUIを見て考えて吸収する機会になります。つまりデザインの上達機会にもなるのです。
全てのプロジェクトで１ヶ月可能性を検討できればいいかもしれませんが、要件などによってはリミットが存在します。そのため、どれぐらいパターンを作り検証するのか？はその都度変わるのですが「時間」と「検証すべき項目」の２つの変数を考えて期間などは決めましょう。
少なくとも「このUIで達成したい目的を果たせるのか？」が重要です。果たせない・果たせるかわからないUIでリリースするわけにはいきません。少なくともデザイナーはそこに責任を持ちます。
ステップ4の目的は作成した方向性のパターンを、新鮮な目で自分で確認することです。この工程をしっかりやることで”デザインをする目”を養うことができるでしょう。
目のレベルが高いと盗めるレベルも上がりますし、気づくレベルも上がります。結果として質の良いアウトプットの作成につながってくるのです。
UIが良いかどうかを１つのものだけ見ても判断するの難しいです。他のUIパターンや機能の良し悪しの知識ストックがあればそこと比較することができ、良い点・悪い点を言語化はやりやすくなります。
なので自分のUIを批評する、目指す形にこのUIでいいのか？他にブラッシュアップしたり、考えるべき点はないのか？を考えるためにも”UIのパターンをつくる”ようにしましょう。パターン同士を比較して自分のUIのクオリティを高める改善点は出しやすくなりますし、”こういう方向性の方が良いかもしれない？”も具体化することで、しっかり見定めることができます。
パターンを作り比較するのは時間が掛かりますが、これをサボると自分のスキル上達がかなり遅くなります。パターンを作れば作る量も増え、インプット量も増え、気づきも増えます。
パターンを作成してUIを比較する時は必ず「ユーザーが触れる形」で批評しましょう。FigmaなどでUIが並べられたものを俯瞰する形でユーザーはUIには触れません。
スマホアプリであればスマホの中に写されて手で持った状態、パソコンであればブラウザに表示された状態で触ります。その状態で自分のUIを見ることで客観的に見ることもでき、改善手にも気づきやすくなります。
必ずユーザーが触る時と同じシチュエーションでUIを評価するようにして触って改善点を見つけてください。
作成したUIパターンを批評する時は、パターンごとにメリットデメリットを出しましょう。そしてただ出すのではなく”目的とユーザーを考えた時のメリデメを出すようにしてください”。そうすることで単なる自分の感想ではなく、果たすべき要件や制約を考えた上での気づきになりやすいです。
例：ログインフォームを作るとき
ーーフォームにフォーカスが当たってる時はどういう状態であるとユーザーにわかりやすいか？世の中のフォームの機能は何か工夫してないか？
ーーフォームの入力内容がエラーの場合はどういう対応をされるべきか？世の中のUIはどうなっているか
ーー間違えてログインの方に来たが新規にいきたい時は？世の中のUIはどういう配慮や設計をしている？
これらを考えてメリットデメリットの観点でパターンごとに言語化します。この言語化を通して、次のブラッシュアップパターンに取り掛かります。
そして言語化することでUIを説明する能略、UIがなぜこの形が多いのか？と言った気づきにもつながり、UIデザインスキルのレベルアップに繋がります。
ステップ4までの気づきを使って自分の制作物の質を上げていくのがこのステップの目的になります。闇雲にブラッシュアップしろと言われても難しいですが、方向性の比較をしたりしてきたので気づきを得やすい状態になっているはずです。
最初の自分の考えにとらわれず客観的な目線で批評した今、よりよい形にするアイデアがきっと自分の中に手に入っているはずです。
UIでもWebサイトでも、いきなり１つの方向性だけで完成度を80度まで持っていくのはお勧めしません。軸となる表現が間違ってしまって要件と合わなかったり、表現そのもののクオリティが高まらない方向性で頭でっかちにやってしまうと、目的も表現力的にも間違うことが多いです。（時間が足りない時などはそういう時もありますが例外で考えてください）
基本的には以下のように考えます
1: まず今回伝えたいものや目的に合うアイデアを広く考える
2: ラフに作ってアイデアを具体化、具体の状態で検討する
3: 1-2を重ねてアイデアの強度を強くする
4: 1~3を繰り返して、だんだん方向性を固めていき表現も固めていく
こうすることでさまざまな表現の選択肢を検討することができるので、上手くいくパターンを発見してデザインの完成まで持っていくことを計画的に実行しやすくなります。
そのため、何度もブラッシュアップを重ねて完成に持っていきます。
参考を探し、パターンでアイデアを試して、チェックした結果、まだ方向性を考える必要がある場合は、表現を詰める前にアイデアの方向性自体を詰めていくべきです。
そういう意味では”方向性のブラッシュアップ”をするのもこのフローになります。具体的には気づきを得たものを新しく試すために、フローの最初である参孝探しから始めます。
え、また1から？と思うかもしれませんが、アイデアの方向性が悪いまま細かい部分を詰めていても土台が悪いので悪いままです。土台を固めるのがとても大切なので、臆せず、むしろ最初から初めのアイデアのまま行けるわけとは思わずに、壊す前提でデザイン制作を進めましょう。
1~4の流れは今まで書いてきた話です。比較で改善点を出したらそれをもとにまたブラッシュアップしていきましょう。
場合によっては途中で参考を集めないとイメージが掴めないことも多くあります。その場合は都度ブラッシュアップするたびに参考調べから戻り、アイデアを作り…と繰り返していきます。
これを繰り返すことで自分が作るべきものの精度、アウトプットの精度が高まりやすいです。
最初のアイデアに固執せずどんどん壊してブラッシュアップしていき、完成度を高めるデザインの流れを実践していきましょう。
オリジナルであるかなんてどうでもいいのか、とこの記事を読んで人は思ったかもしれない。そうではない。うまくなるために最初からオリジナルを考えることはできないから、世の中の”ふつう”＝基礎を吸収することからはじめよう。守破離の「守」を速攻でやる方が上達が早いよ。というのがこの記事の趣旨です。
ではUIデザインにおけるオリジナリティとはなんなのか？個人的な考えではそれは「コンセプト」に全て紐づきます。言い換えればサービスが持っている価値観であり、それが体験を通してユーザーに伝わったときにオリジナルは伝わると考えています。決して他と見た目が違う＝オリジナリティがあるという浅い話ではないということです。それはただ奇抜な目立ちたがり屋であると個人的には考えます。
たとえばHeadspaceという瞑想アプリがあります。DLしてみるとわかりますがかなりポップです。そしてイラストが穏やかさを演出しています。「瞑想」と聞くと、なんとなく怪しい、蓮の葉、なんか鐘の音が鳴りそう、などのイメージを持つことが大半な気がしますが、Headspaceはそういうイメージをもちにくいでしょう。
これはHeadspace自体が瞑想をもっと身近にしたいというコンセプトがあり、ユーザーが手に入れたい穏やかさをイラストで表現しているためです。つまりコンセプトがありその体験を表現する結果、こうなっているのです。見方を変えれば何かの絵本でHeadspaceのような表現を探すことはできるでしょう。そう考えると決して唯一の見た目＝オリジナリティではないことがわかります。
ユーザーにどういう体験をしてもらいたいか、それがユーザーに受け入れられるか？、その体験をどうやったら表現できるか？これが合わさって顧客に届いた時に、オリジナリティは生まれると思っています。
「アイデアのつくり方」という名著に”アイデアは組み合わせ”と書いています。スティーブ・ジョブズもiPhoneを何もないところから生み出したわけではないでしょう。すでにノキアがスマートフォンを出していました。逆にWindowsもAppleが開発したGUI（コードではなく今のパソコンのように擬似的なフォルダなどをクリックして操作するUIのこと。昔はパソコンはコードで操作していた）を真似てWindowsを成功させました。
盗みが良い悪いの前に、アイデアは組み合わせで進化してきていることに気づくのが大事です。今まで全く誰も見てきたものが次の新しいものとして受け入れられるのではありません。アイデアは組み合わせで進化したり、時代によって変化しています。
デザイナーとして作っていくためにはまずは「アイデア」を知る必要があります。そのためにも基礎として世の中の”ふつう”を知りましょう。その引き出しが増えてくるとそれを組み合わせられるようになってきたり、応用できるようになっていきます。
そうして顧客に即した体験のコンセプトを体現するビジュアルやUIをデザインすることであなたが作るデザインは”オリジナル”になるのかもしれません。
まずはさまざまなデザインから学び、作り、基礎スキルを伸ばしていきましょう。
BONOではこれからUIUXデザイナーを未経験から目指したい人や、UIUXデザインの基礎を身に付けたい現場１−2年のデザイナーに向けたコンテンツを制作、販売しています。
もしよろしければまずはUIUXコースを見てどういう基礎を身につけるべきかなど、覗いてみてください🙋
未経験からUIUXデザイナーを目指すUIUXコース
https://www.bo-no.design/rdm/roadmap-uiuxdesigner
0 Comments