Web制作のコーディングについて

2022年7月4日 13:13

コーディングは基本的に、デザイナーさんが作ったWebサイトのデザインを『ブラウザで表示させるため』にプログラミングする作業になります。

こちらも前回のデザインと同じように、具体的な作業内容を中心に、説明していきたいと思います。

①　作成前（事前準備）

コーディングの制作を開始する前に、前のフェーズの担当からいろんな情報を共有されます！

デザイナーからの引き継ぎ

・デザインデータ
　Adobe XD、Figmaで作成したデザインファイル（クラウド）
（もちろん今になっても AdobeのPhotoshopまたはillustratorで作成する会社もありますが、ツールについては別途紹介します）

・製作用素材
　基本的に上記のXDまたはFigmaからそのまま使うことが多いですが、
　別途で作成することもあります。

・動き（アニメーション）の共有
　XDまたはFigam内のプロトタイプ機能またはコメントに記述。
　（会社によって担当の違いがあり）

ディレクターからの製作情報と資料共有

・サイトマップ
直接コーディングとの関係性は少ないですが、サイトのページ構造が一目でわかる。

・ディレクトリ一覧
直接制作に関わっており、主に各ページのMeta情報が記載されております。

・その他
上記のサイト制作の基本の情報以外に、『GA/GA4タグ埋め込み』『相対/絶対パス』『SNS連携』『外部API連携』など必ずしもコーディングではない部分もありますが、こちらでは省きます！

②　作成中（実作業）

会社によって少し差があるかもしれませんが、基本的にはコーディングでHTML、CSS、JavaScriptのコードを書くことが主の仕事のなります。

具体的制作の業務は、

サイト制作

上記の①にあった『XD』または『Figma』のデザインデータを見てコンテンツ、サイズ、文字、画像などの組み方を考えながら作成します。

レスポンシブ対応

デザインフェーズでも出てきた画面サイズですが、
基本的にでCSSのmedia query を利用しで表示を変更してます。

@media (media-feature-rule) {
  /* CSS 規則をここに */
}

ディレクトリ構成（ファイル構造）

こちらは要件定義で作成した『ディレクトリマップ』を見ながらファイルの構造を見ながら組んでいきます。
合わせてmeta情報もこちらのファイルで確認しながら入れていきます！

<head>
  <title>World Wide Web Consortium (W3C)</title>
  <meta charset=utf-8" />
  <meta name="description"
        content="The World Wide Web Consortium (W3C) is an international community
        where Member organizations, a full-time staff,
        and the public work together to develop Web standards." />
</head>

その他

制作の会社によって多少の差はありますが、前項にあった『GA/GA4タグ埋め込み』『相対/絶対パス』『SNS連携』『外部API連携』などのタグ埋め込みます！

③　作成後（引き継ぎ）

会社によってこちらの作業担当が違う場合もありますが、前項のコーディング作業完了後、作成したコーディングデータをアップロードして、『テストページ』をサーバにサイトアップロードします。

アップロードしたテストページをそれぞれの関係者に展開して、『コーディングフェーズ』の確認を行います。

この段階ではシステムが入っていないので、データとやり取りがないサイトになり、主にサイトのデータやり取り以外の動き（アニメーション・サイト遷移など）の確認になります。

引き継ぐの際には、担当のシステムエンジニアに動的（システムやり取りある）になるところの共有する必要があります！

④　最終の作成物

コーディングでの作成物は基本的にコーディングしたデータの一式になります。

多くの場合は『GitHub』『FTP』などのツールを活用して作成したデータの管理を行いますが、ここではツールの紹介を省きます。

具体的な作成物はは、基本的には下記のようなもので、
①各ページHTMLファイル
②ページの表現を管理するCSSファイル
③ページの動作に使われたJSファイル
④上記以外に導入したプラグインと関連情報など（あれば）

もちろん会社によって、JavaScriptで作成したり、PHPで作成したりすることもありますが、ここでは一番スタンダードのやり方を例としてあげてます！

以上の準備と確認が完了したら、次は『システムエンジニア』に引き継ぐことになります。

この記事が気に入ったらサポートをしてみませんか？