Webデザイン備忘録

2年目Webデザイナの崖っぷち奮闘日記。

2年目に期待されること《1年目の反省と目標》

f:id:ayarpyyy:20161128211725j:plain

私と同じような境遇の人がいれば心強いなとか
そんな状況から這い出た先輩のアドバイスなんか載ってたら参考にしようかなと思い、世の中の他の2年目デザイナはどういう状態なのか調べてみました。

 

︎参考サイト

●IT系女子ログ
新人Webデザイナーの私が、1年目で指摘されたことを振り返る [デザイン編]

>読んだ瞬間ものすごく共感…一番のお気に入りに。
経験からの反省点と具体的な打開策、目標に対する結果が細かく書かれていてとっても参考になります。私もこの方法で振り返ってみようと思いました。

 

●ACTZERO:Creative Blog
入社して1年経った新米Webデザイナーが考えてみたこと 

●ネクストページブログ
Webデザイナーの1年半を振り返る。

●iSM
僕のWEBデザイナー1年目の仕事内容など紹介

●D-Grip System -制作部
Webデザイナー1年目から2年目へ、デザインへの考え方の違い


 

私が指摘された内容など、調べてみたサイトに載っている内容とほぼ同じ箇所でした。みんな同じ道を通るのだとわかるだけでもなんだか安心して前に進める気がします。(安心しちゃいけないのだけれど)新人というレッテルが急に剥がれるプレッシャーとみんな戦っているのだ…

先人に倣って私も1年目の反省をばしていきたいと思います。
自分の現状と反省点を書いていくだけでも頭が整理される気がする。

1年目で指摘されたこと

この1年で指摘されたことは死ぬほどありますが、上記ブログで言われていることとほぼ同じですので個人的に重要視しているものを書きたいと思います。

デザインについて


フォントのカーニングは絶対

デザインカンプや画像を作成する時にフォントのカーニングを忘れ、全体のバランスがバラバラになり視点がブレてしまいました。

最初はそのバランスの悪さやブレにすら気づかず…整列していない気持ち悪さに気づくことがまず第一歩なのかも。

フォトショ使いの場合はオプティカル・メトリクス選択で丁度いいものを使用し、それでも文字間でバランスの悪い箇所は目視でポチポチと修正していきます。

 

視認性を考慮する

背景画像とテキストがかぶって読みづらくなっていないか、ボタンがボタンだとわかるようになっているか(埋もれていないか)、テキストなどの色が濃すぎないか、薄すぎないか…などなど。

全てがサイトカラー厳守という訳ではなく、ケースバイケースで同系色から持ってくるなど

 

一つの要素に対してさりげない効果を3つ以上使う

素人がフラットデザインに憧れてヘタにデザインするとダサくなる現象が起こった時、そんなつもりじゃないのだけれど要素をただ置いただけ(デザインしていない)に見える時などはこれをしてみる。

カドマルやシャドウなど、効果をさりげなく3つ以上入れることによって改善されるはずです。(効果入れすぎると逆にダサくなることもあるので要注意ですが…)

 

細部の調整を怠らない

フォントサイズや余白が統一されていなかったり、ボタンを押した時の挙動だったりなんだり。これを忘れると全体的にまとまらない、バラバラとしたイメージに。そういうディティールにこだわってこそ綺麗なデザインになるのだと思います…!

神は細部に宿るそうです。こまかみさま!

 

目で見て違和感のない位置が正解なこともある

フォトショやイラレで画像を作成する時に、配置ツールでセンタリングすると思います。ソフトは忠実に天地左右中央にセンタリングしてくれるのですが、それが「目で見た中央」とは違う時があるので要注意。

真ん中よりちょっと上、がちょうどいいことも。その場合は見た目で違和感ないことが最優先に。目視って重要です。

 

コーディングについて


うまくいかない時こそ冷静に

jsの挙動やバグがあった場合、すごく焦ります。焦ると頭が回らなく、いつも以上に時間がかかってしまい結局解決に至らずに先輩に迷惑をかけてしまうことに…。

