毎日の作業からクリエイティブワークまで、Macで生成AIを使いこなす方法を解説する連載「Macで速攻!AI活用テク」。今回のテーマは「Gemini Canvasを使いこなそう」です。
※この記事は『Mac Fan』2026年2月号に掲載されたものを、一部編集したものです。
Apple(アップル)
¥119,800 (2026/07/24 12:35時点 | Amazon調べ)
ポチップ
Gemini Canvasなら、web制作がグッと楽になる
「Webサイトの完成イメージを伝えたいけれど、言葉だけでは限界がある」。そんなもどかしさを解消するのが、Geminiの「Canvas」機能です。これは通常のモードとは異なり、画面を左右に分割して作業できるのが最大の特徴。
左側でAIと対話しながら、右側で生成されたHTMLやCSSなどのコードを、プレビュー画面付きで直接編集できます。特にWeb制作の現場では、デザイナーへの発注時に「実際に動作するサンプル」として共有できるため、こちらの意図が誤解なく伝わります。
また、アイデアや企画をあえてWebページにして共有するのも面白い活用法。視覚的に整った資料として、直感的に情報を届けられます。ただし、共有リンクは公開設定となるため、機密情報の扱いには十分注意してください。
- 【開発】
- 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/07/24 12:35時点 | Amazon調べ)
ポチップ
井上晃
スマートフォン・タブレット・スマートウォッチなど、最新ガジェットやITサービスについて取材。Webメディアや雑誌で、速報やレビュー、コラムなどを執筆している。新製品やサービスのレビュー、比較検証記事の執筆本数は年間100本以上。
この著者の記事一覧