Creazyチュートリアル

ようこそ！😊
Creazyへのご訪問を心より歓迎いたします。

この記事では、商品詳細ページの作成方法から、エディターでの編集方法、そして新しく追加されたツールバーやドラッグ＆ドロップ機能まで、すべて漏れなくご説明いたします。

ゆっくり順番通りに進めていけば、どなたでも簡単に商品詳細ページを作成できます！

---

ログイン後の画面

新しいデザインを作成

ここでのデザインとは、商品詳細ページ1つを意味します。
商品詳細ページを作成するには、「新しいデザインを作成」ボタンをクリックしてください。

ログインすると、上記のようなダッシュボード画面が表示されます。
画面中央にある**「新しいデザインを作成」**ボタンが見えますか？
このボタンをクリックすると、すぐに商品詳細ページの作成を開始できます。
以前作成したデザインがある場合は、この画面から確認して編集に入ることもできます。

---

ボタンをクリックすると、上記のような選択画面が表示されます。
初めての方は**「新規作成」**ボタンをクリックしてください。
完全にゼロから新しい商品詳細ページを作成できます。

---

プロジェクトの基本情報を入力する

商品名の入力

最初のステップは商品名を入力することです。
販売する商品の名前を入力してください。
例えば「プレミアムワイヤレスイヤホン」「手作りいちごジャム」のような形です。
この名前はAIが商品詳細ページの内容を作成する際の基本情報として活用されるため、実際に販売で使用する商品名を正確に入力することをお勧めします。

---

コンテンツタイプの選択

次に、コンテンツタイプを選択する画面です。
現時点では商品詳細ページを選択してください。
選択後、次へボタンをクリックしてください。

今後は商品詳細ページ以外にも、バナーやサムネイルなど、さらに多様なコンテンツタイプが追加される予定ですので、ご期待ください！

---

カテゴリーの選択

次に、商品に合ったカテゴリーを選択してください。
カテゴリーを正確に選択することが重要な理由があります。

各カテゴリーには
✔ その商品群に最適化されたデザインテンプレート
✔ 実際に売れている商品詳細ページで検証された構成フォーマット

があらかじめ設定されているからです。
例えば、食品カテゴリーでは食欲をそそるレイアウトが、ファッションカテゴリーでは着用写真を強調する構成が自動的に適用されます。
商品に最も近いカテゴリーを選んでいただければ、AIがより優れた成果物を作成できます。

---

企画書の作成

このステップは、商品詳細ページに掲載する実際のコンテンツを入力する重要なステップです。
商品の特徴、メリット、使い方など、お客様に伝えたい情報をここで記入します。

上記の画面のように、各項目ごとに内容を記入していきます。
直接入力していただいても構いませんし、以下でご説明するAI自動作成機能を活用すると、はるかに便利です。

---

写真のアップロード

商品の写真をアップロードしてください。
商品詳細ページのクオリティは写真で決まると言っても過言ではありません！

写真が多ければ多いほど、AIがより多様な構図やレイアウトで商品詳細ページをデザインできるため、お持ちの商品写真をできるだけ多くアップロードすることをお勧めします。
正面、側面、ディテールカット、使用シーンなど、さまざまな角度の写真があると特に効果的です。

---

AIで内容を自動入力

企画書を自分で書くのが難しいですか？ご安心ください！
AIが自動で商品詳細ページの内容を作成します。

先ほど入力した商品名、カテゴリー、アップロードした写真をもとに、AIが商品の特徴やセールスポイントを分析して企画書を自動で記入してくれます。
AIが作成した内容を確認した後、気に入らない部分だけ修正すれば良いので、大幅な時間の節約になります。

---

一時保存

作業中に急に席を外す必要がある場合や、後で続きを作業したい場合は、一時保存ボタンをクリックしてください。
作成中の内容がそのまま保存され、次に戻ってきた時に続きから作業できます。

---

提出する

企画書の内容をすべて確認したら、提出ボタンをクリックしてください。
提出すると、AIが企画書をもとにデザイン作業を開始します。
通常1〜2分ほどかかり、完成するとすぐに結果を確認できます。

---

商品詳細ページ作成完了

おめでとうございます！🎉 商品詳細ページが完成しました！
AIが自動で複数のセクションで構成された商品詳細ページを仕上げました。
このままご使用いただいても構いませんし、さらに好みに合わせて修正したい場合はスタジオで編集できます。

---

スタジオページの使い方

スタジオは完成した商品詳細ページを自由に編集できる編集スペースです。
左側にはAIチャットとツール、中央には商品詳細ページのプレビュー、右側には詳細設定パネルが配置されています。

