LogoMark.png

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


#author("2024-01-18T08:49:56+09:00;2024-01-16T15:08:38+09:00","default:member","member")
#author("2024-01-22T20:11:24+09:00;2024-01-16T15:08:38+09:00","default:member","member")
*柳川うなぎめしマップ
担当:ワイヤーフレーム、menuアイコン、サイト内記事1本
担当:ワイヤーフレーム、サイト内記事1本
#iframe(https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d16119.034785379283!2d130.39929871661644!3d33.16089712145465!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1695201161660!5m2!1sja!2sjp, 100%,40%)
-''情報デザイン専攻 3年''
-'''Keywords:地域活性化, 柳川市, Webプラットフォーム'''
-
~
~

[[&image(acsess.jpg, , 15%);>#test]]       [[&image(unagiicon.jpg, , 15%);>#un]]
~

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

-目的
--そこで本プロジェクトでは、マップをリニューアルすることに加え、新たにWEBサイトを作成することで、更新頻度を上げ、様々な人が扱えるようにし、柳川市の持続的活性化に繋げる
~

***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
-柳川市とWebサイトの持続的な活性化を促すために、写真を多くしてお店の魅力を発信する
-持続的活性化に繋げる
~

***成果物の仕様
-サイトマップ
|#image(sitemap.jpg)|#image(うなぎサイトマップ (1).png)|
~
-ワイヤーフレーム
|#image(main.jpg)|#image(shop.jpg,center,60%)|#image(menu.jpg)|
|#image(list.jpg)|#image(unagi.jpg)|#image(yanagawa.jpg)|
|#image(sub.jpg)|#image(free.jpg)|#image(search.jpg)|
仮アイコンに使用した素材
[[EXPERIENCE JAPAN PICTOGRAMS>https://experience-japan.info/]]

~
-menuアイコン画像
-うなぎ栄養価記事<[[栄養価記事]]
~
***メンバー
***ソーシャルデザイン学科|Web制作
-濱有希子 コンテンツ(リーダー)
-[[岩崎貴生>岩崎貴生/情報デザイン研究II]] コンテンツ(発表代表)
-[[亀田日向>亀田日向/情報デザイン研究II]] コンテンツ
-[[川村洸太>川村洸太/情報デザイン研究II]] コンテンツ
-[[田籠祐貴>田籠祐貴/情報デザイン研究II]] コンテンツ
-[[伊藤みらの>伊藤みらの/情報デザイン研究II]] コンテンツ

-西山実伶 開発(リーダー)
-[[出光美心>出光美心/情報デザイン研究II]] 開発(発表代表)
-[[内藤彩乃>内藤彩乃/情報デザイン研究II]] 開発
-[[中西華子>中西華子/情報デザイン研究II]] 開発
~
***制作ツール
//&color(red){使用するツール|ハードウエア・ソフトウエア};
Macbook Air
Adobe Illustrator 2023
~

***プロジェクトの期間
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
~2024.1.20(コンテンツ)
~

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


**調査

***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
~

***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
-[[文京グルメマップ>https://www.bunkyo-gourmet.jp/]]
-[[あおざしからり>https://www.aozashikarari.com/]]
-[[TAKAYU♨︎温泉パーラー>https://onsen-parlor.jp/]]
(第一に学科サイトの構成を参考にしています)
~

***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
[[これからのWebサイト設計の新しい教科書>https://www.amazon.co.jp/%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E3%81%AEWeb%E3%82%B5%E3%82%A4%E3%83%88%E8%A8%AD%E8%A8%88%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E6%95%99%E7%A7%91%E6%9B%B8-CSS%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%A7%E3%81%A4%E3%81%8F%E3%82%8B%E3%83%9E%E3%83%AB%E3%83%81%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E5%AF%BE%E5%BF%9C%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E8%80%83%E3%81%88%E6%96%B9%E3%81%A8%E5%AE%9F%E8%A3%85%E3%80%88Bootstrap%E3%83%BB%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%83%BB%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E8%A8%AD%E8%A8%88%E3%80%89-%E6%9D%BE%E7%94%B0%E7%9B%B4%E6%A8%B9/dp/4844364898]]
[[【全部教えます!】WEBデザインの作り方紹介!できるまでの流れ-adobe Illustrator->https://www.youtube.com/watch?v=z75ZUD3hgZk&t=1200s]]


~
~

**プロジェクト管理

***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
1/17 20時からzoom会議
ブラッシュアップ〜1/20
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-アイコン作成
-%%フッター作成%%
-%%うなぎ記事作成%%
-PC版メニュー
-%%アイコン資料集め%%
-%%ブラッシュアップ(11/15迄)%%
-%%メインページ再編%%

//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};

~
~
&aname(top);
#hr
CENTER:''進捗記録''
#hr
~
~
**2024.1.17
zoom
メニューアイコン->文字への提案
今後新しくパージを作る可能性を考えると、アイコン制では不便
30日までに各自サイトへの書き込み
**2024.01.16
***うなぎ記事完成
[[栄養価記事]]
ブラッシュアップ期間~1/20

**2023.12.20
***うなぎ記事編集
**2023.12.13
**2023.12.06
zoom会議
-記事の文体
-字数にとらわれる必要はない
-書きたい項目があればそれを書く
-それぞれの記事でコンセプト、ターゲット層を決める(要報告)
//(誰に対して)
観光客、
若い観光客▶︎若者が行って楽しそうな場所
''今後やること''
-メニューアイコン
-写真の加工
-UIデザインの作成
~
***アイコン案
①お店一覧②うなぎについて③柳川について
|#image(shopicon.jpg)|#image(ung.jpg)|#image(yan.jpg)|
|#image(kiji.jpg)|#image(acs.jpg)|#image(ken.jpg)|
④お知らせ記事⑤アクセス⑥検索ページ
未だ制作中の段階です。
完成マップの雰囲気に近くなるよう丸みを帯びたデザインを想定しています。
うな重・川下りの図案は、柳川にシフトしたwebサイトなので、独自のピクトグラムがあれば面白いのではないかと思い入れています。しかし、わかりやすさという観点で適しているのかどうか考え中です。
~
**2023.12.1
***サイトマップ作成
~
#image(sitemap.jpg,center,80%)
ワイヤーフレームの構成が説明不十分に感じたため、サイトマップを作成しました。
~
#image(search.jpg,right,30%)
~
また、作成にあたり検索用ページを追加しました。
~
~
~
**2023.11.29
***お知らせ・アクセス
~
|#image(free.jpg,70%) |[[&image(acsess.jpg, , 80%);>#test]]|
''※画像二枚目のアクセスをクリックすると、ページ下部のアクセス欄へジャンプします。''
-フリー記事ページ(お知らせ欄)の大枠です。[[学科サイトHOME>https://design.kyusan-u.ac.jp/socialdesign/?SocialDesign]]の構成と同じで、各店舗がこの1つのページに直接記事を書き込む形を想定しています。
お知らせとは別にブログ的な呟き欄の案も出ていますが、検討中です。
-メニューに格納されているアクセス(アイコン)は、メインページに羅列されるアクセス情報に直で飛べるリンクを付与する形を想定しています。
~
***PC版フッター
|#image(footer.jpg)|#image(footer2.jpg)|
PC版フッターのアイコン配置例です。
%%アイコンの補足用テキストの配置案が2案出ていますが、現在検討中です。%%
▶︎画像一枚目のアイコンの枠内に文字を収める案で決定しました。
~
~
~
**2023.11.22
***うなぎ記事、柳川記事の親ページ
~
~
|#image(unagi.jpg)|#image(yanagawa.jpg)|
店舗一覧のレイアウトを流用し、個別記事にジャンプできる仕様を想定しています。
~
~
**2023.11.20
***画像選定レビュー
zoomにて開催
~
~
**2023.11.15
***ブラッシュアップ
|#image(main1115.1.jpg)|#image(main1115.2.jpg)|#image(shop1115.jpg)|
|#image(list1115.jpg)|#image(menu1115.jpg)|#image(sub.jpg)|
~
~
**2023.11.13
***レイアウトビュー
zoomにて開催
※ブラッシュアップ前
|#image(shop1.jpg)|#image(shop2.jpg)|#image(mainp.jpg)|
店舗個別詳細ページ
~
|#image(menu1.jpg)| |#image(menu2.jpg)|
メニューのプルダウン▶︎アイコン式採用
仮アイコンに使用した素材
[[EXPERIENCE JAPAN PICTOGRAMS>https://experience-japan.info/]]
~
|#image(list1.jpg)| |#image(list2.jpg)|

店舗一覧▶︎2列採用
~
|#image(center.jpg)| ▶︎ |#image(sub1.jpg)|
記事ページは一本直通から項目別の個別記事へ%%(検討中)%%
▶︎1記事3000~4000字の想定のため、記事ページを分けることに決定しました。
~
~
**2023.11.9
***meeting
スケジュール、ワイヤーフレームについて話し合い

-メインビジュアルは有と無の2パターン作成
-店舗一覧は1列か2列の2パターン作成
-編集アイコン作成、又素材探し
~
~
**2023.11.8

***ワイヤーフレーム進捗状況
|#image(shop.11.8.jpg)|#image(shop.11.8.2.jpg)|#image(menup.jpg)|#image(menup2.jpg)|

ショップ一覧ページ、メニューのプルダウン内レイアウト作成
~
~
**2023.11.1
***中間報告を受けて
ワイヤーフレームの構成を変更
***進捗状況
%%%[[ワイヤーフレーム(制作中)>https://drive.google.com/file/d/1TCdjLaUGx6xpCHYpy6j4JNMHEFbmZoTj/view?usp=drive_link]]%%%
-スマホに移しサイズ感を確認しつつ制作
~
~
**2023.10.25
役割決め
※病欠のため自宅で制作開始
%%%[[ワイヤーフレームラフ>https://drive.google.com/file/d/1M5sy7CCIaaLUZVz82nhQqpmxJFpjVNTh/view?usp=drive_link]]%%%
先にモバイル用サイトのデザイン制作
幅:360
-ハンバーガーメニュー挿入
-トップボタン挿入
-pukiwikiの仕様のため、ワイヤーフレームは1案▶︎並びをどうするか考え中
~
~
**2023.10.18
サイトマップの項目洗い出し
#image(IMG_8999.JPG)
ワイヤーフレームの作成
~
~
**2023.10.11
***Webデザインのアイデア
[[あおざしからり>https://www.aozashikarari.com/]]
[[TAKAYU♨︎温泉パーラー>https://onsen-parlor.jp/]]
~
~
- *2023.10.04
***PukiWikiについて
-PukiWikiとは
オープンソースのWikiソフトウェア。
プラグインが豊富で、skinにより見た目の変更が可能。
~
~
**2023.09.27
***第一回説明会
-CMS
-PukiWiki
**2023.09.20
***制作相談
テーマ案
-室内用小型コンポストを中心とした、室内プランター栽培の提案と研究 ▶︎ハーブ、スパイス栽培を想定
-インテリアにもなるおしゃれな掃除用品ブランド
-狭いキッチン収納提案
-絵描きのためのツール
-Webサイト制作
-柳川うなぎめし
~
***先行事例
[[文京グルメマップ>https://www.bunkyo-gourmet.jp/]]
-ジャンル・エリア・最寄駅別にカテゴライズされており検索性が高い。
~
~
&aname(test);
**アクセスメモ
~
博多から西鉄柳川駅

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

~
&aname(un);
**うなぎメモ
~
|成分|作用|可食部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㎍。>https://www.tyojyu.or.jp/net/kenkou-tyoju/eiyouso/vitamin-a.html]]
~
''ビタミンB2''
水溶性ビタミンだが、水に溶けにくい。体内に蓄積されず、大量摂取による過剰症は起こらない。
~
''アミノ酸''
タンパク質の構成成分。中でも体内で生成ができない9種類は必須アミノ酸とされる。
~
''アミノ酸スコア''
たんぱく質に含まれる必須アミノ酸9種類のバランスを、最高100とし評価したもの。
//9種類のどれか
~
''脂溶性ビタミン''
水に溶けにくく、油に溶けやすい。尿中に排出されず肝臓や脂肪に蓄積されるため、過剰摂取すると身体に悪影響を及ぼす。
----
***参考
[[養殖ウナギの脂質栄養成分>https://agriknowledge.affrc.go.jp/RN/2010411643]]
[[おさかな栄養学>https://www.seizando.co.jp/book/3987/]]
[[保健・医療・福祉のための栄養学>https://www.kinokuniya.co.jp/f/dsg-01-9784263704332]]
[[一生役立つ きちんとわかる栄養学>https://www.amazon.co.jp/%E4%B8%80%E7%94%9F%E5%BD%B9%E7%AB%8B%E3%81%A4-%E3%81%8D%E3%81%A1%E3%82%93%E3%81%A8%E3%82%8F%E3%81%8B%E3%82%8B%E6%A0%84%E9%A4%8A%E5%AD%A6-%E9%A3%AF%E7%94%B0-%E8%96%AB%E5%AD%90/dp/4791626222]]
[[数字でわかる、うなぎの優れた栄養バランス>https://www.unagi-koubou.jp/contents/blog/1432.html]]
[[うなぎが高齢者の栄養不足に効く?効能や摂取時の注意点>https://www.familyset.jp/column/%E3%81%86%E3%81%AA%E3%81%8E%E3%81%8C%E9%AB%98%E9%BD%A2%E8%80%85%E3%81%AE%E6%A0%84%E9%A4%8A%E4%B8%8D%E8%B6%B3%E3%81%AB%E5%8A%B9%E3%81%8F%EF%BC%9F%E5%8A%B9%E8%83%BD%E3%82%84%E6%91%82%E5%8F%96%E6%99%82/]]
~
~
RIGHT:[[&image(top.jpg, , 10%);>#top]]
~