プロのデザイナーが実践している！PhotoshopでWebデザインを素早く、効率的にするための8つの方法

Post on:2016年10月21日

1. ファイル管理のポイントは構造化

デザイン作業を効率良く進めるために、最も簡単なことの一つは、ファイルを構造化して管理することです。一貫されたファイル構造を作成することは、目的のファイルを簡単に見つけることができます。
問題が起きるとしたら、「最終-最終-ロゴ.ai」のようなファイルを見つける時です。

ファイルの命名規則もファイル管理の重要なポイントで、ルールを決めましょう。「最終-最終-ロゴ.ai」のようにするのではなく、バージョンの番号で管理するのがベストです。数字で管理する時はバージョン番号の他に、日付やプロジェクトのフェーズ数を使うデザイナーもいます。これは個人の好みに依存するもので、どの数字でも良い習慣と言えます。
ファイル名を数字で管理することで、どのファイルが最新のものであるか簡単に判断できます。

例えば、クライアントがフェーズ1から戻すことを望んだり、フェーズ2から対応ブラウザを増やした場合などに備えて、一般的には2〜3つ古いバージョンのファイルを残しておきましょう。
ただし必要のない古いファイルは、まとめてアーカイブするか削除することが、ファイルの整理に繋がります。

構造化して管理されているファイル

一貫性のあるフォルダ構造とバージョン番号のファイル命名規則の組み合わせは、ファイル検索時にも役立ちます。例えば、すべてのファイルを一つのブランド名や略称で検索した場合、そのブランド名を使ってフィルタリングすることができます。
「最終-最終-ロゴ.ai」というファイル名ではなく、「ブランド名-ロゴ-001.ai」というファイル名にすることで、容易に検索できます。

2. CSSフレームワークは勉強になる

デザインのキャリアが長い人でも、既存のフレームワークについて適切に利用する方法を学べているデザイナーは多くありません。
現在主流のフレームワークは「Bootstrap」と「Foundation」の2つで、Googleの「Materialize」が近い将来追い抜くかもしれません。制作会社の多くでも、これらのフレームワークを利用していると思います。

フレームワークではレスポンシブ対応のグリッドをはじめ、ボタン、フィールド、タイポグラフィ、ナビゲーションなどが用意されており、簡単に利用することができます。グリッドのデザインファイルも用意され、デザインの作業も簡単です。Photoshopでグリッドを作成するだけでなく、ファイルの再構成やアートボードにも対応しています。

Foundationのチートシート

また、フレームワークはボタンのスタイル、フォームなどをデザインする時の良い出発点を提供し、実装することができるデザイン戦略の可能性と限界を示すのに役立ちます。これは単にデザインのための出発点となるだけでなく、デベロッパーと一緒に協力的にプロジェクトを進める手助けにもなります。

3. PSDのレイヤーはコンテンツごとにフォルダ分け

もしPSDファイルで多くのフォルダ・レイヤー・スマートオブジェクトを扱っているなら、それを管理する簡単な方法があります。レイヤー数が何千にも増えてしまったら、あなたはPSDファイルにも組織化が必要であることを悟るでしょう。
これがコンテンツのセクションごとに、PSDのレイヤーを組織化することを勧める理由です。

一般的な組織化の例として、フォルダにNav, Hero, Intro, Packages, Benefits, Footerを用意します。そしてこれらのフォルダに色をつけます、これで一目で分かるようになります。これによりセクションをアップデートした時にも、PSDを作り直すことが簡単になります。

色分けされたセクションごとのフォルダ

例えば、ヒーローイメージのセクションを大きくする必要がある場合に、一つのユニットをcommandキーを押しながら、すべてのフォルダをドラッグすることができます。更新が行われた後は、再びドラッグします。
このレイヤーの組織化は、他のデザイナーやデベロッパーとの共同作業にも効果があります。「Nav」「Footer」のように理解できる名前をフォルダにつけることで、新しいデザイナーがプロジェクトに参加しても容易にPSDファイルを理解でき、必要とされる変更に対応できます。

若干のデザイナーは、この名前をつける作業に時間がかかると文句を言うかもしれません。しかし「レイヤー」や「フォルダ」の名前のままだと、作業や探し出すことに非常に時間がかかります。レイヤーを組織化することを望むかは個々のデザイナー次第です。

4. よく使う操作はショートカットを覚える

Photoshopで良く使う操作があるなら、そのキーボードショートカットを覚えるべきです。主要なショートカットを覚えることで、作業効率は劇的にアップします。

