【海外記事】GPT-4oを使って無料で紙とペンでＷｅｂサイトを作っちゃおう
今日はこちらの記事を読んでみます。なお、画像も以下から引用します。
少し長い記事なので何回かに分けて読んでいきます。
本日もよろしくお願いいたします。
紙とペンからＷｅｂサイトと無料で簡単に作ろう
Open AIはGPT-4oをリリースしました。同時通訳や教育の領域において多くの先進的で素晴らしい機能を有していますが、無料ユーザーに対してこれらが解放されるというのは無料ユーザーにとっては非常に喜ばしいニュースでした。
もっと言うと、マルチモーダリティによって多くの無料ユーザーが簡単にWebサイトを作れるようになったということです。
このモデルではデザイン、ライティングからＷｅｂサイトのローンチまでを、たとえコーディングスキルがなかったとしても簡単に作れるようになりました。
さあ、GPT-4oを使いながら紙とペンからWebサイトを作ってみましょう。
マルチモーダリティとは？
マルチモーダリティとは一つのメディアの中に複数のリテラシーを有するアプリケーションです。
複数のリテラシーや"モード"はユーザーの構成理解に貢献してくれます。画像の出力からコンテンツの構成に至るまで、あらゆるものを生み出します。
GPT-4oが提供するマルチモーダリティはテキストや画像など、特にあなたがWebサイトを作るプロセスを劇的に向上させるコンテンツを生成することができます。
ここにあなたがマルチモーダルWebサイトを作る際に役立つと思われるものをまとめてみます。
テキスト
どんなものがWebサイトに必要なのかをテキストによる説明や指示を入力できます。例えばホームページのレイアウトやセクション内のコンテンツや必要とするブログの投稿の種類などです。
コンテンツにSEOの最適化を行うことができます。これにより、オーガニックユーザーに対してより多く閲覧がされるようになります。
ブログの投稿やプロダクトの説明を生成することができます。その内容が魅力的で有益であることを確認しながら、ページに取り入れることができます。
画像
使いたい画像をアップロードし、GPT-4oに分析させてそれらをWebサイトのレイアウトへ適用させることができます。ロゴや製品イメージやバナーなどをアップロードしてレイアウトをお任せすることができます。
参考にしたいイメージ画像をアップロードして、その雰囲気にあった画面デザインを生成させることができます。
DALL-Eのようなツールが統合されているので、GPT-4o自体でも画像やイラストをカスタマイズして生成することができます。
これらはまた、動画のためのスクリプトを作る際にも活用できます。コンテンツをより分かりやすい構成になおしてくれます。
動画
もしウェルカムビデオやチュートリアルや製品のデモを持っているなら、あなたはそれらのファイルやリンクをアップロードしてWebサイトの中に含めることができます。
さぁ、やってみよう！
他の記事でも言及しているのですが、私はパン屋について扱うのが好きです。なので今回もそのようにしてみましょう。
私はローカルなパン職人で、Webサイトを作ろうとしています。すでにいくつかどんなコンテンツを掲載するかについてのアイディアを持っています。
無料のOpen AIアカウントの準備もできており、スクリーンを見つめて・・・・さて、何を言おうかしら。
とりあえずまずはシンプルな質問をしてみます。
こんにちは！ローカルなパン屋のWebサイトをデザインしてください。
GPT-4oの実力を見るために、GPT-3.5がどんな回答をするのかを見てみます。
悪くはなさそうです。ざっくりとしていますが、いくつかアイディアを得ることができ、最終的には自分が考えつかなかったような新しいアイディアが得られそうです。ただ、GPT-3.5はテキストのみの対応なため、これ以上の出力は望めません。
以前毎月20＄の出費が必要だった、よりパワフルなモデルGPT-4があります。こちらでも同じことをしてみましょう。
これについて、どんなWebサイトイメージになるのかを尋ねてみると、以下のような出力をしてくれました。
画像生成だけで1分ほど時間がかかりました。
では無料のGPT-4oを使ってみます。
見ての通り、結果は十分でかつかなり詳細です。CTAボタンやタイポグラフィへのアドバイス、カラースキームやフォローアップQ&Aなど、多くの情報をこちら側が詳細なコマンドを入力する必要なく得ることができました。
ではどんな感じのWebページになるのでしょうか？20秒以下で以下のようなイメージを生成してくれました。
無料モデルでも悪くないでしょう？
でも雰囲気や色のチョイスが求めているものと違うかもしれません。いくつかの要素は不要であったり、より多くのメニューを追加したかったりするかもしれません。ここでマルチモーダルパートに移りましょう。まず、紙とペンを手に取ってください。
簡単なスケッチをしてみる
正直私は絵があまり上手ではありません。
私が思いついたスケッチを次のプロンプトを入力する前にアップロードしておきました。
Webサイトについて私が最初に考えたのは、このようなシンプルなデザインでした。ぜひあなたなりに画像やテキストのレイアウト、セクションの名前などを提案し、再構成してください。
GPT-4oは以下のようなものを返してくれました。
私が求めていたようなものそのものではありませんでしたが、幾分か良くなりました。GPT-4oの実力はこんなものでしょうか？
Webサイトを作るのに必要なコードを記述してください。できる限り最新のパフォーマンスやアクセシビリティを確保してください。出来上がったらオンラインにアップロードするためのzipファイルを作成してください。
このプロンプト入力後の待ち時間・・・１分２０秒。
私がコンテンツとスタイルのファイルやイメージパス、そして生成されたzipを得るのにかかった時間は１分半未満です。
・・・
では分析してみましょう。私はヒーローイメージ（※ヒーローイメージとは画面上のメインとなる最も大きな画像と文字が描かれているもので、大体の場合最も重要な情報とアクションボタンを備えています）を得て、CTAボタンに「注文」という文字を配置しました。
私達は初期案では５ページのスライダー領域があった部分をシンプルな３つのセクション領域へ変更されていました。私は２つにするよう頼んだのですが、それぞれのセクションに名前がありません。
同様に、ナビゲーションバーの指示も正しく解釈されていませんでした。"Social"と私がスケッチで書いていたのは、SNSアイコンを配置したいという意図でした。また、出力されたWEBには、求めていた以上の多すぎるメニューが配置されていました。
私はここではプロンプトを使って、もっと詳細な説明を与えて、自分の考えをより良く説明し、もっと正確なものを作れるようになるべきでしょう。しかし今回のゴールはいかにGPT-4oがシンプルなプロンプトで動作するのかを試すことです。
→次回に続く
感想：隣に何でも聞いてくれる優秀なエンジニアがいる状態
この記事ではまだ筆者の望むクオリティには達していなかったようですが、とは言えものすごい時代になりました。
簡単なラフスケッチをAIが分析して、その背景の意図を汲み取りながらWEBのデザインを作成し、イメージを含めたコードまで出力してくれるようです。
これによって多くの人や組織に新しい可能性が生まれてくるのではないでしょうか。
もちろんセキュリティ的なリスクとか実際の使い心地などは人の目や手で検証しないといけない領域はどうしても残り続けるでしょうが、こういったものへの精度も格段に上がっていくことが容易に想像できます。
ますます自分も含め「技術を売りにしてた人」の仕事がなくなっていく時代が来そうです。
技術の民主化が始まった昨今において、先端の技術を取り込みながら自分の個性を組み合わせて新たな創造を行う人か、技術以外の部分で大きな価値を持つ人になる必要があると改めて考えさせられました。
個人的に気になった海外記事を週数本メモしていますので、よければフォローおねがいします
ポートフォリオ
X（noteの更新などをお伝えします）
https://twitter.com/yamashita_3
__________________________________________________________
#デザイナー #UIデザイン #UX #UXデザイン #UI #海外記事翻訳
サポートいただいたお金は今後の発信活動に関わるものに活用させていただきます。