LogoMark.png

牧野友紀/情報デザイン研究I の変更点


#author("2022-07-14T12:01:15+09:00","default:member","member")
*セルフラブ
リラックスを提供するWebマガジン 
~
#image(IMG_0827.PNG)
~
-'''Web,magazine,relax,like,love'''
-https://yukimakino025.github.io/selflove/
~


**概要
~
***🔍これは何?
~
//&color(red){これは何か・・を簡潔に};
コロナで悩む若者に癒しやストレス解消の方法を届けられるようなサイト(webマガジン)。
~
セルフラブとは「自分を愛する」こと。
コロナで心が疲弊している人も自分自身のために癒しの時間を使ってほしいと思いこの名前にしました。
~
~

***📙背景
~
//&color(red){プロジェクトの背景と目的};
コロナ禍で私も含め周りの友人も孤独感・無気力感に悩んでいる人が多かった。
癒しを提供する考え方からイベントなどをまとめているサイトがあまりなかったので今回制作しました。
また、九州には多くのイベントや体験があり、九州で癒しの時間を過ごしてほしいという思いもあり、九州のイベントを中心にした。
また、以前より雑誌やZINEに興味があり、今回は見る人が空いている時間にどこでも見れるようにWebマガジンにした。
~
~
***🐏目的(最終目標)
~
このWebマガジンを見てコロナ禍で抱える孤独感や無気力感という悩みを軽くする手助けがしたい。
サイトも日常のストレスを忘れられるような癒しを提供できるビジュアルにする。
~
~

***🐏コンセプト
~
//&color(red){基本的な考え方、枠組み、視点など、作戦、方法};
-大学生を中心とした若者向けに見てもらえるような内容、ビジュアル。
-主に九州に住んでいる若者が実践し、体験できる内容。
~
~

