HTML5

NAST Homestay

NAST Homestay様のホームページリニューアルを行いました。

概要

愛知県で学生向けホームステイツアーを提供されている NAST Homestay(ナスト・ホームステイ)様のホームページリニューアルをご依頼いただきました。
クライアントは英語でのやり取りをご希望でしたので弊社の英語スタッフがディレクションを担当し、サイト構成・デザイン等については日本人スタッフも交えて進行することで、より日本人ユーザーにとって分かりやすいホームページを目指しました。
また、今回のリニューアルでレスポンシブWebデザインを採用することで、スマートフォンやタブレット端末からも見やすいホームページへと生まれ変わりました。

デザイン

サイトデザイン

配色

元サイトは茶色が主体のデザインとなっていましたが変更しても問題ないとのことでしたので、深みのあるグリーンをキーカラーに採用しサイトの雰囲気を一新いたしました。元サイトが持っていた落ち着いたクラッシックな雰囲気はそのまま受け継ぎつつも、すっきりとした白ベースを採用し、淡くやさしいグリーンとライトグレーを取り入れることで、爽やかな明るさと優しい印象を両立させました。

レスポンシブウェブデザインの採用

最近ご依頼を多くいただくようになったレスポンシブWebデザインをこちらのホームページにも採用いたしました。レスポンシブWebデザインは、ブラウザ幅によりレイアウトが変化するため、画面幅に応じてレイアウトを最適化することが可能です。一般的に若い世代のユーザーは、パソコン以外のスマートフォンやタブレット端末からアクセスする割合が多いため、主なユーザー層が学生となるこちらのホームページに採用することは、直帰率を下げページ滞在時間を増やすための効果的な施策として期待できます。

Web以外のデザイン制作

ホームページ制作と合わせてロゴデザイン制作、チラシデザイン制作のご依頼もいただきました。まとめてご依頼いただくことでデータの共有がスムーズに行えプロジェクトをスピーディーに進行することができました。また媒体の種類が異なってもブランドイメージが統一されるよう配慮して制作をおこないました。

機能開発

コンテンツ投稿機能

今後も更新される可能性が高い「ツアー情報」と「ステイ先情報」などのカスタムコンテンツタイプを設けました。 コンテンツのテンプレートに基づいて定められた情報を入力するだけで自動的にページが作成され、一覧ページやトップページなど任意の関連ページにも自動で表示されるため、更新が容易でクライアントにとってもユーザーにとっても便利で使いやすい仕様となっております。

スライドショー

ホームページのページ上部で留学先の様子を紹介するスライドショー機能を搭載しました。 jカルーセルという JavaScript / jQuery のライブラリと Drupal のモジュールを使用して実現しており、クライアント自身で好きな写真に入れ替えることができます。

お問い合わせフォーム

Drupalの機能の中でも人気の高い、「Webform」モジュールを使用し、お問い合わせフォームを構築しました。 学生向けのサイトですので、ユーザーの大学名や、学部・学科といった情報が入力できるよう設定しています。お問い合わせフォームによって、ユーザーが通常のメールには書かないと思われる情報を、ホームページを通じてお聞きすることが可能です。 サイト管理者にとって、利点はもう一つあります。お問い合わせフォームを使用することで、管理者のメールアドレスを公開する必要がありませんので、スパムメールの受信を防ぐことができます。

ブログ

今回クライアントからのご要望で、サイト内にブログを設置しました。文章、画像、You Tube動画を簡単に設置できるよう設定しております。写真や動画などのコンテンツと関連性の高いブログを更新すると、SEOへの効果も期待できます。

ブログの通知システム

クライアントから、ユーザーがブログの新着記事をすぐにチェックできる、通知システムの追加への強いご要望がありました。 Drupalの「Mailchimp」モジュールを使用し、サブスクリプション・インターフェースをサイトに追加することが可能となりました。投稿通知の登録者の管理は、無料サービス(2000人の加入まで)を通して、Mailchimp上で行われています。 「Rules」というDrupalモジュールを使用し、新しいブログが投稿されると、登録者にメールによる通知を送信する機能を設定しました。

サンリラクゼーション

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

デザイン

コンセプト

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

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

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

配色

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

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

機能開発

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

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

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

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

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

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

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

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

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

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

動画のハイライト表示

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