サンリラクゼーション

サンリラクゼーション様の店舗ホームページのリニューアル作業を行わせていただきました。

デザイン

コンセプト

ホームページのデザイン上にも取り入れている「和」・「技」・「癒」。 このサンリラクゼーション様の魅力を端的に現した漢字3文字を、今回のサイトリニューアルのコンセプトとさせていただきました。

数あるリラクゼーションサロンの中でも特にサンリラクセーション様の個性となっている「和」のテイスト。 その魅力がユーザーに伝わるようなデザインを心がけ、縦書きのグローバルナビゲーションや和紙の質感を活かした背景など、ホームページデザインの随所に和のテイストを取り入れました。

また、お店の雰囲気をダイレクトにユーザーに届けることができるよう、トップページでは店舗の内観写真をスライドショーにしています。

配色

クライアントから配色に関するご要望として「リニューアル前と同じく、ダークカラーを用いた落ち着いた雰囲気のデザインにしてほしい」という内容を伺っておりましたので、ベースカラーにダークカラーを使用することを前提として配色計画を行いました。

ホームページのベースカラーに黒を使用する場合は、「かっこよさ」「スタイリッシュさ」は演出しやすくなりますが、その反面で、デザイナーやクライアントの意図に反して「近寄りがたい」「くらい」「怖い」などのネガティブな印象を与えてしまう場合があります。 今回の案件では、サイトを訪れたユーザーに「癒し」を感じさせるデザインを行う必要がありましたので、スタイリッシュで洗練された雰囲気は保ちつつも、近寄りがたい冷たい印象にならないよう、背景に和紙の素材を用いたり、随所に暖色系カラーを使用する等、「暖かみ」を感じさせる配色を意識して制作を行いました。

機能開発

今回のサイト制作では、以下のような機能を盛り込ませていただきました。

レスポンシブ・ウェブデザイン

HTML5 ・ CSS3 を用い、 PC ・タブレット・スマートフォンなど複数の画面サイズに対応した「レスポンシブデザイン」を採用しました。 レスポンシブデザインではどのような画面サイズの端末に対しても共通の HTML ファイルが使用されるので、中長期的なメンテナンスコストや SEO 効果の面で大きなメリットがあります。

今回は、画面サイズが小さな場合にはウェブ利用者の多くが馴れ親しんでいる王道的レイアウトを、画面サイズが大きな場合にはショップコンセプトを体現したラグジュアリー感の高いフリーレイアウトのデザインを採用いたしました。

Internet Explorer 8 などレスポンシブ・デザインには対応していないブラウザーにおいてレイアウト崩れを最小限に留める工夫もあわせて行っています。

既存サイトとのデータ連携

今回制作するサイトは単独サイトではなく既存のサイトと連携する部分があったため、「既存サイトからのデータの移行・データ連携」がひとつの課題でした。

今回は幸い既存サイトの方も Drupal ベースで作られていたので、この連携は比較的スムーズに行えたように思います。 既存サイトの方ではコントリビュートモジュールを用いてコーディングレスに JSON API を作成し、新規サイトの方ではその API を経由してデータを取得し、処理・表示する機能を独自開発する形で連携を行いました。

背景画像の自動スライドショー

画面サイズが大きな端末に対してページいっぱいに表示された背景画像が少しずつ順番に切り替わる機能を実装しています。 高精細な画像を画面いっぱいにスムーズに切り替えながら表示することで、ことばだけではなかなか伝えづらい店舗の雰囲気・空気感が伝わるような工夫をさせていただきました。

動画のハイライト表示

サイト内の動画を見やすくするため、動画がクリックされるとページ全体が暗転し動画だけが前面に表示される「ライトボックス」と呼ばれる機能を採用いたしました。 jQuery ライブラリと Drupal のモジュールを用いることで、動画再生における定番的な機能を確実・スピーディに導入することができました。

案件概要

クライアント名	株式会社サンメディカル 様
URL	http://sunrelax.biz/
Drupal バージョン	Drupal 7
ジャンル	コーポレートサイト
デバイス	PC／スマートフォン／タブレット
当社スコープ	デザイン／Drupal導入／コーディング／プロジェクト管理
プロジェクト期間	約3ヶ月