出光美心/情報デザイン研究I

Pen Plan

楽しい手帳

Idemitsu Miko
Keywords：website, planer, analog, ・・・
https://idmt-mk.github.io/Pen-Plan/
リフィル(B6サイズB5サイズ)とその他画像

↑

概要

↑

これは何？

誰でもダウンロードできる手帳のリフィルを公開しているWebサイト

↑

背景と目的

スケジュールをアプリで管理する人が増えている。確かにスケジュール管理は書き直しがしやすいデジタルのほうが無料で使えて、しかも使いやすく見やすい。しかしアプリでは、自分でカスタマイズできなかったり自分は使わない機能が多く入っていたり、不便な部分もある。そこで自分で書く手帳の楽しさや便利さ、手書きの良さを若い人に知ってもらうwebサイトを作る。

↑

コンセプト

手帳の良さに気づいてもらうためにスケジュール管理目的だけではない、一風変わったリフィルを配布することで手帳を使ってみたくなるようなきっかけを作るwebサイトとリフィルを作成する。
また、スマホを使っている人でも興味を持ってもらえるようにデジタルでもリフィルを配布する。

↑

成果物の仕様

Webサイト

リフィル(B6サイズB5サイズ)とその他画像

ワイヤーフレーム

サイトマップ

↑

制作ツール

procreate
Adobe Illustrator
Adobe InDesign
HTML

↑

プロジェクトの期間

プロジェクトの期間｜2023.04.11 - 2023.07.11

↑

まとめ

今回の研究では、使う側のことをもっと具体的に細かく想像して制作する必要があると学んだ。アンケートやwebサイトのデザインなど使ってもらう側のことを詳細に想像して制作する必要があると感じた。
リフィルを知人に使ってもらったところ、スケジュール管理のように書かなければいけないという義務感がなくなったため始めやすいと感想をもらった。他にも趣味のことだと書きやすい、好きなリフィルを自分で選べるのが良いと感想をもらった。
webサイトの制作でつまづいた時などは、本やインターネットで調べたり先生方に助言をいただいたり、webサイトの開発者調査ツールでどんな風にコードが書かれているか調査することで問題を解決した。
まだまだWebサイトやadobeの知識が自分のやりたいことをやるために足りていないので、これからの制作で実際に作りながらもっと深く学んでいきたい。

↑

調査

↑

現状調査

自分で行ったアンケート調査

スケジュール管理についてのアンケート結果まとめPDF
スケジュール管理についてのアンケート結果まとめ(自分でスプレッドシートでまとめたもの)
その他の回答はスプレッドシートのほうが見やすいかもしれません

その他手帳について調査しているサイト
【LINEリサーチ】手帳の使用率、「紙派」と「デジタル/アプリ派」は約4割でほぼ同じ割合　紙は「使い慣れているから」、デジタル/アプリは「いつでもアクセスできる」が使う理由のTOPに

↑

先行事例

ほぼ日手帳Download City
F-MEMO
ONLINE MARK'S
nicotto
TECHOUTIME
リフィル制作、サイト作成の参考になりそう

↑

技法・技術情報

手帳リフィル工房
リフィル作成の参考になりそう

↑

プロジェクト管理

↑

スケジュール

スケジュール表

↑

ToDo

ワイヤーフレーム・サイトマップの作成
サイト制作
リフィルの内容決め
リフィル制作

進捗記録

↑

webサイトの作成

GitHub
現在の進捗
変更した点
スマホはPDFからPNGに変更
ヘッダー画像をクリックするとホーム画面に飛べるように変更
スムーススクロールを追加

↑

2023.07.04

↑

webサイトの作成

GitHub
現在の進捗
スライダー用の画像の追加

↑

2023.06.27

↑

最終発表の改善点

JavaScriptが読み込めていない
スマホはJPGまたはPNGがよい
メニューとは別でホーム画面に飛べるようにする
アレンジの例も載せる(カラフルにしたもの)
学科サイトの文章を考え直し

↑

webサイトの作成

↑

2023.06.20

↑

webサイトの作成

GitHub
現在の進捗
サイトの最終調整

↑

2023.06.13

↑

webサイトの作成

GitHub
現在の進捗
スライダー用の画像と使用例の作成

↑

リフィル・アイコン作成

リフィル掲載の仕方を変更。それに伴いアイコンを作成

↑

2023.05.23

↑

中間発表で出た改善点

アンケートのその他の結果が分かりやすいようにする
リフィルを家のプリンターで印刷しやすいサイズにして使いやすくする
実際に使ってみたところをサイトに載せる
利用規約の変更する　IDをリフィルに入れて二次配布・商用利用禁止をなくす
背景と目的を変更する　デジタル否定ではない分を考える
デジタルでも使えそうな案を入れる
サイトのダウンロードボタンをわかりやすく

スケジュール管理についてのアンケート結果まとめ(自分でスプレッドシートでまとめたもの)

↑

webサイトの作成

↑

リフィル作成

↑

2023.05.16

↑

webサイトの作成

↑

リフィル作成

↑

シンボルマークとロゴタイプの作成

ロゴタイプだけだと堅苦しく面白味もなかったので、どんなものだろうと興味を持ってもらうためにシンボルマークを作成することにした。「pen」とペンギンをかけてシンボルマークにはペンギンにした。プランは手帳は英語で「planner」なので二つを合わせて「Pen　Plan」という名前にした。また、ロゴタイプのフォントには「Bukhari　Script(ブーカリ　スクリプト)」を使用している。平仮名の方は自分で作字した。

↑