あおば歯科クリニック

【プロジェクトの背景】

日々の制作の中で、「AIはコードを書けるけれど、"伝え方の設計"まではできるのだろうか」という問いが生まれました。

Webサイトには必ず「届けたい相手」がいます。歯科クリニックのサイトであれば、お子さまの歯医者嫌いに悩むお母さん、痛みが怖くて通院をためらっている方。そういった方々の不安をどう和らげ、「ここなら大丈夫そうだ」と思っていただけるか——それは技術だけでは解決できない、制作者の思想の領域です。

このプロジェクトでは、「育つ」というあおば（青葉）の言葉に込めた設計言語を起点に、ターゲットの心理に寄り添った構成設計・情報の見せ方・トーンのすべてを私が定義しました。コードや画像の生成はAIに委ねつつ、サイトの"意志"は人間がつくるという考え方を実践しています。

【担当業務】

• デザイン作成
• サイト作成

【制作年月】

2026年3月

【工夫したポイント】

■ AIへの指示設計そのものを「制作スキル」として捉えました
単に「歯科サイトをつくって」と指示するのではなく、ターゲットの心理状態、伝えるべきメッセージの優先順位、デザインのトンマナ、セクションごとの役割を言語化し、Claude Codeに設計意図ごと渡しました。AIが出力する品質は、渡す思想の解像度で決まるということを、このプロジェクトで確認しています。

■「不安を解消する順番」で情報を設計しました
サイトを訪れる方の多くは、何かしらの不安を抱えています。そこで、ヒーローセクションで「怖くない歯医者であること」を最初に伝え、実績数値で信頼を補強し、診療案内で具体的な内容を見せ、選ばれる理由で安心を深め、患者さまの声で背中を押す——という流れを組み立てました。「読み進めるうちに不安が和らいでいく」構成を意識しています。

■ 画像生成プロンプトにも設計思想を反映しました
生成AIで画像をつくる際、ただ「歯科医院の写真」と指示するのではなく、各画像の用途・アスペクト比・伝えるべき感情まで細かく定義しました。たとえばヒーロー画像は「子どもの目線から見た、しゃがんでくれる優しい歯科医師」というシーンを指定し、サイトを開いた瞬間に安心感が伝わるようにしています。すべての画像に共通のスタイル指示（暖色系の自然光、木のアクセント、穏やかな表情）を設け、サイト全体のトーンを統一しました。

■ 構造化データやアクセシビリティにも配慮しました
見た目のデザインだけでなく、構造化データ（LocalBusiness・FAQPage）の設計、スキップリンク、aria属性、noscript対応など、ユーザーにも検索エンジンにも正しく情報が届く設計を行いました。こうした「見えない部分の品質」も、AIへの指示に含めることで実現しています。

■「育つ」という設計言語をサイト全体に通しました
クリニック名の「あおば（青葉）」から「育つ」という設計言語を導き出し、色彩（グリーン・クリーム・ウォームトーン）、葉のモチーフ、子どもの成長に寄り添うコピー、やわらかい余白感のすべてにこの思想を反映しました。一つひとつのパーツではなく、サイト全体が一つの世界観でつながっている状態を目指しています。