- 内容
- 海外旅行をテーマにしたメディアサイトのコーディングを担当しました。
デザインカンプをもとに、写真を活かしたレイアウトやタイポグラフィ表現を忠実に再現し、ユーザーが旅行先を探す楽しさを感じられるサイトを目指して実装しました。
また、記事一覧や旅行先紹介など情報量の多いコンテンツでも見やすさを保てるよう、レイアウト構造や余白設計にも配慮しています。
- 制作背景
- デザインカンプをもとに、海外旅行をテーマにしたメディアサイトのコーディングを行いました。
タイポグラフィや写真を活かしたデザインが特徴的なサイトのため、レイアウトや文字表現、アニメーションなどをデザインの意図を崩さないよう再現することを意識して実装しました。
- 課題
- 写真を大きく使用したレイアウトやタイポグラフィ表現を、デザインカンプ通りに再現する必要があった
- MVの文字表現やタイトルの向きなど、通常のテキスト表現では実装が難しいデザインが含まれていた
- 記事一覧など情報量の多いセクションを、デザインを崩さずレスポンシブ対応する必要があった
- 解決
- MVのキャッチコピーは白文字と黒文字を重ねることで、デザインカンプの表現を再現
- clip-pathを使用してタイトルの向きや見せ方を調整し、デザインの印象を維持
- ReportセクションはCSS Gridを使用してカードレイアウトを実装
- Swiperを使用して旅行先一覧の無限ループスライダーを実装し、デザインの動きを再現
- 工夫
- アニメーションの見せ方にこだわり、静的な情報サイトではなく体験として印象に残るサイトを目指した
- MVのタイポグラフィは白と黒の文字を重ねることで、背景写真の上でも存在感が出るように調整した
- ReportセクションではGridを活用し、レスポンシブで崩れないようにコーディングしました
- Swiperによる無限ループとカードにカーソルを当てた際に画像のscaleを少し上げました
- clip-pathを使ったタイトル表現で、各セクションに動きとメリハリを持たせた
- 担当範囲
- コーディング
- レスポンシブ対応
- JavaScript実装
- アニメーション実装
- 使用言語
- HTML / CSS / SCSS / JavaScript / jQuery
- 制作期間
- 2〜3週間
- 料金目安
- 5万円〜8万円
- URL
- https://wanderglobe.toyo-portfolio.com
