シリーズ目次

センスを盗む技術

なぜ初心者ほど盗む必要があるのか?
xxx
なぜ初心者ほど盗む必要があるのか?

なぜ初心者ほど盗む必要があるのか?

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

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

模倣から始める最短の基礎習得法:シリーズで習得すること
text
模倣から始める最短の基礎習得法:シリーズで習得すること

模倣から始める最短の基礎習得法:シリーズで習得すること

2. UIを盗みやすくする3つの視点
xxx
2. UIを盗みやすくする3つの視点

2. UIを盗みやすくする3つの視点

盗む視点① : ビジュアル
20:53
盗む視点① : ビジュアル

盗む視点① : ビジュアル

盗む視点② : 機能の盗み方
28:43
盗む視点② : 機能の盗み方

盗む視点② : 機能の盗み方

盗む視点③ : 構造の盗み方
28:43
盗む視点③ : 構造の盗み方

盗む視点③ : 構造の盗み方

BONO的に見て欲しいサービスのUIデザイン
text
BONO的に見て欲しいサービスのUIデザイン

BONO的に見て欲しいサービスのUIデザイン

3. UIをつくりながら盗み方を実践しよう
xxx
3. UIをつくりながら盗み方を実践しよう

3. UIをつくりながら盗み方を実践しよう

【やり方をトレース】Airbnbテイストを盗んで「賃貸サービスのUI」をデザインする方法
text
【やり方をトレース】Airbnbテイストを盗んで「賃貸サービスのUI」をデザインする方法

【やり方をトレース】Airbnbテイストを盗んで「賃貸サービスのUI」をデザインする方法

🌏 グローバルサービスから学ぼう!UIデザインの参考集

みなさん、UIデザインの参考にするサービス、どうやって選んでいますか?

実は、参考にするサービスを選ぶコツがあるんです!✨

🎯 おすすめは「グローバル展開しているサービス」

国内限定のサービスよりも、世界展開しているサービスを参考にすることをおすすめします!

その理由は大きく2つ 👇

1. 📱 UIの完成度が高い

  - 言語や文化が違う国でも使いやすいように、直感的なUIデザインになっている

  - 特にサンフランシスコ発のサービスは世界トップレベル!

2. 🌍 ユーザー体験重視

  - 国内サービスは営業力で広がることもありますが...

  - グローバルサービスは「使いやすさ」がないと広がれない!

  - だからこそ、UIの基本がしっかりしている

🎨 BONO的おすすめ参考サービス集

デザインの勉強を始めたばかりの方に、おすすめの参考サービスを紹介します!

「何を見ればいいの?」という方は、以下のサービスから見てみましょう 👀

📱 Google系サービス

機能的なUIデザインを学ぶなら、Googleのサービスがおすすめです!

- ✨ おすすめポイント

 - 複雑な機能をシンプルに見せる設計が秀逸

 - 基本的なUIパターンが豊富

例えば以下のようなサービス

Google Travel(旅行予約)

フィルターの選択UI、各項目の入力や選択のUIパターンは”ふつう”なので

条件設定の画面を作るときなど、何かを選択したりする時のUIの参考になると思います。

とくに「フライト」「ホテル」あたりが参考になると思ってます。

https://www.google.com/travel/flights?gl=JP&hl=en

Googleカレンダー(予定作成・編集フロー)

これも1つのオブジェクト(予定)を入力する部分は特に参考になると思います。

カレンダーのUIパターン自体は結構特殊なので、カレンダーやるときだけ参考にするといいと思います。

Gmail(リスト表示・検索機能)

基本的な「テーブルUI」のイメージを見たい時に見てみるといいんじゃないかなと思います。

チェックでオブジェクトを選択してそれに対してアクションをするなども参考になるはず。

Google Maps(詳細表示・アクション設計)

「お店/場所」のオブジェクトの中に、さまざまな情報やアクションを設置しないといけない...というときのUI設計として参考になると思います。

📲 定番SNSアプリ

