前編では、プログラミングやWebページの基本的な仕組みについて触れ、AIツールGoogle GeminiのCanvas機能を使って「Hello, World!」と表示するだけのシンプルなWebページを作成する体験をしました。
HTMLがページの「骨組み」を、CSSが「見た目」を担うことをご理解いただけたかと思います。
この後編では、さらに実践的なWebページ作成に挑戦し、AIとの共同作業を深掘りしていきます。
具体的には、より複雑なデザインのページ作成、Webページに「動き」をつけるJavaScriptの役割、そしてCanvasならではの便利な編集・学習機能の活用方法を学びます。
最後に、AI体験を終えた後の次のステップについてもご紹介します。
Webページは、主に以下の3つの言語で構成されています。
- HTML: Webページの骨組みや構造を作ります。テキストや画像、ボタンなどの要素を配置する役割です。
- CSS: HTMLで作られた要素の見た目をデザインします。色やサイズ、配置、装飾などを指定する役割です。
- JavaScript: Webページに動きや対話の要素を追加します。ユーザーの操作に応じた変化や、時間による変化などを実現する役割です。
これら3つの言語が組み合わさることで、私たちが普段見ているような多様なWebページが作られています。
AIにもっと複雑なデザインのページをお願いしてみましょう！「新作ゲーム紹介」ページ
シンプルなページで基本をご理解いただけたかと思います。
次に、もう少しだけ複雑で、皆さんの興味を引くようなWebページ作成に挑戦してみましょう。
例として、「新作ゲームの紹介ページ」をAIに作成してもらうことに挑戦します。
入れたい要素を具体的に考えると、AIへの指示（プロンプト）が明確になります。
ゲーム紹介ページに必要な情報例：
- ゲームタイトル
- ジャンル、発売日
- 簡単なあらすじ、見どころ
- スクリーンショット表示エリア
- 公式サイトへのリンクボタン
プロンプト例
新作ゲーム「フューチャー・クエスト」の紹介Webページのデザインとコードを作成してください。青基調のシンプルでクールなデザインでお願いします。
以下の要素を含めてください。
ゲームタイトル
ジャンル、発売日
簡単なあらすじ、見どころ
スクリーンショット表示エリア
公式サイトへのリンクボタン
私の場合、次のようなページが生成されました。
AIが生成するコードは毎回のように違うので、皆さんは全く違う見た目になったかもしれません。
AIが生成したデザインとコードをご覧ください。
HTMLはページの「骨組み」を、CSSは「見た目」を整える役割を担っています。
CSSはおそらく、タグの中のタグに書かれていると思います。
CSSの例
<style>
.section-title {
border-bottom: 2px solid #00bcd4; /* ネオンブルーのボーダー */
padding-bottom: 12px; /* パディングを増やす */
margin-bottom: 32px; /* マージンを増やす */
text-transform: uppercase; /* 大文字に */
letter-spacing: 2px; /* 文字間隔を広げる */
}
.....コード量が増えていますが、全てを理解せずとも「こういうタグや記述で要素が構成されているのだな」と掴むことから始めましょう。
わからない個所があれば、選択してAIに聞いてみましょう。
例えば、background-colorとcolorの違いについて知りたい場合、その部分をマウスで選択し、「background-colorとcolorの違いは？」のように聞いてみます。
すると、次のように答えてくれました
background-colorとcolorの違いについて説明します。
background-color: これは、その要素の背景の色を指定します。選択されたコードではbodyに適用されているので、ウェブページ全体の背景色が深いダークブルー（#0d1a2e）になります。color: これは、その要素内のテキストの色を指定します。選択されたコードではbodyに適用されているので、特に他の色が指定されていない限り、ウェブページ全体のテキストの色がやや落ち着いた明るいカラー（#c5d8e4）になります。
このように、コードの理解できない箇所があれば、その部分をピンポイントでAIに質問し、解説を得られる点がCanvasの大きな強みと言えます。
AIに「動き」のある機能をお願いしてみよう！画像自動切り替え（カルーセル） そしてJavaScriptとは
Webページに動きを追加するには、JavaScriptという言語を使用します。HTMLが「骨組み」、CSSが「見た目」、JavaScriptが「動き」を担当します。
ゲーム紹介ページに、スクリーンショットが自動で切り替わるギャラリー機能（カルーセル）を追加してみましょう。
プロンプト例
ゲーム紹介ページに、スクリーンショットが自動で切り替わるギャラリー機能（カルーセル）を追加してください。画像は仮で良いです。
AIがコードを更新し、JavaScriptが追加されました。
プレビューで画像が切り替わるかご確認ください。
JavaScriptとは
Webページに動きや対話の要素を追加するためのプログラミング言語です。
例えば、ボタンをクリックしたときに何かを表示したり、画像が自動で切り替わるようにしたり、入力フォームの内容に応じて表示を変えたりといった、ユーザーの操作に応じた変化や時間による変化などを実現できます。
HTMLとCSSで作られたページに、生命を吹き込むような役割を担っています。
JavaScriptは私の場合、タグの中のタグに書かれていました。
少し触ってみましょう！
JavaScriptを眺めると、次のような記述がありました。
// 自動スライド機能
setInterval(() => {
showImage(currentIndex + 1);
}, 5000); // 5秒ごとに切り替え (調整可能)
この部分はおそらく、画像の自動切り替え間隔を制御していると思われます。
「5000」という数値はミリ秒（5秒）を示しています。
この「5000」を「2000」に変更してみましょう。
コードを書き換えると、プレビュー画面がすぐに更新され、スクリーンショットが2秒ごとに切り替わるようになりました！
このように、HTMLやCSSだけでなく、JavaScriptの変更も即座にプレビューで確認できるため、コードがWebページの動きにどう影響するかをすぐに理解できます。
Canvasのこの機能は、とても便利ですね！
AIとの共同作業から次のステップへ：もっとWebページを深く知るには？
AI（Gemini Canvas）でWebページ作成の楽しさを体験できました。
コードを書かずにデザインしたり、たたき台を作成したり、簡単な動きを追加したり、コード編集や質問をしたり。
これはプログラミングへの良い第一歩です。
しかし、AIには限界もあります。
複雑なユーザー操作やサーバー側の処理、高度なセキュリティなどが必要な場合は、AIだけではまだまだ難しいのが現状です。
また、AI任せではご自身のオリジナリティや改善力は身につきにくいです。
ご自身のアイデアを形にし、Webサイトを自由に操るには、HTML、CSS、JavaScriptといった基本言語を体系的に学ぶことが重要です。
Canvasでの経験は、これらの学習の大きな助けとなるでしょう。
ご自身でコードを書けるようになれば、AIを優秀なアシスタントとしてさらに効果的に活用できます。
本格的にプログラミングを学ぶ道
AI体験を通じてプログラミングに興味を持たれたら、次は本格的な学習に挑戦することをおすすめします。Web開発の基本はHTML、CSS、JavaScriptです。
主な学習方法
- 書籍で学習: 基本文法をじっくり学びたい方向け。ご自身のペースで進められますが、疑問点の解消が難しい場合があります。
- オンライン学習サイト: 動画や実践形式で楽しく学べます。多くのサービスがあり、初心者向けも豊富です。モチベーション維持が課題となることもあります。
- プログラミングスクール: 短期間で集中的に学びたい方、プロを目指したい方向け。現役講師の指導や就職サポートが受けられます。費用はかかりますが、効率的に実践スキルを習得できます。
学習の選択肢にどのようなものがあるか、記事を書きましたのでぜひご覧ください。
まとめ
AIツール「Gemini Canvas」を使ったWebページ作成体験、お疲れ様でした。
コードをほとんど書かずに作成し、AI生成コードの編集や質問を通じて、Webページがコードでできていることを実感いただけたかと思います。
HTML（骨組み）、CSS（見た目）、JavaScript（動き）というWebページの主要言語の役割に触れ、Canvasのリアルタイムプレビューや質問機能の便利さを体験しました。
Gemini Canvasは、プログラミング学習のハードルを下げる素晴らしいツールです。
AIとの対話を通じて作成の楽しさを知り、コードに触れることで理解を深められます。
AIは強力なツールですが、最終的にアイデアを形にするのはご自身の力です。
今回の体験でプログラミングに面白さを感じたら、ぜひ学習を続けてみてください。
基本的な仕組みを理解し、簡単なコードを書けるようになることを目指しましょう。
今回のAIとの体験が、皆さんにとってWebプログラミング学習のきっかけになれば幸いです。
コメント