この画面では、テキストの修正、画像の差し替え、セクションの追加・削除など、すべての編集作業が行えます。
直接クリックして修正する方法と、AIにチャットで依頼する方法の両方をサポートしていますので、お好みの方法でお使いください。

---

AIチャットによる編集

スタジオ左側のAIチャットウィンドウを活用すると、まるでデザイナーに話しかけるように自然言語で編集を依頼できます。

例えば、以下のようなことが可能です：

• セクション追加：「レビューセクションを1つ追加して」
• セクション修正：「最初のセクションの背景色を青に変えて」
• セクション削除：「最後のセクションを削除して」
• 画像生成：「高級感のある背景画像を作って」

AIによる編集はテンプレートに縛られず、完全に自由なデザイン変更が可能なため、思い通りに細かく調整できます。

---

リファレンスの活用

「こんな感じで作って！」と言葉で説明するのが難しい時は、リファレンス画像を活用してみてください。

チャットウィンドウでリファレンス画像を添付できます。気に入った他の商品詳細ページやデザイン画像をアップロードしてください。

このようにリファレンスを選択し、どの部分を参考にするか一緒に伝えていただくと、より正確な結果が得られます。

AIがリファレンスのスタイルや雰囲気を分析して、似た雰囲気でデザインを修正してくれます。
競合他社や有名ブランドの商品詳細ページを参考にしたい時にとても便利な機能です！

---

⭐ ドラッグ＆ドロップで要素を追加

コーディングや複雑な操作なしに、左側ツールバーから好きな要素をつかんでドロップするだけで、テキストや画像をすぐに追加できます。

左側ツールバーにあるテキストボタンまたは画像ボタンをマウスでつかんだまま、好きな位置にドラッグ＆ドロップしてください。

---

上のGIF画像のように、本当に直感的ですよね？
好きな位置に要素をドロップするだけで、すぐに追加されます。
パワーポイントで図形を挿入するように簡単に使えます！

---

⭐ 要素のドラッグ＆ドロップで位置移動

すでに配置されたテキストや画像の位置を変えたい時も、ドラッグ＆ドロップで簡単に移動できます。

移動したい要素をクリックした後、ドラッグすると好きな位置に自由に移動できます。
レイアウトを細かく調整したい時にとても便利な機能です。

---

要素の複製・削除

要素を選択すると、以下のようなアクションメニューが表示されます。

ここでは以下の操作ができます：

• 移動：要素を別の位置に移動します
• 複製：同じ要素をもう1つ作成します（同じスタイルのテキストや画像が複数必要な時に便利です）
• 削除：不要な要素を取り除きます
• サイズ変更：要素のサイズを大きくしたり小さくしたりできます

キーボードショートカットもサポートしているので、より迅速に作業できます：

• Ctrl+C：選択した要素をコピー
• Ctrl+V：コピーした要素を貼り付け

---

要素の角や端をドラッグすると、このようにサイズを自由に調整できます。テキスト領域を広げたり、画像サイズを大きくしたりすることが可能です。

---

複製された要素は元の要素のすぐ隣に生成され、独立して編集が可能です。
似た構成を繰り返す必要がある時、1つずつ新しく作る必要なく、複製して内容だけ変更すれば済みます。

---

テキストの編集

テキストを修正したい場合は、該当テキストをダブルクリックしてください。

ダブルクリックすると、すぐにテキスト編集モードに切り替わり、好きな内容に自由に修正できます。
誤字の修正、文言の変更、説明の追加など、どんな修正でもすぐに行えます。

---

⭐ セクションツールバー機能

各セクションの上にはセクションツールバーがあります。
このツールバーを通じて、セクション単位でさまざまな編集作業ができます。

ツールバーには、セクションタイトルの編集、AIチャット編集、順序変更、複製、削除などの機能がまとめられています。1つずつ見ていきましょう。

---

セクションタイトルの編集

セクションタイトルをダブルクリックすると、すぐに編集モードに切り替わります。
セクションタイトルは商品詳細ページに直接表示されませんが、複数のセクションを管理する際にどのセクションかを一目で把握できるようにする役割があります。
「商品紹介」「お客様レビュー」「配送案内」など、わかりやすい名前に変更しておくと、編集時にとても便利です。

---

チャットで編集する

特定のセクションを集中的に修正したい場合は、そのセクションを選択した状態でAIチャットから編集リクエストを送ってください。
「このセクションの背景を白に変えて」「テキストをもっと大きくして」「画像の位置を左に移動して」のようなリクエストを自然に入力すると、AIが該当セクションだけを正確に修正してくれます。

---

上のGIF画像のように、チャットでリクエストするとAIがリアルタイムでデザインを修正してくれる様子が確認できます。
手動で1つずつ修正するのが面倒な複雑な変更も、一行のチャットで解決できるのでとても便利です！

