興梠愛加/情報デザイン研究I

本を読むきっかけになれるようなwebサイト

• Project Director 興梠愛加
• Keywords：web,JavaScript , jQuery,
• https://kourogi-aika.github.io/bukubuku_/

Overview

Introduction / What is This

著作権の切れた短編小説を紹介するサイト

Background and Purpose

外出することが難しく家の中で過ごす時間が増えている今日、気分が落ち込みやすく憂鬱な気分になってしまう人も少なくない。そんな今だからこそ、一人で本に向かって、本の世界に入る、そういう時間が必要なのではないかと考えた。

そこで、普段本を読まない人にも、本に興味を持ってもらうために、青空文庫で掲載されている短編を紹介するwebサイトを作ろうと思った。

Concept

本を読むきっかけになれるようなwebサイト
本の世界に入り込めるようなwebサイト

• 青空文庫のような無料で読めるサイトの本を紹介する。
• 短編小説だけをまとめたサイトをつくる。
• 本の世界観に合わせた表紙のデザイン。
• 文章のかたまりを短くしたり、行間を広くとったりして読みやすくする。

Output

Tools

Adobe Illustrator
Adobe Dreamweaver

Term

2021.04.08 ~ 2021.07.15

Conclusion / Summary

• 表紙やロゴアニメーションを通して作品に興味を持ってもらえた。
• 作品の読みやすさはもう少し工夫したほうがよかった。
  
  
  
  

Survey

Present Status

• 一般的に本を読まない人が本を読まない理由
  • 時間がない。
  • 本に興味がない。
  • 文字ばかりだと読む気がなくなる。
  • 本にお金をかけたくない。

Precedent

• 本のタイトルのタイポグラフィ

• webで本を紹介しているサイト
  • 大和書房
  • かみのたね
  • write right light
  • ラボ出版

Technique / Technology

• 動くWEBデザインアイデア帳
• 桜を降らせるエフェクト
• 簡単CSSアニメーション
• aftereffectで作る泡
• アニメーション終了後にサイトが出てくる
• AFをgifで書き出す方法
• SVGアニメーションサンプル
• SVGとSCCで描画アニメーション

Project Management

Schedule

Scheduleのリンク

ToDo

• 本の選定
• JavaScriptの勉強
• サイトの試作
• 表紙の試作
• ロゴの作成
• 表紙の制作
• サイトの制作
• アニメーションをつける
  
  
  
  
  
  

2021.07.07

アンケート結果

• 表紙やロゴアニメーションを通して作品に興味を持ってもらえた。
• 作品の読みやすさはもう少し工夫したほうがよかった。
  
  

2021.06.30

進捗

• Aboutページ、Linkページを追加しました。
• アンケートを制作しました。アンケート
  
  

2021.06.23

進捗

• 「白昼夢」「蜜柑」「失敗園」の表紙の作成
  
  
• 小説ページの初めにアニメーションを追加
  当初は、小説ページの背景を変更することで、グラフィカルなサイトを演出しようと考えていたが、小説ごとにアニメーションや画像を変更すると、ページによって読みやすさが異なるのではないかと感じた。
  小説ページの初めにアニメーションを追加することで、興味を惹くサイトができるのではないかと考えた。
  
  

参考サイト

• aftereffectで作る泡
• アニメーション終了後にサイトが出てくる
• AFをgifで書き出す方法
• SVGアニメーションサンプル
• SVGとSCCで描画アニメーション
  
  

2021.06.16

調査

トップページをフェードさせて表示させる
泡のアニメーション

• 本を表示する前に泡のアニメーションをつける。
• 本の世界に入り込むイメージ。
  
  

進捗

• 「蜘蛛の糸」「注文の多い料理店」「檸檬」のwebページを作成。
• 「注文の多い料理店」「檸檬」「貨幣」の表紙を作成。
  
  
  
  
  
  

2021.06.09

試作

調査

グラフィカルなサイト

• オオサカマニア
  • 文章のところは落ち着いた色になっていて読みやすい。
