ハマナビサービスHP

Point 01　翻訳後の崩れを防ぐ設計で、余計な修正が発生しません

日本語・英語など言語切り替えによる文字量差・改行崩れを想定し、レイアウトが破綻しにくいHTML構造・CSS設計を行いました。

• 言語ごとの文字数差を考慮した余白設計
• 翻訳後の崩れを想定したレスポンシブ対応

Point 02　花火・波のモチーフを活かした世界観アニメーション

横浜らしさ・観光体験の高揚感を伝えるため、花火や波のモチーフに動きを加え、静的になりがちなページに奥行きを持たせました。

• 花火：一瞬で消えない、余韻を残す動き
• 波：主張しすぎず、背景として空間をつくる動き

コード抜粋（CSS）

.footer__fx-item {
  animation-name: fw-pop-in, floatY;
  animation-duration: 1.4s, 7.5s;
  animation-timing-function: cubic-bezier(.22, .85, .2, 1), ease-in-out;
  animation-fill-mode: both, none;
  animation-iteration-count: 1, infinite;
}

@keyframes fw-pop-in {
  0%   { opacity: 0;  transform: scale(.5); }
  100% { opacity: .9; transform: scale(1); }
}

.news__wave-top {
  animation: waveMove 14s linear infinite;
}

Point 03　予約・決済実装とセット

予約・決済フロー（Stripe連携）の実装にあたり、機能単位で工数を整理し、概算見積もりの作成から対応しました。

Point 04　飲食店・ホテル選択を含む条件分岐型の予約設計

• 予約時にレストランを選択できる仕組みを実装
• 予約内容に応じた対応がしやすい構成