坂井彩華/情報デザイン研究II のバックアップ(No.6)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
坂井彩華/情報デザイン研究II へ行く。
- 1 (2024-11-18 (月) 11:07:48)
- 2 (2024-11-26 (火) 09:41:08)
- 3 (2024-11-26 (火) 09:41:08)
- 4 (2024-12-02 (月) 22:33:32)
- 5 (2024-12-09 (月) 01:58:46)
- 6 (2024-12-09 (月) 01:58:46)

もっちり、ふわしまちゃん

シマエナガの魅力を紹介するサイト

Ayaka Sakai
Keywords：Long-tailed Tit, Web, Illustration
https://ame-1226.github.io/mtr_fwsm/

概要

これは何？

シマエナガを紹介するサイト

背景と目的

背景
昨今、森林伐採や都市開発等でさまざまな野生生物の住む環境が少なくなっていっている。この状態が続けば、絶滅の危機に陥る動物が出てきてもおかしくない状況である。そこで、日本では北海道にしか生息していないシマエナガに注目した。生息地が限られているため、絶滅に陥りやすい動物と考えた。
目的
野生生物の一種であるシマエナガの生態や環境を知ってもらい、環境のことを考えてもらう

コンセプト

身近に寄り添い、溶け込む
やわらかい（パステルカラー）

成果物の仕様

Webサイト

制作ツール

Visual Stadio Code
CLIP STUDIO PAINT
Adobe Illustrator

プロジェクトの期間

2024.09.16 - 2024.12.23

まとめ

イラストを多く使用することで、退屈になりがちな生態の部分も楽しく知れるようにできた。
ただ淡々と説明するものではなく、説明を担うキャラを制作し、キャラの話し口調で説明文を書くことで文に温かみが生まれ、身近に感じやすくすることができた。

調査

現状調査

シマエナガが絶滅危惧種と言われる理由とその背景を解説
- 環境省のレッドリストに絶滅危惧種として掲載されていない
- 日本では北海道のみに生息
- 北海道に限定された生息地を持つため、森林環境の変化で大きな影響を受けやすい

シマエナガはどんな鳥？特徴、生態、生息地について解説
- シマエナガの主な特徴を記載

先行事例

ぼく、シマエナガ
- 写真家・やなぎさわごうのサイト
- 写真＋文字のブログ形式
- Xアカウント「ぼく、シマエナガ。（@daily_simaenaga）」も運営
ぴよ手帖
- シマエナガの雑貨ブランドサイト

技法・技術情報

プロジェクト管理

スケジュール

リンク

ToDo

~~メインビジュアル~~
~~タイトル~~
~~スケジュール~~
写真集め
イラスト制作
記事情報整理
作品概要

進捗記録

2024.12.02

メモ

サイト
- Aboutのサイト説明とシマエナガについての説明はホームにあったほうが良い
- サイト上のメインビジュアルではどのようなことを伝えたい・情報が載っているサイトなのかわからない
- メインビジュアルに薄く紹介サイトを載せる等の工夫が必要
シマエナガの写真を探す
- ウィキペディアコモンズに乗っているものはサイトのURLを載せておけば使用OK

2024.11.25

作品概要

googledriveへのリンク

メモ

概要
- 制作物のイラストとWebサイトの欄は分けて大丈夫
- 画像は１６：９等のサイズを統一するといい
- 参考文献に入れたもので関連部分に※１などの表記をする
- シマエナガの画像は絶対入れる
- Webサイトの画像はそのままスクショして貼ってもいいし、Metaのmacの画像に当てはめてPCで見てるふうにしてもいい

サイト
- ページ名をタイトルのもっちり、ふわしまちゃんにする
- About等のページ名は「もっちり、ふわしまちゃん-About」「About-もっちり、ふわしまちゃん」に表記の統一をする

2024.11.18

概要集

先行事例の欄まで記入

サイト

メインヴィジュアルを一番上に表示
メニューのコンテンツの並びを変更
イラストと文字の比率を指定

メモ

