WEBデザインの方法とは？簡単に手順を解説！（コーディング・公開編）

WEBデザインをクライアントに納品するまでには、「企画」「デザイン」「コーディング」「公開」の大きな4ステップがあります。
前回は企画とデザインまで解説しましたが、今回はその後のコーディングと公開について谷宜樹が解説していきましょう。

 

■「コーディング」とは？

まずコーディングとは何でしょうか。
WEBデザインは編集ソフトなどで文字を入れたり、画像を挿入して完成するわけではありません。
マークアップ言語によりデザインをWEBページとして表示させる作業が必要です。
実際は、デザインした内容に合わせてHTMLやCSSを記述する作業となり、これをコーディングといいます。

■「マークアップ言語」とは？

コンピューターに文章をアップロードしても、単語や文脈の意味を正しく理解することができません。
そのため、人間が
「ここが見出しだよ」
「ここからは本文だよ」
と教えてあげないといけないのです。
具体的にはテキストに目印をつけ、意味を記述し、装飾を施す作業が必要です。
この作業に使われる言語を「マークアップ言語」といいます。
マークアップ言語で記述すると、コンピューターは見出しと本文の違い、協調している箇所などが分かります。

■マークアップ言語には何があるの？

マークアップ言語は「HTML」と「CSS」があります。
谷宜樹もWEBデザインには必ずこの2つを使用しています。

・HTML
マークアップ言語として基本的なものです。
コンピューターが文章を適切に理解することができます。
WEBページを作る際に最も多く使われるでしょう。

・CSS
HTMLで記述した文章の表示方法を指定するものです。
例えば、色を変える、文字の大きさを変えるといった作業はこの言語が使われています。

他にも、「JavaScript」は動きのあるサイトにしたい場合に使うことがあります。
動きのない文字と画像だけのWEBページであれば、HTMLとCSSがあれば十分だと谷宜樹は思います。

■チーム作業はルールが大切！

マークアップ言語の記述の仕方によって、WEBデザインの内容にもバラつきが出てしまうことがあります。
記述のルールを設けておけば、複数で作業してもメンテナンスや機能拡張がスムーズにできるでしょう。
そのため、会社やデザイン事務所などの場合、コーディングルールが定められていることが多いです。

■WEBデザインの公開

コーディングが完了したら、実際のWEBページに反映された場合どのような見た目になるかチェックします。
要望通りになっているか、プレゼンなどでクライアントにも確認してもらうところが多いですね。
これでOK！となれば、クライアントにデータを納品します。
デザイン事務所でアップロードまで請け負うところもあるかもしれませんね。

もっと細かく説明すれば、コーディングの手順や公開までの準備などがあります。
その点についてはまた今度、谷宜樹が解説していこうと思うので、ぜひお楽しみに！