”デザイン通りに作成" から1歩先に行くチェック項目の模索
デザイン通りに作成することは非常に重要で、素晴らしい技術です。
私が、デザインを実装に落とし込む前に考えることを列挙してみました。
デザイン自体を作る上で、ではなく
もらったデザインを実装する前に、エンジニアとして確認したい項目になります
もしこれ以外にもこんなことを考えている
ここに注意したいなどがあれば是非コメントをください
重要項目に関しては別記事で情報を掲載して居ます。
簡易チェック項目
デザイン意図の確認
- ユーザーにどのような印象を与えたいのか、どうなって欲しいのか理解して実装を始めよう
- 余白、文字サイズ、色、配置、コンテンツ内容、それぞれの意図はなんであるか理解しよう
保守と開発的な目線
- MDNで非推奨、廃止になったデザインでないか確認しよう
- PCとSPでのHTML構成差分が無いか、確認してから実装しよう
- SPは何px以下からか、タブレット時の挙動がどうなるのか確認しよう
- jsやCSSで簡易的に実装ができ、挙動に無理がないかチェックしよう
- ChatGPTなどのAIだけで挙動が実装できる js だと保守もしやすいのでおすすめ
ロジック的な目線
- 0件時、膨大な件数時、表示ロジックなどのシステム的例外デザインがあるか
- サイトで利用するカラーリストから外れていないか
-
画像のアスペクト比の指定があるか、システム的な
validationも考慮されているか - jsやHTMLパーツの書き換えで意図しないリクエストが送信できるような設計になって居ないか
ビジネス的な目線
- KPIを達成する事に適したデザインであるか
- 既存パーツを阻害し、売上既存に繋がって居ないか
- ページ全体を見まわし、ユーザーが取るべき行動が明確になっているデザインか
- 想定デバイスでファーストビューに魅せたいコンテンツが入るか
- ターゲットユーザーに沿ったデザインであるか
レンダリングスピード
- レンダリングコストの高くなる、不要なDOMパーツのネストやロジックが無いか
- レンダリングコストが高い場合、viewのフラグメントキャッシュが可能か？
- 利用する画像のサイズは適切か？次世代フォーマット(webp)などに圧縮したか
- LCP（最大コンテンツ）となるのはどのパーツか、読み込みの最適化はできているか
SEOや計測の観点
- イベントの設置をする場合は各パラメータ、計測と改善を行えるか
- SEO的に評価されやすい構造か（JSの非同期テキスト埋め込みなどを避ける）
- 構造化マークアップ可能な構成か