新人Webデザイナーが１年の学びを振り返る
制作部でデザイナーをしている渡邉と申します。
昨年、2016年の4月に入社して6月の頭で配属1年になります。 学生時代は現代アートを専攻する科でカリキュラムにあらがって写真とか撮ってました。
さて今回は、私が新米Webデザイナーとして配属されてからのたくさんの学びの中から、つまずいた点や重要だと感じた点について紹介し、2年目にどう繋げていくべきかを書こうと思います。
自分のすぐ後を歩いている学生さんやWebデザイナーを目指している方の参考になれば嬉しいです。 また初心を忘れないための備忘録も兼ねて、書いていきます。
では早速。。。
目次
こういうところに注意しよう(デザイン編)
作業中はセルフツッコミを入れ続けよう
デザイン=ビジュアルを整えること、と捉えがちですが、デザインは問題解決の手段です。「誰が抱えてるどんな問題を解消するために、何ができるのか」「果たしてこの一手は適切なのか」を考えながら作業すると自ずと論理立てられたデザインができると思います。
いいデザインを見つけてどんどん真似しよう
同じような配色だったり近い文字量のバナーを参考するといいです。引き出しが増えて確実にパワーアップします。(私は学生時代に学んだ著作権の知識がブレーキをかけてしまってましたが、作ってるうちに全然違う見た目になっていくのでパクリだと不安になることはないです。)
また、参考資料を探すときは英語で検索するとオシャレなアイデアが見つかりやすいです。
“一番手こずった場合"を想定してスケジューリングしよう
フィードバックでは自分が想定してなかった点を指摘される訳なので、修正は自分になかったアイデアを具現化していく作業になります。思いのほか時間がかかるので、早めに提出できるスケジュールを組みましょう。
フォルダ・ファイル・レイヤーは全てにきちんと命名し整理整頓しよう
会社で作ったデータは他の人に渡したり使い回すことがあります。誰に渡しても使いやすいように職場でのユーザビリティにも気を配りましょう。「長方形３のコピーのコピー」とか「背景写真の候補２(あとで消す)」とかナシです。
ちなみに複製したレイヤーに「〜のコピー」を表示させない方法はこちら、
レイヤーの名前を一括で管理できるプラグインについてはこちらです。
引き算のデザインで迷走を防ごう
引き算のデザインとは情報量のピークから削っていって完成系はシンプルにする方法です。まず必要そうな情報をとにかく盛り込み情報量をMAXにします。羅列した情報に優先順位をつけて画面の左上から順番に配置していきます。書かなくても伝わる要素、キャンバスからはみ出た要素は容赦なく捨てちゃいましょう。「順序立てた要素を」「どうシンプルに組むか」を意識しましょう。
完璧を求めずまずは終わらせよう
デザイナーたるもの人が気付かないような細部までこだわることはとても大切。文字のエフェクトに悩んでいたら暗くなっていたなんてこともありましたが、納期に間に合わなかったら元も子もありません。 自分の力で考えることが非常に大事ですが、先に進めなさそうな時はすぐに先輩に相談しましょう。間違った方向で進めるよりもよほどいいです。決してネガティブなニュアンスではなく「絶対に間に合う範囲でどこまでできるかを考える」ことも大切だとも思いました。
デザインのフローと意識すること
スケジューリング（複数回の再提出も考慮して早め早めの予定を組む）
↓
プランニング(ターゲットやテーマやゴールを明確にする)
↓
エスキース(必要そうな要素をとにかく書き出す)
↓
ラフスケッチ(本当に必要な情報のみキャンバスに並べる)
↓
レイアウト(他の作品を参考にしつつ、重要度順に並べる)
↓
調整(行間等細部の調整。画面から離れたりセルフツッコミを入れて制作物を客観視する)
※後々コーディングするデザインの場合は奇数や小数のオブジェクトがないか注意する
↓
提出(迷走し出したら早めに相談。レビューを考慮し余裕を持って提出)
↓
再編集(成果物を客観視しユーザー目線で改善策を模索。参作をよく観察して編集)
↓
入稿(納品データは軽く軽く)
こういうところに注意しよう(コーディング編)
マークアップは"レイアウト"じゃない
最初全く馴染めなかったのですが、マークアップはデザイン案通りにパーツを並べさせることではなく、文章に適切な意味づけをして人間語の構造を機械に認識させていくことです。デザインカンプ内に並んだ各パーツをよく読み解き、「これが小見出しに当たるからh3で…」「ここは補足情報だからasideで…」などと適切に目印(マーク)を振りましょう。
コーディングを始める前に設計図を書こう
上の書いた作業をするときは構造を紙にザクザク書き込んでみましょう。要素の親子関係を図にしたり動きを絵で描いたりするとかなり頭が整理できてエディターでの作業が早くなります。もし適当なクラス名でもって見切り発車的に作り始めてしまうと、後で修正が面倒になりますしいらないケアレスミスを招いたりもします。
編集に強く、汎用性の高いマークアップを心がけよう
デザインデータ同様、他の方がコーディングファイルを触ることがあります。なので"このページに足りるコーディング"ではなくて、全てのページに通用するルールに則ってコーディングをしましょう。具体的には、仕様変更に対応しやすいように各要素にクラス名を与えておくことや、社内ルールに従って命名することが大切です。
プルリク前にセルフコードレビューをしよう
余計な編集を加えていないか、リンクが機能しているか、仕様漏れはないかなど、自分で気づけるレベルのミスはレビュー前に潰しておきましょう。せっかく先輩方に確認をしていただくのに、しょうもない部分の指摘に時間を取らせてしまうのは賢明でないです。(長く同じ画面を見ていると目が慣れてしまい些細なミスに気づけないこともあります。エディターの画面だけでなく実機のプレビューでもしっかりと確認しましょう。)
リリース完了まで責任を持とう
どの端末でも正しく表示されているか、正しくリンク先に遷移するかなどを確認し、旅立つ子供を見えなくなるまで送る親のように、手を離れたページを見守りましょう。自分の成果物に責任を持ち、リリース完了の確認がディレクターからも取れるまでは、対応できる状態でいましょう。
ネットサーフィンはデバックモードで楽しもう
たまにやってみるとかなりコーディングの勉強になります。問題と解答が一枚のページに載っている状態なのでとてもいい教材です。「よく見るレイアウトだけどこんな手法もあったのか」とか「この手のパーツにはこんなクラス名がいいんだな」とか、発見が沢山ありますw
これらを身につけた上で２年目に挑戦すること
次に、上に書いた諸々を身につけたうえで、入社2年目としてやるべきことについて書きます。
自立してできる仕事を増やすこと
与えられた仕事をこなすだけでなく、自立してできる仕事を増やしたいです。そのためにまず、仕事を円滑進めるために何をするべきかを考えながら行動します。これを実践していくことで、チームで効率的に動ける(動かせる)力を身につくと思っています。また、チーム内で進行している別の仕事やチーム内の他のメンバーが持っているタスクを把握することで、必要とされる場所に自分から飛び込める人間になります。
提案すること
いいものを作っていくために、よりディレクターチームと連携し企画段階から関わっていきたいです。 提案するためには自分の考えを持っている必要があり、自分の考えを持つためは知見を持っている必要があるはずです。なので提案できる人間になるために、まずはサービズの仕組みを理解したり、数値を読み解けるようになったり、日々の実務を通じてより深い部分にまで関心を向けていこうと思います。
脱"新人"を意識すること
後輩がぞくぞくと入ってきます。新卒で入社した人材として、先輩から受け継いだことを自分で磨き後輩に継承していくことが求めらるはずです。新入社員としてではなく先輩社員として求められるものは何かを考えると、技術や業務についてもっと深く知ってなければいけないと気づけます。
その他これから挑戦していきたいこと
- 自分の力でJSを動かせるようにする(パズルゲームの一種だと思うと勉強しやすい。動くと超楽しい)
- UIについて学ぶ(デザイン思考を身につけて制作するときの武器を増やしたい)
- 英語に慣れる(エラーメッセージやコンソールをちゃんと読む。英語の技術ブログや取説も読む努力をする)
- 新しいものに興味を持つ(現状は最新技術や世の中の流行りにうとい)
- 映像制作について学ぶ(学生時代に少しやってた動画撮影や映像制作についてもう少し学び、仕事でチャンスをつかみたい)
- 最低限ターミナルを使えるよになる(画像データを扱うのでFinderの方が使用機会が多いが、ターミナルでコマンド制御できたら早いしカッコイイ！)
- 仕事直結じゃないインプットも大切にする(本、雑誌、映画、舞台など)
最後に
自分を含めた新人デザイナーさんや、学生さんに向けて書きます。
満を持して社会に出ても初めは教えていただくことばかりで、心のどこかで学生気分を引きずってしまいがちです。しかし、私はもう自分の成果物の対価としてお給料を頂いています。会社に入ってこの活動でお給料をもらっているということは"プロ"になったということなのです。
私はまだまだ先輩方のアドバイスが必要で、自分をwebデザイナーと名乗るのはおこがましいと思ってしまいますが、そんな気持ちで遠慮していて大きなヒヨコになってはいけないです。なので今すぐにもでもプロ意識を持って仕事に取り組むべきだと思います。一緒に頑張っていきましょう！
