デザインが完成したら次はコーディング、
ホームページ完成までを簡単説明

コーディングって何？

コーディングとは、マークアップ言語であるHTMLやプログラミング言語であるJavaScriptなどを使ってプログラムのソースコードを記述することです。

ホームページを制作するときは、ページのデザインを考えてからその通りにコーディングすることでWeb上に反映することができます。

皆さんが見ているサイトやホームページは必ずコーディングの作業を経てから公開されています。
ホームページ制作において、デザイン制作や画像撮影、取材/コピーライティングと並ぶホームページ制作工程のメインと言える作業です。

コーディングとプログラミングの違い 

「コーディングとプログラミングは何が違うの？」と思ったことがあるかもしれません。

簡単に説明するとコーディングはプログラミングの一部です。

プログラミングというのはプログラムを設計してコーディングし、きちんとプログラムが動くかテスト、修正をして完成させるまでのことを言います。

プログラマーと聞くとパソコンに向かってコードを書いてる人を思い浮かべますが、それはプログラミングの一部であるコーディングに過ぎません。 

デザインからコーディングへ

ホームページを制作するときは、まずどのようなデザインのページにするかを考えます。 

デザインを考える時はほとんどの場合、 デザインツールのPhotoshopやIllustratorを使います。

デザインからコーディングまで1人で行う場合もあれば、デザインはデザイナーに、コーティングはコーダーやプログラマーに、と分担することもあります。

デザインによってはコーディングしづらい場合もあるので、分担する場合でもデザイナーの人がコーディングの知識を少しでも知っていると良いですね。 

デザインのレイアウトを確認

まずデザインが完成したら大まかなレイアウトを確認します。 

どこがメインでどこがサブなのか、全体の構成を確認しておくとコーディングしやすいです。 

コーディングの最初、HTMLでテキストを構造化

まず、マークアップ言語であるHTMLを用いてコードを書いていきます。 

HTMLではホームページのテキスト部分を主に書いていきます。
テキストの中でどれがタイトルでどれが見出しか、そしてどれが本文かをタグ付けしていきます。

きちんとタグ付けをすることでSEO対策にもなるので、文章の構成をHTMLに反映させることはとても大切です。

HTMLの最初にはサイトのタイトルや紹介文などの情報も書いていきます。 
また、画像の挿入もHTMLで行います。 

次にCSSでページをデザインしていく

HTMLで文字の部分を書いた後はCSSでデザインしていきます 。
CSSはスタイルシート言語です。

CSSでは文字の大きさや位置を調整したり、ページ全体の色付けができます。

簡単なアニメーションを付けることも可能です。

JavaScript、jQueryでホームページに動きを

アニメーションを付ける場合は基本的にJavaScriptやjQueryでコーディングしていきます。
JavaScriptとjQueryはプログラミング言語です。

jQueryの方がJavaScriptよりも簡単に扱えるので手軽にホームページに動きをつけることができます。 

動きがないサイトも堅実な感じがして良いですが、動きをつけるとワクワクするようなホームページになりますね。

最後にレスポンシブデザインにコーディング

1つのデバイス表示でのコーディングができたら、それを複数のデバイスに対応させます。

デバイスに応じてサイト表示をを最適化することをレスポンシブデザインといいます。
デザイン部分を対応させる時はCSSで、動きを対応させる時はJavaScript、jQueryでコーディングします。

ここまで来たらホームページは完成です。

ホームページ制作や取り扱いはノキボウ株式会社にお任せください。

群馬県高崎市のホームページ制作会社　ノキボウWEB