Ateam Lifestyle Advent Calendar 2021の13日目は、株式会社エイチームライフスタイル @snd-07 が担当します。
はじめに
2021年を振り返ってみると、環境が変化した年でした。
今まではチームの人数が多く、自分よりも技術力の高い先輩がたくさんいる環境でちっぽけな戦力でしたが、現在はチームの人数が減ったこともあり、自分の責務は大きくなりました。
それに比例して、自分の作業や確認に対する意識・質は、自ずと高くなったと思います。
この記事では、Webデザイナーの @snd-07 が普段、HTML/CSSの実装をする際や他のメンバーのコードレビューを行う際に気をつけていることをまとめました。
参考になれば幸いです
読んでほしい人
- Webデザインに関わる人
- HTML/cssに関わる人
表示のチェック
プロダクトに触れる状況は、ユーザーによってさまざまです。
ユーザーの体験を損ねないために、目的が達成できているかどうかを優先的にチェックします。
1.ブラウザや画面サイズを変えても崩れないか
ブラウザや画面幅を変えても、表示に問題ないかをチェックします。
開発していた環境では正しく表示できていても、違う環境だと予期せぬ崩れや挙動をしている場合があるので、必ず確認をしています。
ブラウザの仕様による場合もありますが、そもそも対応していないプロパティの場合もあるので、実装時に、Can I use...で事前に確認してから利用することも心がけています。
世の中にはさまざまなデバイス・ブラウザがあるため、全ての環境に対応するのはかなりの時間・労力がかかります。
「どの環境を担保するか」を先に決めておくのがおすすめです
2.コンテンツの量が変わっても表示が崩れないか
コンテンツの内容が変動する場合、変動に適用できるかどうかのチェックを行います。
抜け漏れがないよう、UIstackの５つのステートに当てはめて考えることが多いです。
| ステート | どういう状態 |
|---|---|
| Ideal State | 一番理想・基礎の状態 |
| Empty State | 情報がない状態 |
| Error State | 何かが間違っていたりして、エラーになっている状態 |
| Partial State | コンテンツが中途半端だったり、少なすぎる・多すぎる状態 |
| Loading State | コンテンツを読み込んでいる状態 |
Ideal Stateでデザインして、他の状態は想定していなかった、、ということもあるのではないでしょうか。
実装時に検証しておくと、いつの間にか崩れていた
！を避けることができます。
デザインと実装の作業を分担している方は、カンプを受け取った時点で「こういう場合はどういう挙動になるのか」をすり合わせておくと良いですね。
コードの品質チェック
表示崩れや挙動など、ユーザーが直接関わる部分が問題なかった場合は、**他の人や、未来の自分が困らないコードになっているかどうか？**の観点でチェックを行います。
3.スリムなコードになっているか
例えばこちらのコードには、スマートではないところがいくつかあります。
See the Pen example by sonoda (@snd-07) on CodePen.
- 文章の上に余白を足したい時
.textと.textWrapどちらのmargin-topを修正したらいいのかわからない -
.textと.textEmphasis、二重でcolor:navy;を記述しているので変更が手間
かぶりなく、必要な記述だけでスタイリングすることによって、コードのキャッチアップ・作業のスピードがぐんと上がります。
小さなところですが、ぜひ意識してみてください
ChormeのDev toolだと余白が視覚的に見やすいので、ソースコードで確認するよりも楽チンです。
4.意味のある記述になっているか
適切なタグを使っているかどうかの確認に加えて、デザインの意図を汲み取った記述ができているかをチェックしています。
See the Pen exam2 by sonoda (@snd-07) on CodePen.
width:900px;で指定してもwidth:calc(100% - 50px);で指定しても、.detailコンテンツの横幅は同じですが、
- コンテンツの横幅を900pxにしたいのであれば
width:900px;で指定する - 左右に50pxずつ空けたいのであれば
width:calc(100% - 50px);と指定する
というように、記述を使い分けることで、目的が理解しやすいスタイリングができます。
他の人が見ても**内容の意図が伝わるかどうか？**を、判断の基準として考えています。
キャッチアップするのに時間がかかりそうな箇所は、コメントで意図を残しておくのもポイントです。
まとめ
いかがでしたか？
読んでくださった方に気づきがあれば幸いです。
レビューポイントは人によって様々と思いますので、「自分はこういうところを見ているよ！
」というご意見あれば、ぜひ教えてください。
12/14は、@kosukefujiwara さんの記事が公開されます！
マーケターのアドカレ参戦です！お楽しみに