まちなが家族農園
既存のノーコードツールサイトのhtmlやcssによるリニューアル
- 待永萌衣
- Keywords：みかん農園, webサイト, html,css
- 既存のサイト：https://www.machinaga-farm.com
- まちなが家族農園のサイト：https://moe-ksu.github.io/machinaga-farm/
概要
これは何？
- みかんを主に販売する家族農園のwebサイト
背景
- 短期大学の卒業研究でノーコードのwebサイトとオンラインショップを制作
- 現在Wixの有料プランを利用（広告の非表示、独自ドメインの取得、データ容量2GB）
- ノーコードツールはテンプレートやCSSを途中から変更することができない
- 依頼者(母)が望む「親しみやすい家族農園」を伝えるサイトとしては不十分だった
- ネットショップを求めたサイト訪問者にとって、ネットショップへのリンクボタンが分かりづらい
- 長期的に運用していきたいため、中身がブラックボックスであるものや、表示速度が遅く、データ容量が限られているものは相応しくないと感じた
目的
- 依頼者(母)の「親しみやすい家族農園、家族全員で農園を支えている暖かい家族農園であること、一つひとつ手作業で愛情を込めて育てていることを伝えたい」という要望に応える
- より多くのサイト訪問者に、ネットショップまで閲覧してもらう
- 今よりもセッション数や閲覧数、ファン数を増やす
コンセプト
- 親しみやすさやあたたかさを表現する
- フォントや図形を、丸みを帯びたデザインにする
- 文章は私目線で書く
- イラストや吹き出しなどを用いる
- 農業関係の企業の方も閲覧しやすいように、cssで派手なデザインや動きを入れすぎない
成果物の仕様
- web形式（複数ページ）
- GitHub
- Visual Studio Code
制作ツール
- Mac
- MacBook Air
- Visual Studio Code
プロジェクトの期間
- 2024/04/09 - 後期まで
まとめ
- 見出しや吹き出しなど細かいところまでコンセプトに沿って制作することができたと思う
- 後期
- スマホで開いた場合、部分的にレイアウトが不完全なところがあるため、レスポンシブ対応を完璧にさせる
- 農園の風景や、農園について詳しく紹介する動画の制作
- 最終報告で受けた指摘
- ホームページにまちなが家族農園らしさを出す
ネットショップへのリンクを画面に固定させる、風船をゆらゆら動かす私目線で書いていることを分かりやすくする文の最後に自分の名前を記載
調査
現状調査
- 実際に市場などで購入するよりネットショップを利用する人が多い
- 2023年12月から2024年5月までのトラフィック概要
- サイト訪問数全296件
- デバイス別セッション
- モバイル 60%, PC 39%, タブレット 1%
- モバイル 60%, PC 39%, タブレット 1%
- サイト訪問数全296件
先行事例
- Wixで制作した現在のまちなが家族農園のwebサイト
- やまだい農園 信州りんご発祥の里
- 善積農園
- 背景や各セクションごとに可愛らしいイラストやデザインが用いられていて、分かりやすく親しみやすいサイト
- エステサロンのサイト
- ひとつひとつの情報が端的にまとまっていて見やすい
- ひとつひとつの情報が端的にまとまっていて見やすい
技法・技術情報
- htmlやcssなどのwebデザインの技術
プロジェクト管理
スケジュール
ToDo
ノーコードツールのサイトをコーディングするフォントを統一させるメインビジュアル画像の上に文字を配置する- スマートフォンに対応させる
- 改良点
ヘッダーを固定する好評価レビューの項目を追加する商品一覧により詳しい説明を入れるネットショップへリンクするボタンをメインビューにも配置するInstagramの見せ方を変える背景にイラストをつける
- 中間報告で受けた指摘
誤字脱字自分のことを目的やコンセプトに入れないスマートフォン対応に設定できるコードを入れるご挨拶の文をコンパクトにするフォントのサイズや書体を揃える商品一覧に商品の説明を入れる縦書き画像をhtmlとcssで表示させる
進捗記録
2024.07.23
ブラッシュアップ
- 最終報告で受けた指摘
- ホームページにまちなが家族農園らしさを出す
ネットショップへのリンクを画面に固定させる、風船をゆらゆら動かす私目線で書いていることを分かりやすくする文の最後に自分の名前を記載
- 犬の画像をボタンだと分かりやすくするために、動きをつけた
- 細かいレスポンシブ対応を行なった
- ヘッダーのリンクボタンをまとめて、ハンバーガーメニューで表示させたい
- スマホの機種によって表示のされ方が異なるので、機種別の対応も行なっていきたい
2024.06.25
進捗状況
メインビジュアル画像の上に文字を配置する- スマートフォンに対応させる
- 改良点
Instagramの見せ方を変える背景にイラストをつける
- 中間報告で受けた指摘
縦書き画像をhtmlとcssで表示させる
2024.06.18
進捗状況
- 改良点
好評価レビューの項目を追加する商品一覧をもっと詳しく分かりやすくするネットショップへリンクするボタンをメインビューにも配置するInstagramの見せ方を変える- 背景にイラストをつける
- 中間報告で受けた指摘
フォントのサイズや書体を揃える商品一覧に商品の説明を入れる- 縦書き画像をhtmlとcssで表示させる
2024.06.11
進捗状況
- https://moe-ksu.github.io/machinaga-farm.20240611/
- オンラインショップへのリンクボタンの作成
- 別ページへのボタンの作成
- 中間報告で受けた指摘
誤字脱字自分のことを目的やコンセプトに入れないスマートフォン対応に設定できるコードを入れるご挨拶の文をコンパクトにする- フォントのサイズや書体を揃える
- 商品一覧に商品の説明を入れる
- 縦書き画像をhtmlとcssで表示させる
2024.06.04
進捗状況
- 従来のサイトのコーディングの完成
2024.05.28
進捗状況
- 改良点
ヘッダーを固定する- 好評価レビューの項目を追加する
- 商品一覧をもっと詳しく分かりやすくする
- ネットショップへリンクするボタンを分かりやすくする
- 背景にイラストをつける
- 2023年12月から2024年5月までのトラフィック概要
- サイト訪問数全296件
- デバイスセッション
- モバイル 60%, PC 39%, タブレット 1%
- モバイル 60%, PC 39%, タブレット 1%
- サイト訪問数全296件
2024.05.21
進捗状況
- 中間報告に備えて、従来のサイトのコーディングを行なった
- 画像を３行３列に並べるコーディングに苦戦した
- 画像を３行３列に並べるコーディングに苦戦した
2024.05.14
進捗状況
- 中間報告に備えて、従来のサイトのコーディングを行なった。
- 改良点
ヘッダーを固定する
新たな改良点
- ネットショップへリンクするボタンを分かりやすくする
- Instagramの見せ方を変える
2024.05.07
進捗状況
- スケジュールを制作した
- 中間報告に備えて、ホームページ制作を進めた。
2024.04.30
進捗状況
- 前回に引き続き、テンプレートのコードを変えて更新した
- html辞典で様々なタグの使い方を学んだ
- 主に改良したい点
- リンクを固定する
- 好評価レビューの項目を追加する
- 商品一覧をもっと詳しく分かりやすくする
2024.04.23
進捗状況
- htmlやcssのテンプレートのコードを変更したり、追加したりした
2024.04.16
テーマ
- まちなが家族農園のサイトのリニューアル
先行事例
- Wixで制作した現在のまちなが家族農園のwebサイト
- 参考にする農園のサイト
2024.04.09
調査
- 家族農園のサイトの更新
キーワード
- webデザイン
- 動画編集
main3.png
main2.png
トラフィック概要.png
main.jpg
main.png
