縦長のスマホ画面と、横長のPC画面。
この両方に合わせたデザインにするなんて、素人の仕事じゃない。
だが時代は、両方に対応したホームページを求めている。
困りましたね………。
スマホ、PC、両方に対応する方法
主に３つあります。
- スマホで見てもPCで見ても許容範囲なデザインにする
- スマホページとPCページの２種類作る
- レスポンシブ対応する
難易度は個人の得意分野によって違うけど、たぶん漫画描きさんは１番が一番得意だと思います。で、３番が一番難しいんじゃないかと思います。
けれど、主流は３番です。なんてこと……。
荒くですが、内容を説明していきます。
１、スマホで見てもPCで見ても許容範囲なデザインにする
PCに合わせるなら、スマホで表示しても文字が読める程度の大きさを保てば許容範囲だと思います。スマホに合わせるなら、PCで表示しても左右の余白が気にならない程度で、最初に表示される部分が変なところで切れなければ大丈夫かな。（イラストの鼻下とかで切れると悲しい感じ）
個人ページでは、結構見る気もします。企業ページでは見ないかなぁ…。
２、スマホページとPCページの２種類作る
スマホ用の縦長デザインページと、PC用の横長デザインページの２種類のｈｔｍｌとCSSを作成します。
訪れた人の端末情報を入手して、スマホならスマホ用ページ。PCならPC用ページを自動で表示します。
個人サイトで作るのは、手間を考えると現実的じゃないかな…。
漫画の最新話をUPする度に、２種類のｈｔｍｌを書かないといけません。更新が億劫になりかねないです。
更に、PHPかJavaScriptかhtaccessという新たなジャンルの記述もしなければならない。難易度高めです。（コピペで行けるかもだけど）
フリーサーバーはhtaccessに対応していない場合があるので、作成前に調べておく必要があります。
３、レスポンシブ対応する
表示画面の幅に合わせて、デザインを変える。
…２番と似てますが、違うのはｈｔｍｌファイルは１つでOK、PHP等は不要、代わりにCSSの記述が大変。です。
CSSファイルは１つですが、場合によっては通常の倍近い記述をしなければいけません。
CSSを普通に書くだけでも頭が混乱するのに、スマホ用のCSSとPC用のCSSの２種類記述していきます。タブレット用も作るなら３種類。
この方法だと、「訪れた端末情報」ではなく「表示する画面サイズ」によって表示を変えます。つまり、ＰＣで訪れてもブラウザの横幅を狭めていたらスマホ用画面が表示されます。
JR東日本のホームページがレスポンシブ、JR西日本（おでかけネット）のホームページがスマホ・PC用の２種類で作られています。現在のところ。
対応方法の選定
んーーー。
もうコレは好みでしかない！
あえて言うなら、最初に作るホームページは１番の方法。
慣れてきたら、３番の方法。が、順当かも知れない。
時間がたっぷりあり、サーバーがhtaccessに対応しているなら２番もアリ。
私は、今はレスポンシブで作っていますが、手を出したのは本当につい最近です。半年前くらい。
もう考えるだけでイヤだったんですよね…。レスポンシブ…。
レスポンシブ記事も書く予定ですので、見てみて拒否反応が出ない方はぜひレスポンシブにチャレンジしてください！
コメント