作品概要をある程度書いておく
サイト（コード）
- div class ごとそれぞれにサイズを設定する
- flex 1、2（サイズが1:2になる）　width 40%　等
- 本制作イラストを入れてみて文字とイラストの余白を考える
サイト
- メニューのgalleryはおまけ要素が強いため、extraの前後が適切かもしれない
- メニューの順番は優先度を考える（このサイトで何が一番重要で見せるべきものかどうか）
- ホームはイラストのみを載せてみてもいいのでは（いっぱい散りばめる）
- イラストをボタン風にしてメニューの内容のページにとべるようにするのはどうか？
- ホームの一番上に幅いっぱいでメインビジュアルを載せる
コンセプト
- 身近によりそうもの
- 日常に溶け込む、取り入れる
- 「イラストで〜」は無くしてもいいかも
写真
- 写真を使うとイラスト中心で描いている部分との違いで浮かないだろうか？

2024.11.11

イラスト

ラフスケッチ

サイト

ホームページのシマエナガの説明部分を横並びに
- PCでの表示だと説明部分の空白が多すぎるように感じる
- 説明文が短すぎるのか？
galleryはタイトルとイラストだけでもいいのでは？

サイズ

ステッカー
- 60×60mm
しおり
- 124×40mm（文庫本にはさめるサイズ）
説明イラスト
- 500×400px
- スマホサイズだとちょうどいいのでPCはもう少し大きめでもいいかもしれない

2024.10.28

サイト

要素を表示する幅を指定
全体の色をメンビジュアルに近い色に変更
ホームのシマエナガの説明テキストをキャラのおしゃべり風に

コンセプト

シマエナガならではのコンセプトとは？
魅力
- つぶらな目
- 顔パーツがぎゅっとなっているところ
- まんまるふわふわ
- 真っ白

2024.10.21

中間報告

既存のシマエナガのいいと思ったサイトのリンクを自身のサイトにまとめて紹介してもいいのでは？
文字が幅いっぱいで読みにくいかも
- 文字を表示する幅を決めて大事な部分はしっかり読めるように
コンセプトが薄い
- イラストだと魅力の部分を強調できるが、どこを強調、伝えたいのか、
- 今のままだと他の動物でも同じコンセプトでいける
- シマエナガならではのコンセプトが必要

2024.10.14

サイトマップ

生息地

江別市・千歳市・恵庭市・北広島市・南幌町及び長沼町を流域とする千歳川付近にかけて目撃が多い

メインビジュアル

英語表記

シマエナガ：Long-tailed Tit
生態：ecology
おまけ：extra

メモ

サイトのコードの整理
- ページの表記を英語に変える
- 別ページ表記ならばもうホームにそのページの内容は載せない
「このサイトについて」が他と比べて言葉が長い
ナビゲーションを英語表記でカーソルがきたときに日本語表記にしてもいいのでは
クリエイティブ・コモンズでクレジット表記（ページリンクを表記）していれば画像を使用してもいいので、使える画像をできるだけ多く集めてファイルで管理する
メインコンテンツを何にするか
- イラストメインならばイラストだけが載ったページ「イラストギャラリー」的なものがあってもいいのでは？

2024.10.07

言葉

観察方法
- 見学マナー
- おうち訪問

生態
- ぼくたちのせいかつ

見せ方

ホームに簡単な説明を載せ、別サイトにそれぞれ詳しいことを書く
イラストを多めに入れるとなると１ページスクロールでは長くなりすぎる気がする

タイトル

もっちり、ふわしまちゃん

メモ

やわらかい雰囲気でいくにはどうしたらいいかを考える
- 生態・観察方法の言葉は漢字で堅苦しいかんじ
  ※ひらがなでもいいかも
- 誰視点で展開していくか
  ※シマエナガ視点だと生態等の言葉も変わってくる
- 現状のサイトはカクカクとしっかりした枠組みとなっているが、丸くするなどしっかりした枠組みはいらないかもしれない

観察方法という文言だと積極的に観察に行くように感じる
- お互いの生活空間を守り、適切な距離感での観察方法を紹介したいため伝えたいこととの齟齬が生じるかも
コンテンツをどう見せるのか
- 1ページに全ての情報を載せ縦スクロールで紹介していく
  ※この時、見せたい順番で配置していく
- Homeでそれぞれのコンテンツの簡単な説明のみを書き、詳しい内容は別ページでとんで見る

まずやわらかいイラスト（ラフ）を描いて、その雰囲気にサイトを合わせていく

2024.09.30

サイト制作

HTMLでのせるページを作成
- https://ame-1226.github.io/sa_shimaenaga/

ワイヤーフレーム

OneDriveのリンク

内容

