伊藤みらの/情報デザイン研究II

柳川うなぎめしマップ

担当:ワイヤーフレーム、サイト内記事１本

• 情報デザイン専攻 ３年
• Keywords：地域活性化, 柳川市, Webプラットフォーム
  
  
  

背景と目的

• 背景
  • 元は平成22年に本学の商学部観光学科と芸術学部デザイン学科が協働して行ったものだったが、昨今のインターネットの普及やコロナ後の外国人観光客の増加を受け、紙媒体だけでは更新が難しかったり、外国語に対応していないなどの点が不便になってしまった。

• 目的
  • そこで本プロジェクトでは、マップをリニューアルすることに加え、新たに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の構成と同じで、各店舗がこの１つのページに直接記事を書き込む形を想定しています。
  お知らせとは別にブログ的な呟き欄の案も出ていますが、検討中です。
• メニューに格納されているアクセス(アイコン)は、メインページに羅列されるアクセス情報に直で飛べるリンクを付与する形を想定しています。
  
  

PC版フッター

PC版フッターのアイコン配置例です。
アイコンの補足用テキストの配置案が２案出ていますが、現在検討中です。
▶︎画像一枚目のアイコンの枠内に文字を収める案で決定しました。

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

スケジュール、ワイヤーフレームについて話し合い

• メインビジュアルは有と無の２パターン作成
• 店舗一覧は１列か２列の２パターン作成
• 編集アイコン作成、又素材探し
  
  
  
  

2023.11.8

ワイヤーフレーム進捗状況

ショップ一覧ページ、メニューのプルダウン内レイアウト作成

2023.11.1

中間報告を受けて

ワイヤーフレームの構成を変更

進捗状況

ワイヤーフレーム(制作中)

• スマホに移しサイズ感を確認しつつ制作
  
  
  
  

2023.10.25

役割決め
※病欠のため自宅で制作開始
ワイヤーフレームラフ
先にモバイル用サイトのデザイン制作
幅：360

• ハンバーガーメニュー挿入
• トップボタン挿入
• pukiwikiの仕様のため、ワイヤーフレームは1案▶︎並びをどうするか考え中
  
  
  
  

2023.10.18

サイトマップの項目洗い出し

ワイヤーフレームの作成

2023.10.11

Webデザインのアイデア

あおざしからり
TAKAYU♨︎温泉パーラー

• *2023.10.04

PukiWikiについて

• PukiWikiとは
  オープンソースのWikiソフトウェア。
  プラグインが豊富で、skinにより見た目の変更が可能。
  
  
  
  

2023.09.27

第一回説明会

• CMS
• PukiWiki

2023.09.20

制作相談

テーマ案

• 室内用小型コンポストを中心とした、室内プランター栽培の提案と研究　▶︎ハーブ、スパイス栽培を想定
• インテリアにもなるおしゃれな掃除用品ブランド
• 狭いキッチン収納提案
• 絵描きのためのツール
• Webサイト制作
• 柳川うなぎめし
  
  

先行事例

文京グルメマップ

• ジャンル・エリア・最寄駅別にカテゴライズされており検索性が高い。
  
  
  
  
  

アクセスメモ

博多から西鉄柳川駅

博多駅ー(鹿児島本線)ー春日駅　春日駅ー(西鉄大牟田線)ー西鉄柳川駅(1時間半)
博多駅ー(空港線)ー天神駅　西鉄天神駅ー(西鉄天神大牟田線)ー西鉄柳川駅(1時間半)
博多駅ー(七隈線)ー薬院駅　薬院駅ー(西鉄天神大牟田線)ー西鉄柳川駅(1時間半)

うなぎメモ

• 天然、養殖で栄養価に違いはない
• うなぎのアミノ酸スコアは97
  
  
  
  

ビタミンA
レチノール、レチナール、レチノイン酸の総称で、脂溶性ビタミンの一種。
うなぎに含まれる成分で最も多く、肉には100g中2400µg、肝臓には100g中4400µg含まれる。
不足すると、眼の暗順応(明るい場所から暗い場所へ移った時に目が慣れるまでの反応)が鈍くなり、夜盲症を引き起こす。進行すると、失明につながる恐れもある。眼や皮膚の乾燥、粘膜の免疫力の低下などの症状もみられる。
レチノールにおいては過剰摂取による問題もあり、急性と慢性の中毒症状がみられる。特に妊婦では胎児の形成に影響を及ぼす性質が確認されているため、必要量と上限摂取量を把握しておく必要がある。
※サプリメントによる過剰摂取が起こりやすいとされる。
１日の成人の推奨量は、男性で850~900㎍、女性で650~700㎍、耐容上限量は2700㎍。


ビタミンB2
水溶性ビタミンだが、水に溶けにくい。体内に蓄積されず、大量摂取による過剰症は起こらない。


アミノ酸
タンパク質の構成成分。中でも体内で生成ができない9種類は必須アミノ酸とされる。


アミノ酸スコア
たんぱく質に含まれる必須アミノ酸9種類のバランスを、最高100とし評価したもの。


脂溶性ビタミン
水に溶けにくく、油に溶けやすい。尿中に排出されず肝臓や脂肪に蓄積されるため、過剰摂取すると身体に悪影響を及ぼす。

参考

養殖ウナギの脂質栄養成分
おさかな栄養学
保健・医療・福祉のための栄養学
一生役立つ　きちんとわかる栄養学
数字でわかる、うなぎの優れた栄養バランス
うなぎが高齢者の栄養不足に効く？効能や摂取時の注意点