CREATOR BLOG

新規ランディングページの作成その2

My Word 201705

最近は下請け案件が多く、直案件が少ないのでこちらで作成したとアナウンスできる案件がいつもコグマホーム様になってしまいます。

いつもお世話に成っているコグマホーム様が「ナチュラルスタイル」住宅という新しいシリーズ発表にともない、そのランディングページを作成しました。

ナチュラルスクリーンショット PC
PCでのファーストビュー
ナチュラル SP
スマートフォンでのファーストビュー

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

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

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

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

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

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

とにかく、子育て世代応援というコンセプトで柔らかく楽しい雰囲気のデザインにしています。

施工事例部分
タッチデバイスでも同様の効果を設定

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

    ▲ PAGE TOP