ネットをめぐる冒険

これだからインターネットはおもしろい。

リラックスサンドバス てしお & 美食ダイニング てしお

text:
リラックスサンドバス てしお & 美食ダイニング てしお

川崎市鹿島田にあるサンドバスとダイニングの複合施設「リラックスサンドバス てしお & 美食ダイニング てしお」のサイトを制作いたしました。

実績に関してはaguije MAIL NEWSで定期的にご紹介しているのですが、どの案件もざっくりとしたご紹介ですし、このブログで自分のした仕事の話をあまりしたことがなかったので、思い立ってエントリー。この案件はまだMAIL NEWSに載せていないのでフライングでのご紹介になります。

葉隠勇進様という学校給食や社員食堂の運営を基幹事業として展開されている会社さんがあるのですが、その葉隠勇進様が元々は別会社様が運営されていた事業を引き継ぐかたちで始められたのが、この「リラックスサンドバス てしお & 美食ダイニング てしお」です。名称含め施設自体はリニューアルとなりますが、サイトは新規立ち上げという案件でした。

リラックスサンドバス てしお」では、セラミックサンドバスというお湯で温めたセラミック粒で満たされた浴槽に浸かる、新感覚のリラクゼーションを体験できるほか、岩盤タイルのリラクゼーションやスチームサウナなど、健康増進 / 美容・美肌の促進 / ストレス解消に有効なサービスをご利用いただけます。砂風呂を想像されるかも知れませんが、入って10分もすれば体中の血管が脈打つような血行の促進を感じられるなど、いままでにない体験になると思います。

モデルさんには実際に入っていただいたのですが、仕事中にこんなにリラックスしてしまっていいのですかと大好評でした。目の前で見ていて本当に気持ち良さそうだったのですが、見るばかりで実は僕自身はまだ体験出来ていません...。近いうちにぜひ!肩コリでお悩みの僕みたいなデスクワーカーにはかなりオススメです。岩盤タイルやスチームサウナの利用もコースに含まれているので、時間をかけてゆっくり楽しむべし。

一方、施設の2・3Fにある「美食ダイニング てしお」では素材の良さを活かし、うまみと栄養を最大限に引き出したやさしい料理を堪能いただけます。なにしろフードサービスがメインの会社様の手がけるダイニングですので、さすがのクオリティです。

詳しくはせっかくですのでサイトでご覧いただければと思います。

サイトのデザインや構成、技術

最初のご提案や諸々の調整を細井が担当し、その後のディレクションやサイト全般のデザイン・制作を僕の方で担当いたしました。

サンドバスとダイニングという別ジャンルの施設が同居しているので、それをデザイン的にも構成としても違和感なく見せるという点に気を遣ったのと、サイトの印象をオサレ一直線というよりは幅広い年齢層を受け入れるフレンドリーさに重きを置いたのがポイントです。

構成としては先ずはサイトを立ち上げましょうということで、必要最低限の情報をまとめあげた [トップページ(全画面Flash)] + [静的ページ 5ページ] の非常にミニマルなものです。アクセス解析を経て今後の方向性を探りつつ、コンテンツの拡充を図っていくという計画とし、今回はCMSの導入もしていません。

実はサイト全体の制作を担当するのもCMSが無いのもひさしぶりで、かつ一人で行うには手頃なページ数だったので個人的には結構楽しんで制作することができました。このくらいのボリュームだと細かなところにも目が届きやすくてやりやすいですねー。制作を通して再確認しましたが、やっぱCSSコーディング好きだわ〜。

技術的にはあまり複雑なことはしていませんが、Ajaxインターフェースとしてお馴染みのスムーススクロール機能のほか、「セラミックサンドバスについて」と「ダイニング紹介」のページにそれぞれPanicのCodaサイト風のスライダとiTunesのCover Flow風のビューアを実装しています。そのほか部分的にPNG画像を使用したのでIE用の透過処理も。

どのインターフェースやエフェクトも様々なスクリプトが出回っていますが、こちらのサイトで使用したのは以下です。

  1. Coda Slider 1.1.1 - Niall Doherty
    Panic Codaサイトに実装されているコンテンツスライダ。jQueryベース。フリー。
  2. ImageFlow 0.9 - Dragonfly 2.0
    iTunesのCover Flow風のビューアを実現する。フリー。
  3. smoothScroll.js - [to-R]
    ページ内リンクをスムーズに行う。MITライセンス。
  4. iepngfix.js - ユンサンの/융상의/YungSang's
    IE6以下のバージョンで透過PNGの表示を可能に。CC-GNU LGPLライセンス。

Coda SliderでjQueryを使ったのでその他もjQueryベースで...と思ったのですが、結果的にはどれも単体で動作するスクリプトで落ち着きました。2.のImageFlowはサイト制作時にはバージョンが0.8で、ウンコIE6でJavaScriptエラーが発生する状態でしたので頑張ってデバッグして直した経緯があるのですが、知らない間にバージョンが上がりフィックスされた模様。あのときの苦労は...。

仕様・デザイン・技術といろいろ任せていただけたので、割と自由なアプローチがとれたかなという案件でした。今後どう発展させていくかお客様とあーだこーだ考えるのが楽しみになりそうなサイトです。