• ポmagazie
  • マウスを重ねるとイラストが出る。
    
    
    
    

2021.06.02

中間報告

• 改善点
  • タイトルとメインビジュアルが重複している。
  • ターゲット層の明確化。
  • 本ごとに背景を変更すると可読性が低くなる。
  • 文章と文章の余白を空けすぎるとストーリーの流れが掴みづらい。

• 良かった点
  • スマホだと見やすい。
  • ルビが綺麗に見える。
    
    
    
    

2021.05.26

試作

https://kourogi-aika.github.io/bukubuku/

今後の予定

• ロゴの見直し
  • コンセプトがわかるようなロゴを作る。
• 作品を増やす
  • 最低でも10冊は作る。
• JavaScriptアニメーションを使ってグラフィカルにする
  
  
  
  

2021.05.19

タイトル決め

「　ぶくぶく　」

• 本の世界に入り込めるようなサイト
  • 入り込む → 浸る → 浸かる → 溺れる → ぶくぶく
  • Book と ぶくぶく
    
    

個人的にはカラー版の方が好みだが、サイトのイメージと合わないと感じたため、モノクロ版を採用。

試作

https://kourogi-aika.github.io/sample
細かい文字が並んでいると読む気がなくなるという意見を元に、文字を大きめに設定した。また、文節ごとに区切ったり、行間を広くしたりすることで、余白を作って読みやすさを意識した。

今後の予定

• ロゴの見直し → コンセプトが明確にわかるようなデザインにする。
• 作品を増やす → 少なくとも10冊
  
  
  
  

2021.05.12

調査

• 本を読まない理由
  • 時間がない。
  • 本に興味がない。
  • 文字ばかりだと読む気がなくなる。
  • 本にお金をかけたくない。
  • 動画の方がわかりやすい。

• 解決案
  • 短編小説だけをまとめたサイトをつくる。
  • 本の世界観に合わせてデザインを変える。
  • イラストなどを使ってグラフィカルなサイトにする。
  • 青空文庫のような無料で読める本のサイトの本を紹介する。

参考サイト

• 桜を降らせるエフェクト
  
  

試作

2021.05.05

試作

• 表紙案
  
• ワイヤーフレーム
  
• タイトル
  
  
  
  
  

2021.04.22

コンセプト

• 本を読むきっかけになれるようなサイト
  
  

調査

• webで本を紹介しているサイト
  • 大和書房
  • かみのたね
  • write right light
  • ラボ出版

白を基調としたサイトが多い。

アイデア

• 本の選定
  • 短編小説だけに絞る
    作品例：よだかの星、注文の多い料理店、桜の樹の下には、貨幣
    
    
    
    

2021.04.16

テーマ

• 本を紹介するサイト
  • 自分でデザインした本の表紙のデザインを公開するwebサイト
  • 著作権の切れた本（青空文庫など）の表紙のデザイン
    
    

調査

• 本の表紙
  • 文庫本の表紙はシンプルかつ上品
    
    画像引用元
• 参考
  • 本のタイトルのタイポグラフィ
  • 動くWEBデザインアイデア帳
  • 青空文庫のリデザイン
    
    

ToDo

• 本の選定
• JavaScriptの勉強
• サイトの試作
• 表紙の試作
  
  
  
  

2021.04.14

面白いと感じたWEBサイト

• toridori
  • 手書き風のイラストや文字のアニメーションが目を引く。
• フェリシモ魔法部
  • ブランドの世界観に引き込まれるイラストを用いてデザインをしている。
• MEJINAVI
  • 大学関係のwebサイトとは思えないほどポップなデザイン。

動的なwebサイトの方が見応えがある。JavaScriptやjQueryアニメーションを使ったwebサイトを制作したい。

テーマ案

• 日記×タイポグラフィ　例 Twitter #1日1タイポ
• 綺麗な日本語タイポグラフィ　
• 著作権の切れた本の表紙のデザイン
• 海や空など青をモチーフにした映像作品
• 珍しいアスペクト比の映像作品　例 思想犯/ヨルシカ
• ブラウス専門店のブランディング