コーディングとは？

コーディングとは？WEBサイトの公開に必要な業務を解説

WEBサイトの制作で、ディレクターはお客さんとのやりとりや指示出し、デザイナーはWEBサイトのデザインといったように、それぞれの業務が何となくイメージつくと思うのですが、

それ以外にも、コーダーという職種があり、コーダーは何をやっているのか、あまりイメージが湧かないと思います。

特に、デザインとコーディングは一緒の業務として捉えられがちですし、一貫してやっている企業さんもありますが、具体的には別物です。

• デザイナーは、サイトの表示をデザインする
• コーダーは、デザインをコードに置き換えてWEBブラウザ上で見れるようにする

簡単にいうと、作業の違いは上記のとおりです。

「WEBブラウザ」とは、WEBサイトを閲覧するためのツールで、あなたが今見ているサイトも「WEBブラウザ」上で表示されています。

コーダーが具体的にどんなことを業務として行なっているのか、書いていきます。

コーディングに必要なツール

コーダーは下記のようなツールを使って業務をしています。

1. マークアップ言語やプログラミング言語
2. コードを書くために必要なエディタ
3. 画像圧縮ソフト
4. サーバーにデータをアップロードするためのFTPソフト
5. WordPressなどのCMS

マークアップ言語やプログラミング言語を使って、ブラウザ上に反映させていきます。
主にWeb制作でよく使われる言語を紹介します。

HTML

テキストや文書を記述するための言語です。
「ハイパー・テキスト・マークアップ・ランゲージ」の頭文字をとってHTMLです。
HTMLはファイルです。「.html」という拡張子のファイルが基本ですが、「.php」のファイルに書かれることもあります。

HTMLでは、下記のようなことができます。代表的なものを挙げます。

• 文書を表示させる
• 改行させる
• 他言語のファイルを読み込ませて、拡張させる
• 画像や動画を読み込ませて表示させる
• 他ページにリンクさせるテキストやボタンを表示させる
• サイトのタイトルやディスクリプションといった、ページ内に表示されない部分の設定（SEO対策の基本）
• その文言が何を指すのか？を表すためのタグを設定（SEO対策の基本）

CSS

テキストや背景に装飾をつけたり、ホバーアクション（ボタンなどの上にカーソルを乗せた時の動き）をつける時に使います。
HTMLに直接CSSの記述をすることもできますが、基本的にはCSS用のファイルを作ってHTMLファイルに読み込ませます。

CSSでは、下記のようなことができます。

• テキストや背景、ブロックに色・線・影・明るさ・グラデーションなどなどの色々な装飾
• ホバーアクション（ボタンなどの上にカーソルを乗せた時の動き）やクリック時の動きをつける
• 動きのタイミングの調整
• 表示させる物体（オブジェクト）の位置を調整
• 表示させる物体（オブジェクト）間の余白の調整
• テキストに適用するフォントの種類・サイズ・文字間の余白・行間の余白
• 背景に画像を設定する

JavaScript

動きをつけるときに使うプログラミング言語です。
HTMLに直接JavaScriptの記述をすることもできますが、基本的にはJavaScript用のファイルを作ってHTMLファイルに読み込ませます。

JavaScriptでは、下記のようなことができます。

• アコーディオン
• モーダル
• スライド
• フェードイン・フェードアウト
• ローディング画面
• タブ切り替え
• 慣性スクロール
• 3Dアニメーション

このようにアニメーションや動きをつけることが、主な役割です。それぞれの動きの概要については、今回は割愛させていただきます。

動きをつける理由は、「使いやすさの向上」が主な目的となることが大半ですので、動きをつけすぎると良いというわけではなく、あえて動きをつけないという考え方も大事だったりします。

Web制作の場合、JavaScriptをそのまま使わずに、JavaScriptを簡単に書ける「ライブラリ」を使用する場合も多いです。
ライブラリには代表的なものとして、「jQuery」「GSAP」があります。

簡単に書けるだけでなく、様々なブラウザに対応しているということもメリットですが、最近では、JavaScriptそのままでも、そこまで問題はないようです。（前提として、CSSもJavaScriptも、ブラウザによって挙動が違うことがあります。）

PHP

PHPは主にシステムに関わるプログラミング言語です。
システムに関わらない表示のみのサイトに関しては、PHPが使われないこともあります。

世界的に使われているCMSのWordPressでは、PHPが使われています。

CMSとは「コンテンツ管理システム」のことで、コーディングを介さずに、Webサイトにテキストや画像を入れ込んでサイト表示させたり、それらを管理したりできます。
この記事も、CMSでテキストを入れ込んで、公開しております。

PHPでは、下記のようなことができます。

• データベースとのやりとり
• HTMLの拡張
• CMSに入れ込んだデータの表示

データベースのやりとりは、例えば、「お問い合わせのフォーム」に入力した内容が、相手に届くような機能が分かりやすいかと思います。
フォームに入力した内容がデータベースに格納されて、それが相手に届く、みたいなイメージです。

