Webデザイナーになって早くも約1年が経ちましたので、今までの業務や先輩方に指摘されたことを振り返ってみようかなと思います。

私は元々デザイン専門の学校に通っていたことから、PhotoshopやIllustratorは使えましたが、webの知識は少ししかなく、Photoshopでデザインして、HTMLとCSSにコードを記述して作成するものなんだなというふわっとした知識しかありませんでした。（現在はデザインをXDで作成しています。

最初は社内でコーディングの練習をしていました。

入社してすぐ、渡された参考サイトと見比べながらコーディングしていました。しかしデベロッパーツールの使い方をそもそも知らず、そこに書いたコードが画面に反映されているので、ここから直接書けるものなんだなと思いリロードしたら全部消えて疑問だけが残った記憶があります…。

記念すべき最初のお仕事は、写真素材探し。

初めてのお仕事は、先輩の作成したデザインの画像が入る部分に、写真素材を探して来て入れ込む、というものでした。最初は写真を入れてみては何か違和感を感じ、別の素材を探しては入れ込みと繰り返していました。そしてデザインに記載されている文章を読んでみて、そもそも選ぶ写真のテーマがズレているのではないかと悩んだり…。

その後は、サイトのお知らせ情報の投稿、バナー作成、下層デザイン、トップデザインと、少しずつデザインの範囲が広がっていきました。

続いて、この約1年間で先輩のデザイナー、コーダーの方々に指摘されたことを書いていこうと思います。

デザイナーに指摘されたこと

これってボタン？

デザインを統一させる為に、周りで使っている効果や色をそのままボタンに反映させてしまうと、見分けが付きにくくなってしまいます。
ボタンの部分は、少し別のデザインを取り入れると分かりやすくなります。また、他の参考サイトをいくつも見ることで、皆さんが大体ボタンだと認識するデザインはどういうものか分かるようになります。

文字のカーニングはした？

フォントの種類によって、”数字”と”かな”を並べると、数字の位置が下に下がっていたり、微妙に文字間が空いていたりします。
また文字間を詰める時に、半分ぼやける位置とくっきり見える位置があるので、1pxずつズラしながら確認すると、綺麗に画像を書き出すことが出来ます。

なんでこのデザインになったの？

どういう意図でデザインしたかをきちんと伝えると、その意図ならこうした方が良いんじゃないかな、という先輩の意見も聞けたり、ディレクターに確認すれば、さらに細かい部分でのお客様の要望を聞けたりすることもあります。

コーダーに指摘されたこと

これってホバーはどうなるんですかね？

横にスライドするホバーは、ホバー後の位置を考えて収まるようにデザインしなければいけないですし、色反転のホバーを付けて頂くときは、必要に応じて色が反転した素材も用意しておくこともあります。

これってホバーはどうなるんですかね？

横にスライドするホバーは、ホバー後の位置を考えて収まるようにデザインしなければいけないですし、色反転のホバーを付けて頂くときは、必要に応じて色が反転した素材も用意しておくこともあります。

これって複数行ある時はどうなるんですかね？

並んでいるコンテンツの一つだけ文章量が多い場合でも、デザインは崩れないか確認しましょう。逆に文章が無かった場合、画像がない場合。1行が2行になった時、周りのデザインはどう動くか。その辺りを考慮してデザインする必要があります。

これってスマホ表示ではどうなるんですかね？

本スマホとPC両方のデザインを用意しますが、PCのみのデザインでスマホ表示を作成して頂く時には、スマホでの表示を考慮してデザインする必要があります。
スマホ表示でプルダウンにしたりスライダーにしたりする部分がある時は、先に伝えておくことが大切です。必要に応じて一部スマホ用の素材を用意しておくこともあります。

まだまだ指摘されたことは書き切れませんが、教材でデザインを学んでいても、実際に現場にいると色んな角度から気付かされることが多く、刺激があり毎日楽しいです。

少しでもwebデザイナーを目指す方の力になれればと思います。
指摘されたことを胸に、これからも頑張ります！