UIデザインの基本
UIパターン
UIデザインの基本
UIのアイデアを出す流れと手法をトレースで身につけよう
金額
4,378~
/月
完了目安
1~2
ヶ月
メンバーシップについてはこちら

コースの目的

既存UIの改善を顧客を軸にアイデアを出してデザインする手法を身につけよう

既存サービスのUI改善をする時の考え方を学べるコンテンツです。実際に会社に入るとゼロから作るより圧倒的に既存サービスをベースにデザインしていくことが多いです。そういう時に”何を作るか”だけは設定されていて、それをどうUIに落としていくのか?が問われます。このシリーズではそんな状況を題材にして、どういうUIを作るべきなのか?その考え方は?進め方は?を身につけるシリーズになります。

具体的には要件と顧客の状態をベースに、「行動フロー」でユーザーに必要な行動を把握してそれをUIに落としていきます。またOOUIのような考え方で”どこに何の情報を表示すべきか?”、UIを検討するときは考えうるUIパターンを多く出しその中で検証&ブラッシュアップを続けていく。といった現場で当たり前のように踏むやり方を紹介しています。

初学者向け、未経験者向けなので、このやり方で既存サービスの改善案などを作ってポートフォリオにしたりする時にも使えるシリーズになっていると思います。

コースの詳細へ

コース内容
デザインをはじめよう
既存UIの改善を顧客を軸にアイデアを出してデザインする手法を身につけよう
SECTION
要件を満たすUIアイデアのつくり方

要件を整理してアイデアを出そう(6回)

11
カテゴリ
要件を満たすUIアイデアのつくり方
無料
メンバー限定
SECTION
お題:友達が聴いてる音楽がわかるUIをデザインしよう

UIデザインの流れを手を動かしながら解説するシリーズです。
”何の情報が必要なのか”、"どこに配置するのがよいのか”、”ビジュアルはどうする?”というリアルなフローを解説しています。
手を動かしながら観ることもできるのでぜひチャレンジしてみてください。/

12:36
カテゴリ
お題:友達が聴いてる音楽がわかるUIをデザインしよう
無料
メンバー限定
SECTION
条件を網羅する

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。” “山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される .

5:34
カテゴリ
条件を網羅する
無料
メンバー限定
SECTION
アイデア出し

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。” “山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される .

10:17
カテゴリ
アイデア出し
無料
メンバー限定
SECTION
アイデアに対して何を考えるべきか

フローを確認しながらUIに必要な情報を出していきましょう。

14:00
カテゴリ
アイデアに対して何を考えるべきか
無料
メンバー限定
SECTION
アイデア出しのまとめ

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。” “山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される .

03:30
カテゴリ
アイデア出しのまとめ
無料
メンバー限定
SECTION
UIオブジェクトに必要な情報をアイデア出し

いきなりビジュアルを作る前にUIのアイデアを考えていきます。まずは表示しユーザーが操作する”オブジェクト”に必要な情報を考えていきましょう。

9:25
カテゴリ
UIオブジェクトに必要な情報をアイデア出し
無料
メンバー限定
SECTION
既存のSpotifyの中で最適な表示場所を考える

前回考えた"オブジェクト"を表示する場所を、既存のSpotifyの情報を整理して考えていきます。

9:16
カテゴリ
既存のSpotifyの中で最適な表示場所を考える
無料
メンバー限定
SECTION
My Libraryの中での情報の表示場所を考える

MyLibraryの中で"オブジェクト"をどう表示するのか考えていきます。

7:37
カテゴリ
My Libraryの中での情報の表示場所を考える
無料
メンバー限定
SECTION
UIグラフィックのリサーチ

UIアイデアの方向性が決まったので、具体化する前に参考になるサービスを探してスクリーンショットを集めていきましょう。

6:59
カテゴリ
UIグラフィックのリサーチ
無料
メンバー限定
SECTION
UIラフを紙に描く

参考サービスを見ながらUIビジュアルのラフスケッチをしてアイデアパターンを出していきます。

12:02
カテゴリ
UIラフを紙に描く
無料
メンバー限定
SECTION
UIパターン出し-Spotifyの参考パターン

既存のSpotifyを参考にUIビジュアルのパターンを作成していきましょう。

22:38
カテゴリ
UIパターン出し-Spotifyの参考パターン
無料
メンバー限定
SECTION
UIパターン出し-参考デザインのパターン

参考デザインを元にUIビジュアルのパターンを作成していきましょう。

12:43
カテゴリ
UIパターン出し-参考デザインのパターン
無料
メンバー限定
SECTION
パターン出し:実機確認でのUIチェックは絶対やろう

自分で作成したUIビジュアルをチェックして、ベストなアイデア選びとフィードバックをしていきましょう。

12:47
カテゴリ
パターン出し:実機確認でのUIチェックは絶対やろう
無料
メンバー限定
SECTION
フィードバック内容を修正して完成

チェックをして出てきたポイントを改善して、UIを完成させていきます。

16:37
カテゴリ
フィードバック内容を修正して完成
無料
メンバー限定
SECTION
追加お題

今回の内容をそのまま使って解けるお題です。動画の内容やフローを参考にして、自分なりにトライしていきましょう。

あくまで参考ですが、カイクンがやった場合のアンサー動画は別の動画シリーズ「UI DESIGN FLOW BASIC 追加お題」で解説していきます。

https://www.bo-no.design/series/uidesignflow-challenge

4:54
カテゴリ
追加お題
無料
メンバー限定
ABOUT
コース詳細

概要

UI改善をお題にして、どういう風に要件とユーザーに合致するUIを出していくのか?のやり方を紹介するシリーズです。未経験者も実際にUIを考えるとは?のやり方を学ぶために1度体験していくことができます。やり方だけではなく、「なぜこのフェーズでこれをやるのか?」という考え方を身につけるために、自分でも手を動かして考えながらコンテンツを消費していくことをお勧めします。

実際に現場で行うフローであり、チームメンバーなどに提案する際のアイデアを考えた背景になるやり方なのでしっかり踏襲して、まずはやり方から身につけていきましょう。

スケジュール

1-2週間。トライもやりながらアウトプットを出して、答えと比較しながら内容を理解していきましょう。お題をちゃんとやるというより、まずは自分で手を動かしてみて、続きを見ながら理解していくというやり方がおすすめです。

コースレベル

初級レベル:より本格的にUI/UXデザインを始めたい人。

誰におすすめ

・未経験で現場に入ったがUIデザインのやり方に迷っている人
・要件に対するUIアイデアの出し方、検討の仕方を知りたい人
・これからUI/UXデザインを始めたい人
・未経験で現場で必要なナレッジを身に付けたい人