***💡制作物🐏
~
[[セルフラブ(webマガジン)>https://yukimakino025.github.io/selflove/]]
~
~
***🐏成果物の仕様 
~
//&color(red){&small(成果物の形式・サイズ・時間尺等);};

~
***🐏ビジュアルについて
#image(IMG_0666.PNG,50%)
癒しや柔らかい印象のイメージとぴったりだと思い、羊のキャラクターを採用しました。
クリーム色は羊の柔らかい毛(癒し)
オレンジは元気なイメージ
ブルーは若者のフレッシュさ
をイメージしました。

~

-今回利用したフリーイラスト素材[[shigureni free illust>https://www.shigureni.com/]]
~
~

***✏️制作ツール
~
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Atom
-github
-Illustrator
-procreate(絵描きアプリ)
-今回利用したフリーイラスト素材[[shigureni free illust>https://www.shigureni.com/]]
~
~
~
***⏳プロジェクトの期間
~
2022.04.14-2022.07.15
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
~
~
~
***🐏まとめ
~
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
-
-webサイトは比較的見やすいものなった。
-サイトのビジュアルも柔らかい安心感のあるものにできた。
-これから内容を増やし、より多くの人の意見を集め内容の充実したサイトにしてきたい。
-より見やすい、何度も見たくなるようなビジュアルにしていきたい。
-多くの人に見てもらうきっかけが必要だと感じたため、SNSを活用するなどの認知向上に努めたい。
~
~
~

**調査

***現状調査
~
***✏️目的
若者にリラックスを提供するWebサイトのための若者のストレスの原因を調査するため。
ストレスを軽減するためにはどのようなことをするのが良いのか知るため。
ストレス解消に効く色や形についての調査
~
***✏️方法
ニュースや記事で若者のストレスについて調査する。
~
***コロナ禍で抱える若者のストレスの記事
[[若者の半数が「何もしたくなくなる、無気力」な気持ちに変化 3人に1人が「関係構築」「対人スキル」への影響を不安視>https://www.jrc.or.jp/press/2022/0106_022802.html]]

[[コロナ禍で若者の心も不安定に 中高生や大学生から「つらい」とメール相談>https://www.tokyo-np.co.jp/amp/article/127474]]

[[「若い世代ほどコロナ禍でストレス」スイスの専門家>https://www.swissinfo.ch/jpn/%E8%8B%A5%E8%80%85-%E3%82%B3%E3%83%AD%E3%83%8A-%E3%82%B9%E3%83%88%E3%83%AC%E3%82%B9-%E3%81%86%E3%81%A4%E7%97%85/46371706]]
~
***✏️結果
-孤独を抱えている若者が多くなっている。(私にも実感がある)
-将来への漠然とした不安がある。
-無気力になり、やりたいことがない。

↓
***若者の孤独感を解決できるものは何か。
***若者が無気力感、やりたいこと好きなことがわからない状態から解放される方法は何か。
~
***若者の孤独感を解決できるもの。
[[寂しい時どうすればいい?孤独感でツラい時に試してほしい対処法>https://www.cosmopolitan.com/jp/beauty-fashion/health/a38796161/how-to-deal-with-loneliness/]]
-[[新型コロナウイルスによる不安やストレスなどの心の問題に対処するために>https://www.counselor.or.jp/covid19/covid19column21fatigue/tabid/559/Default.aspx]]

-[[キナリノ心が疲れたら整えよう。日常に取り入れたい「癒し時間」のつくり方>https://kinarino.jp/cat6-%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB/42555-%E5%BF%83%E3%81%8C%E7%96%B2%E3%82%8C%E3%81%9F%E3%82%89%E6%95%B4%E3%81%88%E3%82%88%E3%81%86%E3%80%82%E6%97%A5%E5%B8%B8%E3%81%AB%E5%8F%96%E3%82%8A%E5%85%A5%E3%82%8C%E3%81%9F%E3%81%84%E3%80%8C%E7%99%92%E3%81%97%E6%99%82%E9%96%93%E3%80%8D%E3%81%AE%E3%81%A4%E3%81%8F%E3%82%8A%E6%96%B9]]
-どこかにでかける→event(九州や遠隔で参加できるもの)
-SNSから離れてみる→Life
-考え方を変えてみる→Think

~
***自分のやりたいこと好きなことを見つける方法
-他の人の好きなものを知る。→インタビュー
-自分のすきなことを探す方法を伝授。
~

***心理的な効果のある色・形
[[「丸み」がもたらす心理的効果>https://www.kagura.co.jp/blog/interiorandhousing/13607/]]
[[色で感情が動く!?色が持つ心理効果と活用方法>https://kimoto-sbd.co.jp/tsutatsukulab/2018/01/21771/]]
↓
-丸みを帯びた形状は人の心理に癒しの効果を与える。
-暖色のペールトーンは穏やかで暖かい気持ちにさせる。
-緑は穏やかで安心感のある色。
-寒色は信頼感や誠実なイメージがある。暗いトーンだと気持ちが沈む色でもある。
~
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
~

***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
-[[HITOTOKI>https://hitotoki-hotel.com/]]
落ち着いた雰囲気がとても心地よくリラックスというテーマにあっているような気がする。
-[[haconiwa>https://www.haconiwa-mag.com/design/]]
個人的にとても見やすい。
-[[MINI FUJI-CO | 小さくおいしいリンゴの物語>http://minifuji-co.com/]]
-[[HELLO SCOOTER>https://www.helloscooter.jp/]]
-[[BRUTUS>https://brutus.jp/]]
-[[clip>https://clip-magazine.com/]]
-[[haconiwa>https://www.haconiwa-mag.com/design/]]
~

[[ピンタレスト>https://pin.it/1Zv8FNL]]
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
[[HTMLタグ一覧>https://www.dspt.net/html_tag/index.html]]
[[動くWebデザインアイディア帳>https://coco-factory.jp/ugokuweb/]]
~
~

**プロジェクト管理

***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[スケジュール>https://docs.google.com/spreadsheets/d/1ss1zRpgqS5AobAsQp278wRbG2EhlnKOSOwk0VOyC4oM/edit?usp=sharing]]
~
***Webサイト制作のながれ
1.プロジェクトの企画 調査 コンセプトを確定(目標とゴール設定)
2.取材、撮影。
3.Webサイト全体の構成作成(サイトマップ作成)
4.Webページの情報設計(ワイヤーフレーム)
5.デザイン作成(イラレでのビジュアル制作)
6.コーディング・システム開発
7.テスト
8.リリース
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
%%企画立案%%
%%サイトマップ作成%%
%%-ワイヤーフレーム作成%%
%%-具体的なビジュアルの制作%%
%%-取材%%
%%-撮影%%
%%-アイコンなどの作成%%
%%-サイト作成する場所の確保%%
%%-サイトのコーディング%%




~
***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};
-イラストは描かない(フリー素材を使用する)
~
~

#hr
CENTER:''🌷進捗記録🌷''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~
**2022.07.14
***最終確認
-発表準備

~
**2022.07.07
***最終確認
-サイトのレイアウトを揃えた。
-スマホサイズの調節


~
**2022.06.30
***アイコン作成
#image(IMG_0666.PNG,center,50%)
~
羊は癒しや休息のイメージで使用されることの多いキャラクターだったので今回のサイトの趣旨に合うと思いこのアイコンにしました。
また。前回の文字が線の印象が強かったので手書きで書くことで柔らかな印象にしました。
-スマホ画面を作成


~
**2022.06.23
***今週行ったこと
-サイトのビジュアルを改めた。
#image(jouhou0001.png)

-thinkのページがほぼ完成!
-Eventのページを書く。
-
~
***これからの課題
-スマホ画面にする。
-ハンバーガーメニュー
-aboutのページのコーディング完成させる。
-ファビコンの制作。
-背景の画像の配置。

-音楽のページをもう一つ増やす。
-interviewの記事の制作
-Eventの記事制作
~
**2022.06.16
~
***今週行ったこと
-サイトのコーディング(各ページのHTMLとCSSを作成)。
-Thinkのページの記事を完成。
-お店の記事完成。
-aboutの記事を作成。(スマホ版にする方法を先に知る必要あり?)
-サイトのビジュアルを改めた。
#image(design01.png)
-eventページに載せる場所を確定。

~
***これからやることの洗い出し
-スマホ画面にする方法を学ぶ。
[[画面のサイズをスマホにする>https://qiita.com/keitah/items/c26e2a97ff9824c3c378]]
[[ハンバーガーメニュー>https://webcreatetips.com/coding/1387/#i-2]]
-aboutのページの<nav>が機能しないので原因を知る。
%%navのところの文字を変える。%%
-メインの文字を変える方法。

-eventページの記事を書く。
-Lifeページの映画、本、音楽の内容を確定すること。
-Lifeページの記事を書く。

-インタビューを始める。

~
**2022.06.09
***今週行ったこと
-背景を自分の作った画像に変える方法を調べる。
-サイトのビジュアルをよりわかりやすく見直した。
-アンケート調査を実施

~
**2022.06.01
***今週までに行ったこと
-概要の書き込み
-メインビジュアルの制作
-Webサイトの試作

~
**2022.05.17
***あらいだし
1.about
2.event
3.life(映画、本、モノ)
4.Think
5.interview

***サイトマップ
#image(IMG_0227.JPG)
~
***ワイヤーフレーム
#image(IMG_0232.JPG)
~
**2022.05.012
企画
コロナ禍でストレスが溜まっている若者(主に大学生)に向けたストレス解決サイト。
***調査📚
~
***目的
若者にリラックスを提供するWebサイトのための若者のストレスの原因を調査するため。
ストレスを軽減するためにはどのようなことをするのが良いのか知るため。
ストレス解消に効く色や形についての調査
~
***方法
ニュースや記事で若者のストレスについて調査する。
~
***コロナ禍で抱える若者のストレスの記事
[[若者の半数が「何もしたくなくなる、無気力」な気持ちに変化 3人に1人が「関係構築」「対人スキル」への影響を不安視>https://www.jrc.or.jp/press/2022/0106_022802.html]]

[[コロナ禍で若者の心も不安定に 中高生や大学生から「つらい」とメール相談>https://www.tokyo-np.co.jp/amp/article/127474]]

[[「若い世代ほどコロナ禍でストレス」スイスの専門家>https://www.swissinfo.ch/jpn/%E8%8B%A5%E8%80%85-%E3%82%B3%E3%83%AD%E3%83%8A-%E3%82%B9%E3%83%88%E3%83%AC%E3%82%B9-%E3%81%86%E3%81%A4%E7%97%85/46371706]]

[[コロナ禍3年目、孤独抱える若者たち 「何で生きているのか」>https://www.asahi.com/amp/articles/ASQ415HRLQ3XUTFL00K.html]]

[[若者を救う 何気ないことば - NHK.JP>https://www3.nhk.or.jp/news/special/miraiswitch/article/article66/]]
~
***結果
-孤独を抱えている若者が多くなっている。(私にも実感がある)
-将来への漠然とした不安がある。
-無気力になり、やりたいことがない。

↓
***若者の孤独感を解決できるものは何か。
***若者が無気力感、やりたいこと好きなことがわからない状態から解放される方法は何か。

~
***ストレスを解決するための方法
-[[新型コロナウイルスによる不安やストレスなどの心の問題に対処するために>https://www.counselor.or.jp/covid19/covid19column21fatigue/tabid/559/Default.aspx]]

-[[キナリノ心が疲れたら整えよう。日常に取り入れたい「癒し時間」のつくり方>https://kinarino.jp/cat6-%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB/42555-%E5%BF%83%E3%81%8C%E7%96%B2%E3%82%8C%E3%81%9F%E3%82%89%E6%95%B4%E3%81%88%E3%82%88%E3%81%86%E3%80%82%E6%97%A5%E5%B8%B8%E3%81%AB%E5%8F%96%E3%82%8A%E5%85%A5%E3%82%8C%E3%81%9F%E3%81%84%E3%80%8C%E7%99%92%E3%81%97%E6%99%82%E9%96%93%E3%80%8D%E3%81%AE%E3%81%A4%E3%81%8F%E3%82%8A%E6%96%B9]]
-友達のストレス解消方法を知る
~
***若者の孤独感を解決できるもの。
[[寂しい時どうすればいい?孤独感でツラい時に試してほしい対処法>https://www.cosmopolitan.com/jp/beauty-fashion/health/a38796161/how-to-deal-with-loneliness/]]
~
***自分のやりたいこと好きなことを見つける方法
-他の人の好きなものを知る。
-自分のニヤニヤポイントを探す方法を伝授。

***参考にしたいサイト
-[[ノーミーツ>https://no.meets.ltd/]]
若者世代はカテゴリーなどがイラストだと見やすい気がする。
ポップなイラストは目が引きやすいのでは。
-[[HITOTOKI>https://hitotoki-hotel.com/]]
落ち着いた雰囲気がとても心地よくリラックスというテーマにあっているような気がする。
-[[haconiwa>https://www.haconiwa-mag.com/design/]]
個人的にとても見やすい。

~
**2022.05.05
***調査
-九州のWebマガジン
[[クリップ>https://clip-magazine.com/]]
北部九州を中心にイケているヒト・モノ・コトにフィーチャーに情報を届けるWebマガジン。
カテゴリー:エリア、ジャンル
~
[[アイバナ>https://anaba-na.com/feature]]
九州の魅力を掘り起こす活動型Webサイト。
テーマは食と道具
カテゴリー:読み物、活動、特集、旅、お土産。
~
[[九州とサウナ>https://kyushusauna.com/]]
九州に住むサウナ愛好家たちがサウナについて語るWebマガジン。
カテゴリー:新着記事、エリア別記事
~
[[AFRO FUKUOKA>http://afro-fukuoka.net/]]
主に福岡にあるモノ・コトに関するWebサイト(若者向け)
カテゴリー:fashion、旅、ご飯、CULTURE(アート、展示、施設の紹介)、Beauty(アクセサリー、ヨガ教室)、life style ←生活用品について
(やりたいものに近い)
~
[[MADEIN>http://monokoto-madein.jp/]]
九州・福岡のモノ・コトづくりを応援する媒体。
カテゴリー:shop、event、colum、topics
~
[[CREATIVE CITY FUKUOKA>http://www.creative-fukuoka.jp/]]
福岡のゲーム、ファッション、音楽、映画、アニメ、デザインなどのクリエイティブに関する情報を発信するサイト
カテゴリー:imfomation、福岡であるイベントなどの情報が主。
~
~
-大学生向けのWebマガジン
[[PERRY>https://perry.tabippo.net/about/]]
学生の世界を広げるWebマガジン。
~
[[Campus magazine>https://magazine.campus-web.jp/]]
~
~
-デザイン系のWebマガジン
[[haconiwa>https://www.haconiwa-mag.com/design/]]
[[AXIS>https://www.axismag.jp/]]
~
***企画
-ターゲット(who)
九州に住んでいる大学生
~
-コンセプト
このマガジンを通して、若者に九州のアートやデザイン、モノ、コトに興味を持って欲しい。
若者向けのWebサイト。
~
-サイトに載せるページ案
この雑誌について(about)
ご飯
遊び

~

-届け方(How)
Webサイトを検索してから見る方は少ないと思う。
何かのきっかけ(例:その商品を購入するなど)がなければ見ない。
instagramなどを活用しWebサイトを見るきっかけ作りをする必要があるのではないか。
~
~
**2022.04.28
***企画
-ターゲット(who)
//自分に自信がなくなってしまった人
~
-コンセプト
このWebマガジンを通して、LOVE(すきなこと、もの、愛)を充電して欲しい。
他人の好きなものを通して、自分の好きなもの、ことに自信を持って欲しい。
大学で好きなことを学んでいる人を見て自分の将来の姿を想像してほしい。
//多様性の社会について考えてほしい。
//[[自己肯定感ってなんだろう>https://www.center-mie.or.jp/frente/data/zemi/detail/829]]
~
-サイトに載せるページ案
この雑誌について(about)
自分の好きなものを語ってもらうインタビュー(interview)
[[インタビューのコツ>https://yosca.jp/writer/3771/]]
[[インタビューのコツ2>https://tomorrowgate.co.jp/blog/2959/]]
自分の生き方を肯定できる作品の紹介(映画、音楽、本)(Culture)
こころの健康(Life)
~

-届け方(How)
Webサイトを検索してから見る方は少ないと思う。
何かのきっかけ(例:その商品を購入するなど)がなければ見ない。
instagramなどを活用しWebサイトを見るきっかけ作りをする必要があるのではないか。
~
***制作ツール(現段階で)
-[[xfree>https://www.xfree.ne.jp/login/member.php]]
~
***アイデアスケッチ
***調査(専攻事例)
[[キナリノ>https://kinarino.jp/cat6-%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB/29537-%E8%87%AA%E5%88%86%E3%81%AE%E5%BF%83%E3%81%AB%E3%81%9D%E3%81%A3%E3%81%A8%E8%80%B3%E3%82%92%E5%82%BE%E3%81%91%E3%81%A6%E3%80%82%E2%80%9C%E5%A5%BD%E3%81%8D%E3%81%AA%E3%82%82%E3%81%AE%E3%82%92%E5%A5%BD%E3%81%8D%E2%80%9D%E3%81%A8%E7%B4%A0%E7%9B%B4%E3%81%AB%E8%A8%80%E3%81%88%E3%82%8B%E7%A7%81%E3%81%A7%E3%81%84%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB]]
~
**2022.04.21
***調査

-Webマガジンとは
紙媒体ではなく、インターネット上で展開している雑誌。近年ではインターネットだけで展開してるWebマガジンも増えていている。
~
-利点
紙媒体よりも自分の見たい情報をいち早く見ることができる。
デジタル機器があればいつでもどこでも見ることができる。
-欠点
読む内容が偏ってしまう場合がある。
~
~
-Webサイト制作のながれ
1.プロジェクトの企画 調査 コンセプトを確定(目標とゴール設定)
2.取材、撮影。
3.Webサイト全体の構成作成(サイトマップ作成)
4.Webページの情報設計(ワイヤーフレーム)
5.デザイン作成(イラレでのビジュアル制作)
6.コーディング・システム開発
7.テスト
8.リリース
[[Webサイト作り方>https://blog.nijibox.jp/article/website_flow/#STEP3Web1]]
[[雑誌ができるまで>https://jinji.shogakukan.co.jp/2018_teiki/job/magazine.html]]
[[Webメディアの立ち上げ方>https://www.fourglobe.co.jp/blog/p-1461]]
~
-[[スケジュール>https://docs.google.com/spreadsheets/d/1ss1zRpgqS5AobAsQp278wRbG2EhlnKOSOwk0VOyC4oM/edit?usp=sharing]]
~
~
***アイデアスケッチ
#image(IMG_0205.JPG)

**2022.04.14
***調査
~

参考サイト
-[[ANTENNA>https://antenna-mag.com/]]
-[[BRUTUS>https://brutus.jp/]]
-[[マガジンど>https://dododododo.jp/]]
-[[HOKKAIDO TO GO>https://hokkaidotogo.com/]]
-[[AXIS>https://www.axismag.jp/]]
-[[haconiwa>https://www.haconiwa-mag.com/design/]]
-[[AYONDO>https://ayond.jp/]]
-[[Podcast Weekend>https://podcastweekend.jp/]]
-[[0から考えよう>https://www.shogakukan.co.jp/zero/]]
-[[temamori>https://temamori.com/]]
~

***テーマ案
-多様性をテーマにしたWebマガジンの制作
-地震などの災害時に役立つWebサイトの制作
-

~