FiftyThreeのPaperが面白い

スケッチや写真を添えられる高機能なメモアプリ？のPaper。Fifty Threeから出ているアプリで、いくつか面白いところがあった。

最初の印象

App StoreのEssentialsに入っていたので、良いアプリなんだろうなと思ってインストールした。インストール中に説明分や画像を見ながら想像してみたが、ちょっと高機能でカッコいいメモアプリなのかなぁ、という印象。Essentialsに入っていなければ、個人的にはダウンロードしない類だと思う。

起動直後にアカウント要求

いろんなアプリで行われていることだが、起動直後にアカウントを作成させたり、ログインを要求することはよくある。それが必然であるなら仕方ないことで、例えばストレージ系のサービスであれば、データの保存場所（サーバ）を借りるわけだから納得できる。ただPaperの場合は、メモアプリだと思って起動したのでアカウントを作成しなければならない理由が分からず、一瞬嫌な思いをした。でもその後、どんどん感動していくことになる（この時点でアプリを閉じなくてよかった）

「なぜアカウントが必要？」ボタン

画面下部にあるボタン。最初にアカウントを要求するアプリはたくさんあるけれど、アカウントが必要な理由まで載せているアプリはあまり無いのではないかと思う。このことについてはiOSヒューマン・インタフェース・ガイドラインにも書かれていて、アカウントが必要な理由や利点を明記しておくのが望ましい。アカウント無しで使えることと併用すれば、ユーザは安心できるだろうし、アカウント登録するタイミングを自分で判断できるなど、メリットがある。
このボタンを押した遷移先では、理由や利点の説明に加え、アカウント無しで始められるようになる（先延ばしにする）ボタンが用意されている。

アカウント登録なしで始める

これもよくあるパターン。アカウントの登録を先延ばしにする。どこかのタイミングでアカウントが必要になった場合、もしくは目玉の機能を利用する場合はアカウントが必要なるよということ。こちらとしては、「まぁとにかくどんなものか使ってみたいのだよ」という気持ちで初回起動しているのでとても良い。

使い方の解説動画が面白い

アカウント無しでアプリを使いはじめると、まず「ヒント」というか使い方の説明を見させられた。動画で見られるのでとてもわかり易かったのだが、何より面白い。「えっ！そんなことできるの!?」というのが動画を見ていた時に思っていたこと。特にスケッチ機能に驚き、すぐに使ってみたくなった。直後、これは動画で見せるのが一番上手いなと思った。AppStoreで読んでいた説明文は、あまり注意深く読んでいなかったのもあるだろうが、全然印象深くなく、頭に残っていなかった。だからヒント動画を見てはじめてこのアプリを使ってみたいと思い、同時にちょっと感動していた。AppStoreって動画も載せれたはずなので、載せるべきだなと思ったし、動画での説明ってこんなにも魅力的なのかと思い知った。

解説者の使用しているタッチペンも商品

解説動画は全部で10数本。１つの時間が短いので、さほど時間をとらずに全部見れる。一通り見ていると気づくのだが、解説者が使用しているタッチペンがカッコいい。それだけでなく、描きやすそうに見える。良いな、欲しいなと思えてくる。
実はこれ、アプリを出しているFifty Threeの商品でもある。アプリを使用していると分かるが、あるところでこの商品を扱うショップへのリンクボタン（専用の画面まで）用意されている。なるほどなぁ、上手いなぁと感動した。買わないだろうけど、欲しい。

整形される図形

動画でも解説されているが、スケッチでは例えば適当に四角形を描けば、ちょっと整形されて背景色まで付けられた四角形が描画される。言葉だけでは伝わらないが、ぐにゃぐにゃしていない良い感じの四角形や円、三角形を描くことができる。単なるお絵かきアプリであれば、逆にこういう機能は要らないように感じるが、これがメモアプリで、思いついたことを即席で描いていくものであることを考えると、とても必要な機能であるように思える。これだけでも、どんどんメモしたいなと思えてしまう。

とりあえずカッコいい

見た目も操作感もかっこいいので、個人的には触っていてとても楽しい。まだ使い始めたばかりであまり分かっていないことがあるが、使いこなせれば面白そうなアプリだと思う。

「前回の続き」という感覚？

iOSヒューマンインタフェースガイドラインを読んでいてハッとしたことについて。

アプリがいつ閉じられても良いように

ユーザはいつアプリを閉じるかわからない。そのため、可能な限り必要なデータは適宜保存しておく必要がある。例えば、何かを編集しているのであれば、途中データを保存しておいた方が親切。
また当然だが、中途半端な状態でアプリが閉じられてしまった場合に、その後アプリがクラッシュしてしまったりすることは避けたい。前回のデータや状態が破壊されてしまった場合は、その旨をユーザに伝えるのも良いかもしれない。

