シリーズ目次

ゼロからはじめるUIビジュアル

10
Todoサービス ホームUI
sss
Todoサービス ホームUI

Todoサービス ホームUI

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!
09:55
UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

#2 : ヘッダーUIをデザインしよう
28:43
#2 : ヘッダーUIをデザインしよう

#2 : ヘッダーUIをデザインしよう

#3 : Todoブロックをデザインしよう
51:42
#3 : Todoブロックをデザインしよう

#3 : Todoブロックをデザインしよう

#4 : アクションエリアをデザイン
36:09
#4 : アクションエリアをデザイン

#4 : アクションエリアをデザイン

1度作ったUIは質上げしよう
sss
1度作ったUIは質上げしよう

1度作ったUIは質上げしよう

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする
43:34
#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#6 : 全く別テイストにUIを変更する方法を教えます
37:25
#6 : 全く別テイストにUIを変更する方法を教えます

#6 : 全く別テイストにUIを変更する方法を教えます

作成アクションのUIデザイン
sss
作成アクションのUIデザイン

作成アクションのUIデザイン

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう
52:51
#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう
45:48
#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

フィルタ・検索のUIデザイン
sss
フィルタ・検索のUIデザイン

フィルタ・検索のUIデザイン

#8 フィルターUIデザインの基本
47:45
#8 フィルターUIデザインの基本

#8 フィルターUIデザインの基本

#9 検索UIデザインの基本
56:30
#9 検索UIデザインの基本

#9 検索UIデザインの基本

お疲れ!👏継続してつくる力を鍛える
sss
お疲れ!👏継続してつくる力を鍛える

お疲れ!👏継続してつくる力を鍛える

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ
20:37
【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

トップ
/
ゼロからはじめるUIビジュアル
/
【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ
デザイン上達法

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

2024
4
03
スキルを上げて、創造のための武器を手に入れよう
すべての動画閲覧には、メンバーシップ加入が必要です
メンバー登録について

ToDoサービスのUIデザインお疲れ様でした!

UIの見た目の基本ということで今回はToDoサービスを「ゼロからはじめるUIビジュアル」として行ってきました!お疲れ様でした!

どういう風にサイズを決めたり、どのパーツからデザインするのか?、UIの基本3構造、などなどデザインしながら身に付けられたのではないでしょうか。

ここでは次にやることと、継続的なビジュアル成長に欠かせないインプットについてシェアしたいと思います。

次にやるべきこと : UIデザインのビジュアル基礎

このシリーズでは、UIデザインのビジュアル基礎を通りながら学び、それぞれの要素が如何にデザイン全体を形成するかを体験しました。さらにしっかりビジュアル基礎について理解するために「UIビジュアル基礎」シリーズを行うことをオススメします。

このシリーズでは余白やサイズの決定法、グリッドレイアウト、レスポンシブデザインといったUIの見た目を作る基礎概念を項目ごとに詳しく学ぶことができます。今回デザインしたToDoサービスで登場した概念も全てここから来ています。

各項目の最後にはお題が用意され学んだことをデザインで使えるようなシリーズ設計になっているので、ただ学ぶだけではなく実践することが学んでいけます。

項目ごとに学ぶことで、全くのゼロからUIデザインを行う上での考え方の土台を身につけることができるでしょう。

「UIビジュアル基礎」シリーズ
https://www.bo-no.design/series/tutorial-uivisual

デザインのビジュアルスキルを継続的に伸ばす勉強法

新たなスキルを学ぶ旅は終わりません。毎日新しいインスピレーションを得て、国内外の話題になっているサービスを探し、体験してみてください。それらを参考に自身のデザインを進め、自分自身のパターンを作り上げ、それらを比較することで、新たな気づきを得ることができるでしょう。

デジタル系のデザインを集めるおすすめ参照元

UIだけの枠にもとらわれず、学習という枠にもとらわれず、広くデザインの海を知りながらやるべき学習を継続していくのをオススメします。デジタルのデザインのおすすめ参照元を貼っておきます。自分でも徐々に掘っていきましょう。

Webデザインからグラフィックを学ぼう

Webサイトギャラリーを1つ決めて毎日見ていくのがおすすめです。ソフトウェアではないのでUI/UXに関係ないと思うかもしれませんが、ビジュアルスキルはものづくりをsるデザイナーの基本的な土台になります。”Webデザインギャラリー”でググると色々出てきます。

ソフトウェア系モバイルアプリ

