初心者のためのWebデザイン学習2/デザインデータの作り方(準備編)

Webサイトのデザインデータを作る場合、最初にどのようなポイントを押さえておけば良いのか?
習得すべきツールの話から制作開始の前段階まで、Webデザイン初心者向けに基礎を解説していきます。

案件の受注〜デザインの方向性決定までを解説した前回の記事はこちらです。

Photoshop、XD、Sketch…
Webデザインはどのソフトで作るべき?

Webデザイナーを目指す方から、デザインデータはどのツールで作れば良いのか?という質問をいただくことがあります。
志望する企業が決まっているのであれば、そのデザインチームで使われているツールを使用することがベストですが、志望がまだ決まっていない場合にはPhotoshopをおすすめします。

なぜなら、WebサイトのデザインデータであればPhotoshopで制作しているケースが多い、ということが大きな理由です。
また、XDやSketchなどをメインで使用していてもPhotoshopを使用した画像補正や加工といった作業が発生する場合が多く、Webデザイナーを目指すのであればPhotoshopの基本操作は必須習得スキルと言えます。

さらに、制作の基本的な手順や考え方はどのツールを使用していても共通しているポイントがありますので、Webデザイン初心者の方はまずはPhotoshopでデザインデータ制作を経験しておくと良いと思います。
ということで、本記事ではPhotoshopでの制作手順を解説していきます!

Photoshopの初期設定

最低限これだけ設定しておけばとりあえず大丈夫!という項目をピックアップしました。

1.環境設定

Webデザインの基本単位はピクセル(pixel、pxとも表記される)です。
デフォルト状態のPhotoshopでは、単位が「mm」になっていると思いますので、「pixel」にしましょう。

上部メニューバーの【Photoshop CC】→【環境設定】→【単位・定規】から設定できます。

「定規」「文字」の両方とも「pixel」にしておきます。

ついでにグリッドも設定しておきましょう。
グリッド線を10pixel・分割数を10にしておくと、グリッドを表示させた時に1px単位のマス目が現れます。

2.要素の選択、拡大・縮小が直感的にできるようにする

デフォルト状態のPhotoshopでは、選択ツールで要素を直接クリックしても、その要素を選択できません。(レイヤーパネルで選択する必要がある)

また、バウンディングボックスが表示されないので、要素の拡大・縮小も直感的にできません。
以下の手順で、設定を変更しておきましょう。

  1. Photoshop左側のツールバーから【移動ツール】を選ぶ
  2. 【自動選択】【バウンディングボックスを表示】の項目が表示されるので、チェックボックスをONにする

新規ファイル作成

PhotoshopでWebデザイン用に新規ファイル作成をする際のポイントです。
解像度やカラーモードなどは、他のデザインツールを使用する場合にも気をつけましょう。

1.サイズや解像度

  • ドキュメントの種類:「Web」
  • (※幅や高さなど他の項目を入力すると自動的に「カスタム」という名前になってしまいますが、そのままで大丈夫です)
  • サイズ:幅1280pixel・高さ800pixelとしておきます
  • (※PC版のデザインを想定。作成後でも変更可能)
  • 解像度:72 pixel/inch
  • カラープロファイル:「作業用RGB:sRGB IEC61966-2.1」

Webデザインの解像度は72ppi(pixels per inch)が基本です。解像度って何?という方は、この機会に検索するなどして基礎知識をつけておきましょう。

2.カラーモード

新規ファイル作成ができたら、カラーモードも確認しておきましょう。WebデザインのカラーモードはRGBが基本です。
Photoshop上部のメニュー【イメージ】→【モード】で確認・変更できます。「RGBカラー」にチェックが入っていればOKです。

Webサイトのデザインデータは、横幅何px(ピクセル)で作るのか?

PCモニターの大型化や画面の高解像度が進み、Webサイトのコンテンツ幅も一昔前と比べると大きくなってきました。スマートフォンやタブレットも同様ですね。また、メーカーによって様々な画面幅の機種が発売されています。では実際何ピクセルで作れば良いのでしょうか?
結論から言えば、PC版のWebデザインはコンテンツ幅(固定幅)1000px前後(例:980px)、SP版のWebデザインは750pxで作ることをおすすめします。

コンテンツ幅を決定するヒント:その1

迷った時に参考にするのは、世間一般のシェア率です。モニター解像度のシェア率を集計しているサイト「StatCounter 」で、チェックしてみましょう。

2018年8月〜2019年8月のPCモニター解像度シェア率(日本)

  • 1位 1920×1080(24.73%)
  • 2位 1366×768(14.26%)
  • 3位 1536×864(6.24%)
  • 4位 1280×1024(4.54%)
  • 5位 1440×900(4.45%)