スマホアプリのUIを学ぶなら、まずはメジャーなSNSから!

  • 🌟 なぜSNSがいいの?
  • モダンなUIの基礎を作ったサービス
  • 多くのユーザーに使われている = 使いやすさが証明済み
  • 基本的なパターンが詰まっている

👀 チェックすべきSNSは以下かな〜。

Twitter・X/Threads

閲覧性の高いオブジェクトのタイムラインのUIは参考になると思います。

Instagram

画像中心のオブジェクトやサービス設計を考える時に参考になると思います。

左と右にスワイプしてアクションができるのはSnapchatのパクリでかなり特殊なのであまり参考にしないでください。

YouTube

基本的なメディア型サービスです。

Spotify

音楽再生系やコンテンツのれコメントパターン、ナビゲーションの切り方など参考になると思います。

デスクトップでも見れます。

💼 SaaS系サービスで学ぶ

ビジネス向けサービスならこれらがおすすめ:

Stripe(決済サービス)

かなり基本的なUIでSaaSで出てくるような機能を持ったサービスです。

多機能なので色々見れます。データを扱うビジネス系のサービスの参考やお手本としてかなり優秀だと思ってます。

無料でも自分でデータを作って遊べます。

https://stripe.com/

YouTube Studio(動画管理)

データをアップロードしてそれを編集して公開する、管理する、という管理画面として非常に優秀です。

無料でもちろん誰でも使えます。

https://studio.youtube.com/

✨ 見た目の美しさで選ぶなら

デザイン性の高いサービスを見てみましょう:

🏠 Airbnb

余白多めですが、コンテンツを綺麗にシンプルに見せることに注力しているサービスです。

CEOのブライアンチェスキーは元々デザイナーで世界でもトップレベルの会社に成長させたすごい人です。

今すぐブライアンチェスキー教に、君も入らないか?

https://www.airbnb.com/

🧘HeadSpace

コンセプトと世界観と機能性が融合した高い表現性をソフトウェアに落としたサービスです。

UIデザインって表現できないんだ、重要じゃないんだって人は必ず触ってください。

https://www.headspace.com/

💬 Discord

ゲームコミュニティで主に使われてますが、海外だとBONOみたいなコミュニティ活用としてもかなり使われています。

ポップなデザインとフランクな言葉遣いが楽しいサービスです。

そういう世界観のサービスを扱う時にはぜひ参考にしてみると良いと思います。

これらのサービスを見ながら、自分の好きなデザインを見つけていってくださいね! 🎨

終わりに🔍 探し方のコツ

「でも、どうやって良いサービスを見つければいいの?」

そんな時は、UIギャラリーサイトを使うのがおすすめ、かもしれません。

あとは日頃からTwitterなど海外情報含めてアンテナ貼っておくとめっちゃいいです。

現場にいる人はほぼ海外の情報追ってない人ばかりですが、追っておいた方が質の高いデザインに触れられるのは間違いないです。

特におすすめは:

🎨 Mobbin

海外の優れたUIデザインが大量に集まっているサイト。カテゴリー別に探せて便利!

https://mobbin.com/

📱 UIPocket

Mobbinより無料で使える幅が広いので日本のサービスも混じってるけどこっちの方が良いかも

https://www.ui-pocket.com/mobile/apps

⛰️TwiterなどLinkedIn、Mediumなどで海外の情報が入るようにする

がんばれ!!!

じゃあな以上です。また会おう!

🌏 グローバルサービスから学ぼう!UIデザインの参考集

みなさん、UIデザインの参考にするサービス、どうやって選んでいますか?

実は、参考にするサービスを選ぶコツがあるんです!✨

🎯 おすすめは「グローバル展開しているサービス」

国内限定のサービスよりも、世界展開しているサービスを参考にすることをおすすめします!

その理由は大きく2つ 👇

1. 📱 UIの完成度が高い

  - 言語や文化が違う国でも使いやすいように、直感的なUIデザインになっている

  - 特にサンフランシスコ発のサービスは世界トップレベル!

