Sonder

本サイトのコンセプト策定・素材撮影・Webデザイン・コーディング実装を担当しました。

やわらかな質感の生成り色をベースに、温かみのあるオレンジをアクセントにすることで、主張しすぎない「穏やかで落ち着きのある空気感」を表現しました。ありのままを表す"自然体"をコンセプトに、ファインダーを通して切り取った静かな風景を添え、余白や文字の佇まいを丁寧に整えています。
訪れた方が、スッと肩の力が抜けるような、心地よく巡っていただける世界観を目指しました。

• 世界観を深めるローディングとスライドショー

  初回来訪時のみ起動するローディングを実装し、期待を寄せていただけるよう演出しました。ファーストビューではズームをフェードインをふわっと繰り返し、コンセプトである自然体を表現しました。

• どの位置でも読みやすいヘッダーの色変化

  スクロールをして暗い背景から明るい背景へ移る際、文字や装飾ラインの色がグラデーションしながら滑らかに変化するJavaScriptを実装しました。いつでもメニューが見やすく、サイト内の回遊性向上にも繋がります。

• スムーズで崩れないFAQの開閉

  よくあるご質問（FAQ）の開閉には、画面の表示が崩れにくく、動きも軽い、最新の仕組みを採用しました。レスポンシブでもカクつくことなく、サクサクとスムーズに回答を確認していただけます。

• スクロール時のふわっとした表示演出

  画面を下にスクロールした際、写真や文章がスムーズに浮かび上がる演出を加えました。スマホでも表示が重くならず滑らかに動く仕組みを使っているため、読みやすさを保ちながら、動きを楽しんで読み進めていただけます。

• 将来の変更や管理がしやすいコード設計

  目に見えないホームページの裏側のコード（設計）を整理整頓し、パーツごとに分けて構築しました。サイトリニューアルや追加・修正が生じた際にも、崩れにくくスムーズに修正・更新が行える安心の構造になっています。

website：https://mariko-nakaura.com/