新規ランディングページの作成その2
最近は下請け案件が多く、直案件が少ないのでこちらで作成したとアナウンスできる案件がいつもコグマホーム様になってしまいます。
いつもお世話に成っているコグマホーム様が「ナチュラルスタイル」住宅という新しいシリーズ発表にともない、そのランディングページを作成しました。
http://www.kogumahome.com/style_tax/natural/
レスポンシブWebデザインで作成し、今までのテンプレートとは全く切り離した感じでの作成となっています。
いつもレスポンシブでの作成ではブレイクポイントは最近、基本768、960、1200と3つのポイント+どうしてもの箇所として480pxとスマートフォンの大きめと小さめのサイズにも対応する形でコーディングしています。
メインビジュアル部分はslickというjQueryプラグインを使用しています。
こちらは、レスポンシブにも対応しているので、こういった案件の際にはとても便利です。
今回はフェードイン/アウトで柔らかい感じにし、また画像自体も徐々に小さくなる処理もオリジナルで追加しています。
http://kenwheeler.github.io/slick/
とにかく、子育て世代応援というコンセプトで柔らかく楽しい雰囲気のデザインにしています。
また下方の施工事例のMouse hoverで、タイトルとカテゴリを動かす設定をしていますが、タッチデバイスの場合は一回タップするとその部分が表示、再度タップするとリンクに飛ぶという設定をしています。
そうすることで、マウスホバーのないタッチデバイスでも同じようなアクセシビリティを得ることができます。