フリーランス時代、確認環境が確保できなくて制作を断ってきた携帯サイト。
さすがに無視できる状況ではなくなってきたので、しこたま携帯サイト関連の書籍を買い漁ったのだが、デザインカンプを制作する上で、重要な情報ってあまり載っていなかったりする。
と、言うわけで。
携帯サイトの覚え書き。
1.デザインカンプを制作する場合、画面サイズはw240pxを基準とする。スマートフォンの場合は320px。
携帯の場合、機種によってサイズは様々なのだが、今のところこのサイズを基準として考えた方がいい。
今後は変わってくるかもしれないけれど、ひとまずこれでデザインカンプを作る。
2.デザインカンプ制作の際は、24px、20px、16pxで考える。
デザインカンプの制作にあたり、この情報が一番欲しかった。
PCとは違って、携帯の場合のフォントサイズ指定は、large、medium、smallの3つになる。
細かく言うと、xx-lageとかxx-smallとかあるけど、キャリアによって解釈が違うorz.. はっきり言うけど、PCサイトなんか目じゃないほど厄介！！！！！！！！
というわけで、large=24px、medium=20px、small=16pxで考える。
3.コーディングの際は%設定する。
こうするとモニターサイズに合わせて可変するので、とりあえずはなんとかなる。画面サイズによっては、画像はちょっと荒れるけど、前述のように容量縛りがあるため、あんまり画像をきれいに書き出しても「表示できません」と言われて、悲しい事に。
PCと違って、画像のきれいさはあまり考えなくてもいいと個人的には思っている。
容量にも注意。
特にauは、容量縛りがめいちゃめちゃ厳しい。XHTMLの場合の1ページは 9KB いないでなければならないという厳しさorz..。
先日も、そこで引っかかって、色数減らしたりして画像を圧縮。なんとか表示させた事がある。
また、tableの入れ子レイアウトもやらない方がいい。
auで確認したら、入れ子にした所がまったく表示されなくなっていたorz….
おのれ、携帯め。
PC以上によくわからーん！！
とりあえず覚え書き程度。
そのうち携帯・スマートフォンについての記事は増えるかもね。