コースの目的
既存サービスのUI改善をする時の考え方を学べるコンテンツです。実際に会社に入るとゼロから作るより圧倒的に既存サービスをベースにデザインしていくことが多いです。そういう時に”何を作るか”だけは設定されていて、それをどうUIに落としていくのか?が問われます。このシリーズではそんな状況を題材にして、どういうUIを作るべきなのか?その考え方は?進め方は?を身につけるシリーズになります。
具体的には要件と顧客の状態をベースに、「行動フロー」でユーザーに必要な行動を把握してそれをUIに落としていきます。またOOUIのような考え方で”どこに何の情報を表示すべきか?”、UIを検討するときは考えうるUIパターンを多く出しその中で検証&ブラッシュアップを続けていく。といった現場で当たり前のように踏むやり方を紹介しています。
初学者向け、未経験者向けなので、このやり方で既存サービスの改善案などを作ってポートフォリオにしたりする時にも使えるシリーズになっていると思います。
要件を整理してアイデアを出そう(6回)
UIデザインの流れを手を動かしながら解説するシリーズです。
”何の情報が必要なのか”、"どこに配置するのがよいのか”、”ビジュアルはどうする?”というリアルなフローを解説しています。
手を動かしながら観ることもできるのでぜひチャレンジしてみてください。/
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。” “山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される .
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。” “山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される .
フローを確認しながらUIに必要な情報を出していきましょう。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。” “山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される .
いきなりビジュアルを作る前にUIのアイデアを考えていきます。まずは表示しユーザーが操作する”オブジェクト”に必要な情報を考えていきましょう。
前回考えた"オブジェクト"を表示する場所を、既存のSpotifyの情報を整理して考えていきます。
MyLibraryの中で"オブジェクト"をどう表示するのか考えていきます。
UIアイデアの方向性が決まったので、具体化する前に参考になるサービスを探してスクリーンショットを集めていきましょう。
参考サービスを見ながらUIビジュアルのラフスケッチをしてアイデアパターンを出していきます。
既存のSpotifyを参考にUIビジュアルのパターンを作成していきましょう。
参考デザインを元にUIビジュアルのパターンを作成していきましょう。
自分で作成したUIビジュアルをチェックして、ベストなアイデア選びとフィードバックをしていきましょう。
チェックをして出てきたポイントを改善して、UIを完成させていきます。
今回の内容をそのまま使って解けるお題です。動画の内容やフローを参考にして、自分なりにトライしていきましょう。
あくまで参考ですが、カイクンがやった場合のアンサー動画は別の動画シリーズ「UI DESIGN FLOW BASIC 追加お題」で解説していきます。
https://www.bo-no.design/series/uidesignflow-challenge
UI改善をお題にして、どういう風に要件とユーザーに合致するUIを出していくのか?のやり方を紹介するシリーズです。未経験者も実際にUIを考えるとは?のやり方を学ぶために1度体験していくことができます。やり方だけではなく、「なぜこのフェーズでこれをやるのか?」という考え方を身につけるために、自分でも手を動かして考えながらコンテンツを消費していくことをお勧めします。
実際に現場で行うフローであり、チームメンバーなどに提案する際のアイデアを考えた背景になるやり方なのでしっかり踏襲して、まずはやり方から身につけていきましょう。
1-2週間。トライもやりながらアウトプットを出して、答えと比較しながら内容を理解していきましょう。お題をちゃんとやるというより、まずは自分で手を動かしてみて、続きを見ながら理解していくというやり方がおすすめです。
初級レベル:より本格的にUI/UXデザインを始めたい人。
・未経験で現場に入ったがUIデザインのやり方に迷っている人
・要件に対するUIアイデアの出し方、検討の仕方を知りたい人
・これからUI/UXデザインを始めたい人
・未経験で現場で必要なナレッジを身に付けたい人