webサイトができるまで#04【制作編】

web

想いを表現しよう(デザイン・コーディング・プログラム)

webサイトが出来るまで04(メイン)

こんにちは。

webディレクターの青木です。

 

今回は、出来上がったサイトマップ・ワイヤーフレームをもとに、デザイン~実装のご紹介をしていきます。

 

 

その前に今までをおさらいしてみましょう!!

 

【webサイトが出来るまで(企画編)】

 

デザインする

まず今回、とあるパン屋さんのサイトを作りたいと思います。

そのカフェサイトのサイトマップとトップページのワイヤーフレームはこちらです!

 

 

 

サイトマップ

 

 

 

サイトマップ

 

 

ワイヤーフレーム(構成図)

 

 

 

トップページ

 

トップページ完成デザイン

 

 

 

トップページ_デザイン

 

 

 

ワイヤーフレームのもと、デザインを完成させます。

この時には、細かい文章関係も入るようになりますが、お客様の中には、文章作成が苦手という方も多くいらっしゃいます。

そこで活用できるのが、事前のヒアリングです。

弊社では、頂いたヒアリング内容をベースにキャッチコピーや文章の作成も行っておりますので、文章が苦手という方も安心して任せることができます。

 

このようにワイヤーフレーム(構成図)を事前に作ることで、お客様と制作者側との間でイメージの擦り合わせが出来、デザイン完成までスムーズに進みます

その後、仕上がったデザインに対して相談しながらブラッシュアップしていきます。

 

トップページが完成したら、中身の下層ページも作っていきます。

そして最終的に出来上がったデザインに対してユーザーとのズレがないか、クライアントの想いが伝わるか再度確認して実装作業へ 進みます。

実装する(コーディング)

出来上がったデザインに対して、ブラウザ内で動作が出来るようコーディング(実装)作業を行います。
その作業が終わったらお客様のご要望に合わせて、お客様がブログ等を更新できるようにブログラムの設置もしております。

 

最後に納品前に再度確認!!

全作業が終わった後は、動作に不備がないか確認してから納品となります。

 


これで、webサイトは完成かぁと思われた方もいらっしゃると思いますが、
webサイトは納品して終了ではありません。
次回は、webサイトの運用についてご紹介していきたいと思います!

 

次回をお楽しみに!

関連コラム