Mac業界の最新動向はもちろん、読者の皆様にいち早くお伝えしたい重要な情報、
日々の取材活動や編集作業を通して感じた雑感などを読みやすいスタイルで提供します。

Mac Fan メールマガジン

掲載日:

生成AIでWebページを作成! Gemini Canvasなら完成形を共有できる/Macで速攻!AI活用テク

著者: 井上晃

本ページはアフィリエイト広告を利用しています

生成AIでWebページを作成! Gemini Canvasなら完成形を共有できる/Macで速攻!AI活用テク

毎日の作業からクリエイティブワークまで、Macで生成AIを使いこなす方法を解説する連載「Macで速攻!AI活用テク」。今回のテーマは「Gemini Canvasを使いこなそう」です。

※この記事は『Mac Fan』2026年2月号に掲載されたものを、一部編集したものです。

Gemini Canvasなら、web制作がグッと楽になる

「Webサイトの完成イメージを伝えたいけれど、言葉だけでは限界がある」。そんなもどかしさを解消するのが、Geminiの「Canvas」機能です。これは通常のモードとは異なり、画面を左右に分割して作業できるのが最大の特徴。

左側でAIと対話しながら、右側で生成されたHTMLやCSSなどのコードを、プレビュー画面付きで直接編集できます。特にWeb制作の現場では、デザイナーへの発注時に「実際に動作するサンプル」として共有できるため、こちらの意図が誤解なく伝わります。

また、アイデアや企画をあえてWebページにして共有するのも面白い活用法。視覚的に整った資料として、直感的に情報を届けられます。ただし、共有リンクは公開設定となるため、機密情報の扱いには十分注意してください。

Gemini

【開発】
Google
【価格】
無料/有料版は月額2900円から
【備考】

https://gemini.google.com/

Gemini Canvasで動くwebページを作る方法

①プロンプトボックスにある[ツール]をクリックして、[Canvas]を選択。例として、「Gemini Canvasの使い方を3つのポイントで解説するWebページを作成してください」と指示してみます。

プロンプト

Gemini Canvasの使い方を3つのポイントで解説するWebページを作成してください。

②すると、画面の左側にAIとのチャット、右側に生成されたWebサイトのモックアップやコードが表示されます。チャットで追加の指示を送ったり、コードを直接編集したりして、内容を自由に調整できます。
③作成したWebサイトを誰かに見せたいときは、右上にある[共有]アイコンをクリックし、メニューから[共有]を選択しましょう。
④公開用のリンクが生成されます。[リンクをコピー]をクリックして、メールやメッセージで相手に送りましょう。なお、URLを知っていれば誰でもアクセスできる状態になるため、取り扱いには注意が必要です。
⑤共有リンクにiPhoneの「Safari」からアクセスした画面です。Web制作時のイメージ共有だけでなく、企画書をWebページ化して共有する手段にも役立ちます。
Apple(アップル)
¥10,800 (2026/06/05 11:35時点 | Amazon調べ)




おすすめの記事

著者プロフィール

井上晃

井上晃

スマートフォン・タブレット・スマートウォッチなど、最新ガジェットやITサービスについて取材。Webメディアや雑誌で、速報やレビュー、コラムなどを執筆している。新製品やサービスのレビュー、比較検証記事の執筆本数は年間100本以上。

この著者の記事一覧

×
×