2023年版 ウェブサイト制作のコーディングで納品前にセルフチェック

執筆・編集 衣川 知秀デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。

3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み:AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条:私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
執筆記事:記事一覧ページ
ウェブサイト制作のコーディングするにあたり正確なコーディングが出来いるか、制作担当者は不安に思うことはないでしょうか?
納品直前に不具合が見つかったりすると時間のロスもありますが、精神的にもしんどい思いをすると思います。
特にWordPressなどCMSを利用する場合、お客様がページを更新することもあり、制作者の想定外の入力をされる場合もあります。
例えば、想定外の画像サイズ、テキストの文字数など、そのような場合でも表示が崩れが無いようにする必要があります。
特に弊社の場合格安ホームページサービス提供しているので、お客様が更新することも多いので特に注意深く行う必要があります。
そのため、不具合を無くす為に納品前のチェックが大事になってきます。
具体的にどこをチェックしていけばいいのかチェックシート作成することで大きなトラブルは防ぐ事ができます。
一部ですがチェック項目をご紹介します。
チェック内容
リンク切れのチェック
ページ内リンク、外部リンク、メインスライド画像のリンク設定、アンカーリンクが意図した通りリンクしているか各ページをチェックします。
ヘッダーやフッター等の各ページ共通部分は1ページのみのチェックをします。
strong、em、引用、リスト、ハイライト、打消し線、上付き、下付きのタグの設定
コーディングをする時、ブラウザごとの差異を無くため、ブラウザがデフォルトで持っているCSSをリセットをおこないます。
リセットを行うと、テキストのイタリックやstrongなど太文字などが効かなくなるので必要に応じて再設定が必要になります。
ブログ記事(投稿ページ)の.aligncenter .alignright .alignleftの設定
ブログの投稿はお客様が特に行う作業になります。
画像を挿入する場合、画像を左寄せ、中央、右寄せを選択される場合があります。
その場合テキストの回り込みなどの設定が必要になります。
スマホ表示時のページ崩れをチェック
最近のサイトはレスポンシブウェブデザインが基本となります。
PCブラウザのチェックだけでなくスマートフォンやタブレットでの表示チェックが必要がなります。
スマホ表示時の電話番号リンクチェック
スマホ表示になった場合は電話番号には、電話が出来るようにリンクを設定する必要があります。
また、iPhone、Androidなど場合、電話番号にリンクを設定していなくても自動で作成する機能がありその場合、意図しないaタグが入る為、aタグの文字色やアンダーラインなどのチェックが必要です。
その他チェック項目
- メイン、フッターナビゲーションはWPデフォルトのcss名で作成
- メインのテキストカラーは、WPの追加スタイルで変更
- 背景色は、WPの追加スタイルで変更
- 基本の余白はbottomで設定
- 3段カラムなど表示数が減った時の処理
- h1が画像、テキストの場合の処理
- 左右画像のボックス設定
- 左右画像のボックス画像が小さい時の処理
- 左右画像のボックス画像が無い時のテキストの横幅を100%にする処理
- テキスト量が少ない時の処理
- テキスト量が多い時の処理
- ブログ記事h2からh6の設定
- ブログ記事挿入画像の .aligncenter .alignright .alignleftの設定
- ブログ記事の内と固定ページのリンクのアンダーライン設定
- ブログ記事と固定ページの内のテーブル設定
- ブログ記事と固定ページのstrong、em、引用、リスト、ハイライト、打消し線、上付き、下付きの設定
- お問い合わせの設定
- スマホ表示時のヘッダーロゴとバーガーメニューのチェック
- 404ページの作成
まとめ
一部ですがチェック内容をご紹介致しました。
実際チェック作業をやっている色々と気づく点が出てくると思います。
その都度必要なチェック項目を追加することで精度の高いコーディングが完成することが出来ます。
おすすめ記事
大阪のホームページ制作会社TREVOでは、最短2日で仮サイトを公開できるスピード対応や、SEO対策に強いオリジナルデザインの制作サービスを提供しています。
関連の記事
-
TREVOスタッフ
-
TREVOスタッフ
-
衣川知秀
-
WEB制作ツールAdobe「Flash Professional」が「Animate CC」に名称変更
TREVOスタッフ
-
アイキャッチ画像を設定して魅力的なホームページにしよう
TREVOスタッフ
-
板浪雅樹