UI制作スタート:手書きで情報設計

‍

動画の目次

1. 00:00 見どころとイントロ
2. 01:34 ラフを描く手順
3. 03:20 参考からアイデアを拝借する
4. 05:31 紙でUIラフを描く
5. 08:40 コンテンツのラフ
6. 17:31 アクションのラフ
7. 21:43 まとめと次

‍

参考UIからアイデアを出す

自分の独自の考えではなく初心〜中級者ぐらいまでは、すでにあるUIの中からアイデアを選んで参考にして組み立てていきましょう。
ラフの段階からどこに何を配置するのか？を参考を見ながらアイデアを出していきます。

‍

紙でラフを描いていく

‍

いきなりデータを作らない理由としては、データでアイデアを考えるのは時間が掛かるから。手書きだとすぐにイメージを確認できる。そのため”何を作るのか”を紙でまとめてからデータで起こして詳細をチェックするという工程を取っています。

なのでこの段階で、どういう情報設計にすると要件を満たせるか？という視点でガンガンアイデアを出していきます。（動画だと１アイデアですが、こんなノリで色々出していくのもこの時点でありです）

‍

UIの基本構造に則って考えていく

‍

UIはあらゆるブロックで、ナビ、コンテンツ、アクションの3つの役割で構成されています。

それを意識して情報をデザインしていきます。

‍

UI3つの基本構造についてはこちらの動画を。

https://www.bo-no.design/contents/uivisual-6-3

‍

ブロックごとに情報を構造化していく

‍

ラフの段階で、何をどういうグループにして、グループ内の情報はどういう関係性なのか？を考えながらデザインをしていきます。ポイントは情報同士の親子関係、グループ関係という”構造”を意識してまずは考えていくことです。

装飾は後から可能なので、肝心な伝えたい情報の優先度などが崩れてしまうとそれだけで良いUIを作ることから離れてしまいます。なのでこの段階から構造を意識して組み立てていきます。

‍

‍

‍

‍

動画の全てはBONOメンバー限定です。

動画を観れるプランのアカウントでログイン/メンバーシップ登録すると、動画の全てを閲覧できます。
（会員の方で動画が閲覧できない場合は、マイページからプランの確認をお願いします）

プランのページはこちら。

‍

‍

目次

1. 00:00 見どころとイントロ
2. 01:34 ラフを描く手順
3. 03:20 参考からアイデアを拝借する
4. 05:31 紙でUIラフを描く
5. 08:40 コンテンツのラフ
6. 17:31 アクションのラフ
7. 21:43 まとめと次

‍

参考UIからアイデアを出す

自分の独自の考えではなく初心〜中級者ぐらいまでは、すでにあるUIの中からアイデアを選んで参考にして組み立てていきましょう。
ラフの段階からどこに何を配置するのか？を参考を見ながらアイデアを出していきます。

‍

紙でラフを描いていく

‍

いきなりデータを作らない理由としては、データでアイデアを考えるのは時間が掛かるから。手書きだとすぐにイメージを確認できる。そのため”何を作るのか”を紙でまとめてからデータで起こして詳細をチェックするという工程を取っています。

なのでこの段階で、どういう情報設計にすると要件を満たせるか？という視点でガンガンアイデアを出していきます。（動画だと１アイデアですが、こんなノリで色々出していくのもこの時点でありです）

‍

UIの基本構造に則って考えていく

‍

UIはあらゆるブロックで、ナビ、コンテンツ、アクションの3つの役割で構成されています。

それを意識して情報をデザインしていきます。

‍

UI3つの基本構造についてはこちらの動画を。

https://www.bo-no.design/contents/uivisual-6-3

‍

ブロックごとに情報を構造化していく

‍

ラフの段階で、何をどういうグループにして、グループ内の情報はどういう関係性なのか？を考えながらデザインをしていきます。ポイントは情報同士の親子関係、グループ関係という”構造”を意識してまずは考えていくことです。

装飾は後から可能なので、肝心な伝えたい情報の優先度などが崩れてしまうとそれだけで良いUIを作ることから離れてしまいます。なのでこの段階から構造を意識して組み立てていきます。

‍

‍

‍

‍