Zenn
🔖

レビュー時にデザイナーに怒られないための新人コーダー向けチェックリスト

2020/11/26に公開
CSS
HTML
#
デザイン
tech

WEBデザイナーに怒られないためのレビューの手間をかけさせないためのチェックリスト作りました。
「私はこれもチェックするよ！」「デザイナー的にこれチェックしてほしい！」などありましたらコメントください。

HTML

metaタグ

  • descriptionは入っているか
  • titleは入っているか
  • OGPは設定しているか

セマンティクス

  • 用語説明型リスト(dl, dt, dd)を使用しているか(用語集やよくある質問など)
  • コピーライトは<p><small></small></p>タグで囲んでいるか
  • お知らせや記事は<article>を使っているか
  • 住所は<address>を使っているか
  • SP時にプレースホルダが見切れていないか
  • 閉じタグ忘れがないか（FireFoxの『ソースを表示する』で確認）

セキュリティ

  • target="_blank"のaタグには rel="noopener"が付与されているか

画像

  • 2倍書き出しを行ったか
  • 画像を書き出す際に、テキスト部分がぼやけていないか
  • ぼやけていたら、PSデータに入っているフォントを、Google FontsからDLする
  • SP時はすべて100％にしない。場合によって80%などに適切に調整する
  • どの画面幅でも縦横比が適切か（4:3がいちばん無難）
  • 適切なaltになっているか

CSS

全般

フォント

  • フォントは全ブラウザで統一されて表示されるか(2個以上font-familyを指定する)
  • Zeplinやフォトショの出力されたサイズ通りにしているか(remかpx指定)
  • レスポンシブでfont-sizeを適切に使い分ける
  • 変なところに改行が入らないようwhite-space: nowrap;を使用する（特にSP時）
  • letter-spacingは合わせたか(大体統一されていることが多い・複数記述しない)
    • →大体0.05em（デザイナーさんはだいたい相対値が好き）
  • line-heightは適切な値になっているか(SP時には適切に使い分ける)
  • text-alignは適宜、以下の記述を入れる。
text-align: justify;
text-justify:inter-ideograph;

マージン

  • 上下のマージンは揃っているか(pxで指定する 20px 40pxなど)

リンク

  • 必要に応じて、青文字＋下線になっているか
  • 電話番号はSPのときのみリンクにしているか（PCのときはspanでOK）

flexbox

  • IEで崩れていないか
  • 3つ並びは要素が2個や5個のときに並びがおかしくならないか

UI/UX

  • ボタンの範囲は広く設定されているか
  • OKやキャンセルなどのアクションが勘違いされないか
  • リンク先は同じドメイン下なら同窓で、そうじゃないならtarget="_blank"を使用する
  • 長い文章には適宜改行をいれているか

WordPress

  • ユーザー名はadminを使わずに任意のものにする（セキュリティの観点から）
  • 先方の更新が楽になるように工夫しているか
    • 管理画面から不要な項目を消す
    • 管理画面のサイドバーの項目の名前を変更する・アイコンを設定する

プラグイン

  • あまりに多いカスタムフィールドはACF PROの繰り返しフィールドで再現できないか
  • カスタムフィールドの入力欄が幅100%になっていないか（ラッパーの属性から幅を25%などにする）

レビュー直前

クロスブラウザチェック

  • IEで確認
  • firefoxで確認
  • Edgeで確認
  • Safariで確認

マルチデバイスチェック

  • iOS(iPhone)で確認
  • iOS(iPad)で確認
  • Androidで確認

プラスα

「もしも」のデザイン

  • 文章量が極端に多い時はどうするか
  • 逆に文章量が極端に少ない時はどうするか
  • 見出し等1行前提だけど、溢れた時は三点リーダーで省略するか？改行するか
  • 3列flexboxを実装した場合、最後の行のコンテンツが1個の場合は左寄せになっているか（justify-content: space-between;使いがちなので要注意）
  • コンテンツが空っぽのときにどう表示するか（WordPress）
  • 要素が無くなった時に前後の余白はどうなる（WordPress）
  • 画像の差し替えでサイズが変わった時に画像の比率は固定するか、オリジナルの比率のまま表示するか

Discussion