センスを盗む技術
0%
1
なぜ初心者ほど盗む必要があるのか？2
2. UIを盗みやすくする3つの視点3
3. UIをつくりながら盗み方を実践しようセンスを盗む技術
こんにちは！カイクンです。BONOのUIUXコースで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つです。
特に機能と構造は「使いやすさ」にかなり密接につながっているため、UIをデザインする際はポイントになってくる要素です。参考にするデザインを見る時も探す時も、この3つで切り分けて”どこを参考にできそうか”、または”真似できそうか”という視点で探したり活用することが大切になります。
見た目の雰囲気は基本的に「色」「フォント」「サイズ」「レイアウト」「余白」など、見た目を分解した要素の組み合わせで決まります。UIデザインの場合は、参考にするものがデザインしているものと違う機能やサービスカテゴリでも、見た目の雰囲気を参考にすることは可能です。
UI見た目の基本の要素についてはこちらで詳しく解説と、実践的な学習が可能です。
つまり機能が違うから、ビジュアルテイストは参考にできない、ということはなく広く取られるとビジュアルテイストだけの参考であればポスターやバナーなど、UIではないデザインからもインスピレーションや具体的なサイズ感を参考にすることは可能になります。
以下の画像は架空のToDoサービスのUI画面です。Cuboxという後で読みたいリンクを集められるサービスのビジュアルテイストを盗んで適用してみた例になります。このように見た目のテイストを参考にしてビジュアルを参考にすることができます。
□ 他ジャンルサービスのビジュアルテイストを参考にした例→「ゼロからはじめるUIビジュアル」というシリーズでデザインしながら解説しています
参考のデザインから「ムードボード」を作成してビジュアルテイストの方向性を掴むことで盗むやり方もビジュアルに関して基本のやり方で有効になります。
この具体的にやり方を「グラフィック入門」というシリーズでBONOでは紹介しています。診断Webサイトのアイキャッチをデザインしながら、ビジュアルやレイアウトを盗む方法を解説するシリーズです。ビジュアルテイストの作り方の基礎を身につけ実践することができます。
↓出したいビジュアルテイストに近いものを集めて分析したボードを作るムードボードの例
グラフィック入門https://www.bo-no.design/series/graphicbeginner
UIデザインでも特に大切な”機能”は世の中のUIからどんどん盗んでいきましょう。ここでいう機能とは例えば、メールアドレスを「入力するフォーム」だったり、「画像をアップロードする機能の流れ」、ブログ系のサービスでの「記事を新規作成する流れ」などを指します。
全く同じ挙動をする機能であればそのまま参考にしやすいかもしれませんが、世の中そんなことばかりではありません。例えば今自分が作ろうとしている機能を言語化したときに以下のようなものを考えてみましょう。
こういう機能の参考を探すときに全く一緒の挙動をする機能があれば簡単に参考にできそうです。ただ全く同じ仕様のものを探すのはかなり難しい場合がほとんどでしょう。
そんな時は”機能単位”で参考にしていくのです。例えば、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デザイン力が上達しやすいデザイン制作のステップ」で詳しく解説しますが、基本的に以下のステップでデザインをしていきましょう。
実際にどういうふうに参考にするのか？本当に3つの要素を参考にしてデザインできるのか？については「賃貸サイト「ホームズ」と同じ機能だけど、UIは「Airbnb」を真似したフィルタ機能をデザインしてみる」のお題の解答動画をご覧ください。
このお題の解答を筆者が動画で解説するというコンテンツがあります。こちらはBONOのメンバー限定の動画になるため無料では閲覧することができません。あらかじめご了承ください。
このセクションでは参考のUIや良いサービスを探す方法などをお伝えしますが、まず大前提大事なことが自分で触って機能を体験することがUIデザイナーが参考から吸収するために最重要です。
UIデザインの参考サイトなどをみると、俯瞰してUIの絵を”見る”時間が長くなりますが、ユーザーはUIを見ません。触って操作をします。そのためデザイナー自身が触ってUIを吸収していかなと正しくUIに詳しくなれません。
なので参考サイトなどに頼って探すのは良いのですがアプリであれば自分でDLして触ってみる、登録して実際に使ってみるという姿勢の方がはるかに重要になってくることを覚えておいてください。
これから紹介するまとめサイトでサービスのことを知って、自分で使ってみるのもおすすめです。
まずは地道なやり方を。個人的にはIT業界により入っていくためにも、IT業界の人たちがコミュニティ的に使ってるTwitter(X)で起業家や企業のデザイナーなどをフォローして日頃から情報を得るのがおすすめです。デザイナー以外にも、デジタルサービスを作っている起業家やPdMの人、スタートアップ界隈の人をフォローすることで、自然と新しい情報が入ってきます。
誰をフォローしてどう探したらいいの？って方は以下を参考にしてみてください
です。特に注意なのがTwitterのフォロワー稼ぎに躍起になって有益そうなまとめを発信している人ばっかりフォローすることです。
ここでポイントなのは、現場の人を知ることも含まれるので、そういう情報屋だけの情報になっちゃうと現場間がわからなくなってしまいます。なのでまとめばっかりツイートしてバズらせようとしている人やカイくんみたいに現場にいない人はフォローしないほうがいいです。わかりましたか〜？
それでも探せない、わからないっという人は、カイクンがフォローしている人をフォローしていくことでIT業界の入り口に建てるかもしれません。
世の中にはUIデザインをアーカイブしているサービスサイトもあります。手っ取り早く探すのには役に立つのでいくつか紹介します。
https://www.apple.com/jp/app-store/
https://play.google.com/store/games?hl=en
スマホアプリであれば、自分のスマホのアプリストアが最も簡単に触れるUIを手に入れることができます。自分が好きなジャンルのサービスや、仕事で関わっているジャンルのサービスはランキングのトップ100から片っ端からダウンロード。微妙なUIも良いUIも全て触っていくことがおすすめです。
世界的に有名なUIアーカイブサイト。無料では制限がありますが、海外のUIのほとんどのスクリーンショットを探して閲覧することができます。サービスごとだけではなく、コンポーネント別やサービスのジャンル別に閲覧することもできます。https://mobbin.com/
国内のサービスも海外の代表的なものも観れるのでこれが1番良いかもしれない
UI Pocket - UIデザインの参考になるアプリのUIデザインギャラリーサイト
国産のUIアーカイブサイト。動きを動画で見ることができます。日本で主に展開しているUIのアーカイブが多いのでMobbinにないものも多くあります。https://ux-mov.com/
@kazutaka_dev,@ag_ayakanのお二人が運営。経緯を示して使いましょう
Mobbinに似たUIアーカイブのサービス。こちらも有料で全ての閲覧ができます。2024年12月時点では3日間のフリートライアルがあるため一旦今すぐ見たい調べたい人はぱっと使ってみることはできるかも。
https://refero.design
Mobbinが出している同じ機能のUIのABテスト結果をまとめてくれているサイトです。おそらく企業が何かしらで公開したことのあるテスト結果をまとめている？みたいです。基本的にポジティブな結果が出たUI比較のみが掲載されています。理由を考察してみると面白いかもしれません。https://abtest.design/
UIの機能に関係あるUI表現/UIパーツごとに探したいときは少し難易度は上がりますが「公開されているガイドライン」を参考にするのも良いかもしれません。UI自体の知識や使い方を知る上でも有効ではあります。ただ実際にそのUIを作ってみたりしたことがないと、なかなか理解することは難しいと思います。そのあたりのバランスを加味しながら活用してみください。
言わずと知れたAppleのガイドラインです。iOS、MacOS、iPad、VisionOSなどなど、各アップル製品のUIの考え方を知ることができます。https://developer.apple.com/jp/design/human-interface-guidelines/
マテリアルデザインは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
海外のデザインガイドラインをまとめているサイトです。コンポーネント別に探すこともできるため、世界的にどういうUIの定義になっているのか？を見つける使い方にも適しているサイトです。なかなかこの規模感で世界のガイドラインと、コンポーネントへのリンクをまとめているものはないので紹介します。現場のデザイナーもガイドラインを探している人には便利なサイトだと思います。
https://designsystems.surf/
国内のIT会社のデザインチームの取り組みをまとめてみることができるサイトです。UIの参考を探すことは不向きですが、現場でどういうふうにデザインしているのか？どんなことを考えているのか？の情報を見ることができます。デザイン初心者のうちから現場のことを知ったり、現場で使われている用語や考え方に慣れておくのはとっても有効なので、Cocodaで気になる会社の情報を見たりして、現場のデザイナーが何をしているのか？を知っておくのはとてもデザインの参考になると思います。
https://cocoda.design/
UIデザインスキルを上達させやすくするために、世の中の”ふつう”のUIを真似しく解説をしました。参考にするための3つの分解ポイント、参考UIの使い方、参考UIを探しやすくするサイトの紹介などを使って自分のデザインに役立ててください。
BONOでは現場10年以上の経験があるプロのデザイナーカイクンが、どうすれば有効なUIをデザインするか？のメソッドを実演通して解説しています。今回の参考を使って盗んでいく、を解説したデザインシリーズもあるのでぜひチェックしてみてください。
BONOではこれからUIUXデザイナーを未経験から目指したい人や、UIUXデザインの基礎を身に付けたい現場１−2年のデザイナーに向けたコンテンツを制作、販売しています。もしよろしければまずはUIUXコースを見てどういう基礎を身につけるべきかなど、覗いてみてください🙋
未経験からUIUXデザイナーを目指すUIUXコースhttps://www.bo-no.design/rdm/roadmap-uiuxdesigner