デザインレビューのチェックリストを確認する

[2525nicole]

• [x] このページにアクセスした瞬間にこのサービスは何をするサービスなのかが理解できるようになっているか？
  • サービスがしてくれることは、サービス名を伝えるよりも大事。
  • キャッチコピーなどを使ってアクセスした瞬間にわかるようにする。
  • 検索結果で並んだときもサービスの内容がわかるように meta discription も読んだ瞬間サービスの内容がわかる文言にする。
  • よく説明を読まないとサービス内容がわからないのでは、読む前にユーザーはそのページを離れてしまう。
• [x] 全てのページに title タグは設定されているか？
  • 全てのページが同じ title になってしまっていると、検索結果に表示されにくくなります。
  • 全てのページはそれぞれ別の title にしましょう。
• [x] 全てのページに meta description は設定されているか？
  • 全てのページはそれぞれ別の meta description にしましょう。
• [x] OGP は設定されているか？
  • Twitter Card も設定しよう。
• [x] 文書構造を表現した HTML になっているか？
  • 全て div になっているなんてことのないように！
  • 全てのページは h1 を持っているように。
• [x] Favicon は設定されているか？
  • [x] スマホでブックマークをホームに置いたときにアイコンが出るように、スマホ用の Favicon も用意しよう。
• [x] クリックできるものはマウスカーソルがクリックできる形になっているか？（a や button ではないクリックできる要素には cursor: pointer; が必要）
• [x] 画像には alt タグが設定されているか？（目の不自由な人がスクリーンリーダーでサイトを読むときのことを考えて alt を設定しよう）
• [x] リンクやボタンはhover、active 時のアクションが設定されているか？
• [x] 削除や退会など、滅多に使わないアクションに対して赤いボタンを設定して目立ってしまい、逆に押してほしいような感じになってしまってないか？
• [x] 無駄に大きすぎる画像（svg は除く）になっていないか？
• [x] 画像は圧縮したか？（画像圧縮で検索すると画像圧縮サービスが見つか）
• [x] ユーザーに使い方が伝わるか？（ユーザーはヘルプなんか読みません。ユーザーが迷わないようにフォームには何を入力するのかの説明を付け、plaeceholder には入力例を付ける）
• [x] 文章の口調は全体で統一されているか？サービスとマッチしているか？（丁寧過ぎてたりしてない？）
• [x] スマホでもちゃんと使えるか？
• [x] スマホとは逆に、巨大なディスプレイでもそのサービスを利用できるか？ちゃんと最大幅の制限を付けているか？（サイトの幅が横に伸びすぎてないか？こんな風になってないか？）
• [x] URL は https になっているか？（特に独自ドメインで公開する場合は注意）
• [x] 全てのページ、パーツにデザインを入れているか？
• [x] 投稿が 0 の場合は、0 のときようの表示がちゃんと用意されているか？
  • 0 のときの表示も用意する