字を綺麗に書きたいPdMがiOSの書道アプリを作った話

概要

ABEJAアドベントカレンダー2023の7日目の記事です。これは普段の仕事でプロダクト開発を行っている私が、自分自身の悩みを解決するためにiPadOS向けの書道アプリを開発し実際に使ってみる話である。

Tetsu Kuribayashii
グラフィック／デザイン
無料

apps.apple.comiOS向けには配信していません

背景

私は字が上手くない。

社会人になってから約2年。学生の頃より紙とペンを使う機会は減り、もっぱらキーボードを叩く毎日である。それでも時々、書類や封筒に字を書く機会がある。なるべく丁寧に書くことを心がけているものの字の形や全体のバランスが綺麗に決まらず、書き直すことがしばしばある。

字を綺麗に書くことが毎日続けやすい環境があったらなと思いつき、字の練習を楽しみながら継続したくなるようなプロダクトを作ることに決めた。

課題とソリューション

今回のプロダクトを設計するにあたり解決したい課題を整理した。

字を綺麗に書けないという事実を分解してみると、そもそもどのように書くのが正解かが頭の中にないこと、正解がわかったとしてそれを再現する手の動きができないことの2点が挙げられる。もっともこれは小学生でも当たり前の習字のプロセスである。なぞったり、お手本を見ながら繰り返し練習することが基本となる。

また、社会人にとっては手軽さという点も重要であり、毎日隙間の時間でも少しずつ練習できる仕組みづくりも必要である。

競合調査

整理した課題に対して、市場にどのようなソリューションが存在するかを簡単に調査してみた。

ペン習字教材：1,200 ~ 2,000円ほどの図書がある。通信教材などでは20,000円など比較的高額なものもある。
インスタグラム・TikTok：書道をテーマにしたアカウントがあり、書き方のコツや見本、作品を投稿している
既存のアプリ：調べた限り、5本ほどは日本語向けのものがありいずれもiPadとApple Pencilで練習ができる。なぞり書き・お手本を見て真似する練習が基本となっている。

こうしてみると、スマホの台頭によって人類の字を書く機会が大幅に減ったとは言え、大人向けの字の練習文化は残っていることがわかる。特にペン習字教材については、どの本屋さんにいっても在庫があるため、一定の需要がありそうだ。

最近のSNSにおいては、書道の先生など字の上手い方が書道に関する発信をしており、作品そのものだけでなく書くプロセス自体の発信がコンテンツになっている（プロセスエコノミー化）ことが興味深い。

既存のアプリではお手本、書き順指導、とめはねはらい指導など作りこまれたものもある。ただ比較的子供向けのものが多く、自分が求める操作のシンプルさや継続して練習できるという要素に訴求しているものは無かった。

一覧してみて、字を綺麗に書くという欲求は少数派ではないということが分かった。また、どの手法においてもその上達には近道がなく反復練習が必要となる。操作のシンプルさ、継続できる機能を意識してプロダクトを設計していきたい。

提案手法

ここまでの整理から具体的な解決方法を考える。

最低限必要な機能

A. お手本を見て、なぞるという基本的な練習が行える
B. 繰り返し練習ができる

ただし、A、B両方とも自分ですすんでできたら苦労しないので、A、Bをより簡単にそしてモチベーションを保ちながら続けられる仕組みを具体的に考える。

A. お手本を見て、なぞるという基本的な練習が行え、上達を自分一人で実感して続けられるようにする
B. 過去との差分を確認し、繰り返し練習ができる仕組み

具体的な機能に落とし込むと以下のようになる

お手本・なぞり書きの基礎練習機能
字の評価（スコア）機能
過去の字・文章の記録とフィードバック

繰り返し練習や上達を目的とする場合、成果の共有によっても達成感が得られる。そのためコミュニティを実装するということも考えたが、今回のスコープでは一人での練習や上達という機能に重きを置くため実装をしないものとした。ただし、今後ユーザーが増えたら検討したい。

こだわり

ここまではユーザーの気持ちや課題ドリブンで考えた部分だが、作り手である私の意思による仕様を追加する。

それは、やりたいことに集中できるインターフェースを提供するという想いである。今回の開発デバイスとなるiPadとApple Pencilを使うなかで評価の高いアプリとしてはProcreate、Note5などがある。これらは操作や表示が洗練されていて紙とペン以上の体験が得られる。

