読み込み中

カスタムバケットリストを作成する

想像したトラッカー、オーガナイザー、目標管理システムを、実際に動くインタラクティブな ツールに変えましょう。やりたいことを説明すれば、Claudeがそれを作り上げる様子を見ることができます。

15 分個人Claude

1. タスクを説明する

Claudeは、あなた個人の目標に合わせたカスタムのインタラクティブツールを構築できます。求める体験やインターフェースを説明すれば、Claudeが思い描いた機能と雰囲気を備えたカスタムアプリを設計します。

何を追跡、整理、構築したいか、そしてそれがどのような見た目や雰囲気であってほしいかをClaudeに伝えましょう。

製品ではなく人生の体験を扱う、美しく高級なブティックを閲覧しているような感覚のインタラクティブな「バケットリストビルダー」を作りたいです。

コンセプト: 「将来の目標リストを作らなければ」という発想を、もっと楽しいものに変えたいのです。ただの普通のリストではなく、体験にしたいと思っています。

デザイン: 世界クラスのiOSアプリのような見た目にする必要があります。クリーンで意図的なグラフィックデザイン。タイポグラフィ、余白、階層構造など、あらゆる細部が吟味され、考え抜かれたものに感じられるべきです。最終的な仕上がりは見事なものにしてください。

含めるもの: カテゴリー別の体験、特定の体験を「マイリスト」に保存する機能、閲覧と保存済みアイテムの表示を切り替えるトグル、アイテム選択時の満足感のあるインタラクション。

閲覧できる美しい人生の体験を盛り込んでください。そして、さらに楽しいサプライズもいくつか追加してください!

2. Claudeにコンテキストを与える

Claudeは会話の中で直接インタラクティブなアプリを構築できます。より洗練されたデザインにするには、求める美的感覚についてClaudeに方向性を示すことで、結果が劇的に向上します。

必要なコンテキスト

アップロードや外部ツールは不要です。

3. Claudeが作成するもの

Claudeは、仕様に合致した完全にインタラクティブなアプリケーションを構築します。閲覧可能でクリック可能、そしてあなたのデザイン基準に沿ったスタイルになっています。

高級ブティックのような雰囲気を持つバケットリストビルダーを作成しました。作成した内容は以下の通りです。

デザインアプローチ: SF Proのタイポグラフィ感覚を持つクリーンなiOSスタイルの美学、ゆとりのある余白、ホバー時の繊細な高さの変化。カラーパレットはニュートラル(#1C1C1E、#8E8E93、#F2F2F7)に保たれており、体験の説明そのものが想像力を通じて色彩となります。

機能:

  • Wonder、Adventure、Craft、Achievementにまたがるカテゴリーフィルタリング
  • BrowseビューとMy Listビューの切り替え、各体験カードには期間と相対的なコストが表示され、スムーズなホバー状態と満足感のある保存インタラクション
  • オーロラから日本の茶道まで、さまざまな厳選された体験

カードをクリックするとリストに追加されます。保存数は自動的に更新されます。カテゴリーでフィルタリングしてから、My Listに切り替えて厳選されたコレクションを確認してみてください。

スタイルを調整したり、体験を追加したり、カテゴリーの仕組みを変更したりしましょうか?

4. フォローアッププロンプト

Claudeとの会話を続けて、さらに洗練させたり、拡張したり、探求したりしましょう。

夢を計画に変える

アプリを単なるリストではなく、発射台にしましょう。将来のClaudeとの会話ですぐに使えるプロンプトを生成するボタンを追加し、追求したい体験についてのコンテキストをあらかじめ入力しておきます。

保存した各カードに「これを実現する」ボタンを追加してください。クリックすると、新しいClaudeチャットにコピーできるプロンプトを表示してください。そのプロンプトには体験名と私の説明を含め、それを達成するためのリサーチを手伝うようClaudeに依頼する内容にしてください。

次に何をすべきかの提案を受け取る

Claudeの知性をアプリに直接組み込みましょう。アーティファクトはClaudeを呼び出して、あなたの選択を分析し、その場で新しいおすすめを生成できます。これは静的なロジックではなく、Claudeがあなたのツールの中で考えているのです。

「新しいもので驚かせて」ボタンを追加してください。タップすると、アプリが保存した体験をClaudeに送信し、まだ検討していないもの——これまで選んだもののパターンに合うもの——を提案するよう依頼し、Claudeの推論過程も表示してください。

アニメーションとパーソナライゼーションを追加する

モーションや小さな個人的な工夫が、プロトタイプと実際に使いたくなるものとの違いを生み出します。イントロアニメーション、ホバーエフェクト、あるいは体験をあなた向けに調整するセットアップ画面をリクエストしてみましょう。

名前と誕生日を尋ねる初回セットアップを追加してください。ヘッダーに私の名前を使い、どこかさりげない場所で年齢を計算してください。何かを完了としてマークしたとき、カードが何百もの小さな、カードの色を保ったまま溶けていく粒子へと爆発するアニメーションにしてください。満足感のある仕上がりにしてください。

5. コツ、ヒント、トラブルシューティング

画像を手早い参考資料として使う

お気に入りのアプリのスクリーンショットをアップロードしましょう。「これと同じような雰囲気にして」と伝えることで、美的感覚をゼロから説明するよりもClaudeにとって手がかりが増えます。また、アーティファクトのスクリーンショットを撮って特定の部分を丸で囲み、「この部分。これを直して」と伝えることもできます。

あなたのアーティファクトは考えることができる

アーティファクトは静的なコンテンツを表示するだけでなく、Claudeを直接呼び出すことができます。つまり、あなたのアプリは保存した内容を分析したり、パーソナライズされた提案を生成したり、カスタムテキストを書いたり、あなたの行動に応じて反応したりできるのです。ツールに単なる表示ではなく推論をさせたい場合は、「アプリにAIを組み込んで」や「アプリにClaudeを呼び出させて」とClaudeに依頼しましょう。

うまくいったものを再利用する

気に入った美的感覚が見つかったら、それを他の場所にも適用するようClaudeに依頼しましょう。「この同じデザインシステムを読書リストトラッカーに使って」や「このまったく同じビジュアルスタイルでギフトアイデアアプリを作って」といった具合です。雰囲気を定義するという大変な作業は、すでに終わっています。

6. 自分で試してみる準備はできましたか?

あなたが探求し学ぶ方法に合わせた、カスタムインターフェースを持つインタラクティブなツールを作成しましょう。Claudeとともにアイデアを説明し、洗練させて、自分にとって役立つツールを作りましょう。