Webサイト制作のコーディング作業ってなにするの?

コーディング
まるこ
まるこ

パソコンやスマートフォンで、Webサイトを閲覧する機会は、日常的に多くあると思います。
ボタンを押すと他のページへ遷移する、メニュー画面が開閉する、画面の読み込み中に画像がくるくると回る、トップページが動画になっているなど、様々な要素がサイト上にはありますよね。
これはWebサイト制作の「コーディング」という作業の中で、各パーツ(ボタン・画像など)に機能を与え、適切に処理を行うように指示しているからです。

本記事では、Webサイトが公開されるまでの工程と、その中の「コーディング」について、コーダーである筆者が簡単に解説しています。

Webサイト制作の工程は、大きく4パートに分かれている

まずは、Webサイトがどのように作られているか、見ていきましょう。
簡潔に制作工程をあげると、4つのパートに分かれています。

パート① 企画・設計

  • 企画:サイトの目的・掲載内容を明確にする
  • 設計:各ページの構造を決める

まず始めに、制作するWebサイトの目的を明確にし、掲載内容を考えます。ここがWebサイト作成の最も肝となる部分です。
そして、Webサイト全体の構成が固まったら、実際に「どのページに何を掲載するか」を考え、構造を決めます。

パート①は、主にプロジェクトマネージャー、Webディレクターが担当します。

パート② 制作

  • 設計をもとにサイトのデザインをする
  • デザインをもとにサイトを構築する(コーディング)

パート①で出来あがった構造をもとに、サイト全体の統一感が崩れないようにデザインします。
近年は閲覧端末が多様化(パソコンやスマートフォンなどのモバイル端末)しているため、各端末で最適に表示されるようにデザインする必要があります。
デザインが完成したら、デザインをWeb上で正しく機能するように、コーディング(HTMLやCSSを記述)を行います。コーディング完了後、必要に応じてCMSなどのシステム(WordPressなど)へ組み込みをします。

パート②は、主にWebデザイナー、マークアップエンジニア、フロントエンドエンジニアが担当します。

パート③ テスト

  • コーディングデータをテストサーバーにアップロードする
  • 様々な端末やブラウザで動作環境

パート②のデータをテストサーバー上にアップロードし、パソコンやモバイル端末、各ブラウザ(Google Chrome・Microsoft Edge・Safari等)で正しく動作するか、表記に不備がないか等を確認します。
公開後に問題が起こらないように、あらゆる環境でチェックを行い、修正とチェックを繰り返します。

パート③は、主にフロントエンドエンジニアが担当します。

パート④ 公開

  • 本番サーバー上に、データをアップロード
  • 公開したWebサイトの動作確認

パート③まで完了したら、いよいよWebサイトの公開を行います。
Webサイトは公開がゴールではなく、パート①で明確にした目的を達成するために存在していますので、公開からがスタートです。
公開後は定期メンテナンスやコンテンツの更新など、正しく運用を行うことが大切です。

コーディングってなんだろう?

さて、ここまででWebサイト制作の流れは、なんとなくわかっていただけたかと思います。
次は主に筆者が担当している「コーディング」について、もう少し詳しく説明していきます。

コンピューターが理解できる言語を使用して、コードを書く作業

コーディングをひと言で表すと、「コンピューターが理解できる言語を使用して、コードを書く作業」です。

ご承知の通り、コンピューターは人間の言葉がわかりません。
「おはようございます。今日はいい天気ですね。」というのを見て、人間なら文章だと認識できますが、コンピューターには文章なのか画像なのかすら判断がつかず、「???」となってしまいます。

そこで、コンピューターが理解できる言語を使い、「これは画像である」「これは見出しである」といった指示を出し、人間がコンピューターに処理してほしい内容を、伝える必要があるのです。

コーディングで使用する言語は2種類ある

ちなみにコーディングで使用する言語には、以下の2種類があります。

  • マークアップ言語:文書構造を指定する言語(HTML等)
  • プログラミング言語:コンピューターに計算処理を指示し動かす言語(PHP、Java Script、Python、C++等)

Webサイトやアプリケーション開発は、「フロントエンド」と呼ばれるユーザーの目に見える部分を担当する人と、「バックエンド」と呼ばれるサーバーの処理や保守・運用を担当する人にわかれて行われます。
コーディングを行う際は、フロントエンドを担当する人はマークアップ言語を、バックエンドを担当する人はプログラミング言語を主に使用して作業します。

[余談] コーディングとプログラミングの違い

「プログラミング」という言葉を聞いたことがある方は多いと思います。
プログラミングとは、「プログラムを設計~完成まで行う工程全般」を指します。
コーディングとプログラミングが同じものである、という認識をされる場合がありますが、コーディングは「プログラミング工程の中のひとつ」にあたります。

