興梠愛加/情報デザイン研究I をテンプレートにして作成

開始行:
#image(main.png,center,100%) 本を読むきっかけになれるようなwebサイト ~ -''Project Director'' 興梠愛加 -'''Keywords：web,JavaScript , jQuery, ''' //&color(red){''アンケートのご協力をお願いします''};→ [[... -https://kourogi-aika.github.io/bukubuku/ ~ **Overview ***Introduction / What is This //&color(red){これは何か・・を簡潔に}; 著作権の切れた短編小説を紹介するサイト ~ ***Background and Purpose //&color(red){プロジェクトの背景と目的}; 外出することが難しく家の中で過ごす時間が増えている今日、... そこで、普段本を読まない人にも、本に興味を持ってもらうた... ~ ***Concept //&color(red){基本的な考え方、枠組み、視点など}; 本を読むきっかけになれるようなwebサイト 本の世界に入り込めるようなwebサイト --青空文庫のような無料で読めるサイトの本を紹介する。 --短編小説だけをまとめたサイトをつくる。 --本の世界観に合わせた表紙のデザイン。 --文章のかたまりを短くしたり、行間を広くとったりして読み... ~ ***Output //&color(red){成果物の直接掲載またはリンク誘導}; //&color(red){&small(プロジェクトの途上では、試作品等、視... //&color(red){&small(成果物の形式・サイズ・時間尺等の基本... #iframe(https://kourogi-aika.github.io/bukubuku/, 100%, 7... ~ //***Member //&color(red){共同プロジェクトの場合のみ｜メンバーと役割... ~ ***Tools //&color(red){使用するツール｜ハードウエア・ソフトウエア}; Adobe Illustrator Adobe Dreamweaver ~ ***Term //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX... 2021.04.08 ~ 2021.07.15 ~ ***Conclusion / Summary //&color(red){プロジェクトが完結したら「まとめ」を記載し... -表紙やロゴアニメーションを通して作品に興味を持ってもらえ... -作品の読みやすさはもう少し工夫したほうがよかった。 ~ ~ **Survey ***Present Status //&color(red){現状調査、現状の問題の洗い出し}; -一般的に本を読まない人が本を読まない理由 --時間がない。 --本に興味がない。 --文字ばかりだと読む気がなくなる。 --本にお金をかけたくない。 //--動画の方がわかりやすい。 ~ ***Precedent //&color(red){先行事例の紹介、傾向分析など}; -[[本のタイトルのタイポグラフィ>https://www.pinterest.jp/... -webで本を紹介しているサイト --[[大和書房>http://www.daiwashobo.co.jp/]] --[[かみのたね>http://www.kaminotane.com/]] --[[write right light>https://wrl.co.jp/book/]] --[[ラボ出版>https://www.labo-shuppan.jp/book/type/cd/]] ~ ***Technique / Technology //&color(red){プロジェクトの遂行に必要な技法・技術に関す... -[[動くWEBデザインアイデア帳>https://coco-factory.jp/ugok... -[[桜を降らせるエフェクト>https://web-dev.tech/front-end/... -[[簡単CSSアニメーション>https://baigie.me/officialblog/2... -[[aftereffectで作る泡>https://af.araland.com/2019/01/22/... -[[アニメーション終了後にサイトが出てくる>http://smile-de... -[[ AFをgifで書き出す方法>https://www.cyber-promote-movie... -[[SVGアニメーションサンプル>https://attadesign.co.jp/blo... -[[SVGとSCCで描画アニメーション>https://www.ibnet.ne.jp/c... ~ ~ **Project Management ***Schedule //&color(red){計画的な遂行のために、進行管理表を作成して... [[Scheduleのリンク>https://docs.google.com/spreadsheets/d... ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... -%%本の選定%% -%%JavaScriptの勉強%% -%%サイトの試作%% -%%表紙の試作%% -%%ロゴの作成%% -%%表紙の制作%% -%%サイトの制作%% -%%アニメーションをつける%% ~ ~ ~ #hr CENTER:''worklog'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ~ **2021.07.07 ***アンケート結果 #image(アンケート.jpg,center,100%) -表紙やロゴアニメーションを通して作品に興味を持ってもらえ... -作品の読みやすさはもう少し工夫したほうがよかった。 ~ **2021.06.30 ***進捗 -Aboutページ、Linkページを追加しました。 -アンケートを制作しました。[[アンケート>https://docs.goog... ~ **2021.06.23 ***進捗 -「白昼夢」「蜜柑」「失敗園」の表紙の作成 |20|1|20|1|20|c |#image(pic8.png)||#image(pic9.png)||#image(pic10.png)| ~ -小説ページの初めにアニメーションを追加 当初は、小説ページの背景を変更することで、グラフィカルな... 小説ページの初めにアニメーションを追加することで、興味を... ~ ***参考サイト -[[aftereffectで作る泡>https://af.araland.com/2019/01/22/... -[[アニメーション終了後にサイトが出てくる>http://smile-de... -[[ AFをgifで書き出す方法>https://www.cyber-promote-movie... -[[SVGアニメーションサンプル>https://attadesign.co.jp/blo... -[[SVGとSCCで描画アニメーション>https://www.ibnet.ne.jp/c... ~ **2021.06.16 ***調査 [[トップページをフェードさせて表示させる>https://vier-kt.... [[泡のアニメーション>https://web-dev.tech/front-end/javas... -本を表示する前に泡のアニメーションをつける。 -本の世界に入り込むイメージ。 ~ ***進捗 -「蜘蛛の糸」「注文の多い料理店」「檸檬」のwebページを作... -「注文の多い料理店」「檸檬」「貨幣」の表紙を作成。 ~ |20|1|20|1|20|c |#image(pic4.png)||#image(pic6.png)||#image(pic7.png)| ~ ~ **2021.06.09 ***試作 |49|2|49|c |#image(sakura.png)||#image(kumo.png)| ~ ***調査 グラフィカルなサイト -[[オオサカマニア>https://osakamania.jp/]] --文章のところは落ち着いた色になっていて読みやすい。 -[[ポmagazie>https://www.potel.jp/kyoto/cityguide/]] --マウスを重ねるとイラストが出る。 ~ ~ **2021.06.02 ***中間報告 -改善点 --タイトルとメインビジュアルが重複している。 --ターゲット層の明確化。 --本ごとに背景を変更すると可読性が低くなる。 --文章と文章の余白を空けすぎるとストーリーの流れが掴みづ... -良かった点 --スマホだと見やすい。 --ルビが綺麗に見える。 ~ ~ **2021.05.26 ***試作 #image(book.jpg) ~ https://kourogi-aika.github.io/bukubuku/ ~ ***今後の予定 -ロゴの見直し --コンセプトがわかるようなロゴを作る。 -作品を増やす --最低でも10冊は作る。 -JavaScriptアニメーションを使ってグラフィカルにする ~ ~ **2021.05.19 ***タイトル決め ''「　ぶくぶく　」'' -本の世界に入り込めるようなサイト --入り込む → 浸る → 浸かる → 溺れる → ぶくぶく --Book と ぶくぶく ~ |49|2|49|c |#image(bukubuku.jpg)||#image(bukubuku-color.jpg)| 個人的にはカラー版の方が好みだが、サイトのイメージと合わ... ~ ***試作 https://kourogi-aika.github.io/sample 細かい文字が並んでいると読む気がなくなるという意見を元に... ~ ***今後の予定 -ロゴの見直し → コンセプトが明確にわかるようなデザインに... -作品を増やす → 少なくとも10冊 ~ ~ **2021.05.12 ***調査 -本を読まない理由 --時間がない。 --本に興味がない。 --文字ばかりだと読む気がなくなる。 --本にお金をかけたくない。 --動画の方がわかりやすい。 -解決案 --短編小説だけをまとめたサイトをつくる。 --本の世界観に合わせてデザインを変える。 --イラストなどを使ってグラフィカルなサイトにする。 --青空文庫のような無料で読める本のサイトの本を紹介する。 //個人的には文を読んで自分で想像して物語を楽しめるところ... 参考サイト -[[桜を降らせるエフェクト>https://web-dev.tech/front-end/... ~ ***試作 #image(日記帳.jpg,center,50%) ~ ~ **2021.05.05 ***試作 -表紙案 #image(表紙.jpg) -ワイヤーフレーム #image(ワイヤーフレーム.jpg,center,50%) -タイトル #image(試作１.jpg,center) ~ ~ **2021.04.22 ***コンセプト -本を読むきっかけになれるようなサイト ~ ***調査 -webで本を紹介しているサイト --[[大和書房>http://www.daiwashobo.co.jp/]] --[[かみのたね>http://www.kaminotane.com/]] --[[write right light>https://wrl.co.jp/book/]] --[[ラボ出版>https://www.labo-shuppan.jp/book/type/cd/]] 白を基調としたサイトが多い。 ~ ***アイデア -本の選定 --短編小説だけに絞る &size(13){作品例：よだかの星、注文の多い料理店、桜の樹の... ~ ~ **2021.04.16 ***テーマ -本を紹介するサイト --自分でデザインした本の表紙のデザインを公開するwebサイト --著作権の切れた本（[[青空文庫>https://www.aozora.gr.jp/]... ~ ***調査 -本の表紙 --文庫本の表紙はシンプルかつ上品 #image(文庫本表紙.jpeg) &size(13){[[画像引用元>https://lab.p-press.jp/report/repo... -参考 --[[本のタイトルのタイポグラフィ>https://www.pinterest.jp... --[[動くWEBデザインアイデア帳>https://coco-factory.jp/ugo... --[[青空文庫のリデザイン>https://twitter.com/ks_hanken/st... ~ ***ToDo -本の選定 -JavaScriptの勉強 -サイトの試作 -表紙の試作 ~ ~ **2021.04.14 ***面白いと感じたWEBサイト -[[toridori>https://toridori.co.jp/]] --手書き風のイラストや文字のアニメーションが目を引く。 -[[フェリシモ魔法部>https://www.felissimo.co.jp/mahoubu/]] --ブランドの世界観に引き込まれるイラストを用いてデザイン... -[[MEJINAVI>https://www2.mejiro.ac.jp/univ/mejinavi2021/]] --大学関係のwebサイトとは思えないほどポップなデザイン。 動的なwebサイトの方が見応えがある。JavaScriptやjQueryアニ... ~ ***テーマ案 -日記×タイポグラフィ　例 Twitter [[#1日1タイポ >https://t... -綺麗な日本語タイポグラフィ　 -著作権の切れた本の表紙のデザイン -海や空など青をモチーフにした映像作品 -珍しいアスペクト比の映像作品　例 [[思想犯/ヨルシカ>https... -ブラウス専門店のブランディング ~ ~ ~

