はじめに
「タスク管理アプリはたくさんあるけど、友達と2人だけで気軽に使えるシンプルなものが見つからない…」
そんな思いから、「タスケット(Tasket)」というPWA（Progressive Web App）の開発を始めました。
タスケットとは、その名の通り「タスクをかごに入れる」感覚で使えるアプリです。重要なのは、機能を詰め込みすぎず、2人で使うことに特化した点。このアプリ開発の過程を記録として残し、同じような課題を持つ方々の参考になればと思います。
タスケットの基本コンセプト
タスケットは、「いっしょにすることリスト」をモットーに、友達や家族と2人だけで共有できるタスク管理アプリです。名前の由来は「タスク＋バスケット」の組み合わせ。「タスクをタスケットに入れるね」と言える気軽さを大切にしています。
最大の特徴は、アイゼンハワーのマトリックス（緊急性と重要性の2軸でタスクを分類する方法）を、直感的な操作で実現している点です。
- 緊急性：左右に分けて表示（左が「まずすること」、右が「予定すること」）
- 重要性：星マーク（★）で表示（重要なタスクは上に表示）
これにより、「今すぐやるべきこと」と「いずれやること」が一目でわかります。冷蔵庫の中とストックルームを分けるような感覚です。
デザイン設計のポイント
シンプルな画面構成
タスケットのUI（ユーザーインターフェース）は、極力シンプルに設計しました。
PCでは画面を左右に分割し、左側に「まずすること（緊急）」、右側に「予定すること（非緊急）」を表示します。一方、スマホでは画面幅の制約から、左右にスワイプして切り替える形式を採用。親指一本で操作できるよう配慮しています。
マトリックスで言うと、縦軸（重要性）は「リスト内の位置」で表現し、横軸（緊急性）は「画面の左右」で表現しています。家の間取りを考えるときのように、使う頻度の高いものは取りやすい場所に配置する発想です。
タスク表示の工夫
タスクの状態は視覚的に区別できるよう工夫しました：
- 緊急タスク：四角マーク（■）、オレンジ色の枠内
- 非緊急タスク：三角マーク（▶）、緑色の枠内
- 重要タスク：星マーク（★）、太字表示で上部に
- 完了タスク：取り消し線、色を薄く、下部に表示
色と形で区別することで、文字を読まなくても瞬時に状態がわかります。交通標識のように、形と色の組み合わせで情報を伝える発想です。
効率的な入力方法の実装
PCでの入力効率化
PCでは、タイピングの速さを活かせるよう、複数のタスクを一度に入力できる仕様にしました。画面下部の入力欄に、改行区切りで複数のタスクを書き込み、一括登録できます。
さらに、行頭に特定の記号を付けることで、タスクの属性を指定できる機能を追加：
*（アスタリスク）：重要タスクとして登録>（大なり記号）：非緊急タスク（予定すること）として登録-（ハイフン）：完了状態のタスクとして登録
例えば「* 明日のミーティング資料を詰める」と入力すると、重要な緊急タスクとして登録されます。これはプログラミング言語やマークダウンのような記法で、テキストベースで素早く入力できる点が特徴です。
スマホでの操作性向上
スマホでは、タップと長押しの2種類の操作を基本としました。
- タップ：チェックボックスでタスクの完了/未完了を切り替え
- 長押し：コンテキストメニューを表示（タスクの編集や属性変更）
長押しで表示されるメニューからは、タスク名の編集、重要度の切り替え、緊急度の切り替え、完了状態の切り替え、削除などの操作ができます。スマホの画面では文字入力が煩わしいため、なるべくタップ操作で完結するよう配慮しました。
使いやすさを追求した機能改善
タスクの並び順の優先度
タスクの表示順序は、優先度順に自動で並べ替えられます：
- 完了状態（未完了が上、完了が下）
- 重要度（重要が上、非重要が下）
- 追加日時（新しいものが上）
この並び順により、注目すべきタスクが自然と目に入る仕組みになっています。優先順位の高いメールが受信トレイの上位に表示されるイメージです。
コンテキストメニューの実装
タスクの右クリック（PC）または長押し（スマホ）で表示されるコンテキストメニューには、よく使う操作をまとめました：
- タスク名の編集
- 重要タスクへの切り替え
- 緊急/非緊急の切り替え
- 完了状態の切り替え
- 追加日の表示
- タスクの削除
これにより、タスクの状態を柔軟に変更できます。特に、緊急度の切り替えは左右のエリア間でタスクが移動する形で表現され、視覚的にわかりやすく設計しています。
同期と通知の仕組み
リアルタイム同期
タスケットの核となる機能が、2人間でのリアルタイム同期です。一方が入力したタスクがすぐに相手の画面に反映される仕組みにより、「いっしょにすることリスト」が実現します。
技術的には、データベースにはリアルタイム更新に強いNoSQLを採用。また、PWAの特性を活かして、オフライン時にもキャッシュしたデータで操作でき、オンラインに復帰した際に自動同期する設計としました。
通知機能
相手がタスクを追加したり完了したりした際に、プッシュ通知で知らせる機能も実装。Web Push APIを利用し、デスクトップとモバイルの両方に対応しています。
通知内容には、タスク名と実行者名を含め、誰が何をしたかが一目でわかるようにしました。また、通知のオン/オフを切り替える設定も用意し、必要に応じて通知を調整できます。
モックアップ制作とデザイン検証
実際の開発に先立ち、HTMLとCSSでモックアップを作成して、デザインとユーザー体験を検証しました。モックアップでは以下の要素を重点的に確認：
- PC版とスマホ版の画面レイアウト
- 左右スワイプの操作感
- コンテキストメニューの使いやすさ
- タスクの自動ソート機能
特に、スマホでの長押しでコンテキストメニューを表示する機能は、操作性の面で工夫が必要でした。メニューが画面からはみ出さないよう位置調整するコードや、タッチイベントの適切な処理など、細部まで確認しています。
技術仕様とデータモデル
PWAとしての実装
タスケットはPWA（Progressive Web App）として実装することで、インストールなしでブラウザから利用でき、かつアプリのような体験を提供します。
PWAの主な特徴として活用したのは：
- サービスワーカーによるオフライン対応
- ホーム画面への追加機能
- プッシュ通知対応
特に、オフライン対応は重要で、通信状態が不安定な場所でも操作できる点がポイントです。
データモデル
タスクのデータ構造は以下のように設計しました：
- id: 一意識別子
- title: タスク名
- isUrgent: 緊急フラグ（まずすること/予定すること）
- isImportant: 重要フラグ（★あり/なし）
- isCompleted: 完了フラグ
- createdAt: 作成日時
- createdBy: 作成者ID
- updatedAt: 更新日時
- updatedBy: 更新者ID
シンプルながらも、タスクの状態や履歴を適切に管理できる設計になっています。
開発から得た気づき
タスケットの設計・開発から、多くの学びがありました。
最も重要だったのは「機能を削ること」の大切さです。当初は多くの機能を盛り込もうとしましたが、2人だけで使うという前提に立ち返り、本当に必要な機能だけに絞りました。
また、PCとスマホで操作体験が大きく異なることも再認識。PCではキーボード入力の効率を重視し、スマホではタップ操作の簡便さを追求するなど、デバイスごとの特性に合わせた設計が重要でした。
さらに、視覚的な区別（色や形、位置）が直感的な理解を助けることも実感。多くの説明がなくても、見ただけで使い方がわかるUIの重要性を学びました。
まとめ
友達と2人だけで使う「タスケット」アプリの開発過程を紹介しました。アイゼンハワーのマトリックスをベースにした直感的なタスク管理、PCとスマホそれぞれに最適化された操作体験、2人でのリアルタイム同期など、シンプルながらも使いやすさを追求したデザインになっています。
PWAの特性を活かしたオフライン対応や、テキストベースの効率的な入力方法など、技術面でも工夫を凝らしました。最小限の機能に絞ることで、逆に使いやすさを高めるという経験は、他のアプリ開発にも活かせる貴重な学びでした。
開発の詳細仕様はYAML形式でまとめており、実装の際の参考資料としても活用できます。タスケットのようなシンプルなアプリが、日常のタスク管理をより楽しく、より効率的にする一助になれば幸いです。