栃木ハウス株式会社 様

http://www.tochigi-house.com/
  • カテゴリ:
  • コーポレートサイト
  •  

栃木ハウス株式会社様のトップページとナビゲーションのリニューアルにおいて、制作全般をお手伝いさせていただき、シネマグラフ等の動きのあるビジュアルを表現いたしました。

Client
栃木ハウス株式会社 様
Devices
PC
Production Time
1ヶ月
Launch
2017/8/23

プロジェクトスタートの背景
プロジェクトスタートの背景

元々トップページはFlashで作られていた事と、長らくメンテナンスで携わらせていただいており、いろいろと成果を出すための施策を行ってきましたが、コンテンツが増えた事により、既存のデザインでは見せたいコンテンツへの誘導が難しくなってしまったため、リニューアルを行いました。

制作のポイント / 特徴
制作のポイント / 特徴

シネマグラフ・canvasアニメーションを取り入れ、ユーザーに飽きさせないビジュアルと、主要コンテンツへの誘導をわかりやすくする事で、ユーザーの見たいコンテンツがわかりやすくなるようなデザインとなっております。

全ページのヘッダー・フッターナビゲーションはわかりやすさを第一に、メガナビゲーションを取り入れひと目で全体を把握できるようにする事と、コンテンツが追加された場合でもメンテナンス性が高く保てるようにしております。

制作のポイント / 特徴

制作担当者から
制作担当者から

  • 小島 和剛
    デザイナー
    小島 和剛
    Kazutaka Kojima

    目的を持ったユーザーが迷いにくいサイト構成を意識して設計しました。
    また、動きの部分では栃木ハウスさまの魅力である外観・内観のデザインを感じ取っていただけるよう、見ていただけるような動きを入れつつ、動きだけに目が行き過ぎないようアクセントとして取り入れました。

  • 小河原 隼佑
    デザイナー
    小河原 隼佑
    Syunsuke Ogahara

    「高級感(ビジュアル)」×「使いやすさ(UI)」の両立を目指し、Webサイトとして効果を発揮するデザインと致しました。
    住宅の写真や、シネマグラフは目立たせたい所に大きく使うことで、サイト全体にメリハリをつけています。
    また、高級感のあるビジュアルを表現するために、コーポレートカラーである黒とブラウンを基調としております。
    黒×茶にすることで、各住宅の写真がより美しく映えると思います。

    メインイメージのシネマグラフはコンテンツのアイキャッチとしても効果的です。コンテンツの写真が動くことにより、印象的なイメージをあたえ、閲覧ユーザーへの興味を喚起し、各下層ページへ誘導します。

    背景に写真を多く使いましたが、色味を抑え統一させることで、中身のコンテンツや文章を邪魔しないように工夫しております。

  • 姿 良和
    フロントエンドエンジニア
    姿 良和
    Yoshikazu Sugata

    今回は、シネマグラフやループアニメーションなどを実装しました。
    リキッドになっている箇所もあり、ブラウザ枠の伸縮によって表示不具合が起きない様にしました。
    また、ヘッダーフッターは、下層ページや特設ページに設置されている既存の物と差し替えとなるため、HTMLソースを簡単に移植できる様にコーディングを行いました。CSSについても、固有のプレフィックスを付ける様にすることで、既存とバッティングしてしまわない様にしました。

ホームページ制作 / リニューアルのご相談は0円です!
まずはご相談ください!

「今よりお問い合わせの数を増やしたい!」「ホームページを作りたいがどのように進めていったらよいかわからない」、「ホームページ制作ってどれぐらい費用が必要なんだろう」、「ホームページをリニューアルしたいけどどこをどう改善したらよいのだろう」など、皆様の課題や問題をマリンロードに教えてください。解決策をご提案させていただきます。
制作費用も予算が限られている場合は、そのご予算に応じた内容で解決できる方法をご提案いたします。

私たちは、「企画/提案」「設計/デザイン」「サーバー/ドメイン」「制作」「プロモーション」「運用/メンテナンス」とホームページに関わる全てのサービスを一貫して請け負うことが可能です。
また、これらを全て会社内で行えるWeb会社は珍しく、各担当者間での意見交換やアイディア出し、実現/制作スピードの向上が増し最適な問題(課題)解決ができることが強みとなっています。

マリンロードのサービスはこちら

  • Webプロモーション
  • ホームページ制作
  • システム開発
  • オンラインショップ制作
MR-Lightning
ページTOPへ