表示サイズに注意したデザインテクニック

レスポンシブウェブデザインというワードも当たり前になった昨今、複数のサイズに対応できるレイアウトを組むため、CSSを準備するのもあたりまえ。

しかし、WiXではCSSを直接書き換えることは出来ないので各種端末を想定した

・ページサイズ

・フォントサイズ

・ボタンサイズ

で対応するしかありません。

ここでは目安となるものをあげさせて頂きますが、やはり全ての端末に対応するにはちょっと不十分な気もします。Mobile Action Barと併せ技で乗り越えます。

Androidのスマホの画面です。先にも述べたモバイルアクションバーはきっちり表示されていますが、文字情報はほとんど見えません。

・ページサイズ

widthは980pxがデフォルト設定なので変更出来ません。heightが1000px前後が縦表示で収まりが良いようです。（Mobile Action Bar表示の場合）

・フォントサイズ

20px前後でスマホで”見られる”程度の大きさになるようですが、PCモニターからの閲覧時に全フォントが20pxオーバーで違和感が無ければ採用というところでしょうか

・ボタンサイズ

画面中央の３つ並んだブルーのボタンのサイズが125×23です。これ以上小さくなると押しにくいです。

これらはあくまで参考値として、ご自分のサイトのアクセスの多い端末サイズに基準を置いて調整されることをおススメします。

また、各端末のサイズです。単一の端末で対応する場合は目安になると思います。

iPhone/iPod touch:

バージョン: オリジナル～3GS    

　解像度: 320*480

バージョン: 4, 4S　

　解像度: 640*960

iPad:

バージョン: オリジナル、2 　

　解像度: 1024*768

バージョン: 3G                    

　解像度: 2048*1536

BlackBerry:

バージョン: 6, 7                    

　解像度: 240*160 / 240*260

バージョン: 8                      

　解像度: 320*240

バージョン: 9                        

　解像度: 360*480 / 640*480

Android:

バージョン: Droid, Droid X      

　解像度: 854×480

バージョン: Droid RAZR, Atrix 4G, Atrix 2  

　解像度: 960x540