【初心者】最短で基礎を得るUIデザイン勉強法、それは定番UIのマネです | センスを盗む技術 | BONO

2. 【初心者】最短で基礎を得るUIデザイン勉強法、それは定番UIのマネです

クエスト1: なぜ初心者ほど盗む必要があるのか？

‍こんにちは！カイクンです。‍BONOのUIUXコースでUIデザインの見た目の基礎から進める人に向けて、基本を身につけるための近道についてこの記事では書いていきたいと思います。

それは”真似をするということ”です。なぜ真似なのか？そもそも真似してデザインしていいものなのか？解説していきます。

記事の目次

なぜ「ふつう」を盗むべきなのか
「ふつう」のUIを参考にしてUIをデザインしていくやり方
参考デザインを盗む時の3つの視点
参考のUIデザインの探し方・リソース集

‍

オリジナリティはいらない、「ふつう」を真似して引き出しを増やそう

まずはじめに”デザインするなら自分ならではなのオリジナルの要素がないといけない…”と思っている人は考えを改めましょう。特に”オリジナルな見た目”をしたものを作らないといけない、ポートフォリオに載せたないといけないと思っている方は一緒にこの記事で改めていけたら嬉しいです。

初心者にはオリジナリティは必要ありません。というかオリジナルで機能するものを作ることはほぼ不可能と考えましょう。とても難易度の高いものだし、UIデザインに関してはオリジナルな”見た目”は求められないことが圧倒的に多いです。

どういうことかというと、まず目指して欲しいのは”ふつうに扱え、操作ができる、ふつうのUI”をデザインすることです。UIそのものに個性を誰も求めていません。まずは機能させたいこと、要件としてユーザーさんに満たしたい操作を実現するUIが作れる人が会社では欲しいのです。

ちなみにアプリやサービスを使っているときに”このサービスのUIの見た目は特徴的だから好き！！”と思って、ずっと使い続けているサービスはありますか？1つでもパッと浮かぶ人はかなり少数派ではないでしょうか。

僕らがサービスや機能に愛着を持つのは見た目だけの要素ではありません。全体の体験が良かった結果、愛着を持ちます。それこそがオリジナリティのような”差別化”につながります。つまりオリジナリティが必要なのではなく、闇雲な独創的な見た目をユーザーは求めているワケではないのです。

UIデザインをするにしても何にしても、僕はBONOを通してあなたが社会に対する創造性を発揮する1歩に協力したいと考えています。この状態になるには、何かしらのオリジナリティのようなものが備わっているかもしれません。なので何もコピーキャットになり続けろと言いたいわけではありません。

ただこの記事の対象であるUI初心者はまず基礎を身につけねばなりません。その土台を築くために世の中の”ふつう”をどんどん真似していくことで、デザイナーが当たり前にやっている基本を身につけることができます。そのためにどんどん真似して盗んでいって欲しいのです。

アイデアのつくり方→アイデアに関する名著でも、新しいアイデアは既存のアイデアの組み合わせと述べています。‍https://amzn.asia/d/9S7Hdvz

‍

デザインの引き出しを増やして、基礎を身につけていこう

UI、それ以外のデザインでも、まず上手くなろうと思うのなら、ベストプラクティスを1つずつ理解していくのが近道です。

すでに8-9割の場合に”良い”とされて採用されているUIが存在しています。まずは使えるものをデザインできるようになるのが先決と考えると、そういう”ふつう”＝”ベストプラクティス”なものを真似してどんどん引き出しを増やしていく方が良いでしょう。料理人を目指そう！と思っていきなり自分で調味料の配合からはやりませんよね。まずはよくあるレシピを真似していくことで調味料や配分、料理工程で変化する味を学んでいくと思います。世の中のUIデザイン（レシピ）をどんどん真似して参考にしていって世の中のUIに詳しくなっていくことが上達の近道です。

‍

真似をして学ぶことがじぶんだけの創造性にもつながる

実はオリジナリティなんて要らないという強い表現を使っていますがそんなことはないと個人的には考えます。基礎を身につけるために真似をして良い部分を見て学ぶ経験は、自分が好きなデザインや好きなクリエイティブ、思想などをコピーする練習にも繋がります。自分の考えや創造への姿勢をレベルアップしていく際に世の中の偉人から学ぶことはかなり効果的です。

そうやって自分の思想や趣向を広げて深めていく際にこの記事のやり方は役に立つでしょう。最初は真似をすることも難しいです。学問や理論だけじゃなく世の中に起こっていることなどからもたくさん吸収して自分の創造性を高めていくその1歩になればと思っています。‍

