今回は、WEBサイト制作の流れについてご紹介します。
1.サイトマップを作成する
最初にサイトマップを作成します。
サイトマップは、どんなページがあり、どのようにリンクで繋がっていて、どれくらいの階層があるのかを図式化したサイトの構成図です。
サイトマップを作成するためにはWEBサイトの目的やターゲットを明確にし、そのために必要なコンテンツを検討する必要があります。
WEBデザイナーやWEBディレクター、エンジニア、クライアントとWEBサイトの制作に関わる全ての担当者がサイトの構成を把握するために必要な図となります。
2.ワイヤーフレームを作成する
次にワイヤーフレームを作成します。
図形や枠線等を用いてページごとに骨組みを設計し、テキストや画像をどのように配置していくかを決めていきます。
ワイヤーフレームを作成する際は、人の目線の動きや、ストーリー性、強調したい箇所などを意識しながら作成していきます。
3.デザインを作成する
次にページのデザインを作成します。
初めに決めたサイトの目的やターゲット、ユーザビリティを意識しながら、ワイヤーフレームを基に配色やフォントを決め、テキストや画像を落とし込んでデザインを完成させます。
また、ボタンを押した時の挙動、カーソルを合わせた時やスクロールした時に色や画像に変化を加えるといった動的機能も考えながらデザインを組み立てていきます。
デザイン制作の過程で、モックアップ（デザインカンプ）とプロトタイプという単語がでることがあります。
モックアップは、クライアントへのデザイン提案や確認に用いるための見本デザインのことで、プロトタイプはクライアントへサイトの操作説明などを行うために、ボタンなどを疑似的に操作できるテストページのことを指します。
モックアップやプロトタイプは、クライアントと相談の上、必要に応じて作成・活用します。
4.コーディング作業をする
次にコーディングを行います。
コーディングは、コンピュータに情報を理解させるためのソースコードと呼ばれる指示書を作成する作業で、WEBサイトの見た目の部分を作る言語（HTML、CSS、JavaScript等）でコードを書き、インターネットに公開しないローカル環境で、見た目の確認や動作確認などを行いながら進めます。
また、見た目のコーディングと並行し、必要に応じてサーバ側の機能の開発も行います。サイト内検索などの機能やお問い合わせのためのフォーム機能の追加、サイバー攻撃に対応したセキュリティ対策がこれにあたります。
最終的に完成したコードやプログラムのファイル、サイト内で使用する画像データをサーバにアップしたらWEBサイトの完成となります。
最後に
ガリバーでは、DMや印刷物のデザインだけでなくWEBサイトのデザイン実績も多数ございます。
広告物と連携したWEBサイトを作りたいとお考えの方はぜひともガリバーまでお問い合わせください。
ガリバーはDMの印刷・発送にとどまらず企画からお客様を全面サポートしています。
この記事の詳細やDMサンプル、成功事例などお気軽にお問い合わせください。
