制作事例コンフォートハウス一級建築士事務所-デザインのソルティードッグ

WEB制作制作事例

デザイン

手書きラフデザインからシンプルでオシャレなページを作製

コンフォートハウス一級建築士事務所様

http://www.comforthouse.co.jp/

事務所改装を期にシンプルでオシャレなサイトにリニューアル希望され制作いたしました。
今まで作ったお家の紹介、家造りの方法などを写真を多く取り入れ紹介しております。
サイトデザインは、手書きのラフをお持ち込みいただきました。
それを元に、空間を大事に、スッキリしたデザインでまとめました。
テキストはデータで入稿していただきました。
お問い合せフォームを含む、約80ページのサイトです。

打ち合わせ

お客様の仕事内容をお聞きし、デザイン住宅を設計する時の姿勢から「こだわり」をテーマにデザインすることにしました。
参考とするサイトを教えていただけましたので、デザインの方向性も速く決めることができました。
撮りためてあった家の写真を多く紹介し、優しく、シンプルなデザインにすることで、 “こだわりの家造り”をする一級建築士事務所を、このサイト自身のデザインにこだわることで表現することにしました。

サイトプランの構築

お客様自身でしっかりとしたサイトプランをお持ちでしたので、それを元にアドバイスを加える形で進行しました。
掲載したい写真が多かったため約80ページのサイトになりました。

予算組み

コストの削減、納期短縮のため、お客様にてテキストの入稿、校正、最終チェックをしていただくことになりました。

ラフデザインの制作

左はお客様よりいただいたトップページのラフデザインです。イメージが伝われば手書きで十分です。
今回は全てのページでラフデザインをいただきました。
それをもとに、ご提案、ご相談をしながらラフデザインを仕上げていきます。
下の写真が実際のトップページです。レイアウトの変更がおわかりになると思います。

デザインの制作

ラフデザインを元にイラストレーター（編集ソフト）でデザインを制作します。
ヘッダ部はより多くの写真を掲載しイメージを伝えるためフラッシュで制作することにしました。
お客様のイメージにあっているか、確認しながら他ページも制作いたします。

今回はデザインを気に入っていただきスムーズに進めることができました。

テキスト入力・テキスト校正

お客様より、順次テキストデータをいただきました。

画像加工

トリミング、解像度の変更、が主な作業となります。
サブタイトル、ナビゲーションもデザイン性を優先し、画像制作としました。

イラスト・ロゴ制作

ロゴはお持ちでしたので名刺よりトレースしました。

プログラム制作

お問い合せフォームを制作するにはプログラム(CGI等)を用意する必要があります。そこで、お問い合せフォームのみxoops（オープンソースCMS）を使用しました。
独自に問い合わせフォームのプログラムを制作するよりコストダウンできます。

コーディング

コーディングとはデザインをブラウザで読めるように、XHTMLとCSSと言う命令に書き出すことです。
可能な限りW3C準拠で制作します。

W3C準拠で制作する理由
ニュース番組では「標準語」で話す、のと同じでWEBでは、標準のソースコードで書くのが妥当と考えます。
web標準で制作することは、思わぬレイアウト崩れなども少なくなります。

最終チェック

当社でも簡易チェックし、お客様により最終チェックをお願いしました。

ファイルのアップロード

サーバーを変更することになりましたので、FTPアップロードいたしました。

ページの更新

トップページにリンク用バナーの追加をしました。
当初、http://comforthouse.co.jp/index3.htmlのようにバナーを並べるだけとの依頼でしたが、http://comforthouse.co.jp/index.htmlのようにページ下部にLINKの設置を提案、決定しました。

デザイン住宅を扱うお客様ですので、サイトが格好良くないと。
そんな思いで制作させていただきました。
当初の打ち合わせ時よりページ数やリンク箇所が増え、80ページほどのサイトとなりました。完成後、お客様に喜んでいただけ嬉しかったです。

代表やすもとより