Webアプリ「鑑賞ノート」リリースしました

Webアプリ「鑑賞ノート」リリースしました

はじめに

「鑑賞ノート」は、三宅香帆さん著「「話が面白い人」は何をどう読んでいるのか」の中に出てくる「5つのワザ」を使ったメモ術の部分をWebアプリ化したものです。

「5つのワザ」とは……

①＜比較＞ほかの作品と比べる
②＜抽象＞テーマを言葉にする
③＜発見＞書かれていないことを見つける
④＜流行＞時代の共通点として語る
⑤＜不易＞普遍的なテーマとして語る

三宅香帆著「「話が面白い人」は何をどう読んでいるのか」より

本書には、「この「5つのワザ」を意識した作品鑑賞を続ければ、他人への理解力や言語化能力を高めることができる！」というような記述もありました。

開発のきっかけ

たまたま見た動画に感銘を受け、制作に至りました。

こちらの動画でも、先述の「5つのワザ」についての解説が本人によって為されていました。

全体の構成

フロントエンド：HTML/CSS/JavaScript
データ保存：localStorage(サーバ不要)

使えるようになるまでの流れ

1. 当Webアプリにアクセス
2. 「タイトル」を入力 (日付は自動入力されていますが、変更もできます)
3. 「感想」を入力
4. 「考察1」[使用するワザ,解釈,感想]の欄を入力
5. 任意で「考察2～5」を同じように入力
6. 「質問」を入力
7. 保存ボタンを押下
8. ローカルストレージに保存される

保存した「鑑賞ノート」は下部の「鑑賞ノート一覧」より確認でき、テキストメモを保存することもできるようになります。

実装のポイント

今回、外部サービス(スプレッドシート等)と接続するのを敢えてやめ、テキスト形式のみでの出力に絞ることで、ユーザーが各々使っている媒体への接続性を高める形を取りました。

デザイン面での工夫

• カラー・フォント
• 入力欄のレイアウト
• 日付・タイトル欄を画面上部に固定

今回学べたこと

今回「鑑賞ノート」を作る過程で、プログラミングだけでなく「ユーザーとして使いたい／続けられる仕様」に落とし込む難しさを改めて感じました。特に、自分自身が “鑑賞後すぐに書く” 習慣をどう促すか、また “振り返りたい瞬間” をどう作るかが鍵でした。
技術的には、軽量でスムーズな動作、モバイル・デスクトップ両対応、データ構造整理、タグ／フィルター機能など、多くの実装課題を一つひとつ乗り越えました。UX／UIについても、配色・フォント・レイアウト・動線を何度も見直し、「使ってみて気持ちいい」体験を目指しました。
そして何より、鑑賞記録を“やるべき作業”ではなく、“楽しく続けられる習慣”に変えるには、「書いたあとに振り返る場」「書く意味の見える化」が大切だということが再確認できました。
この経験を通じて、今後は「シェア機能」「分析グラフ」「他の鑑賞者との比較機能」など、次のステップに進みたいと思っています。

関連リンク

• Webアプリ「鑑賞ノート」
• GitHub
• note記事「三宅香帆さんの「5つのワザ」メモ術をアプリ化してみた話」
• 参考動画「【仕事トークが格段に上がる5つの技術】文芸評論家・三宅香帆／「解釈力」を高める 比較・抽象・発見・流行・不易／読書でうまくインプットすれば話すときの武器になる【CROSS DIG 1on1】」
• 参考書籍「「話が面白い人」は何をどう読んでいるのか」/三宅香帆

まとめ

本記事では、「鑑賞ノート」がどんな背景で生まれたか、構成や使い方、開発・デザイン上の工夫、そして私自身が学んだことをお伝えしました。鑑賞という行為を「ただ消費して終わる」ものから、「記録して振り返り、思考を深め、次に活かす」習慣へと変える第一歩として、このアプリをご提案します。
音楽・読書・観劇・創作など、多彩な鑑賞体験を持つかよちゃんのような方にこそ、ぜひ活用してほしい。記録を重ねることで、自分の「鑑賞スタイル」「思考のクセ」「成長の軌跡」が見えてきます。
今後も機能拡張・改善を予定していますので、使ってみた感想やご要望があればぜひお寄せください。あなたの鑑賞ライフが、さらに豊かに、深くなりますように。