👇アイデアから創作していく入門書のおすすめ

クリエイティブの授業 STEAL LIKE AN ARTIST "君がつくるべきもの"をつくれるようになるために‍https://www.amazon.co.jp/クリエイティブの授業-STEAL-ARTIST-君がつくるべきもの-をつくれるようになるために/dp/4788908050/ref=sr_1_1?__mk_ja_JP=カタカナ&crid=7YH073U0M6I9&dib=eyJ2IjoiMSJ9.3O2B2Fl9DDclN7pJ-YhHImNE5Csf4X7oeaYsod48wmBEZNAwoxaYdDGo65ZQFmdZfIWDiIQNGVFAcjSUKzEHZqvP-QgiDYnKIwOY-AKyldo1RIDUBqDGl05cT3Kki3RVoTwEuRVsw_Rz3fHQAkOsxe-EYkxh1Oi3waO4Y-H8M_E.4UjzDrX_J-xjV8n3irTNoivuZwHLF0G9czbRzmAqE7w&dib_tag=se&keywords=クリエイティブの授業&qid=1734592810&sprefix=クリエイティブの授業%2Caps%2C249&sr=8-1

‍

デザインをする時は常に”参考にするデザイン”を探して、それを隣におきながらデザインしましょう。世の中に普及しているUIから学んでいくのです。デザインする時に必ず参考を集めるし、それ以外の時間でも日頃から普及しているUIをどんどん触って引き出しを増やしておきましょう。

‍

ふつうを参考にデザインしていくやり方

UIの知識や経験が少ない初心者には個人的に以下のやり方を必ずUIをデザインする時にやることをオススメします。このやり方は別のデザイン成長の近道をまとめた「デザイン制作の流れの解説」と同じ内容になります。

1:参考のUIを調べる2:となりに参考を置きながらUIをデザインする3:マネをしながら自分の作るべきUIのパターンを作成4:パターンを見ながらUIの方向性を検討する5:検討からわかったことを下にブラッシュアップ6:繰り返す

基本的に何もない状態で作るよりイメージがある状態でデザインを始める方が狙った形になりやすいはずです。特に初心者はUIの知識も経験もありません。自分の頭の中にある不明瞭なイメージや自分独自の解釈のUIを作るより、まずは世の中のふつうをガンガン真似してイメージしながらUIをデザインする量を増やすのが基礎を身につける近道だと考えています。

この隣に参考を置きながらUIを作っていくを動画で解説しながらToDoサービスUIを一緒に作っていく解説シリーズがBONOにあります。初心者の方は利用を検討してみてください。一部無料で全てを見るにはBONOへの課金が必要になります。

ゼロからはじめるUIビジュアル‍https://www.bo-no.design/series/tutorial-uivisual

‍

参考にするデザインから盗む時の3つの視点

参考にする、真似をする場合に、”自分が作ろうとしているものと全く同じもの”しか真似できないじゃないかという考えに至るかもしれません。ただそれは間違っています。そういうわけではありません。

参考にするべき視点に決まりはないですが、おすすめの基本的な3つの視点をここではシェアしたいと思います。おすすめする盗むべき視点は以下の3つです。

①ビジュアルテイスト：見た目の雰囲気
②機能：XXをアップロードする、などの機能とそのフロー
③構造：レイアウトなどが関係する表示している情報の構造

特に機能と構造は「使いやすさ」にかなり密接につながっているため、UIをデザインする際はポイントになってくる要素です。参考にするデザインを見る時も探す時も、この3つで切り分けて”どこを参考にできそうか”、または”真似できそうか”という視点で探したり活用することが大切になります。

‍

①ビジュアルを盗む

見た目の雰囲気は基本的に「色」「フォント」「サイズ」「レイアウト」「余白」など、見た目を分解した要素の組み合わせで決まります。UIデザインの場合は、参考にするものがデザインしているものと違う機能やサービスカテゴリでも、見た目の雰囲気を参考にすることは可能です。

機能は同じで、ビジュアルだけ変更した例

UI見た目の基本の要素についてはこちらで詳しく解説と、実践的な学習が可能です。

つまり機能が違うから、ビジュアルテイストは参考にできない、ということはなく広く取られるとビジュアルテイストだけの参考であればポスターやバナーなど、UIではないデザインからもインスピレーションや具体的なサイズ感を参考にすることは可能になります。

以下の画像は架空のToDoサービスのUI画面です。Cuboxという後で読みたいリンクを集められるサービスのビジュアルテイストを盗んで適用してみた例になります。このように見た目のテイストを参考にしてビジュアルを参考にすることができます。

