何故、未経験のWebデザイナーは編集(PSD)ファイルのレイヤー構造をキレイにしておくべきなのか?




中の人
こんにちは。
整理整頓が大好きなcoffeebreakの中の人です。
でも断捨離は苦手です。

今週も私の記事へようこそ。

ということは、フォトショップで人のファイルを開いたら「ぎゃ~」となった経験がある人ですね。

または、前から気になってたけど、レイヤー構造をどうすればいいか悩んでいるのではないでしょうか?

でも、

未経験からの転職を考えているから先にデザイン力を身につけておきたい

未経験のWebデザイナーとして転職したけど、まずはデザイン力をアピールする事を優先したい。

フリーランスでWebデザイン制作をしていると自分の中でファイル管理できるからいいや

だから、編集(PSD)ファイルのレイヤー構造は気にしない!

このようにレイヤー構造の最適化を後回しにしていませんか?
まちがいなく早いうちにつまずきますよ!

中の人
ベテランWebdデザイナーさんは、この気持ちに賛同してくれるのでは?

未経験じゃなくてもWebデザイナーへ転職をお考えなら、ファイル名やレイヤー構造を整頓するクセをつけておくと、ご自身の中身のようなフォトショップの編集(PSD)ファイルを見せても恥ずかしくはありません。逆に、「ちゃんと考えて作ってるな」と感心されるかもしれません。

未経験からのWebデザイナーさんは、早く即戦力として一人前になりたいと夢見ていると思いますが、先輩デザイナーさんからは地味で細かい処理の修正をチクチクと言われ続けられるかもしれません。
その中にはフォルダ名やファイル名、そしてフォトショップの編集(PSD)ファイルを見てレイヤー構造まで指摘されます。

フリーランスの人の中には、ご自身のチームで仕事をしているディレクション的な立ち位置の人もいるはずで、少なくとも各デザインジャンルにや予算に合わせてデザイナーをアサインしていると思います。デザイナー間でのフォトショップの編集(PSD)ファイルもやり取りしているのでは。

Webデザイナーを続けているといつかぶつかってしまう壁でもあるので、早いうちに経験しておいた方が良いと思います。

中の人
はやくWebデザインをやりたい気持ちは分かるけど、
命名ルールもWebデザイン上達方法のひとつなんだよ。
ご注意
独学出身という事もあり私のデザインノウハウはセオリーと違う場合が多々あります。
そんな時は、やっぱり変な人だなと思いながら記事を読んでいただければ幸いです。

なぜフォトショップのレイヤーをキレイにするのか

Webデザイナーは成果物を作れば作る程、技術を学べば学ぶ程デザイン力は上達していくと思います。
でも作り方が雑だったり、改修する事を想定していない一点物のデザインだったりツブシが効かないフォトショップの編集(PSD)ファイルは困ったものです。
やっぱり、後で使いやすくて扱いやすいフォトショップの編集(PSD)ファイルが好まれるのではと思います。

▼ざっくり言うと、このようなメリットはあります!

誰かが触る時に扱いやすい

相手の事を考えてデザイン制作するって、思いやりがあるというか。余裕すら感じますよね。
自分の事だけを考えてデザインするのではなく、全体を考えて行動ができるWebデザイナーになれるかもしれません。

共通ルールにしやすい

職場にもよりますが、ルールの落とし込みがいき届いていないチームなら自ら手を挙げてルール化を推進する事をおすすめします。
全体の編集スピードを落とさずにファイルの引き継ぎがスムーズにいくのは間違いないです。

自分でも見ても見やすい

マイルールで作ったレイヤーなのでストレスフリーな編集ファイルです。
後で見直しても絶対扱いやすいですよね!

いつのまにか評価が上がる場合がある

「あの人の編集(PSD)ファイルは丁寧で分かりやすよね!」
いろんな人に言われて、いつの間にかデキル人っていう評価が一人歩きするかも?まぁ、やってみて損はないということです。

フォトショップのレイヤー構造をキレイにする

おしらせ
ここからは、レイヤー構造を説明する為にcofeebreakのトップページをトレースしたキャプチャとフォトショップのレイヤーをキャプチャしてまとめました。

新規レイヤーは下へ下へ作る


Webサイトやバナー、ランディングページ(LP)もですが、上から下へ情報がまとまっているので新規レイヤーを作成すると時は既存レイヤーの下に置き換えてましょう。そうする事で、ページスクロールする感じでレイヤーも下へスクロールできます。
ただしデフォルトは既存レイヤーの上にレイヤーができるので、アクション処理にしてキーボードに登録しておきましょう。これでボタン一発で下にレイヤーが移動します。

ひとつの要素を一つのフォルダにする


ある程度の固まりをフォルダでグループ化します。例えば、アイコンの細かいデザインパーツやキャッチとショルダーコピーの固まりとか、ある程度でひとつの固まりが成立するならグループ化しておきます。

固まりは左から右へまとめていくと目線で追いやすいです。フォルダ名は分かりやすく「割引アイコン」とか「メインキャッチ」とか、フォトショップの編集ファイルを見た印象で付けておきましょう。

ひとつのコンテンツをひとつのフォルダにまとめる


ここからは文章の段落のようにひとつのお話が終わるタイミングでフォルダでまとめましょう。
フォルダ名は、分かりやすいのがいいですね。
私は日本語でコンテンツの見出しと内容を見てフォルダ名を作成しています。

大枠はFの構造でまとめる


ほとんどのWebサイトはZの構造ではなく、Fの構造で構成されています。
レイヤーは縦(下)へ作り、要素は横へフォルダをまとめていきます。
そしてコンテンツはフォルダにまとめて下へ下へとフォルダを構築していきます。
このようフォルダをFの構造にまとめる事で、Webサイトと同じ目線の動きでレイヤー構造が構築されるのです。

本日のまとめ

  • 必ず命名ルールの壁にぶちあたる
  • レイヤー構造をキレイにするメリットは沢山ある
  • うまくいくと評価が勝手に上がるかもしれない
  • うまくいくと引き継ぎがスムーズ
  • レイヤー構造はFの構造でまとめていく

私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

【たった1問】遷移型アンケートページの構成とデザインを調べてみる

2018.09.01

そのフォント使ってる?「NexusFont」で大量のフォントを管理してPCの負荷を抑えよう

2017.11.12

良い構成のCVエリアのアイデアをいろいろと考察してみる

2017.12.24

記事でもランディングページ(LP)でもないアンケートページの構成・デザインの作り方

2018.08.26

ランディングページ(LP)にエディトリアルデザインを取り入れる。ふきだし装飾編

2018.07.08

日本語フリーフォントお探しですか?未経験・新米Webデザイナーさんにおすすめなフォントを選んでみました!

2019.02.11


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google