CanvasでWebページを作る

自分のWebサイト（ホームページ）を持ってみたいと思いませんか。

Webページの制作は結構大変ですが、ネット上に参考になるWebページがあったら真似して（テンプレートとして）、GeminiのCanvas機能を使って簡単に作る方法があります。

完成したWebページはHTMLコードで記述されています。このHTMLコードをコピーしてWebページ制作アプリ上に埋め込んで公開すれば完成です。

アプリは無料の「 Googleサイト」を使いました。有償では「WordPress - Webサイトビルダー」が人気のようです。

テンプレートをベースにWebページを設計

ネットで見つけたお好みのデザイン

スクリーンショットはGoFullPageを使用

ヘッダー画像：ハワイの月夜のイメージにする
タイトル：「千葉市稲毛区フラダンス教室」

場所名は：千葉市稲毛区にあるフラダンス教室

踊りの写真：教室の練習風景に置き換える

できれば動画（MP4）で

教室について

2025年、千葉市稲毛区の浅間神社裏手の稲毛公民館で毎週火・木曜日に開講しているフラダンス教室です。

難しそうと躊躇している方も、
再度フラを始めようとしている方も、
小さなお子様からシニア層まで、みんなで楽しく踊る事をモットーにしています。

「２つの場所から教室を選べます」は削除

替わりに教室の経路図と施設の写真を入る

263-0034 千葉市稲毛区稲毛1丁目10-17稲毛公民館

特徴 → デザインそのままで写真を替える

News & Informationは随時更新されるので自動生成は行わない。

Webページ制作アプリ側で作る。

ABOUT US は削除して問合せ先電話番号だけ記入する。

GoFullPageは、Webぺージ全体のスクリーンショットを簡単に撮影できるChrome拡張機能です。スクリーンショットを撮りたいウェブページを開き、拡張機能アイコンをクリックすると、キャプチャされた画像は、新しいタブで表示され、編集やPNG/PDF形式での保存が可能です。

Canvasを使ってWebページを作る

分析プロセス

千葉市稲毛区のフラダンス教室のウェブページをGoogleサイトの構成案として作成します。添付いただいた画像のレイアウトを参考に、以下の内容を盛り込みます。

千葉市稲毛区フラダンス教室 Googleサイト構成案

7月27日 8:03

Canvas なしで再試行

この構成案は、Googleサイトの基本的な機能（テキストブロック、画像、ボタン、埋め込み、お知らせなど）で実現可能です。特に、稲毛公民館の場所を示すGoogleマップの埋め込みや、お問い合わせフォームの設置を推奨します。

思考プロセス

承知いたしました。ご提示いただいた構成案を基に、専門的な知見を活かして、魅力的で使いやすいシングルページのウェブサイト（SPA）を作成します。

このウェブサイトは、フラダンス教室の温かく、穏やかな雰囲気を表現するために、温かみのある中間色を基調とした落ち着いたデザインを採用します。訪問者が教室の情報を簡単に見つけ、体験レッスンに申し込みたくなるような、直感的でインタラクティブな構成にしました。

以下のHTMLコードをコピーして、ファイルに保存し、ブラウザで開いてご確認ください。

あなたはWebデザイナーです。添付したWebページのキャプチャの構成を生かしてGoogleサイトを使った新しいWebページを作って下さい。

・タイトルは**千葉市稲毛区フラダンス教室**です。

・教室は**稲毛公民館**一か所です。

・住所：263-0034 千葉市稲毛区稲毛1丁目10-17

Webページにする前の構成案が表示されるのでここで全体的な修正や○○の穴埋め、削除/追加を行う。

修正・削除・追加が終わったら画面右上の［作成］をクリックして［ウェブページ］を選択します。

生成されたWebページのHTMLコードが表示されます。

隣の「プレビュー］をクリックます。

Webページに画像を入れる

①　HTMLコードを表示して画像を置き換える場所を確認します。

<!DOCTYPE html>

<head>

<title>千葉市稲毛区フラダンス教室</title>

・

</section>

<h2 class="font-display text-3xl text-[#5F9EA0] mb-4">あなたもフラダンスを始めてみませんか？</h2>

ハワイの美しい音楽に身をゆだね、心と体を解放するフラダンス。

初心者の方から経験者の方まで、一人ひとりのレベルに合わせて丁寧に指導します。

日常を忘れ、自分と向き合う穏やかな時間を過ごしましょう。

</p>

</section>

・

<h2 class="font-display text-3xl text-center text-[#5F9EA0] mb-8">ギャラリー</h2>

<p class="text-center text-gray-600 mb-6">レッスンの雰囲気や仲間たちの笑顔をご覧ください。</p>

</div>

</section>

・

});

</script>

</body>

</html>

②　画像（PNG/JPEG）や動画（MP4）を用意してGoogleドライブにアップロードして、Webページから参照できるように共有指定をします。

アップロードする

共有を選択する

共有は「リンクを知っている人全員」にする。［保存］すると設定が反映されます。

③　HTMLコードを修正する

リンクをコピーしてファイルIDが分かったら、HTMLコードのIMG文のURLに変換します。

［リンクをコピー］したURL（赤字がファイルID）

https://drive.google.com/file/d/1XPL4IvoWFkDC4pzHbwUXFLn1Gkyt7ME4/view?usp=drive_link

HTMLコードのIMG文で使うURLに変換する。szは幅×高さの指定なので適時調整する。

https://drive.google.com/thumbnail?id=1XPL4IvoWFkDC4pzHbwUXFLn1Gkyt7ME4&sz=s400x100

④　HTMLコードを置き換える

Webページに張り付けて公開する

①　修正済みのHTMLコードをコピーする

②　Googleサイトの＜埋め込む＞でHTMLコードを貼り付けたら公開する

③　公開されたWebページを見る

Webページを開く

Page updated

Google Sites

Report abuse