webcrafts098@gmail.com / Tel.098-988-0016
BLOG

wEVA社内でのサイト制作の流れ

wEVA社内でのサイト制作の流れ

他社でも似たり寄ったりではないかと思いますが、wEVA社内でのサイト制作の流れを簡単に書いていきます。

ヒアリング

これが 一番重要 !!「どんなサイトを制作するかをクライアントとの会話の中でイメージしていきます。すれ違いがないようにここでの意識あわせも重要です。

ここでサイトの目的やどのような効果を生み出したいかも確認しておきます

目的のターゲット層をイメージして、そのターゲットに対してどのようなメッセージを発信したいのかなどを確認しつつ進めていきます。

ワイヤーフレーム制作

ヒアリングしながらざっと描くこともありますが、クライアントによっては「落書きしている」と不愉快に思う人もいることがあるので注意です。ただ、この場でまとめたワイヤーフレームが最後まで設計図のようなものになるので、自分の場合はワイヤーフレームを一番大事に、数字も全部書き込んでいます。

いろいろとツールもありますが、自分は手書き派です♪

同時にベースとなる横幅も決めて、グリッドを線も一緒に引いておきます。wEVAの場合はだいたい960〜984pxで12分割したグリッドをベースにすることが多いですね。

※ワイヤーフレームの事を「フレームワーク」という制作会社の方もいるのですが…まぁ、いいや(^^;

いただいた写真をその場で切り貼りして「こんな感じ?」とやることもたまにあります。

カラー選択

使用するカラーを決めます。会話しながら決めることが多いので、ワイヤーフレームをつくるより前にやってしまうこともあります。

実はここが一番試行錯誤します

「沖縄の海をイメージした青」と言っても、人によっては暗い青だったり、グルーンが入った青だったりといろいろな青があったり、会話の中でも確認が一番必要なのが配色です。

先のワイヤーフレームにその場で色を塗ってしまうこともあるので、鞄の中には色鉛筆を常に入れていることもありました。

サイトマップ制作

同時にサイトの全体構成を書き出しておきます。トップページにお問い合せページ、お問い合せページの中に来る確認ページとかお問い合わせ受け付けましたページとか…ページ数と全体構成を把握しておくだけでもミスは少なくなります。

ラフデザイン制作(モックアップ制作)

20130826

PhotoShopなどで制作することもあります。最近はベースとなるHTMLにCSSで直接書き始めることも(^^;

この工程をクライアントにも時々見せるようにしていきながら、大きなズレがないようにしていきます。

配色の最終決定やサイズの最終決定はここでおこないます。

パーツ制作

ラフデザインで数値や配色が最終決定したので、このサイズにあわせてのパーツをつくります。

コーディング

本格的にHTML+CSSでコーディングします。これも試験サーバーなどに載せながらクライアントにその都度確認していただくこともありますが、人によっては原稿がないのに「○○○○○○○」を見て「これなんですか?」と怒る方もいるのでクライアントにはそのことも説明しておきましょう。「原稿待っています、原稿待っています…」にして更に怒られたことがあります(>_<)

チェック

クライアントのチェックやブラウザによる見え方のチェックをおこない微調整をおこないます。

公開

サイトを公開します。

wEVAの場合は意識してクライアントとの会話を多くするように心がけています。クライアントによってはこれを嫌がる方もいるのですが、制作途中を見せることで大きなズレがおこらないようにと考えています。



FacebookでwEVAメンバーとおしゃべりしませんか?→株式会社wEVA