Myコーディングチェックリスト

2023年4月29日 18:13

今回は、Myコーディングチェックリストを公開します。

【チェックリストの目的】

コーディングでの抜け漏れの防止
進捗管理と情報共有に使うため
メンバーにチェックを依頼する際に、チェックしてほしいポイントを一目でわかるようにするため

スクール（クリエイターズファクトリー）から提供されたリストや授業で習ったことをベースにあれこれ加工しながらやっています。
※チェックリストの正確性については担保しません。よろしくお願いいたします。

１．htmlで入れる情報が漏れていないか？

入れる場所…htmlのすぐ下
<html lang="ja" prefix="og: http://ogp.me/ns#">

入れる場所…head
●文字コード
<meta charset="UTF-8">
●ページタイトル
<title>サイト名｜ページ名</title>
●説明文
<meta name="description" content="●●●●">

●ビューポート
<meta name="viewport" content="width=device-width,initial-scale=1">

●OGP
<meta property="og:title" content="●●●”>
<meta property="og:type" content="website">
<meta property="og:description" content="説明文">
<meta property="og:url" content="サイトのURL">
<meta property="og:site_name" content=”サイト名">
<meta property="og:image" content="画像のURLを絶対パスで記載">

●twitter OGP
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="アカウント名">

●ファビコン
<link rel="shortcut icon" href="./image/favicon.ico">

●WEBフォント
Googleからコピペして貼り付ける

●アイコンフォント
Googleからコピペする

●リセットCSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@2.0.2/destyle.css">
※私はCdnのやつ使っています。

●ベースCSS
<link rel="stylesheet" href="./css/base.css">

●各ページのCSS
<link rel="stylesheet" href="./css/○○.css">

入れる場所…body
javascriptの読み込み（headでもいいらしい）

２．CSSに入れる情報が漏れていないか？

●文字コード
@charset "-utf 8";

また、Basecssでは、①フォントサイズ、②色、③フォント、④行高の４つを指定することが多いです。
こんな感じです↓

body {
font-size: 16px;
color: #333333;
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.5;
}

あとはコンテンツ幅ですね。basecssに何を書いたのかは、メモ書きで残しておきます。

３．ページごとのデザインチェック

・フォント
・ヘッダー
・フッター
・各セクションのフォント、余白、レイアウト、リンク切れ
・使っている画像は正しいか？

ページごとにチェックリストを作成し、デザインカンプと見比べながら作業が済んだものにチェックをいれていきます。

おまけ：ブレークポイントごとのレスポンシブ対応

ダブルチェックする人がチェックしやすいよう、ブレークポイントごとにどのようなレスポンシブ対応を行ったかを、チェックリストに記載して引き渡しています。

例）
ブレークポイント　1000px
ヘッダーをハンバーガーメニューに切り替えた

ブレークポイント　768px
サービスセクションを横並びから縦ならびにした

４．画面幅ごとに見え方チェック

ワイドビューでの崩れや、横スクロールがないか？
中間サイズでおかしいところはないか？
画像が重くないか？低画質ではないか？など…
小さいサイズは実機で確認します。

チェックしている画面幅
・1920～
・1919～1441
・1440～1025
・1024～768
・767～375
・374～320
※一応私は320pxまでチェックしています。

５．ブラウザチェック

ブラウザによって画面崩れなどが発生していないか、チェックします。
Chrome、Safari、Firefox、edgeの４つで見ます。

６．タグにおかしいところがないかをチェック

バリデーションツールを使ってチェックします。タグの閉じ忘れとかのチェックに便利です。

７．altチェック

画像にaltが設定されているかチェックします。

８．リンクチェッカー

リンク間違いとかまでは検出してくれないです。
最後は目視でチェックです…。

最後に…修正のやり取りについて

修正や調整のやりとりは、スクリーンショットでやりとりするとコミュニケーションコストが下がって良いです。文章だけだとニュアンスが伝わりづらいので…。

それでは失礼いたします。

この記事が気に入ったらサポートをしてみませんか？