私の場合は全角スペースが入っていたりパスミスだったり(クソおっちょこちょい)が多く、先輩に泣きついた結果それを指摘された時などは申し訳なさすぎて地中深く穴掘って埋まりたくなります。ケアレスミス、ダメ、ゼッタイ!!

 開発者ツールのコンソールでエラーがでていないか、CSSやHTMLのバリデーションチェックしたか、JSの記述位置を変えてみたりしたか、別のテストファイル作って動作確認したか…などなどチェックの仕方は山の様にあります。それを一つずつクリアーしていけば必ず答えにたどり着くはず!

 

CSS/SCSSはコメントをつけながらエリアごとにまとめて綺麗に書く

焦りのまま思うがままにCSSやSCSSを書いていくと、後々編集する時に同じエリアの記述があちこちにバラついたりなんだりでファイルの把握ができず余計な工数がかかってしまうことに。

エリアごとにコメントを入れて記述していき、わかりづらそうな箇所ではどういう記述をしているのかコメントをいれたりするとグッと作業がしやすくなります。

先輩にファイルを渡す時、多大なご迷惑をおかけしてしまったのを海より深く反省し、自分以外の人にファイルを見られる意識で恥ずかしく無いコーディングをするように意識するようになりました…

 

変数などルール決めしたものは必ず使う

SCSSにおいてだけのことではありませんが、変数やmixinなど、最初にこうすると決めたルールは必ず使い通すこと。

後々ファイル編集する時に、その変数の値だけ変えれば共通で変わるものが、変数を使ったり使わなかったりしているせいで一括で変えられなく、余計な手間がかかります。

私は余裕がない時などつい忘れてそのまま記述してしまいがちで、特に気をつける様にしています。

 

レスポンシブした時のことを考えながら要素を配置する

レスポンシブした時の配置がどうなるか、要素の置き方を考えながら構成していくとレスポンシブ時の調整が楽になります。というかそうしないとレスポンシブ調整している時につじつまが合わなくなり、急遽作り直し〜となって余計な工数が増えたり、余計な記述が増えてファイルが重くなってしまったりと後になって大惨事になりかねません。。要注意です。(PC表示調整で考えなしに作っていた結果、途中で これあかんやん!ってなって急遽作り直したことあります…)

 

PC表示時にある要素はスマホ表示でもそのまま使う

PC表示の時にあった要素で、スマホ表示の時は合わないし、さして影響ない箇所なので消してしまおうと判断してそれは少し乱暴と指摘されたことがあります。

合わないものも合う様にリデザインしてもいいし、もともとPCであった要素はなるべく消さずにそのままレスポンシブさせるようにとのことでした。

なるほど…固定概念に捉われてリデザインしてもよい、ということに気づかないでできないから消すという結果に至るのは確かに乱暴でした。いかんいかん。

 

PCブラウザで横幅を可変した時の表示とスマホ実機で見た時のデザインは必ずしも一致しなくてよい

レスポンシブ絡み続きですが。PCで表示した時と、スマホ表示時の要素の配置では、考えていても絶対に噛み合わない部分というのはでてきてしまうものです。

PC表示ではここにいなきゃ変だけど、このままレスポンシブさせるとスマホ表示ではここの位置になってしまう、でもそれだとスマホの動線上変だ!という問題です。

 その場合は無理に合わせようとせず、PCでブラウザ幅可変させた時とスマホ実機の時と分けて指定してしまえばよい!可変させた時の表示は、スマホで見るための指定なのだから。(その会社のルールによって違うかもしれませんが)

 

姿勢について


一度指摘されたことは繰り返さない

当たり前のことですが、注意散漫になっていてどうしても繰り返してしまいます。一度指摘されたことを把握しきれず、上司や先輩に度々指摘されることも。そのたびに反省するけどなおらないのは意識の改善だけじゃ意味無いってことです…

