制作実績

*ワードプレスの制作実績は、別サイトにまとめてあります。こちらをご覧ください。

w_indigo.gif

都市計画・住民参加型のまちづくりを目指す、アーバンデザイナー鈴木俊治さんの「ハーツ環境デザイン」のサイトです。

制作を始める前に、都市計画という業務内容について、私自身があまりよく理解していなかったため、最初のヒアリングで、お話を伺いました。それぞれの案件にどのように関わっていくのかを、詳しく伺うことで出てきたキーワードは「人」でした。

(Design/HTML/CSS/Javascript)
http://www.hearts-design.com/

w_indigo.gif

プロダクトデザイン・グラフィックデザインの会社のサイトです。ブラウザの横幅いっぱいにスライドショーで出現する美しい制作物の写真が印象的なサイトとして仕上がったと思います。

サイトのデザインは、INDIGO DESIGNで行ない、私は全体の構築とディレクションを担当しました。最初はFlashで制作するべきか迷いましたが、昨今はiPhoneやiPadでFlashを見る事ができない、という現状を踏まえて、Javascriptで制作することになりました。

一見するとシンプルな動きですが、ひとつの作品でも、角度違いの画像が複数あったり、サムネイルがスクロールしたりと、複雑なスクリプトを組まなければならなかったため、その部分はプログラマーさんに依頼しました。 (HTML/CSS/Direction)
http://www.indigodesign.co.jp/

シロエコ

中古マンションのリフォーム・リノベーションをするこの会社は、ターゲットユーザーが30〜40代の女性でした。住宅を購入するときにキーパーソンとなるのは、どちらかといえば旦那様より奥様というのが一般的なようですので、デザインにも女性を意識しています。 木の素材やマンションの壁紙のような質感、手書きの線などアナログなイメージを重要視しています。
トップページにはFlashは使わずに、jQueryのスライドショーを入れました。 (Design/HTML/CSS/Javascript)
http://shiroeco.com/

クラウドプロ

こちらのホームページを作成する際には、運営会社のサイトのデザインと統一して、似たようなレイアウトにしてほしいとのご依頼がありました。
キーカラーになっているロゴの濃紺はそのままに、全体のカラーを青みがかったグリーンでデザインし、サイトの構成やレイアウトは、会社案内サイトのデザインを踏襲した形で作成しています。
(Flash/Design/HTML/CSS/Javascript)
http://www.cloudpro-service.com/

logo_39mail.jpg
w_39mail.jpg

店舗や学校・NPO法人向けの携帯メール配信サービスのサイト。
デザインを全体的に見直し、Movable Typeで作成しました。
サービス内容をユーザーに理解してもらうために、文章で細かく説明するだけでなく、パッと見て直感的に分かりやすいイラストや図形を入れてリニューアルしました。
更新頻度の高い「新着情報」と「よくある質問」は、ブログ形式にして、担当者が効率よく更新できる方式になっています。
(Movable Type/Design/HTML/CSS/Javascript)
http://39mail.com/

w_lavolte.jpg

あらゆる種類の製本ができる製本会社のサイト。
トップページに商品一覧(ここの場合は製本の種類とサンプル)をすべて載せたい、という意向により、スクロールが長いトップページにしています。
製本サンプルをクリックすると、Lightboxを使った別ウインドウが開きます。
「特殊製本」で検索すると、1ページ目の検索結果にこのサイトが表示されます。
(Design/HTML/CSS/Javascript)
http://www.hakushowdou.com/

w_lavolte.jpg

ラボルテはネット通販だけで販売されている無添加化粧品です。
化粧品サイトですので、特に清潔感・透明感に気を使ってデザインしました。
ショッピングカートはワイズカートを使用。
(HTML/CSS/Flash)

logo_itiran.gif

w_antica.jpg

アンティカファルマシスタは、エッシェンシャルオイルを配合した香水(パフューム)のショッピングサイト。アメリカにあるサイトのイメージを踏襲しつつ、使いやすいインターフェイスを心がけて制作しました。 システムはクロネコヤマトのe-ネコショップを使用。
(Design/HTML/Flash)

http://www.anticafarmacista.jp/