□ 他ジャンルサービスのビジュアルテイストを参考にした例→「ゼロからはじめるUIビジュアル」というシリーズでデザインしながら解説しています

ムードボードでビジュアルテイストを固めるやり方

参考のデザインから「ムードボード」を作成してビジュアルテイストの方向性を掴むことで盗むやり方もビジュアルに関して基本のやり方で有効になります。

この具体的にやり方を「グラフィック入門」というシリーズでBONOでは紹介しています。診断Webサイトのアイキャッチをデザインしながら、ビジュアルやレイアウトを盗む方法を解説するシリーズです。ビジュアルテイストの作り方の基礎を身につけ実践することができます。

↓出したいビジュアルテイストに近いものを集めて分析したボードを作るムードボードの例

グラフィック入門‍https://www.bo-no.design/series/graphicbeginner‍

‍

②機能を盗む

UIデザインでも特に大切な”機能”は世の中のUIからどんどん盗んでいきましょう。ここでいう機能とは例えば、メールアドレスを「入力するフォーム」だったり、「画像をアップロードする機能の流れ」、ブログ系のサービスでの「記事を新規作成する流れ」などを指します。

違うサービスでも”機能”を見れば参考にできる

全く同じ挙動をする機能であればそのまま参考にしやすいかもしれませんが、世の中そんなことばかりではありません。例えば今自分が作ろうとしている機能を言語化したときに以下のようなものを考えてみましょう。

”ある情報に対して、AとBをどちらか選択
選択肢は、ある内容に対して「OK：承認/」「NO：差し戻し」のどちらかを判定するもの
「NO：差し戻し」を選ぶと、NGにした理由を記入しなくてはならない

こういう機能の参考を探すときに全く一緒の挙動をする機能があれば簡単に参考にできそうです。ただ全く同じ仕様のものを探すのはかなり難しい場合がほとんどでしょう。

そんな時は”機能単位”で参考にしていくのです。例えば、AとBをどちらかを選択するUI → 選択系のUIってどういうのがあるっけ？選択する体験を提供しているUIって自分が使っているものでないかな？

そうすると選択系のUIとしては「ラジオボタン」のようなものや、「選択メニュー」のようなものを探し当てることができるでしょう。

こういうふうに全く同じジャンルのサービスや仕様でなくても機能単位で見ていくことで、参考のUIを探し当てることができ参考にできる確率が高まります。

‍

別ジャンルのサービスで機能だけ参考にした例

賃貸サービスの表示フィルタUIのアイデアをデザインするとしましょう。似たジャンルのサービスはSuumoやHome'sといったサービスになりますがそれ以外のサービスのUIからも参考にすることができます。

国内の賃貸サービスの検索フィルタをそのまま参考にして良いですが、”機能”の挙動を賃貸とは別のサービス、例えばAirbnbのような宿泊予約サービス、のUI機能だけ参考にしてUIをデザインするアイデアもある。

この画像はAirbnbのフィルタUIを、自分で作る賃貸サービスに適用してみたものです。家賃の幅や間取りの選択などの機能面のUIを参考にすることはできます。

※UIの中身は賃貸サービスのもの。外側の機能は Airbnbを真似したもの

‍

③構造を盗む

機能と同様に画面遷移、情報の優先度、などの”構造”単位でもUIのデザインを参考にすることができます。例えば「サービスのトップ画面には、ユーザーの行動に基づいたおすすめを表示したい」と考えているのであれば、例えばYouTubeのトップ画面やメルカリのトップ画面の構造を見ることで参考にできるかもしれません。

‍

情報の内容や構造を参考にする

YouTubeのトップ画面は、ユーザーが最近視聴したものやいいねを押したものをベースに関連した動画をおすすめしてくれます。YouTubeは特にグループなどで表示した動画の意図を示せない情報構造なので、なんでこれがおすすめしてくれているかは定かではありません。

メルカリのアプリのホームは、最近検索した商品や、自分がいいねを押した商品の一覧を見ることができます。YouTubeとは違う”グループ”が複数用意され、ラベル＋一覧という構造で、最近見たものからおすすめの商品を出すという取り組みを行なっています。

このように違うサービスで違うロジックでおすすめを表示しているものも”構造”に着目して分解することで、その意図や真似できそうな部分が見つけやすくなるでしょう。

メルカリとYouTubeのおすすめの考え方は似てるけど、サービスが違うのでそれぞれの表示UIと、表示するロジックは当たり前だけど違う↓

‍

「機能」と「構造」参考にする実践的なデザイン手法は別ページで解説

