Webアプリ tsunagaru をリリースしました

2019/02/18 個人制作で、Webアプリ tsunagaru をリリースしました。

1ボタンで簡単にメッセージ！ 家族や友人など、あなたの大切な人へ想いを届けよう。

スマホの操作に慣れていない方や、療養中などで体が思うように動かない方も、1ボタンで簡単にメッセージを送ることが出来るチャットアプリです。
せっかくなので、その制作過程で得られたこと感じたことを書いておこうと思います。

今回は何を考えて作ったかについて書きます。

構成

まず構成について、プログラムの実装は Rails5.2、Ruby2.5.1、テンプレートエンジンは slim、画像ストレージに AWS の S3 を使い、heroku で運用となっています。細かいところでは、チャットは ActionCable、アップローダーは carrierwave、ユーザー管理は sorcery、coffeescript と jquery など。

早急に作る必要があったため、経験のある構成を選択しました。ただ AWS はほぼ初めてで、やたらとボタンと選択肢で惑わせてくる UI に悶絶しました。

heroku はトップページで「アプリ開発に専念」と出すだけあり、ストレス無く使えました。なかでも ReviewApps がかなり良い機能で、PR 作ると自動でアプリ作ってくれるのでステージングにあげる前の確認も簡単に出来ます。
（app.json に追記すれば migrate や seed_fu も実行済みの状態になります）
これについては別で少し書こうと思います。

制作期間

制作期間は１ヶ月強（大体30人日）くらいです。
当初は1ヶ月弱の予定で考えていました。個人での開発の場合、あまり仕様は広げずまずはリリースを第一に考えて、後々ブラッシュアップ していくことが大事だと思います。しかしいざその段になるとこんなものは出せないと感じて、画面を何度も作り変えたり、機能を追加したり、ライブラリを差し替えたりしました。
自分が納得するまで手が出せるのは、個人開発の良いところです。

コンセプト

コンセプトとして、本当に必要なものだけ作る、を一番に考えました。
スマホに慣れていない方はいろいろな概念を知らない状態のため、まず目に見えているものが、手で触れているものが何を意味しているか把握するのが難しく、不意に関係ないところを押してしまったり、 頑張って把握しようとして固まってしまうように思います。
また、療養中などで体が上手く動かせない方は、狙ったところにタッチすることすら簡単には出来ません。

それらを踏まえて下記の点に気をつけて画面を設計しました。

文字はちゃんと読めるように大きく
ボタンも極力大きく
文字やボタンの大きさは、スマホ操作に慣れている方にとってはかなり無駄な、大げさな表示に感じると思います。ただし読めなかったら致命的であり、アバター画像もなるべく大きく表示してあげたほうが良いと思いました。

Web アプリの開発に慣れていなかったせいもあり、最初はPC上のブラウザでレイアウトを考えてしまっていて、スマホで表示してみたらあまりの小ささに愕然としました。話にならないので完全にスマホベースで全てのレイアウトを考え直しました。

迷わないようにする
ホーム画面の構想の段階から押下可能なものを排除していきました。
チャットがしたいのに、誤って「チャット部屋に入る」以外を押す可能性を無くすためです。代わりに「チャット部屋に入る」ボタンをデカデカと表示しました。

スマホに慣れていない方を想定した「チャットのみ」モードでは、メニューから「プロフィール編集」「トモダチ」を非表示にしました。慣れている方がそれらの設定を済ませたうえで、慣れていない方へお渡ししてあげれば良いと考えました。

簡単にする
「スクロールして、何かする」「サブメニューボタンを押して、何かする」など、ステップが2回以上にならないように意識しました。
やろうと思えば出来ることは色々ありますが、極力目に見えている範囲のことでやりたいことが実現出来るように、無駄に迷わないように、と考えました。
当初はメッセージボタンはデフォルトを12個にしていましたが、どうしても大きくスクロールが必要になってしまうため、8個にしました。
（編集すれば12個まで表示可能）

チャット部屋の画面が特に悩んだところで、自分なりに考えて何度も作り直しました。画面のレイアウトを上下逆に入れ替えたり、フッターも邪魔だから外しました。
それでもスマホで表示すると、文字はもっと大きくしたいし、
ボタンも大きくしたいし、間隔を広げて押しやすくしなければならないし、メッセージログはもっと見せたいし、アバター画像も大きく表示したい。
何を残して、何を切り捨てるか、とても難しいなと感じました。
（同時にタブレットの優位性を改めて強く感じました）

あとがき

自分は去年の9月まではゲーム業界でプログラマをしていて、サーバー側を勉強したいな、Webサービスやアプリを作れるようになりたいなと思いエンジニアリグスクールRUNTEQで3ヶ月学びました。そのくらいでも一応アプリは作れるので、同じような駆け出しエンジニアから面白いサービスが生まれることを期待したいです。

このアプリは自分が必要としたので作り始めました。
必要十分なプロトタイプは3日で形になりましたが、もしかしたら誰かが同じような状況で必要としているのかもしれないと思いアプリの形で公開しました。
もう少し良くしていこうと思います。