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