平田愛恵/卒業研究I

幻想生物図鑑

架空の生物を紹介するwebサイトの制作
Keywords：wordpress, iliustrator

図鑑のサイト
 平田愛恵/イラストまとめ
 前期概要

↑

研究の背景・目的

伝説の生物を紹介する本をきっかけに言葉の由来がそれにある、それに関わる行事が今も続いている、解釈も国や地域によって様々な違いがあることに気づいた
様々な娯楽作品で伝説の生物を元にしたキャラが登場しているが作品によって解釈が異なることで元の生物がどんな生態を持つか知らない人がいるのではないかと感じた
伝説の生物を面白いと感じているのでもっとその生態について知ってもらいたい

↑

調査

(1)レイアウトの調査
①調査目的

Webサイトのレイアウトを決めるため

②調査方法

動物を紹介するサイトや制作物と同じく伝説の生物を紹介するサイトを参考に特徴をまとめる

③調査結果
動物を紹介するサイト

トップページのヘッダーにメインとなる動物の写真、その下にアイキャッチがある
サイトの主役である動物の写真が多く使われている
個別記事では英名、和名、分布地などの情報を箇条書きにして詳しい生態を文章で加えている

伝説の生物を紹介するサイト

トップページはヘッダーの画像はなく記事のアイキャッチが並んでいることが多かった
動物と違い確定的なデータがあまりないためか箇条書きの部分はあまりなく外見や生態の特徴を文章ごとに書くことが多い

(2)掲載する伝説の生物の調査
①調査目的

伝説の生物を紹介する記事を作るため

②調査方法
分類

伝説の生物を紹介するサイトや図鑑で採用されている分類を参考にまとめる

選出

娯楽作品(漫画、アニメ、ゲーム)に頻出している生物を分類ごとに集計し順位をつける

③調査結果
分類

ドラゴン、幻獣、精霊・妖精、アンデッド、妖怪、巨人、亜人・獣人の７つが最も多い
近しい要素がある分類をまとめて幻獣、妖精・精霊、人型、妖怪の計４種類にした

選出

上記の分類ごとに娯楽作品（漫画、ゲーム、小説）に頻出する生物の統計を取り、１位から10位までの順位をつけた

↑

コンセプト

分かりやすく簡潔に伝説の生物の魅力を伝える
イメージイラストと生態の文字情報を組み合わせて紹介記事を制作する
カスタマイズがしやすくキーワードとタグで記事を検索できる機能があることからWordPressを利用する

↑

制作

(1)Webサイトの構成

サイトの趣旨を分かりやすく伝えるためドメイン名をfantasycreatureguide.comにする
調査結果を元にトップページとABOUTページと個別記事ページ、サイトに載せるイラストを制作した

(2)トップページ

ページの真ん中にメインビジュアルのイラストを載せる
その下に個別記事のアイキャッチ(3列)を配置する

(3)ABOUTページ

サイトの制作目的、生物の分類と説明、個別記事の紹介文を作成する際に使用した参考文献と著作者を記載

(4)個別記事ページ

記事のページの真ん中にメインとなるイラストを配置
その下に箇条書きの生態情報とより詳細な生態を5行程度で紹介する文章を記載

(5)イラスト

記事に使用するイラストは一点につきラフ、モノクロ、塗りの総制作時間は20時間程度
①手書きでラフ、それを元にモノクロのイラストを描く。
②スキャンでデジタル化しillustratorで画像をトレースする。
③カラー用のレイヤーを作り絵のパーツごとに色を乗せ不透明度を調整したりグラデーションを加えて仕上げる。

↑

まとめ

Webサイトのカスタマイズとイラストの試作をすることでプロジェクトの具体的なビジョンと今後の課題を発見できた
後期では前期を踏まえてWebサイトの改良と紹介記事の製作に取り組む

↑

参考文献

書籍

クリエイターのためのファンタジー大辞典
幻想世界幻獣辞典
ビジュアル版幻獣・モンスター
伝説の神獣・魔獣イラスト大辞典
幻想悪魔大図鑑

Webサイト

動物図鑑

伝説の生物の図鑑

↑

プロジェクトの概要

↑

概要

伝説の生物を紹介するためにWebサイトを作る

↑

背景・目的

　書店で見かけた伝説の生物を紹介する本を読んだことをきっかけに興味を持ち調べるようになった。そうしていく中で現在私達の身近にある言葉の由来が伝説の生物にあったり、それに関わる行事が今も続いていることを知り、ますます興味深くなった。また、伝説の生物に対する解釈も国や地域によっては神であったり悪魔であったりして様々な違いがあることに気づき新しい発見を得ることができた。
　近年様々な娯楽作品で世界中の伝説の生物をモチーフとしたキャラクターが登場しているが作品によって解釈が異なることで元の生物がどんな生態を持つのか知らなかったり名前のみ知っているという人がいるのではないかと思い、伝説の生物を面白く興味深いと感じているのでもっとその生態について知ってもらいたいという考えに至った。

↑

制作物

Webサイト、イラスト

↑

プロジェクト管理

↑

スケジュール

制作スケジュール

↑

ToDo

~~webサイトを作る方法の決定~~ wordpressを利用
サイトの骨組みを作る
~~記事を制作する生物の決定~~
参考文献の整理
サイトに載せる文章の作成
イラストのラフを作成
サイトに掲載するイラストの作成
サイトのアイキャッチの作成
サイトの調整
~~独自ドメインの取得~~
~~サーバーに契約~~
サーバー上にアップロード