2. 🌍 ユーザー体験重視

  - 国内サービスは営業力で広がることもありますが...

  - グローバルサービスは「使いやすさ」がないと広がれない!

  - だからこそ、UIの基本がしっかりしている

🎨 BONO的おすすめ参考サービス集

デザインの勉強を始めたばかりの方に、おすすめの参考サービスを紹介します!

「何を見ればいいの?」という方は、以下のサービスから見てみましょう 👀

📱 Google系サービス

機能的なUIデザインを学ぶなら、Googleのサービスがおすすめです!

- ✨ おすすめポイント

 - 複雑な機能をシンプルに見せる設計が秀逸

 - 基本的なUIパターンが豊富

例えば以下のようなサービス

Google Travel(旅行予約)

フィルターの選択UI、各項目の入力や選択のUIパターンは”ふつう”なので

条件設定の画面を作るときなど、何かを選択したりする時のUIの参考になると思います。

とくに「フライト」「ホテル」あたりが参考になると思ってます。

https://www.google.com/travel/flights?gl=JP&hl=en

Googleカレンダー(予定作成・編集フロー)

これも1つのオブジェクト(予定)を入力する部分は特に参考になると思います。

カレンダーのUIパターン自体は結構特殊なので、カレンダーやるときだけ参考にするといいと思います。

Gmail(リスト表示・検索機能)

基本的な「テーブルUI」のイメージを見たい時に見てみるといいんじゃないかなと思います。

チェックでオブジェクトを選択してそれに対してアクションをするなども参考になるはず。

Google Maps(詳細表示・アクション設計)

「お店/場所」のオブジェクトの中に、さまざまな情報やアクションを設置しないといけない...というときのUI設計として参考になると思います。

📲 定番SNSアプリ

スマホアプリのUIを学ぶなら、まずはメジャーなSNSから!

  • 🌟 なぜSNSがいいの?
  • モダンなUIの基礎を作ったサービス
  • 多くのユーザーに使われている = 使いやすさが証明済み
  • 基本的なパターンが詰まっている

👀 チェックすべきSNSは以下かな〜。

Twitter・X/Threads

閲覧性の高いオブジェクトのタイムラインのUIは参考になると思います。

Instagram

画像中心のオブジェクトやサービス設計を考える時に参考になると思います。

左と右にスワイプしてアクションができるのはSnapchatのパクリでかなり特殊なのであまり参考にしないでください。

YouTube

基本的なメディア型サービスです。

Spotify

音楽再生系やコンテンツのれコメントパターン、ナビゲーションの切り方など参考になると思います。

デスクトップでも見れます。

💼 SaaS系サービスで学ぶ

ビジネス向けサービスならこれらがおすすめ:

Stripe(決済サービス)

かなり基本的なUIでSaaSで出てくるような機能を持ったサービスです。

多機能なので色々見れます。データを扱うビジネス系のサービスの参考やお手本としてかなり優秀だと思ってます。

無料でも自分でデータを作って遊べます。

https://stripe.com/

YouTube Studio(動画管理)

データをアップロードしてそれを編集して公開する、管理する、という管理画面として非常に優秀です。

無料でもちろん誰でも使えます。

https://studio.youtube.com/

✨ 見た目の美しさで選ぶなら

デザイン性の高いサービスを見てみましょう:

🏠 Airbnb

余白多めですが、コンテンツを綺麗にシンプルに見せることに注力しているサービスです。

CEOのブライアンチェスキーは元々デザイナーで世界でもトップレベルの会社に成長させたすごい人です。

今すぐブライアンチェスキー教に、君も入らないか?

https://www.airbnb.com/

🧘HeadSpace

コンセプトと世界観と機能性が融合した高い表現性をソフトウェアに落としたサービスです。

UIデザインって表現できないんだ、重要じゃないんだって人は必ず触ってください。

https://www.headspace.com/

💬 Discord

ゲームコミュニティで主に使われてますが、海外だとBONOみたいなコミュニティ活用としてもかなり使われています。

ポップなデザインとフランクな言葉遣いが楽しいサービスです。

