UIデザインが劇的に効率化！Photoshop「スマートオブジェクト」活用術

UIデザインの分野では、ボタンやリスト等、ゲーム内で共通のルールを持った情報を取り扱います。

同じデザインのオブジェクトを複数個表示する画面や、バリエーション作成の頻度も高いため、デザインの差し替えは膨大。

それでも、調整にはスピードが求められます。

今回ご紹介する「スマートオブジェクト」を使えば、面倒な差し替え作業がグッと楽になりますので、基礎の基礎から覚えていきましょう！

1. スマートオブジェクトとは？

スマートオブジェクトは、画像やグラフィックを元の解像度・情報等を保ったまま「レイヤーとして扱える」機能です。

※複数のレイヤー構造を持ったPSDを、1枚のレイヤーとして扱うイメージ

また、ピクセル情報そのものを直接編集するラスター画像と違い、拡大・縮小しても画質が劣化しにくく、非破壊な編集が可能になります。

微細な拡縮調整を日常的に行うUI制作において、劣化しやすいラスター画像はクオリティ低下に直結します。

ラスタライズが癖になっている人・ラスター画像を繰り返し編集している人にぜひ覚えて欲しい機能になります。

2. 基本操作

スマートオブジェクトの作成方法

①スマートオブジェクト化したい任意のレイヤーを選択し

②レイヤーを右クリック → 「スマートオブジェクトに変換」

これでスマートオブジェクト化が完了しました。

前述した通り、複数のレイヤーを保持することが可能なので、目的に合わせて複数枚のレイヤー・フォルダを選択してスマートオブジェクト化しましょう！

スマートオブジェクトの編集方法

レイヤーのサムネイルをダブルクリックすることで内容を編集することができます。

スマートオブジェクト内では、特別な操作は一切必要ありません。

通常のPSDと同じように自由に編集しましょう。

■編集を終えた際の注意！

編集を完了したら、必ず「上書き保存」をして下さい。

スマートオブジェクト内で編集を保存することで、内容がPSD側へ反映される仕組みです。

保存せずにスマートオブジェクトのウインドウを閉じてしまうと、編集内容が消滅してしまうので注意して下さい！

スマートオブジェクトの解除

スマートオブジェクトを解除したくなったら、概ね2つの手段が考えられます。

①「スマートオブジェクトをラスタライズ」する

ラスタライズした場合、スマートオブジェクトの中身が統合され、普通の画像レイヤーとして取り扱われます。

非破壊性が失われますが、デザインに再編集を加えない場合は、データを軽量化できるメリットがあります。

また、スマートオブジェクトは「一枚の画像のように」扱えるだけで、実際は画像ではないため、ピクセル単位での画像編集が必要な場合は迷わずラスタライズしましょう。
（スマートオブジェクトをコピーし、一方だけラスタライズすれば再編集も可能なためおすすめです）

②スマートオブジェクトの中身を丸ごとPSD側に移植する

スマートオブジェクト内の任意のレイヤーを丸ごと選択し、PSD本体にドラッグ＆ドロップすることで元の構成に戻すことができます。

一度スマートオブジェクト化したものの、通常のPSD編集の方が目的に合っていると気づくケースが多々あります。

機能に振り回されては本末転倒なため、目的に合わせて臨機応変に解除しましょう。

3. UIデザイナーが活用すべき実践テクニック

デザイン差し替えの効率化

複数箇所に同じオブジェクトを適用する場合のメリット

例えばこんな風に、同じデザインのオブジェクトを複数個表示する場合

フォルダ内で作成・コピーして配置していては、少しデザインを変えるのも一苦労です。

マスクやフィルターを非破壊で適用できる

最初に述べたように、ラスターデータは拡縮・色調補正・ぼかし等、あらゆる加工で画像は劣化していきます。

ラスターレイヤーを編集した際、行った内容が記録されないため、同じ加工を施したくなった時、記憶を頼りに編集するしかありません。

これは未来の自分も困りますが、複数名で開発を行うプロジェクトでは致命的です。

人のデザインに合わせて目コピで作業することになれば、クオリティの再現性は低下し、分析に掛かる時間も無駄になってしまいます。

ぼかしやフィルターをかける時こそ、スマートオブジェクトの出番なのです。

4. まとめ

ほんの一部ではありますが、スマートオブジェクトの利便性をご理解いただけましたか？

UI制作の効率は「PSDの構成」で変わると言っても過言ではありません。

これまでのデータのほんの一部に取り入れるだけでも、作業時間を節約でき、その分新しい開発の時間を確保できるので、ぜひ使ってみてくださいね！