会議を止めないために、常に時計は見えるところにおきたかった件

はじめに

今度社内で研修の講師を担当することになり、以前から個人的に悩んでいた
「 画面共有してると時間が把握しづらい問題 」 をなんとかしたくて、Claude君の手を借りることにしました。

私の作業環境

ちなみに私の画面共有中のPC周りの環境はこんな感じです。
使える画面はノートPC本体と外部モニタの計2画面分。
（写真は自宅と個人PCの写真になりますが、会社の環境もほぼ一緒です）

PPTのスライドショーって1画面占有されるので、残り一画面で色々やりくりするのはけっこう辛いですよね😿
なので今回は画面リソースはスマホに頼ることにして、Claude君のアーティファクトでタイムテーブルアプリを作ってもらいます📱

（画像の講義は架空のものです。たぶん会社で「草むしり検定」の講義を行う予定はありません）

作ってもらったアプリ

実際にClaude君が作ってくれたアーティファクトが下になります。
（解説用に注釈とかはChatGPTに作ってもらいました。）

（画像の講義は架空のものです。「雑草の分類」や「草むしり戦略」などについてのご質問には専門外のためお答えできかねます）

作り方

個人用のアプリなのでバイブコーディング的に作っていて、見た目の再現性は低いですが
Claude君に以下のようなプロンプトと別途タイムテーブル（エクセル）をアップロードすると、
似たようなものは作れると思います。
（バイブコーディングってガチャ要素的な楽しみもあると思うので、全然違う見た目になっても怒らないでください🙇‍♂️）

プロンプト

アップロードしたエクセルファイルのタイムテーブルから、Reactでアーティファクトを作成してください。

# 要件
- スマホで見るのでコンテンツは最小限にしてください
- 現在時刻を大きく上部に表示して、画面スクロール中も固定表示してください
- 現在時刻の下に計画との差分を表示してください
- タイムスケジュールを現在時刻の下に表示して、スクロールできるようにしてください
- クリックした講義を「進行中」としてハイライトしてください
- スケジュール上の現在地も色分けしてください
- 複数講義はタブで切り替えられるようにしてください
- 練習用にストップウォッチ機能を付けてください（講義をクリックしたら計測開始）

おわりに

AIたちが頑張ってくれたので、あとは人間側（筆者）で頑張ります💪