これのコツ、「画像で作ろうとすると大変」であり、また、毎回作るのが大変だと思うので、

・二週間分のカレンダーを任意の日付からスタートでき
・それをサイト上で編集できて
・それを画像で保存する

みたいなのをAIで作るのがいいと思います！

プロンプトは以下みたいにして、あとはお気に入りのデザインを作るために修正するとかがいいかと！

---

二週間カレンダー生成ツール作成プロンプト

以下の仕様に基づいて、HTMLアーティファクトで二週間カレンダー生成ツールを作成してください。

📋 基本機能要件

1. カレンダー生成機能

開始日設定: 日付入力フィールドで任意の開始日を選択可能
二週間表示: 選択した開始日から連続する14日間のカレンダーを生成
曜日対応: 開始日の曜日に合わせて正しい位置に日付を配置
空白セル: 最初の週で開始日より前の曜日は空白セルで表示

2. 予定入力機能

直接編集: 各日付セルに直接テキストを入力できるテキストエリア
プレースホルダー: 「予定を入力...」のヒントテキスト表示
リアルタイム編集: 入力内容がすぐに反映される

3. 日付表示機能

今日のハイライト: 現在の日付を特別な色（グラデーション）で強調表示
日付番号: 各セルに大きく見やすい日付番号を表示
曜日ヘッダー: 日本語の曜日（日月火水木金土）をヘッダーに表示

🎨 デザイン仕様

1. 全体レイアウト

横幅: 最大800px、中央揃え
背景: グラデーション背景（紫系統）
カード形式: 白い背景の丸角カードデザイン
シャドウ: ソフトなドロップシャドウで立体感演出

2. ヘッダーデザイン

背景: 紫のグラデーション（#667eea から #764ba2）
タイトル: 大きく見やすい白文字
説明文: 半透明の白文字でツールの説明

3. カレンダーデザイン

グリッドレイアウト: 7列（曜日）× 行数（週数）
セルサイズ: 最小高さ100px、適度なパディング
曜日ヘッダー: ダークグレー背景の白文字
日付セル: 白背景、ホバー時に薄いグレー背景
今日の強調: 紫グラデーション背景、白文字

4. コントロール部分

背景色: 薄い紫（#f8f9ff）
ボタン: グラデーションボタン、ホバーエフェクト付き
入力フィールド: 丸角、フォーカス時のハイライト

📱 レスポンシブ対応

モバイル表示（768px以下）

縦一列表示: 曜日ごとに縦に並べる
曜日ヘッダー非表示: モバイルでは曜日ヘッダーを隠す
日付セル: 横長デザイン、左側に日付番号、右側に入力エリア
サイドライン: 左端に色付きの境界線

🔧 技術仕様

HTML構造

コンテナ: メインコンテナで全体を包む
ヘッダー: タイトルと説明
コントロール: 日付入力とボタン
カレンダー: グリッドレイアウトのカレンダー本体
エクスポート: 印刷・保存ボタン

JavaScript機能

初期表示: ページ読み込み時に今日の日付で自動生成
日付計算: 開始日から14日間の正確な日付計算
曜日判定: JavaScriptのgetDay()を使用した曜日判定
タイムゾーン対応: 日付文字列に時刻を明示して正確な日付処理
今日判定: 現在日付との正確な比較でハイライト表示
印刷機能: window.print()による印刷ダイアログ表示

CSS仕様

グリッドレイアウト: CSS Gridを使用した7列レイアウト
グラデーション: linear-gradientを多用したモダンデザイン
トランジション: ホバーエフェクトやフォーカス時のスムーズアニメーション
印刷CSS: @media printで印刷時の最適化

🖨️ エクスポート機能

印刷対応

印刷CSS: 不要な要素（コントロール、ボタン）を非表示
色調整: 印刷時も色が正確に出るよう設定
レイアウト調整: 印刷用に余白とサイズを最適化

🎯 ユーザビリティ

操作性

直感的UI: 一目で使い方が分かるシンプルな設計
即座反映: 入力や操作がすぐに結果に反映
エラー防止: 日付が未入力の場合は処理をスキップ

アクセシビリティ

キーボード操作: タブ移動でアクセス可能
コントラスト: 十分な色のコントラストを確保
フォントサイズ: 読みやすい適切なフォントサイズ

💡 実装のポイント

日付処理の注意点: タイムゾーンによる日付ずれを避けるため、日付文字列にT00:00:00を付加
週区切りの計算: (startDayOfWeek + i) % 7 === 6で土曜日を正確に判定
今日の判定: 時分秒を0にリセットしてから日付比較
レスポンシブ: メディアクエリでモバイル時は完全に異なるレイアウト

このプロンプトを使用して、美しく実用的な二週間カレンダー生成ツールを作成してください。