イエスマ｜岐阜市の住宅相談窓口LP

住宅相談窓口「イエスマ」様の岐阜市向けLPのコーディングを担当しました。デザインはあおさん（@sakuao_Dz）です。
「ここなら気軽に相談できそう」と感じてもらえるデザインの温かさを、動きやスマホでの見え方まで崩さないことを大切にしました。

こだわりポイント

デザインの空気感に合わせた出現アニメーション

アニメーションの指定は特になかったため、デザイン全体のフレッシュな雰囲気に合わせて、ゆっくりではなく一気にフェードインする動きをご提案しました。
ハンバーガーメニューの動きと質感もそろえてページ全体に統一感を持たせ、人物などの装飾は関連するテキストと同じタイミングで表示されるよう同期させています。

スマホでの比較表の横スクロール

左列を固定すると、横の人物写真に表が重なってしまう問題を、動画を添えて共有しました。
あおさんのアイデアをもとに、写真の手前で表が見切れる横スクロールに変更しています（ご相談から約2時間で実装）。

読みやすさを優先したスライダー

お客様の声は、文章を読んでいる途中で切り替わらないよう自動再生なしにしました。
スマホでは、自分のタイミングでスワイプして読める仕様です。

ピクセルパーフェクトと、どの画面幅でも崩れないレスポンシブ

デザインカンプどおりの見た目に合わせたうえで、カンプにない中間の画面幅でもレイアウトが崩れないよう細かく調整しました。

制作中に意識したこと

FVのデザイン2案へのフィードバック

「家づくりの会社なので、重心が中央にある方が安心感につながりそう」とお伝えし、最終的に中央に重心を置いたFVに決まりました。

どの端末でも同じ見え方になるフォントのご提案

フォントのご相談をいただいた際に、Windows・Macのどちらでも表示差が出ないGoogle Fontsをおすすめし、Noto Sans JPで統一しました。

引き継ぎを見据えた納品

公開後の細かな修正はディレクターさんが担当されるため、開発環境の使い方をまとめたREADMEを同梱しました。

デザイン：あお（@sakuao_Dz）
コーディング：こんかい（@konkai_web）