HTMLの拡張は、一部の共通テキストを、変数として入れる、などです。その変数にテキストを入れてあげれば、共通部分は全てそのテキストになります。

CMSに入れ込んだデータの表示については、例えば、WordPressの管理画面で打った記事が、整ったかたちで表示されるようなシステムのことです。

エディタ

エディタとは、コードを書く画面のことです。

メモ帳のアプリとかも、エディタの一種ですが、コーディングに特化したエディタが存在します。
「特化している」とは、コードを書いたときに自動的にコードを綺麗に整えてくれたり、少しコードを打ったときにコード候補を出してくれたり、それ以外にも色々あります。

おすすめのコードエディタは「VSCode」です。

画像圧縮ソフト

画像圧縮ソフトとは、その名の通り画像を圧縮させるツールです。

画像はデザインデータから書き出しを行うことがほとんどです。書き出しとは、デザインツールで加工されたりリサイズ（サイズ調整）された画像を、jpgやpngといった形式で保存することで、そのまま使うと容量が大きい場合があります。

容量が大きいと、ブラウザ上で表示させたときに、表示タイミングが遅くなってしまうので、画像を圧縮して容量を小さくする必要があります。

圧縮しすぎると、画像が粗くなってしまうことがあるので、注意が必要です。

FTPソフト

コーディングしたデータを、サーバーにアップロードするソフトです。

一般的には、コーディングはローカル環境、つまり作業者のPC内で行われるので、その状態だと外部のPCでは見ることができないです。

サイトとして公開するためにはサーバーにアップロードする必要があります。

CMS

CMSは、記事の更新をコーディングなしで行うだとか、システムを組み込みたいサイトの場合、使われます。

CMSがなくてもサイトとして公開することができますし、CMSなしでもシステムを組むということはできるのですが、CMSを使用すると、簡単に実装できたりします。

WordPress、Movable TypeなどのCMSがあります。

コーディング作業の流れ

一般的なコーディングの流れを解説します。

1. デザインのデータを受け取る
2. コードエディタでコードを書き、デザインを再現する
3. 一通り終わったらテストサーバーにアップロード
4. 各種のブラウザで確認
5. 本番サーバーにアップロードして公開

デザインのデータを受け取る

デザインのデータは、使用されたデザインツールによって異なります。XDやFigmaが最近だと多いみたいですが、PhotoshopやIllustratorなどのツールも使われることがあります。

コーダーとしては、それぞれのデザインツールの「画像書き出し方法」や「デザインから情報を取得する方法」などを知っておく必要があります。

デザインから取得する情報としては、物体（オブジェクト）間の余白だったり、フォントの種類・サイズ・文字間行間の余白、色のカラーコード、クラデーションのカラーコードと方向などなど、コーディングデータに入れ込むべき情報があります。

コードエディタでコードを書き、デザインを再現する

この作業がおそらく一番時間がかかります。

デザインを再現してブラウザに反映させるために、コードを書いていきます。
コードの記述量は少ない方がベターです。

一般的には、コーディングはローカル環境で行います。

一通り終わったらテストサーバーにアップロード

コーディング作業が終わったら、テストサーバーにアップロードします。

サーバーは「テストサーバー」「本番サーバー」と分かれることが一般的です。
本番サーバーで公開するサイトが、実際に検索で引っかかったときに見れるサイトになります。

分ける理由としては、本番として公開するサイトに崩れが出てしまわないように、テストのサーバーで確認する必要があるからです。

「ローカルで確認したら問題ないのでは？」と思うかもしれませんが、サーバーにアップロード後に出てくる不具合というのもあったりします。

また、他の人が確認する（コーダーが作業後にディレクターやデザイナーが確認する）ときもテストサーバーを使い、デザインデータで再現できない部分の認識の誤差がないか、リンク先は合っているかなどを確認するという目的もあります。

不具合や認識誤差を潰した後に、本番サーバーにアップロードすることが基本です。

各種のブラウザで確認

テストサーバーにアップロード後、サイトを確認します。

主要なブラウザは下記です。

• Google Chrome
• Safari
• FireFox
• Microsoft Edge

SafariはMacのみ、Microsoft EdgeはWindowsのみとなります。
最近までInternet Explorerというブラウザもありましたが、サポート終了のためブラウザ確認は必要ないかと思います。

もしブラウザ不具合があれば、そのブラウザに対してのみCSSやJavaScriptを当てるといった方法もあるので、対処して不具合を潰します。

本番サーバーにアップロードして公開

本番サーバーにアップロード後、公開します。

これでWebサイトとして公開されます。公開前にセキュリティのチェックをするために脆弱性診断を行う場合もあります。

公開後は、Googleのクローラーにサイトを認識させたいので、サイトマップというファイルを作って、サーチコンソールというツールで送信します。

まとめ

少しでも、コーディングとは何か、が伝わりましたでしょうか？

なかなか分かりづらい作業ではあるのですが、デザインを作ってすぐ公開！ではなく、その後にも作業があることを知っておくと、もし制作を依頼したいときにもスケジュールのズレなどがなくなると思います。