Selldoneプラグインでランディングページを作る — ステップバイステップガイド

はじめに

コードを一行も書かずに、美しくレスポンシブなランディングページのセクションをデザインできたら便利だと思いませんか？ChatGPTのSelldone Plugin in ChatGPTを使えば、その夢が現実になります。

本ガイドでは、参考となる画像から始めて、AIの力でSelldoneのPage Builder内にライブで動作する完全にレスポンシブなセクションを作成するまでの手順を、順を追って解説します。

最後には、Selldoneサイトに公開できるプロ仕様のセクションが完成します。

💡 補足：SelldoneのPage BuilderはVuetify（Vue 3）をベースにしているため、プラグインで生成されたすべてのセクションはSelldoneの最新のレスポンシブフロントエンドフレームワークと完全に互換性があります。

ステップ 1 – インスピレーションを準備する

まず、あなたが気に入ったセクションデザインを見つけましょう。本チュートリアルでは参考例として楽天市場のトップページのセクションを使います。シンプルでモダンなレイアウトに、強いビジュアルと分かりやすいコールトゥアクションが組み合わさったデザインです。

その楽天市場のセクションをスクリーンショットで保存してください。ChatGPTにビジュアル参考として渡すことで、Selldoneプラグインがオリジナルのデザインを生成する際の手掛かりになります。

💡 ヒント: 構造がわかりやすく視覚的にバランスの取れたセクションを選んでください。デザインが明確であるほど、ChatGPTは分析・再現しやすくなります。

⚠️ フェアユース表示: ここで使用している楽天市場のスクリーンショットは、教育・参考目的のデザインインスピレーションとして使用しています。すべての商標、画像、レイアウトは楽天株式会社に帰属しており、本チュートリアルは楽天とは関係ありませんし、楽天の承認を受けたものではありません。

ステップ 2 – ChatGPT を Selldone プラグインで開く

ChatGPTでSelldoneプラグインが有効になっていることを確認してください：

1. ChatGPTへ行き、設定（Settings）→ ベータ機能（Beta Features）→ Pluginsでプラグインを有効にします。
2. プラグインストア（Plugin Store）でSelldone Pluginをインストールします。
3. プラグインを有効にして新しいチャットを開始します。

チャットボックスの横にSelldoneのロゴが表示されていれば準備完了です。

ステップ 3 – 参考デザインをアップロードする

スクリーンショットをアップロードして、わかりやすいプロンプトを入力します。例：

上部メニューから、最新バージョンのChatGPTを使用していることを確認してください。

「この画像のようなセクションを作りたいです。レスポンシブなフォントサイズ、フォントやカードの色を変更可能にし、カードは円形または角丸四角にできます。」

ChatGPT（Selldoneプラグイン経由）は画像を解析し、SelldoneのPage Builderと完全互換のVuetify（Vue 3）ベースのコードを生成します。

Selldoneで新しいランディングページを作成する

カスタムセクションを追加する前に、Selldone内で空のランディングページを作成しましょう。

1. ストア上部メニューからページ（Pages） → ランディング（Landing） → 新しいランディングを追加（Add New Landing）へ移動します。
   
2. この画面で3つのデフォルトのランディングページテンプレートが表示されます。
3. いずれかをクリックしてランディングページデザイナーに入ります。デザイナー内の左側パネルから「コード（Code）」要素を探し、Page Builderエリアにドラッグしてください。この「コード」要素にChatGPT（Selldoneプラグイン）で生成したセクションのコードを貼り付けまたはインポートします。
4. コードボックスをクリックしてツールバーを有効にしてください—上部にツールバーが表示されます。これを頻繁に使います。

- 最初のアイコン（<>）はコードエディタを開きます。ここにChatGPTで生成されたHTMLやVueベースのセクションコードを貼り付けたり編集できます。- 2番目のアイコンはプロパティ（Properties）を開きます。セクションのレイアウト、間隔、ビジュアル設定を調整できます。

ステップ 4 – ChatGPTの初期コードをエディタに貼り付ける

間違ったバージョンが出ることもあります

まずはChatGPTが生成した最初のコードをコピーしてください。
スクリーンショットのように、結果が参考画像と異なる場合があります—これはChatGPTが正しく生成できなかった状態です。これはよくあることなので心配いりません。修正するために、参考画像を再送してもう一度依頼しましょう。たとえば：

“先ほど送った画像に注目してください。画像を再送します。もう一度お願いします。”

これでChatGPTは最初からやり直し、新しいコードを生成します。まだ最終版ではないかもしれませんが、ここからさらにリクエストや調整を加えていきます。次に、生成されたコードをコピーしてコードエディタに貼り付け、Apply（適用）を押してください：

重要な注意：コードエディタのデフォルトモードはHTMLです。 必ずVueオプションに切り替えてください — そうしないと結果が真っ白になることがあります。

これでChatGPTが生成した最初の正しいバージョンのセクションが表示されます。ツールバーの2番目の項目を押してプロパティメニューを開き、調整を行ってください。ここにはビジネスに合わせてカスタマイズできる多くの設定があります。

「デフォルトにリセット（RESET TO DEFAULT）」オプション：

