【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.
本日はレスポンシブのサイトを制作する際のCSSでのMedia Queriesの指定数値について考えてみました。
多くの人に綺麗な状態でウェブサイトを見てもらうために、CSS内で画面の横幅の数値を定め、その値以下(または以上)でデザインの指定を変えていく方法です。
まず、日本人が使っているスマートフォンの種類について調べてみました⭐️
https://webrage.jp/techblog/sp_share/
上記のサイトによると、2017年6月の日本で使用されているスマートフォンのシェア率は以下になっています。
| 順位 | 機種名 | 名前 | メーカー | シェア率 |
|---|---|---|---|---|
| 1位 | iPhone | iPhone | Apple | 63.24% |
| 2位 | SO-02G | Xperia Z3 Compact | SONY | 1.25% |
| 3位 | SO-01J | Xperia XZ | SONY | 1.14% |
iPhoneでサイトを閲覧する人が大多数です。
また、8位までSONYのXperia、3位以下のスマートフォンのシェア率は1%を切っていることから、上記の機種を意識して作れば日本で見られるスマートフォンに対応したレスポンシブサイトが作れるといえます。
| iphone5 | iphone6 | iphone6+ | ipadmini | Xperia |
|---|---|---|---|---|
| 320px | 375px | 414px | 768px | 360px |
Web Trends Lab.編集部
KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。
INDEX
PICK UP
KOHIMOTOは実用的なWebサイトを追求するWeb制作会社です。
現場から最前線のWebトレンドやノウハウなどをお届けしていきます。
