• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 坂井彩華/情報デザイン研究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サイト

• ワイヤーフレーム

• サイトマップ

制作ツール

• HTML
• CSS
  
  

プロジェクトの期間

2024.09.16 - 2024.12.23

まとめ

調査

現状調査

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

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

先行事例

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

技法・技術情報

プロジェクト管理

スケジュール

• リンク
  
  

ToDo

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

---

---

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でそれぞれのコンテンツの簡単な説明のみを書き、詳しい内容は別ページでとんで見る

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

2024.09.30

サイト制作

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

ワイヤーフレーム

• OneDriveのリンク
  
  

内容

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

2024.09.23

サイトマップ

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

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

参考サイト

• レンズとカフェ LensPark
• graziexx PARLOR
• PawPark-パウパーク-
  
  

先行事例

• ぼく、シマエナガ
  • 写真家・やなぎさわごうのサイトでブログ形式
  • 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サイトでしおりやステッカーを印刷できるようにする
  • サイト上にいろんなシマエナガのキャラを登場させ、説明させる
• 北海道の環境問題に絡めてみては
  
  

テーマ案

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

好きなもの

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