UI/UXで主に対象になるソフトウェア系はIT業界に詳しくないとなかなか見つけるのが難しいです。紹介しているもの以外にも日常のツールをデジタル化して色々使ってみるのをお勧めします。

  • AppStore :アプリならAppStoreを片っ端から見ていく。特に海外のUIは日本に比べて圧倒的にレベルが高いのでお勧めです。AndroidならPlayStore、iOSならAppStore
  • Mobbin : https://mobbin.com/browse/ios/apps海外のUIスクショを掲載しているサイトです。一部有料です。注意としてスクショを見てもそれは触れないのでソフトウェアではありません。Mobbinでサービスを知って興味が出たら自分でDLして使う癖を必ずつけましょう。

ソフトウェア系デスクトップ

まとまったサイトがないので非常に難しいので、ますはIT業界に詳しくなることをお勧めします。

メモ、カレンダー、タスク管理などなど業務系のものはなるべく新しいサービスを使って使う癖をつけると良いと思います。

  • Twitterで界隈に詳しくなるSNSは向き不向きあるとは思いますが、IT界隈の情報は基本的に2023年現在はTwitterで活発に情報がシェアされています。カイクンがフォローしている人もIT界隈ばかりです。フォロー見ていいので可能ならここから日々のニュースを摂取するのをお勧めします。
  • noteで界隈に詳しくなる国内のIT界隈の人や企業が情報が広くアウトプットしています。会社に詳しくなればサービスも知れて、サービスのUIを見に行くことでこんなUIでこの業種はやってるんだ〜がわかるのでお勧めです。まずは”UIデザイン”とかで調べて、こんな人いるんだ〜を知っていくと業界と人とそこから会社に詳しくなれると思います。
  • Saas UI https://www.saasui.design/一応海外のアーカイブサイトがあったので貼っておきます。僕は使ったことないです笑

DailyUIのようにコツコツ作り続けて勉強するのも大事

もし時間があったり、もう少しコツコツ作りたい場合はDailyUIもおすすめです。結局は作る量が大事!とは思います。ただロードマップでの他の基礎習得からは道が外れるのでそこだけ注意してください。BONO的には3つの基礎を習得しないと現場入りの難易度は下がらないと考えています。

DailyUIはBONOでまだ制作できてないので、Googleなどで出てくる海外のサービスをチェックしてください。1日1お題、メールで届くものらしいです。

現場に未経験から入った人のポートフォリオを見ると、DAY20ぐらいまでやるぐらいでも良いような肌感は個人的にあります。(100はすごくハードル高いので一応)

デザインの旅は一人ひとり違う道程を辿りますが、確実なのは、この旅は終わりがないということです。新たな知識、新たなスキル、新たなインスピレーションがあなたの成長を加速させ、デザインの世界をより深く理解し手助けすると考えています!

社会に求められるスキルは…など考えるとは思いますが、好奇心が赴くままにスキルの柱を作ることが初学者にはまず重要です。そのためには社会的に必要とされていることを考えるより、目の前にあるものや、自分の興味を深掘りして”デザインで遊べる”状態に持っていくことを個人的には推奨しています。

これまでの学びの旅を振り返り、自分が成長したことを確認し、次のステップに進む準備をしましょう。新たな挑戦があなたを待っています。それは、自分自身を信じ、常に学び続けるという旅です。

デザインの世界は、無限の可能性を秘めた美しい旅です。そして、その旅を進めるのはあなた自身です。これからも自分自身を信じて、前進し続けてください。あなたの成功を心から願っています。

以上、「次に学ぶべきこと」という章を締めくくる言葉として、あなたがこれからもデザインの道を歩み続けるためのエールを送ります。また新たな学びの場でお会いしましょう。

ToDoサービスのUIデザインお疲れ様でした!

UIの見た目の基本ということで今回はToDoサービスを「ゼロからはじめるUIビジュアル」として行ってきました!お疲れ様でした!

どういう風にサイズを決めたり、どのパーツからデザインするのか?、UIの基本3構造、などなどデザインしながら身に付けられたのではないでしょうか。

ここでは次にやることと、継続的なビジュアル成長に欠かせないインプットについてシェアしたいと思います。

次にやるべきこと : UIデザインのビジュアル基礎

このシリーズでは、UIデザインのビジュアル基礎を通りながら学び、それぞれの要素が如何にデザイン全体を形成するかを体験しました。さらにしっかりビジュアル基礎について理解するために「UIビジュアル基礎」シリーズを行うことをオススメします。