アプリ起動時は前回開いていた画面から

アプリを閉じる直前の状態を保持しておくことで、アプリを再開した時に前回開いていた画面から始めることができる。これはiOS HIGにも書かれていること。すべてのアプリが実装しているわけではないが、有名なところだとiOS標準アプリ、Twitter、Dropboxなど。
例えばTwitterは、タブバーの各画面から開始されるようになっている。つまり、ホーム画面の検索アイコンを押して検索画面を開き、検索している途中でアプリを閉じた場合、再開後はホーム画面からとなる。
必ずしも前回開いていた状態を復元することが難しい場合もあるが、なるべく近い状態に持って行く方が親切なんだと思う。もちろんこれはアプリの特性と踏まえた上で吟味する箇所だと思うけれど。

デザインっぽくないデザイン

単純に見た目（グラフィック的な）の話ではないので一見デザインっぽくないように感じるが、上述の話はデザイナーが意識するところかなと思う。このあたりはエンジニアに頼むしかないので、仮にデザイン上大事な要素だとしても、優先度が落ちる場合がありそう。ユーザの期待した動作をするように作るのは大切だが、意識していないと見落としがちな点だなと思った。

画面の情報

表示されている画面がどういう状態なのかを提示することについて。

遷移時のアニメーション

当然といえば当然なのだけれど、画面遷移時にアニメーションがある方が分かりやすい。Androidアプリを作っていて、ずっとアニメーション付けてなかったので、これだけでも分かりやすくなった印象。

何も無いという情報

例えばToDoアプリなんかで、まだ何もToDoを作成していない場合は、何も無いことを伝えるか、作成する画面へ促したりする。

まだ一度もToDoを作成したことが無ければ作成画面へ促し、そうでなければ何も無いことを伝えるなど、複数パターン用意する必要があるかも。

ダイアログのキャンセル

製作中のアプリで、数カ所ダイアログを使う場面があって考えたこと。

デフォルトにキャンセル機能がない

時刻を設定するためのダイアログとしてAndroidにはTimePickerDialogが用意されているが、デフォルトではキャンセル機能が無い。というより、キャンセル（と思われる操作）時も時刻を設定する処理（onTimeSetメソッド）が呼ばれる。そもそもキャンセルボタンは無いし、ダイアログの外側をタップした場合はダイアログが閉じてonTimeSetメソッドが呼ばれてしまう。ここはキャンセルされてほしい。

OKは１種類

時刻を設定する場合は、OKボタンとか完了ボタンを用意して、それが押された場合のみ時刻設定されるべきだと思う。つまりその他の操作（戻るボタン、キャンセルボタン、ダイアログ外をタップなど）をした場合はキャンセルになるのが望ましいと思う。
一般的かどうかは調査していないので何とも言えないが、僕はダイアログの外側をタップした場合はただダイアログが閉じてキャンセルされる経験を多くしているので、当然そうなると思っている。もちろん何も起きないということもあるが、OKボタンを押した場合と同じ処理が走るとは思わないし、操作自体が怖くなってしまいかねない。

余談：ダイアログのタイトル

設定画面等で、複数の時刻を設定する場合など、同じような項目が並ぶことがある。その場合にダイアログを表示した場合、どの項目かを判断できるようにしておく必要がある。その時の文脈でわかるかもしれないが、一応思ったのでメモっとく。

ActionBarとToolBar

ActionBarの実装方法を時らべていると、少し前のAndroidアプリであればActionBarを実装するのが定石らしかった。最近はマテリアルデザインに寄せるためにToolBarを使用するケースが主流なんだろうか。初めはActionBarで実装していたが、UIデザインをマテリアルデザインに合わせて作っており、ToolBarの方が実装しやすかったので切り替えた。

ActionBarが一般化したToolBar

Android5.0以降でないと使えないと思っていたが、サポートライブラリが出ていたので従来のバージョンでも実装可能。
画面上部に配置されるActionBarに対し、ToolBarは配置を限定されていないらしい（実装してないので確証はない）。ActionBarは他のViewと異なりxmlでレイアウトを調整できないが、ToolBarではxmlで調整する。まだ細く調べていないが、一般的なActionBarとやりたいことが異なれば、ToolBarを使うと楽だと思う。

ナビゲーションボタン

iOSでもAndroidでも、画面遷移した後に前の画面へ戻るボタンが左上に表示される。Androidの場合はハード、もしくはソフトウェアボタンに戻るボタンがあるが、左上に表示することも可能。ActionBarを実装した場合、アプリアイコンの左側のかなり小さいスペースに戻るアイコンが表示され、アプリアイコンを含めた領域が戻るボタンと化す。
ToolBarを実装すると、ActionBarではアプリアイコンを表示していた位置にナビゲーション用のボタンを配置するようになる。戻るボタンやメニューボタン（いわゆるハンバーガーボタン）など。そのため、以前に比べかなり大きく戻るボタンが表示される（単純にタップ領域が大きくなったわけではない）。

Android で線とか描画

CSSのborderをAndroidでできないかと思って、調べてたら描けた。２つのやり方を試したのでそれを書く。

1dpのView

1dpの線を引くための方法としてイメージしやすいのは、1dpのViewを作成して、backgroundで色を指定する方法。

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#DDD" />

あとはこれをRelativeLayoutとかで入れたい位置に入れるだけ。この方法なら、例えば下線だけ入れたいって時には楽だと思う。

shapeやstrokeを使う

1本の線だけでなく、枠線を作りたいっていう時とかは以下の方法を使った。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#CCC"/>
    <stroke
        android:width="3dp"
        android:color="#AAAAAA"
        android:dashGap="3dp"
        android:dashWidth="3dp"
        />
    <padding android:left="3px" android:top="3px"
        android:right="3px" android:bottom="3px" />
    <corners android:radius="2px" />
</shape>

画像（ImageView）のまわりに枠線を描こうと思って作ったやつ。上記は破線の四角形が描ける。paddingも効くので良い。

行（アイテム）追加のインタフェース

薬の服用時間をアラートしてくれるアプリを製作中で、デザインも実装も自分でやっており、実装は何とかなるものの、デザインの考え方が慣れていないので難しい。今日はアプリで必要になった機能、行（アイテム）の追加のUIについて。

同じ薬でも服用タイミングが異なる場合がある

僕が薬を服用する場合は、大抵が風邪かインフルなどの季節性の病気。この場合、薬の服用期間は大体3日〜１週間くらいだと思う。朝・昼・晩の３食後に飲む場合が多いのかなという印象。だから基本的に１つの薬を服用するタイミングは1日３回とか寝る前とかかなと思っていた。
よくよく聞いてみると、中には「週２回、日曜の夜と月曜の朝」というタイミングで服用しなければならない薬もあるとのこと。お年寄りの方で、たくさん薬を飲んでいる方もいるけど、もしかしたらいろいろ複雑な飲み方をされているのかもしれない。

１つの薬に複数の服用タイミングが必要

当初は「薬Aは毎日、朝・昼・晩」とか「薬Bは週１回日曜日、寝る前」とかを想定していた。今回考える必要があるケースは「薬Cは週２回、日曜日の夜、月曜日の朝」というもの。曜日（もしくは毎日）と時間（朝・昼・晩）が１セットなので、薬Cの場合は２セット必要になると考えた。そこで、２セット以上設定できるようなUIを考える。

アラート設定画面のレイアウト

上記服用タイミングを設定する画面を用意する。ブログ用にデザインはざっくり作ったので適当です。
「服用設定」より下でタイミングの設定をする。曜日と時間帯を選択するだが、ここを複数個設定できるようにする必要がある。自分の解としては、最低１つは登録してもらう必要があるので、リストの一番上はデフォルトで表示。さらに、３段目のプラスアイコンから始まる行もデフォルトで表示しておき、複数設定が可能なことを示している。ここでプラスアイコンをタップして２個以上設定しようとした場合、リスト２段目のように左端に削除用のアイコンを置いておく。このように追加と削除を行えるようにした。

「保存」ボタンを上に配置

服用タイミングの設定数が少ないことを想定していた当初は、画面下部に保存ボタンを配置する予定でした。しかし複数設定できる以上、画面下部にボタンを配置するのは良くないかなと思い（画面が長くなるのと、戻る・ホームボタンなどを誤タップしてしまうのではないかと思い）、アクションバーに保存ボタンを、その隣にキャンセルボタンを配置しています。

「追加」と「削除」のアイコン

この画面のタイトルにもあるが、「新規作成」というからには、前の画面で何かしら作成を促すアイコンをタップして遷移させている。プラスの記号を使ったシンプルなアイコンを使用する予定だが、それではこの画面内のプラスアイコンと被ってしまう。これは少し変える必要があると思う。
また削除のアイコンは、この画面ではバツ印を使用している。しかし、バツ= 削除というのもしっくり来ない。ゴミ箱アイコンやマイナスアイコンを考えたが、素直に伝わるかは使ってもらってみないと分からない。

単純なアプリでも考えること多い

デザインの経験が少ないせいでもあるのでしょうが、考えるべき点が多いなと感じる。いろいろ気にしてしまうこともあるが、とにかくざっと作って、誰かに使ってもらってフィードバックをもらって修正して、というのを繰り返すのも大事だろう。