さんぽNavi(卒業制作)

OVERVIEW

散歩をテーマにした診断型Webサイトを制作しました。 [ 使用ツール:illustrator,Photoshop,VS Code,HTML,CSS,JavaScript  制作期間:2025年 4月 〜 2026年 1月 ]

YEAR 2025

作品概要

散歩をテーマにした診断型Webサイトを制作しました。
ユーザーが3つの質問に答えることで、自分に合った散歩ルートを診断できる仕組みになっています。
楽しみながら散歩の新しい魅力を発見できる体験型サイトを目指しました。


制作背景

私は普段から散歩をすることが多く、散歩には気分転換や新しい発見など多くの魅力があると感じていました。

しかし、散歩は目的がないと楽しみ方が分かりにくいと感じる人もいるのではないかと考えました。そこで、ユーザーが質問に答えることで自分に合った散歩の楽しみ方を見つけられるWebサイトを制作しました。

診断形式にすることで、ゲーム感覚で楽しみながら散歩の魅力を知ることができるサイトを目指しました。



デザインの工夫

・診断サイトの流れが分かりやすいよう、シンプルで直感的なレイアウトを採用した。

・質問 → 選択 → 診断結果という流れが自然に理解できるよう、ボタンや導線を整理した。

・イラストや配色を統一し、サイト全体の世界観を整えた。

・ユーザーが迷わず操作できるよう、情報量を整理しシンプルなUI設計を意識した。


サイト構成

トップページ(導入ページ)

診断ページ(質問選択)
↓    (JavaScriptを使用し、ユーザーの選択肢によって診断結果ページが変化)
診断結果ページ


学び・振り返り

今回の制作では、Webサイトのデザインだけでなく、ユーザーがどのように操作し、どのような流れで情報を受け取るかを考えることの重要性を学びました。

また、JavaScriptを用いて診断結果が変化する仕組みを実装することで、インタラクションのあるWebサイト制作の面白さを実感しました。

デザインとプログラムの両方を考えながら制作を進めることで、ユーザー体験を意識したWeb制作について理解を深めることができました。