![見出し画像](https://assets.st-note.com/production/uploads/images/97135928/rectangle_large_type_2_994a2331be860b9411ea211a4d1d0e6d.png?width=1200)
レスポンシブデザインのUI
ブロック単位で考える
![](https://assets.st-note.com/img/1675405460120-lazrFCov8Q.png?width=1200)
UIの基本3構成は、
・ナビゲーション
・コンテンツ
・アクション
(アクションはナビかコンテンツに付随することも)
それらをブロック単位でレイアウトを考えることが大切。
固定幅か%かを常に意識する
![](https://assets.st-note.com/img/1675405956737-W6jfUoNTQT.png)
固定幅か%か、
不可変か可変か、を常に意識することが大切。
ちなみに、スマホでのタップ範囲は40pxぐらいは確保すること。
画像の書き出し
・2xで書き出す
高解像度に耐えられるように
・アイコンはsvg形式で
実装者への伝え方
プロトタイプを作るか、
メモを残すか、
ミーティングするか。
可能な限りミーティング。
メモは見ていないケースもよくある。
一番分かりやすいのがプロトタイプで、
実際の挙動を示すことが一番早く正確に伝わりやすいのかなと。
この記事が気に入ったらサポートをしてみませんか?