この記事について
この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。
emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。そのほかストックイラストレーター、グッズデザインなどしております。
XDやFigma以外のツールでWebデザインの制作経験がないのに、PhotoshopでWebデザインをすることになった。もうちょっと凝ったメインビジュアルやバナーデザインを作成できるようになりたい。という方に読んでほしい記事です。
Figmaのあの機能はPhotoshopでも可能?
Figmaで使っていた機能はPhotoshopでも可能なのか気になるところだと思います。そこで、FigmaでWebデザインの制作をする際によく使われる以下について、Photoshopではどのように作業すればよいのかをみていきます。
- Photoshopでのカラー、文字スタイルの設定の方法は？
- PhotoshopではFigmaのコンポーネント化のようなことはできる？
Photoshopでのカラー、文字スタイルの設定の方法は？
カラー、文字スタイルはCCライブラリで管理が便利
Figmaで作成していたカラースタイルの管理はPhotoshopではどう作成・管理すればよいでしょうか。Photoshopでもプロジェクトで使用する色や文字のスタイルをカラースタイルやテキストスタイルとして登録して使用が可能です。
CCライブラリで管理するとPhotoshopだけではなくIllustratorでも使用が可能なのでとても便利です。
個人的にはFigmaの方が簡単に登録できてPhotoshopよりわかりやすいと思いますが、CCライブラリで管理ができ、他のAdobe製品でも使用できるので便利です。
Photoshopでのカラースタイルの作成方法
ツールバー内の描画色（CCライブラリパネル内では前景色）を［＋］アイコンから追加で登録できます。
カラースタイルや文字スタイルを登録したいレイヤーを選択した状態で［＋］アイコンをクリックすると、レイヤー内で使用している文字スタイルやテキストカラーがCCライブラリ内に登録されます。
CCライブラリで管理する方法
CCライブラリについてさらに詳しく知りたい方はこちらをご覧ください。
Creative Cloud ライブラリ
使用している画像をCCライブラリで管理したい場合は、管理したい画像があるレイヤーを選択します。
［ウィンドウ］［CCライブラリ］を開き、CCライブラリパネル下にある［＋］アイコンから［画像］を選択するとCCライブラリパネル内に使用している画像が追加されます。
ライブラリを書き出し、読み込みもできます。
CCライブラリパネル上部のユーザーアイコンをクリックすると、Creative Cloudのアプリケーションウィンドウが開きます。
共有の横にあるメニューアイコンから［書き出し］を選択すると、CCライブラリをファイルで書き出すことができます。
書き出したCCライブラリのファイルは他のCCアカウントで読み込みが可能です。
PhotoshopではFigmaのコンポーネント化のようなことはできる？
コンポーネントはFigmaにある機能のひとつです。コンポーネントを作成すると複数箇所で使用できるので、一貫性のあるデザインを作成できるのでとても便利です。
ボタンやアイコン、カード型のレイアウトもコンポーネントにできます。
スマートオブジェクトでひとまとまりにする
このコンポーネントのようなものをPhotoshopで作成できるのでしょうか。
Photoshopではレイヤーの複製やレイヤーをまとめてグループ化して複製という方法もありますが、これはFigmaのコンポーネントとは違い、レイヤーやグループを複製して同じものを増やしただけです。複製したデータにそれぞれ別の変更を加えることもできるので、一貫性を保つということから外れてしまいます。
例えば、カード型のレイアウトをまとめてスマートオブジェクトにしたとします。
このカード型レイアウトのデザインデータをスマートオブジェクトに変換し、ひとまとまりのデータとします。
このスマートオブジェクトを並べていきます。
Figmaのコンポーネントと同じ感覚でデータを作成してコピー、ペーストの方法で複製したデータを編集すると、反映してほしくなかった箇所まで反映されてしまうことがあります。
編集したいスマートオブジェクトをダブルクリックすると、スマートオブジェクトにしたデータが.psb形式のファイルで開きます。
編集した後は保存をすると編集が適用されデータが更新されます。
スマートオブジェクトをコピーしてペーストと複製していくと、このように変更したくなかった箇所まで編集が適用されてしまいます。
スマートオブジェクトの複製時はデータを連動しないように複製します。複製したいスマートオブジェクトを選択、右クリックし［スマートオブジェクトを複製］を選択します。
すると通常のスマートオブジェクトの複製とは違い、独立した画像やテキストに変更が可能です。
スマートオブジェクトは、画像を縮小したあとで拡大しても、元のサイズを残したままで編集できます。画像を劣化させることがないので、画像の編集時にはとても便利です。
Figmaに慣れた人がPhotoshopでの作業時に注意すること
文字詰めは適材適所
Photoshopは文字間を調整しやすいので見栄え良く整えたくなりますが、コーディングで反映できないかもしれない。と考えて、適材適所で行います。
例えば、タイトルなどの見出しで文字間を調整したとします。
文字間を細かく調整すると、デザインを反映するために画像でしか実現できなくなります。
記事内の見出しを画像にしてしまうと、更新のたびに画像ファイルを作成しなくてはいけない。となります。この作業をクライアント側でできないこともあるので現実的ではありません。CMSで更新される箇所だったり、見出しとしてマークアップすることで正しい文書構造にし、アクセシビリティの観点からも画像ではなくテキストで処理したい。となれば、文字間の調整はしないほうがいいです。
文字間の調整は、バナーデザインなどWebサイト上にテキストで処理しなくてもよい箇所に留めておきましょう。
整列は忘れずに
Photoshopにはフレーム内での挙動や配置の指定ができるFigmaのオートレイアウトに該当する機能がないので、オブジェクトやテキストを配置する時には、配置する場所を整えたいレイヤーやグループを選択し、微妙なズレが起きないようにツールを使って整列します。
移動ツールを選択時にオプションバー［整列］を表示します。
わかりやすくレイヤーを整頓する
Figmaではオートレイアウトを指定するとレイヤーが階層でまとまります。
まとまったレイヤーのグループは、縦並び、横並び、折り返しとどの状態かがわかりやすいアイコンになります。Photoshopではレイヤーをグループ化して整頓しないと膨大な数のレイヤーになり、画像の書き出しもしづらくなります。
画像を書き出す方法はいくつかありますが、どの方法でも書き出すときにはレイヤーを整頓しておきます。
書き出し方法
- 書き出したいレイヤーやグループ化したフォルダを選択 ＞ 右クリック＞［PNGとしてクイック書き出し］
- ［書き出し］＞［書き出し形式…］
- ［生成］＞［画像アセット］
バナーを書き出す場合の一例
書き出しをしたいグループフォルダを選択して右クリック>書き出しをします。
Webデザインでコーディングに必要な画像を書き出す場合の一例
画像アセットで書き出すことを考えながらレイヤーを整頓します。
グループ化したフォルダ名に書き出す画像のファイル名と拡張子をつけておくと、指定した名前で画像を書き出せます。画像アセットで書きだす時は、画像の保存先をフォルダ名から指定できます。
Photoshopのファイルを保存するたびに指定したフォルダに画像が書き出されるのでとても便利です。
例：img/card-image01.jpg
imgフォルダ内にcard-image01.jpgのファイル名で画像が書き出されます。
カード型レイアウトをグループごとスマートオブジェクトにしていて、アセットの書き出しがうまく機能してくれない場合は［レイヤーに変換］してスマートオブジェクトを解除するとアセットで書き出しできます。
レイアウトが得意なFigmaと画像編集が得意なPhotoshop
整列のところでも少しふれましたが、Figmaはレイアウトに関する機能がとても充実しています。オートレイアウトも実際にコーディングするときの挙動に近い感じでデザインを進められるのでレイアウトに関してはFigmaの方が作業を進めやすいです。
画像を加工したい場合、Figmaでも色合いを調整したり、エフェクトを追加するプラグインを探して加工できますが、そこからあとちょっと調整したい。という場合も出てきます。そんな時はPhotoshopでの作業の方が捗ります。
Photoshopは画像編集が得意なので、オートレイアウトのような実装に近いレイアウトの指定ができる機能はありません。
FigmaとPhotoshopを使い分ける
Webデザインを学んではじめてさわったのはFigma。という人がいるかもしれません。Figmaにどんどん新機能が追加され便利になっていることもあり、Figmaでデザインする機会も増えましたが、たくさんの装飾が必要なもの、画像を合成したり編集が必要な場面ではPhotoshopを使用する。と使い分けると作業がしやすくなります。