最低限の重要な操作は、フォントサイズの変更、レイヤーの整頓、Web用に保存、不透明度の変更です。そしてPhotoshopでは、ショートカットをカスタマイズすることもできます。最重要のショートカットはファイルを保存することです。
どんなアプリでもクラッシュ時のリスクを最低限にするために、常に保存する習慣を身につけましょう。

メニューから「編集: キーボードショートカット」

上記のようにショートカットは、コンテンツセクションのフォルダによってレイヤーを組織化し、関連づけています。これは組織化されていないファイル内のレイヤーを並べ替えるより簡単です。デザイン作業と同じように、ファイルを組織化するところから始めます。
頻繁に使うショートカットはしっかり覚え、レイヤーを組織化しておくことは、あなたの作業効率を改善し、他のデザイナーの作業の助けにもなります。

よく使うショートカットは、下記を参考にどうぞ。

アドビ社お墨付き、プロのデザイナーがよく使うショートカットを一枚にまとめたPhotoshopとIllustratorのチートシート

5. Adobe CCのライブラリは使わないと損

AdobeがCCのリリースで、新しく加わった最もよいことの一つがライブラリです。もしあなたがライブラリについて知らなかったら、Adobeの公式動画に目を通しておいてください。どんなことができるか一目で分かります。

Adobe CCのライブラリは個人でも有益ですが、チームで利用すると更に便利です。ライブラリではカラー、フォント、画像、アイコンやヘッダやフッタなど、あらゆるデザイン素材をチーム内で簡単に共有することができます。
ライブラリでカラーを変更したら、そのカラーを使ったボタンやテキストもその通りにアップデートされます。PSDのアップデートも一元管理が行えます。特に小さいアップデートをする可能性があるデザインリソース、例えばヘッダやフッタなど、一度利用したらライブラリ無しではいられなくなるでしょう。

フォントのスタイルを管理するために、ライブラリを使うのも便利です。デスクトップ・タブレット・スマホ用に、本文、見出し、小見出し、コピーなど、フォントのスタイルを定義します。このスタイルはタイルビューやリストビューで簡単に利用することができます。

共有するデザインリソースをCC ライブラリに登録

ライブラリはチームのコラボレーションにも役立ちます。ライブラリで共同作業をおこなったり、ライブラリにアクセスできるリンクを共有することも簡単です。ドキュメントから新しいライブラリを作成することもできますが、ライブラリ自身でライブラリを作成することもできます。

しかし残念ながら、ライブラリにも問題点があります。一つのテキストで設定した文字と段落のスタイルが欠如してしまうことがあります。これは別のボックスで文字のスタイルを適用し、ファイルを管理することで回避できます。もう一つの問題点は、文字のスタイルをグローバルで更新できないことです。現在、カテゴリ内のサブフォルダを作成するためのライブラリ内には組織化する機能（カラー、文字スタイルなど）はありません、しかしAdobeはこの問題に取り組んでいます。

CC ライブラリでは現在、最近更新されたものが上に表示されるようになっています。CC ライブラリのカラーがテキストボックス内の個別のテキストに適用されることができず、単にシェイプとテキストボックス全体に適用されます。この問題をAdobeが解決しないはずがないので、私はあまり心配はしていません。
Adobe CC ライブラリはこれらの少ない問題点よりも、役立つ点の方がはるかに多いです。

6. イメージとベクターはスマートオブジェクトで

ファイルサイズを大きくしますが、スマートオブジェクトでイメージとベクターを管理することはそのPSDを編集するデザイナーの作業が簡単になります。画像をトリミングしても、アイコンを傾けても、いつでも元の状態に戻すことが出来ます。PSDに写真がより小さいラスタライズされたものより、フル解像度のものが含まれている場合は、作業がしやすいです。グラフィックもラスタライズするのではなく、Illustratorからのスマートオブジェクトを使用すると、ベクターの修正も同様に簡単です。

他にも利点があります。PSDで保存し、その後、スマートオブジェクトとしてファイルにそれらを配置すると、スマートオブジェクト形式で写真を持っていることになります。配置された写真のPSDを使用することは、ソースファイルを散らかすよりむしろ、含まれている写真ファイルの調整レイヤーや編集を加えることを簡単にします。
さらにライブラリのグラフィックとしてスマートオブジェクトを利用する組み合わせは最強です。ベクターのオブジェクトを簡単に編集できるだけでなく、ライブラリのグラフィックがすべてのアプリケーションで更新されます。

グラフィックはスマートオブジェクトで、それぞれ別のPSDで編集できます

7. スタイルガイドをどう活用するか

