LogoMark.png

伊藤みらの/情報デザイン研究II のバックアップソース(No.21)

#author("2023-12-01T17:49:27+09:00;2023-12-01T17:45:46+09:00","default:member","member")
&aname(top);
*柳川うなぎめしマップ
担当:ワイヤーフレーム、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(main1115.1.jpg)|#image(main1115.2.jpg)|#image(shop1115.jpg)|
|#image(menu1115.jpg)|#image(list1115.jpg)|#image(unagi.jpg)|
|#image(yanagawa.jpg)|#image(sub1115.jpg)|#image(free.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 };
~

***まとめ
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~


**調査

***現状調査
//&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){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~

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

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

~
~

#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~
**2023.11.29
|#image(free.jpg)|#image(acsess.jpg)|
-フリー記事ページ(お知らせ欄)の大枠です。[[学科サイトHOME>https://design.kyusan-u.ac.jp/socialdesign/?SocialDesign]]の構成と同じで、各店舗がこの1つのページに直接記事を書き込む形を想定しています。
お知らせとは別にブログ的な呟き欄の案も出ていますが、検討中です。
-メニューに格納されているアクセス(アイコン)は、メインページに羅列されるアクセス情報に直で飛べるリンクを付与する形を想定しています。
~
|#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(sub1115.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)|
記事ページは一本直通から項目別の個別記事へ%%(検討中)%%
~
~

**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);
**うなぎメモ
~
~
~
~
~
[[&image(top.jpg, , 10%);>#top]]
~
~