Webサイトを作るのに必要な4つのこと

2020.02.29

皆さんはじめまして！
目指せ合格！ウェブデザイン検定受験への道のりで主人公カナコの教育係をしている、ユリエです。
実は私、まなシェアサイトのマスコットキャラクター”まなゆん”の生みの親なんです！
他にもチラシや販促物、キャラクターのデザインやWebデザインの仕事をしています。

デザインの仕事をしている中で…

などなど「Webデザイン」についてのお問い合わせを頂く事が増えてきました！
そこで今回は、依頼を受けた「Webサイト作成の流れ」をまとめました！

大まかな流れ

Webサイト作成というと「デザイン」や「コーディング」のイメージが強いですが
実際には企画→設計→作成→公開・運用といった手順が必要です。

では順を追って解説します！

サイト作成の肝になるのが企画です。
サイトの目的や構成を整理し、サイトに必要な情報を明確化します。

「誰向けに」「何のために」「どんなコンテンツを」配信するのかをまとめていきます。
クライアントやチームメンバーと打ち合わせする際はヒアリングシート等を活用して、サイト内にどのようなページが必要なのか精査すると認識のずれが起こりずらいです。

ヒアリングシート

クライアント(顧客)の抱えている問題点や課題等を聞き出すためのシートです。
最低限聞き出したいことをまとめておくことで、問題点だけでなく、希望や要望を確認することもできます。

企画が完了したら具体的にホームページの設計をします。
どのページがどのカテゴリーに属し、どのカテゴリーがどのメニューに属するのか等、クライアントやチームのメンバーと共有できるように構造をまとめます。
サイトマップや、ディレクトリマップを作成すると共有しやすくなります。

サイトマップ

サイト全体のページ構成を地図のように一覧で記載しているページのことです。
ユーザーや検索エンジンにサイト内容をわかりやすく伝える役割を担っています。

ディレクトリマップ

サイトに必要な情報を種類や用途で分け、情報がどんな風に設置されているか、どこに紐付けされているかをまとめます。
内容が繁雑にならず、確認しやすくなります。

「作成」と言ってもデザインやコーディングをすぐに行うわけではなく、順序があります。
作成は下にまとめたような工程に沿って進行します。

1.サイトの目的に沿った素材を用意

ロゴ、使用カラー、フォント、写真等必要なものをまとめます。
※クライアント側で用意できないものは、必要に応じて作成や、撮影を行う必要があります。

2.ラフ画を作成

どこにどんな情報を盛り込むか大まかな目途をつけます。(紙上で作成でもOKです)

3.ワイヤーフレームを作成

レイアウトを定める設計図を作成します。
ラフ画をもとに「何を・どこに・どのように」画面に配置するかを明らかににすることが重要です。
これをもとにクライアントと話をし、差異がないか確認後デザインカンプ作成に進みます。

4.デザインカンプ作成

デザインの完成見本図です。
クライアントとイメージをすり合わせるために作成されます。
ワイヤーフレーム上にデザインを足していくことで、出来上がりのイメージに差がなく進めることができます。

5.コーディング作業

デザインカンプで仕上がったものをコーディングします。
デザイン通りにサイトとして表示できるようにHTMLとCSSのコードを書くことが必要です。
企業によっては「この場合はこう書きなさい」と言ったコーディングルールがある場合もありますので都度確認しましょう。

ドメインや、サーバーを用意し、動きに問題がないかテストを行います。
テストの結果問題なければ公開し、運用スタートです。

いかがでしたか？
デザイナーはクライアントの意図をくみ取り、思いを形にすることが基本です。

なんて思った方もいらっしゃるかもしれませんが、今回お伝えした工程がどのWebサイトを作成するとしても行われる一般的な流れです。
紹介した工程を行う事で、クライアントや制作チームメンバーとの認識のずれをなくし、スムーズに進行できるのです！
ぜひ参考にしてください！

Webデザインの仕事をしたいな！と思ったら…藤枝くらシェアで仕事してみませんか？
藤枝くらシェアはこちら↓
https://fujieda.kurashare.com/