(参照:https://gs.statcounter.com/screen-resolution-stats/desktop/japan/#monthly-201808-201908

1位はなんと横幅1920!1000px前後と言わず、もっと大きいサイズで作っても良いのでは?という気もしてきますよね。しかし、PCモニターの幅いっぱいにブラウザを広げてWebサイトを閲覧する人ばかりではありません。

また、タブレットのシェアもポイントです。

2018年8月〜2019年8月のタブレット解像度シェア率(日本)

  • 1位 768×1024(71.31%)
  • 2位 834×1112(5.57%)
  • 3位 1024×1366(4.76%)
  • 4位 800×1280(2.28%)
  • 5位 1280×800(2.27%)

(参照:https://gs.statcounter.com/screen-resolution-stats/tablet/japan#monthly-201808-201908

タブレットを横向きで使用すると、小さめのPCモニターと変わらないぐらいの画面幅になります。このときに1000px前後のコンテンツ幅でWebサイトが作られていると、タブレットでも綺麗に表示することができます。(※1)

こうした事情を踏まえ、多くの人がストレスなくスムーズに閲覧できるように、と考えると、PC版のWebデザインは1000px前後がおすすめです。
具体的な数値としては、960px、980px、1000px、1024pxなどです。このあたりの幅にしておくと、複数カラムの時にも数値の計算がしやすいです。


※1 今回はPC(タブレットも考慮した固定幅)とスマートフォン、というブレイクポイントの設定を想定しています。
リキッドレイアウトの場合など、大型モニター(例:デスクトップPC)、中型モニター(例:ノートPC)、小型モニター(タブレット)といったように実装上でブレイクポイントを複数設定して細かくデザインを出し分けることもあります。

コンテンツ幅を決定するヒント:その2

必ず確認しておかなければならないのが、案件の背景やマスト要件です。
クライアントによっては、「このモニターサイズで綺麗に見えるようにしたい」という希望があります。それは、クライアント社内でシェアの大きいモニターサイズであったり、クライアントが抱えるユーザーが利用することの多いモニターサイズであったりします。

また、飲食店や車の販売店、アパレルショップなどの店頭にタブレットが置かれているのを見たことがありませんか?営業ツールのひとつとしてデジタルデバイスを利用することが一般的になりつつあります。
そのデバイスで綺麗に見えるようなWebサイトにしたい!というような場合もあるのです。

PC版のデザインデータはコンテンツ幅(固定幅)+αの余裕を持たせる

では早速PC版のデザインデータをコンテンツ幅○○pxで作ろう!となったとき、コンテンツ幅ぴったりのアートボードでは小さすぎます。
左右にプラスアルファ余裕を持たせてください。

なぜなら、基本的な要素は固定幅内におさめるようにデザインしますが、ときには画面幅いっぱいに広がる要素(例:メインビジュアル)を入れる場合もあるからです。そのイメージをつかみやすくするため、固定幅+αの幅をもたせたアートボードサイズにします。

スマートフォン版のデザインデータは高解像度対応がポイント

スマートフォン版のWebデザインは750pxとお伝えしましたが、根拠としてはやはりシェア率です。

2018年8月〜2019年8月のスマートフォン解像度シェア率(日本)

  • 1位 375×667(31.6%)
  • 2位 360×640(15.09%)
  • 3位 375×812(12.53%)
  • 4位 414×736(9.82%)
  • 5位 414×896(7.76%)

(参照:https://gs.statcounter.com/screen-resolution-stats/tablet/japan#monthly-201808-201908

シェアトップを誇る横幅375pxの倍サイズ(=750px)でデザインデータを作成します。
なぜ倍サイズなのか?というと、高解像度ディスプレイに対応するためです。とくに日本でシェアの高いiPhoneに搭載されているRetinaディスプレイは、Retina以前のモニターと比べると同じディスプレイサイズであっても縦横のピクセル数が2倍になっています。
細かい解説は省略しますが、もし物理的な解像度と等倍(=375px)でデザインデータを作ってしまうと、「スマホで見たときに画像がボケる」という現象が発生してしまいます。
等倍(=375px)で作っておいて必要に応じて画像は倍サイズで書き出して実装する、という方法もありますが、最初から全体を倍サイズ(=750px)で作っておいたほうがラクかなと思います。

また、スマートフォン版デザインデータの場合はアートボードサイズは750pxぴったりで大丈夫です。
スマートフォン版のWebサイトは固定幅無し・画面幅いっぱいに表示させるケースが多いと思いますので、PC版デザインのようにアートボード左右の余白は不要です。

まとめ

さて、Photohopの初期設定からアートボードの準備までできました!
次はどんどん手を動かしてデザインを作っていく段階です。最初は「量をこなす」ことを目標にすると良いと思います。
速く・正確に作業するスキルが身についたり、自分の中のデザインの引き出しを広げられたりするからです。目に見える形で成果や実績を作っていくことで、自分のモチベーションアップにも繋がります。

▼次の記事

Webデザインの学習をしている方に向けて無料のデザイン課題をKROWLサイトで公開中!
AdobeのIllustratorやPhotoshop、XDの操作を学びながら難易度別に用意してあるデザイン課題に取り組もう!

関連記事