そういう世界観のサービスを扱う時にはぜひ参考にしてみると良いと思います。

これらのサービスを見ながら、自分の好きなデザインを見つけていってくださいね! 🎨

終わりに🔍 探し方のコツ

「でも、どうやって良いサービスを見つければいいの?」

そんな時は、UIギャラリーサイトを使うのがおすすめ、かもしれません。

あとは日頃からTwitterなど海外情報含めてアンテナ貼っておくとめっちゃいいです。

現場にいる人はほぼ海外の情報追ってない人ばかりですが、追っておいた方が質の高いデザインに触れられるのは間違いないです。

特におすすめは:

🎨 Mobbin

海外の優れたUIデザインが大量に集まっているサイト。カテゴリー別に探せて便利!

https://mobbin.com/

📱 UIPocket

Mobbinより無料で使える幅が広いので日本のサービスも混じってるけどこっちの方が良いかも

https://www.ui-pocket.com/mobile/apps

⛰️TwiterなどLinkedIn、Mediumなどで海外の情報が入るようにする

がんばれ!!!

じゃあな以上です。また会おう!

🌏 グローバルサービスから学ぼう!UIデザインの参考集

みなさん、UIデザインの参考にするサービス、どうやって選んでいますか?

実は、参考にするサービスを選ぶコツがあるんです!✨

🎯 おすすめは「グローバル展開しているサービス」

国内限定のサービスよりも、世界展開しているサービスを参考にすることをおすすめします!

その理由は大きく2つ 👇

1. 📱 UIの完成度が高い

  - 言語や文化が違う国でも使いやすいように、直感的なUIデザインになっている

  - 特にサンフランシスコ発のサービスは世界トップレベル!

2. 🌍 ユーザー体験重視

  - 国内サービスは営業力で広がることもありますが...

  - グローバルサービスは「使いやすさ」がないと広がれない!

  - だからこそ、UIの基本がしっかりしている

🎨 BONO的おすすめ参考サービス集

デザインの勉強を始めたばかりの方に、おすすめの参考サービスを紹介します!

「何を見ればいいの?」という方は、以下のサービスから見てみましょう 👀

〜〜ここから先はメンバー限定だぞ〜〜〜


センスを盗む技術

なぜ初心者ほど盗む必要があるのか?
xxx
なぜ初心者ほど盗む必要があるのか?

なぜ初心者ほど盗む必要があるのか?

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

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

模倣から始める最短の基礎習得法:シリーズで習得すること
text
模倣から始める最短の基礎習得法:シリーズで習得すること

模倣から始める最短の基礎習得法:シリーズで習得すること

2. UIを盗みやすくする3つの視点
xxx
2. UIを盗みやすくする3つの視点

2. UIを盗みやすくする3つの視点

盗む視点① : ビジュアル
20:53
盗む視点① : ビジュアル

盗む視点① : ビジュアル

盗む視点② : 機能の盗み方
28:43
盗む視点② : 機能の盗み方

盗む視点② : 機能の盗み方

盗む視点③ : 構造の盗み方
28:43
盗む視点③ : 構造の盗み方

盗む視点③ : 構造の盗み方

BONO的に見て欲しいサービスのUIデザイン
text
BONO的に見て欲しいサービスのUIデザイン

BONO的に見て欲しいサービスのUIデザイン

3. UIをつくりながら盗み方を実践しよう
xxx
3. UIをつくりながら盗み方を実践しよう

3. UIをつくりながら盗み方を実践しよう

【やり方をトレース】Airbnbテイストを盗んで「賃貸サービスのUI」をデザインする方法
text
【やり方をトレース】Airbnbテイストを盗んで「賃貸サービスのUI」をデザインする方法

【やり方をトレース】Airbnbテイストを盗んで「賃貸サービスのUI」をデザインする方法

閉じる

0 Comments

Active Here: 0
Be the first to leave a comment.
Loading
Load Previous
Someone is typing...
No Name
Set
4 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your comment will appear once approved by a moderator.
Load Previous
No Name
Set
2 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your reply will appear once approved by a moderator.
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More