---

順序の変更

セクションの順序を変更したい場合は、ツールバーの**順序変更ボタン（矢印）**をご利用ください。
上下の矢印をクリックすると、該当セクションが1つ上または下に移動します。
例えば、レビューセクションを商品紹介のすぐ下に移動したい場合は、上矢印を数回クリックすれば完了です。

---

セクションの複製

気に入ったセクションがあれば、複製ボタンを押して同じセクションをもう1つ作成できます。
複製されたセクションは元のセクションのすぐ下に追加され、内容だけ変更すれば似た構成のセクションを素早く作成できます。
例えば「カラーオプション紹介」セクションを複製して、各カラーごとの説明セクションを簡単に作れます。

---

セクションの削除

不要なセクションは削除ボタンですっきり削除できます。
AIが作成したセクションの中で商品に合わない部分があれば、思い切って削除して必要なセクションだけ残してください。
ただし、削除したセクションは復元が難しい場合がありますので、慎重にご判断ください！

---

ツールバーを隠す

編集画面をもう少し広くしたい場合は、ツールバーを非表示にできます。

画面左側のツールバー非表示ボタンをクリックすると、ツールバーが折りたたまれてプレビュー領域が広がります。

---

上のGIF画像のように、ツールバーを開いたり閉じたりしながら状況に合わせて使えます。
全体の完成イメージを確認したい時はツールバーを隠し、編集作業をする時はまた展開して使ってください。

---

右パネル

スタジオ画面の右側にあるパネルでは、セクション管理、写真編集、AI画像生成、テキストスタイル変更など、詳細な編集機能をご利用いただけます。

セクション一覧

右パネルのセクション一覧では、現在の商品詳細ページに含まれるすべてのセクションを一目で確認できます。
特定のセクションをクリックすると、そのセクションに直接移動するため、セクションが多くなった時に目的の部分を素早く見つけられます。

---

写真編集

商品詳細ページの写真をもっときれいに整えたい場合は、写真編集機能を活用してみてください。

画像を選択すると、右パネルに写真編集オプションが表示されます。ここで画像を差し替えることができます。

---

画像の表示領域を調整できます。商品の重要な部分がよく見えるようにフレームを合わせてください。

---

クロップツールを使えば、写真から好きな領域だけを切り取って使用できます。不要な背景を除去したり、商品をより大きく見せたい時に便利です。

---

編集が完了したら、適用ボタンを押して変更を保存してください。
別途の画像編集ソフトがなくても、Creazy内で簡単な写真編集がすぐに行えます。

---

AI画像

商品写真以外に背景画像やムード画像が必要な場合、AI画像生成機能をお使いください。
テキストで欲しい画像を説明すると、AIがオーダーメイドの画像を作成してくれます。
例えば「温かみのある木のテーブルの背景」「すっきりとした白い大理石の背景」のようなリクエストが可能です。

---

テキストスタイル

テキストを選択すると、右パネルでテキストスタイルを細かく調整できます。
フォント、文字サイズ、色、太さ、配置方法などを自由に変更できます。
ブランドのトーン＆マナーに合わせてテキストを装飾してみてください。

---

エクスポート

商品詳細ページの編集がすべて完了したら、エクスポートを通じて実際のオンラインショップに適用できます。

画面上部のエクスポートボタンをクリックしてください。

---

エクスポート方式を選択する

エクスポート方式を選択できます。Creazyでは**画像とWebデプロイ（Figma）**の2つの方式をサポートしています。

• 画像エクスポート：商品詳細ページを画像ファイルとしてダウンロードします。スマートストア、Coupangなどほとんどのオンラインショップで画像をそのままアップロードしてご利用いただけます。
• Webエクスポート：デプロイされたリンクを取得できます。自社サイトやCafe24、I'mwebなどに直接埋め込むことができます。

---

画像エクスポートの場合、セクションごとに個別の画像が生成されダウンロードされます。
各セクション画像をオンラインショップの商品詳細ページエディターに順番にアップロードするだけで完了です！

---

Webエクスポート

Webエクスポートを選択すると、デプロイされたリンクを取得できます。
自社サイトやCafe24、I'mwebなどのプラットフォームのHTMLエディターにこのコードを貼り付けると、商品詳細ページがそのまま反映されます。

---

画像エクスポートとは異なり、テキストが検索エンジンにもインデックスされるため、SEOにも有利です。

---

動画チュートリアル

テキストよりも動画で見る方がお好みでしたら、以下の動画チュートリアルをご参照ください！

---

Creazyは
商品詳細ページの作成を最も簡単に、最も速く実現します。

いつでもお気軽にご利用ください！🚀