このシリーズでは余白やサイズの決定法、グリッドレイアウト、レスポンシブデザインといったUIの見た目を作る基礎概念を項目ごとに詳しく学ぶことができます。今回デザインしたToDoサービスで登場した概念も全てここから来ています。

各項目の最後にはお題が用意され学んだことをデザインで使えるようなシリーズ設計になっているので、ただ学ぶだけではなく実践することが学んでいけます。

項目ごとに学ぶことで、全くのゼロからUIデザインを行う上での考え方の土台を身につけることができるでしょう。

「UIビジュアル基礎」シリーズ
https://www.bo-no.design/series/tutorial-uivisual

デザインのビジュアルスキルを継続的に伸ばす勉強法

新たなスキルを学ぶ旅は終わりません。毎日新しいインスピレーションを得て、国内外の話題になっているサービスを探し、体験してみてください。それらを参考に自身のデザインを進め、自分自身のパターンを作り上げ、それらを比較することで、新たな気づきを得ることができるでしょう。

デジタル系のデザインを集めるおすすめ参照元

UIだけの枠にもとらわれず、学習という枠にもとらわれず、広くデザインの海を知りながらやるべき学習を継続していくのをオススメします。デジタルのデザインのおすすめ参照元を貼っておきます。自分でも徐々に掘っていきましょう。

Webデザインからグラフィックを学ぼう

Webサイトギャラリーを1つ決めて毎日見ていくのがおすすめです。ソフトウェアではないのでUI/UXに関係ないと思うかもしれませんが、ビジュアルスキルはものづくりをsるデザイナーの基本的な土台になります。”Webデザインギャラリー”でググると色々出てきます。

ソフトウェア系モバイルアプリ

UI/UXで主に対象になるソフトウェア系はIT業界に詳しくないとなかなか見つけるのが難しいです。紹介しているもの以外にも日常のツールをデジタル化して色々使ってみるのをお勧めします。

  • AppStore :アプリならAppStoreを片っ端から見ていく。特に海外のUIは日本に比べて圧倒的にレベルが高いのでお勧めです。AndroidならPlayStore、iOSならAppStore
  • Mobbin : https://mobbin.com/browse/ios/apps海外のUIスクショを掲載しているサイトです。一部有料です。注意としてスクショを見てもそれは触れないのでソフトウェアではありません。Mobbinでサービスを知って興味が出たら自分でDLして使う癖を必ずつけましょう。

ソフトウェア系デスクトップ

まとまったサイトがないので非常に難しいので、ますはIT業界に詳しくなることをお勧めします。

メモ、カレンダー、タスク管理などなど業務系のものはなるべく新しいサービスを使って使う癖をつけると良いと思います。

  • Twitterで界隈に詳しくなるSNSは向き不向きあるとは思いますが、IT界隈の情報は基本的に2023年現在はTwitterで活発に情報がシェアされています。カイクンがフォローしている人もIT界隈ばかりです。フォロー見ていいので可能ならここから日々のニュースを摂取するのをお勧めします。
  • noteで界隈に詳しくなる国内のIT界隈の人や企業が情報が広くアウトプットしています。会社に詳しくなればサービスも知れて、サービスのUIを見に行くことでこんなUIでこの業種はやってるんだ〜がわかるのでお勧めです。まずは”UIデザイン”とかで調べて、こんな人いるんだ〜を知っていくと業界と人とそこから会社に詳しくなれると思います。
  • Saas UI https://www.saasui.design/一応海外のアーカイブサイトがあったので貼っておきます。僕は使ったことないです笑

DailyUIのようにコツコツ作り続けて勉強するのも大事

もし時間があったり、もう少しコツコツ作りたい場合はDailyUIもおすすめです。結局は作る量が大事!とは思います。ただロードマップでの他の基礎習得からは道が外れるのでそこだけ注意してください。BONO的には3つの基礎を習得しないと現場入りの難易度は下がらないと考えています。

DailyUIはBONOでまだ制作できてないので、Googleなどで出てくる海外のサービスをチェックしてください。1日1お題、メールで届くものらしいです。

現場に未経験から入った人のポートフォリオを見ると、DAY20ぐらいまでやるぐらいでも良いような肌感は個人的にあります。(100はすごくハードル高いので一応)

デザインの旅は一人ひとり違う道程を辿りますが、確実なのは、この旅は終わりがないということです。新たな知識、新たなスキル、新たなインスピレーションがあなたの成長を加速させ、デザインの世界をより深く理解し手助けすると考えています!

