
コーディング作業
ホームページ制作におけるコーディングとは、デザイナーが作成したWebデザインを元にデザイン通りにブラウザ上で表示させる作業です。
具体的にはHTMLやCSS、JavaScriptやjQery、PHPといったソースコードを記述していく作業となります。
ヘッダーロゴをはじめ、ナビゲーションメニューやトップ画像、コンテンツ内の画像やテキスト、サイドバーやフッターなど、
それぞれのパーツがデザイン通りの位置に配置されるように設定します。
また、各パーツの幅や高さの大きさ、文字色や枠線などの配色などもデザイン通りになるようにコーディングします。
コーディング作業の流れ

ホームページ制作では、まずデザイナーがページをデザインし、次にコーダーがHTMLやCSSなどのコードを使いコーディングしていきます。
内容としては、トップページやサブ(下層)ページのデザインをWeb上で表示できるように専用のソースコードで記述していきます。
①デザイナーからデザインを受け取る
デザイナーはクライアント様と綿密なヒアリングをおこない、イメージ通りのデザインを完成させます。 そして、その完成したデザインをコーダーが受け取りコーディング作業をおこないます。 その際、デザイナーとスライダーなど動きのある部分について打合せをしながら完成イメージの確認します。 |
![]() |
②デザイナーとレイアウトや動作の確認
![]() |
コーディング作業に入る前に、まずはデザイナーとレイアウトの確認やスライダーなど動きのある部分について、打合せをしながら完成イメージの確認をおこないます。 静的なデザインを動的なものにするためにデザイナーから詳しくイメージを伝えてもらいます。 ナビゲーションメニューは固定なのか追従タイプなのか、ヒーローヘッダーはどのような動きを加えるのか、スマホメニューはどのような開き方をするのか、など動きのある要素を重点的に確認します。 |
③コーディング作業
コーディングはサイトを制作する上でデザインと共にとても重要な作業といえます。 デザイン通りの色合いや装飾が施されているのか、コンテンツの位置はちゃんと配置されるのか、イメージ通りにアニメーション効果が発揮されるのかなど、プログラミングを駆使してWEB上にしっかりと表示させなければなりません。 HTML & CSS、Javascript、jQuery、PHPなどのプログラミング言語を使用して細かな作業をすすめるため多くの時間を必要とします。 |
![]() |
④デザイナーと完成ファイルを確認
![]() |
コーディング作業中はもちろん、コーディングが完了したらデザイナーに仕上げリをチェックをしてもらいます。 また、クライアント様とも連絡を取りイメージ通りに仕上がっているかどうか確認をいたします。 最終的にご納得のいく内容であれば、制作ファイルをクライアント様のサーバーへアップロードさせていただきます。 |
⑤完成データファイルをサーバーにアップロード(納品)
仕上がった完成データファイルは、一旦ローカル環境にてクライアント様にデザインと動作を確認してもらいます。 その後、最終的に問題がなければデータファイルをクライアント様のサーバーにアップロードさせていただきます。 アップロードした時点においても、もう一度Web上での実際の表示をご確認いただき、ご納得いただければホームページの納品とさせていただきます。 |
![]() |
オリジナルコースでの例
完成形のテンプレート(雛形)コースの場合ならコーディングも短期間で完了します。
しかし、オリジナルコースの場合は全く新しくデザインされたものをコーディングするので手間と時間がかかります。
そのため、テンプレートコースと比べると納期も大幅に違ってきます。
主なコーディング作業の内容 | |
---|---|
・HTML & CSS ・JavaScript ・jQery ・PHP |
・デザインのレイアウト ・ヒーローヘッダーのオートスライダー ・グローバルメニューの追従機能 ・画像やテキストのフェードイン、フェードアウト ・画像などのズームイン・ズームアウト ・予約やお申込ボタンの追従機能 |