ラムネットコラム
【ホームページ制作】
コーディング・フロントエンド開発とは
ホームページ制作を依頼すると、大抵最初に見積もりを出してもらうかと思います。いざ見積書を見てみるとコーディング（＝フロントエンド開発・プログラミング）と書かれた項目が入っていますが、「いまいち相場や何をするものなのか内容が分からない…」ということもあるかと思います。WEB業界の事を知らなければピンとこないのも当然です。そこで、コーディング・フロントエンド開発・プログラミングについて分かり易く解説していきます。
コーディング・フロントエンド開発・プログラミングとは
呼び方はWEB制作会社や担当者によって変わりますが、本編では”コーディング”と名称を統一します。
コーディングとはデザインを元にHTMLやCSSといったプログラミング言語を用いてコンピューターが理解できるように記述したり装飾を施すことを指します。
HTMLとは
HTMLとは「HyperText Markup Language」ハイパーテキストマークアップラングエイジの略省であり、訳すと「文字列に識別用の目印を付ける言語」というニュアンスになります。
（例）
＜dl＞
＜dt＞りんご＜/dt＞
＜dd＞色鮮やかな赤色でとても糖度が高く甘い。＜/dd＞
＜/dl＞
上記はりんごの説明をしていますが、コンピューターに理解できるようHTMLを用いて記述しています。
まず＜dl＞で定義をしますと宣言し、＜dt＞の中が定義する用語、＜dd＞の中がその内容・説明になっています。
＜dl＞や＜dt＞などのことを”タグ”と呼び、適切なケ所で適当なタグを使用することが大切で、タグは100種類以上にのぼります。
CSSとは
CSSとは「Cascading Style Sheets」カスケーディング・スタイル・シートの略称です。
HTMLはコンピューターに理解してもらう為の言語ですが、CSSはWEBサイトを閲覧する人に向けて視覚的にデザインする為の言語です。
（例）
CSS無し
↓↓↓↓ 上記に対してCSSで装飾を施すと以下のようになります。↓↓↓↓
CSSの記述例としては、
h3{
font-size:24px;
background-image: center/contain no-repeat url(img/index/sampleimage.png);
color:#fff;
width:150px;
margin:30px auto;
text-align:center;
}
上記はほんの一部ですが、文字の大きさや背景の画像、配置・横幅などCSSの言語で書かれています。
”font-size”などは見ての通り文字の大きさを指定する”プロパティ”と呼ばれるもので、このようなプロパティがCSSでは200個以上存在します。
コーディング費用の相場
コーディングのみの費用相場はトップページで10,000~50,000円、下層ページで5,000~25,000円ほどです。
相場の幅が広い理由としては、最近では個人でコーディング業務を請け負う方も増えてきているので、企業よりも安い価格でコーディングを依頼できる場合があるからです。
コーディングは企業と個人（フリーランス）どちらがよいのか
コーディング費用の相場がピンキリであるように、それぞれの能力差もピンキリです。
企業では研修の実施や社内でのルールなどもありますので、最低限の技術力は保証されています。しかしそれに伴って費用相場は必然的に高くなってしまいます。
一方、個人（フリーランス）の場合には費用相場は平均より安くなる傾向にありますが、技術力の保証がありません。しかし、技術力のある個人（フリーランス）のエンジニアは一定数存在しますので、見極めることができると、安い価格でクオリティの高いコーディングを依頼することができます。
見極めるポイントはそのエンジニアに自分のWEBサイトがあるかとどうか、そしてそのWEBサイトが昔ながらの古い仕様ではなく今の主流のWEBサイトであるかどうかです。個人（フリーランス）のエンジニアの良いところは自由に新しい技術を導入し、常に追求し続けることができるところですので、それをしっかり活用しているプログラマを探しましょう。
コーディングを学ぶには
コーディングを学ぶ方法は大きく分けて二つあります。
①本やWEBサイトを使い独学で学ぶ
②スクールを利用する
本やWEBサイトを使い独学でコーディングを学ぶ
本当に初めて勉強するとなると独学はオススメしません。コーディングにおいて基礎を学ぶところは最短ルートで済ませるべきだからです。本やWEBサイトを使っての勉強は、ある程度基礎ができてから更に技術力を磨くためにする学び方です。常に新しい技術が生まれる業種なので、もう既に１人前のエンジニアでも常に学び続けています。
スクールを利用してコーディングを学ぶ
コーディングを学ぶ為のとりかかりとしては、スクールを利用するのが最も有効な手段です。オンラインであれ対面であれ、スクールのカリキュラムを利用して、広く浅く素早く基礎を学べるスクールを選びましょう。基礎さえ習得できると、その先は独学でも技術を伸ばすことができます。
ホームページ制作においてのコーディング
ホームページを作成する上で、コーディングがどういったものなのか、費用相場や学び方などご紹介しましたが、いかがでしたでしょうか。
クライアントの方はホームページを制作するために最初にデザイン案を目にし、コーディングが完了したら、デザイン通りに納品されたWEBサイトを閲覧します。その為、デザインからHTMLやCSSでコーディングをする過程がどういったものなのか理解されにくいことがあります。WEBサイトを閲覧する一般ユーザーにも基本的にはコーディングされたソースコードを見られることはありません。ですが実は何百何千行ものソースコードをプログラミング言語を使いコーディングすることでデザイン通りにWEBブラウザに表示させ、コンピューターに認識させることができているのです。
少しでもコーディングについて知って頂けたら幸いです！