終了行:
#image(main.png,center,100%) 本を読むきっかけになれるようなwebサイト ~ -''Project Director'' 興梠愛加 -'''Keywords：web,JavaScript , jQuery, ''' //&color(red){''アンケートのご協力をお願いします''};→ [[... -https://kourogi-aika.github.io/bukubuku/ ~ **Overview ***Introduction / What is This //&color(red){これは何か・・を簡潔に}; 著作権の切れた短編小説を紹介するサイト ~ ***Background and Purpose //&color(red){プロジェクトの背景と目的}; 外出することが難しく家の中で過ごす時間が増えている今日、... そこで、普段本を読まない人にも、本に興味を持ってもらうた... ~ ***Concept //&color(red){基本的な考え方、枠組み、視点など}; 本を読むきっかけになれるようなwebサイト 本の世界に入り込めるようなwebサイト --青空文庫のような無料で読めるサイトの本を紹介する。 --短編小説だけをまとめたサイトをつくる。 --本の世界観に合わせた表紙のデザイン。 --文章のかたまりを短くしたり、行間を広くとったりして読み... ~ ***Output //&color(red){成果物の直接掲載またはリンク誘導}; //&color(red){&small(プロジェクトの途上では、試作品等、視... //&color(red){&small(成果物の形式・サイズ・時間尺等の基本... #iframe(https://kourogi-aika.github.io/bukubuku/, 100%, 7... ~ //***Member //&color(red){共同プロジェクトの場合のみ｜メンバーと役割... ~ ***Tools //&color(red){使用するツール｜ハードウエア・ソフトウエア}; Adobe Illustrator Adobe Dreamweaver ~ ***Term //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX... 2021.04.08 ~ 2021.07.15 ~ ***Conclusion / Summary //&color(red){プロジェクトが完結したら「まとめ」を記載し... -表紙やロゴアニメーションを通して作品に興味を持ってもらえ... -作品の読みやすさはもう少し工夫したほうがよかった。 ~ ~ **Survey ***Present Status //&color(red){現状調査、現状の問題の洗い出し}; -一般的に本を読まない人が本を読まない理由 --時間がない。 --本に興味がない。 --文字ばかりだと読む気がなくなる。 --本にお金をかけたくない。 //--動画の方がわかりやすい。 ~ ***Precedent //&color(red){先行事例の紹介、傾向分析など}; -[[本のタイトルのタイポグラフィ>https://www.pinterest.jp/... -webで本を紹介しているサイト --[[大和書房>http://www.daiwashobo.co.jp/]] --[[かみのたね>http://www.kaminotane.com/]] --[[write right light>https://wrl.co.jp/book/]] --[[ラボ出版>https://www.labo-shuppan.jp/book/type/cd/]] ~ ***Technique / Technology //&color(red){プロジェクトの遂行に必要な技法・技術に関す... -[[動くWEBデザインアイデア帳>https://coco-factory.jp/ugok... -[[桜を降らせるエフェクト>https://web-dev.tech/front-end/... -[[簡単CSSアニメーション>https://baigie.me/officialblog/2... -[[aftereffectで作る泡>https://af.araland.com/2019/01/22/... -[[アニメーション終了後にサイトが出てくる>http://smile-de... -[[ AFをgifで書き出す方法>https://www.cyber-promote-movie... -[[SVGアニメーションサンプル>https://attadesign.co.jp/blo... -[[SVGとSCCで描画アニメーション>https://www.ibnet.ne.jp/c... ~ ~ **Project Management ***Schedule //&color(red){計画的な遂行のために、進行管理表を作成して... [[Scheduleのリンク>https://docs.google.com/spreadsheets/d... ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... -%%本の選定%% -%%JavaScriptの勉強%% -%%サイトの試作%% -%%表紙の試作%% -%%ロゴの作成%% -%%表紙の制作%% -%%サイトの制作%% -%%アニメーションをつける%% ~ ~ ~ #hr CENTER:''worklog'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ~ **2021.07.07 ***アンケート結果 #image(アンケート.jpg,center,100%) -表紙やロゴアニメーションを通して作品に興味を持ってもらえ... -作品の読みやすさはもう少し工夫したほうがよかった。 ~ **2021.06.30 ***進捗 -Aboutページ、Linkページを追加しました。 -アンケートを制作しました。[[アンケート>https://docs.goog... ~ **2021.06.23 ***進捗 -「白昼夢」「蜜柑」「失敗園」の表紙の作成 |20|1|20|1|20|c |#image(pic8.png)||#image(pic9.png)||#image(pic10.png)| ~ -小説ページの初めにアニメーションを追加 当初は、小説ページの背景を変更することで、グラフィカルな... 小説ページの初めにアニメーションを追加することで、興味を... ~ ***参考サイト -[[aftereffectで作る泡>https://af.araland.com/2019/01/22/... -[[アニメーション終了後にサイトが出てくる>http://smile-de... -[[ AFをgifで書き出す方法>https://www.cyber-promote-movie... -[[SVGアニメーションサンプル>https://attadesign.co.jp/blo... -[[SVGとSCCで描画アニメーション>https://www.ibnet.ne.jp/c... ~ **2021.06.16 ***調査 [[トップページをフェードさせて表示させる>https://vier-kt.... [[泡のアニメーション>https://web-dev.tech/front-end/javas... -本を表示する前に泡のアニメーションをつける。 -本の世界に入り込むイメージ。 ~ ***進捗 -「蜘蛛の糸」「注文の多い料理店」「檸檬」のwebページを作... -「注文の多い料理店」「檸檬」「貨幣」の表紙を作成。 ~ |20|1|20|1|20|c |#image(pic4.png)||#image(pic6.png)||#image(pic7.png)| ~ ~ **2021.06.09 ***試作 |49|2|49|c |#image(sakura.png)||#image(kumo.png)| ~ ***調査 グラフィカルなサイト -[[オオサカマニア>https://osakamania.jp/]] --文章のところは落ち着いた色になっていて読みやすい。 -[[ポmagazie>https://www.potel.jp/kyoto/cityguide/]] --マウスを重ねるとイラストが出る。 ~ ~ **2021.06.02 ***中間報告 -改善点 --タイトルとメインビジュアルが重複している。 --ターゲット層の明確化。 --本ごとに背景を変更すると可読性が低くなる。 --文章と文章の余白を空けすぎるとストーリーの流れが掴みづ... -良かった点 --スマホだと見やすい。 --ルビが綺麗に見える。 ~ ~ **2021.05.26 ***試作 #image(book.jpg) ~ https://kourogi-aika.github.io/bukubuku/ ~ ***今後の予定 -ロゴの見直し --コンセプトがわかるようなロゴを作る。 -作品を増やす --最低でも10冊は作る。 -JavaScriptアニメーションを使ってグラフィカルにする ~ ~ **2021.05.19 ***タイトル決め ''「　ぶくぶく　」'' -本の世界に入り込めるようなサイト --入り込む → 浸る → 浸かる → 溺れる → ぶくぶく --Book と ぶくぶく ~ |49|2|49|c |#image(bukubuku.jpg)||#image(bukubuku-color.jpg)| 個人的にはカラー版の方が好みだが、サイトのイメージと合わ... ~ ***試作 https://kourogi-aika.github.io/sample 細かい文字が並んでいると読む気がなくなるという意見を元に... ~ ***今後の予定 -ロゴの見直し → コンセプトが明確にわかるようなデザインに... -作品を増やす → 少なくとも10冊 ~ ~ **2021.05.12 ***調査 -本を読まない理由 --時間がない。 --本に興味がない。 --文字ばかりだと読む気がなくなる。 --本にお金をかけたくない。 --動画の方がわかりやすい。 -解決案 --短編小説だけをまとめたサイトをつくる。 --本の世界観に合わせてデザインを変える。 --イラストなどを使ってグラフィカルなサイトにする。 --青空文庫のような無料で読める本のサイトの本を紹介する。 //個人的には文を読んで自分で想像して物語を楽しめるところ... 参考サイト -[[桜を降らせるエフェクト>https://web-dev.tech/front-end/... ~ ***試作 #image(日記帳.jpg,center,50%) ~ ~ **2021.05.05 ***試作 -表紙案 #image(表紙.jpg) -ワイヤーフレーム #image(ワイヤーフレーム.jpg,center,50%) -タイトル #image(試作１.jpg,center) ~ ~ **2021.04.22 ***コンセプト -本を読むきっかけになれるようなサイト ~ ***調査 -webで本を紹介しているサイト --[[大和書房>http://www.daiwashobo.co.jp/]] --[[かみのたね>http://www.kaminotane.com/]] --[[write right light>https://wrl.co.jp/book/]] --[[ラボ出版>https://www.labo-shuppan.jp/book/type/cd/]] 白を基調としたサイトが多い。 ~ ***アイデア -本の選定 --短編小説だけに絞る &size(13){作品例：よだかの星、注文の多い料理店、桜の樹の... ~ ~ **2021.04.16 ***テーマ -本を紹介するサイト --自分でデザインした本の表紙のデザインを公開するwebサイト --著作権の切れた本（[[青空文庫>https://www.aozora.gr.jp/]... ~ ***調査 -本の表紙 --文庫本の表紙はシンプルかつ上品 #image(文庫本表紙.jpeg) &size(13){[[画像引用元>https://lab.p-press.jp/report/repo... -参考 --[[本のタイトルのタイポグラフィ>https://www.pinterest.jp... --[[動くWEBデザインアイデア帳>https://coco-factory.jp/ugo... --[[青空文庫のリデザイン>https://twitter.com/ks_hanken/st... ~ ***ToDo -本の選定 -JavaScriptの勉強 -サイトの試作 -表紙の試作 ~ ~ **2021.04.14 ***面白いと感じたWEBサイト -[[toridori>https://toridori.co.jp/]] --手書き風のイラストや文字のアニメーションが目を引く。 -[[フェリシモ魔法部>https://www.felissimo.co.jp/mahoubu/]] --ブランドの世界観に引き込まれるイラストを用いてデザイン... -[[MEJINAVI>https://www2.mejiro.ac.jp/univ/mejinavi2021/]] --大学関係のwebサイトとは思えないほどポップなデザイン。 動的なwebサイトの方が見応えがある。JavaScriptやjQueryアニ... ~ ***テーマ案 -日記×タイポグラフィ　例 Twitter [[#1日1タイポ >https://t... -綺麗な日本語タイポグラフィ　 -著作権の切れた本の表紙のデザイン -海や空など青をモチーフにした映像作品 -珍しいアスペクト比の映像作品　例 [[思想犯/ヨルシカ>https... -ブラウス専門店のブランディング ~ ~ ~

ページ名: