Yuzu
ynskski.qrunch.io

初心者がリマインダーアプリを作ってUXを考えてみた話

2018/12/01に投稿
この投稿は別サイトからのクロス投稿です(クロス元:https://qiita.com/ynskski/items/...

はじめに

Qrunch初投稿ですが、Qiitaからのクロス投稿を試してみようかと思います。

はじめまして。私は情報系の学部に在籍している大学生です。 Twitterはこちら

もしかして自分はUI/UXに興味があるんじゃ?と思いまして、いっそのこと実際にアプリを作りながら考えてやろう、ということでリマインダーアプリを作ってみました。

簡単なアプリですが、初心者ゆえ相当な試行錯誤の末に完成したアプリです。至らぬ点などが目に付くかとは思いますが、ゆるりとご覧いただければと思います。

まずUXとは

色々なサイトなどで勉強しましたが、私が考えるUXの認識はアプリ(サービス)を通してユーザーが経験すること全てです。 前項ではUI/UXという言葉を使いましたが、本来UXはUIと同じくくりにするものではないのでしょう。明らかにUX∋UIです。 UXをデザインするということは、とにかくユーザーの気持ちを考えながらアプリを作っていくことになるでしょう。

参考1:UI/UXなUXのお話 参考2:UI/UXデザインの基本と初心者におすすめの勉強法

UXデザインのためにしたこと

素人による暗中模索ではありますが、色々考えながら進めていきました。

ターゲット設定

今回開発するリマインダーアプリのターゲットは自分です。 自分が欲しいと思うなら他の誰かが欲しいと思うことが有り得る、という理由からです。

自分が欲しいものを作りたいという願望もあるからです。

・・・さすがに甘いかな・・・?

コンセプト・テーマ的なもの設定

後付けですが、「1つ1つの予定と向き合うリマインダー」というコンセプトで開発しました。

Appleのリマインダーに期限までの残り時間が表示されないのが気に入らなかったことから、自分で開発しようと思ったのがそもそものきっかけだったりします。

欲しい機能洗い出し

  • 予定の追加
  • 予定の削除
  • 予定の完了・未完了の設定
  • 予定に関するメモ記入
  • 予定のカテゴリ分け
  • プッシュ通知
  • カテゴリ分け
  • 期限までの残り時間表示

開発を進めるうちに色々追加していき、上のような形に落ち着きました。

モックアップ作成

アプリの見た目を考えるのがはじめの難関でした。 なかなかしっくり来なかったりするもので・・・。

はじめはメモ帳などにアイデアを書き溜め、これかなーと思うものができたらAdobe XDを使ってモックアップを作成しました。お恥ずかしいですが最初期のモックアップと最終的なモックアップを公開します。

初期案 最終案

最初はこれがいいかもと思っていたんです・・・。

そのあとも色々な案を実装しつつ、最終的にはPinterestで「これ欲しい!」となったUIを見つけたのでそれを参考にさせていただきました。

各UI部品についての配置の意図などは後述します。

実装!

とにかく頑張りました。 最終案のモックアップを作成してから3週間程度での開発となりました。 最初期の構想段階から考えると2ヶ月近くになるかと思います。

実装途中につまづいた細かい問題点については今回は触れません。調べれば出てくるような問題ばかりだったのでアウトプットするかどうかも未定です。

全体的な方針

ピンポイントのタップはあまりしたくない! ユーザーにとって、なんらかの目的を達成するために小さなボタンをタップしなきゃいけない、というのは少し面倒くさいような?と感じています。 ある一定の(そこそこ広い)範囲をタップするか、スワイプなどで対応したいと考えました。

開発したアプリのキャプチャ

ここから場面ごとにアプリを見ていきます。

予定の追加

予定の追加は右下のフローティングボタンから行います。

定番のデザインですし、画面内にはこれ以外のボタンをほぼ用意していないのでユーザーが迷うことはないかと思います。

ポイント

予定を作成する際はタイトルを入力しないと追加されないようになっています。 (しかしそれをユーザーに伝える手段を実装し損ねました…アップデートで対応します。)

その他に、期限・メモ・通知の設定・カテゴリを表す色などの情報をユーザーが加えることができます。

作成ボタンを押すと、追加した予定にスクロールし「Added!」というメッセージを表示することで、作成できたことをユーザーがきちんと認識できるようにしています。

予定に関する情報を書くポップアップにはPopupDialogというライブラリを使用しています。

予定の編集

予定のカードをタップすると編集できます。

追加の時にも使用したポップアップに、選択した予定の情報が格納されて表示されます。

保存ボタンを押すと情報が更新されているのがわかるかと思います。

またポップアップの周りの暗い部分をタップすると、ポップアップが閉じるようになっています。自然ですね。

予定の完了・削除

スマホの画面キャプチャってタップの様子あまり伝えられないですね笑

予定のカードをダブルタップすることで「完了」との表示を出すことができます。 その状態でもう一度ダブルタップすると削除できます。また完了している状態でトリプルタップをすると、未完了の状態に戻すことができます。

(削除するときは「本当に削除しますか?」を聞くポップアップを出すように今後実装しようかと思います…)

ポイント

編集ボタンや削除ボタンを用意しなかったのは、前述の「全体的な方針」に則っています。 ただしカード全体をタップ可能にすることで、誤タップが増えることが予想されます。

カードの中で物理的に一番タップしやすい範囲はメモが書いてある部分ではないかと考えています。そこでメモの書いてある部分はメモ自体をタップ可能にすることで対応しています。

こうすることでメモ以外をタップすることで編集ができるようになっています。またメモ自体をタップできるようにすることで、メモにタップできるURLを載せることができ一石二鳥です。

トップに戻るボタン

予定の数が多くなると絶対に欲しい機能ですね。 ある程度スクロールすると左端に見えるようになっています。

また戻った先の予定で表示されていますが、期限を過ぎている予定に関しては表示をすることで知らせるようにしています。

広告について

アプリの収益化としてよくある選択肢である広告をこのアプリでも採用しています。

しかしユーザーの広告に対する認識は「邪魔・うざい・めんどう」のようなものだと思います。UXの質を著しく低下させる原因にもなりかねません。

そこでこのアプリでは広告の掲載方法を工夫しています。

今までの画面キャプチャからわかると思いますが、バナー広告などの常時表示されるタイプの広告は使用していません。その代わりにAdMobのリワード広告(広告を閲覧するとユーザーに報酬が与えられる広告)を採用しています。このアプリでいう報酬とは予定の作成数の上限としています。上限以上の数の予定を作成しようとすると、以下のようなポップアップが表示されます。

「再生」ボタンを押さない限りは広告が再生されることはありません。 こうすることでユーザーが予期しないタイミングで(または常時)広告を流すことを避け、ユーザーに与えるストレスを軽減しようという意図があります。

その他

右上のメニューボタンのタップ、もしくは上から下へのスワイプで上の画面に遷移します。

操作方法から開発者の個人的な考えなど、様々なことを書いています。

個人的に「開発者の顔が見えるアプリ」というのが好きなので、あえて開発者の考えなどについてもアプリ内に書いています。

開発してみて

いや難しかったです。全て難しい。

「こうするといいんじゃないか?」と思って形にすると「ちょっと違う?」となったり、自分が考えていた軸がぶれぶれになるのを感じました。

デザインについて

最近流行りの白を基調としたデザインにすべきだったかもしれないと思っています。Appleのアプリにも採用されている流れですからね。

とはいえ色使いにどんな意味をもたせるのかが重要なことだと思うので、今後また検討します。

UXについて

UXについて考えを深めたいということから始めたこのアプリ開発ですが、深められたというほどではないかもしれません。

自分では正しいと思っていても自分が思い込んでいるだけということもありますし、そもそも考えが至らない点などが多くあるかもしれません。

これからは自分もユーザーの一人として落ち着いて考え直していきます。

終わりに

長文駄文でしたが最後までお読みくださりありがとうございます。

AppStoreのリンクはこちら

もしよろしければご意見などいただければ幸いです。

関連記事

コメントはありません。
Yuzu
ynskski.qrunch.io
アプリ開発をしたい大学生です
フォロー
フォロワー
ブログを開設

クランチで技術ブログを
始めてみませんか?

この先は、クランチへのアカウント登録、及びログインが必要なページになります。

Markdownの書き方
見出し # 見出し(h1)
## 見出し(h2) , ### 見出し(h3) ...
リスト - 箇条書き
   - タブでインデント
番号付きリスト 1. テキスト
2. テキスト
改行 行末に半角スペース2つ
リンクの挿入 [タイトル](https://xxx.com)
引用 > テキスト
コード挿入 ```cpp:title
code
```
画像の挿入 ![代替テキスト](URL "タイトル")
太字 **テキスト**
斜体 *テキスト*
打消し線 ~~テキスト~~
水平線 ***
技術ブログを開設
ログイン