あの時ぼくらは若かった。新人デザイナー時代あるある＆その対処方法
こんにちは、すなぎもです。
もう8月。夏真っ盛りですね。こんなときはビールと砂肝にかぎります。
さて今回は、新人デザイナー時代に自分が出会った「デザイナーあるある＆その対処法」を、第1章：Illustrator・Photoshop、第2章：html・css編、第3章：スケジュール管理・考え方編の3つに分けて、4コマと解説でまとめてみました。今年4月からデザイナーになった新人の皆様は、そろそろ案件を任される頃かと思います。そんな時に出会いそうな「あるある」を集めてみましたので、少しでも参考になると幸いです。
また、ベテランデザイナーの皆様も、昔を懐かしんでもらいつつご自身の新人時代を思い出し、広い心で新人さんに接していただければ…と思います。
それでは、さっそくいってみましょう！
第1章：Illustrator・Photoshop編
怪奇！荒くなっていく画像たち
「え！こんなレベルから！？」と思われた方もいるでしょう。
でも、思い出してみてください…新米デザイナーだったあの日、あの時…こういうことがありませんでしたか？ ありましたよね。私はありました。
「今はベテランのあの方だって、最初はみんな初心者だったんや…」という優しい気持ちで見守っていただけますと…
さて、本題に戻りまして。
Photoshopでは、画像のペースト形式によって画質の劣化がおきてしまう場合があります。例えば、Illustratorからロゴのパスを⌘C→photoshopへ⌘Vでコピー＆ペーストしたとき、こんなダイアログが出てきます。
これらのペースト形式は、それぞれこのようになっています。レイヤーパレットに注目です。
| スマートオブジェクト | |
|---|---|
| ペーストしたとき |  |
| レイヤーパレット |  |
| 特徴 |
|
| ピクセル | |
|---|---|
| ペーストしたとき | |
| レイヤーパレット |  |
| 特徴 |
|
| パス | |
|---|---|
| ペーストしたとき |  |
| レイヤーパレット |  |
| 特徴 |
|
| シェイプレイヤー | |
|---|---|
| ペーストしたとき | |
| レイヤーパレット |  |
| 特徴 |
|
4コマのケースだと、ピクセルでペーストしてしまったため起こった問題のようですね。
それぞれの特徴を理解して、適切な形式を選択しましょう。
静止したIllustratorの中で
Illustratorでデータを作成したとき、1つの作業をするにも重すぎて作業にならなかった！ という経験はないでしょうか。Webデザインが中心の方の中には、「Illustrator重いしよく分からないし嫌い…」という方もいるのでは…？
Illustratorは、データの作り方やプレビューの表示方法、保存方法などを変更することで、格段に動作が軽くなります。
低画質の表示画像を使用して、動作サクサク
- リンク配置した画像がEPS形式の場合、低画質の表示用画像を使用することができます
- 移動しても動きが固まらず、サクサク動かせるので便利です
アンカーポイントは少なめに！
- アンカーポイントが多い複雑なパスを多用すると、ファイル容量が重くなってしまいます
- 簡単な形はなるべくアンカーポイントを少なめにしましょう
保存のオプションに注目 ※ただし入稿時は注意
- 「PDF互換ファイルを作成」のチェックを外すことで、ファイル容量が格段に軽くなる場合があります
- ただし、入稿の際にチェックが必要な場合がありますので、入稿前は必ずチェックが必要か確認するようにしましょう!
他にも様々な方法がありますので、自分なりに良い方法を見つけて見ましょう！
当ブログには、photoshopやIllustratorを使用する上で参考になる記事がたくさんありますよ。
ぜひ、ご覧ください！
第2章：html・css編
破綻していくCSS
コーディングを始めたての頃は、4コマのような場面に出会ったことが一度はあるのではないでしょうか。
時と場合にもよりますが、class名は見た目に紐づくのでは無く、役割に紐づくよう命名したほうが破綻しづらいように感じます。
たとえば…
| 見た目 | 破綻しやすい命名 | 破綻しづらい命名 |
|---|---|---|
 |
