温泉宿ペンションとまと様サイトリニューアルしました

香川県高松市、塩江町にある温泉宿ペンションとまと様のWebサイトをリニューアルいたしました!

温泉宿ペンションとまと

実はこのペンション、私の家族は毎年のようにお正月にお世話になっています。

というのも、お正月は夫の写真の仕事が大体どこかで入るため、あまり遠出は出来ず、近場でゆっくりするのが恒例になっています。仕事が入ったら夫だけちょっと昼間に出かけたりしながら連泊させてもらっています。
息子も食物アレルギーが沢山あるので、あまりどこでも連れていけないんですが、オーナーさんがとても配慮してくださる方なので、とても助かっています。

ペンションの雰囲気をそのまま伝える

ペンションの外観も中の雰囲気もとても可愛らしい所ですので、今回はペンションの雰囲気がそのまま伝わるようなデザインにしてみました。トマトカラーで緑と赤!?とも考えてみましたが、あまり色が強く出過ぎないように、トマトカラーを使いながらもナチュラルな色を使うようにしています。
お部屋の名前も、野菜の名前になってて、とてもカワイイんですよ~~
通常の企業サイトの制作では、こういうデザインで作る事はほとんどないので、今回はおもいっきり楽しみながら仕事をさせていただきました。

サイト制作において

今回サイト全体をwordpressで組みましたが、その際contact form7のプラグインで確認画面を出すためのライブラリを、株式会社Aultaさんにご提供いただきました。ありがとうございます♪
wordpressのcontact form7で確認画面を出す手軽なライブラリ

温泉宿ペンションとまと Webサイト
Design & Planing Rie Nabesaka
HTML coding & CMS customize Mika Teranishi


しこくガスフェスタ2011サイト制作いたしました。

昨年に引き続き、今年もしこくガスフェスタ様のWebサイトをデザイン・制作させていただきました。

しこくガスフェスタ2011

しこくガスフェスタ2011

通常の企業サイトではこういうレイアウトにはしませんが、様々な催し物の多いイベント告知ページでは賑やかさの演出にもなりますので、今年はこのようなデザインにしてみました。(IE6など旧ブラウザでは一部表現が異なるようにしています。)

ちなみに昨年も行かせていただいたんですが、実際に沢山のイベントが催されてて、家族で子供も大人も楽しませてもらいました!
特に・・・・芸能人カレー部のカレーがめっちゃ美味しかったです。今年も絶対食べにいこーー


中西珍松園様のWebサイトをリニューアルしました

香川県の鬼無盆栽郷にあります、中西珍松園様のWebサイトをリニューアル・制作させていただきました。

中西珍松園

中西珍松園

今年は、第11回アジア太平洋盆栽水石大会も開催予定で、香川では実は盆栽ブームです!!
中西珍松園様は何度かお邪魔させていただきましたが、大きくて立派な盆栽から、小さくてかわいい盆栽まで沢山そろっていて、何よりとても素敵な庭園ですよ。
盆栽とか日本の伝統にふれると背筋がピシっとするような気持ちになります^^

余談ですが、第11回アジア太平洋盆栽水石大会のウェルカムパーティでは息子が門下生の夢幻の会の和太鼓も出演予定です。
(息子はまだまだ新米なので出場しません)


四国ガス様ぬっく特設サイトが公開されました

四国ガス株式会社様「ぬっく」の特設サイトを制作いたしました。

ぬっく特設サイト

ガス温水床暖房 ぬっく

マークとメラニーが、楽しく床暖房について解説してくれます♪
マーク&メラニーならではのオーバーリアクションを是非お楽しみください^^

デザイン制作中も横幅14000pxになるという普段ではありえない横長のデザインになり、モニターをどんどん繋げて作業したくなりましたが笑
楽しかったです。

私はWeb用デザインとコンテンツ・各画面のインタラクションの設計など担当させていただきました。
アイディアをいただいたプランナーさん・デザイナーさんとのミーティングからとても楽しく参加させていただきました。
また、ワガママをとことんきいてくださったFlashプログラマーさん、ありがとうございます♪


ASCII.jp 「jQuery Mobileのアコーディオンでスマホサイトを制作」公開されています

デザインをお手伝いしたカタログのサンプルサイト、後半のご報告です。

前回に紹介させていただいた、ASCII.jpで連載中の「西畑一馬のjQuery Mobileデザイン入門」、カタログサイト制作の後半が公開されています。

【jQuery Mobileのアコーディオンでスマホサイトを制作】

アコーディオンパネル

今回はアコーディオンパネルの設定方法について解説されています。
アコーディオンパネルは微妙に重なっていたり、開いたパネルにはCSS3で内側にbox-shadowを取り入れるなど、様々なテクニックを駆使していますので、今後のスマートフォンサイト制作の参考になると思います。
デザインを制作する上でも、アイコンの画像をデフォルトのものと統一させるなど、工夫するポイントにも触れています。

パネルの画像

また、モーダルウィンドウや、実務ではまりがちな落とし穴についても解説があります。

完成版のサンプルサイトを閲覧することもできますので、是非参考にされてみてくださいね。