いつもお世話に成っているコグマホーム様のフラッグシップスタイルというべき「オーガニックスタイル」住宅という新しいシリーズ発表にともない、そのランディングページを作成しました。

http://www.kogumahome.com/style_tax/organic/

レスポンシブWebデザインで作成し、今までのテンプレートとは全く切り離した感じでの作成となっています。

いつもレスポンシブでの作成ではブレイクポイントは最近、基本768、960、1200と3つのポイント+どうしてもの箇所として480pxとスマートフォンの大きめと小さめのサイズにも対応する形でコーディングしています。

メインビジュアル部分はslickというjQueryプラグインを使用しています。
こちらは、レスポンシブにも対応しているので、こういった案件の際にはとても便利です。

今回はフェードイン/アウトで柔らかい感じにし、また画像自体も徐々に大きくなる処理もオリジナルで追加しています。

http://kenwheeler.github.io/slick/

また、スライドに合わせたテキストもフェードイン/アウトで切り替わるようにカスタマイズしています。

また下方の施工事例のMouse hoverで、タイトルとカテゴリを動かす設定をしていますが、タッチデバイスの場合は一回タップするとその部分が表示、再度タップするとリンクに飛ぶという設定をしています。
そうすることで、マウスホバーのないタッチデバイスでも同じようなアクセシビリティを得ることができます。

その他のお仕事は、製作会社様や代理店様からの依頼が多く、こちらでは紹介できないものとなっています。