迷惑かけない!という意識は忘れず、案件ごとにチェックシートを作って最後に全部見直して改善を図っています。

 

納期は確実に守る。間に合わないと思った時はすぐに報告

納期内に収められず炎上…。

当たり前のことですが、どんな小さな納期でも、社内的納期でも厳守。リスケを繰り返すと感覚が麻痺してしまい、納期の危機感が薄れていました。

納期に間に合わないと思った時点ですぐに上司に報告する。そしてリスケを行うにしても2度。2度目は完全に終わることのできる期日を伝えること。これがデッドラインです。

最大の危機感を持って作業しなくてはと思います。

 

業務時間外を有効に使う

すべてを業務時間内で終わらせられればすごく良いのですが、そうもいかないので明日の作業を滞りなく進めるための準備を業務時間外にしておきます。

うまくいかない挙動の解決策や、実現させるための方法を検索かけておく、資料の把握をしておく、などなど。

 

言われたまま作るのではなく、自分で考えて提案していく

クライアントやディレクターに指示されたままに作っていくと、そうじゃなくてこうした方がいいんじゃないか、というものがでてくることも。言われたままに作っていると考える力が失われて、結果いいものができなくなるのだと思います。

私はよく、素直に聞くのはよいことだけど、視野を広げて固定概念に惑わされず提案してくれと言われます。こう指示されたからその通りやらなければいけない、ということはなく、それを覆すほどのロジックとよい案があればやっていかなきゃならんのですね。

 

自分しかいないと思う

わからなかったら先輩や上司に聞けるという安心感があったせいか、危機感が足りない状態に陥ってしまいました。これはいかん。

うまくいかない挙動がある時など、なにかにつけ「もし私しかいなかったら」と言い聞かせることで緊張感持って作業するようになってきたと思います。それで工数かかってしまうのはよくないことかもしれないけれど、本当にどうしてもダメな時はヒントをもらいにいきます。

もしかしたら成長する過程で一番大事なことかもしれないと思った「自分しかいない」状況。魔法の呪文のように心の中で唱えまくりたいと思います。

 

常に情報収集をしておく

まず情報の収集の仕方がわかりませんでした。していることといえば、情報まとめ系のサイト閲覧くらいでした。

なんでみんなあんなにピンポイントに良い情報ひっぱってこれるのかと先輩に聞いてみたところ、twitterでWeb界隈の人たちをフォローする、気になったサイトのRSS購読、はてぶなどでした。

あと、私の場合まとめサイトではプロには理解できるけど素人にはその前の段階なんです!ワカラン!っていうような記事が多かったので、初心者検索などしてみたりもしました。

常にアンテナ張ってなきゃいかんですね。

 

休む時間も必要

そんなこと言ったって休んでられない!と思いましたが最近わかるようになってきました。勉強する時と休みとを明確に分けるということかなーと。

ただでさえ要領も覚えも悪いのにーと思ってプレッシャーに押し負けながら勉強したって入ってきませんでした。この1年。

集中できていなかったんだと思います。集中できない状態で何時間も本やPCとにらめっこしても時間だけ無駄に過ぎていって、手放しに休める日を作っていないから変な疲労感がたまってしまって悪循環に陥ったり。

結果がでなければやっていないのと同じっていうのはわかっていても、何も努力していないとかやる気がないと思われるのはものすごく悲しい。やり方を変えなければいかんのですね。体と心と頭のお休み、必要です。

 


 

2年目の目標

  • 工数管理と自己平均の見積もりを正確にする
  • 情報収集
  • デザインの向上(サイト模写する)
  • ロゴデザインできるようになる
  • jQueryの難しい書き方や短縮記述の仕方覚える
  • jQueryだけでなくJSの書き方も少しは覚える
  • もっとWeb系の本を読む

 


 

こう並べていくとすべて当たり前のようなことですが、何個もあると簡単なことでもできなくなってしまったりってことあるんですね。

少しずつでも自分のキャパシティを広げていければと思います。

2年目、頑張るぞ!!