らくがきのおとも
絵の資料をまとめたサイト
Keywords:Web / pukiwiki
http://takearest.php.xdomain.jp/OTOMO/
プロジェクトの概要
これは何?
絵の資料をまとめたサイトの作成
背景
私は普段からイラストを作成するのだが、それに使用する資料を集めることが億劫に感じることが多々ある。
またパーツごとやジャンルごとの資料サイトは存在するが、それらがまとまったサイトは見受けない。資料とは別に講座系のサイトも勉強になるため使用するのだが、それも一緒にまとめてあるものは尚更見ない。
資料サイト・講座系のサイトがまとまったものがあれば無駄な時間を減らすことが出来、効率的に画力をあげることが出来ると思った。
ターゲット
絵を描きたい人、上達させたい人
制作物
絵の資料のまとめサイト
http://takearest.php.xdomain.jp/OTOMO/
調査
絵を描く際に使用できる資料をまとめたサイトがないか改めて探した。人体デッサン、服装、背景などをそれぞれまとめたサイトは複数見られたが、それら複数をまとめたサイトはやはり見つからなかった。
プロジェクトで使用するツール
- Atom
- pukiwiki
まとめ
実際に絵を描く際使用したサイトをまとめているため実用的なサイトに仕上がったと思う。
絵を描く際まず作成したサイトを使い資料を集め、見つけられなかった資料を別途探しそれを随時追加していくという方法でサイトを拡大していきたい。
プロジェクト管理
スケジュール
ToDo
- トップページのメニュー欄の中身をpukiwikiを使って編集したいが方法がわからないので調べる
- 日本語フォントと英語フォントの併用方法を調べる
- web fontで使用したい日本語のフォント探す
- もしあればweb fontの導入方法を調べる
-手書き風のフォントを探す
-またそのメニューにカーソルを持って行った時に小さなメニューが表示されるようにしたい(ラフスケッチ参照)ので方法を調べる
-iframeのプラグインを調べる
-入れる資料サイトをリスト化
-デザインの練り直し
-「Lecture」をワイヤーフレーム作成後追加を決定したため、トップページにどう入れるかを思案
進捗・記録
2020.7.12
- トップページのリンクの変更
トップページのメニューバーのリンクをpukiwikiからトップページ内の該当部分に変更。
(メニューバーのリンクをクリックするとページ下部にスクロール)
2020.7.8
- 当サイトのメインビジュアルの更新
当サイトと作成したサイトのビジュアルイメージが少し異なったため変更。
2020.7.7
- 紹介ページの幅の調整
項目と項目の間の幅がレスポンシブ に対応していなかったため修正 - リンクを新規タブで開けるよう修正
- pukiwikiのメニューバーの削除
サイト上部にメニューバーがあるためpukiwikiのメニューバーは必要ないと判断し削除
2020.6.30
- サイト全体のカラーの統一
サイト内に色のばらつきがあったためオレンジ系統に色を統一
2020.6.24
- トップページの作成
Aboutなどの欄がダミー及び空白になっていたため、
説明文等を作成 - トップページ用、資料サイト掲載用の画像の作成・掲載
掲載サイトをスクリーンショットし、
画像サイズやサイズ比を編集 - レスポンシブデザインの作成
メニューバーや余白の幅、文字サイズを調整
2020.6.18
- iframeを撤回
昨日のバグを確認したところ、パソコンの方でも発生
Iframeではなくスクリーンショットを使うことにした
- メニューバーの修正
pukiwikiでメニューバーが正常に動作しないバグを修正
2020.6.17
- バグの確認
スマホ(Chrome)でpukiwikiのサイトを確認したところ、
Iframeを使用したページが表示されなくなっていた(パソコン(Safari、Firefox)では表示可能)
Iframeを用いて表示することが出来ないサイトもあったため、
全てのサイトをトップページのスクリーンショットにすることを検討
2020.6.16
- iframeの調整
Iframeを使用してサイト内に外部サイトを埋め込むことができるようになったため、
試しにMaterial/人内を作成。
一部のサイトが表示されない事象が発生(外部サイト側のセキュリティ?)
掲載サイトのトップページ及び該当ページのスクリーンショットで代用したいが、著作権が大丈夫か分からないので要調査
- メニューバーのMaterialにサブメニューを追加
Materialをクリックするとサブメニューが表示されるシステムを追加
pukiwikiのメニューバーに同様のシステムを導入してみたが、正常に動作しなかった
2020.6.15
- スマホ用CSSの作成
pukiwikiの編集履歴のメニューを画面が縮むと下に移動するように変更
2020.6.12
- pukiwikiのcssを仮で作成
試しに収集したサイトを埋め込もうとしたが、
iframe(プラグイン)がよくわからなかったため保留
2020.6.10
- トップページの背景の変更
スケッチブックのような画像を挿入
下の方が上手く出来ておらず白いままなので要修正
- 下の方が白くなる事象を画像位置の固定(fixed)で修正
本当はスクロールに合わせて移動して欲しいが、ひとまず形にはなったため優先度は低め。
2020.6.8
- サーバーの取得
XFREEにてサーバーを取得
http://takearest.php.xdomain.jp/OTOMO/
サブページ(pukiwiki)はまだ触っていないため初期の状態。 - トップページの画像のバグを修正
- pukiwikiのパスワード等初期設定の完了
2020.6.3
- サイトの収集、リストへ追加
その他の欄を増やしたいが、ぱくたその資料取り扱い数が多すぎて他のいいサイトが見つからない。
- 参考にしたいサイトの収集
http://www.beehappy238.com
http://design-gallery.biz/395/(該当サイトのデザインが変更されていたため、紹介サイトを掲載)
- トップページの作成
https://iyui246.github.io/OTOMO2/
まだきちんとできてないが時間が足りず一旦作業終了。
画像が全体的に大きめのためリサイズをしないといけない。
FireFoxで作業していて気づかなかったが、後でSafariで開いたらバグが大変なことになっていた。要修正。
2020.5.27
- 収集したサイトのリスト化
リスト
作成したサイトに掲載する際小さな紹介文のようなものをつけようと考えていたため、合わせて作成。
2020.5.26
- メインビジュアルの設定
サイト用の画像が完成し次第差し替える予定だが、ひとまず簡単に描いたものを入れた。
2020.5.20
- フォント探し
アルファベットのフォントは「Comic Sans MS」に決定
日本語のフォントはいいものが見つからなかった為今後も探す予定
Web fontというものを少し触ってみたが、いまいち理解ができなかったので要調査
(使いたいフォントがない場合は「ヒラギノ丸ゴ ProN」を使用。)
また日本語のフォントと英語のフォントを併用する方法もわからないためこちらも調べる必要がある
- Topに表示させる画像について思案
迷走に迷走を重ね何も決まらなかった
高画質版
強いて言えば右下のスマホとおともの画像が、落ち着いている上に資料サイトと言うことが伝わりやすいかもしれない…?
2020.5.19
- 方向性の思案
収集するサイトについて、とりあえずで考えていることを書き出した
書き出したものの画像
書き出したものを要約↓↓↓
ひとまず自分が絵を描く際に使いたいサイトを集める方向で進めることにした
私は人物を中心としたコミックイラストを描くことが多い為、その絵を描くのに必要な資料を集めていく予定
(人物のポーズ、背景、ファッション、小物など。動物等も入れたいが、絶対必要というわけではない為後回しにして構わないように思う。)
2020.5.13
- GitHubのアカウント作成、試運転
以前に授業で作成したサイトをウップロードし、きちんと動くことを確認
https://iyui246.github.io/Commissioning/
- サイトのトップページの作成を開始
https://iyui246.github.io/OTOMO/
(画像は以前作品投稿愛好会で使用したものをダミーとして使用)
2020.5.11
- サイトマップを作成
- pukiwikiでサイトを作成することに決定
2020.5.6
- スケジュールの作成
サイトにイラストを掲載する場合、制作時間もあるため早めに決定したい。
(極力掲載したくはない…)
- ラフスケッチの作成
高解像度版(少しデータ大きめ)
- 掲載するサイトの収集
講座系も見ていて楽しい上に勉強になるので、収集する項目のひとつに加えることに決定。
併せて、ラフには書いてないがサイトのメニューバー(Home About…)の中に「lecture」として加える。
2020.5.5
当ページのタイトル、「これは何?」等の欄を埋めた
「目的・趣旨」の欄の作成時、このプロジェクトは時間短縮だけでなく画力向上に繋がる可能性があるという気付きがあった。
"手軽さ"に力を入れるべきかもしれない。
2020.4.29
方向性の決定
- 趣味でイラストを作成する際、資料収集で無駄な時間を使ってしまう。
→資料が集まったサイトを作成したい。
似たサイトがないか検索したところ、人体、服、背景などそれぞれをまとめたサイトはあったもののそれらすべてをまとめたサイトは見受けられなかった。
人体
ファッション
背景