UI初心者（大体3年目ぐらいまで）のうちは必ず参考を横に置きながらデザインしていきましょう。自己流でデザインをするのではなく”世の中のUIはどうなっているか”踏襲して進めることでUIデザインの理解が進み、ビジュアルテイストの引き出しも増えていきます。

「UIデザイン力が上達しやすいデザイン制作のステップ」で詳しく解説しますが、基本的に以下のステップでデザインをしていきましょう。

ステップ1：参考UIを探す
ステップ2：パターンを作る
ステップ3：評価する
ステップ4：ブラッシュアップする

実際にどういうふうに参考にするのか？本当に3つの要素を参考にしてデザインできるのか？については「賃貸サイト「ホームズ」と同じ機能だけど、UIは「Airbnb」を真似したフィルタ機能をデザインしてみる」のお題の解答動画をご覧ください。

このお題の解答を筆者が動画で解説するというコンテンツがあります。こちらはBONOのメンバー限定の動画になるため無料では閲覧することができません。あらかじめご了承ください。

‍

UIは見るだけはNG。基本的に触って使って吸収していこう

このセクションでは参考のUIや良いサービスを探す方法などをお伝えしますが、まず大前提大事なことが自分で触って機能を体験することがUIデザイナーが参考から吸収するために最重要です。

UIデザインの参考サイトなどをみると、俯瞰してUIの絵を”見る”時間が長くなりますが、ユーザーはUIを見ません。触って操作をします。そのためデザイナー自身が触ってUIを吸収していかなと正しくUIに詳しくなれません。

なので参考サイトなどに頼って探すのは良いのですがアプリであれば自分でDLして触ってみる、登録して実際に使ってみるという姿勢の方がはるかに重要になってくることを覚えておいてください。

これから紹介するまとめサイトでサービスのことを知って、自分で使ってみるのもおすすめです。

‍

【探し方1】サービスに詳しい人をTwitterなどでフォローしておく

まずは地道なやり方を。個人的にはIT業界により入っていくためにも、IT業界の人たちがコミュニティ的に使ってるTwitter(X)で起業家や企業のデザイナーなどをフォローして日頃から情報を得るのがおすすめです。デザイナー以外にも、デジタルサービスを作っている起業家やPdMの人、スタートアップ界隈の人をフォローすることで、自然と新しい情報が入ってきます。

誰をフォローしてどう探したらいいの？って方は以下を参考にしてみてください

知っているIT企業名×役職名　などで検索して気になった人をフォローする
Cocodaで紹介されている会社の人を探してフォローする
カイクンみたいな情報屋はフォローしない、現場にいるプレイヤーの情報がリアルで質が高いです
noteで良いデザイン記事を書いている人を探してTwitterでフォローする

です。特に注意なのがTwitterのフォロワー稼ぎに躍起になって有益そうなまとめを発信している人ばっかりフォローすることです。

ここでポイントなのは、現場の人を知ることも含まれるので、そういう情報屋だけの情報になっちゃうと現場間がわからなくなってしまいます。なのでまとめばっかりツイートしてバズらせようとしている人やカイくんみたいに現場にいない人はフォローしないほうがいいです。わかりましたか〜？

それでも探せない、わからないっという人は、カイクンがフォローしている人をフォローしていくことでIT業界の入り口に建てるかもしれません。

‍

【探し方2】UIデザインがまとまったギャラリーサイト集

世の中にはUIデザインをアーカイブしているサービスサイトもあります。手っ取り早く探すのには役に立つのでいくつか紹介します。

○ App Store / Google Store‍

https://www.apple.com/jp/app-store/

○ Google Store‍

https://play.google.com/store/games?hl=en

‍

スマホアプリであれば、自分のスマホのアプリストアが最も簡単に触れるUIを手に入れることができます。自分が好きなジャンルのサービスや、仕事で関わっているジャンルのサービスはランキングのトップ100から片っ端からダウンロード。微妙なUIも良いUIも全て触っていくことがおすすめです。

○ Mobbin‍

世界的に有名なUIアーカイブサイト。無料では制限がありますが、海外のUIのほとんどのスクリーンショットを探して閲覧することができます。サービスごとだけではなく、コンポーネント別やサービスのジャンル別に閲覧することもできます。https://mobbin.com/

‍

○ UI Pocket

国内のサービスも海外の代表的なものも観れるのでこれが1番良いかもしれない

UI Pocket - UIデザインの参考になるアプリのUIデザインギャラリーサイト

‍

○ UX-mov

国産のUIアーカイブサイト。動きを動画で見ることができます。日本で主に展開しているUIのアーカイブが多いのでMobbinにないものも多くあります。https://ux-mov.com/

