【サイト制作】ぶどう農家
紀伊半島東部に位置し、オンラインストアを新規開設したぶどう農家のホームページを作成しました。HTML、CSSでのコーディング、JavaScript、PHPでプログラムを作成しています。デザインについてはPhotoshop、Illustratorを使用しています。
[ 目次 ]
■ 概要
■ 要件定義
■ 情報設計
■ デザインの意図
■ 実装機能
■ 概要
▼ スケジュール
１．要件定義
所要時間 ：2.00h
２．情報設計
所要時間 ：2.00h
３．ワイヤーフレーム作成
所要時間 ：3.00h
使用ツール：Adobe Illustrator
４．デザインカンプ作成
所要時間 ：6.00h
使用ツール：Adobe Photoshop
５．コーディング
所要時間 ：5.00h
使用言語 ：HTML
使用ツール：Adobe Dreamweaver
６．スタイリング
所要時間 ：10.00h
使用言語 ：CSS・SCSS・JavaScript・jQuery・PHP
使用ツール：Adobe Dreamweaver
■ 要件定義
▼ ペルソナ設定
・伊勢志摩観光を考えている方
・オンラインストアを通してぶどうの購入を考えている方
▼ サイトの目的
・当農園の認知
・オンラインストアへの誘導
▼ キーワード／イメージ
・清潔感、上質さ、高級感
■ 情報設計
▼ 「オンラインストアへ」ボタン
・現在いる位置に関わらず、すぐにオンラインストアページに遷移することが可能です。
▼ 「Contact」ページ
・入力不備による送信を防ぐため、空欄を制御しています。
・お問い合わせ内容のセレクトボックスの選択内容によって、表示する入力欄を制御しています。
---------------
『【申し込み】真夏のぶどう狩り2022』 ...「参加日時」「参加コース」欄を表示
『【申し込み】真夏のぶどう狩り2022』以外...「参加日時」「参加コース」欄を非表示
---------------
▼ フッター
・上部に設定したグローバルナビゲーションと同じコンテンツを、フッター内にも設置しました。「Home」リンクは上部にスクロールする機能を持っています。
■ デザインの意図
▼ ヒーローイメージ
・インパクトを感じさせるために、ぶどうの画像を画面いっぱいに表示しました。グローバルナビゲーションは画像の下に設置しています。
・当農園のロゴを強調するために、数秒後に画像中央にロゴを表示させています。
▼ グローバルナビゲーション
・ロゴにリンクを付与していないため、グローバルナビゲーション内に「Home」を設けることで、現在いる位置に関わらずどこからでもトップページに遷移できるようにしています。
▼ アイコン
・上質さ、高級感を感じさせるために、アイコンを使用しておりません。
▼ トップページ
・「キャッチコピー」セクション
-和のイメージを強調するため、縦書きを採用しています。
-当セクションの読み飛ばしを防ぐため、背景は無地の白にし、文章以外に目線が散らないようにしました。
-背景に無地の白を採用しているのは、当セクションの読み飛ばしを防ぐためです。文章以外に目線が散ることを防いでいます。
-ヒーローイメージの次に目に入るキャッチコピーには、下記のポイントを意識して作成しました。
①長くない文章
②安全性や価格等の具体的な情報は記載しない
③生産者の気持ちや思いを伝える文章
・「Topics」セクション
-サイト自体に動きをつけるため、スライドを設置しています。
-バナー内容が商品紹介中心なのは、新規開設したオンラインサイトへ誘導したいためです。
・「Grape」セクション
-当農園のぶどうの特徴をこのセクションにまとめています。
-和のイメージを感じさせるために背景は和紙の画像を使用しています。（カラーは加工したものです）
・「Quality」セクション
-当農園の安全性への注力具合／実施策のセクションを設けることで、フルーツの高品質さのアピールを狙っています。
・「Product」セクション
-オンラインストアで販売している自社ブランドぶどう・伊勢ぶどうを大きく表示しています。
-加工品も併せて表示しており、いずれを押下してもオンラインストアに遷移する仕様にしています。
・「News」セクション
- 更新／メンテナンス作業が定期的に入っているサイトであることを強調するために、トップページ内に掲載しています。
・「Online Store」セクション
-トップページのアクセントとして、背景にぶどうのイメージ画像を設置しています。
-前面に配置したテキスト／ボタンの可視性を保つために、色を白に変更しました。
-ぶどうのイメージ画像を使用しているのは、購買意識の向上／オンラインストアへの遷移率向上を狙っているためです。
▼「Contact」ページ
・来店することなくお問い合わせができるように、当ページを作成しました。