【自主制作】Webサイトリニューアル案（ぶどう園）

目次

1.制作物

2.要件定義・ペルソナ

3.工夫した点（情報設計）

4.工夫した点（ビジュアルデザイン）

5.制作を通して得たこと

1.制作物

制作時期：2024年5月
制作期間：3週間
制作範囲：要件定義・ペルソナの設定・情報設計・ワイヤーフレーム・デザインカンプ

使用ツール：Photoshop

【制作背景】

今回制作したぶどう園は祖父が経営しているぶどう園です。奥屋敷園の魅力を理解しているのでその魅力を最大限に表現したいと思い、Webデザインを学び始めて最初の自主制作に選びました。

2.要件定義・ペルソナ

要件定義とペルソナの設定を一から行いました。

3.工夫した点（情報設計）

現行サイトでは下層ページに詳細情報が主に記載されている状況であったため、ユーザーが知りたい情報へ辿り着く動線がわかりづらい点が多くありました。

その為、以下の通り情報の追加とビジュアルの変更を行いました。

4.工夫した点（ビジュアルデザイン）

◆ロゴの作成

奥屋敷園の最大の魅力である世界各国のぶどうを取り扱っている点をアピールするため、ロゴを作成。色々な種類のぶどうがあることをカラフルな円で表現しました。

◆見出しアイコンの作成

種類として挙げられている、緑系・黒系・赤系のぶどうにちなんで、３色で見出しアイコンを作成し楽しげなイメージを演出しました。

◆配色

ぶどうの紫を基調として、緑系・黒系・赤系のぶどう３色をアクセントカラーに使用。

背景や文字色は馴染みの良いグレーとブラウンを設定し、アクセントカラーが映えるように意識しました。

◆背景

壁紙のようなテクスチャーで農園らしいナチュラルなイメージを演出しました。

5.制作を通して得たこと

• 自分の都合の良いペルソナ像を作らないように意識すること
• 園やサービスの特徴、他の園との優位性をアピールできるビジュアルデザイン
• Photoshopでのデザインカンプの制作