Photoshopを使ったWebサイト ラフデータの作り方 ~カンバス編~

Photoshopを使ったWebサイト ラフデータの作り方 ~カンバス編~

オールコネクトではWebサイトを制作するとき「デザイナー」と「コーダー」に担当を分けて制作を行っています。

デザインとコーディングとでは文系と理系のように分野が大きく異なり、得手不得手がハッキリ見える作業です。
デザイナーとコーダーとで作業をキッパリ分業する制作体制の場合、ラフデータの制作ルールがしっかりと定まっていないとコーディングしにくいラフデータが出来上がってしまいます。

そこでコーダーである僕がコーダー目線から見るコーディングすることを前提としたラフデータの作り方を何回かに分けて紹介します。

今回のお題は誰もが一度は迷う「カンバスサイズ」についてです。

閲覧対象デバイスを決める

まずは制作するWebサイトをどのデバイスで閲覧させるものにするのかを決める必要があります。
これを明確に定めないとWebサイトは作れないといっても過言ではありません。

2016年現在、インターネットを閲覧できるデバイスは無数に存在します。
そして今後も増え続けていくことでしょう。

ではその無数に存在するデバイスをどう選定するのか。
Webサイトを制作するときには大きく分けて「PC・タブレット・スマートフォン・その他で分ける」「閲覧しているデバイスの解像度で分ける」といった方法があります。
どちらの方法を採用するにしても必要になってくるのが代表的なデバイスの解像度です。

以下がその代表的な端末の解像度になります。

デバイス名解像度(px)
デスクトップPC1920×1020
 ノートPC1366×768
タブレット(iPad)768×1024
スマートフォン(iPhone5)640×1136(320×568)
モバイル480×854
ゲーム(Nintendo3DS)400×240

ちなみにPCのディスプレイサイズのシェア率は、2016年現在で1920×1020が約27%、1366×768 が約19%となっております。
横幅1920px超えるディスプレイ、所謂4Kとか8Kなどと呼ばれるサイズはまだ一般的に普及しきっていないので、考える必要性は少ないでしょう。

カンバスサイズを決める

閲覧デバイスが決まったら、それに合わせてカンバスサイズを決めます。
基本的には横幅のみしっかりと決めるだけで、縦幅は気にする必要はありません。
このカンバスサイズの設定があやふやなまま適当なサイズで作り始めてしまった場合、実際にコーディングした際にデザイナーが思い描いていた理想図通りの再現が困難になります。

PCサイト

PCサイトは一般的に普及している1920×1020サイズ(Full-HD)を基準にします。
基本的にはその時代時代で一定以上位普及しているサイズの中で一番横幅の大きい物を基準にします。
もし今後4Kや8Kといったディスプレイが現在のFull-HD並に普及した場合、それに合わせてカンバスサイズを拡大しなければなりません。

以上のことからPCサイトを制作する際のカンバスサイズは 横幅1920px となります。

SPサイト

スマートフォンは他のデバイスとは違い、本来の解像度は()内の横幅320pxになります。
しかし、ラフデータを作成する際はカンバスサイズ・画像のサイズ・フォントサイズなど全て2倍の横幅640pxサイズで作成する必要があります。
なぜ倍サイズなのかというと、Retinaディスプレイなど高解像度のディスプレイは画素密度(ppi)が2倍になっているため、少しズームしたりすると画像などがぼやけてしまうためです。
これに対応するためには画像類の解像度を2倍以上で作成する必要があり、尚且つそのサイズに合わせてフォントサイズなども倍で作成しなければ想定していた通りのWebサイトがコーディングできないためです。

また、コーディングを行う際は倍サイズで作られたラフデータを等倍サイズで計算し直してフォントサイズなどを設定しなければならないので注意が必要です。

以上のことからSPサイトを制作する際のカンバスサイズは 横幅640px となります。

タブレットサイト

タブレットはiPadを代表に様々なサイズの物が流通しています。
そのため明確にこのサイズ!と決めることが難しいため、一般的に様々なサイズでもデザインが崩れにくいリキッドレイアウトのデザインを用いたレスポンシブデザインのサイトを多く見受けられます。

また、タブレットで閲覧した場合はタブレットの解像度とは関係なく、PCサイトやSPサイトを表示させるといった方法もあります。
その場合、PCサイトを表示させるのが現在の主流のように感じます。

以上のことからタブレットサイトを制作する際はiPadを基準とし、カンバスサイズは 横幅1024px となります。

その他

他にはモバイルサイト(所謂ガラケーで表示させるサイト)や、最近の子どもたちはNintendo3DSやWiiUといったゲーム機を使ってWebサイトを閲覧することがあります。
しかしこれらのデバイスでの閲覧率は上記3デバイスに比べてかなり低いため、あえてこれらのデバイス用のWebサイトを制作することは少ないと言えます。

それでも可能性がゼロではないので、もし必要性が出た場合は、明確にどのデバイスかを定めその解像度を確認し、一番横幅の大きいサイズを基準にカンバスサイズを設定しましょう。

まとめ

どのデバイスを対象としたWebサイトを作るにしても、デザインの段階からデザイナーとコーダーとで密にコミュニケーションを取ることで、「思っていたラフデータと違う」とか「画像のサイズが足りないんだけど…」といった二度手間な作業を避けることができます。

カンバスサイズについては時代とともに変化していくものなので、既存のラフデータであっても今後更新する可能性があるのであれば、その時代に合ったカンバスサイズへメンテナンスする必要があるでしょう。

かなり手間かもしれませんが、良いWebサイトを制作するためにがんばりましょう!


Previous: Flexboxで簡単レイアウト Next: css3のアニメーションを活用してみよう

© 2017 ALL CONNECT Inc. All Rights Reserved.