社会に求められるスキルは…など考えるとは思いますが、好奇心が赴くままにスキルの柱を作ることが初学者にはまず重要です。そのためには社会的に必要とされていることを考えるより、目の前にあるものや、自分の興味を深掘りして”デザインで遊べる”状態に持っていくことを個人的には推奨しています。

これまでの学びの旅を振り返り、自分が成長したことを確認し、次のステップに進む準備をしましょう。新たな挑戦があなたを待っています。それは、自分自身を信じ、常に学び続けるという旅です。

デザインの世界は、無限の可能性を秘めた美しい旅です。そして、その旅を進めるのはあなた自身です。これからも自分自身を信じて、前進し続けてください。あなたの成功を心から願っています。

以上、「次に学ぶべきこと」という章を締めくくる言葉として、あなたがこれからもデザインの道を歩み続けるためのエールを送ります。また新たな学びの場でお会いしましょう。

ToDoサービスのUIデザインお疲れ様でした!

UIの見た目の基本ということで今回はToDoサービスを「ゼロからはじめるUIビジュアル」として行ってきました!お疲れ様でした!

どういう風にサイズを決めたり、どのパーツからデザインするのか?、UIの基本3構造、などなどデザインしながら身に付けられたのではないでしょうか。

ここでは次にやることと、継続的なビジュアル成長に欠かせないインプットについてシェアしたいと思います。

次にやるべきこと : UIデザインのビジュアル基礎

このシリーズでは、UIデザインのビジュアル基礎を通りながら学び、それぞれの要素が如何にデザイン全体を形成するかを体験しました。さらにしっかりビジュアル基礎について理解するために「UIビジュアル基礎」シリーズを行うことをオススメします。

このシリーズでは余白やサイズの決定法、グリッドレイアウト、レスポンシブデザインといったUIの見た目を作る基礎概念を項目ごとに詳しく学ぶことができます。今回デザインしたToDoサービスで登場した概念も全てここから来ています。

各項目の最後にはお題が用意され学んだことをデザインで使えるようなシリーズ設計になっているので、ただ学ぶだけではなく実践することが学んでいけます。

項目ごとに学ぶことで、全くのゼロからUIデザインを行う上での考え方の土台を身につけることができるでしょう。

「UIビジュアル基礎」シリーズ
https://www.bo-no.design/series/tutorial-uivisual

デザインのビジュアルスキルを継続的に伸ばす勉強法

新たなスキルを学ぶ旅は終わりません。毎日新しいインスピレーションを得て、国内外の話題になっているサービスを探し、体験してみてください。それらを参考に自身のデザインを進め、自分自身のパターンを作り上げ、それらを比較することで、新たな気づきを得ることができるでしょう。

デジタル系のデザインを集めるおすすめ参照元

UIだけの枠にもとらわれず、学習という枠にもとらわれず、広くデザインの海を知りながらやるべき学習を継続していくのをオススメします。デジタルのデザインのおすすめ参照元を貼っておきます。自分でも徐々に掘っていきましょう。

Webデザインからグラフィックを学ぼう

Webサイトギャラリーを1つ決めて毎日見ていくのがおすすめです。ソフトウェアではないのでUI/UXに関係ないと思うかもしれませんが、ビジュアルスキルはものづくりをsるデザイナーの基本的な土台になります。”Webデザインギャラリー”でググると色々出てきます。

ソフトウェア系モバイルアプリ

UI/UXで主に対象になるソフトウェア系はIT業界に詳しくないとなかなか見つけるのが難しいです。紹介しているもの以外にも日常のツールをデジタル化して色々使ってみるのをお勧めします。

  • AppStore :アプリならAppStoreを片っ端から見ていく。特に海外のUIは日本に比べて圧倒的にレベルが高いのでお勧めです。AndroidならPlayStore、iOSならAppStore
  • Mobbin : https://mobbin.com/browse/ios/apps海外のUIスクショを掲載しているサイトです。一部有料です。注意としてスクショを見てもそれは触れないのでソフトウェアではありません。Mobbinでサービスを知って興味が出たら自分でDLして使う癖を必ずつけましょう。

ソフトウェア系デスクトップ

まとまったサイトがないので非常に難しいので、ますはIT業界に詳しくなることをお勧めします。

