LogoMark.png

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

柳川うなぎめしマップ

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

acsess.jpg unagiicon.jpg

背景と目的

コンセプト

成果物の仕様


メンバー

ソーシャルデザイン学科|Web制作

制作ツール

Macbook Air
Adobe Illustrator 2023

プロジェクトの期間

2024.1.20(コンテンツ)

まとめ

市からのご依頼のため学外の方へ受け渡すための構成であること、コンテンツと開発で班が分かれるため自分本位の構成にはなってはならないこと等、まだ作成途中の段階ではありますが、クライアントやユーザーの存在を第一に意識して行ったプロジェクトになりました。学科サイトと同じ仕様で開発が進められるため、サイトマップをもとに、わかりやすく簡潔な画面構成で、また実現可能かどうかを検討しながら進めました。
現物のマップ完成データを頂いたので、それを基にしてアイコンやUIのデザインなどを再編します。記事の作成も含め、完成までの期間でよりプロジェクトへの理解を深められたらと思います。



調査

現状調査


先行事例

技法・技術情報

これからのWebサイト設計の新しい教科書
【全部教えます!】WEBデザインの作り方紹介!できるまでの流れ-adobe Illustrator-




プロジェクト管理

スケジュール

1/17 20時からzoom会議
ブラッシュアップ〜1/20

ToDo






進捗記録




2024.1.17

zoom
メニューアイコン->文字への提案
今後新しくパージを作る可能性を考えると、アイコン制では不便
30日までに各自サイトへの書き込み

2024.01.16

うなぎ記事完成

栄養価記事
ブラッシュアップ期間~1/20

2023.12.20

うなぎ記事編集

2023.12.13

2023.12.06

zoom会議

アイコン案

①お店一覧②うなぎについて③柳川について

shopicon.jpg
ung.jpg
yan.jpg
kiji.jpg
acs.jpg
ken.jpg

④お知らせ記事⑤アクセス⑥検索ページ
未だ制作中の段階です。
完成マップの雰囲気に近くなるよう丸みを帯びたデザインを想定しています。
うな重・川下りの図案は、柳川にシフトしたwebサイトなので、独自のピクトグラムがあれば面白いのではないかと思い入れています。しかし、わかりやすさという観点で適しているのかどうか考え中です。

2023.12.1

サイトマップ作成


sitemap.jpg

ワイヤーフレームの構成が説明不十分に感じたため、サイトマップを作成しました。

search.jpg



また、作成にあたり検索用ページを追加しました。





2023.11.29

お知らせ・アクセス


free.jpg
acsess.jpg

※画像二枚目のアクセスをクリックすると、ページ下部のアクセス欄へジャンプします。

PC版フッター

footer.jpg
footer2.jpg

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





2023.11.22

うなぎ記事、柳川記事の親ページ




unagi.jpg
yanagawa.jpg

店舗一覧のレイアウトを流用し、個別記事にジャンプできる仕様を想定しています。



2023.11.20

画像選定レビュー

zoomにて開催



2023.11.15

ブラッシュアップ

main1115.1.jpg
main1115.2.jpg
shop1115.jpg
list1115.jpg
menu1115.jpg
sub.jpg




2023.11.13

レイアウトビュー

zoomにて開催
※ブラッシュアップ前

shop1.jpg
shop2.jpg
mainp.jpg

店舗個別詳細ページ

menu1.jpg
menu2.jpg

メニューのプルダウン▶︎アイコン式採用
仮アイコンに使用した素材
EXPERIENCE JAPAN PICTOGRAMS

list1.jpg
list2.jpg

店舗一覧▶︎2列採用

center.jpg
▶︎
sub1.jpg

記事ページは一本直通から項目別の個別記事へ(検討中)
▶︎1記事3000~4000字の想定のため、記事ページを分けることに決定しました。



2023.11.9

meeting

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

2023.11.8

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

shop.11.8.jpg
shop.11.8.2.jpg
menup.jpg
menup2.jpg

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



2023.11.1

中間報告を受けて

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

進捗状況

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

2023.10.25

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

2023.10.18

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

IMG_8999.JPG

ワイヤーフレームの作成



2023.10.11

Webデザインのアイデア

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



PukiWikiについて

2023.09.27

第一回説明会

2023.09.20

制作相談

テーマ案

先行事例

文京グルメマップ

アクセスメモ



博多から西鉄柳川駅

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



うなぎメモ


成分作用可食部100gあたりの含有量(μg)
ビタミンAレチナールの生成、免疫力向上1,500
ビタミンB1糖質をエネルギーに変える、神経機能を正常に保つ、疲労回復
ビタミンB2老化予防、脂質をエネルギーに変える0.75B6
ビタミンDカルシウムの吸収や代謝を助け、骨への沈着を防ぐ
ビタミンE抗酸化作用、老化予防、血行促進
カルシウム骨や歯を丈夫にする
亜鉛傷の修復や成長に不可欠、肌・爪・髪を健康に保つ、正常な味覚の維持
たんぱく質筋肉を作る
DHA・EPA血管系病気の予防、成人病予防



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


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


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


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


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


参考

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



top.jpg

PAGES

GUIDE

添付ファイル: fileshopicon.jpg 8件 [詳細] fileうなぎサイトマップ (1).png 6件 [詳細] filekiji.jpg 7件 [詳細] fileung.jpg 7件 [詳細] fileyan.jpg 6件 [詳細] fileken.jpg 6件 [詳細] fileacs.jpg 5件 [詳細] filesitemap.jpg 9件 [詳細] fileunagi.jpg 9件 [詳細] filemenu.jpg 7件 [詳細] filesearch.jpg 7件 [詳細] fileshop.jpg 5件 [詳細] filelist.jpg 6件 [詳細] filemain.jpg 6件 [詳細] filesub.jpg 7件 [詳細] fileyanagawa.jpg 10件 [詳細] fileunagiicon.jpg 10件 [詳細] filetop.jpg 6件 [詳細] filefooter2.jpg 8件 [詳細] filefooter.jpg 7件 [詳細] fileacsess.jpg 8件 [詳細] filefree.jpg 5件 [詳細] fileunagip.jpg 8件 [詳細] filelist1115.jpg 12件 [詳細] fileshop1115.jpg 12件 [詳細] filemenu1115.jpg 13件 [詳細] filemain1115.2.jpg 13件 [詳細] filemain1115.1.jpg 13件 [詳細] filemainp.jpg 12件 [詳細] fileshop.11.8.jpg 13件 [詳細] fileshop.11.8.2.jpg 11件 [詳細] filemenup2.jpg 14件 [詳細] filemenup.jpg 12件 [詳細] filesub1.jpg 8件 [詳細] fileshop2.jpg 10件 [詳細] fileshop1.jpg 11件 [詳細] filecenter.jpg 11件 [詳細] fileyana1.jpg 11件 [詳細] filemenu2.jpg 12件 [詳細] filemenu1.jpg 10件 [詳細] fileshopp.jpg 10件 [詳細] filelist1.jpg 10件 [詳細] filelist2.jpg 13件 [詳細] fileIMG_8999.JPG 13件 [詳細] file2.jpg 12件 [詳細] file試作.jpg 11件 [詳細]
Last-modified: 2024-01-16 (火) 15:08:38