サイトのデザインで使用するフォント、カラー、画像、アイコンなど、多くのブランドはスタイルガイドで規定されています。スタイルガイドは有用なリソースですが、特定のスタイルを常に一貫し続けるようにはしません。このことは各特定のサイトのためのスタイルガイドを作成することによって、効率を改善することができます。

時には一つのブランドで異なるスタイルのサイトが複数存在することがあります。それぞれのサイトでどのようなスタイルが必要か確認することで、デザインを一貫させることができます。ボタン、アイコン、画像などのスタイルが必要な場合にも、ドラッグ&ドロップで簡単に利用できるリソースを作成します。
これは単にデザイナーとして効率化をはかるものだけでなく、サイト全体でデザインを一貫した状態にするのに役立ちます。

セクションの区切りは、何ピクセルだっけ？
そんな時は、スタイルガイドを確認してください。

重要なボタンのカラーとパディングは、何だっけ？
それもスタイルガイドに記してあります。

スタイルガイドは複数のデザイナーで作業する時に、非常に役立ちます。そしてAdobe CC ライブラリも合わせて使えば、更に完璧です！

ブランドごとに異なるPSDのスタイルガイドを作成

多くのデザイナーがデザインで新しい問題に直面するたびに、新しいスタイルを加えようとします。一貫性を保つためには、これを回避し、常に今のスタイルガイドで決めたルールに固執するのがベストです。もし新しいレイヤーやスタイルを追加した場合は、それらがサイト全体に適用されても問題がないか確認してください。

追加された多くの新しいスタイルは、その分デザインをより複雑にします。プロジェクトに新規のデザイナーが参加した時には、一貫性のあるデザインを維持することが難しくなるでしょう。多くの場合、一貫性はユーザエクスペリエンスの話になると一定の技術革新よりいっそう重要だということです。
プロジェクトの開始時にスタイルガイドを作成するために多くの時間がかかるかもしれませんが、それは将来のすべての作業効率が向上します。

Brad Frostの「Interface Inventory」から学んだベストプラクティスの一つは、デザインプロセス中に、あるいは作業中に、現在のサイト上でインターフェイスをリスト化することです。インターフェイスのリストは、スクリーンショットで使用されているテキストやボタンのスタイルを集め、それぞれどのようにデザインされているか確認します。その後、クライアントにデザインのアップデートや改善を提案し、調査結果を提出することができます。

たいていのサイトは複数のデザイナーが携わっているため、一貫性の面で問題があるでしょう。ページ上に要素のために統一されたデザインのスタイルを見つけただしたなら、誰でもアップデートできるようにスタイルガイドも更新してください。

現在のサイト上で使用されているボタンをリスト化
画像: Interface Inventory

8. コーダーと、そしてチーム内での共同作業

デザイナー、デベロッパー、コピーライターなど、クリエイターの人たちは内向的な傾向があり、共同作業を快適に進めるのが難しいことがあります。同じ分野であれば割と簡単にコミュニケーションをとることができますが、異なる専門分野で共同することは難しいです。時には居心地が悪かったり、不快なことが起きるかもしれませんが、他の部署の人たちと定期的に協力することは作業効率を大幅にアップし、デザインの品質を向上させることに繋がります。

典型的な例としては、デザイナーとデベロッパーの共同作業です。
デザイナーは、彼らがどんなCSSフレームワークを使用しているか教えてもらい、そのフレームワークにどんな可能性があるのか話し合う必要があります。また、デザインの作業が終了した時には、デベロッパーはカラーパレットやフォントのスタイルを確認するので、CC ライブラリが彼らと共有できているか確認しておきましょう。前もってスタイルガイドを共有しておくと更に便利で、デザイナーがデザインしたさまざまなコンポーネントを実装する助けになります。

CC ライブラリを利用している他のデザイナーとの共同作業も、一貫性を維持するために役立ち、より効率的になります。アートディレクターやシニアデザイナーに、ライブラリやスタイルガイドをアップデートする権限を与えることは混乱を排除し、一貫性のあるブランドを維持します。それらがアップデートされた時には、チーム内の誰もが同じページを利用できるようにしてください。

まとめ: デザインは正直に

Web制作は、不可抗力とチャレンジ精神に溢れています。常にどちらかであるということではありません。ここで紹介したPhotoshopでのデザイン作業の効率化のテクニックは、多くのデザイナーのストレスを軽減することができます。単に健康面の改善だけではありません、ビジネス、そしてクリエイティブな面であなたの頑張りを正当に評価するでしょう。

一貫性のある、効率的で、美しく手作業されたデザインが、誰にとっても良いということです。