🍩 ベーグル研究所 🍩

コーディングを勉強して初めて制作した、思い入れのあるサイトです。
登場するベーグルはすべて自分の手作りで、その魅力を伝えたいという想いから制作しました。

概要

ベーグルの多様な魅力を紹介するため、写真・説明を整理したサイト構成にしました。
▶ ベーグル研究所のサイトはこちら

ターゲット層

パンやベーグルが好きな20〜30代女性。
写真を見て楽しむ人向け。

制作ポイント

• ベーグルの質感をより伝えられるように、写真の見栄えにこだわり、切り抜きや比率を工夫しました。
• また、Swiperを用いてカテゴリごとの切り替えを可能にし、 直感的に情報へアクセスできるようにしました。
• 「イチオシ」セクションでは、短い文章でも魅力が伝わるよう表現を工夫し、
  さらにAOSアニメーションやSVGのウェーブを加えて、ふんわりとした柔らかい雰囲気を、演出しました。

課題

• トップページを作らず、いきなり「ABOUT」から始まる構成になってしまい、閲覧者にとって唐突さを感じる可能性がある。
• メインビジュアルやキャッチコピーがないため、サイト全体の世界観や第一印象を伝えきれていない。
• フォントや余白のバランスが部分的に甘く、可読性やデザインの統一感に改善の余地がある。

改善点・次への活かし方

• トップにメインビジュアルとキャッチコピーを配置し、サイトの目的や雰囲気を直感的に伝えられるように改善します。
• フォントやカラーを再整理し、余白の取り方も含め全体の統一感を意識し、より世界観を表現できるデザインにブラッシュアップします。

制作期間

約3週間

使用ツール

HTML / CSS / JavaScript / Swiper / AOS

🌏 ワタシタビ 🌎

旅行好きな自分の旅をまとめたポートフォリオサイトです。
実際に訪れた旅行先の写真や感想を通して、旅の記憶を共有できるように制作しました。

概要

北海道・愛媛・奄美大島・韓国など、これまでに訪れた旅行をまとめています。写真を中心に、
シンプルな文章とアニメーションで「見やすさ」と「わくわく感」を両立しました。
▶ ワタシタビのサイトはこちら

ターゲット層

旅行好きな人や、写真を眺めるのが好きな20〜40代。
長文を読むよりも、雰囲気や写真から直感的に楽しみたい人を想定。

制作ポイント

• トップページには GSAPの横スクロールアニメーション を取り入れ、シンプルながらも動きのあるデザインにしました。
• 各セクションのカードは ホバーで昼と夜の景色が切り替わる ように設計し、写真からその土地の魅力を直感的に感じられるよう工夫しました。
• ハンバーガーメニューでは地域名をホバーすると、色付きの地図が横に浮き上がる ようにし、視覚的に分かりやすくしました。
• 詳細ページでは ブログ風の構成 にしつつ、AOSアニメーションで写真と文章がスクロールに合わせてふわっと表示されるよう演出しました。

課題

• セクションや旅行ごとの見出し・区切りが弱く、スクロール中にどの旅行を見ているかが直感的に伝わりにくい。
• 旅行ごとの回遊導線やカードの差別化が薄く、訪問者がどの旅行から閲覧すべきか迷う。

改善点・次への活かし方

• 各旅行セクションに写真＋タイトル＋装飾ラインを組み合わせた見出しを設け、スクロール中でも「旅の切り替わり」が分かるように改善します。
• 旅行ごとのカードにカラーアクセントやアイコンを追加し、視覚的に差別化することで回遊性を高めます。たとえば北海道は雪の結晶、奄美大島は海の波などテーマ性を反映させます。

制作期間

約4週間

使用ツール

HTML / CSS / JavaScript / AOS / GSAP

← TOPへ戻る