パーソナルなPebbleウォッチフェイスのデザイン

最近、Pebble Time 2を手に入れました。Google/Apple/Samsungから離れた、バッテリー寿命が4週間と長い楽しいスマートウォッチのように思えたからです。やりたかったことの一つは、私自身の具体的な問題に対応するカスタムウォッチフェイスを作成することでした。ウォッチのデザインには予想以上の労力がかかり、ここに盛り込まれた機能には見かけによらず多くの思考が費やされているので、それについて少し書くのは面白いだろうと思いました。 ウォッチに助けてもらいたい問題 ここ約6ヶ月間に私が経験してきたことを説明するのは難しいです。それは通常のうつ病から始まり（ええ、「通常のうつ病」という言葉自体が多くのことを物語っていますが）、その後、音量が大きく増したように感じられました。以前から抱えていた対処可能な問題が、突然圧倒的になったのです。私はいつも雑用や退屈な作業を始めるのが難しいと感じていましたが、今では流砂の中を泳ごうとしているように感じられます。同時に、ハイパーフォーカスに大きな問題を抱えていました。何か作業を始めると、一日中が消えてしまうのです。8時間ぶっ通しでコンピューターの前に座り、子供を学校に迎えに行かなければならないことに中断されて初めて、膀胱が破裂しそうになっていること、そしてまだ昼食を食べていないことに気づきます。その後、残りの一日中そのことを考え続け、まだそのことを考えているために眠りにつくことさえ困難になります。言うまでもなく、私の時間管理は崩壊し、生まれて初めて約束を破ることもありました。もちろん、ウォッチフェイスがこれらの問題を解決するわけではありませんが、私は絶望しており、試していることは何も役に立っていません。具体的には、ウォッチに以下のことについて助けてもらいたいと考えています。 * 今日のカレンダーの概要を表示する。 * タスクを開始する。 * ハイパーフォーカスを中断するアラート。 ウォッチフェイスの名前を「ADHDヒーロー」にしようと思っていましたが、それは少し直接的すぎるのでやめました。私はまだADHDの診断を受けていないからです（現在、調査中ですが、迅速なプロセスではありません）。 私だけのウォッチフェイス 私はオープンソースが好きですが、このウォッチフェイスを公開する予定はありません。ウォッチフェイスの目的は、私の人生の摩擦を取り除くことであり、新たな不安の源を作り出すことではありません。この方法なら、自由にそれを変更したり、書き直したり、雰囲気で汚したりすることができ、他の人のことを心配することなく、私にとって十分なものを作ることに集中できます。気に入ったものがあれば何でも盗んで、自分自身のウォッチフェイスを作成することをお勧めします。Pebbleなら簡単です。 Claudeを使ったプロトタイピング 私は、異なるプロトタイプを迅速に反復できることを強く信じています。Claudeを使用してHTMLプロトタイプを生成することに成功しており、次のような画像を吐き出すことができます。 31/10 デザイン的には当たり外れがあり、Claudeは創造性やセンスに欠けるようです（しかし、時には素晴らしいアイデアを思いつくこともあります）。適切にガイドする必要があり、コンセプトの数十種類のバリエーションを生成するように指示し、そこから反復することで良い利用ができています。この記事中のすべての画像は、開発の様々な段階でこの方法で生成されました。また、次のような、ほぼすべてのウォッチフェイスとその機能をシミュレートする埋め込みウィジェットのように、インタラクティブなプロトタイプを迅速に生成することもできます。 [Start task Bluetooth Sleep Todoist Events around rim4 Steps Battery OK Low Critical] Claudeによって生成されたウォッチフェイスのシミュレーション。 これは非常に便利で、ウェッジの形状、配色、チップチューンライブラリなどを微調整するために使用しました。 スタイルの探索 ウォッチフェイスのデザインは、ウォッチを手に入れる前、そして一行のコードも書く前から始まりました。当初の雰囲気は大きく異なっていました。それは、よりクリーンで、より均一なデザインで、ごちゃごちゃしておらず、すべてが一貫したデザイン言語に従っていました。完璧だと確信していました。 [The original watchface. Tracking tasks.] 元のウォッチフェイス。タスクを追跡中。 ウォッチが届いてから構築しましたが、ひどいものでした。とても退屈で…。「Comic Drop」というウォッチフェイスを見て、そのコミックブックのパネルレイアウトがとても面白いと思いました。一日中のイベントを表示する、似たようなコミックブックのパネルレイアウトがあったらクールではないでしょうか？もしかしたら、それらは動的に一日中動き回るかもしれません？ [A comic book panel subdivision.] コミックブックのパネル分割。 仕事をするべき朝にはコンピューターのピクセルグラフィック、運動するべき時にはバーベルの絵など、素敵なピクセルグラフィックがあったら本当に素晴らしいでしょう。残念ながら、それは現在の私のスキルレベルを超えているので、そのアイデアは断念せざるを得ませんでした。そこで、元のデザインに戻りながらも、太い線、明るい色、そして不規則性を増やした「コミックブック」スタイルを反復しました。 231/10 新しいコミックブックスタイル。後で説明する要素が含まれています。これはより興味深いウォッチフェイスであり、最初の反復よりも手首にずっとよく似合います。もちろん完璧ではありませんが、私の興味を引きます。それがポイントです。 カレンダーの概要 ウォッチを一目見るだけでカレンダーを確認できるようにしたいと思っています。Sectographのようなウォッチフェイスは、時計の中にイベント情報を追加します（例えば、1時から2時のイベントはそのアナログ時計のセクションに色を付けます）。私も似たようなものが欲しかったのです。私が何を言っているのか理解してもらうために、いくつかのプロトタイプを以下に示します。 [Single event in the day. Four events the next 6 hours. Fully loaded day.] 一日中の単一イベント。次の6時間で4つのイベント。満載の一日。 これで、一日を少しは計画しやすくなることを願っています。私のデザインにおける注目すべき省略点は、イベントのテキスト説明がないことです。それは良いのですが、私の目指すデザインを複雑にします。私にとって重要なのは、イベントが何であるかではなく、「そもそもイベントがあるのかどうか」です。 不均一性 私の脳は、静的で面白くない情報をフィルターで除去するのが非常に得意です。例えば、私は携帯電話にカレンダー、Habitica、Todoistのウィジェットを置いて、イベント/習慣/タスクを追跡するのに役立てようとしましたが…画面の80%を占めているにもかかわらず、脳が完全に無視し始めるのに時間はかかりませんでした。無視すると言うとき、私は文字通り意味しています。それらを完全に気づかなくなってしまいました。そこで試したかったのは、イベントの形状をランダム化することで、少しスパイスを加えることでした。これら2つの例を見てください。 [Uniform events. Non-uniform events.] 均一なイベント。不均一なイベント。 私にとって、不均一なプロトタイプは視覚的により興味深く、変化する形状によってそれらをフィルターで除去するのを防ぐことができるはずです。より丸い均一なバージョンがPebble Round 2でより良く見えると主張する人もいるでしょうが、それは公平な意見です。ここに、ラウンドの形状を使った同様のモックアップがあります。 [Uniform events on the Round 2. Non-uniform events on the Round 2.] Round 2での均一なイベント。Round 2での不均一なイベント。 やはり不均一なバリアントの方が目を引き、私の特定の問題をより良く解決すると考えていますが、丸い時計に丸いレイアウトが非常によく合うことは否定できません。 12時方向への移動 もう一つのアイデアは、イベントを時間に静的に固定するのではなく、12時の「今」に向かってイベントが移動するようにしたかったのです。つまり、3時に表示されるイベントは3時間先であり、12時に重なるイベントは進行中であることを意味します。これは、一日を振り返るのが難しくなる（過去のイベントが消える）一方で、イベントが近づくにつれて緊急性を感じやすくなります。少し奇妙かもしれませんが、実際には素晴らしいと感じます。ライフサイクルを通じて同じイベントを以下に示します。3時から漂流してきて、12時を過ぎると進行中になり（時計のカウントダウンバンドが減っていく）、過去になると消えます。 [Event is a few hours away. Event is ongoing. Event is in the past and has disappeared.] イベントは数時間先。イベントは進行中。イベントは過去のものとなり、消滅。 完了カウントダウン これはかなりうまく機能しますが、問題があります。1分後に始まるイベントと、しばらく前から進行しているイベントをどのように区別するかです。イベントは12時で途切れてしまうため、一目で区別する方法がありません。最初は、進行中のイベントの場合、イベントのウェッジを大きくして時計に触れるようにしてみました。それは少し奇妙だったので、代わりに時計の輪郭を進行中のイベントの色で塗ってみました。そして、Time Timerのように、残りのイベント時間を輪郭でカウントダウンすればいいのではないかと思い立ちました。 [The countdown band draining as the event completes.] イベントが完了するにつれてカウントダウンバンドが減っていく。 実際にはこれは非常にうまく機能します。ワークタイマーも同様に