そうした既存のアプリを超えるような、書道に特化したアプリを作りたいと考えた。やりたいことに集中ができ、無駄がないというのは私の解釈では禅の考え方に近い。その環境で書く技術を向上させるためのプロダクトという意味で、禅筆（ZenPen）というアプリ名に決めた。Penと読ませるのはグローバル韻対応である。

インターフェースの設計において難しかったのが、日本の伝統的なものである書道を最先端のデバイスとそのOSに沿ったデザインに落とし込むプロセスである。現時点でもまだ満足していないが、シンプルでありながら使いたくなる（馴染みやすい、親しみやすい、使っていることそのものが楽しい）デザインを作るのは非常に難しい。

また、ボタンや色などのUI要素については以下のようにテンプレートを定め和の統一感が出るように設計した。タイトルやメニュー画面など、まだまだ改善の余地があるが今後手を入れていきたい。

実装の概要

機能一覧

自分だったらどのように使いたいかを想像しながら、ワイヤーフレームを作成し機能を洗い出した。Figmaでの設計はそこそこに、下記のような機能と画面遷移をイメージしながらSwiftUI上に実装する。

一文字ずつの練習
文章での練習
過去の練習を振り返る
継続した練習に対して報酬の仕組みをつくる

これらに対応した機能と画面を設計し、実装した。

対応デバイスとフレームワーク

今回はiPadOS向けのアプリケーションを開発する。Apple Pencilを試したことがある方には伝わると思うが、書き心地が非常によくApple Pencilの描画の遅れやズレはほとんどない。ペーパーライクフィルムと呼ばれるフィルムをiPadに貼ればほとんど紙のような質感で書くことができる。市場に最も多く出回るタブレットとスタイラス（ペン）であるためiPadOS向けに開発することに決めた。

描画の仕組み

基本的な画面遷移やデータの管理などはSwiftUIを利用したが、コア機能となる描画と評価のロジックは多少の工夫が必要であった。描画に関してiPadOS向けには、PencilKitと呼ばれる公式のライブラリがありこれをつかって描画のコントロールができる。こちらは以下のように組み込むだけで簡単に利用ができる。

import SwiftUI
import PencilKit

/// A SwiftUI view that displays a `PencilKitView`.
struct ContentView: View {
 var body: some View {
 PencilKitView()
 .frame(maxWidth: .infinity, maxHeight: .infinity)
 }
}

/// A UIViewRepresentable wrapper for PKCanvasView to use within SwiftUI.
struct PencilKitView: UIViewRepresentable {

 /// Creates the PKCanvasView to be used by SwiftUI.
 /// - Parameter context: The context in which the view is created.
 /// - Returns: A configured instance of PKCanvasView.
 func makeUIView(context: Context) -> PKCanvasView {
 let canvasView = PKCanvasView()
 // Set the initial tool as a black pen with a width of 10
 canvasView.tool = PKInkingTool(.pen, color: .black, width: 10)
 // Allow drawing with any input, not just Apple Pencil
 canvasView.drawingPolicy = .anyInput
 return canvasView
 }

評価のロジック

書いた字とお手本を比較するためにOpenCVを利用することにした。ピクセル単位で字の形状を比較し、どのくらい正確かを判定する。今回はこちらのOpenCVのSwift 向けのPackageになったものを使わせていただいた。

PencilKitで描画したデータを二値化し画像化したデータと、お手本のフォントを画像化したデータの類似度を比較することで字を評価する計算を実装した。

実装の詳細部分は省略するが、画面内をいくつかのブロックに分割しブロックに含まれるピクセル同士の差異を計算することで評価を行う。いくつかの評価方法を比較してみたが、平均二乗誤差を使った場合でも十分な評価が行えた。

完成したアプリ

無事Appleの審査も通り、どなたでも無料でダウンロードできるようになっている。

Appleの審査に関して、数回の往復はあったものの個人情報などのアクセスが不要のため簡単に通過できた。

過去の字・文章の記録とフィードバックについて、「1日ごとに1回以上練習をすると練習済みが表示される機能」「練習した中で一番上手い字がメニューに表示される機能」を実装した。これはAppleのフィットネスアプリから着想を得ており、今後はカレンダー形式で練習できた日やスコアを記録し、ユーザーの継続のモチベーションを高めるような仕組みに昇華できたらよいと考えている。