※現在閉鎖中です

https://book-cover-kit.herokuapp.com/

概要

このアプリケーションの主たる目的や作成するに至った経緯についてです。

目的

部屋の景観を美しくすること

ターゲット

愛読書を捨てきれないミニマリスト

背景

僕はなんちゃってミニマリストです。
部屋に無駄なものは置きません。
色も黒、白、ダークグレーで一定の統一感を持ったレイアウトを実現しています。
しかし、たった1つだけその統一感をぶち壊してしまう存在がいました。

そう、それは

コミックのごちゃごちゃしたデザインです。

コミックのデザインは「一冊」単品で見ると漫画家の魂があって素晴らしいです。
しかし色彩の統一感をもった僕の部屋から「コミック」という大きな単位で見た時、
そのデザインは邪魔者でしかありませんでした。

ミニマリストなので当然、電子化も検討しました。
しかしスラムダンクは僕の人生のバイブルでした。
辛いときも桜木花道のまっすぐさを見て努力してきました。

捨てることは選択肢に最初からありませんでした。
ここがなんちゃってミニマリストたる所以です。

そしれ生まれた選択肢が

デザインの一新

だったのです。

環境/実装工数

環境

※現在閉鎖中です

本番環境リンク

• 本番環境 heroku
• 開発フレームワーク Ruby on Rails
• PDF変換 wicked_pdf

実装工数

総計時間 20時間

• システム構成検討 3h
• アプリケーション立ち上げ 0.5h
• サーバサイドPDF変換実装 7h
• フロントレイアウト実装 3h
• 非同期プレビュー機能実装 3h
• ニューモーフィズムデザイン実装 3h
• デプロイ 0.5h

使用方法

フォーム入力

上記の画像の左のフォームから自分が作成したいコミックのタイトルや巻数など必要な情報を全て入力します。

非同期で右側のプレビュー画面が変更されていくので満足のいく見た目になるまで調整を行います。

PDF出力

上記の画像左下の「Make It」ボタンでPDFをダウンロードします。

PDFプリントアウト

A3用紙のサイズでPDFが作成されますので家庭用プリンタもしくはコンビニのプリンターでプリントアウトしましょう。

折込み（ブックカバーの作成作業）

1. まず上記の水色の線に沿って山折りに折り目を付けます。
2. その後、純正コミックカバーを折り目に沿って包みます。（余白はこの時点で切り落としましょう。）
3. コミック自体の表紙、裏表紙をカバーの隙間に入れます。
4. 完成

ソースコード

Github

https://github.com/calm1205/book-cover

こだわり

シングルページ

とにかくシンプルなUIを目指しました。
シングルページでユーザの操作がフォーム入力とPDF出力のみのため迷いが生まれにくい設計になっています。
またフォームに記載した内容がリアルタイムでプレビュー反映されるため直感的な操作が可能です。

更に入力する工数も少ないためテーブルを活用していません。
そのためアプリケーションの構成もシンプルでサーバサイドのコーディングもライトです。

ニューモーフィズム

シンプルなUI構成のため遊びごころのあるUIを起用しました。
立体感のあるビューによりフォームやボタンが視覚的に判断しやすくユーザビリティに特化しています。

競合

競合ブックカバー

コミックカバーとしての競合は以下です。

クリアカバー

透明のブックカバーでコミック等を傷つけないために存在しています。
一枚あたりの価格も安く、サイズ毎に大量に購入することが可能です。

テンプレートカバー

予めデザインが決まったカバーをダウンロードしてきてブックカバーとして活用することができます。

ダウンロードしてからプリントアウトするだけなので一枚あたり10円とこちらも安価で購入が可能です。

価値曲線

上記の競合として上げたカバーもブックカバーとして素晴らしい性能を誇っています。

しかし、今回自分が求めていた部屋のレイアウトや景観を崩さずにコミックカバーとして機能するためにはどちらも決定的に足りないものがありました。

クリアカバーの場合は、「景観を崩さない」というところをケアすることができませんでした。クリアカバーは色が透明なことでコミックの表紙が見えることをアドバンテージとしていますが今回のニーズとはズレていまいた。

テンプレートカバーの場合は、「コミックのタイトル、巻数」が見えないというデメリットが存在してました。元々決まっているデザインが自分の部屋のレイアウトと噛み合えば工数も少なく即採用でしたが今回自分が求めていたコミックカバーとしての役割は網羅できていませんでした。

今後の展望

デプロイ環境をAWSへ移行

現在は料金の兼ね合いからherokuを採用しています。

アクセス数の増加に対するネットワークやCPU向上のためにAWS移行を検討しています。

vue.jsの導入

プレビュー実装のためにjavascriptで多量のコーディングがなされており処理速度の低下につながっています。

vueの要素の移動を最小限に抑えるアルゴリズムを使用することで低スペックなCPUでもユーザが不快感を感じない処理速度を実現できる可能性があります。

デザイン裁量の向上

ハードコーディングなどでGoogle fontを活用したり、テキストの配置の自由度を上げる実装を検討しています。