Sonder

北陸を中心に犬と猫の出張写真館を展開されている「コマと余白」様のWebサイトコーディング（TOPページおよび各下層ページ）を担当いたしました。

ワンちゃんや猫ちゃんの表情から伝わる和やかな雰囲気と、レトロで品のある世界観を損なわないよう、余白の取り方や繊細なアニメーション表現にこだわり、サイトを訪れた方が自然と世界観に引き込まれるような実装にしました。

• スクロールに応じたヘッダーの動的変化

  ファーストビューでは背景を透明にして写真を際立たせ、スクロール時には視認性を高めるため、JavaScriptでスクロール位置に合わせて背景を半透明（色付き）へスムーズに切り替える実装を行いました。

• メインビジュアルの動的演出

  ファーストビューの写真には、JSアニメーションを活用したフェードインのスライドショーにすることで、ワンちゃんや猫ちゃんが持つ可愛らしさをふわっと表現しました。

• スクロールを促すアニメーション

  画面中央のSCROLLには、CSSアニメーションを組み合わせ、縦書きテキストに合わせてシームレスに流れるライン描画を実装しました。

• サイト全体の統一感を意識したホバー演出

  ボタンやリンクなどのホバー表現はデザインを崩さないことを第一に考え、透過度の調整や色の反転など、要素の役割に応じた演出をサイト全体で統一感を持たせて設計しました。

• SCSSモジュール設計による高い保守性の確保

  @use を活用し、変数・共通パーツ・ページ別スタイルをディレクトリごとに分割管理しました。コードの競合やバグを防ぎ、将来的なデザイン変更や機能追加にも柔軟に対応できる構造にしています。