ボタン、どこに配置しよ...
ナビゲーションってこれでいいんだっけ...
実はUIの基本パターンとして法則と理由があります。
UI作成時に初心者が悩むレイアウトについて解説するシリーズです。
UIを作る際の基本的な構造パターンをマスターして”ふつう”に使いやすいUIをデザインできるようになりましょう!
シリーズを7割以上終了したアウトプットをフォームから投稿すると、30分カイクンとデザイン面談ができます。
アウトプットのフィードバックや、理解の相談、今後の学習の進め方など内容はメンバーが自由に決めてOKです💡
シリーズに関係ない内容でも大丈夫です。
このシリーズではUI配置の基本パターンに触れ、概念理解を通してUIを見る目をアップデートするのが目的です。まずは全体像を見てみましょう。ラジオ感覚で聞き流すのものもオススメ!
この動画ではこれから深めていく6つの基本について触れていきます。
深く解説はしてなく、ざっくりこういうのがあるのよ〜という話をしています💡
この次の動画から1つずつ詳しく説明していきます。自分が気になる部分でも良いですし、基礎固めをしたい方は全て触れてみてください。
2023年内限定で、ご意見お待ちしてます〜!
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。
・こういうの悩む
・こういうの知りたい
などありましたら教えてください
フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform
💡 使いやすいと言われるUIを作るための必須事項
パスタでいう麺、塩、ラーメンでいうスープみたいなもんです
💡 使いやすい=ユーザーが想像しやすい”概念”を形にするのが大事
すべての軸はユーザーから組み立てる。それを形に情報の並びを取り決めていくこと。
💡 UIの基本パターンを理解する必要がある
浅い歴史の中で定番と言われるUIが出てきた=使い手にとって色々検討した結果1番効率的な形として定着してきたということです。
3種類あるかなと思ってます!まずは1番わかりやすいUIの部分を解説していきます。
ほぼイコールUIの「レイアウト」や「骨格」というのに該当しそうです。
① 3つの基本UI構造
② コンテンツ:構造とブロックの階層表現
③ 階層関係
④ ナビゲーション
⑤ アクション
⑥ モード
UIのあらゆる部分の基本である『3構造』について理解しましょう。
ナビゲーション/コンテンツ/アクションというソフトウェアを構成する基本の構造です。
動画の続きはこちら↓
□ お題に挑戦しよう!
https://www.bo-no.design/contents/ui-layout-basic02-2
□ お題の回答を見て3構造の実践的な考え方を身につけよう
https://www.bo-no.design/contents/ui-layout-basic02-3
2023年内限定で、ご意見お待ちしてます〜!
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。
・こういうの悩む
・こういうの知りたい
などありましたら教えてください
フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform
ナビゲーション
コンテンツ
アクション
解説を見るだけではなかなかデザイン力は身につきません。
実践してみることが大事です。次の動画ではダメなUIを改善する様子をFigmaを操作しながらお見せします。
自身のない方はそれを見ながら自分でも手を動かしても良いでしょう。
ただ余裕のある人はぜひ、このダメUIのダメなポイントを考えてみて自分でリデザインしてから次の解説動画を見ることをおすすめします!
自分の頭で考えてみてください!
3構造の概念説明の動画を見て、ダメポイントを意識して自分で改善してみましょう!
次の動画で解説をしていきます💡
ダメUIのFigmaデータ
https://www.figma.com/file/o5klJSwjCijT73Yx6hphJQ/3%E6%A7%8B%E9%80%A0-%E3%81%8A%E9%A1%8C?type=design&node-id=0%3A1&mode=design&t=U1j76tUOPKSFeiPI-1
この動画では「3構造」の原則でダメUIを解説していきます。
何を変更するのか?それがなぜなのか?を理解することで3構造の理解と、UIを見る視点が備わるはず...です!
2023年内限定で、ご意見お待ちしてます〜!
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。
・こういうの悩む
・こういうの知りたい
などありましたら教えてください
フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform
Figmaのリンク
https://www.figma.com/file/k4HVxEnPdth8k46vu6mtnj/%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=134%3A17457&mode=design&t=U1j76tUOPKSFeiPI-1
能動的なアウトプットが明日を作る〜!🔥
作ったものと学んだことが自分を伝えてくれる〜!
ということで時間をかけすぎず、自分のペースで、
未来の自分のために学びを残しましょう🙆
まとめる理由は例えば
などなど。シェア用テンプレートを作っておいたので活用してください👌
もし時間があれば、
普段自分が使っているサービスの
3構造を考察して見るのもオススメです💡
実際のUIを分解/考察して、何かにまとめてみましょう〜!
学習の記録を助けるフレーム画像を作ってみました。
何種類か試しに作っているので、BONOメンバーは改変自由なので使ってやってください🙋
テンプレートのURLは以下から。Figmaでコピペして自由に使ってみてください
https://www.figma.com/file/k4HVxEnPdth8k46vu6mtnj/%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=322%3A66034&mode=design&t=3x6dTkLzZyVlIZXn-1
このシリーズではUI配置の基本パターンに触れ、概念理解を通してUIを見る目をアップデートするのが目的です。まずは全体像を見てみましょう。ラジオ感覚で聞き流すのものもオススメ!
動画の続きはこちら↓
□ お題に挑戦しよう!
https://www.bo-no.design/contents/ui-layout-basic03-2
□ お題解答
作成したら自分のアウトプットと見比べて理解を深め、
時間がない人は見て、要点を理解しよう。
https://www.bo-no.design/contents/ui-layout-basic03-3
2023年内限定で、ご意見お待ちしてます〜!
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。
・こういうの悩む
・こういうの知りたい
などありましたら教えてください
フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform
ダメなUIを題材に、”なぜダメなのか?”を考えながら
「モード」を理解する動画でうs。
モードはアクションなどサービスのUIデザインには必ず登場する概念です。
かつソフトウェア特有のもので、なんとなくで真似して使ってしまうと
使いづらいUI構造に知らず知らずなってしまいます。
を理解して、実物のUI改善アイデアを考えながら理解していきましょう〜!
3構造の概念説明の動画を見て、ダメポイントを意識して自分で改善してみましょう!
次の動画で解説をしていきます💡
ダメUIのFigmaデータ
https://www.figma.com/file/09Kols8UvJIMUyVUv2hcBc/%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86---%E3%81%8A%E9%A1%8C?type=design&node-id=1%3A709&mode=design&t=LE95qssRDkZ4j4rX-1
前の動画のお題に沿って自分でデザインしたものと比較して、モードについて学びを深めましょう。
自分のと違う考え方で理由にもやる場合は、フォームから教えてください!
お題をデザインしていない人も、モードを理解する意味で、「何を変更しているか」「それはなぜか」を理解してみてください。
2023年内限定で、ご意見お待ちしてます〜!
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。
・こういうの悩む
・こういうの知りたい
などありましたら教えてください
フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform
改善後のUIのプロトタイプ
https://www.figma.com/proto/k4HVxEnPdth8k46vu6mtnj/%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=301-42698&t=mE3UFf10R9BUNQ5g-1&scaling=min-zoom&page-id=179%3A1790&starting-point-node-id=301%3A42698&show-proto-sidebar=1&mode=design
能動的なアウトプットが明日を作る〜!🔥
作ったものと学んだことが自分を伝えてくれる〜!
ということで時間をかけすぎず、自分のペースで、
未来の自分のために学びを残しましょう🙆
まとめる理由は例えば
などなど。シェア用テンプレートを作っておいたので活用してください👌
もし時間があれば、
普段自分が使っているサービスの
モードを考察して見るのもオススメです💡
実際のUIを分解/考察して、何かにまとめてみましょう〜!
学習の記録を助けるフレーム画像を作ってみました。
何種類か試しに作っているので、BONOメンバーは改変自由なので使ってやってください🙋
テンプレートのURLは以下から。Figmaでコピペして自由に使ってみてください
https://www.figma.com/file/k4HVxEnPdth8k46vu6mtnj/%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=322%3A66034&mode=design&t=3x6dTkLzZyVlIZXn-1
"アクション"をどうUIで配置するのか?きほんの”き”を習得しましょう
ダメなUIを題材に、なぜこれが使いづらいのか?を考え、
それを通して”UIデザインにおけるアクションの設計”の基本を理解しましょう
動画の続きはこちら↓
□ お題に挑戦しよう!
https://www.bo-no.design/contents/ui-layout-basic04-2
□ お題解答
作成したら自分のアウトプットと見比べて理解を深め、
時間がない人は見て、要点を理解しよう。
https://www.bo-no.design/contents/ui-layout-basic04-3
2023年内限定で、ご意見お待ちしてます〜!
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。
・こういうの悩む
・こういうの知りたい
などありましたら教えてください
フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform
ダメなポイントを把握して
改善をしていきましょう!
ダメUIのFigmaデータ
https://www.figma.com/file/2E4c39iMHdkT2f7xpFz5zP/%E7%84%A1%E6%96%99%2F%2F%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=1%3A40911&mode=design&t=1AuO16hrKi6K86f6-1
前の動画のお題に沿って自分でデザインしたものと比較して、モードについて学びを深めましょう。
自分のと違う考え方で理由にもやる場合は、フォームから教えてください!
お題をデザインしていない人も、モードを理解する意味で、「何を変更しているか」「それはなぜか」を理解してみてください。
2023年内限定で、ご意見お待ちしてます〜!
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。
・こういうの悩む
・こういうの知りたい
などありましたら教えてください
フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform
改善後のUIのプロトタイプ
https://www.figma.com/proto/k4HVxEnPdth8k46vu6mtnj/%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=301-42698&t=mE3UFf10R9BUNQ5g-1&scaling=min-zoom&page-id=179%3A1790&starting-point-node-id=301%3A42698&show-proto-sidebar=1&mode=design