コードを貼り替えたときに見た目が変わらない場合があります。これは編集内容が根本的であるときに起こりやすいです。そうした場合は「デフォルトにリセット」をクリックする必要があります。ただし、この操作はすべてのカスタマイズ（テキスト、色、フォントサイズ、アップロードした画像など）を消去するため、工場出荷時のリセットに相当します 🙂。したがって、変更が適用されない場合のみこのオプションを使ってください。

ステップ 5 – セクションを調整する

ChatGPTは、他のユーザーの会話例から学んでより包括的なレイアウトを生成するようになっています—そのため、すべての要素を1つずつ依頼する必要はありません。会話を重ねるほど、ChatGPTはあなたのデザイン嗜好を理解し、より完成度の高い結果を出すようになります。会話が長く・明確であればあるほど、より正確な成果が得られます。生成されたデフォルトのコードはすでにかなりレスポンシブですが、フォントサイズ、フォントの太さ、セクションやカードの高さ・幅などの細部は調整可能です。
例えば、大画面（デスクトップ）では1行に8枚、タブレットでは4枚、モバイルでは2枚表示するように設定できます。
ChatGPTがこれらの調整をどのように解釈して適用するかを確認しましょう—次のステップでさらに編集やリクエストをする必要があるかもしれません。今回の例では、より良いレイアウトにするためにセクションの最大幅（Section Max Width）を1400pxに設定し、カード数をデスクトップ / タブレット / モバイルでそれぞれ8 / 4 / 2にすることを推奨します。
間隔を微調整するには、デスクトップのカード間隔（Cards Gap）を約12pxに減らしてみてください。また、カードの高さを180pxから160pxに下げたり、画像サイズを調整してデザインに合わせることもできます。

見た目はこれらの数値を試行錯誤することで簡単にカスタマイズできます。色々試してあなたのスタイルに最適な設定を見つけてください。

結果をわかりやすくするために、自分の画像をアップロードしてみてください。背景が透過された画像を使うと、カード背景色（Card Background Color）が均一に適用され、より洗練されたプロの見た目になります。画像をアップロードし、テキストを編集して最終調整したら、保存ボタンをクリックするか、WindowsではCtrl + Sで即座に保存してください。
次にライブページを開いて、実際にセクションが動作する様子を確認します。
ライブで表示するには、ライブプレビュー（Live Preview）を使うか、ランディングページ名の横にあるボタンをクリックしてください。これで購入者ビュー（買い手視点）でページが開きます。ただし、最終的なレスポンシブ確認にはライブプレビューだけでは不十分な場合があるので、後述の方法で複数デバイスでの確認をおすすめします。これがコードの結果です。次に、さまざまな画面サイズでテストしてすべてが正しく動作するか確認します。
WindowsブラウザでWeb開発者ツールを開くには、F12キーを押します。
このツールでモバイル、タブレット、ラップトップなどの異なる画面サイズを簡単にプレビューできます。上部メニューから「Responsive（レスポンシブ）」を選択して、さまざまな画面サイズでセクションがどう見えるかプレビューしてください。ご覧の通り、モバイル版はきれいにレスポンシブになっています。タブレット表示—特にiPad Pro 11インチでは、タブレットで1行に4枚表示する設定が反映されず、2枚しか表示されていません。この問題をChatGPTに伝えて再コーディングしてもらう必要があります。

ステップ 6 – 繰り返し改善する

最初のバージョンで満足せずに調整を続けてください—ここで本当の創造性が発揮されます。ChatGPTとやり取りを続けることで、以下のような細部を調整できます：

• あらゆる画面でセクションを完全にレスポンシブにする。
• ホバー時のアニメーションを追加する。
• グラデーションボタンを使う。

各ラウンドでセクションは瞬時に更新されます。

💡 プロのコツ: 多くチャットして要望を詳しく伝えるほど、ChatGPTはあなたのデザインスタイルを学習し、より正確で高品質な結果を出すようになります。
ここでは、問題点を明確に説明してChatGPTが理解しやすくすることが重要です。
ChatGPTはあなたの心を読むことはできません—具体的に問題を詳細に説明してください。例として次のように伝えます：

タブレット表示で1行に4枚表示する設定にしましたが、iPad Pro 11インチでは1行に2枚しか表示されません。修正してください。モバイルは1行に2枚に設定しています。

ChatGPTが返答すると、必要なコード変更だけを提示してくることがあります（手動で差し替える想定）。その場合は下の画像のように部分的な修正が提示されます。手間を省くために、「完全なコードを送ってください」と依頼しましょう。多くの場合、ChatGPTはメッセージの最後に見落としがちな追加の設定（例えばカードにリンクを追加するなど）を提案してくれます。これはセクション運用に必須の項目なので見逃さないでください。ほぼ完成です！ 更新されたコードをコピー＆ペーストしてエディタに貼り付け、変更を保存してライブモードで表示して見た目を確認してください。
ご覧の通り、タブレット版は1行に4枚のカードが正しく表示されるようになっています。

ステップ 7 – コードを最終化してセクションを保存する

デザインが整ったら、セクション構造や要件を詳細にChatGPTに伝え、最終コードを生成してもらうと良いでしょう。以下のプロンプトを使って最終コードを生成してください：