初心者でもPhotoshopの基本的な使い方が分かる入門記事9選：Webサイト作成手順を勉強するまとめ（1）（3/3 ページ）

新社会人のWeb制作者／デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。初回はWeb制作現場で役立つPhotoshopの使い方について。初期設定、レイヤー、シェイプ、レタッチ、スライス、画像アセット機能の使い方、テキストの効果的な見せ方、イラレデータの扱い方から、Edge Reflowと連携したレスポンシブWebデザインまで紹介。

[岡本紳吾，hatte.Inc]

【ステップ6】Webデザインの要「スライス」と「画像アセット」機能を使った自動書き出し

　PSDでデータがやりとりされているWeb制作の現場では、PSDに「スライス」というものが設定されているはずだ。スライスとは、画像の書き出し領域のことで、ヘッダーやフッターの各要素など、HTMLから呼び出せる画像の単位に変換するためのものだ。

　スライスをきちんと設定しておくことで、書き出し時のファイル名を統一でき、ファイル名違いによるデッドリンクなどを未然に防止できる。また、書き出し操作を1回で済ませられるのも利点だ。

　一方で、スライスが設定されていないPSDを渡されて「じゃこれ、スライスしといて」なんて指示があることも十分考えられる。スライスはWebデザインの要でもあるのだ。

　なおスライスに取って代わるものとして最近、Photoshopに「画像アセット」機能が追加された。これはレイヤーにファイル名を付けることで、勝手にその要素を書き出してくれるというものだ。大きさが変わってもスライスの場合はスライスの大きさを変えなければならないが、アセット書き出しはその必要すらなく、レイヤーの変化に柔軟に応じて画像を書き出ししてくれる。

　筆者はスライス作りが余り好きじゃない性格なのか、最近は専らアセット書き出しを愛用している。

• Photoshop入門第6回　完成したWebデザインから、画像やCSSコードを生成しよう（Adobe Pinch In）の主な内容
1. 完成したWebデザインから、画像やCSSコードを生成する方法
2. スライス機能を使った書き出し
3. スライスに関する小技
4. 画像アセット機能を使った自動書き出し
5. CSS3コードの抽出

スライスツールで切り分ける（Photoshop入門第6回　完成したWebデザインから、画像やCSSコードを生成しよう（Adobe Pinch In）より引用）

コラム「先人たちのテクを盗め！」

　さあ、これでPhotoshopの基本はバッチリだろう。基本を理解していたとしても、現場ごとに微妙なルールの違いが存在する。しかも、それは作業者だけに言い伝えられている伝承のごとく、ドキュメント化されていなかったりもする。

　また、先人たちはさまざまな現場テクニックをさり気なく披露することがある。パッと目の前で何か手品のような動きをされたとき、それを見逃さずに質問してみるといいだろう。

　「今の、どうやるんですか？」筆者もそうやっていろいろなテクニックを盗んできたのだ（すご過ぎて何やってるかさっぱり分からないレベルの人もいたが）。

【ステップ7】Edge Reflowと連携して「レスポンシブWebデザイン」

　さて、Photoshopは最近Webデザインツールとの親和性が驚くほど良くなってきている。先ほど紹介したスライスや画像アセットの機能は、PSDをHTMLにする際の下ごしらえ部分のようなものなのだが、Photoshopは画像のデザインツールである以上、その垣根を超えることはなかなかできなかったのだ。

　Adobe Creative CloudとともにAdobe Edgeファミリが登場して、ツール間のつながりが持たれるようになったあたりから、PhotoshopでもWebデザイン過程の最後の方までフォローできるようになってきた。まだ実制作レベルではなくカンプのレベルなのだが、その方法を紹介している記事を幾つか紹介しておきたい。

　PhotoshopからHTMLを書き出す最良の方法はAdobe Edge Reflowと連携させることだ。Photoshopは「Reflow書き出し」機能を持っているため、ある決められたルールでレイヤーを構成しておけば、ほとんど手直しをすることなくHTML化できる。このツールの良いところは、専門的な知識を必要とせず、きちんと動くレスポンシブなレイアウトを書き出しできる、つまり「レスポンシブWebデザイン」に対応できるところにある。

　もしあなたが、Webデザイン系の部署ではなく営業や提案系の部署に配属となった場合でも、提案資料に実際に動作するモックを持っていくことができるようになるのだ。

　この辺りのツールの使い方もAdobe PinchInで紹介されているので、実際の作業については下記3つの記事を参照してほしい。

• PhotoshopからはじめるCSS再入門 第1回新しいWebデザインのアプローチ（Adobe Pinch In）の主な内容
1. これまでのWebデザイン
2. レスポンシブWebデザイン
3. レスポンシブWebデザインに向いているサイト
4. Adobe Edge Reflowを使ってみよう
• Photoshopから作るレスポンシブカンプ（書き出し準備編）（Adobe Pinch In）の主な内容
1. 必要な準備
2. Edge Reflowに持っていくためのPhotoshop側での準備
3. Edge Reflowプロジェクトの書き出し
4. Edge Reflowプロジェクトを開く
5. Edge Inspectで確認
• Photoshopから作るレスポンシブカンプ（レイアウト編）（Adobe Pinch In）の主な内容
1. 要素の位置やサイズの調整
2. テキストの調整
3. 要素の階層構造の作成
4. アセットの更新

1. Edge Reflowに持っていくためのPhotoshop側での準備（Photoshopから作るレスポンシブカンプ（書き出し準備編）（Adobe Pinch In）より引用）

次回は、HTML・CSS初心者でも分かるDreamweaverの使い方まとめ

　今回はPhotoshopに縛って基本的な部分からレスポンシブデザインまでを紹介したが、いかがだっただろうか。

　次回は、まるごとDreamweaverでお届けする予定だ。もちろん、「Adobe Pinch In」では、他の記事はすでに読めるので、そちらも参照してほしい。今回少しだけ紹介したIllustratorに関する記事も順次追加するようだ。

岡本 紳吾（おかもと しんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto