Ottermindで学習タイマーのWebサイトを作る方法

学習タイマーは目的が明確で、最初のWeb制作に取り組みやすい題材です。Ottermindに画面と動作を伝え、プレビューを作り、操作を1つずつ確認しましょう。本記事では、小さなアイデアを制作タスクに変え、共有前に確認する点を紹介します。

最初の機能を絞る

時間設定、開始、一時停止、再開、リセットから始めます。テーマ、通知、履歴を増やす前に、一連の計時が動くようにします。

範囲は小さく保ちます。スマートフォン中心なら、ボタンの押しやすさ、数字の見やすさ、縦画面を条件に含めます。

Prompt

個人用の学習タイマーサイトを作ってください。分数設定、開始、一時停止、再開、リセットに対応します。静かでシンプルな画面に大きな残り時間を表示し、スマートフォンでも操作しやすくしてください。ログインや複数ユーザー機能は不要です。まずページ構成と実装計画を示してください。

参考画像を添付する場合は、書体、配置、雰囲気など参考にしたい部分を説明します。

提案された追加機能はタイマーに役立つかで選びます。一時停止では残り時間を保持し、リセットでは設定時間に戻すなど、動作を具体化します。見た目より先に基本操作を試します。

スマートフォンのタイマーと比較します。バックグラウンドや再読み込みで想定外の動作があれば、現象を伝えて修正後に再確認します。

基本機能の確認後に通知、テーマ、履歴を追加し、影響する操作を再テストします。公開方法と権限を確認し、最終URLを別の端末で開いてください。無料公開、独自ドメイン、保存容量は現在の設定によります。