WNT-Design-20170831
Design

意外と知られていない?UIデザインのためのレイヤーカンプ活用法

意外と知られていない?UIデザインのためのレイヤーカンプ活用法

単純作業や管理の時間はできるだけ節約して、考える時間やクオリティアップに時間を費やしたいと考えるデザイナーは少なくないはずです。今回はアプリのUIデザイン制作を加速させるPhotoshopのレイヤーカンプ機能の、意外と知られていない使いこなし術を紹介します。

そもそもレイヤーカンプってどんな機能?

下記はAdobe公式サイトから抜粋した解説文です。

デザイナーは、クライアントに見せるためによく複数のデザイン案(カンプ)を作成します。レイヤーカンプを使用すると、1つのPhotoshop ファイルで、複数のレイアウトバリエーションを作成、管理および表示することができます。
レイヤーカンプとは、レイヤーパネルの各レイヤーの状態を記録したスナップショットのことです。レイヤーカンプには、次の3種類のオプションが記録されます。
・レイヤーパネル内のレイヤーの表示と非表示
・ドキュメント内のレイヤーの位置
・レイヤースタイルや描画モードの適用によるレイヤーの外観

つまり、レイヤーの表示/非表示/位置などの状態を名前を付けて保存できて簡単に切り替えができるので、複数のデザイン案、ボタンや写真のバリエーションを書き出す際に便利です。

なぜアプリのUIデザイン制作に役立つのか

例えば、フッターナビゲーションでは表示されている画面によってアイコンの色が変わったり、ダイアログではユーザーの状態によってボタンやメッセージの内容が変わるなど、デザインの表示差分が多くなりやすいと思います。

これらの差分を別のpsdファイルで管理しようとすると更新作業に手間が掛かりますし、同じファイルにまとめると、書き出す度にレイヤーの表示/非表示を切り替えなければならず、書き出しミスにも繋がります。また、1つ1つは短い作業でも積み重なれば大きな時間のロスになってしまいます。

これらはレイヤーカンプを上手く使うことでスマートな管理にすることができます。この記事では具体的な例で使い方と、注意点を紹介していきたいと思います。

ボタンのステータス差分を簡単に切り替えられるようにする

レイヤーカンプの基本的な使い方として、レイヤーの表示/非表示、位置などを保存して切り替えるころができます。複数の差分を作成する必要があるボタンなどでよく使われます。

この記事では具体的な解説をするために、WebNAUTによく似た架空の料理アプリ「Gourmet NAUT(グルメノート)」を例に見ていきましょう。例えば、ホーム画面1つ取っても下記のようなパターンはよく使われるかと思います。

  • デフォルト状態
  • モーダルウィンドウAが表示された状態
  • モーダルウィンドウBが表示された状態

sec2_01

これらのパターンはpsd内にフォルダを作って非表示にしておくと思いますが、書き出す度に表示を切り替えるのは手間がかかってしまいますね。とは言え、それぞれ別のpsdファイルにしてしまうと更新が大変ですし、反映漏れが発生してしまう可能性もあります。

操作方法

①ウィンドウ/レイヤーカンプからパネルを表示します。
②それぞれのボタンを表示させて[新規レイヤーカンプを作成]ボタンを押すとその状態が保存されます。名前も付けておきましょう。
sec2_02
③パネル左側にあるボタンを押すとそれぞれの表示を切り替えることができます。
sec2_03
[レイヤーカンプを更新]ボタンを押すと最新の状態を保存することができます。
sec2_04
これで、切り替えボタンを押すと簡単にそれぞれの画面に切り替えられるようになりましたね!
sec2_05

フッターナビゲーションを画面によって自動で変わるように設定する

ユーザーが今いる場所を分かりやすくするために、表示されている画面によってフッターのアイコンの色が変わるものを作成するとします。今回は、ホーム画面が表示されている時は、ホームアイコンの色が変わり、お気に入り画面が表示されている時は、お気に入りアイコンの色が変わる仕様です。
sec3_01
フッターなどの共通パーツはスマートリンクを使って、どの画面にも共通で配置すると思いますが、デザインを書き出す度にスマートリンク先の色の表示を切り替えるのは手間ですね。

