コーディングとは？ホームページ制作に欠かせない作業「コーディング」について。

コーディングとは？

ホームページ制作を行う上で、欠かせないフロー「コーディング」。

今回はこの「コーディング」に焦点を当てた記事を作成しようと思います！

ホームページ制作のフローをおさらい

まず初めに、ホームページ制作のフローからおさらいしてみましょう。

まずご依頼があった際に私たちが初めに行うことは、「お客様のご要望のヒアリング」です。

最初のヒアリングが終わったら、ようやく制作作業に着手できます。

制作作業は大きく分けて、下記のようなフローがあります。

• WEBデザイン
• コーディング
• WordPress導入
• サーバー・ドメインの準備
• 公開

の５段階です。

コーディングとは何をしているの？

ホームページをブラウザ（Safari、Google Chromeなど）で表示するには、プログラミング作業が必要です。

簡単に言うと、この「プログラミング作業」がコーディングに該当します。

WEBデザインが完了した段階で、公開まであと少しのように感じますが、実際はコーディングのほうが時間がかかります。

WEBデザインとコーディングは違う作業

「デザイン」はあくまで、「画像」を作る作業です。

しかしホームページは画像とは違います。

クリックすると違うページが開きますし、画面の幅によって改行位置が変わったり、写真の横幅が変わったりと、

ただの「画像」では表現できないことが盛り沢山です。

ソラノデザインは個人事務所なので、デザインからコーディング、公開、SEOまで全て私がやっていますが、

通常WEB制作会社では分業体制で、デザイナーがデザインを画像で作った後に、その画像を見ながらプログラマーが「コーディング」を行うと言ったフローが主流ですね。

これが実際のコーディングの画面です。

私も初心者の頃、初めてこの画面を見たときは、「こんなのできない」と思ったものです。

PhotoShopやXDというソフトで画像を作成するのと、コーディングするのは訳が違いますね。

コーダーの腕によってホームページに変化が

コーダーとはコーディングを行うプログラマーを指します。ややこしいですね。

同じホームページをコーディングする場合でも、コーダーの腕によってホームページは大きく変わります。

目立つ部分では、アニメーションのセンス、表示速度、検索順位などに大きく差が出ますね。

ホームページを開いた際に、「このサイト、デザインは綺麗だけど表示が重たいな」「このサイト、いいサイトなのになんで検索順位がこんなに低いんだろう」といった経験は、皆さんもあるのではないでしょうか？

（検索順位については公開後1年ほど立たないと上位にはくいこめないので、一概には言えませんが…）

コーダーの腕でここまでホームページが左右されてしまうのは、

最もホームページに採用されているプログラミング言語、

「HTML、CSS、PHP、JS」の４つが、ある程度下手なコードでも表示されるよう、規約が優しい事も原因のひとつです。

つまり「少し間違っていても、エラーが出ない」プログラミング言語なんですね。

規約が優しいのは、コーディングを勉強し始めた初心者のコーダーさんにはありがたいですが、

逆に「深く勉強しなくても、とりあえず動くホームページができてしまう」といったデメリットもあります。

コーディングを仕事にしてお金を得る以上、「ただ表示されてるだけ」のプログラミングを行うのではなく、「目に見えない部分にまでこだわった」プログラミングが重要です。

また、コーダーの知識の量にも、コーディングの質は左右されます。

画像の圧縮方法、hタグを利用したSEOの知識、マークアップ最適化や構造化マークアップの知識….など、例をあげればキリがありません。

その反面、勉強することが多い「コーディング」と言う分野は、面白い分野と言えるでしょう。

簡単に上手くいってしまう仕事より、達成するのが難しい仕事の方がやりがいが出ますからね。

もしこの記事をご覧になっている方で、コーディングに興味がある方が居ましたら、

「BEM」「構造化マークアップ」「画像メタデータ圧縮」「着火タイミング」「非同期通信」「タスクランナー」「node module」などの単語を是非検索してみてください！