僕がWeb制作案件を初めて受注した時に混乱した出来事ナンバーワンが「スマホレイアウトのwidthが750px（ピクセル）で作られていたこと」です。
だって、スマートフォンの画面の横幅って大きくても400pxくらいなのに、横幅750pxのデザインに合わせてコーディングしたら、フォントや余白が大きくなりすぎてアンバランスなサイトになっちゃうじゃないですか。
でも、Webデザイン界隈ではスマートフォン用のレイアウトを2倍のサイズで制作しているデザインデータってとても多いんです！
「どうして！？」と思ったアナタ、本記事を読めば以下についての内容がわかるようになります。
- スマートフォンのレイアウトを2倍のサイズで作る理由
- デザイン通り、2倍のサイズでコーディングしたらどうなる？
- 2倍のサイズで制作されたデザインのコーディング方法
これからコーディング案件を受注しようと思っている人や、今現在同じ状況で戸惑っている人にも役に立つ内容になっていますので、本記事を読んでサクッと理解してしまいましょう！
この記事を書いた人
DoGgy
30歳で大手メーカーの営業マンを辞めて未経験からWeb制作を独学。現在は在宅フリーランスとして月平均50万円稼いでいます。
当ブログでは「在宅ワークの初め方」や「Web制作」について発信中！
スマホのレイアウトを2倍のサイズで作る理由
多くのデザイナーさんがスマホのレイアウトデザインを2倍のサイズで作る理由は、iPhoneやAndroidに搭載されている高解像度のディスプレイでも綺麗に見えるようにするためです。
解像度とは、画素（映像を表現するための粒）の密度を示す数値のことで、「解像度が高い」ということは、画素の密度が高いという意味になります。
以下の図を見ていただけるとイメージがしやすいかと思いますが、画素の密度が高いほうが画像が綺麗に見えるんです。
たしかに最近のスマホで見る写真とか動画ってキメが細かくてキレイだよね！
特に日本でシェア率の高いiPhoneシリーズには、Retina（レティナ）というディスプレイが搭載されていて、解像度は従来のディスプレイの「約2倍」です。
つまり、2倍の解像度を持つスマホのディスプレイに合わせて、スマホ用のレイアウトのデザインデータは2倍のサイズで作られているというワケです。
コーディングも2倍のサイズでやるの？
デザインデータ通り750pxのサイズでコーディングしたサイトを高解像度のスマホで閲覧しても、375pxに表示されるワケではありません。
スマホのディスプレイは解像度が2倍だから、2倍のサイズでコーディングすれば綺麗に表示されるってワケじゃないの？
ここに関してはブラウザの機能が優秀なので、閲覧しているディスプレイの解像度を取得して、HTMLやCSSで指定したpxを調整して変換してくれるのです。
従って、2倍のサイズで作られたデザインデータに忠実にコーディングをしてしまうと、スマホから閲覧した際に大きすぎて見辛いサイトになってしまうので要注意です！
じゃあ、デザインデータって普通に等倍（1倍）のサイズでも良いんじゃね？
実際にスマホレイアウトでも1倍のサイズでデザインデータを作成している人も居ますし、それでまったく問題無いと個人的には思います。
ただし、画像ファイルは2倍のサイズの方が高解像度のディスプレイで見た時に圧倒的にキレイに表示されますので、アセットする際にデザインデータに埋め込まれている元画像のサイズが2倍になっているかだけ確認しましょう。
2倍のサイズで制作されたデザインのコーディング方法
では、2倍のサイズで作成されたデザインデータを元にコーディングをする時はどうしたら良いのでしょうか？
単純にデザインデータの2分の1のサイズを計算してコーディングをすれば解決です。
簡単な作業ではありますが、念のためIlllustratorのデザインデータでいくつかコーディング時の数値を出してみましょう。
例① フォントのサイズ
下図の「もう、重い営業カバンを〜」というテキストのサイズを見てみます。
デザインデータ上でのフォントのサイズは44pxとなっていますので、実際にコーディングする際には2分の1のfont-size: 22px;と指定します。
また、line-height（行間）をpx等の単位付きで指定する場合には、CSSでline-heightの値も2分の1にしてください。
例② オブジェクトのサイズ
次はハンバーガーメニューについて見てみましょう。
ハンバーガーボタンを構成しているバーのwidthが60px、heightが4pxになっていますね。また、バー同士の間隔は16pxです。
これらもコーディングをする際には全て2分の1にして、
width: 30px; (または
height: 2px;
margin-bottom: 8px;margin-top: 8px;)
と指定します。
例③ 余白のサイズ
最後は「営業マンをサポートする〜」のテキストと「資料請求」ボタン間の余白を見てみましょう。
ものさしツールで調べたところ、余白が約100pxでしたので、コーディング時はmargin-bottom: 50px;と指定します。
※上記例では「営業マンをサポートする〜」のテキストのline-heightは無視しています。
レスポンシブデザインの場合、横幅は「width: 100%;」や「max-width: ○○px」で指定する事が多いので、上記例のようにフォントサイズや縦の余白で使用するテクニックです。
すごく簡単ですよね？これでイメージが掴めたのではないでしょうか！
こんな時はデザイナーに確認しよう！
2倍のサイズで制作されたデザインデータで、以下の2パターンに当てはまる要素があった場合はデザイナーに確認しましょう。
- 要素のサイズが奇数
- フォントのサイズが19px以下
要素のサイズが奇数
要素のサイズが奇数（例：31px）の場合は、コーディング用に2分の1にした際に少数点以下の数値（例：15.5px）が発生してしまいます。
しかし、各ブラウザは小数点以下の数値を切り捨てて表示しますので、仮に「15.5px」と指定したとしても、ディスプレイ上では15pxで表示される仕様です。
もしもデザインデータ上に奇数の要素があった場合は、2分の1にした時の数値を切り上げるべきか、切り捨てるべきか、デザイナーに確認するのが良いでしょう。
フォントのサイズが19px以下
ブラウザのユーザーシェア率1位であるGoogle Chromeでは、フォントサイズの最小表示サイズが10pxと決まっているので、9px以下のフォントが自動的に10pxに置き換わる仕様です。
2倍のサイズのデザインデータ上でフォントサイズが19px以下のものは、2分の1にした際に9px以下になりますが、Chromeで閲覧した際には10pxで表示されてしまうため、レイアウトが崩れる原因となります。
デザイナーさんが上記を把握せずにフォントサイズを決めている可能性もありますので、事情を伝えたうえでどの様に対応をすれば良いのか、デザイナーさんに相談してみましょう。
これでレスポンシブコーディングの最初の鬼門は突破！
レスポンシブサイトのコーディングって、それ自体もすごく奥が深くて難しいのですが、初心者にとってはデザインデータの内容からして既に意味不明という鬼畜仕様になっています。
デザインデータについては当記事で解決したと思いますので、あとは頑張ってコーディングをするのみです！
当ブログではこの記事の他にもレスポンシブコーディングに関する記事を掲載していますので、苦手意識のある方は参考にして頂ければと思います。
それでは、良いレスポンシブコーディングライフを！
