Myコーディングチェックリスト
今回は、Myコーディングチェックリストを公開します。
【チェックリストの目的】
コーディングでの抜け漏れの防止
進捗管理と情報共有に使うため
メンバーにチェックを依頼する際に、チェックしてほしいポイントを一目でわかるようにするため
スクール(クリエイターズファクトリー)から提供されたリストや授業で習ったことをベースにあれこれ加工しながらやっています。
※チェックリストの正確性については担保しません。よろしくお願いいたします。
1.htmlで入れる情報が漏れていないか?
2.CSSに入れる情報が漏れていないか?
また、Basecssでは、①フォントサイズ、②色、③フォント、④行高の4つを指定することが多いです。
こんな感じです↓
body {
font-size: 16px;
color: #333333;
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.5;
}
あとはコンテンツ幅ですね。basecssに何を書いたのかは、メモ書きで残しておきます。
3.ページごとのデザインチェック
ページごとにチェックリストを作成し、デザインカンプと見比べながら作業が済んだものにチェックをいれていきます。
おまけ:ブレークポイントごとのレスポンシブ対応
ダブルチェックする人がチェックしやすいよう、ブレークポイントごとにどのようなレスポンシブ対応を行ったかを、チェックリストに記載して引き渡しています。
例)
ブレークポイント 1000px
ヘッダーをハンバーガーメニューに切り替えた
ブレークポイント 768px
サービスセクションを横並びから縦ならびにした
4.画面幅ごとに見え方チェック
ワイドビューでの崩れや、横スクロールがないか?
中間サイズでおかしいところはないか?
画像が重くないか?低画質ではないか?など…
小さいサイズは実機で確認します。
5.ブラウザチェック
ブラウザによって画面崩れなどが発生していないか、チェックします。
Chrome、Safari、Firefox、edgeの4つで見ます。
6.タグにおかしいところがないかをチェック
バリデーションツールを使ってチェックします。タグの閉じ忘れとかのチェックに便利です。
7.altチェック
画像にaltが設定されているかチェックします。
8.リンクチェッカー
リンク間違いとかまでは検出してくれないです。
最後は目視でチェックです…。
最後に…修正のやり取りについて
修正や調整のやりとりは、スクリーンショットでやりとりするとコミュニケーションコストが下がって良いです。文章だけだとニュアンスが伝わりづらいので…。
それでは失礼いたします。
この記事が気に入ったらサポートをしてみませんか?