#author("2024-01-15T18:23:06+09:00;2023-12-06T17:07:23+09:00","default:member","member") *柳川うなぎめしマップ 担当:ワイヤーフレーム、menuアイコン、サイト内記事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アイコン画像 -うなぎ栄養価記事<[[うなぎメモ>#un]] ~ ***メンバー ***ソーシャルデザイン学科|Web制作 -濱有希子 コンテンツ(リーダー) -[[岩崎貴生>岩崎貴生/情報デザイン研究II]] コンテンツ(発表代表) -[[亀田日向>亀田日向/情報デザイン研究II]] コンテンツ -[[川村洸太>川村洸太/情報デザイン研究II]] コンテンツ -[[田籠祐貴>田籠祐貴/情報デザイン研究II]] コンテンツ -[[伊藤みらの>伊藤みらの/情報デザイン研究II]] コンテンツ -西山実伶 開発(リーダー) -[[出光美心>出光美心/情報デザイン研究II]] 開発(発表代表) -[[内藤彩乃>内藤彩乃/情報デザイン研究II]] 開発 -[[中西華子>中西華子/情報デザイン研究II]] 開発 ~ ***制作ツール //&color(red){使用するツール|ハードウエア・ソフトウエア}; Macbook Air Adobe Illustrator 2023 ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX }; 2023.12.13 コンテンツ版完成 ~ ***まとめ //&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/10 ~ ***ToDo //&color(red){やるべきこと(タスク)を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -アイコン作成 -%%フッター作成%% -うなぎ記事作成 -PC版メニュー -%%アイコン資料集め%% -%%ブラッシュアップ(11/15迄)%% -%%メインページ再編%% //***NotToDo //&color(red){やらないこと:何をするかではなく「何をしないか」を考える}; //&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ &aname(top); #hr CENTER:''進捗記録'' #hr ~ ~ **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]] ~ ~ **記事本文 &color(gray){編集中です。}; ~ うなぎの栄養 ここでは、うなぎの栄養価について紹介します。 うなぎは夏バテ解消や滋養強壮の効果があるとされています。 実はうなぎには、老化予防や血管系の病気の予防などの効果もあるのです。 ~ ''夏バテ解消にも!おいしく栄養補給'' 夏バテは、暑さによる食欲低下で体に必要な栄養素が不足したり、汗をかくことでミネラルやビタミンを失ってしまうために起こります。 うなぎは体に必要なビタミンやミネラルを効率よく補給できるため、夏バテの解消にはもってこいです。 油が多いと消化にかかる負担が増え疲労してしまうため注意が必要です! ~ ''高品質なたんぱく質の宝庫'' 身体の細胞や組織を構築し修復するために不可欠とされるたんぱく質。うなぎには良質なたんぱく質が豊富に含まれています。うなぎのたんぱく質は体内で作り出せないアミノ酸のバランスが優秀で、消化吸収が高いという特徴があります。せいろ蒸しや蒲焼きなど、身を柔らかく仕上げる調理法によりさらに吸収を高める効果が期待できます。 ''美肌にも老化予防にも効果◎'' ~ ''脂質'' うなぎには心臓の健康をサポートするオメガ-3脂肪酸が豊富に含まれています。 ''体にもうれしいせいろ蒸し'' うなぎの調理方法によっても栄養価は変化します。柳川のうなぎ料理を代表する''せいろ蒸し''は脂質を抑えながらも、たんぱく質やビタミンをそのままに、効果的に摂取することができます。伝統の味を味わいながら、適切な量を取り入れることで ~ 次に、含まれる栄養素を一つずつ見ていきましょう。 ~ ''ビタミンA'' うなぎに含まれる栄養素を代表するのがビタミンAです。ビタミンAには、''目の健康''を保つ働きがあります。網膜上にある、暗い場所での視力に関わる色素ロドプシンはこのビタミンAで構成されています。不足してしまうと、薄暗い場所で明暗を見る力が鈍くなり、夜盲症を引き起こす恐れがあります。 また、''免疫力・防御力アップ''にも不可欠です。のどや鼻などの粘膜に潤いを与え、菌やウイルスが体内へ侵入するのを防ぎます。 ビタミンAは排出されず体内に蓄積されるため、過剰摂取には注意が必要です。 ~ |食品|100gあたりの含有量| |うなぎ|1,500μg| ~ ビタミンA:目の健康・感染症予防・免疫力を高める ~ ''ビタミンB1'' ''糖質をエネルギーに変える''酵素を手助けする働きがあります。疲労回復の効果があるほか、脳のエネルギー源に欠かせないブドウ糖からエネルギーを作り出すことで、神経機能を正常に保っています。白米食が広まり始めた江戸〜明治時代には、ビタミンB1欠乏による脚気が流行し、国民病とされていました。欠かすことのできないビタミンB1は副食でバランスよく摂取する必要があります。白米とうなぎを同時に摂取することで、より吸収を高める効果が期待できます。 ~ |食品|100gあたりの含有量| |うなぎ|0.75mg| ~ ビタミンB1:疲労回復・脳のエネルギーになる ~ ''ビタミンB2'' こちらもうなぎに豊富に含まれている栄養素です。脂質・糖質・タンパク質をエネルギーに変える働きがあります。 活動量が多い人ほど必要な栄養素です。『発育のビタミン』とも呼ばれるビタミンB2は、髪、爪、皮膚などの細胞の再生にかかわり、正常に保つ機能があります。 調理法にとらわれないため、蒲焼をはじめ、いろいろなうなぎ料理で摂取することができます。 不足すると、口内炎、口角炎、皮膚炎などの皮膚や粘膜のトラブルを引き起こします。成長の促進に関わるビタミンのため、不足すると成長障害を起こします。 ~ |食品|100gあたりの含有量| |うなぎ|0.74mg| ~ ビタミンB2:髪や爪、皮膚の健康状態を保つ ~ ''ビタミンD'' カルシウムの吸収や代謝を助けます。カルシウムは体への吸収率が低いのですが、ビタミンDと一緒に摂ることで運搬と吸収を助け、骨への沈着を防ぎます。骨や歯の成長に必要不可欠な栄養素です。また、油と一緒に摂ることで吸収率が高まります。 ビタミンD:カルシウムを助け、骨や歯の形成・成長促進 ~ ''ビタミンE'' ''細胞の抗酸化作用 ''があります。 血管の拡張を促し、血の巡りを良くします。酸素を体のすみずみまで行き渡らせることで、新陳代謝を高め、肌のターンオーバー 過酸化脂質を抑える効果もあります。 ビタミンE:抗酸化作用・ニキビに効く ~ ''カルシウム'' 骨や歯を丈夫にするほか、神経興奮を抑制する作用を持ち、ストレスを鎮める効果があります。ビタミンDとの相互作用が高いため、両方の栄養素を含むうなぎは カルシウム: 骨や歯を丈夫にする・ストレスを鎮める ~ ''亜鉛'' タンパク質を含む食品に豊富に含まれる亜鉛は、新しい細胞を作り出すのに必要不可欠なミネラルです。''肌''や''爪''、''髪''の''細胞の新陳代謝''を促進させ健康状態を保つ働きがあります。また、大きな特徴として''正常な味覚''を保つ働きもあります。物を食べるとき、舌の表面にある味蕾で味を感じ取っています。味蕾の細胞の入れ替わりを促し、味覚を正常に保つことで、毎日の食事を美味しく感じさせているのは他でもない亜鉛の役目なのです。 |食品|100gあたりの含有量| |うなぎ|2.7mg| 亜鉛:肌、爪、髪などの健康維持・味覚を正常に保つ ~ ''タンパク質'' 筋肉や臓器を作る、人体に欠かせない栄養素です。うなぎには良質なタンパク質が豊富に含まれています。 タンパク質:血や肉を作る ~ ''DHA・EPA'' DHAとEPAは、体内で生成されない不飽和脂肪酸の一種で、魚の油に豊富に含まれます。 EPAは、血液をサラサラにし、血管系の病気を防ぐ効果があります。コレステロールの DHA・EPA:血管系病気の予防・成人病の予防 ~ ~