Naga Blog

Portfolio

「Stream Web Design」制作Webサイト第1作「branch coffee」様のサイトが完成しました。

branchcoffee_top.jpg

「Stream Web Design」制作Webサイトの第1作が完成し公開しました。クライアント様は、以前勤めていた会社で担当させていただいていた「branch coffee」様のサイトリニューアルです。リニューアル前のデザインは、自分が制作したモノではない上に、設計にから関わっていない引き継ぎ仕事だったものですから、自分も、クライアント様も消化不良の部分が多々あったのですが、今回のリニューアルで設計段階から大幅に変更でき、不満だった部分の多くも改善されたので、概ね満足しております。

「branch coffee」様のサイトでは、日常のページ更新や修正は、クライアント側単独で行える事を目指しました。資本力の小さい店舗等が、サイトを運営する場合、構築後のメンテナンス費用が重くのし掛かってくる事で更新がされず放置されてしまい、サイトの広告効果が薄れてしまうのですが、構築後のメンテナンス費用を圧縮する事で、新鮮な情報を提供し広告効果を上げる事が出来るからです。

ただ、高額なCMSの導入は出来ないので、コンテンツ部分は、自分の制作スキルが生かせる「Movable Type」。EC部分は、評価の高い国産の「EC-CUBE」の2つを使って構築する事にしました。

製作期間は、まるまる4ヶ月かかってしまいましたヨ。実際には、もう少し短い期間で制作出来た筈なのですが、前に勤めていた会社で構築していたXHTMLやCSSのライブラリ等々を基礎から構造を見直して作り直していた上に、「Movable Type 4.25」のテンプレートも複数のblogで共用するように作り直したお陰で、テンプレートの構造が途中で訳が分からなくなったり。自分にとっては初めての構築となる「EC-CUBE」のテンプレート制作に苦労した事が、長い作業期間になってしまった理由ですね。

前の会社ではしていなかったサーバの移転とか、それに伴う独自ドメインの移転も経験させて貰いました。共有サーバの設定は、自分も使っている「CORESERVER.jp」と契約して貰った為。大した苦労は無かったのですが、決済サービスの関係で、公開ギリギリになって独自IPと独自SSLを設定しなければならなくなり、時間のない中、旧サイトを止めて貰って独自ドメインを移転した上で、何とか設定する事ができましたヨ。出来なかったらどうしようって不安で、寿命が縮まる思いでしたヨ。

そういえば、Ajaxにも泣かされました。「prototype.js」が好きだったのですが、モジュールのバグやコンフリクトで苦労し、気がついたら「jQuery」の方が割合的に多くなってました。なんか、感覚的に「jQuery」の方が、高速かつ安定的に動作している様に思いますね。今後は「jQuery」を使う事が多くなりそうですヨ。

でも、イロイロと苦労したお陰で、コンテンツページは、「Movable Type」と「EC-CUBE」で、ほぼ全てのページを、ブラウザーから新規作成と編集ができるようにしています。タグの打ち込みを極力排除してしているので、日常的な修正に関しては素人でも問題無いんじゃないかと思っています。けど、そうのち色々と不具合が出てくるんじゃないかって内心不安を抱いています。後は、制作が難しいページだけを自分が担当するようにしているので、当初の予定通り、クライアント様には安いメンテナンス費用を実現できそうです。

しかし、製作期間が長かったお陰で、「Movable Type」は2回、「EC-CUBE」は1回のバージョンアップが行われたり、クライアント様要望が追加になったりと、調整が大変だったのは秘密です。

後、サイトデザインの話をしないといけませんね。

まず、サイトデザインのコンセプトは、「シンプル」です。「branch coffee」様の実店舗が、シンプルなデザインを基本としているので、それに合わせています。実店舗は、白がテーマカラーになっているのですが、そこはあえて合わせず、客層が大体20〜30代の女性がメインなので、単におしゃれだけじゃなく、大人向けの落ち着いた雰囲気も出したかったのと、サイトでコーヒーのネット販売も行うので、コーヒーを印象付けたかったという理由で、テーマカラーは、淡いブラウンとしています。サブカラーで薄いグレーも使っているのですが、周りの色が淡いブラウンにすることで錯覚を起こし、色が付いているように見える工夫をしています。ただ、単色ベタ塗りだけだと、デザイン要素が少ないので、堅い印象が強くなり過ぎると考えたので、背景のみグラデーションにして、柔らかみをここだけで感じさせるようにしています。

色以外のデザイン要素、枠とか罫線の表現なんですけど、遊びの要素は最小限に留めて、形もシンプルなモノにして、アイコン的な部分だけを印象的に頭に残るようなデザインを心がけました。引き算のデザインをした訳ですが、結構足すタイプのデザインをやってしまうので、ナカナカ大変でしたヨ。

日本語がメイン言語なので、ちょっと外れちゃっているのですが、現代ヨーロッパのシンプルデザインっぽく感じて貰えたら、自分としては意図通りって事になります。

公開して4日、クライアント様によると、概ねデザインは好評のようで、胸をなで下ろしています。後は、このデザインの息が長いことを願うだけです。

後は、訪問者数と商品の売り上げが上がってくれれば大成功なんですけどね。

About this entry

このページは、naganagaが2009年4月 2日 19:52に書いたブログ記事です。

ひとつ前のブログ記事は「「iPhone」用のアプリ「Eye-Fi」が使いたくて、「Eye-Fi Share SD型ワイヤレスメモリカード」を衝動買いしてしまいました。」です。

次のブログ記事は「自動車運転中に通話するためにBluetoothヘッドセット「PTM-BEM4BK」を買いました。」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。