UI情報構造のデザインをトレースで実践学習

このデータから始めよう

この後のフローでも使うので、こちらで確保してください〜！

↓コピペして使ってください（Figma）

https://www.figma.com/file/mKYwB2QwNAM46x4jPyeSyR/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E8%A8%AD%E8%A8%88---5-2%E3%81%AE%E5%85%83%E3%83%87%E3%83%BC%E3%82%BF?node-id=0%3A1&t=8EdXi64RJry7FxZr-1

‍

‍

簡易なデザインシステムを使うと楽

UIの基本的なパーツ（フォントや余白、色）に対して役割が分担されている状態で構造設計をするとかなり楽になります。見た目的なバランスは役割に左右されずに後から変更できると思うので、一旦ビジュアルが定まってない時は仮で定義しておいても良いかなと個人的には考えています。

‍

‍

ブロックの配置場所のセオリー

ブロックのサイズに関しては割合でサイズを決めるとバランスを考えやすくなると思います。絶対値（800pxが多いetc）で考えちゃうと、~~なサイズはダメなの？という本質的じゃない問いを生み出すと思います。

デザインはパーツ同士の相対的なバランスで良い悪いなどを判断していくので割合で構造を考えて設計していくと良いです。

かつブロック配置に関して、基本的にはシンメトリーに組むとバランスは良くなります。特別な理由がない場合はシンメトリーに見えるようにバランスを考えて配置していくとオーソドックスな見た目を作りやすいと思います。

‍

他のサービスの構造を参考にしよう

自分の頭ではなく他サービスがどういうバランスで構造化してUIを作って表現しているか、参考にしながら組み立てましょう。まずは存在しているデザインから謙虚に学んでいく姿勢が大事です。

‍

ブロックを意識できるデータを作っていこう

構造化＝ブロック化が6-7割なので意識できるデータ設計をすると自分でも見直しやすいです。グループにする基準＝意味のグループになっているなので、それを意識しながらデータも組めるようになっていくのが大切です。

このデータから始めよう

この後のフローでも使うので、こちらで確保してください〜！

↓メンバーになると表示されます

‍

‍

‍

‍

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

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

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

‍

‍

‍

簡易なデザインシステムを使うと楽

UIの基本的なパーツ（フォントや余白、色）に対して役割が分担されている状態で構造設計をするとかなり楽になります。見た目的なバランスは役割に左右されずに後から変更できると思うので、一旦ビジュアルが定まってない時は仮で定義しておいても良いかなと個人的には考えています。

‍

‍

ブロックの配置場所のセオリー

ブロックのサイズに関しては割合でサイズを決めるとバランスを考えやすくなると思います。絶対値（800pxが多いetc）で考えちゃうと、~~なサイズはダメなの？という本質的じゃない問いを生み出すと思います。

デザインはパーツ同士の相対的なバランスで良い悪いなどを判断していくので割合で構造を考えて設計していくと良いです。

かつブロック配置に関して、基本的にはシンメトリーに組むとバランスは良くなります。特別な理由がない場合はシンメトリーに見えるようにバランスを考えて配置していくとオーソドックスな見た目を作りやすいと思います。

‍

他のサービスの構造を参考にしよう

自分の頭ではなく他サービスがどういうバランスで構造化してUIを作って表現しているか、参考にしながら組み立てましょう。まずは存在しているデザインから謙虚に学んでいく姿勢が大事です。

‍

ブロックを意識できるデータを作っていこう

構造化＝ブロック化が6-7割なので意識できるデータ設計をすると自分でも見直しやすいです。グループにする基準＝意味のグループになっているなので、それを意識しながらデータも組めるようになっていくのが大切です。

‍