デザインをブラウザで「見える化」する

ここまで、コーディングの概要についてお話ししてきました。
次は、前述した「フロントエンド」の部分に焦点を当てて、デザインがブラウザで見られるようになるまでの過程を、解説していきます。

Webサイトは様々な機能をもった要素の集合体

冒頭でも述べたように、Webサイトは様々な機能をもった要素(ボタン、テキスト、画像など)が集まってできています。完成したデザインを、各要素が正しい機能を持つように再現する、これがコーディング作業で一番大切なポイントです。
コーディングには、以下の役割を持った言語を使用して実装していきます。(※一部、アニメーション等の処理にJava Scriptなどのプログラミング言語を使用します。)

テキスト(HTML使用)

Webページのコンテンツ構造・構成を記述する
(タグを使用して見出し、画像、段落、ボタン等を定義する)

装飾(CSS使用)

HTMLで記述された要素を修飾する
(テキストや画像の配置を指定、フォントのサイズや色変更、要素の上下左右に余白をつける等)

HTMLを使用して、Webページの構造・構成をコンピューターに伝え、CSSを使用して見た目を整える。この作業を経て、わたしたちが普段目にしているWebサイトは出来あがるのです。

コーディング作業をスムーズに行うために

コーディングは地味な作業

コーディングというのは、コードをひたすら打ち続けるという、とても地味で手間のかかる作業です。
ページ数が多くないWebサイトであれば、それほど時間はかからないかもしれません。
しかしWebサイトの中には数10ページ、大規模になると数100ページになるものもあり、ページ数が多くなれば、Webサイトの構成を把握するのに時間がかかってしまいます。

また、Webサイト制作には必ず納期(公開日)が設定されています。
制作工程の中でも終盤にあるコーディングは、特に納期との闘いが想定されます。(工程遅れの帳尻を合わせなくてはいけなくなったりなど。)
工程の順番が回ってきたときに慌てないためにも、作業前にできる準備はしっかりしておきます。

コーディングルールの設定

コーディングはひとりで行うとは限りません。また、作業の途中でも、デザインの変更やテキストの書き換えなど、修正も多く発生します。その際に、何もルールを設けずに作業を行っていると、例えひとりで作業をしていたとしても、スムーズな対応は難しくなります。

特に複数人で作業を分担する場合、各個人が独自のルールでコーディングを行うと、品質が下がり保守性も悪くなってしまいます。あらかじめ共通のルールを設定しておけば、誰でも理解できるコードを記述する、コード記述者以外の人でも修正対応をスムーズに行えるなど、作業が円滑に進みます。

コーディングルールは、会社やチーム、プロジェクトごとに設定されます。
例)コーディングスタイル(命名規則、コメント文の書き方、コードの改行位置等)、禁止事項、推奨事項等

コーディング作業の流れ

工程の順番が回ってきたら、コーディングルールに則って、以下の手順でコーディング作業を行います。(作業者によって、やり方や手順は多少異なります。)

  1. デザインの確認(コーディング方法を決める)
  2. コーディングする内容を保存するファイル・フォルダの作成
  3. 画像やフォント等のデータを格納
  4. HTML、CSS(Java Script)の記述
  5. コードエラーチェック
  6. 修正
  7. 完了

手順7まで完了したら、制作工程で紹介したパート③のテストに移ります。テスト段階で不備があれば、修正を行います。

各制作担当者とのコミュニケーションが大事

デザインは「余白が100ピクセル」「ボタンのカラーは赤」など、ある程度規則性をもって配置や配色がされています。しかし敢えて1箇所だけ、規則通りではない配色や配置を行っている場合などもあり、事前に仕様について共有されていないと、コーディング段階で戸惑う可能性があります。

コーダーが自己判断で、デザインの変更はできません。デザインを忠実に再現するためにも、ディレクターやデザイナーとのコミュニケーションはとても大切になります。

まとめ

今回は、コーディング作業について解説してきました。
コーディングは地味な作業ですが、Webサイトが世の中に無事公開されたときの喜びはひとしおです。
本記事で、Webサイトの制作過程が少しでも伝われば嬉しいです。

Wepotは、ディレクション、デザイン、イラスト、動画編集、コーディングなど、幅広い分野を担えるメンバーで構成されており、お客様の目的に則した制作物のご提供が可能です。
Webサイトの制作等を検討している・相談してみたいなどございましたら、お気軽にお問い合わせください。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
まるこ

まるこ
コーダー

まるこ
コーダー

想いの詰まったWebデザインを“カタチ”にするコーダーとして、Webサイト制作の一端を担っています。「誰が見てもわかるコード」を念頭に置き、品質・保守性を重視して制作しています。趣味はサッカー観戦。好きな色はトリコロール!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。