生態
- 名前の由来
- 学名
- 分類
- 形態(身体的特徴)
- 分布
- 生息環境
- 食性
- 繁殖
- 生活形態

2024.09.23

サイトマップ

シマエナガの項目を削除し、生態と観察方法を別に

シマエナガでくくるのがおかしい気がする

参考サイト

先行事例

ぼく、シマエナガ
- 写真家・やなぎさわごうのサイトでブログ形式
- Xアカウント「ぼく、シマエナガ。（@daily_simaenaga）」も運営。
- サイトの見た目はシンプル。
ぴよ手帖
- シマエナガの雑貨ブランドサイト

メモ

さまざまな野生生物の住む環境が少なくなっていっている
だから、その野生生物の一種であるシマエナガの生態や環境を知ってもらって環境のことを考えてもらう
あまり深く考えすぎない
以前作ったサイトの枠組みを利用する
野生生物の環境について調べた方がいいか？（事例として）

サイト制作準備

ワイヤーフレーム
サイトマップ
参考サイトの調査
制作ツールの決定

ToDo

メインビジュアル
タイトル

2024.09.16

成果物の仕様

シマエナガの生態や環境についてまとめたサイト
- 今は絶滅する可能性は低いが、今の状況が続くと可能性はあるので状況を知ってもらう
- 類似のサイトでは文字情報が中心であったため、イラスト中心のサイトにする

調査まとめ

環境省のレッドリストには絶滅危惧種として掲載されていないが、IUCNレッドリストでは「低懸念」とされている
※IUCNレッドリストにおける保全状況の「Least Concern（LC）」は「低懸念」を意味し、評価された時点では絶滅のおそれがなく、近い将来絶滅に瀕する見込みが低い種を指す
絶滅危惧種と言われている原因
- 生息域の森林環境の変化
  - 森林伐採、都市開発→観光や農業の発展、これに伴い森林が減少
  - 気候変動、気温の上昇や季節の変化→生態系に影響し、餌となる昆虫や植物が減少
- 観光客の影響で生息地に圧力がかかる
守るためには、環境教育や生態を知ってもらう、観光客へのガイドライン

調査

シマエナガが絶滅危惧種と言われる理由とその背景を解説
- 環境省のレッドリストに絶滅危惧種として掲載されていない
- 日本では北海道のみに生息
- 生息域の森林環境の変化
  - 森林伐採、都市開発→観光や農業の発展、これに伴い森林が減少
  - 気候変動、気温の上昇や季節の変化→生態系に影響し、餌となる昆虫や植物が減少
- 観光客の影響で生息地に圧力がかかる
- 絶滅危惧種とされないのは生息数や分布状況が比較的安定しているから
  ※レッドリストの基準に達していない
  - 理由は北海道である程度の個体数が確認されており、急激な減少が見られないから
- 北海道に限定された生息地を持つため、大きな影響を受けやすい
- 守るためには、環境教育や生態を知ってもらう、観光客へのガイドライン

シマエナガはどんな鳥？特徴、生態、生息地について解説
Japanese（和名）シマエナガ
English（英名） Long-tailed Tit
scientific name(学名) Aegithalos caudatus trivirgatus
classification（分類） Ave、 Passeriformes、 Aegithalidae、Aegithalos
鳥綱、スズメ目、エナガ科、エナガ属
IUCN Status(保全状況) LEAST CONCERN
Length（体長） 10～14cm
Weight（体重） 10g
※IUCNレッドリストにおける保全状況の「Least Concern（LC）」は「低懸念」を意味し、評価された時点では絶滅のおそれがなく、近い将来絶滅に瀕する見込みが低い種を指す
- 生態
  - 雑食。主食：樹液や木のみ、昆虫など。大好物はアブラムシ
  - 留鳥
  - 繁殖期：4-6月
  - 寿命は長くても5年程度
- 低懸念に分類されており、絶滅の可能性は今のところ低い

環境省レッドリスト2020の公表について
- 環境省レッドリスト2020(PDF)

メモ

成果物の仕様を明確に
- Webサイトでしおりやステッカーを印刷できるようにする
- サイト上にいろんなシマエナガのキャラを登場させ、説明させる
北海道の環境問題に絡めてみては

テーマ案

シマエナガ×ミニキャラの癒し系グッズ制作

好きなもの

シマエナガ
４コマ漫画
ミニキャラ
ステッカー
ガチャガチャ
ゲーム
イラスト