上原です。
paiza(ギノ)に入社して3ヶ月くらいのWebデザイナーです。
以前、新人デザイナー時代に一人前になるためやっていたことを書きましたが、今回は実務でデザインをするときに気をつけていること、特に開発チームのエンジニアと仕事をするときに気をつけていることを書きたいと思います。
デザイナーやディレクターなど、エンジニアと一緒に仕事をする機会が多い職種の人にとって少しでも参考になる点があれば幸いです。
私の簡単な経歴
経歴：デザイン系専門学校→デザイナーとして複数の制作会社に勤務（8年くらい）→paiza(ギノ)に来て3ヶ月くらい
デザインをするときに気をつけていること
1.状態が複数ある場合を想定しておく
たとえばpaizaだと、ユーザーがスキルチェック問題を解けばスキルランクのステータスは変わっていきます。
また、サイト上部のメニューにカーソルを合わせたりクリックしたりすると、色が変わるようになっています。
このとき、ユーザーが何も操作していない状態だけを想定してデザインを作成してしまうと、「ユーザーのステータスによって表示が変わる部分はどうするの？」「ボタンのホバー時はどうするの？」などといったことで、実装するエンジニアを悩ませてしまいます。
これを防ぐための対策として、私は通常時のデザインをベースに、要素の変化後を想定したパターンのデザインもあわせて制作するようにしています。
「色がちょっと変わるだけじゃん」と思うかもしれませんが、画像や状態が変われば、それにともなってサイト全体の見え方まで変わってしまうケースもあります。デザイナー側は、あらかじめ変化後のことも想定しておいたほうがよいわけです。
2.要素の増減を想定しておく
たとえばインタビューの一覧ページなどの場合、このように記事ごとに文章量が違ったりします。
このとき、「記事タイトルは必ず二行」と想定して、ベストなバランスのデザインができていても、タイトルが一行の記事や三行の記事が出てきたら、対応できずそのバランスは崩れてしまいますよね。
実装後に情報の増減が発生して「こんなの想定してなかった！」とならないためには、情報量が増えるパターンも減るパターンも想定した上で、それでも破綻しないデザインを作るのが重要です。
3.複数の画面サイズでの表示を想定しておく
Webサイトは、表示する画面のサイズにいくつかの種類がありますよね。PC表示からスマートフォンに切り替えたらどんな見え方になるのか、そこからさらにタブレットに切り替えた場合にはどうなるのかも、あわせて想定しておかなければなりません。
PCの画面ではいろいろな要素が表示できるけど、スマホでは画面がかなり小さくなります。画面のサイズが変わっても情報を適切に伝えるためには、表示する構成を変えたり、要素を絞ったりする必要が出てきます。
「PCで見るとリッチなサイトだけど、スマホでは全然機能しない…」などといった事態を防ぐには「スマホに切り替えたらどんなレイアウトになるか」を考えつつ、最初から変化に対応できる構造でデザインを作るのが重要です。
4.実装の方法に当たりをつけておく
どんなにすばらしい見た目のものができたとしても、レスポンシブコーディングに対応できていないとか、一般的なブラウザで対応しきれないとかいうデザインでは意味がありません。
これを防ぐには、「こんな感じでコーディングすれば実装できるよな」ということを、デザインの段階で想定しておく必要があります。レスポンシブを考慮して逆算的にデザインを考えていれば、開発側の負担が膨れることもない（はず）です。
また、実装を依頼するときはこの図のように、数値を出して資料として添付したりすると、実装する側も作業しやすい（はず）です。
見た目としてベストなデザインを目指すのは当たり前ですが、それと同時に「どんな記述でどうやって実装するか」も合わせて考えておくことで、実装してくれるエンジニアたちとスムーズな連携をとれるように心がけています。
5.実装時のアニメーションを想定しておく
アニメーションを含んだデザインをするときって、頭の中に「この要素はこんなふうに動かしたいな…」というイメージがありますよね。ただ、この動きのイメージって、言葉で説明するのがなかなか難しいんです。
エンジニアとイメージを共有できていたつもりでいても、いざできあがったものを見てみたら「イメージしてたのと全然違う動きで実装されてる！」ってケースは珍しくありません。
だから、アニメーションなどの動きは初めからイメージを共有しておくために、似た動きのサンプルを集めて早めに共有するようにしています。口で説明するより、実物を見てもらったほうが早いですからね。
まとめ
というわけで、Webデザイナーがデザインをするときに気をつけていること、開発チームのエンジニアにスムーズに実装してもらうために気をつけていることのお話でした。
デザインを制作しているとエンジニアの方々とぶつかることもあるかもしれませんが、デザインする側があらかじめいろいろと想定できていればスムーズに進むケースも多いので、やっていきましょう。
paizaラーニングの「Webデザイン入門編」では、ITエンジニアやデザイン初心者の方向けに、Webデザインの基礎が学べる動画レッスンを公開しています。
Webデザイン入門編について詳しくはこちら
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