スマートリンク先のpsdでアイコンの色パターンをレイヤーカンプで管理していれば、スマートリンクを開かずとも、対応する画面によって自動で切り替えることができます。

スマートリンクとは?

その名の通り、リンクされたスマートオブジェクトです。スマートオブジェクトでは同一ファイル内でしか変更が反映されませんが、スマートリンクは外部に置くファイルで、これに変更を加えると、リンク配置したpsdファイル全てに反映されます。Web・UIデザインではヘッダーやフッターによく使われます。
sec3_001

操作方法

①フッターのpsdを開き、ホームアイコンに色がついた状態と、お気に入りアイコンに色がついた状態。それぞれのタブの状態をレイヤーカンプとして保存しておきます。レイヤーカンプ名は「ホームアイコン」としておきます。
sec3_02

②ホーム画面のpsdを開き、フッターのスマートリンクを選択したうえで、属性パネルの「レイヤーカンプを使用しない」と表示されているセレクトボックスを「ホームアイコン」に変更します。
sec3_03

他の画面のpsdにも②の作業反映していきます。これでフッターのpsdを開いて表示を切り替えなくても、画面によって対応するアイコンの色が変わるようになりました、
sec3_04

書き出し方法

メニューの[ファイル/書き出し/レイヤーカンプからファイル]からレイヤーカンプを一括で書き出すことができます。先頭文字列やファイル形式の指定をする場合はこの画面で設定しておきましょう。
sec4_01

注意する点

これだけ便利なレイヤーカンプですが、この仕様を理解しないと逆に余計な手間が増えることもあります。

例として画面にボタンを1つ追加するとします。
レイヤーカンプAを選択している時にボタンを追加し、別のレイヤーカンプBを適用したら追加したボタンは非表示になります。その後、レイヤーカンプAを適用しても追加したボタンは非表示のままなうえ、ボタンのフォルダの配下のレイヤーまで全て非表示になってしまうので、1つ1つポチポチと表示を切り替えなければなりません。
sec5_01

最初は戸惑いますがこの現象が起きる理由はシンプルで、新しく追加されたレイヤーは更新を押さないと、カンプ上では非表示のレイヤーであると認識されてしまうようです。これは、元々あったレイヤーをコピーした場合も同様です。
sec5_02

対策としてできること

とはいえ、制作中はレイヤーはどんどん増えていきますしその度にレイヤーカンプを更新するのは大変です。なのでレイヤーカンプとして設定していく作業は、デザインがある程度固まった段階が好ましいですね。

対策としては下記の点に注意すればこの現象を防ぐことができます。

  1. 新しいレイヤーが増えたら(既存レイヤーのコピーも含む)、そのレイヤーを表示させるレイヤーカンプは全て更新する。
  2. デザインがある程度固まってからレイヤーカンプを設定していく。
  3. ただし色の変更やテキストの変更など、レイヤー自体が増えないものは更新不要。
  4. 位置・レイヤースタイルにもチェックを入れている場合は、これらを変更した後にも更新が必要。

まとめ

癖がある機能ではありますが、使いこなすことによってデータの差分管理の手間をグッと減らせます。今回はアプリのUIデザインを例にしておりますが、同じ要領でwebサイト制作やイラスト制作にも使うことができます。ちょっと難しく感じる方は共通ナビゲーションのみレイヤーカンプを設定するなど、少しずつ導入してみてはいかがでしょうか。

thumb_1708

記事が気に入ったらシェアしよう

この記事を書いたメンバー

古賀 国朗 デザイナー

Webを中心に色々なデザイン作っています。
新しいものが好きです。
漫画は毎週読んでます。

成果につながるWeb制作を

成果につながるWeb制作を
ビーワークスのミッションは「デザインで世の中を動かすこと」。
出版物、販促ツール、WEBサイト、ゲームアプリなど、多用な領域でクライアントのビジネス拡大に貢献するデザインを提供する制作会社です。

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 乙女座
  • 天秤座
  • 蠍座