メモ、カレンダー、タスク管理などなど業務系のものはなるべく新しいサービスを使って使う癖をつけると良いと思います。

  • Twitterで界隈に詳しくなるSNSは向き不向きあるとは思いますが、IT界隈の情報は基本的に2023年現在はTwitterで活発に情報がシェアされています。カイクンがフォローしている人もIT界隈ばかりです。フォロー見ていいので可能ならここから日々のニュースを摂取するのをお勧めします。
  • noteで界隈に詳しくなる国内のIT界隈の人や企業が情報が広くアウトプットしています。会社に詳しくなればサービスも知れて、サービスのUIを見に行くことでこんなUIでこの業種はやってるんだ〜がわかるのでお勧めです。まずは”UIデザイン”とかで調べて、こんな人いるんだ〜を知っていくと業界と人とそこから会社に詳しくなれると思います。
  • Saas UI https://www.saasui.design/一応海外のアーカイブサイトがあったので貼っておきます。僕は使ったことないです笑

DailyUIのようにコツコツ作り続けて勉強するのも大事

もし時間があったり、もう少しコツコツ作りたい場合はDailyUIもおすすめです。結局は作る量が大事!とは思います。ただロードマップでの他の基礎習得からは道が外れるのでそこだけ注意してください。BONO的には3つの基礎を習得しないと現場入りの難易度は下がらないと考えています。

DailyUIはBONOでまだ制作できてないので、Googleなどで出てくる海外のサービスをチェックしてください。1日1お題、メールで届くものらしいです。

現場に未経験から入った人のポートフォリオを見ると、DAY20ぐらいまでやるぐらいでも良いような肌感は個人的にあります。(100はすごくハードル高いので一応)

デザインの旅は一人ひとり違う道程を辿りますが、確実なのは、この旅は終わりがないということです。新たな知識、新たなスキル、新たなインスピレーションがあなたの成長を加速させ、デザインの世界をより深く理解し手助けすると考えています!

社会に求められるスキルは…など考えるとは思いますが、好奇心が赴くままにスキルの柱を作ることが初学者にはまず重要です。そのためには社会的に必要とされていることを考えるより、目の前にあるものや、自分の興味を深掘りして”デザインで遊べる”状態に持っていくことを個人的には推奨しています。

これまでの学びの旅を振り返り、自分が成長したことを確認し、次のステップに進む準備をしましょう。新たな挑戦があなたを待っています。それは、自分自身を信じ、常に学び続けるという旅です。

デザインの世界は、無限の可能性を秘めた美しい旅です。そして、その旅を進めるのはあなた自身です。これからも自分自身を信じて、前進し続けてください。あなたの成功を心から願っています。

以上、「次に学ぶべきこと」という章を締めくくる言葉として、あなたがこれからもデザインの道を歩み続けるためのエールを送ります。また新たな学びの場でお会いしましょう。

ゼロからはじめるUIビジュアル

10
Todoサービス ホームUI
sss
Todoサービス ホームUI

Todoサービス ホームUI

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!
09:55
UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

#2 : ヘッダーUIをデザインしよう
28:43
#2 : ヘッダーUIをデザインしよう

#2 : ヘッダーUIをデザインしよう

#3 : Todoブロックをデザインしよう
51:42
#3 : Todoブロックをデザインしよう

#3 : Todoブロックをデザインしよう

#4 : アクションエリアをデザイン
36:09
#4 : アクションエリアをデザイン

#4 : アクションエリアをデザイン

1度作ったUIは質上げしよう
sss
1度作ったUIは質上げしよう

1度作ったUIは質上げしよう

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする
43:34
#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#6 : 全く別テイストにUIを変更する方法を教えます
37:25
#6 : 全く別テイストにUIを変更する方法を教えます

#6 : 全く別テイストにUIを変更する方法を教えます

作成アクションのUIデザイン
sss
作成アクションのUIデザイン

作成アクションのUIデザイン

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう
52:51
#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう
45:48
#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

フィルタ・検索のUIデザイン
sss
フィルタ・検索のUIデザイン

フィルタ・検索のUIデザイン

#8 フィルターUIデザインの基本
47:45
#8 フィルターUIデザインの基本

#8 フィルターUIデザインの基本

#9 検索UIデザインの基本
56:30
#9 検索UIデザインの基本

#9 検索UIデザインの基本

お疲れ!👏継続してつくる力を鍛える
sss
お疲れ!👏継続してつくる力を鍛える

お疲れ!👏継続してつくる力を鍛える

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ
20:37
【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

閉じる

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