LogoMark.png

猪本結衣/情報デザイン研究I の変更点


#author("2020-07-08T16:38:35+09:00","default:member","member")
#author("2020-07-12T16:12:33+09:00","default:member","member")
*らくがきのおとも
絵の資料をまとめたサイト
//( 例:香椎の日常を記録するフォトギャラリーサイト)
'''Keywords:Web / pukiwiki'''
~
#image(mainvisual.png);
[[http://takearest.php.xdomain.jp/OTOMO/>http://takearest.php.xdomain.jp/OTOMO/]]
~
~


**プロジェクトの概要
//&color(red){このプロジェクトに関する外部向け情報を記載して下さい。};

//プロジェクトごとに作業の進め方は異なるので、見出しの構成もそれに応じて変わるものと考えて下さい。要は、メンバー間で「情報共有」すべき内容を、整理して書く・・ということです。};
~
***これは何?
絵の資料をまとめたサイトの作成
~

***背景
私は普段からイラストを作成するのだが、それに使用する資料を集めることが億劫に感じることが多々ある。
またパーツごとやジャンルごとの資料サイトは存在するが、それらがまとまったサイトは見受けない。資料とは別に講座系のサイトも勉強になるため使用するのだが、それも一緒にまとめてあるものは尚更見ない。
資料サイト・講座系のサイトがまとまったものがあれば無駄な時間を減らすことが出来、効率的に画力をあげることが出来ると思った。
~

***ターゲット
絵を描きたい人、上達させたい人
~

***制作物
絵の資料のまとめサイト
http://takearest.php.xdomain.jp/OTOMO/
~

***調査
絵を描く際に使用できる資料をまとめたサイトがないか改めて探した。人体デッサン、服装、背景などをそれぞれまとめたサイトは複数見られたが、それら複数をまとめたサイトはやはり見つからなかった。
~

***プロジェクトで使用するツール
-Atom
-pukiwiki
~

***まとめ
実際に絵を描く際使用したサイトをまとめているため実用的なサイトに仕上がったと思う。
絵を描く際まず作成したサイトを使い資料を集め、見つけられなかった資料を別途探しそれを随時追加していくという方法でサイトを拡大していきたい。
~
~


**プロジェクト管理
//&color(red){プロジェクト管理のためにメンバー間で共有する情報を記載して下さい。};
~
***スケジュール
//-進行管理表(ガントチャート形式)へのリンク
-[[スケジュール>https://docs.google.com/spreadsheets/d/1hkEYk6tN1t3u_Mpv_kIXuB45ephcWYjFevc3Ipp-rrA/edit?usp=sharing]]
~


***ToDo
//&color(red){解決すべき課題、やるべきことなどを箇条書きにします。};
//&color(red){完了したら「取り消し線」を付します。};

//-◯◯に連絡を取り、◯◯の利用に関する許諾を得る
//-%%◯◯部分のバグを修正する。%%


-トップページのメニュー欄の中身をpukiwikiを使って編集したいが方法がわからないので調べる
-日本語フォントと英語フォントの併用方法を調べる
-web fontで使用したい日本語のフォント探す
-もしあればweb fontの導入方法を調べる
~

%%-手書き風のフォントを探す%%
%%-またそのメニューにカーソルを持って行った時に小さなメニューが表示されるようにしたい(ラフスケッチ参照)ので方法を調べる%%
%%-iframeのプラグインを調べる%%
%%-入れる資料サイトをリスト化%%
%%-デザインの練り直し%%
%%-「Lecture」をワイヤーフレーム作成後追加を決定したため、トップページにどう入れるかを思案%%
//-%%メインビジュアルに画像を入れる%%
//-%%方向性の決定%%
//-%%当ページのタイトル、これは何?等の欄を埋める%%
//-%%スケジュールの作成%%
//-%%現状pukiwikiで考えているが、htmlの方が使いやすい可能性もあるため思案%%←pukiwikiに決定
//-%%サイトマップの作成%%
//-%%[[GitHubの導入、試運転>https://design.kyusan-u.ac.jp/OpenSquareJP/?GitHubPages]]%%
~
~


**進捗・記録
//&color(red){作業の進捗を詳細に記録して下さい(最新の情報がトップ、古い情報は沈む)。};
~
***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/人>http://takearest.php.xdomain.jp/OTOMO/?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
-サイトの収集、[[リスト>https://docs.google.com/spreadsheets/d/1LAiQl5HkIKdO-6i7VSG4kzhehgbsohmj7psY1B4Ib5Y/edit#gid=0]]へ追加
その他の欄を増やしたいが、ぱくたその資料取り扱い数が多すぎて他のいいサイトが見つからない。
~
-参考にしたいサイトの収集
http://www.beehappy238.com
http://design-gallery.biz/395/(該当サイトのデザインが変更されていたため、紹介サイトを掲載)
~
-トップページの作成
https://iyui246.github.io/OTOMO2/
まだきちんとできてないが時間が足りず一旦作業終了。
画像が全体的に大きめのためリサイズをしないといけない。
FireFoxで作業していて気づかなかったが、後でSafariで開いたらバグが大変なことになっていた。要修正。
~
***2020.5.27
-収集したサイトのリスト化
[[リスト>https://docs.google.com/spreadsheets/d/1LAiQl5HkIKdO-6i7VSG4kzhehgbsohmj7psY1B4Ib5Y/edit#gid=0]]
作成したサイトに掲載する際小さな紹介文のようなものをつけようと考えていたため、合わせて作成。
~

***2020.5.26
-メインビジュアルの設定
サイト用の画像が完成し次第差し替える予定だが、ひとまず簡単に描いたものを入れた。
~

***2020.5.20
-フォント探し
アルファベットのフォントは「Comic Sans MS」に決定
日本語のフォントはいいものが見つからなかった為今後も探す予定
Web fontというものを少し触ってみたが、いまいち理解ができなかったので要調査
(使いたいフォントがない場合は「ヒラギノ丸ゴ ProN」を使用。)
また日本語のフォントと英語のフォントを併用する方法もわからないためこちらも調べる必要がある
~
#image(sketch.png,right,20%);
-Topに表示させる画像について思案
迷走に迷走を重ね何も決まらなかった
[[高画質版>https://drive.google.com/open?id=1NUatb3qIHkPwnw0wwgqa5oroOWYGDkIY]]
強いて言えば右下のスマホとおともの画像が、落ち着いている上に資料サイトと言うことが伝わりやすいかもしれない…?
~

***2020.5.19
-方向性の思案
収集するサイトについて、とりあえずで考えていることを書き出した
[[書き出したものの画像>https://drive.google.com/open?id=1Q7O5GVEm11hPYj_9NV3pi0WnKFyajKo8]]

書き出したものを要約↓↓↓
ひとまず自分が絵を描く際に使いたいサイトを集める方向で進めることにした
私は人物を中心としたコミックイラストを描くことが多い為、その絵を描くのに必要な資料を集めていく予定
(人物のポーズ、背景、ファッション、小物など。動物等も入れたいが、絶対必要というわけではない為後回しにして構わないように思う。)

~
***2020.5.13
-[[GitHub>https://github.com]]のアカウント作成、試運転
以前に授業で作成したサイトをウップロードし、きちんと動くことを確認
https://iyui246.github.io/Commissioning/
~
-サイトのトップページの作成を開始
https://iyui246.github.io/OTOMO/
(画像は以前作品投稿愛好会で使用したものをダミーとして使用)
~

***2020.5.11
#image(sitemap.png,right,30%);
-サイトマップを作成
-pukiwikiでサイトを作成することに決定
~
~

***2020.5.6
#image(rough.png,right,30%);
-[[スケジュール>https://docs.google.com/spreadsheets/d/1hkEYk6tN1t3u_Mpv_kIXuB45ephcWYjFevc3Ipp-rrA/edit?usp=sharing]]の作成
サイトにイラストを掲載する場合、制作時間もあるため早めに決定したい。
(極力掲載したくはない…)
~
-ラフスケッチの作成
[[高解像度版>https://drive.google.com/file/d/1FbX9f5Oe7IQCtSC5xlyb2L0DDKnf2XJ7/view?usp=sharing]](少しデータ大きめ)
~
-掲載するサイトの収集
講座系も見ていて楽しい上に勉強になるので、収集する項目のひとつに加えることに決定。
併せて、ラフには書いてないがサイトのメニューバー(Home About…)の中に「lecture」として加える。
~

***2020.5.5
当ページのタイトル、「これは何?」等の欄を埋めた
「目的・趣旨」の欄の作成時、このプロジェクトは時間短縮だけでなく画力向上に繋がる可能性があるという気付きがあった。
"手軽さ"に力を入れるべきかもしれない。
~

***2020.4.29
方向性の決定
-趣味でイラストを作成する際、資料収集で無駄な時間を使ってしまう。
→資料が集まったサイトを作成したい。
似たサイトがないか検索したところ、人体、服、背景などそれぞれをまとめたサイトはあったもののそれらすべてをまとめたサイトは見受けられなかった。
[[人体>https://ksd-illust.com/illustration-refarences-site-13/]]
[[ファッション>https://street-fashion-snap.com]]
[[背景>https://matome.naver.jp/odai/2141649575456190401]]
~


//***20XX.XX.XX
//-課題(問題解決の手段)の設定
//-メンバーの役割分担
//-スケジュールの作成

~

//***20XX.XX.XX
//-問題点の洗い出し・整理
//-プロジェクトのタイトル決め
~
~