柳川うなぎめしマップ
担当:ワイヤーフレーム、サイト内記事1本
- 情報デザイン専攻 3年
- Keywords:地域活性化, 柳川市, Webプラットフォーム
背景と目的
- 背景
- 元は平成22年に本学の商学部観光学科と芸術学部デザイン学科が協働して行ったものだったが、昨今のインターネットの普及やコロナ後の外国人観光客の増加を受け、紙媒体だけでは更新が難しかったり、外国語に対応していないなどの点が不便になってしまった。
- 目的
- そこで本プロジェクトでは、マップをリニューアルすることに加え、新たにWEBサイトを作成することで、更新頻度を上げ、様々な人が扱えるようにし、柳川市の持続的活性化に繋げる
- そこで本プロジェクトでは、マップをリニューアルすることに加え、新たにWEBサイトを作成することで、更新頻度を上げ、様々な人が扱えるようにし、柳川市の持続的活性化に繋げる
コンセプト
- 柳川市とWebサイトの持続的な活性化を促すために、写真を多くしてお店の魅力を発信する
- 持続的活性化に繋げる
成果物の仕様
- サイトマップ
- ワイヤーフレーム
仮アイコンに使用した素材
EXPERIENCE JAPAN PICTOGRAMS
- menuアイコン画像
- うなぎ栄養価記事<栄養価記事
メンバー
ソーシャルデザイン学科|Web制作
制作ツール
Macbook Air
Adobe Illustrator 2023
プロジェクトの期間
2024.1.20(コンテンツ)
まとめ
市からのご依頼のため学外の方へ受け渡すための構成であること、コンテンツと開発で班が分かれるため自分本位の構成にはなってはならないこと等、まだ作成途中の段階ではありますが、クライアントやユーザーの存在を第一に意識して行ったプロジェクトになりました。学科サイトと同じ仕様で開発が進められるため、サイトマップをもとに、わかりやすく簡潔な画面構成で、また実現可能かどうかを検討しながら進めました。
現物のマップ完成データを頂いたので、それを基にしてアイコンやUIのデザインなどを再編します。記事の作成も含め、完成までの期間でよりプロジェクトへの理解を深められたらと思います。
調査
現状調査
先行事例
- 文京グルメマップ
- あおざしからり
- TAKAYU♨︎温泉パーラー
(第一に学科サイトの構成を参考にしています)
技法・技術情報
これからのWebサイト設計の新しい教科書
【全部教えます!】WEBデザインの作り方紹介!できるまでの流れ-adobe Illustrator-
プロジェクト管理
スケジュール
1/17 20時からzoom会議
ブラッシュアップ〜1/20
ToDo
- アイコン作成
フッター作成うなぎ記事作成- PC版メニュー
アイコン資料集めブラッシュアップ(11/15迄)メインページ再編
2024.1.17
zoom
メニューアイコン->文字への提案
今後新しくパージを作る可能性を考えると、アイコン制では不便
30日までに各自サイトへの書き込み
2024.01.16
うなぎ記事完成
栄養価記事
ブラッシュアップ期間~1/20
2023.12.20
うなぎ記事編集
2023.12.13
2023.12.06
zoom会議
- 記事の文体
- 字数にとらわれる必要はない
- 書きたい項目があればそれを書く
- それぞれの記事でコンセプト、ターゲット層を決める(要報告)
観光客、
若い観光客▶︎若者が行って楽しそうな場所
今後やること - メニューアイコン
- 写真の加工
- UIデザインの作成
アイコン案
①お店一覧②うなぎについて③柳川について
④お知らせ記事⑤アクセス⑥検索ページ
未だ制作中の段階です。
完成マップの雰囲気に近くなるよう丸みを帯びたデザインを想定しています。
うな重・川下りの図案は、柳川にシフトしたwebサイトなので、独自のピクトグラムがあれば面白いのではないかと思い入れています。しかし、わかりやすさという観点で適しているのかどうか考え中です。
2023.12.1
サイトマップ作成
ワイヤーフレームの構成が説明不十分に感じたため、サイトマップを作成しました。
また、作成にあたり検索用ページを追加しました。
2023.11.29
お知らせ・アクセス
※画像二枚目のアクセスをクリックすると、ページ下部のアクセス欄へジャンプします。
- フリー記事ページ(お知らせ欄)の大枠です。学科サイトHOMEの構成と同じで、各店舗がこの1つのページに直接記事を書き込む形を想定しています。
お知らせとは別にブログ的な呟き欄の案も出ていますが、検討中です。 - メニューに格納されているアクセス(アイコン)は、メインページに羅列されるアクセス情報に直で飛べるリンクを付与する形を想定しています。
PC版フッター
PC版フッターのアイコン配置例です。
アイコンの補足用テキストの配置案が2案出ていますが、現在検討中です。
▶︎画像一枚目のアイコンの枠内に文字を収める案で決定しました。
2023.11.22
うなぎ記事、柳川記事の親ページ
店舗一覧のレイアウトを流用し、個別記事にジャンプできる仕様を想定しています。
2023.11.20
画像選定レビュー
zoomにて開催
2023.11.15
ブラッシュアップ
2023.11.13
レイアウトビュー
zoomにて開催
※ブラッシュアップ前
店舗個別詳細ページ
メニューのプルダウン▶︎アイコン式採用
仮アイコンに使用した素材
EXPERIENCE JAPAN PICTOGRAMS
店舗一覧▶︎2列採用
記事ページは一本直通から項目別の個別記事へ(検討中)
▶︎1記事3000~4000字の想定のため、記事ページを分けることに決定しました。
2023.11.9
meeting
スケジュール、ワイヤーフレームについて話し合い
- メインビジュアルは有と無の2パターン作成
- 店舗一覧は1列か2列の2パターン作成
- 編集アイコン作成、又素材探し
2023.11.8
ワイヤーフレーム進捗状況
ショップ一覧ページ、メニューのプルダウン内レイアウト作成
2023.11.1
中間報告を受けて
ワイヤーフレームの構成を変更
進捗状況
- スマホに移しサイズ感を確認しつつ制作
2023.10.25
役割決め
※病欠のため自宅で制作開始
ワイヤーフレームラフ
先にモバイル用サイトのデザイン制作
幅:360
- ハンバーガーメニュー挿入
- トップボタン挿入
- pukiwikiの仕様のため、ワイヤーフレームは1案▶︎並びをどうするか考え中
2023.10.18
サイトマップの項目洗い出し
ワイヤーフレームの作成
2023.10.11
Webデザインのアイデア
- *2023.10.04
PukiWikiについて
- PukiWikiとは
オープンソースのWikiソフトウェア。
プラグインが豊富で、skinにより見た目の変更が可能。
2023.09.27
第一回説明会
- CMS
- PukiWiki
2023.09.20
制作相談
テーマ案
- 室内用小型コンポストを中心とした、室内プランター栽培の提案と研究 ▶︎ハーブ、スパイス栽培を想定
- インテリアにもなるおしゃれな掃除用品ブランド
- 狭いキッチン収納提案
- 絵描きのためのツール
- Webサイト制作
- 柳川うなぎめし
先行事例
アクセスメモ
博多から西鉄柳川駅
博多駅ー(鹿児島本線)ー春日駅 春日駅ー(西鉄大牟田線)ー西鉄柳川駅(1時間半) 博多駅ー(空港線)ー天神駅 西鉄天神駅ー(西鉄天神大牟田線)ー西鉄柳川駅(1時間半) 博多駅ー(七隈線)ー薬院駅 薬院駅ー(西鉄天神大牟田線)ー西鉄柳川駅(1時間半)
うなぎメモ
成分 | 作用 | 可食部100gあたりの含有量(μg) | |
ビタミンA | レチナールの生成、免疫力向上 | 1,500 | |
ビタミンB1 | 糖質をエネルギーに変える、神経機能を正常に保つ、疲労回復 | ||
ビタミンB2 | 老化予防、脂質をエネルギーに変える | 0.75 | B6 |
ビタミンD | カルシウムの吸収や代謝を助け、骨への沈着を防ぐ | ||
ビタミンE | 抗酸化作用、老化予防、血行促進 | ||
カルシウム | 骨や歯を丈夫にする |
亜鉛 | 傷の修復や成長に不可欠、肌・爪・髪を健康に保つ、正常な味覚の維持 | |
たんぱく質 | 筋肉を作る | |
DHA・EPA | 血管系病気の予防、成人病予防 |
- 天然、養殖で栄養価に違いはない
- うなぎのアミノ酸スコアは97
ビタミンA
レチノール、レチナール、レチノイン酸の総称で、脂溶性ビタミンの一種。
うなぎに含まれる成分で最も多く、肉には100g中2400µg、肝臓には100g中4400µg含まれる。
不足すると、眼の暗順応(明るい場所から暗い場所へ移った時に目が慣れるまでの反応)が鈍くなり、夜盲症を引き起こす。進行すると、失明につながる恐れもある。眼や皮膚の乾燥、粘膜の免疫力の低下などの症状もみられる。
レチノールにおいては過剰摂取による問題もあり、急性と慢性の中毒症状がみられる。特に妊婦では胎児の形成に影響を及ぼす性質が確認されているため、必要量と上限摂取量を把握しておく必要がある。
※サプリメントによる過剰摂取が起こりやすいとされる。
1日の成人の推奨量は、男性で850~900㎍、女性で650~700㎍、耐容上限量は2700㎍。
ビタミンB2
水溶性ビタミンだが、水に溶けにくい。体内に蓄積されず、大量摂取による過剰症は起こらない。
アミノ酸
タンパク質の構成成分。中でも体内で生成ができない9種類は必須アミノ酸とされる。
アミノ酸スコア
たんぱく質に含まれる必須アミノ酸9種類のバランスを、最高100とし評価したもの。
脂溶性ビタミン
水に溶けにくく、油に溶けやすい。尿中に排出されず肝臓や脂肪に蓄積されるため、過剰摂取すると身体に悪影響を及ぼす。
参考
養殖ウナギの脂質栄養成分
おさかな栄養学
保健・医療・福祉のための栄養学
一生役立つ きちんとわかる栄養学
数字でわかる、うなぎの優れた栄養バランス
うなぎが高齢者の栄養不足に効く?効能や摂取時の注意点