メディカルデザインにコーダーとして入社して早いもので3年がもうすぐ経とうとしています。
コーダーの仕事としましてはデザイナーが作成しましたデザインをもとに実際にweb上でも見れるように実装していくのですがよりデザインに沿ったものに近づけていくためにその作業が終わりましたらディレクターやデザイナーなど他の方にチェックをしていただく機会があります。
そうすることでコーディング時には見落としていた点や修正などの指摘をいただくことができより正確なものに近づけていくことができます。
今回はこれまでの振り返りも含めて今まで指摘された点で多かった箇所をいくつかピックアップしていこうかなと思います。

フォント・色は合っているか？

制作をするにあたってそのサイトに合ったフォントや色を選びデザインをしてくれてます。
その際にフォントや色の種類が少ない時は良いですがタイトルの時、文章の時、英語の時、数字の時などでそれぞれでフォントがあったり、黒の色でも一色に限らず複数あるときなどは見落としやすい点になります。
それぞれの違いが一目でわかるものであればすぐに気付くことも可能と思いますが似ているフォント・色を使用されている時もあるので注意が必要かなと思います。

コーディングに入る前に…

デザインをいただきコーディングを実際に取りかかるときには一通り今回のデザインにはどのフォントや色が使われているのかを事前にざっくりでも良いので確認しておくと漏れも少ないかと思います。
私は入社したての頃はコーディングしながら都度、必要な時に用意していけば良いかなと安易に考え進めておりましたがやっぱり見落とすことが多かったですね…

画面の幅を小さくした時に耐えられるか？

デザインと同様の横幅でのコーディングできたとしても画面の横幅を小さくした時にも耐えられるかということ確認する必要があります。
よくある場面としましては横並びのデザインであったり、サイト上部にあるヘッダー部分です。
大体がPCの時ですと左側にサイトのロゴで右側にメニューが並ぶデザインが多いかと思いますが画面の横幅が小さくなるにつれてメニューのテキストが重なったりもしくは不要に改行が入ってしまったり、ロゴが潰れてしまうなどが発生してしまう点があるので確認する必要があります。

PCからスマホに切り替わる直前の確認を…

PCからスマホへのデザインの切り替わるタイミングの時は崩れが発生しやすい箇所になりますので直前のサイズまで縮めて確認しておくと良いかと思います。

テキスト量が増えた時に耐えられるか？

ボタンやボックスなどでアイコンとテキストが横並びなどで起きることが多いのですが デザイン上ではテキスト量が少なく実装したときは綺麗に見えますが例えばテキスト量が増えた時にアイコンが潰れてしまったりもしくはテキストがアイコンに被ってしまったりなどが発生しないかを確認することが大事かなと思います。 なのでコーディングの際に一度、テキスト量を増やしてスタイルが耐えられるかを確認すると良いと思います。 私も入社したての頃、コーディングできたと思いチェックしていただいたらテキスト量が増やした時にテキストがアイコンに被り悲惨なこととなったことがありますので自分もこの部分は注意していきたいと思います

ボックスシャドウ（影）の抜け漏れがないか？

ほとんどの場合でいただくデザインでは影がある場合は薄く目立ちにくいですので単純に見落としてしまう要素となっています。ですのでコーディングの際に見落としやすいポイントにもなるのかと思います。
また、デザインにある色をそのままコーディングに反映した場合に濃さや色味などが異なって見えることもあるのでデザインでのカラーコードや数値だけ反映した後には実際にコーディングとデザインを見比べることも大事になります。

体感では…

特にカード型のレイアウトやボタンなどで使用されることが体感で多いかなと思いますのでその箇所ではボックスシャドウ（影）が使用されていないかを気をつける必要がありますね

余白が適切かどうか？

余白の取り方によってサイト閲覧者に対して与える印象が変わっていきますので注意していきたい部分になります。 特にPCの画面サイズがコーディング後のレスポンシブ対応をしようとした時に余白を詰めようとすると余白の取り方が不自然になってしまい元々のデザインの取り方と異なる事象が発生しやすいので気をつけていきたい箇所になります。
意識する点としましては…

グルーピング

関連性が近い要素を視覚的にまとめることで、ユーザーにとって「どれが関連する情報なのか」を視覚的に理解しやすくなる手法となり、要素間の余白を調整することで、関連する情報同士を近づけ、逆に関係のない情報は離すことで、視覚的な整理がされます。

ボックスを用いた要素

ボックスのような枠のあるデザインにおいても画面サイズが小さくなった時にテキストと枠の余白を詰めすぎると視覚的に読みにくい印象を持たせてしまいます。
また、例えば元々は余白を多めに取ってゆったりとした印象を与えていたサイトが余白を詰めすぎることで窮屈に感じ元々のデザインの印象を変えてしまう要因にもなってしまいます…

最後に…

今回はコーディングの際に見落としがちなポイントについて少しだけ書いてみました。
もちろんコーダーが見落としなく完璧にコーディング出来るに越したことはないですが、最新の注意を払ってコーディングしていてもチェックしていただくと「抜けている点」や「こうするともっと良くなるという点」を指摘していただきますので、自分1人だけ完結するのではなく第三者に確認していただくことが出来るのであればより確実な実装になると思います。
また、その上で自分も見落としなくデザイナーが意図するデザインに対してより忠実に実装できるようにこれからも精進していきたいと思います！