ウェブ
2026.02.24
ウェブサイトのコーディング -ウェブサイト制作の裏側 #04-
「ウェブサイトのコーディング」
をテーマにお話しさせていただきます。
まだ第一回〜第三回のコラムを読まれていない方は、こちらの
ウェブサイト制作の裏側 第1回 ウェブサイトと印刷物の違いウェブサイト制作の裏側 第2回 ウェブサイトの設計
ウェブサイト制作の裏側 第3回 ウェブサイトのデザイン
からお読みいただけますと、今回の内容がよりわかりやすくなると思います。
今回のテーマとなる「コーディングフェーズ」ですが、
ウェブサイト制作全体のプロジェクトの中では4つ目のステップとなります。
ステップ3で制作したデザインに従って、コーディングを行うフェーズです。
「デザイン」とは違い「コーディング」というのは少し耳慣れない言葉かもしれません。
コーディングというのは、
のことです。
なお、「ブラウザ」というのはedgeやChrome、Safariなどのインターネットを見るためのアプリケーションのことです。
デザインの状態では「平面的な見た目」を定義しただけの状態ですので、
「ページ全体が一枚の大きな画像のかたまり」になっているような感じです。
この状態から、
「メニューボタンをクリックすると、メニューが表示される」
「メニュー上のテキストをクリックすると、●●のページに遷移する」
「画像が数秒おきに自動的に切り替わる」
「スクロールしてページを読み進めると要素がふわっとフェードインする」
といった動きや演出を組み込み、ブラウザで閲覧できるようにする作業が「コーディング」で、
その工程のことを「コーディングフェーズ」と呼びます。
建築に例えると、
設計図を書くのがデザインで、その設計図を元に実際に工事をして建物を建てるのがコーディング という感じです。コーディングという作業を経てはじめてウェブサイトとして完成することになります。
コーディングとはその名の通りコードを書く作業です。
コードはテキストで記述します。
ブラウザ上では色鮮やかなウェブサイトですが、色やレイアウトも実はすべてテキストで記述されています。
たとえば望月印刷ウェブサイトのTOPページのコード（の一部）はこんな感じです。
コーダー（コーディングを行う担当者）は、デザイナーが作ったデザインを紐解き、
ウェブサイトとして動くかたちになるように、このようにデザインをコードに変換していきます。
コーディングのポイント
特に重要なポイントとして、次の5つがあります。
- ・デザインを正確に再現する
- ・スマートフォン対応（レスポンシブ対応）
- ・ページの表示速度を意識する
- ・複数のブラウザに対応した記述
- ・読みやすいコードを書く
デザインを正確に再現する
デザイナーはデザインする際に1ピクセル単位でこだわります。
実際に、1ピクセルのズレで印象が大きく変わってしまうこともあります。
コーディング時にデザインの再現ができていないと、せっかくのデザイナーの細部のこだわりが無駄になってしまいます。
コーダーはデザインを可能な限り正確に再現することを目指す必要があります。
スマートフォン対応（レスポンシブ対応）
ウェブサイトへのアクセスにおけるスマートフォン（モバイル）とPCのブラウザシェアは、
世界・日本ともに2010年代後半に逆転し、現在はスマートフォンが圧倒的優位（約6割以上）の状況です。
そのため、近年のウェブサイトではスマートフォン対応が必須になっています。
（場合によってはスマートフォンサイトしか作らないというケースも見られるようになってきました）
ページの表示速度を意識する
綺麗で大きなサイズの画像をたくさん使用したり、派手な演出を組み込んだりすると、
ページのデータ量が肥大化してしまい、ページが表示されるまでの時間が長くかかってしまう場合があります。
ページが表示されるまでの待機時間が長いとイライラしますし、せっかくサイトを見ようとしてくれていたユーザーが我慢できずに離脱してしまうこともあります。画像を軽量化したり、コードの書き方を工夫したりなど、ページの表示速度を意識してコーディングすることも大切です。
複数のブラウザに対応した記述
コードに記述された命令文をどう処理し、どういうかたちでページとして表示させるかはブラウザに依存します。Chromeでは綺麗に表示されていても、Safariではレイアウトが崩れてしまうというケースもあります。メジャーなブラウザについては、どのブラウザで閲覧された場合も正常表示されるようにコードを書くことが必要です。
読みやすいコードを書く
将来的な改修のことも考えて、自分以外のコーダーがみても理解できるように、
わかりやすく読みやすい形式でコードを書くことが大切です。
このようなポイントに注意しつつ、コーディングを進めていきます。コーディングが完成したあとは、いきなり本番環境のウェブサイトに公開するのではなく、外部からは見られないようにパスワードで閲覧制限をかけたテストサイト上でクライアントにチェックをいただき、必要があれば修正対応を行います。
テキストのチェック、画像のチェック、リンクのチェックなど、ページ上で行えるチェックのほか、ページタイトルに間違いはないか、ディスクリプションは適切か、OGPやファビコンはきちんと設定されているか、グーグルアナリティクスの計測タグは忘れずに埋め込まれているかなど、ソースコード上での確認も必要になります。これらの最終チェックを経て、「この内容で公開してOK」と承認をいただいてはじめて公開対応へ進むことができます。
このような制作フェーズを経て、ウェブサイトは公開することができます。
先日、武蔵一宮 氷川神社さまのウェブサイトを弊社制作でリニューアルさせていただきました。
ぜひご覧ください。
https://musashiichinomiya-hikawa.or.jp
ウェブサイト公開時の注意点については、次回くわしくお伝えさせていただきます。
いかがでしたでしょうか。
ウェブサイトのコーディングについて、少しでも理解を深めるお役に立てていたら嬉しいです。
ウェブサイト制作はぜひ望月印刷におまかせください。
ご相談は無料です。お気軽にお問い合わせください。