@kazutaka_dev,@ag_ayakanのお二人が運営。経緯を示して使いましょう

‍

○ Refero

Mobbinに似たUIアーカイブのサービス。こちらも有料で全ての閲覧ができます。2024年12月時点では3日間のフリートライアルがあるため一旦今すぐ見たい調べたい人はぱっと使ってみることはできるかも。

https://refero.design

‍

○ A/Btest

Mobbinが出している同じ機能のUIのABテスト結果をまとめてくれているサイトです。おそらく企業が何かしらで公開したことのあるテスト結果をまとめている？みたいです。基本的にポジティブな結果が出たUI比較のみが掲載されています。理由を考察してみると面白いかもしれません。https://abtest.design/

‍

【探し方3】UIパーツごとの使い方はガイドラインなどを参考にすると良い

UIの機能に関係あるUI表現/UIパーツごとに探したいときは少し難易度は上がりますが「公開されているガイドライン」を参考にするのも良いかもしれません。UI自体の知識や使い方を知る上でも有効ではあります。ただ実際にそのUIを作ってみたりしたことがないと、なかなか理解することは難しいと思います。そのあたりのバランスを加味しながら活用してみください。

スマートフォンを普及させたアップルとGoogleのガイドライン

○ Apple ヒューマンインターフェスガイドライン

言わずと知れたAppleのガイドラインです。iOS、MacOS、iPad、VisionOSなどなど、各アップル製品のUIの考え方を知ることができます。https://developer.apple.com/jp/design/human-interface-guidelines/

‍

○ Material Design 2

マテリアルデザインはGoogleが作り採用しているGoogle社のガイドラインです。AndroidやGoogle製品に適用されているガイドラインになります。紹介しているは「マテリアルデザイン2」で1つ昔のものを紹介しています。今の最新は「マテリアル3」なのですが、Androidとしての特徴が強く出ているUIガイドラインになりました。そのため普遍的な普通のUI,という観点でマテリアル2のURLを紹介しています。

https://m2.material.io/components/text-fields

‍

国産のおすすめデザインガイドライン‍

○ デジタル庁：デザインガイドライン

マイナポータルなど国のデジタルポータルなどを作る「デジタル庁」のデザインガイドラインです。かなりクセがなく基本に忠実に作っている印象が個人的にあり、勉強になりやすいと判断して紹介します。Figmaコミュニティで一般向けに一部のガイドラインを公開してもいるので、その点でも勉強・参考にしやすい国産のガイドラインかなと思います。

https://www.digital.go.jp/policies/servicedesign/designsystem

海外のデザインガイドラインまとめサイト

○ Design Systems Surf

海外のデザインガイドラインをまとめているサイトです。コンポーネント別に探すこともできるため、世界的にどういうUIの定義になっているのか？を見つける使い方にも適しているサイトです。なかなかこの規模感で世界のガイドラインと、コンポーネントへのリンクをまとめているものはないので紹介します。現場のデザイナーもガイドラインを探している人には便利なサイトだと思います。

https://designsystems.surf/

‍

【補足】Cocodaで国内企業のデザイン事例を見る

Cocoda

国内のIT会社のデザインチームの取り組みをまとめてみることができるサイトです。UIの参考を探すことは不向きですが、現場でどういうふうにデザインしているのか？どんなことを考えているのか？の情報を見ることができます。デザイン初心者のうちから現場のことを知ったり、現場で使われている用語や考え方に慣れておくのはとっても有効なので、Cocodaで気になる会社の情報を見たりして、現場のデザイナーが何をしているのか？を知っておくのはとてもデザインの参考になると思います。

https://cocoda.design/

‍

UIデザインスキルを上達させやすくするために、世の中の”ふつう”のUIを真似しく解説をしました。参考にするための3つの分解ポイント、参考UIの使い方、参考UIを探しやすくするサイトの紹介などを使って自分のデザインに役立ててください。

BONOでは現場10年以上の経験があるプロのデザイナーカイクンが、どうすれば有効なUIをデザインするか？のメソッドを実演通して解説しています。今回の参考を使って盗んでいく、を解説したデザインシリーズもあるのでぜひチェックしてみてください。

BONOでUIUXデザインの基礎を身につけよう

BONOではこれからUIUXデザイナーを未経験から目指したい人や、UIUXデザインの基礎を身に付けたい現場１−2年のデザイナーに向けたコンテンツを制作、販売しています。もしよろしければまずはUIUXコースを見てどういう基礎を身につけるべきかなど、覗いてみてください🙋

未経験からUIUXデザイナーを目指すUIUXコース‍https://www.bo-no.design/rdm/roadmap-uiuxdesigner

‍