コースの目的
「デザインのセンスがない...」と悩んでいませんか？
実は、センスは生まれ持った才能ではありません。
良いデザインをたくさん見て知ることで、誰でも身につけることができるんです。
このレッスンシリーズでは、初心者こそ真似すべき理由と、UIを盗むための3つの視点（👀ビジュアル・🛠機能・🧩構造）を解説します。
さらに実践編では、有名サービスを参考に「盗む→作る」を実践することで、盗み方も身につけることできます。
「なぜ盗むのか？」「どう盗むのか？」をスッキリ理解して、最短ルートで成長に必要なテクニックを掴みましょう✨
1. 初心者ほどデザイン盗んでインプットするべき理由
2. UIは3つの視点で盗めば楽勝
3. 視点①：ビジュアル
4. 視点②：機能
5. 視点③：構造
6. 実践！盗んで進める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ビジュアル」というシリーズでデザインしながら解説しています
.jpeg)
参考のデザインから「ムードボード」を作成してビジュアルテイストの方向性を掴むことで盗むやり方もビジュアルに関して基本のやり方で有効になります。
この具体的にやり方を「グラフィック入門」というシリーズでBONOでは紹介しています。診断Webサイトのアイキャッチをデザインしながら、ビジュアルやレイアウトを盗む方法を解説するシリーズです。ビジュアルテイストの作り方の基礎を身につけ実践することができます。
↓出したいビジュアルテイストに近いものを集めて分析したボードを作るムードボードの例
.jpeg)
グラフィック入門
https://www.bo-no.design/series/graphicbeginner
.jpeg)
UIデザインでも特に大切な”機能”は世の中のUIからどんどん盗んでいきましょう。ここでいう機能とは例えば、メールアドレスを「入力するフォーム」だったり、「画像をアップロードする機能の流れ」、ブログ系のサービスでの「記事を新規作成する流れ」などを指します。
全く同じ挙動をする機能であればそのまま参考にしやすいかもしれませんが、世の中そんなことばかりではありません。例えば今自分が作ろうとしている機能を言語化したときに以下のようなものを考えてみましょう。
こういう機能の参考を探すときに全く一緒の挙動をする機能があれば簡単に参考にできそうです。ただ全く同じ仕様のものを探すのはかなり難しい場合がほとんどでしょう。
そんな時は”機能単位”で参考にしていくのです。例えば、AとBをどちらかを選択するUI → 選択系のUIってどういうのがあるっけ？選択する体験を提供しているUIって自分が使っているものでないかな？
そうすると選択系のUIとしては「ラジオボタン」のようなものや、「選択メニュー」のようなものを探し当てることができるでしょう。
こういうふうに全く同じジャンルのサービスや仕様でなくても機能単位で見ていくことで、参考のUIを探し当てることができ参考にできる確率が高まります。
賃貸サービスの表示フィルタUIのアイデアをデザインするとしましょう。似たジャンルのサービスはSuumoやHome'sといったサービスになりますがそれ以外のサービスのUIからも参考にすることができます。
国内の賃貸サービスの検索フィルタをそのまま参考にして良いですが、”機能”の挙動を賃貸とは別のサービス、例えばAirbnbのような宿泊予約サービス、のUI機能だけ参考にしてUIをデザインするアイデアもある。
この画像はAirbnbのフィルタUIを、自分で作る賃貸サービスに適用してみたものです。家賃の幅や間取りの選択などの機能面のUIを参考にすることはできます。
.jpeg)
※UIの中身は賃貸サービスのもの。外側の機能は Airbnbを真似したもの
機能と同様に画面遷移、情報の優先度、などの”構造”単位でもUIのデザインを参考にすることができます。例えば「サービスのトップ画面には、ユーザーの行動に基づいたおすすめを表示したい」と考えているのであれば、例えばYouTubeのトップ画面やメルカリのトップ画面の構造を見ることで参考にできるかもしれません。
YouTubeのトップ画面は、ユーザーが最近視聴したものやいいねを押したものをベースに関連した動画をおすすめしてくれます。YouTubeは特にグループなどで表示した動画の意図を示せない情報構造なので、なんでこれがおすすめしてくれているかは定かではありません。
メルカリのアプリのホームは、最近検索した商品や、自分がいいねを押した商品の一覧を見ることができます。YouTubeとは違う”グループ”が複数用意され、ラベル＋一覧という構造で、最近見たものからおすすめの商品を出すという取り組みを行なっています。
このように違うサービスで違うロジックでおすすめを表示しているものも”構造”に着目して分解することで、その意図や真似できそうな部分が見つけやすくなるでしょう。
メルカリとYouTubeのおすすめの考え方は似てるけど、サービスが違うのでそれぞれの表示UIと、表示するロジックは当たり前だけど違う↓
.jpeg)
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
%25202.jpeg)
スマホアプリであれば、自分のスマホのアプリストアが最も簡単に触れるUIを手に入れることができます。自分が好きなジャンルのサービスや、仕事で関わっているジャンルのサービスはランキングのトップ100から片っ端からダウンロード。微妙なUIも良いUIも全て触っていくことがおすすめです。
世界的に有名なUIアーカイブサイト。無料では制限がありますが、海外のUIのほとんどのスクリーンショットを探して閲覧することができます。サービスごとだけではなく、コンポーネント別やサービスのジャンル別に閲覧することもできます。
https://mobbin.com/
.jpeg)
国内のサービスも海外の代表的なものも観れるのでこれが1番良いかもしれない
UI Pocket - UIデザインの参考になるアプリのUIデザインギャラリーサイト
.jpeg)
国産のUIアーカイブサイト。動きを動画で見ることができます。日本で主に展開しているUIのアーカイブが多いのでMobbinにないものも多くあります。
https://ux-mov.com/
@kazutaka_dev,@ag_ayakanのお二人が運営。経緯を示して使いましょう
.jpeg)
Mobbinに似たUIアーカイブのサービス。こちらも有料で全ての閲覧ができます。2024年12月時点では3日間のフリートライアルがあるため一旦今すぐ見たい調べたい人はぱっと使ってみることはできるかも。
Mobbinが出している同じ機能のUIのABテスト結果をまとめてくれているサイトです。おそらく企業が何かしらで公開したことのあるテスト結果をまとめている？みたいです。基本的にポジティブな結果が出たUI比較のみが掲載されています。理由を考察してみると面白いかもしれません。
https://abtest.design/
.png)
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の定義になっているのか？を見つける使い方にも適しているサイトです。なかなかこの規模感で世界のガイドラインと、コンポーネントへのリンクをまとめているものはないので紹介します。現場のデザイナーもガイドラインを探している人には便利なサイトだと思います。
国内のIT会社のデザインチームの取り組みをまとめてみることができるサイトです。UIの参考を探すことは不向きですが、現場でどういうふうにデザインしているのか？どんなことを考えているのか？の情報を見ることができます。
デザイン初心者のうちから現場のことを知ったり、現場で使われている用語や考え方に慣れておくのはとっても有効なので、Cocodaで気になる会社の情報を見たりして、現場のデザイナーが何をしているのか？を知っておくのはとてもデザインの参考になると思います。
UIデザインスキルを上達させやすくするために、世の中の”ふつう”のUIを真似しく解説をしました。参考にするための3つの分解ポイント、参考UIの使い方、参考UIを探しやすくするサイトの紹介などを使って自分のデザインに役立ててください。
BONOでは現場10年以上の経験があるプロのデザイナーカイクンが、どうすれば有効なUIをデザインするか？のメソッドを実演通して解説しています。今回の参考を使って盗んでいく、を解説したデザインシリーズもあるのでぜひチェックしてみてください。
BONOではこれからUIUXデザイナーを未経験から目指したい人や、UIUXデザインの基礎を身に付けたい現場１−2年のデザイナーに向けたコンテンツを制作、販売しています。
もしよろしければまずはUIUXコースを見てどういう基礎を身につけるべきかなど、覗いてみてください🙋
未経験からUIUXデザイナーを目指すUIUXコース
https://www.bo-no.design/rdm/roadmap-uiuxdesigner
「デザインのセンスがない...」と悩んでいませんか？
実は、センスは生まれ持った才能ではありません。良いデザインをたくさん見て知ることで、誰でも身につけることができるんです。
このレッスンでは、UIデザインに焦点を当てて「上手な盗み方」を学んでいきます。優れたデザインを真似て学ぶことで、あなたも確実にデザインが上手くなっていきます。
このコースは3つのステップで進めていきます：
はじめに「盗む」と聞くといけないことをしているように思うと思います。
その考え方をパート1では変えていきます。オリジナリティを初心者が出すことがなぜ無意味なのか、まずは”ふつう”を学ぶために真似ていかないといけない理由を知り、デザインに対する考え方を変えていきましょう。
UIデザインを学ぶ「盗む」技術を使う時に、次の3つのポイントに分けて考えると、誰でも効率的に上達できるようになるはずです。デザインのような表現の分野は理論だけじゃなく、世の中の表現からインプットしていかないと作り方や表現を学ぶことができません。定番表現を分析して基礎力を磨いていきましょう。
まず、ビジュアル面では色やフォント、レイアウトなどの「見た目」を分解して学びます。Webサービスやアプリの配色やサイズ、バランス、余白などを真似することから始めれば、見た目のセンスも自然と身についていきます。
次に、機能（インタラクション）の面。例えば、フォームの入力方法やフィルター機能など、実際のユーザー操作に関わる部分を観察します。人気アプリの使いやすい機能を参考にすることで、ユーザーフレンドリーなデザインのコツが分かってきます。
最後は構造（情報配置）です。画面遷移のスムーズさや情報の優先順位など、ユーザーが迷わない画面作りの秘訣を学びます。
これら3つの視点で「盗む」ことを意識すれば、プロのデザイナーが作った優れたUIから、効率的に基礎が学べるんです！さらに、実践に役立つ参考リソースも用意されているので、すぐに学習を始められます。
デザインの世界って最初は難しそうに見えますが、この「盗む」アプローチを使えば、誰でも着実にスキルアップできるはずです。一緒にUIデザインの基礎、マスターしていきましょう！
最後のパートでは実際に盗みながらデザインする様子を共有します。
”考え方はわかったけど実際どうやるのか？”のやり方自体をみなさんは盗んで、真似して自分がデザインする時に活用するようにしてください。
このパートで動画の進め方と一緒に学んでいくことで、盗む技術を実践することが容易になっていくと思います。ぜひ最後までトライして、技術を盗んでください！
このUIデザイン学習シリーズでは、「盗んで学ぶ」という独特なアプローチで、効果的にデザインスキルを身につけていきます。初心者の方々が最も悩む「センスがない」という不安を解消し、実践的な手法で確実にスキルアップできる道筋を示していきます。
盗んでいくやり方を習得して、インプットの方法を学ぶことで、UIのデザイン力は上がっていきます。逆にいうとよく見ず、なあなあで進めていくと上達は難しいでしょう。
このコースを通じて、「良いデザインの真似から始める」という考え方を身につけ、プロフェッショナルなUIデザインの基礎を確実に習得することができます。
一緒に、効率的で実践的なUIデザインの学習を始めましょう！
次のレッスンからは、パート1「なぜ『ふつう』を盗むべきなのか」について詳しく見ていきます。デザインに対する新しい視点が開けるはずです。
視点を知れば様々なジャンルからインプットできるようになるよ
みなさん、UIデザインの参考にするサービス、どうやって選んでいますか？
実は、参考にするサービスを選ぶコツがあるんです！✨
国内限定のサービスよりも、世界展開しているサービスを参考にすることをおすすめします！
その理由は大きく2つ 👇
1. 📱 UIの完成度が高い
- 言語や文化が違う国でも使いやすいように、直感的なUIデザインになっている
- 特にサンフランシスコ発のサービスは世界トップレベル！
2. 🌍 ユーザー体験重視
- 国内サービスは営業力で広がることもありますが...
- グローバルサービスは「使いやすさ」がないと広がれない！
- だからこそ、UIの基本がしっかりしている
デザインの勉強を始めたばかりの方に、おすすめの参考サービスを紹介します！
「何を見ればいいの？」という方は、以下のサービスから見てみましょう 👀
機能的なUIデザインを学ぶなら、Googleのサービスがおすすめです！
- ✨ おすすめポイント
- 複雑な機能をシンプルに見せる設計が秀逸
- 基本的なUIパターンが豊富
例えば以下のようなサービス
フィルターの選択UI、各項目の入力や選択のUIパターンは”ふつう”なので
条件設定の画面を作るときなど、何かを選択したりする時のUIの参考になると思います。
とくに「フライト」「ホテル」あたりが参考になると思ってます。
https://www.google.com/travel/flights?gl=JP&hl=en
これも1つのオブジェクト（予定）を入力する部分は特に参考になると思います。
カレンダーのUIパターン自体は結構特殊なので、カレンダーやるときだけ参考にするといいと思います。
基本的な「テーブルUI」のイメージを見たい時に見てみるといいんじゃないかなと思います。
チェックでオブジェクトを選択してそれに対してアクションをするなども参考になるはず。
「お店/場所」のオブジェクトの中に、さまざまな情報やアクションを設置しないといけない...というときのUI設計として参考になると思います。
スマホアプリのUIを学ぶなら、まずはメジャーなSNSから！
👀 チェックすべきSNSは以下かな〜。
閲覧性の高いオブジェクトのタイムラインのUIは参考になると思います。
画像中心のオブジェクトやサービス設計を考える時に参考になると思います。
左と右にスワイプしてアクションができるのはSnapchatのパクリでかなり特殊なのであまり参考にしないでください。
基本的なメディア型サービスです。
音楽再生系やコンテンツのれコメントパターン、ナビゲーションの切り方など参考になると思います。
デスクトップでも見れます。
ビジネス向けサービスならこれらがおすすめ：
かなり基本的なUIでSaaSで出てくるような機能を持ったサービスです。
多機能なので色々見れます。データを扱うビジネス系のサービスの参考やお手本としてかなり優秀だと思ってます。
無料でも自分でデータを作って遊べます。
https://stripe.com/
データをアップロードしてそれを編集して公開する、管理する、という管理画面として非常に優秀です。
無料でもちろん誰でも使えます。
https://studio.youtube.com/
デザイン性の高いサービスを見てみましょう：
余白多めですが、コンテンツを綺麗にシンプルに見せることに注力しているサービスです。
CEOのブライアンチェスキーは元々デザイナーで世界でもトップレベルの会社に成長させたすごい人です。
今すぐブライアンチェスキー教に、君も入らないか？
https://www.airbnb.com/
コンセプトと世界観と機能性が融合した高い表現性をソフトウェアに落としたサービスです。
UIデザインって表現できないんだ、重要じゃないんだって人は必ず触ってください。
https://www.headspace.com/
ゲームコミュニティで主に使われてますが、海外だとBONOみたいなコミュニティ活用としてもかなり使われています。
ポップなデザインとフランクな言葉遣いが楽しいサービスです。
そういう世界観のサービスを扱う時にはぜひ参考にしてみると良いと思います。
これらのサービスを見ながら、自分の好きなデザインを見つけていってくださいね！ 🎨
「でも、どうやって良いサービスを見つければいいの？」
そんな時は、UIギャラリーサイトを使うのがおすすめ、かもしれません。
あとは日頃からTwitterなど海外情報含めてアンテナ貼っておくとめっちゃいいです。
現場にいる人はほぼ海外の情報追ってない人ばかりですが、追っておいた方が質の高いデザインに触れられるのは間違いないです。
特におすすめは：
海外の優れたUIデザインが大量に集まっているサイト。カテゴリー別に探せて便利！
Mobbinより無料で使える幅が広いので日本のサービスも混じってるけどこっちの方が良いかも
https://www.ui-pocket.com/mobile/apps
がんばれ！！！
じゃあな以上です。また会おう！
.jpg)
動画の盗み方をトレースして自分のものにしちゃおう💪
※動画編集前の先行公開中です🙏
この動画では、実際に「ホームズ」の物件情報を使って、賃貸情報のUIデザインを作っていきます。
その際、AirbnbのUIを参考にしながら、デザインの「盗み方」を3つの視点で実践して学んでいきます。
見るだけではなく、実際に手を動かして「どこを盗むのか」「UIの細かい違いで何が変化するのか」を体験しながら、盗み方を学んでいきましょう
