【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能
PhotoshopでWebデザインをはじめよう！
この連載では、Photoshopの初心者を対象とし、Webページをデザインする方法を紹介していきます。初回は、デザイン前に覚えておきたいこと。Photoshopの環境をWebデザインの基本となる単位「pixel」に設定する方法、そして、デザイン作業を行う上で大事な機能（定規、グリッド、ガイド、レイヤーなど）について説明します。
Webデザインに使えるPhotoshop
Photoshopは、その名の通り、写真の加工や補正に適したソフトです。でも、最近のバージョンはかなり高機能で、イラストの描画・彩色、簡易的なDTP（印刷物の制作）、そしてWebデザインなど、幅広い用途にも使用できます。
この連載では、Photoshopの初心者を対象に、Webサイトのトップページをデザインする上で便利な機能やテクニックを紹介していきます。
第1回は準備編です。PhotoshopはもともとWebデザイン専門のソフトではないため、Webデザイン用に環境設定を変更したり、ちょっとしたコツを知っておくことが、正確で美しいWebデザインへの第一歩です。
※Photoshopは最新版を使用してください（執筆時のバージョンはCC 14.2）。記事では、Mac OS Xを基本に解説しています。ショートカットは、「command（Ctrl）」のように、Windowsの場合を括弧内で表記しています。
作業環境の単位を「pixel」にする
Photoshopは様々な用途に使えるため、扱える単位もたくさんあります。Webデザインでの基本となる単位は「pixel（px、ピクセル）」です。
pixelの数値を正確に把握・コントロールしながら作業することで、美しいレイアウトを実現でき、デザイン後のコーディングもスムーズに進行できます。そのためには、ドキュメント上で1pxごとにしっかりと計れる環境づくりが必要です。Photoshopを起動したら、まずはこの環境づくりをしましょう。
環境設定で単位をpixelに設定する
Photoshopの初期設定では、単位がmmになっているため、pixelに設定します。［Photoshop］メニュー→［環境設定］→［単位・定規］を選択し、［定規］と［文字］の単位を「pixel」に変更して［OK］をクリックします。これで、Photoshop上での単位がpixelとなりました。
グリッドとガイドと定規を表示する
次に、［Photoshop］メニュー→［環境設定］→［ガイド・グリッド・スライス］を選択し、［グリッド］項目の単位を「pixel」に設定し、［グリット線］と［分割数］に同一の数値を入力し、［OK］をクリックします。ここではそれぞれ「10」と設定しました。
［グリット線］と［分割数］の数値は、100px四方をどれくらいのグリッド数で縦横分割するかという意味です。ここでは10と設定したので、10pxごとにグリッド線が入ります。
実際に新しいファイルを作って確認してみましょう。［ファイル］メニュー→［新規］を選択し、［プリセット］を「Web」にして［OK］をクリックします。
［表示］メニュー→［表示・非表示］から［グリッド］と［ガイド］を選択し、それぞれを表示させます（［ガイド］は最初選べませんが、一度ガイドを引くと表示／非表示を選択できるようになります）。チェックマークがあると表示、マークがないと非表示ということになります。
定規が表示されていない場合、同じく［表示］メニュー→［定規］を選択します。定規はcommand（Ctrl）＋ Rでも表示／非表示できます。
グリッド、ガイド、定規の設定が表示になっていることを確認したら、実際にガイドを引いてみましょう。カーソルを定規に合わせてクリックし、ガイドを引きたい位置にドラッグします。定規の値を見ながらガイドを引くと、グリッドの罫線が10pxごとに配置されていることがわかります。
この定規とガイドは、規則的なWebデザインには不可欠な機能です。また、グリッドは、普段の作業時には非表示にしておき、数値を確認したい時に表示するなど、要所で使っていくとよいでしょう。
– 定規やガイドに関する小技 –
定規やガイドを使う際に覚えておくと便利な小技を紹介しておきましょう。
【カンバスの任意の部分のサイズを計る】
［長方形選択ツール］を選択し、任意の場所をクリック＆ドラッグすると、選択範囲のpixel数が表示されます。
【数値で設定してガイドを引く】
［表示］メニュー→［新規ガイド］を選ぶと、［新規ガイド］ダイアログボックスが開きます。［方向］を選び、［位置］に数値を入力すると、原点（0,0）を基準とした正確なガイドを引くことができます。
オブジェクトを描画・移動する
オブジェクトを描画する
Photoshopでは、描いた図形などを指して、「オブジェクト」と呼びます。オブジェクトは色々なツールを使って描画できます。例えば、［長方形ツール］を使えば、「シェイプ」と呼ばれるオブジェクトができます。
シェイプを作成する上で色々とコツがあります。例えば、［長方形ツール］で長方形を描画する際、角や境界線をぼかさず、鮮明に描画する方法を紹介しましょう。次の図は、［長方形ツール］を使って、AとB、2つの長方形を作成したものです。
Bの上下の境界線のわずかなボケは、シェイプのサイズの末尾が小数点になっているために発生します。［長方形ツール］を選択時に［エッヂを整列］にチェックを入れると、Aのように回避することができます。
また、［編集］メニュー→［自由変形］でオブジェクトの形を変えることができます。この自由変形は、command（Ctrl）＋ Tでも可能です。shiftキーを押しながら四隅の黒い四角をドラッグすると、縦横サイズの比率を保ったまま大きさを変えることができます。
オブジェクトを移動する
描画したオブジェクトは基本的に、［移動ツール］を使い、クリック＆ドラッグで移動させることができます。アプリケーションバーの［自動選択］にチェックを入れ、［レイヤー］を選択しておくと、オブジェクトを選択しやすくなるのでおすすめです。
【Webデザインするときのポイント ～pixel編～】
- pixelの数値は小数点にしない
→ 小数点にすると、意図せず輪郭がボケてしまう - pixelの数値はなるべく偶数にする
→ 計算がしやすく、コーディングが楽になる
レイヤーの基本構造と機能
レイヤーとは、直訳すると「層」のことです。Photoshopの基本的な作業は、レイヤー（＝透明なフィルム）を何層にも重ねていきながら、それぞれのレイヤーを選択して必要に応じて修正することです。
美しいデザインは、美しいレイヤー構造から。いつでも誰でも理解できるレイヤー構造を目指しましょう。
ここでは、［レイヤー］パネルの名称について簡単に説明します。［ウィンドウ］メニュー→［レイヤー］を選択し、［レイヤー］パネルを開きます。
「レイヤーを新規作成し、名前を付けてグループ化する」というのが、Webデザイン作業の基本となります。既にあるレイヤーを［新規レイヤーを作成］アイコンの上にドラッグ＆ドロップすると、レイヤーが複製されます。
次回以降では、背景などを「ロック」したり、アイコンのピクト（単純なイラスト）とベースのオブジェクトを「リンク」しながら作業していきます。
【Webデザインするときのポイント ～レイヤー編～】
- レイヤーには名前を付ける
→ 名称がわかりやすくなる - グループやリンクを明確にする
→ レイヤー同士の関係性がわかりやすくなる
– レイヤーに関する小技 –
レイヤーを使う際に覚えておくと便利な小技を紹介しておきましょう。
【レイヤーに色を付ける】
色を付けたいレイヤーあるいはレイヤーグループを右クリック（control＋クリック）して、色を選択します。見た目がわかりやすいだけではなく、色ごとに検索できる機能があるので、同じ要素を同じ色にしておくなど、活用しておきたい機能です。
【レイヤー名に「○○のコピー」と付けない】
レイヤーを複製していくと、「○○のコピー」という名前が自動で付き、名前を変えるのが面倒です。この設定を変更するには、［レイヤー］パネルの右上のメニュー→［パネルオプション］を開き、［コピーしたレイヤーとグループに「コピー」を追加］のチェックを外します。
デザインが進むにつれ、レイヤーの数もおのずと増えてきます。パーツごとにグループ化したり、わかりやすい名前や色を付けて、見やすい構造にしておくとよいでしょう。
今回は、Webデザインならではの設定や操作について説明しました。次回の「シェイプを駆使してデザインのベースを作ろう」では、これらを踏まえて、実際にWebサイト（トップページ）を作成していきます。