#author("2021-10-12T11:27:07+09:00;2021-07-07T23:40:47+09:00","default:member","member") #author("2022-03-14T21:04:26+09:00;2021-07-07T23:40:47+09:00","default:member","member") #image(main.png,center,100%) 本を読むきっかけになれるようなwebサイト ~ -''Project Director'' 興梠愛加 -'''Keywords：web,JavaScript , jQuery, ''' //&color(red){''アンケートのご協力をお願いします''};→ [[アンケート>https://docs.google.com/forms/d/e/1FAIpQLSdvCaSIaA6WNSDR6OtOmLbKObT064Lmc3cwnL2VCv6qX83Npg/viewform?usp=sf_link]] -https://kourogi-aika.github.io/bukubuku/ -https://kourogi-aika.github.io/bukubuku_/ ~ **Overview ***Introduction / What is This //&color(red){これは何か・・を簡潔に}; 著作権の切れた短編小説を紹介するサイト ~ ***Background and Purpose //&color(red){プロジェクトの背景と目的}; 外出することが難しく家の中で過ごす時間が増えている今日、気分が落ち込みやすく憂鬱な気分になってしまう人も少なくない。そんな今だからこそ、一人で本に向かって、本の世界に入る、そういう時間が必要なのではないかと考えた。 そこで、普段本を読まない人にも、本に興味を持ってもらうために、青空文庫で掲載されている短編を紹介するwebサイトを作ろうと思った。 ~ ***Concept //&color(red){基本的な考え方、枠組み、視点など}; 本を読むきっかけになれるようなwebサイト 本の世界に入り込めるようなwebサイト --青空文庫のような無料で読めるサイトの本を紹介する。 --短編小説だけをまとめたサイトをつくる。 --本の世界観に合わせた表紙のデザイン。 --文章のかたまりを短くしたり、行間を広くとったりして読みやすくする。 ~ ***Output //&color(red){成果物の直接掲載またはリンク誘導}; //&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);}; //&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);}; #iframe(https://kourogi-aika.github.io/bukubuku/, 100%, 75%) ~ //***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/pin/155022412156688260/]] -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/ugokuweb/]] -[[桜を降らせるエフェクト>https://web-dev.tech/front-end/javascript/cherry-blossom-petal-falling-effect/]] -[[簡単CSSアニメーション>https://baigie.me/officialblog/2021/02/25/css-tips-1/]] -[[aftereffectで作る泡>https://af.araland.com/2019/01/22/cc-bubbles/]] -[[アニメーション終了後にサイトが出てくる>http://smile-design.bz/news_blog/2016/03/05/anai024/]] -[[ AFをgifで書き出す方法>https://www.cyber-promote-movie.com/wp/2018/06/29/ae_cg_to_gif/]] -[[SVGアニメーションサンプル>https://attadesign.co.jp/blog/1047/]] -[[SVGとSCCで描画アニメーション>https://www.ibnet.ne.jp/column/web/201008/index.html]] ~ ~ **Project Management ***Schedule //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[Scheduleのリンク>https://docs.google.com/spreadsheets/d/1Wi6Sr2MLeM8h0GieEEfDYl68qpHaAcl6nvgNoy7fMws/edit?usp=sharing]] ~ ***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.google.com/forms/d/e/1FAIpQLSdvCaSIaA6WNSDR6OtOmLbKObT064Lmc3cwnL2VCv6qX83Npg/viewform?usp=sf_link]] ~ **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/cc-bubbles/]] -[[アニメーション終了後にサイトが出てくる>http://smile-design.bz/news_blog/2016/03/05/anai024/]] -[[ AFをgifで書き出す方法>https://www.cyber-promote-movie.com/wp/2018/06/29/ae_cg_to_gif/]] -[[SVGアニメーションサンプル>https://attadesign.co.jp/blog/1047/]] -[[SVGとSCCで描画アニメーション>https://www.ibnet.ne.jp/column/web/201008/index.html]] ~ **2021.06.16 ***調査 [[トップページをフェードさせて表示させる>https://vier-kt.com/11/]] [[泡のアニメーション>https://web-dev.tech/front-end/javascript/floating-bubbles-js-css/]] -本を表示する前に泡のアニメーションをつける。 -本の世界に入り込むイメージ。 ~ ***進捗 -「蜘蛛の糸」「注文の多い料理店」「檸檬」の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/javascript/cherry-blossom-petal-falling-effect/]] ~ ***試作 #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/report23.html]]}; -参考 --[[本のタイトルのタイポグラフィ>https://www.pinterest.jp/pin/155022412156688260/]] --[[動くWEBデザインアイデア帳>https://coco-factory.jp/ugokuweb/]] --[[青空文庫のリデザイン>https://twitter.com/ks_hanken/status/1238301539141181440]] ~ ***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アニメーションを使ったwebサイトを制作したい。 ~ ***テーマ案 -日記×タイポグラフィ 例 Twitter [[#1日1タイポ >https://twitter.com/hashtag/1%E6%97%A51%E3%82%BF%E3%82%A4%E3%83%9D?src=hashtag_click]] -綺麗な日本語タイポグラフィ -著作権の切れた本の表紙のデザイン -海や空など青をモチーフにした映像作品 -珍しいアスペクト比の映像作品 例 [[思想犯/ヨルシカ>https://www.youtube.com/watch?v=ENcnYh79dUY]] -ブラウス専門店のブランディング ~ ~ ~