問題提起

日本では、スケジュールを整理する手段として時間割表が広く使われています。

学校は大勢に向けて時間割を配布するため、時間割の作成は個人に委ねられることが多く、人それぞれ異なる方法で作成・管理しています。

• Excel や Google スプレッドシートを使う方法。 よく使われる方法ですが、見た目に整えるのに時間がかかります。
• Google カレンダーや Apple カレンダーを使う方法。 カレンダーを使うのも良い代替案ですが、時間割専用に設計されているわけではありません。高精度なツールで簡素なデータを表現しているに過ぎません。
• 紙とペンを使う方法。 シンプルさゆえに多くの人が頼る方法です。しかし、共有や修正が簡単ではありません。

これらの代替手段は機能しますが、時間割専用に設計されているわけではありません。これはインターフェースの問題です。時間割は独自のフォーマットであり、効果的に管理するには専門的なインターフェースが必要です。

Deizu は高校2年生の頃から取り組んでいるプロジェクトで、時間割を作成するためのユーザーフレンドリーなインターフェースを提供することで、これらの初期の課題を解決することを目指していました。

Deizu はデジタルアセットを管理・共有するためのプラットフォームです。私はこのプラットフォームの開発とデザインの両方を担当しました。

ターゲット層

このプロジェクトを始めた時、私は学生でした。まさにターゲット層でした。自分の生活をより便利で整理されたものにするツールを作りたかったのです。

Deizu の主なターゲットは学生でした。

私はシンプルさと使いやすさを重視しています。使いやすく理解しやすいツールを作りたいと思っていました。同時に、視覚的に魅力的で使っていて楽しいツールにしたかったのです。

これにより、ユーザーは時間割を作成、管理、共有できます。このプラットフォームはモダンなウェブ技術を使用して構築されており、シームレスなユーザー体験を実現しています。

v0 - プロトタイプ

まずは、ユーザーが時間割を作成・管理できるシンプルなインターフェースを作成することから始めました。HTML、CSS、JavaScript（Web Components）を使って初期のプロトタイプを構築し、すぐにデプロイして友人やクラスメートと共有しました。

この初期バージョンは非常に最低限のものでした。ユーザーはサイトにアクセスし、科目名を入力し、各セルの色を変更できました。しかし、認証機能やデータ保存機能がなかったため、ユーザーは作成した端末でしか時間割にアクセスできず、ページを更新するとすべてリセットされてしまいました。

非常に原始的ではありましたが、当初作っていた静的なワイヤーフレームやスケッチよりも、アイデアを伝えるのにはるかに効果的でした。

高忠実度のプロトタイプを構築し、実際に動作するサイトにデプロイすることは、モックアップを見せるよりもアイデアを伝えるのに非常に効果的だと気づきました。同僚から即座にフィードバックを得る素晴らしい方法でした。

クラスメートはこのアイデアに非常に好意的で、フィードバックをくれました。得られた意見の一部は以下の通りです：

• 時間割を後で編集できるようにしてほしい。
• 複数の時間割を管理できるべき。
• 時間割を他の人と共有したい。
• 各セルに詳細情報（場所、教師など）を追加したい。

v1 - プロダクションへ

受け取ったフィードバックをもとに、Deizu の次のバージョンの開発を始めました。ラフなプロトタイプから学んだことを活かし、React.JS というフレームワークを学ぶ機会としても活用しました。複数の時間割を扱え、他のユーザーと共有できるプラットフォームとして再構築しました。

この新しいバージョンでは、Google ログインを可能にし、ユーザーが簡単にアカウントを作成して時間割を保存できるようにしました。また、初めて一般向けにソフトウェアを構築することを意図していました。学校によって開始時間と終了時間が異なることが多いため、各行に開始時間と終了時間を追加できる機能も実装しました。さらに、場所や教師などの情報を各セルに追加できるようにしました。

実用性だけでなく、テーマカラーやコーナー半径を変更できるカスタマイズオプションも提供しました。

しかし、これらの機能のユーザーの利用は低調で、すぐにこれが最善のアプローチではなかったと気づきました。カスタマイズ可能なコーナー半径は内部のコンテンツをはみ出させ、見た目に美しくありませんでした。テーマカラーは時間割をよりパーソナルにする楽しい方法でしたが、すでに色分けされたセルとのコントラストが悪くなってしまいました。

ユーザビリティを犠牲にせずに、どうすればアプリをより視覚的に魅力的にできるでしょうか？

v2 - デザインの洗練

v2 では、ユーザーが時間割に壁紙を追加できるようになりました。インターネットから画像 URL をコピーして、時間割のバナー画像として添付できるようにしたことで、メインのグリッドインターフェースを散らかさずにカスタマイズできるようになりました。

また、この時期に Next.JS に切り替えました。React をしばらく使っていたので、その上に構築されたフレームワークである Next.JS を試してみたかったのです。Next.JS はサーバーサイドレンダリングと静的サイト生成を可能にし、アプリのパフォーマンスを向上させ、SEO にも有利にしました。

データシート

v2 は、単純なインターフェースを超えて、時間割のユーザー体験をどのように改善できるかを根本的に再考した最初のバージョンでもありました。

前バージョンの Deizu は「編集」体験を改善しました。そこで次に自問したのは、「データ入力体験はどう改善できるか？」ということでした。特に、同じ科目を曜日や時間割をまたいで使う場合です。

答えは、科目データを時間割から分離し、毎回新しく作成するのではなく再利用できるようにすることでした。これが「データシート」の誕生です。

データシートは科目を管理・共有する方法です。科目の作成、編集、削除ができ、他の人と共有することもできます。これにより、毎回手動で入力するのではなく、既存のリストから素早く科目を入力できるようになりました。

v3 - 反復の継続

以下は v3 でのデータシートの使用デモです。

ユーザーは科目のリストをクリックしてスクロールし、希望の科目を見つけたらクリックして時間割に追加します。これははるかに効率的なデータ入力方法であり、ユーザーは希望の科目を素早く見つけて選択することができました。

データシート以外にも、分析を通じて Deizu ユーザーの半数以上がウェブアプリケーションであるにもかかわらずスマートフォンからサイトを閲覧していることがわかりました。このことから、アプリのデザインを再考する必要がありました。モバイル端末でも使いやすく、より視覚的に魅力的なデザインを目指しました。

このタイミングでテーマ機能を廃止しました。

一歩下がって、アプリのデザインに集中することにしました。新しいカラーパレット、タイポグラフィ、レイアウトを備えた新しいデザインシステムの作成から始めました。

v4 - 細部へのこだわり

Deizu v4 はアプリの現在のバージョンです。これはデザインの反復プロセスの継続であり、細部を改善し、アプリをより視覚的に魅力的にすることに焦点を当てています。詳細についてはこちらをご覧ください。