もっちり、ふわしまちゃん
シマエナガの魅力を紹介するサイト
- Ayaka Sakai
- Keywords：Long-tailed Tit, Web, Illustration
- https://ame-1226.github.io/mtr_fwsm/
概要
これは何？
シマエナガを紹介するサイト
背景と目的
- 背景
昨今、森林伐採や都市開発等でさまざまな野生生物の住む環境が少なくなっていっている。この状態が続けば、絶滅の危機に陥る動物が出てきてもおかしくない状況である。そこで、日本では北海道にしか生息していないシマエナガに注目した。生息地が限られているため、絶滅に陥りやすい動物と考えた。 - 目的
野生生物の一種であるシマエナガの生態や環境を知ってもらい、環境のことを考えてもらう
コンセプト
- 身近に寄り添い、溶け込む
- やわらかい（パステルカラー）
成果物の仕様
制作ツール
- Visual Stadio Code
- CLIP STUDIO PAINT
- Adobe Illustrator
プロジェクトの期間
2024.09.16 - 2024.12.23
まとめ
- イラストを多く使用することで、退屈になりがちな生態の部分も楽しく知れるようにできた。
- ただ淡々と説明するものではなく、説明を担うキャラを制作し、キャラの話し口調で説明文を書くことで文に温かみが生まれ、身近に感じやすくすることができた。
調査
現状調査
- シマエナガが絶滅危惧種と言われる理由とその背景を解説
- 環境省のレッドリストに絶滅危惧種として掲載されていない
- 日本では北海道のみに生息
- 北海道に限定された生息地を持つため、森林環境の変化で大きな影響を受けやすい
- シマエナガはどんな鳥？特徴、生態、生息地について解説
- シマエナガの主な特徴を記載
- シマエナガの主な特徴を記載
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ToDo
メインビジュアルタイトルスケジュール写真集め- イラスト制作
記事情報整理- 作品概要
進捗記録
2024.01.09
ブラッシュアップ
- メインビジュアルの変更
- ホームをイラストのみに変更
- 画像の縁なし、角丸に統一
- aboutにホームに掲載されていたコンテンツを移動、ふわしまちゃん説明を追加
- サイトについての説明文をふわしまちゃん口調に変更
- それぞれのページ上部にタイトルを表記
- extraのダウンロードをPDFでA4サイズに統一（6枚ずつの配置）
- ステッカーとしおりの一枚ごとのタイトルを削除
- フッターに制作者の情報を表記
- 作品概要の画像を変更
2024.12.23
作業
- aboutにふわしまちゃんの説明
- 画像の縁をなし、角丸に統一
2024.12.16
作業
- サイト内の説明文を全てふわしまちゃん口調に統一
- ページごとに上部にタイトルを表記
2024.12.09
最終発表
- サイト内の説明文を全てふわしまちゃん口調に統一する
- aboutにふわしまちゃんの説明
- 製作者についてはフッターにおまけ程度でいいかもしれない
- ページごとに上部にタイトルを表記
- 画像の縁ありかなしか、法則性が必要
- 角丸あるなしもあるが、角丸統一がサイトにあっているかも
- メインビジュアルの再検討
- garllyのイラストとの統一をはかる
- garllyが楽しかったのであればgalleryコンテンツ中心で考えたほうがいい
- イラストだけを見せて、興味が湧いたら詳しく知れる形式がいいのではないか
- extraのダウンロードはPDFでA4等のサイズで構成したものがいい
2024.12.02
メモ
- サイト
- Aboutのサイト説明とシマエナガについての説明はホームにあったほうが良い
- サイト上のメインビジュアルではどのようなことを伝えたい・情報が載っているサイトなのかわからない
- メインビジュアルに薄く紹介サイトを載せる等の工夫が必要
- シマエナガの写真を探す
- ウィキペディアコモンズに乗っているものはサイトのURLを載せておけば使用OK
2024.11.25
作品概要
メモ
- 概要
- 制作物のイラストと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でそれぞれのコンテンツの簡単な説明のみを書き、詳しい内容は別ページでとんで見る
- 1ページに全ての情報を載せ縦スクロールで紹介していく
- まずやわらかいイラスト（ラフ）を描いて、その雰囲気にサイトを合わせていく
2024.09.30
サイト制作
- HTMLでのせるページを作成
ワイヤーフレーム
内容
- 生態
- 名前の由来
- 学名
- 分類
- 形態(身体的特徴)
- 分布
- 生息環境
- 食性
- 繁殖
- 生活形態
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年程度
- 低懸念に分類されており、絶滅の可能性は今のところ低い
- 生態
メモ
- 成果物の仕様を明確に
- Webサイトでしおりやステッカーを印刷できるようにする
- サイト上にいろんなシマエナガのキャラを登場させ、説明させる
- 北海道の環境問題に絡めてみては
テーマ案
- シマエナガ×ミニキャラの癒し系グッズ制作
好きなもの
- シマエナガ
- ４コマ漫画
- ミニキャラ
- ステッカー
- ガチャガチャ
- ゲーム
- イラスト
site_main2.png
site-map3.png
main.png
site-map2.png
site-map.png
