Transcription
どうも、フリーランス育成コ知の都市です。今日はジェニ2.5Proをウェブサイト制作で活用する方法を徹底解説します。
2025年の6月現在、様々なAIを比較するチャットボットアリーナで、ジェミ2.5Proは全AIの総合能力ともにダントツ1位、無料のジェニ2.5フラッシュですら2位です。有料プランのChatGPT4は3位。現状最強と断言できるAIジェミ2.5Proのキャンバス機能、ディープリサーチ機能などから、サイト制作に必要なコーディング、ワイヤーフレーム作成、デザイン作成、画像生成、動画生成、そしてコーディングを全くやらずに作れるサイト作成、グラフページ作成、テスト作成、対談音声作成、フィグマへのデザイン範囲映まで完全保存版で実践します。この動画1本でジェニーの実用的な知識とテクニックが全て手に入ります。また、動画内で使うプロンプトも全てプレゼントします。受け取り方法も動画内でお話しするので、是非最後までご覧くださいね。では、実際の画面で話します。
これがジェニーです。でもGoogleのAIって、ジェニーとGoogle AIスタジオとか色々あってよくわからないという声も聞きますが、何が違うのって思いますよね。こちらが違いをよく聞かれるGoogle AIスタジオなんですが、結論、ウェブサイト制作が目的ならば基本的にはこちらのジェニーのWebアプリケーション版でオッケーです。こちらのジェミニは一般ユーザー向けのサービスで月額で使えます。Google AIスタジオはアプリ開発などをしたい開発者向けのサービスで、APIを使った分だけ課金される従量課金制です。もちろんAIスタジオには複数画像の同時生成や動画の作成機能など、無料で使える便利な機能もたくさんあります。ただ、業務効率化をWeb制作なら基本のジェニーを使いこなすことが重要です。今回解説するジェミ2.5Proは基本は月額有料なんですが、無料でも使えます。利用制限の縛りがありますが、時間を置けば解除されますし、先ほどのチャットボットアリーナで全AI2位のジェミニ2.5フラッシュでも同様の機能が使えるので、まだ有料版にしてないよっていう場合でも参考になるので是非見てくださいね。ちなみにWebアプリケーションのドメインでUと4だったりUと0という数字が出てるんですけど、これは複数のGoogleアカウントを持ってる方がいると思うんですけど、その何個目のアカウントでログインしてるかというのを表してるものとなります。ユーザーナンバーですね。基本的には同じなので気にしなくてオッケーです。
まず最初に基本設定ですが、左下の設定とヘルプを押してください。ここでアプリというのを選ぶと、普段使っているお気に入りのアプリとジェミニを連動することができます。GmailとかGoogleカレンダーとかGoogleフォト、GoogleドライブとかYouTubeとか色々ありますので、普段よく自分が使うアプリがあれば連動しておくことをお勧めします。連動すると過去の自分の情報だったりGoogleドライブやGoogleドキュメントの情報をジェミニ上でまとめることもできます。僕は現状全部連動してますね。使いたいものがあれば連動しておきましょう。試しに以前に予約をした旅行の一覧を出してみます。「2024年と2025年の旅行の予約をGmailから調べて一覧にまとめて」と指示を出します。そうするとワークスペースを接続してこのアカウントの過去の情報を調べてくれます。はい。2024年と2025年で予約した旅行を一覧で出してくれました。このGoogleアカウントのGmailに来たもののみしてくれてますね。別のGoogleアカウントで予約したものは出ないですが便利ですよね。普段からGmail、Googleドキュメント、Googleドライブとか使ってる人にはかなり便利なので是非覚えておいてください。
では、画像1枚から再現する爆速コーディング術をお見せしていきます。この後コーディングは一切分からないけどサイト作成したいという人にも驚きの話をしてくんですが、コーディングは元々、デザイン、つまり作る予定のサイトのデザインを見ながら、こんな感じの呪文のようなコードを書いてウェブサイトを形にしてくのが数年前の常識でした。未来から送られてきたデザイン案を見て、「うわ、これ全部手作業でやるのか」って絶望するのは今日で終わりです。ジェミニを使えば、参考サイトやデザインのPNG画像やPDFを読み込ませるだけで、一瞬でコーディングを終わらせることができます。それでは今回は例として僕が運営するWeb制作スクールのサイトのスクリーンショット画像を使ってみます。こちらのページを再現していきます。まずスクショの取り方なんですが、GoというGoogleの拡張機能を使います。この拡張機能をChromeに追加して、このGo full pageのアイコンをクリックします。そうするとスクショを取ることができます。はい、これで取れましたね。はい、それでは今撮ったスクショ画像をジェミニのチャット画面にドラッグ＆ドロップします。画像がアップロードできたら、ここのキャンバスボタンを押してください。キャンバスとはジェミニで生成したテキストやコードをそのままの画面上で修正や調整を行うことができる機能になります。これで作成したコードを視覚的に見ることができます。次はプロンプトをここにします。「このウェブサイトのデザインを再現するためのHTML、CSS、JavaScriptのコードを生成してください。ファイルは分けてください」送信してみます。はい、これだけです。さあ、見ててください。ジェミが一瞬でコードを書き始めてくれます。すごいスピードですよね。構造を示すHTML、デザインを整えるCSS、動きをつけるJavaScriptまでしっかり分けて生成してくれます。簡単な画像まで入れてくれましたね。ただ実際、これはファイルを分けて作ってくれてるので、このHTMLだけだとまだ装飾とかは全然されてないですね。通常はコードを分けてVSコードとかのコードエディターに入れないと比較視覚的に確認ができないです。でもせっかくならもうこの画面上で全部まとめて確認しちゃいたいですよね。なので次は「生成したHTML、CSS、JavaScriptのコードの表示を確認させてください」とプロンプトで入力します。そしてこれで送信をします。はい。そうするとHTML、CSS、JavaScript、1つにまとめたプレビュー用のコードを作成してくれます。これでブラウザで直接表示を確認することができます。どうでしょうか？いい感じで再現されてますね。はい、素晴らしいです。そして、ま、実際これ大きなサイズで見たい場合なんですけど、この共有っていうところを押すと共有可能になるので、ここを押してもらうと全面表示のウェブ上の表示も簡単に見ることができます。もちろん完璧でない部分はありますが、0から作るのと比べてどちらが早いっていうのはもう一目瞭然ですよね。なので、こういったコード、コーディングも全部再現してくれて一気に作ることができます。あとはこのコードベースに細かい部分を修正していくだけでコーディングの作業は9割完了すると言っても過言ではありません。で、こっから手作業なのって思うかもしれないですけど、そうではないです。手を動かすことなく限りなく参考サイトに近づけていく実際の修正方法もお見せします。
はい。どうやって修正していくかなんですけど、例えばこのグローバルメニューは少し少ないですよね。なので直し方としてはグローバルメニューをスクリーンショット、こうやって取りますね。そしてこのグローバルメニューをドラッグ＆ドロップします。そしてジェミニに指示を出します。「グローバルメニューを添付した画像参照に修正してください」はい。こんな感じで指示を出します。そうすると修正をしてくれます。はい。こんな感じで直してくれますね。ナビゲーションの項目も変更して新しいLINE無料相談申し込みのボタンに対応するスタイルも追加してくれたということです。で、こちらが修正後のプレビュー用コードですということです。はい、完了しました。今治りましたね。しっかりとアニメーションも含めて修正を完了してくれてます。素晴らしいですね。で、さらに大きな画面でも確認をしてみます。はい。いい感じで修正されてますね。元の参考サイトと比較してもかなり近づいてきたんじゃないかなと思います。こんな感じで修正したい箇所のスクショを貼って指示を出してみてください。
では次ですが、このセクションを直していきたいと思います。で、このセクションは、ま、3カラムになってますが、元のセクションだと4つカード枠があって、そして上に文章もありますね。こちらを再現していきたいと思います。で、これも同じようにスクリーンショット取っていきます。こういう風にスクショをドラッグ＆ドロップして、また修正指示を出します。この時なんですが、さっきと少しやり方を変えます。さっきみたいにスクショだけ貼って指示してもいいんですが、別の箇所とジェミニ側に勘違いで伝わってしまう可能性もあるので、この該当の箇所の表記を確認します。これで言うとこの特徴のセクションになります。なのでプロンプトは「特徴のセクションを添付した画像参照に再現して修正してください」と書きます。して修正を開始します。はい。こうやって直してくれますね。画像を元に特徴セクションを修正してくれて、以前の3つの特徴から画像に合わせて4つの項目に変更し、各項目に画像を追加してデザインを再現しましたとあります。ということで直してくれましたね。しっかり画像まで入れてくれてます。表示を確認してみます。はい、こんな感じですね。かなりいい感じなんじゃないでしょうか。はい、こちらが元のサイトで、こちらがジェミニで修正した箇所ですね。かなりいい感じですね。こちらも0から自分でコーディングすることを考えたら圧倒的に時短になると思います。サイト制作の途中経過はこの共有可能な公開リンクからクライアントに共有することもできるので、表示だけじゃなく進捗報告等にも是非使ってみてください。はい、こういった形で0から自分でコーディングするよりも圧倒的に早くサイトを構築していくことができます。で、あと画像も今回はめてくれてるんですけど、この画像はエラーになっていることもあるので、ここに関してははこの後にこういった画像を作成していく方法も伝えていきます。
そして続いての実践でもなんですが、こういった高品質な画像を無料で無限に生成する裏技を話していきます。ウェブサイト制作に欠かせないのがメインビジュアルなどの画像素材になりますよね。こういった画像をフリー素材で自分で探すのも時間がかかるので、これもAIでサクッと作れたら最高ではありますが、思ったような画像が出ないという悩みはありがちです。この画像生成に関してもジェミニともう1つ別のGoogleの無料AIを組み合わせることで全て解決できます。まず簡単な画像であればこのジェミニのチャット画面でそのまま生成できます。例えば「カフェで働く日本人女性」の画像を作って入力すればすぐに画像を生成してくれます。はい。こんな形ですぐに作ってくれます。この作ってくれた画像なんですが、この右下にAIって入ってたり、あと洋風とか和風とか狙ったものがうまく出てこなかったり、さらにこの必須の画像、複数の候補から選びたい場合というのもあると思います。そんな時に便利なのがGoogleが提供してるImagen FXという無料の画像生成AIになります。このImagen FX本当にクオリティが高い画像を生成してくれるんですが、1個だけ弱点があります。それは日本語のプロンプトを入力しようとするとこんな感じですぐにバグってしまうことがあります。じゃあ使えないじゃんって思っちゃうかもしれないんですけど、ここで再びジェミニの出番です。このImagen FXの弱点を克服する裏技がジェミニで日本語の指示を英語に翻訳してもらって、その英語プロンプトをImagenにコピーするという方法です。実際にやってみましょう。「マンション販売専門の不動産会社のコーポレートサイトのファーストビューに最適な画像を作成して」と余談ですけどジェミニは今みたいに音声入力も優れてるので、こういう風に音声で入力するとスムーズにできます。ちょっとだけを直してでこれが日本語の指示になるんですけど、「ここにこんな感じで以下のプロンプトを正確に再現できる日本語から英語に変換して」という指示を出します。そして実行すると、はい。一瞬で精度の高い英語のプロンプトが生成されましたね。こうやって直接的な翻訳だけじゃなくて、画像生成向けに最適化されたより詳細なプロンプトまで書いてくれました。いいですね。じゃあこれを使っていきましょう。では、こちらをコピーして、そして先ほどのImagenに貼り付けます。で、これ作成をします。はい。いい感じで作ってくれました。この中で4つの候補から選ぶことができます。そんな感じで文字を入れているものを作ってくれたりとか、文字なしバージョンですね。あとウェブサイトで使う時をイメージしてグローバルメニューまで入れてくれてるものまで作成してくれてますね。なので今回はこちらの特に何も入ってないもの使えるかなと思います。こんな形ですぐに好質な画像を作ることができます。是非やってみてください。
じゃあせっかくなんでもう1つやってみましょう。次は「Web制作スクールのホームページのファーストビューに使える画像を作成して、登場人物は日本人にしてください」という少し複雑な指示をしていきます。で、これも英語に書いてもらえるように指示を書きます。はい、では始めていきます。はい、すぐ作ってくれましたね。で、今回もより良い結果を得るための詳細バージョンっていうのも作ってくれました。またこの詳しく作ってくれた方を入力してみます。はい。で、作成。はい。早速作ってくれましたね。皆さん日本人で仲良く学んでいるような写真できてますね。で、これもうちょっと他のも見たいなっていうのであれば、この「More creation」っていうのをしてもらえると他のバージョンも作ることができますね。次は参考にしたいサイトの画像をジェミニに読み込ませて、イメージ通りの写真を作ってみます。まず画像をドロップして「この画像のような雰囲気の画像を生成するためのプロンプトを英語で作成して」とお願いすることもできます。しっかりと英語で作ってくれましたね。こうして出来上がったプロンプトをコピーします。そしてこのプロンプトをImagen FXに入れます。はい、できましたね。参考にしたいサイトのテイストに合わせたオリジナル画像をいくらでも作れてしまうということになります。今ご覧いただいてるようにこの機能を活用すれば、もう画像素材探し何時間も費やす必要はありません。この方法を使えば無料で無限に高品質な画像を思い通りに作り出すことができます。
そしてさらにすごいのが、今回作ったこの画像なんですが、これを動画にすることもできます。ホームページの中にはファーストビューに動画を入れているものもありますよね。なのでそれも作ってみきたいと思います。はい、じゃあまずこの動画をダウンロードしていきます。動画作成は無料版だとできないんですね。なので有料版を使っていればこちらで作ることもできます。無料版のままでも作りたいという人のための裏技をお伝えします。さっき少し紹介したGoogle AIスタジオで作成することができます。どれを選ぶかというと、この「Video」というのを選びます。今最新版V3まで出てるんですけど、AIスタジオだとBoが使えるんですね。はい、ではさっきの画像をアップロードします。で、指示は「この画像を空から撮影してゆっくり動きのある動画にして」と指示を出します。早速できましたね。じゃあどんな感じでしょう？おお。はい。すごいいい感じですね。なので、もちろんこういう風に動画を作るためには元々の画像が好品質であるという条件も必要なので、なのでさっきのような形で高品質な画像を作って、そしてその画像をGoogle AIスタジオで指示を出して動画にしてみると、こちらも是非やってみてください。
はい、続いて実践でも3、コーディング、デザイン、未経験でもオッケー。AIだけで要件定義からワイヤーフレーム作成する方法。ここまでですぐにあるデザインを再現したり画像を作ったりする方法でしたが、次は0から。しかもクライアントへの提案方法となるワイヤーフレームまでAIに作らせる方法をお伝えします。これには2つのパターンがあります。1つ目、雑な指示でとりあえず作ってもらうパターンと2つ目、しっかり指示して精度の高いものを作ってもらうパターンです。1の雑な指示は簡単です。例えばこんな風に「生態系のランディングページを作って」とキャンバスを押して依頼すれば、これだけでジェミニがある程度の構成を考えてコーディングをしてくれます。時間がない時にはこれだけでも十分です。はい、できましたね。はい。すごいですよね。さっきみたいな「ランディングページを作って」というだけでもこんなにあっさりと作ってくれます。これだけでも十分すごいですよね。そしてこれを実際の画面で確認をしてみます。多少ここの重なりとか気になりますけれども、たった1文入れただけでの作成と考えたらもう十分すぎるんじゃないでしょうか。特に簡単なアニメーションも入ってますしね。はい。すごいですよね。そしてコードも一瞬で書いてくれます。これだけでも十分すごいと思うかもしれないですが、僕が今回皆さんにお勧めしたいのはしっかり指示してクライアントを唸らせる提案をする方法です。今回お話しするほどの内容をしっかりと説明してる人っていないので超希少な話なんで是非しっかり聞いてください。こっから手順をお伝えします。
まず1つ目、ディープリサーチで競合調査。ここから入ってきます。まずジェミニのディープリサーチ機能を使います。はい。ディープリサーチ機能ですね。これをオンにします。このディープリサーチ機能は通常の検索よりも深く多角的に情報を集めてくれる機能です。ここにこう入力します。今回は生体員のサイトを作りたいので、ここにこのプロンプトを入れます。「神奈川県横浜市青葉区の生体員を10社調査して、それぞれの特徴、メニュー、料金、ターゲット層を分かりやすく表にまとめてください」これで指示を出していきます。そうするとリサーチをする流れを教えてくれます。で、もし修正したい場合はこちら「計画を編集」してもらって、で、このままでいいよであれば「リサーチを開始」を押すとスタートしてくれます。10社以上の候補をリストアップして、さらにそこからウェブサイト情報が充実していて、特徴を答えやすいものを選定して、各ウェブサイトにアクセスして各情報を抽出してくれるという流れになってます。じゃあこれで大丈夫なのでこちらで「リサーチを開始」していきます。どういう風に調査をしていくのか工程も出してくれます。このディープリサーチを実行すると、ジェミニがネット上の情報を網羅的に調査して総合の状況を完璧に整理してくれます。このディープリサーチを使えば、自分で1つ1つサイトを見て回る必要もなくなります。はい、リサーチが完了しました。詳細に調べてくれましたね。グラフの比較や特徴だったり、料金や主なターゲット層まで全部調べてくれてます。すごいですよね。これを相当細かくまとめてくれてます。もしこれをクライアントに提出したいだったりまとめたいということであれば、Googleドキュメントに落として提出するということもできます。各見出しごとにまとめてくれてるので非常に見やすい内容になっています。レポートという形で提出したいのであればこれでも十分かと思います。で、ぶっちゃけこれを全部読むのって大変ですよね。だからこそこの内容を要点をまとめてサクッと概要把握できる方法もお伝えしていきます。それをやりたいのであればここの「作成」というところを押してみてください。そうすると今回調べた内容をWebページだったり、グラフ情報が多いインフォグラフィックだったり、今回の内容をテストという形でクイズ形式で学べるような内容にしてくれることもできますし、しかもなんとですね、対談形式のラジオを作成するようなこともできます。本当にいろんな方法でこの内容をまとめることができます。じゃあ実際ちょっとそれぞれやってみましょうか。じゃあここのまずWebページというところを押すと、今回の調査内容をコーディングしてくれて単一ページのWebアプリケーションとして制作をしてくれます。はい、できましたね。「生体員ファインダー」というものを作ってくれました。こんな形で今回調べてくれた内容を全部まとめてくれています。お悩みから探せるようなチェックがつけられたりとか、料金範囲からも探せるような機能とかもついてます。で、しかもそれぞれの生体員の名前をクリックしたら特徴や主なターゲット層とか初回料金目安とかも全部まとめてくれてます。さっきのレポート全部読むよりは分かりやすいですよね。はい。それぞれの生体員の特長も目立つようにまとめてくれてますね。深夜24時まで営業だったりとか、個室と美容メニューが豊富とか、いろんな特徴の生体員がありますね。「生体員市場分析」ということで初回料金の分布とかもグラフにしてくれてますし、どこに特化してるのかとかも分けてくれてます。はい。で、あとは「後悔しない生体員の選び方」ということで、生体員を選ぶ際に注意すべき重要なポイント等もまとめてくれてますね。で、しかもクリックすれば内容を細かく出てくるというような形で綺麗にまとめてくれてます。ただ文字情報のレポートよりも圧倒的にこっちの方が分かりやすいですよね。ということで、こういったものも一瞬で作れるというのがディープリサーチ機能になってます。
はい、続いてインフォグラフィックも試してみましょう。はい、始まりました。「今回のディープリサーチの内容を詳細に分析して市場のトレンドと特徴を視覚的に伝える単一ページのシングルページアプリケーションを作成する」ということですね。はい、できました。さっきのWebページとはまた違って見やすいですね。3つのポイントがまずありますね。激戦区、初回価格の競争、専門性の追求ということで、この3つが大きな特徴ということですね。で、あと初回料金での価格競争等も分かりやすく書いてくれてます。で、サービスの対応性と専門分野だったり、あと生体員をどう選ぶかの流れとかまで全てまとめてくれてますね。これも見やすいですよね。で、ここで作ってる内容、さっきのWebページもそうなんですが、Googleドキュメントでレポートをクライアントに提出するのもいいですし、あとはこの共有リンクっていうのも作れますので、このページ自体を共有することもできるので、非常に分かりやすいですよね。なので、ここも合わせて活用してみてください。
はい、続いてこのテストというのもやってみましょう。はい、できましたね。「生体員選び方クイズ」を作ってくれました。この機能は今回のディープリサーチのレポートを元に4択テストを作ってくれて、よりこのレポートの理解を深めるということが気軽にできるということですね。ちょっと適当に選んでみますね。はい。あ、今選んだら不正解。そして正解っていうところをちゃんと解説もしてくれてますね。あ、今適当に押したんですけど正解です。はい。こんな形でどんどん選択してレポートの理解を深めるということができるのも面白いですね。で、これで10個終えたら今回の回答から得意分野とかあと重点的に学べき分野とかも全部教えてくれます。なんでこの結果を踏まえてまた新しいテストを作るとかもできますね。
はい。それでは次、この音声概要。これもやってみます。こちらすごい機能ですよ。今回のレポート内容を元にラジオ音声を作ってくれます。はい、では再生していきます。「さあ、今回のディープダイブ始めていきましょうか。今日はあなたが共有してくれた情報源、横浜市青葉区の生体員、えっと10件を比較調査した報告書ですね。これを一緒に見ていきたいと思います。いやあ、たくさん選択肢がありますよね。で、今回のミッションはこの情報の中…」こんな感じで対談形式の音声にしてくれます。音声も1.25倍、1.5倍とか調整できるので、好みのスピードで聞くことができます。ちなみにジェミニはスマホアプリでも使えるので、もしもスマホで移動中に気軽に聞きたいという場合も便利です。こんな風にスマホのアプリで聞くこともできます。なので、ディープリサーチで調べた内容をより理解を深めるためにも是非活用してみてください。
はい、ということでこのディープリサーチで調べた内容をもとにサイトを作る要件定義をしていきます。この競合の強みや弱みを分析して、じゃあ今回作るサイトはこういうコンセプトでこういうメニューを押し出して料金はこれくらいに設定しようというサイトの個、つまり要件定義をクライアントと擦り合わせて最適なウェブサイトを作ることができるようになります。じゃあ具体的にどうすればいいかということで実践していきます。今回のレポートの内容を踏まえて出す指示は「横浜市青葉区で生体員を開業します。開業にあたり生体員のホームページを新規作成します。今回のリサーチ結果を踏まえて、コンセプト、看板メニュー、メニュー、料金というホームページの要件となる要件定義のアイデアをまとめてください」ということですね。はい、これを指示出しします。はい、今回の内容をまとめてくれてますね。提案の案、ホームページの要件定義をまとめてくれてます。2パターンで提案をしてくれてますね。「現代の働き方によるデジタル世代のコンディショニング専門員」で、その中でのターゲット、提供サービス、看板メニューだったり、あとメニュー料金設定も全て作ってくれてます。で、あとはこれもGoogleドキュメントにエクスポートできるので、そしてこのGoogleドキュメントにまとめた内容を提案として提示することもできます。
はい。そしてここで今回の調査内容を踏まえて魔法のプロンプトを使って実際のサイト制作に落とし込んでいきます。ここで僕が普段から使っているプロンプトを入れていきます。はい。で、今回プロンプトこの内容を入れていきます。で、これはどの業体にも使える内容になっているので、今回の内容を踏まえての指示出しをさらに加えていきます。このプロンプトは後でプレゼントするので是非受け取ってください。で、指示は「以下のワイヤーフレーム作成の雛形に今回の生体員の要件定義の内容を当てはめてください。まずトップページを作成したいです」と入れます。はい。指示を出します。はい。そうすると構成を出してくれますね。トップバナーとか各セクションですね。何を入れるかまで全部出してくれます。だ構成は今回これで作ってくれたんですけど、見たいのは視覚的にワイヤーフレームとして見たいので、さらにここでこのキャンバスを押してもらって指示を出します。「この構成と内容をコーディングして視覚的なワイヤーフレームデザインとして見せてください」これで指示を出します。こうすることで今回決めた要件定義を組み込んでサイトの構成からデザイン、コーディングまでを一撃で終わらせてくれます。はい。作業と同じようにサイトのコードが一瞬で生成されていきます。はい、コードだけ作ってくれたので「この内容をプレビューで見せて」という風に指示を出しました。はい、できましたね。今回のリサーチ内容を踏まえたWebサイトワイヤーフレームデザインを作ってくれました。実際のページでも確認をしてみます。はい。こんな形で今回の調査内容を踏まえたページっていうのを作ってくれます。コンセプトとしても「デスクワーカーのための首と自律神経の専門員」ということで内容まで考えて作ってくれます。サイト画像は入ってないので、画像に関してはすでに素材があればそれを当てはめてもいいですし、新しく作るようであればさっき話したImagen FXで画像を作成して当てはめてみるといいです。で、あとはこのサイトの中で修正したいところはさっきお見せしたようにそれぞれセクションごとにスクリーンショットを取ってコードを修正していくっていう形でもいいです。
で、こっからなんですけれども、さらに細かく修正をしやすいように今回作ったこの出来上がったHTMLをデザインツールのFigmaにインポートするところをお見せします。どうやるかと言ったら、まずこのコードを開いて、で、そして内容をコピーします。で、内容をコピーした後どうするかなんですけど、その状態でこのデザインツールのFigmaを開いてもらって、どうやって移していくのかってことなんですけど、このFigmaなんですがコードをデザインに起こすということができます。じゃあそれをどうすればいいかと言うと、Figma専用のプラグインというものががあるので、この「HTML to Design」というプラグインを使います。まだ入れてないという人はこのプラグインを「プラグイン」というところから探すことができるので、ここで「HTML Figma」と入れてもらえれば検索できますので、これをインストールしてください。で、実際これでこの「HTML to Design」を開いて何をしていくかなんですけど、まず作りたいデザインのサイズを指定することができます。デスクトップ、ノートパソコン、タブレット、スマホということで選べて、で、あとは言語設定だけして、今回はこの4つのサイズで出るようにします。で、この「エディター」っていうところを押してもらって、さっきコピーしたコードをこの「HTML」というところに貼り付けます。これで終了です。してこの「Create」というのを押しますね。はい、できましたね。これでデザインのワイヤーフレームがほぼ完成してしまいましたということですね。あとはこの内容をベースにデザイナーさんと細かい部分を詰めたり、あとは自分で調整をしていってもいいです。今回お話したディープリサーチを活用すれば競合調査からワイヤーフレームの完成までがわずか数十分で終わってしまうということです。この作成したデザインは自分でも編集ができるので、例えばクライアントとの打ち合わせでここを変えたいということがあればその場で変えてもいいですし、であとはこの仮のデザインを共有してコメント等を入れてもらって修正要望をお伺いしてもいいですね。してこれでデザインが完成していった後どうすればいいんでしょうかってことなんですが、この完成したデザインをさっきみたいにコーディングで作っていってもいいし、もしくは似せてこのデザインを元にノーコードで作成をしていってもいいです。で、ノーコードの場合はSTUDIOとかWebflowとかでもいいですが、傾斜だと拡張性が高くてマーケティングしやすいWordPressのツールテーマでデザインに似せてカスタマイズしながら作成することが多いです。実際の詳しい作り方や公開の仕方などはこちらの動画でも公開してるので是非見てみてください。
このジェミ2.5Pro使いこなせば業務効率化やウェブサイトの制作の質とスピードは桁違いに変わります。是非実践してみてください。今回のプロンプトと動画の内容もまとめた資料は動画下の概要欄からプレゼントしてます。概要欄にあるリンクから公式LINEを追加して「プロンプト」と入力して受け取ってください。今回の内容を実践すればコーディングはもちろん、要件定義の手間を0にして競合調査からワイヤーフレーム作成を終わらせることができるようになります。今回の内容あまりに強力すぎるので期間限定での配布となります。予告なく配布を終了する可能性もあるので、必ず今のうちに概要欄にあるリンクから「プロンプト」と入力して受け取っておいてくださいね。この動画が少しでも役に立ったなって思ったらいいねボタンやチャンネル登録お願いします。それではまた次回の動画でお会いしましょう。