以前の記事でクリニクスアプリのインストールをお勧めする記事を書きましたが休日を利用してポスターを作成してみました。ポスターを作成するために今回は図表作成で評判の生成系AIであるClaude 3.7 Sonnetを利用してみます。プロンプトは下記のように入力しました。
目的
以下の内容を、患者さんむけのA1ポスターデザインに変換してください。添付の画像を使用、患者にやさしい色調、持続可能性を連想させる視覚要素を取り入れたデザインを目指します。SVGで出力。
デザイン仕様
1. カラースキーム
<palette>
カラーコード #2196B9
RGB rgb(33,150,185)
カラーコード #EF7C1B
RGB rgb(239,124,27)
カラーコード #E84518
RGB rgb(232,69,24)
</palette>
2. ビジュアル要素
フォーム: 有機的な曲線、葉の形状
テクスチャ: 紙、木、再生素材風
アイコン: 葉、水滴、太陽、リサイクルマーク
区切り: 手描き風の線、枝や蔓のデザイン
3. レイアウト
非対称・自然な配置
セクション間に植物モチーフの区切り
読みやすいコントラスト
効率的なホワイトスペース活用
変換する内容
[診療予約に便利なクリニクスアプリのご案内
2025.01.26
当院の予約システムはWEB上から可能ですが手続きが煩雑であるとのご意見を頂いております。当院では、患者様の利便性向上を目的として診療予約アプリを導入しており、このアプリの紹介をいたします。このアプリを活用いただくことで、スムーズに診療予約が可能となり、待ち時間の短縮も可能です。
診療予約アプリの特徴
1. 簡単予約で待ち時間を短縮
診療予約アプリを使えば、診療時間内の空き状況をすぐに確認し、24時間いつでもご予約いただけます。予約時間が近づくと通知も届くため、うっかり忘れる心配もありません。
2. 家族分の予約も一括管理
アプリでは、お子様やご家族の診療予約も簡単に管理可能です。複数人分の予約状況をひとつの画面で確認できますので、特に忙しいご家庭には便利です。
3. 当院からのお知らせをタイムリーに確認
アプリを通じて、当院からの大切なお知らせや診療スケジュールの変更情報などを、リアルタイムで受け取ることができます。
アプリの利用方法
1. アプリをダウンロード
以下のリンクから、診療予約アプリをダウンロードしてください。オンライン診療・服薬指導アプリとなっておりますが通常診療の予約にも活用いただけます。
* iPhoneをお使いの方はこちら
* Androidをお使いの方はこちら
2. アカウントを作成
初めてご利用いただく際は、アプリ内でアカウントの作成をお願いします。 お名前や電話番号を入力するだけで、すぐにご利用いただけます。
アカウントにログイン後は医療機関検索から当院を選択ください。
クリニック名の横の♡マークを選択するとお気に入り登録が可能です。
3. 予約を登録
診療希望日を選択し、必要事項を入力して予約を確定してください。 予約内容の変更やキャンセルも簡単に行えます。 詳細な使用方法はこちらに記載がございます。
こんな方におすすめです！
* 忙しい毎日でクリニックに電話をする時間が取れない方
* 家族の診療スケジュールを一元管理したい方
* 待ち時間を少なくしたい方 当院に定期通院されている患者さんにはお勧めです。
お問い合わせ
診療予約アプリの使い方やインストール方法についてご不明な点がありましたら、クリニック受付までお気軽にお問い合わせください。
当院では、患者様一人ひとりの健康を大切にし、安心してご利用いただける診療環境を整えています。この機会にぜひ診療予約アプリをご利用ください！]そうしますと下記のHTMLコードが出力されます。
<svg xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 841 1189" width="841" height="1189">
<!-- 背景 - 再生紙風テクスチャ -->
<rect width="841" height="1189" fill="#f9f7f2" />
<!-- 有機的な背景要素 -->
<path d="M0,300 C150,250 300,350 450,300 S700,200 841,250 V0 H0 Z" fill="#2196B9" opacity="0.1" />
<path d="M0,1189 C200,1100 400,1150 600,1100 S800,1050 841,1000 V1189 H0 Z" fill="#EF7C1B" opacity="0.1" />
<!-- 葉のモチーフ - 右上 -->
<g transform="translate(700, 120) rotate(30)">
<path d="M0,0 C20,-20 40,-15 60,-30 C80,-15 100,-20 120,0 C100,20 80,15 60,30 C40,15 20,20 0,0 Z" fill="#2196B9" opacity="0.6" />
<path d="M10,0 C25,-15 40,-10 60,-20 C80,-10 95,-15 110,0 C95,15 80,10 60,20 C40,10 25,15 10,0 Z" fill="#f9f7f2" />
</g>
<!-- 葉のモチーフ - 左下 -->
<g transform="translate(120, 1000) rotate(-15)">
<path d="M0,0 C20,-20 40,-15 60,-30 C80,-15 100,-20 120,0 C100,20 80,15 60,30 C40,15 20,20 0,0 Z" fill="#EF7C1B" opacity="0.6" />
<path d="M10,0 C25,-15 40,-10 60,-20 C80,-10 95,-15 110,0 C95,15 80,10 60,20 C40,10 25,15 10,0 Z" fill="#f9f7f2" />
</g>
<!-- トップセクション: CLINICSアプリのロゴと説明 -->
<g transform="translate(100, 100)">
<!-- 添付画像の内容を再現 -->
<g transform="scale(1.2)">
<!-- "あなたの通院をサポートするオンライン診療・服薬指導アプリ" テキスト -->
<text x="0" y="0" font-family="sans-serif" font-size="16" fill="#333333">あなたの通院をサポートする</text>
<text x="0" y="25" font-family="sans-serif" font-size="16" fill="#333333">オンライン診療・服薬指導アプリ</text>
<!-- CLINICSロゴ -->
<g transform="translate(0, 40)">
<rect x="0" y="0" width="30" height="30" rx="2" fill="#E84518" />
<path d="M5,15 L15,25 L25,5" stroke="white" stroke-width="3" fill="none" />
<text x="40" y="23" font-family="sans-serif" font-size="24" font-weight="bold">CLINICS</text>
<text x="40" y="40" font-family="sans-serif" font-size="14">クリニクス</text>
</g>
<!-- サービス累計 -->
<g transform="translate(0, 80)">
<circle cx="35" cy="35" r="35" fill="#E84518" />
<text x="35" y="25" font-family="sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="white">サービス累計</text>
<text x="35" y="40" font-family="sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="white">総診察回数</text>
<text x="35" y="60" font-family="sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">190万回</text>
<text x="35" y="75" font-family="sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="white">以上</text>
</g>
<text x="80" y="170" font-family="sans-serif" font-size="10" fill="#333333">2023年8月時点の集計</text>
<!-- 医師のイラスト - 簡略化した表現 -->
<g transform="translate(150, 80)">
<rect x="0" y="0" width="80" height="100" rx="5" fill="#f5f5f5" stroke="#dddddd" />
<!-- 医師の顔と体を簡略的に表現 -->
<ellipse cx="40" cy="35" rx="25" ry="30" fill="#f9d9c0" />
<rect x="20" y="65" width="40" height="35" fill="white" />
</g>
<!-- 特徴リスト -->
<g transform="translate(250, 0)">
<!-- チェックマーク1 -->
<circle cx="15" cy="15" r="15" fill="#2196B9" />
<path d="M7,15 L13,21 L23,11" stroke="white" stroke-width="2" fill="none" />
<text x="40" y="10" font-family="sans-serif" font-size="14" fill="#333333">オンライン診療・対面診療</text>
<text x="40" y="30" font-family="sans-serif" font-size="14" fill="#333333">どちらも<tspan fill="#E84518" font-weight="bold">検索・予約</tspan>が可能</text>
<!-- チェックマーク2 -->
<circle cx="15" cy="75" r="15" fill="#2196B9" />
<path d="M7,75 L13,81 L23,71" stroke="white" stroke-width="2" fill="none" />
<text x="40" y="70" font-family="sans-serif" font-size="14" fill="#333333">事前問診やクレジット</text>
<text x="40" y="90" font-family="sans-serif" font-size="14" fill="#333333">カード決済もアプリで可能</text>
<!-- チェックマーク3 -->
<circle cx="15" cy="135" r="15" fill="#2196B9" />
<path d="M7,135 L13,141 L23,131" stroke="white" stroke-width="2" fill="none" />
<text x="40" y="130" font-family="sans-serif" font-size="14" fill="#333333">オンライン服薬指導で</text>
<text x="40" y="150" font-family="sans-serif" font-size="14" fill="#333333">処方薬もご自宅に配送</text>
</g>
</g>
</g>
<!-- タイトル部分の背景 -->
<path d="M120,330 C250,300 600,320 730,350 S750,400 730,450 C600,480 250,460 120,430 S100,360 120,330 Z" fill="#2196B9" />
<!-- タイトル -->
<text x="420" y="390" font-family="sans-serif" font-size="32" font-weight="bold" text-anchor="middle" fill="white">診療予約に便利なクリニクスアプリのご案内</text>
<text x="420" y="420" font-family="sans-serif" font-size="16" text-anchor="middle" fill="white">2025.01.26</text>
<!-- メイン説明テキスト -->
<foreignObject x="120" y="480" width="600" height="150">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: sans-serif; font-size: 16px; line-height: 1.5; color: #333;">
当院の予約システムはWEB上から可能ですが手続きが煩雑であるとのご意見を頂いております。当院では、患者様の利便性向上を目的として<strong>診療予約アプリ</strong>を導入しており、このアプリの紹介をいたします。このアプリを活用いただくことで、スムーズに診療予約が可能となり、待ち時間の短縮も可能です。
</div>
</foreignObject>
<!-- 特徴セクションのヘッダー -->
<text x="120" y="600" font-family="sans-serif" font-size="24" font-weight="bold" fill="#E84518">診療予約アプリの特徴</text>
<!-- 有機的な区切り線 -->
<path d="M120,610 C200,630 300,600 400,620 S500,640 600,620 S700,600 750,610" stroke="#2196B9" stroke-width="2" fill="none" />
<!-- 特徴1 -->
<g transform="translate(140, 630)">
<circle cx="25" cy="25" r="25" fill="#EF7C1B" />
<text x="25" y="35" font-family="sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">1</text>
<text x="70" y="30" font-family="sans-serif" font-size="20" font-weight="bold" fill="#333">簡単予約で待ち時間を短縮</text>
<foreignObject x="70" y="40" width="550" height="80">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: sans-serif; font-size: 14px; line-height: 1.5; color: #333;">
診療予約アプリを使えば、診療時間内の空き状況をすぐに確認し、<strong>24時間いつでも</strong>ご予約いただけます。予約時間が近づくと通知も届くため、うっかり忘れる心配もありません。
</div>
</foreignObject>
</g>
<!-- 特徴2 -->
<g transform="translate(140, 710)">
<circle cx="25" cy="25" r="25" fill="#EF7C1B" />
<text x="25" y="35" font-family="sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">2</text>
<text x="70" y="30" font-family="sans-serif" font-size="20" font-weight="bold" fill="#333">家族分の予約も一括管理</text>
<foreignObject x="70" y="40" width="550" height="80">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: sans-serif; font-size: 14px; line-height: 1.5; color: #333;">
アプリでは、お子様やご家族の診療予約も簡単に管理可能です。複数人分の予約状況をひとつの画面で確認できますので、特に忙しいご家庭には便利です。
</div>
</foreignObject>
</g>
<!-- 特徴3 -->
<g transform="translate(140, 790)">
<circle cx="25" cy="25" r="25" fill="#EF7C1B" />
<text x="25" y="35" font-family="sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">3</text>
<text x="70" y="30" font-family="sans-serif" font-size="20" font-weight="bold" fill="#333">当院からのお知らせをタイムリーに確認</text>
<foreignObject x="70" y="40" width="550" height="80">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: sans-serif; font-size: 14px; line-height: 1.5; color: #333;">
アプリを通じて、当院からの大切なお知らせや診療スケジュールの変更情報などを、リアルタイムで受け取ることができます。
</div>
</foreignObject>
</g>
<!-- 水滴アイコン -->
<g transform="translate(680, 730)">
<path d="M30,0 C30,0 0,40 0,60 C0,76.5 13.5,90 30,90 C46.5,90 60,76.5 60,60 C60,40 30,0 30,0 Z" fill="#2196B9" opacity="0.7" />
</g>
<!-- 利用方法セクションのヘッダー -->
<text x="120" y="880" font-family="sans-serif" font-size="24" font-weight="bold" fill="#E84518">アプリの利用方法</text>
<!-- 有機的な区切り線 -->
<path d="M120,890 C200,910 300,880 400,900 S500,920 600,900 S700,880 750,890" stroke="#2196B9" stroke-width="2" fill="none" />
<!-- 利用方法1 -->
<g transform="translate(140, 910)">
<circle cx="25" cy="25" r="25" fill="#2196B9" />
<text x="25" y="35" font-family="sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">1</text>
<text x="70" y="30" font-family="sans-serif" font-size="18" font-weight="bold" fill="#333">アプリをダウンロード</text>
<foreignObject x="70" y="40" width="550" height="80">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: sans-serif; font-size: 14px; line-height: 1.5; color: #333;">
以下のリンクから、診療予約アプリをダウンロードしてください。オンライン診療・服薬指導アプリとなっておりますが通常診療の予約にも活用いただけます。<br/>
• iPhoneをお使いの方はこちら<br/>
• Androidをお使いの方はこちら
</div>
</foreignObject>
</g>
<!-- 利用方法2 -->
<g transform="translate(140, 980)">
<circle cx="25" cy="25" r="25" fill="#2196B9" />
<text x="25" y="35" font-family="sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">2</text>
<text x="70" y="30" font-family="sans-serif" font-size="18" font-weight="bold" fill="#333">アカウントを作成</text>
<foreignObject x="70" y="40" width="550" height="80">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: sans-serif; font-size: 14px; line-height: 1.5; color: #333;">
初めてご利用いただく際は、アプリ内でアカウントの作成をお願いします。お名前や電話番号を入力するだけで、すぐにご利用いただけます。<br/>
アカウントにログイン後は医療機関検索から当院を選択ください。<br/>
クリニック名の横の♡マークを選択するとお気に入り登録が可能です。
</div>
</foreignObject>
</g>
<!-- 利用方法3 -->
<g transform="translate(140, 1050)">
<circle cx="25" cy="25" r="25" fill="#2196B9" />
<text x="25" y="35" font-family="sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">3</text>
<text x="70" y="30" font-family="sans-serif" font-size="18" font-weight="bold" fill="#333">予約を登録</text>
<foreignObject x="70" y="40" width="550" height="80">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: sans-serif; font-size: 14px; line-height: 1.5; color: #333;">
診療希望日を選択し、必要事項を入力して予約を確定してください。予約内容の変更やキャンセルも簡単に行えます。詳細な使用方法はこちらに記載がございます。
</div>
</foreignObject>
</g>
<!-- 太陽アイコン -->
<g transform="translate(660, 1020)">
<circle cx="40" cy="40" r="30" fill="#EF7C1B" />
<g>
<path d="M40,0 L40,15 M40,65 L40,80 M0,40 L15,40 M65,40 L80,40 M11,11 L22,22 M58,58 L69,69 M11,69 L22,58 M58,22 L69,11" stroke="#EF7C1B" stroke-width="4" />
</g>
</g>
<!-- おすすめの方セクション -->
<text x="120" y="1130" font-family="sans-serif" font-size="22" font-weight="bold" fill="#E84518">こんな方におすすめです！</text>
<!-- リサイクルマークアイコン -->
<g transform="translate(670, 1140)">
<path d="M25,0 L50,15 L25,30 L0,15 Z" fill="#2196B9" />
<path d="M25,10 L40,20 L25,30 L10,20 Z" fill="#f9f7f2" />
</g>
<!-- おすすめリスト -->
<g transform="translate(140, 1140)">
<foreignObject x="0" y="10" width="550" height="100">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: sans-serif; font-size: 14px; line-height: 1.5; color: #333;">
• 忙しい毎日でクリニックに電話をする時間が取れない方<br/>
• 家族の診療スケジュールを一元管理したい方<br/>
• 待ち時間を少なくしたい方<br/>
当院に定期通院されている患者さんにはお勧めです。
</div>
</foreignObject>
</g>
<!-- 問い合わせ情報 -->
<rect x="100" y="1180" width="650" height="80" rx="5" fill="#f5f5f5" stroke="#dddddd" />
<text x="120" y="1200" font-family="sans-serif" font-size="16" font-weight="bold" fill="#2196B9">お問い合わせ</text>
<foreignObject x="120" y="1205" width="600" height="50">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: sans-serif; font-size: 12px; line-height: 1.5; color: #333;">
診療予約アプリの使い方やインストール方法についてご不明な点がありましたら、クリニック受付までお気軽にお問い合わせください。<br/>
当院では、患者様一人ひとりの健康を大切にし、安心してご利用いただける診療環境を整えています。この機会にぜひ診療予約アプリをご利用ください！
</div>
</foreignObject>
</svg>実行すると
上記のようになりますがこのままでは文字化けや段落も少し変です。またポスターとするには情報量も多いのでイラストレーターを使って手直しをします。
最終的には下記のポスターができあがりました。1時間くらいでできあがるので効率が良いですね。
AIの進歩はすごいですね。いろいろなツールを活用してよりよい診療ができるように頑張ります。
コメント