HTML&CSSとWebデザイン＃2 〜制作の流れ〜
お疲れ様です。コーヒーです。
第２回の勉強内容としましては、前回に引き続きHTML＆CSSです。
参考書はこちらです。
今回は制作の流れについてまとめていきます！！
~制作の流れ~
Webサイトを制作するまでの流れとして大まかに6工程にわけられます。
ここから、それぞれについて詳しく解説します
1.企画を立てる
まずは、Webサイトの目的を決める必要があります。どのようなコンテンツが必要であるか。どのようなユーザーがターゲットであるか。といったことを明確にすることで方向性を決めていきます。
2.サイトマップを作る
サイトマップとは必要なページを書き出し、ページ同士の繋がりを図にまとめたものです。例としては以下のようなものです。
3.ワイヤーフレームを作る
Webサイトの骨組みとなるワイヤーフレームを作っていきます。ワイヤーフレームとは色や装飾を加えずにレイアウトのみを作成したもののことです。ワイヤーフレームを作成することで、デザイン制作の段階でも作業が進めやすくなります。
4.デザインする
デザインカンプと呼ばれる、実際のWebサイトと変わらないデザインをグラフィックツールを使用し作成していきます。デザインカンプを作成することで最終的なイメージをしやすくし、コーディング作業を効率的に行うことができます。
5.コーディングする
ここで初めてHTML＆CSSによるコーディングをおこないます。HTMLでWebサイトのコンテンツを記述し、CSSでWebサイトの装飾を行います。
6.web上に公開する
コーディングを終えたらあとは、Webサーバー にファイルをアップロードするだけです。
以上がWebサイトの制作の流れになります。
