デザインチェックもう少し

こんにちは。新人エンジニアの岡山です。 本日も「今日やったこと・詰まったこと・学びになったこと」などを書いていきます。よろしくお願いします。

レスポンシブ対応時のpadding無効忘れ

デザインチェックの際、スマホサイズでは画像とテキストが縦並びになり、画像はpaddingで中央寄せにしていたのですが、PC以降のレイアウトになったときにこのpaddingを無効にするのを忘れていました。perfect pixelで照らし合わせた時、paddingを消し忘れると結構ズレていました。

デザインチェックのフィードバック

一方、文字間と行間、文字の太さについては自分では気づけず、フィードバックで指摘していただいた箇所でした。あと、Safariやテスト環境の画面をスマホで確認するのが良いと教えていただきました。ブラウザや実機によって見え方が変わることがあるので今後はそちらも見落とさないよう気をつけていきます。

おわりに

複数のページを一気にチェックするやり方は結構見落としが増えてくるので、今後は1ページ分コードを書き終えたらその都度デザインチェックを行うことにします。
デザインチェックはまだ完了していませんが、明日から新規のリニューアルサイトの案件があるので明日はそっちを頑張ります。

Mikanから一言

レイアウトも、余白や文字間、フォントの太さも、デザイナーチームは全て「なぜこうしているのか」意図を持ってデザインするようにしています！なので魂こめている見た目をそのまま維持してくださり、さらに命を吹き込んで動かしてくださるエンジニアさん達にはいつも頭が上がりません。