CREATOR BLOG

ランディングページの作成

My Works 2017.05.01

3月〜4月も細かい仕事がありバタバタ気味でした。
こちらで作成したとアナウンスできる案件を掲載します。

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

ユニークPC
PCでのファーストビュー
スマートフォンでのファーストビュー
スマートフォンでのファーストビュー

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

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

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

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

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

デザインも個性的なユニークスタルの4つのタイプごとに色分けなどをしてわかりやすくしています。

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

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

    ▲ PAGE TOP