【開業医院長先生：いつでも引っ越せる、ホームページ】8️⃣「HTMLとCSSで、危険を避けて作る」

※この記事は、パソコンが苦手な先生のために、いちばんやさしく書いています。
※むずかしい言葉は、初めて出たとき、すぐ横で、そえ書きします。

【前回はこちら】

【先に、結論をお伝えします】

前回、「次回は、サーバーに置く話です」と書きました。
ごめんなさい、1つ順番を足します。
置く前に、置くページを、危険を避けて作ります。
置くのは、9回と10回です。

今回は、架空の医院の案内ページを、1枚作りました。
7回で書いた危険を、はじめから入れない作り方です。
作ったあと、本当に入っていないか、確かめました。

結果は、気にしていた部品が、1つもありませんでした。

見た目が、いかにもAIっぽかったので、見かけだけ、作り直してもらいました。
中身は、1文字も変えずにです。
最後は、アパレルのお店のようなページになりました。

【作ったのは、架空の医院です】

医院の名前は、「あおば眼科（架空）」です。
練習用の、架空の医院です。

ページのいちばん上に、こう書きました。
「これは練習用の架空の医院です。実在の医院ではありません。」

本物のクリニックの写しにしなかったのは、理由があります。
ネットに置くと、誰でも見られます。
患者さんが、本物と間違えるといけません。

住所も電話番号も、架空のものにしました。

【作るときの、頼み方】

「練習用に、架空の眼科医院の案内ページを、1ページ作ってください。
これもHTMLとCSSで作って」を基本にしながらこれまで学んだことを入れながらAIに頼んで下さい

＊私のサンプルは記事の下部にお示しします（これはプロレベルではなくTPPIレベルですが）

【できあがったページ】

パソコンで見た画面です。

スマホで見た画面です。

ファイルは、2つだけです。
中身の index.html と、見かけの style.css です。
6回で書いた、分けて持つ形です。

いちばん上の「目のことを、むりなく相談できる場所に。」は、ふわっと出てきます。
この動きは、CSSだけで作りました。
JavaScriptは、使っていません。

【本当に、入っていないか確かめました】

作ったあと、確かめました。

AIに頼むときは、7回の見直しの頼み方が使えます。

【正直、AIっぽいなと思いました】

できあがったページを見て、正直に思いました。
あまりに、AIっぽいな、と。

真ん中にそろえた、大きな見出し。
うすい緑の帯。
角の丸い、同じ形の箱が、4つ並ぶ。
どこかで見たような、整いすぎた顔です。

危険は、入っていません。
でも、先生の医院の顔としては、さみしい気がしました。

ここで、6回の話が、生きてきます。
見かけは、CSSに分けてあります。
だから、見かけだけ、作り直せます。

【1回目の書き換え：変わった気がしませんでした】

最初は、控えめに頼みました。
「町の医院らしい、落ち着いた、手づくりの感じに」です。

紙のような色になりました。
文字も、左にそろいました。

でも、見比べると、変わった気がしませんでした。
きれいにはなりました。
ただ、「別のページになった」という驚きが、ありません。

これでは、見かけを分ける良さが、伝わりません。
思い切って、頼み直しました。

【2回目の書き換え：アパレル風に、思い切って】

・中身（index.html）は、1文字も変えないでください。

・見かけ（style.css）だけを、思い切って書き換えてください。
アパレルのブランドサイトのような見かけにしてください。
（具体的に先生のお好みのメッセージに入れ替えてもらって、もっと具体的に詳細に書いてください）

＊私のサンプルは記事の下部にお示しします（これはプロレベルではなくTPPIレベルですが）

できあがりです。

スマホで見た画面です。

3つを、並べてみます。
左から、最初の見かけ、1回目の書き換え、2回目の書き換えです。

同じ中身です。
変えたのは、見かけの指示書（CSS）だけです。
ここまで変わると、「変わった」と、はっきり分かります。

正直に書くと、医療機関らしくは、ありません。
これは、変えられることを見せるための、極端な例です。
先生の医院に合う形は、このあいだの、どこかにあると思います。

もう1つ、正直に書きます。
スマホでは、上のメニューが隠れました。
これも、見かけの直しだけで出せます。
今回は、そのままにしています。

【中身は、本当に変わっていないか】

ここも、確かめました。

書き換える前と後の index.html を、AIに見比べてもらいました。
2つのファイルの、違う所を探してもらうやり方です。

結果は、「違いはありません」でした。
3つの見かけとも、中身は同じでした。

先生も、同じように確かめられます。
2つのファイルを、AIに渡して、こう頼みます。

2つのファイルを、見比べてください。

・1つ目：書き換える前の index.html
・2つ目：書き換えた後の index.html

違う所があれば、すべて一覧で教えてください。
違いがなければ、「違いはありません」と答えてください。
どちらのファイルも、書き換えないでください。

【例えると、お弁当です】

WordPressのページは、注文が入るたびに、厨房で作る料理に似ています。
厨房が、サーバーです。
厨房に入られると、困ります。

今回のページは、詰め終わったお弁当です。
ふたを開けて、見るだけです。
中身は、もう決まっています。

今回やったのは、お弁当の包みを、替えたことです。
おかずは、そのままです。

だから、置き場所は、お弁当を並べておく棚で足ります。
厨房は、要りません。

【つまずいたところ】

つまずきは、ほかにも2つありました。

1つ目です。
最初の見かけで、お問い合わせの見出しの横の線だけ、左の端に残りました。
CSSに1行足して、直しました。

2つ目です。
スマホでは、診療時間の表が、画面からはみ出しました。
表だけ、指で横にずらして見られる形にしています。
曜日が7つあるので、今回は、このままにしました。

どちらも、見かけの指示書（CSS）だけの直しです。
中身（HTML）は、さわっていません。

【練習は、1つだけです】

できたら、2つのファイル（HTMLとCSS)を、同じフォルダに保存します。
index.html を、ダブルクリックで開きます。

開けたら、成功です。
開けなくても、大丈夫です。
どこで止まったかが、収穫です。

余裕があれば、見かけを変える頼み方も、試してみてください。
コツは、思い切った言葉で頼むことです。
控えめに頼むと、控えめにしか変わりません。

HTMLを作るところは、前の連載にも書いています。

【次回は】

次回は、このお弁当を置く棚を、選ぶ話です。
Cloudflare、Firebase、Vercel を、比べます。

【今日のひとこと】

最後に、余談を1つ。

アパレル風のページを見て、少し笑ってしまいました。
同じ診療時間の表が、急におしゃれに見えたからです。
服は、着る人を変えないのに、印象は変えるようです。

むりなく、安心して、少しずつ。

【こんなプロンプトで、できます】

大切なことは完璧に同じではなく、AIとの連携で移行することが簡単に出来るという実感をしていただくことです。

ご自身のAIに相談していただけると良いと思いますが、私が行ったプロンプトを参考に書いておきます。（本当はご自身で練習してほしいので有料にしておきます。しかし、これが完全なものではない点はご了承下さい）

このまま打って、同じ結果になるとは、言い切れません。