【開業医院長先生：いつでも引っ越せる、ホームページ】5️⃣「4回の反省：なぜHTML？ なぜ安全？ 本当に作り直せる？」

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

【前回はこちら】

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

前回の4回で、先生方の頭が、少し混ざったと思います。
僕の書き方が、足りませんでした。
今回は、その反省回です。

先生方の疑問は、たぶん4つです。
？なぜHTMLなのか。
？なぜ安全と言えるのか。
？できることが、少なくならないのか。
？書き出す作業は、本当に現実的なのか。

最後の疑問は、僕のクリニックのページで、実際に試しました。
結果は、ほぼ同じに、出来ました。
うれしい結果でした。

【疑問1：なぜ、HTMLなのでしょう】

HTMLは、ホームページを書くための、決まった文字の形です。
メモ帳で開けます。
パソコンやスマホの画面で、そのまま絵になります。

4回の例えを使います。
HTMLは、ふつうの段ボールです。
どの家にも、運べます。

特注の箱は、その会社の家にしか入りません。
だから、引っ越し先を選べる形として、HTMLを選びました。

「HTMLが一番」とは、言いません。
僕がいま使っている、一例です。

【疑問2：なぜ、安全と言えるのでしょう】

まず、お断りします。
「HTMLは、安全です」と、僕は言いません。
安全とは、言い切れないからです。

ただ、小さくできるものがあります。
入口です。

WordPressは、サーバーの中で、プログラムが動きます。
PHP（ピーエイチピー）という言葉を、お聞きになったと思います。
その穴が見つかると、サーバーの中まで入られます。
今回の連載のきっかけは、その穴でした。

HTMLだけのページは、違います。
プログラムは、見ている人の画面の中で動きます。
サーバーの中では、動きません。
入口が、小さくなります。

もう1つ、お伝えします。
入口が小さくなっても、ゼロにはなりません。
残る危険は、別の回で書きます。
鍵の守り方も、そこで書きます。

【疑問3：HTMLだと、できることが少ないのでは】

少なくありません。
僕は、HTMLでスライドも作っています。
ボタンも、リンクも、動きもあります。

「できること」と「安全」は、別の話です。
できることは、たくさんあります。
安全の話は、どこで動くか、でした。

【疑問4：文章や写真を書き出す、は現実的でしょうか】

3回と4回で、「文章を書き出す」「写真を取り出す」と書きました。
理屈では、できます。
でも、ホームページが何十ページもあれば、現実的ではありません。
ここは、僕の書き方が悪かったです。

いまはAIがあります。
先生のページを、AIが読めます。
文章も、色も、並び方も、読み取れます。
読み取ったものから、HTMLを組み立てられます。

だから、書き出す作業は、先生がしなくて大丈夫です。
本当に、そうなのか。
僕のページで、試してみました。

【試したこと】

僕のクリニックのページで、試しました。
ご自身のページです。
他の人のページは、試していません。
まねも、しません。

まず、本物のページです。

これを、AIに作り直してもらいます。
3回やりました。
1回目と2回目は、うまくいきませんでした。
その理由と、直したことを、順番に書きます。

【1回目：形だけ、真似てもらいました】

一目で、別物でした。

だめだった理由です。
部品が、ありませんでした。
色と形を、AIが見た目で真似て描いたからです。
写真は、ただの灰色でした。
ロゴは、文字で描いた、別のものでした。

直したことです。
本物の部品を、使うことにしました。

【2回目：写真とロゴを、本物にしました】

ぐっと近づきました。
写真とロゴは、本物です。

だめだった理由です。
文字やボタンの位置が、まだ目分量でした。
右のボタンと文字が、重なりました。
受付時間から下は、まだありませんでした。

つまずきも、ありました。
写真を保存するとき、Chromeが止めました。
1つ目は保存できて、2つ目から止まりました。
10個を1つにまとめて、保存し直しました。

直したことです。
本物のページから、位置、色、文字の大きさを、読み取ってもらいました。

【3回目：位置と色も、本物にしました】

ほぼ同じに、出来ました。（2回目との違いは一見分からないと思いますが）

院名、写真、ロゴ、色、文字の大きさ、並び方が、そろいました。
受付時間の表も、同じ並びです。
中身は、メモ帳で開ける文字です。
どの置き場所にも、持っていけます。

ここでも、つまずきがありました。
文字が重なって見えたので、重なりを消しました。
消しすぎて、文章が数行、消えました。
戻しました。

細かいところは、まだ直せます。
電話のアイコンと、地図のピンは、似たものを作ります。
写真が数秒ごとに切り替わる動きも、まだです。
文字の形も、本物の丸いゴシックと、少し違います。

「画素単位で、まったく同じ」と言える数字は、まだ測っていません。
いま言えるのは、「ほぼ同じに、出来ました」です。

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

プロンプトとは、AIへの頼み方の文章です。
僕がやった流れを、先生向けに言い直しました。
このまま打って、同じ結果になるとは、言い切れません。
AIの種類や、ページの作りで、変わります。

先生ご自身のホームページで、お試しください。
他の人のページは、試さないでください。

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

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

使い方のコツを、3つお伝えします。

1つ目です。
最初から完全を目指さなくて大丈夫です。
トップページだけ、先に作ってもらいます。

2つ目です。
似ていないときは、「色と形だけで描いていませんか」と聞きます。
本物の部品を使うように、頼み直せます。

3つ目です。
患者さんの情報は、使いません。

下を皆さんの使っているAIに投げてください