① green_bg
② left_img ③ right_text ④ red_text |
① main_box
② thumbnail ③ text_area ④ caution |
破綻しづらい命名の場合は、右カラムのボックスの中でも共通で使えるものもあるため、ムダも省けますね。
ただし、cssの命名やhtmlの構成は様々な手法・思想がありますので、この限りではありません。いろんな知識を集めて、最適な方法を使えるよう考えてみましょう。
いずれの場合にしても、いきなり記述を始めるのではなく、html・cssの設計をしっかり立てることが大切ですね。
夢の中で逢った、ような…記述
集中してhtml・cssを書いていると気づかないこともありますが、何度も何度も似たようなstyleが出てくる場合はありませんか？
class名を分けたのに、違うのは横幅だけ。同じ形の枠をこっちにも使いたいけど、幅が指定してあるから使いまわせない…など、記述が冗長になるだけではなく、使い回しもしづらくなってしまいます。さらに、もし枠線の色が変わった場合は…何箇所も記述を変更しないといけませんので、これもまた手間です。
例えばこんな時は…
| 見た目 |  |
|---|---|
| css |
/*使いまわせるstyle*/
box{
background-color: #fff;
padding: 10px;
}
.thumbnail{
width: 200px;
height: 200px;
}
.text{
font-size: 13px;
}
/*mainに配置したとき*/
.main{
width: 600px;
}
.main .thumbnail{
float: left;
margin-right: 10px;
}
.main .text{
float: right;
}
/*subに配置したとき*/
.sub{
width: 200px;
}
.sub .thumbnail{
margin-bottom: 10px;
}
|
このように、共通のstyleは共通のclassでまとめ、親要素によってサイズや配置が変わる要素は別のclassで制御すると、使い回しやすく管理しやすいcssになりそうです。
ただし、cssの命名やhtmlの構成は様々な手法・思想がありますので、この限りではありません（大事なことなので2回言います）。いろんな知識を集めて、最適な方法を使えるよう考えてみましょう。
なんと当ブログには、cssやhtmlを書く上で参考になる記事がたくさんありますよ。
ぜひ、ご覧ください！
第3章：スケジュール管理・考え方編
ここだけ100%の出来
例えばバナーを作る時など、オブジェクトを最初に作りこんでしまい、その作業で期限が来てしまった…という経験は誰しもが一度は体験しているかと思います。結果、作りこんだオブジェクトが全体のテイストにマッチせず、まるっと作業が無駄になってしまうことも…ありました。あったんですよ…。
制作をする時は、全体を進めながら徐々に細部を進めていくようにすると、このような事態を防ぎやすくなります。また、納期までのスケジュールと照らしあわせて、この工程はどの程度時間をかけられるかザックリと計画を立てておくとより安心・安全ですよ！
言われたとおりに修正したのに…
具体的な修正指示がありそのとおりに対応したのに、「なんか違うんだよな〜」と戻されたこと、ありませんか？
修正依頼が来た時は、その言葉どおりに受け取るのではなく、「何故この指定なのか」をしっかりと考え、分からない時はきちんと意図をヒアリングすると、このような悲劇は格段に減ります。
たとえばこんな場合…
修正依頼
- 赤背景に青文字で
何故この修正依頼なのか？予測してみる
- 予測１：派手な色の組み合わせ…もしかして、この文字を目立たせたいのかも？
- もっとほかのアプローチがありそう
- ジャンプ率を上げる・カラーをもっと視認性のよいものに変更する等
- 予測２：独特の配色だ…この色の組み合わせに何か意味があるのかも？
- ヒアリングしてみる
- 色に意味があったとしても、視認性が著しく落ちる懸念があるので、別のアプローチを考えてみる
ヒアリングしてみる
- 結果：予測１であった。
- こちらから別のアプローチ方法も提案をしてみる
デザイナーは絵を作るだけではなく、案件や要求の本質を理解して整理するということも大事な仕事です。
分からないことは、担当者にきちんとヒアリングしましょう！
このスケジュールには人間の気力と体力が計算に入っていないのである
これは4コマ書くまでもありませんが…
デザイナーたるもの、無理なスケジュールに対応しなければならない時はありますが、常にそれだと破綻してしまいます。心も体もスケジュールも。
まずは自分の作業スピードを正しく把握し、妥当なスケジュールの見積もりを取れるようになることが大切です。最初のうちは時間がかかって当たり前です。特に時間がかかる部分がわかってきたら、徐々に改善するよう意識してみましょう。
自分の作業時間を実際に計ってみるのもオススメです。その際は、どの段階でどれくらいの時間がかかるかを見れるとより良いでしょう。
バナー、ペラ1のLPなどのデザインでは…
- 企画書の確認
- ラフ制作
- レイアウト決定
- ブラッシュアップ
- 修正依頼が来てから提出まで
コーディングでは…
- html、cssの設計
- 素材の切り出し
- コードを書く
- ブラウザでのチェック
- コードレビューから修正まで
そしてなんと当ブログには、「スケジュール管理」や「デザイナーの考え方」という面で参考になる記事がたくさんありますよ。
ぜひ、ご覧ください！
終わりに
いかがでしたでしょうか？
これがすべての方にとって正解とは限りませんが、迷ったときや困った時に少しでも参考になれば幸いです。
私も書きながら、新人時代の◯年前を思い出しておりました。ああ、あの辛い思い出がよみがえる。ああ。ですが、日々仕事をこなしていく中で、自分なりに進めやすい仕事の仕方が身についたように思います。
新人の皆様も、辛いことがあっても挫けぬよう…がんばってくださいね…！