↑

2020.07.11

イラストの制作方法について
今回行った方法
1.アナログで線画&影を描く
2.スキャンしてillustratorに取り込んで色をつける

↑

2020.07.04

スターサーバーで独自ドメインとサーバーを確保

↑

2020.06.24

webサイトのイメージ図

↑

2020.06.18

イラストの進捗を載せるページを作る
平田愛恵/イラストまとめ

↑

2020.06.11

サイトのイメージ

イメージを作る上で参考にしたサイト
野生動物、絶滅動物の図鑑サイトTOMORROW is LIVED

トップページ
上半分はスライドショーで記事を紹介していて、下半分は6×4枚のアイキャッチで構成されている。文字はサイトのスライドショーとヘッダーとフッターにあるくらいで、写真が多く使われている。

個別ページ
上半分は動物の写真
スクロールすると一番上が和名、英名、学名、体長、体重、尾長、主食、分布の順でその生物の生態について書かれいる。和名~分布は共通事項だが、その下にある解説は記事によって文章量がかなり違うと感じる。

トップページは多く写真を使うことで人の目を惹きやすくしていて見ているだけでも楽しいと感じる。ただスライドショーの画像が大きいことで個別記事のアイキャッチが目につきにくい。
個別ページは記事によって文章量が違うことと解説の文章が長いことが気になった。和名~分布は箇条書きになっていて分かりやすい。短い時間で気楽に読めるサイトにしたいと考えているので文章は簡潔にする。

サイトの文章を作る上で参考にした書籍
参考書籍

↑

2020.06.05

webサイトの制作方法の決定
前回と同じくwordpressを利用する
wordpressで独自ドメインを取得し前回作成したサイトを移行させる
旧サイトのエクスポートはできたが、wordpressでドメインを購入する時の登録手続きで住所の記入が無効になる。調べても具体的にどう記入すればいいのかわからない。
同じ内容のサイトが複数あるとgoogleからスパムサイトと認定されてしまうので移行が完了した後に旧サイトを削除する。

↑

2020.05.28

サイトのメインビジュアルの更新
　情報デザイン研究I,IIでは、アナログのモノクロでイラストを制作していたが、色が少なく画像も粗いため方法を変えることにした。

1.アナログでイラストを描く
2.スキャンしてデータ化してillustratorに配置する。
3.画像トレース機能でグレーの色合いを選択して拡張する。
4.自動選択で同じ色の部分を選択し色を変え、色味を微調整する。

スキャンする時に認識されるよう線を濃く描く。

取り込んだイラストにバランスの狂いや粗さがあり微調整する必要がある。

スマホアプリでアナログイラストをスキャンしたがうまくカメラで撮影できなかったため残念な出来になった。コンビニのスキャナーでスキャンしたところアプリより綺麗にデータを取り込めた。コンビニは近所にあり気軽に行けるのでこちらの方を使うことにした。

↑

2020.05.21

動物や植物の図鑑の表紙のパターン

・タイトルを上に、メジャーな動物(ライオン、虎、サメ、象など)を中央に配置する
・タイトルを上に、メジャーな動物を中央に、その周りに多数の動物を配置する
・タイトルを下に、メジャーな動物を中央に、その周りに多数の動物を配置する
・タイトルを左上に、メジャーな動物をその下に、その周りに多数の動物を配置する
・タイトルを中央に、多数の動物がタイトルを囲むように配置する

↑

2020.05.14

多くの動物図鑑では名前、分布、生息地、体重、主食の情報が載っていることが多い。

図鑑のサイト集

↑

2020.05.07

↑

情報デザイン研究IIで制作したサイトのレイアウトの振り返り

情報デザイン研究IIで制作したサイトではイラストが真ん中より左半分側の位置にあるが、今回は前回と同じにするかそれとも位置を変えるのか迷っている。
情報デザイン研究IIで制作したサイトでは幻想生物についての説明のテキストを２～３個の文章にまとめていたが、箇条書きでその生物の生態・エピソード、外見、生息地、文献ごとに分けて書けば一から文章を考えるより作業コストが軽くなり、閲覧者にもわかりやすいのではないか？

↑

2020.04.29

↑

情報デザイン研究I・Ⅱの反省点

絵の制作ペースが遅い　－　絵を描く際に構図→細部の順に描かず、顔から描いていた。その結果胴体の部分を描く際にどのように描いていいのか分からなくなり絵の制作に時間がかかった。その結果作業全体が大幅に遅れ不十分な出来となった。
wordpressのアイキャッチを作ろうとしたが、調整がうまくいかず途中でやめてしまった。

↑

情報デザイン研究I・Ⅱの反省点をふまえた今回の卒業制作

顔から描いて次に胴体を描く順に絵を制作するとその絵は必ず破綻することになるので、最初に構図を決める→次に細部を決めるの順に描くことにした。
　また、幻想生物は現実世界の動物を組み合わせたものが多いため、よく使われるモチーフの描き方を調べて練習し、毎日腕を動かす習慣をつけるようにした。

　鷲　獅子　虎　馬　蛇　狼　犬　山羊　牛　魚　人間　骨　etc

絵の制作が遅れたことでアイキャッチの制作もまた遅れることとなったので、まず絵を早く制作する。そして作り方をちゃんと調べてアイキャッチをつくる。