6.レスポンシブ-画面サイズが変わっても順応できるUIを考えよう

こちらのコミュニティでの勉強会用スライド
https://bo-no.design

Transcript

1. レスポンシブデザイン 画面サイズが変わっても 順応できるUIを考えよう UIデザインの基本を身につけよう BONO
2. 1.レスポンシブデザインとは 2.UIはブロックで考える 3.PCブラウザのサイズ 4.比率でレイアウトを考える BONO 目次 レスポンシブデザイン UIデザインの基本を身につけよう
3. レスポンシブデザインとは BONO 1 レスポンシブデザイン UIデザインの基本を身につけよう
4. 1.レスポンシブデザインとは BONO レスポンシブデザイン UIデザインの基本を身につけよう Text Label Label Text Label Label SP PC ⇄
5. UIはブロックで考える BONO 2 レスポンシブデザイン UIデザインの基本を身につけよう
6. 2.UIはブロックで考える ブロックとはどういうこと〜？ BONO レスポンシブデザイン UIデザインの基本を身につけよう Text Label Label Text Label Label Text Label Label Text Label Label SP PC ⇄
7. 2.UIはブロックで考える コンテンツを配置する幅が存在する G ざっくり「ナビ」と「コンテンツ」に分かれ0 G コンテンツの幅は大体のサイズがある BONO レスポンシブデザイン UIデザインの基本を身につけよう Text Label Label ナビ コンテンツ Text Label Label ナビ コンテンツ Page Title Label Label コンテンツ ナビ Page Title Label Label コンテンツ ナビ
8. PCブラウザのサイズ BONO 3 レスポンシブデザイン UIデザインの基本を身につけよう
9. 3.PCブラウザのサイズ 基本的なサイズ感というものがあります！知っておこう！ PCのサイズ感を知りたい人は、自分でサイトを作ってみることをお勧めします。 ※PCブラウザは横幅を広げたり縮小したりして作ることがあるので、 　 あたりで作ると間違いはない。 メインとなるコンテンツ幅は1000前後(960px~1080px） ⇄ 変動 http://gs.statcounter.com/ BONO レスポンシブデザイン UIデザインの基本を身につけよう Page Title 800px メイン 400px Page Title 800px メイン 400px LOGO text 1280px 800px 800px LOGO text 1000px
10. 3.PCブラウザのサイズ メインコンテンツの幅のパターン BONO レスポンシブデザイン UIデザインの基本を身につけよう 960 1080 1280 1680 コンテンツ幅 ※決まりではないので、ちゃんと調べたり参考のデザインを集めてね
11. 比率でレイアウト BONO 4 レスポンシブデザイン UIデザインの基本を身につけよう
12. 4.比率でレイアウト 基本的に”固定幅”と”%”で考えるクセをつけよう BONO iPhoneだけでも色々... 固定幅、可変幅を考える 320 375 414 16 固定 16 固定 100% 25% 25% 25% 25% どういう設定にす る？ 名前 割と長めのプロフィールが来た らどういうふうに可変させる？
13. 4.比率でレイアウト 並列にレイアウトするときは%で比率を考えるとやり易い BONO 4 4 Service Title text なんかいい感じの キャッチコピー 登録してね 6