かんたんエディターで作ったサイトをAIエディターで作り直す

この記事では、かんたんエディターで作った公開中のページを公開したまま、AIエディターで作り直す方法について説明します。
かんたんエディターで作られたページから、文章はそのままあるいはAIを使ってアップグレードして新しく作り直す方法について説明しています。AIエディターを使えば、季節に合わせて、Webサイトの雰囲気を変えることもできますので、是非ご活用ください。

❶ 全体の流れ

注意

❌ AIエディターを操作中に絶対に「公開」ボタンはクリックしないようにしてください。公開作業をしてしまうと、作成中の新しいWebサイトが公開されてしまいます。

1⃣ 公開中のページからの情報収集

公開中のページを開き、そこから必要な情報を収集します。収集と言っても、行うことはコピー＆ペーストです。

2⃣ プロンプトの作成

AIエディターを作る際の肝となる部分です。でもご安心ください。プロンプトもAIに作ってもらうことができます。・

3⃣ AIエディターを使って生成

AIエディターを使った生成では、殆どの作業はAIがやってくれます。あなたがやるのはAIが作ったものを微調整するだけです。

4⃣ 公開作業

AIでの生成、調整が終わったら後は公開するだけです。公開作業もあっという間に完了します。

❷ 公開中のページからの情報収集

まずは、現在公開中のページから、情報を収集します。

今回は具体的に

https://samplesite3.hirameki7.site/

こちらのサンプルサイトの作り直しを行います。

まず、情報を収集するページを開き、Windowsの場合は、Ctrl+A（Macの場合はCommandキー）のキーを押して全選択の上、Ctrl+Cでコピーします。

コピーしたら今度は、メモ帳などを開きCtrl+Vで貼り付けます。

❸ プロンプトの作成

続いてプロンプトの作成を行います。

今回は、Hirameki 7のメモ機能のAI文章生成機能を使ってプロンプトを作る方法をご案内します。

画面右側にあるHirameki 7のメモ機能を開き、「AI文章生成」をクリックします。

開いてきたAI文章生成に先程メモ帳に貼り付けた文章を貼り付けます。この時、貼り付けられる文章量が500文字までとなっていますので、その場合は500文字以下になるように工夫をします。検索サイトなどで、「テキスト分割ツール」などで検索すると、コピーした文章を500文字ずつ分割してくれるサービスなどが発見できます。

先程貼り付けた文章の一部はこのようになっています。


　赤坂生まれ
　赤坂育ちの
　閃七ワイン


赤坂産ぶどうをメインに、国産100%⽇本ワインの製造を手掛けて50年

最新情報

2024/02/05
お知らせ
テレビ出演のお知らせ

2024/02/05
お知らせ
雑誌掲載情報

2024/02/05
お知らせ
休園日のお知らせ

お知らせを見る
トライベックワイナリーについて

トライベックワイナリーでは、より多くの⽅に「ワインの魅⼒や歴史に触れていただきたい」という考えの元、
港区赤坂に⾃社ワイナリーをオープンいたしました。
ブドウ栽培からやワイン醸造まで⼀貫してお楽しみいただける施設となっております。
⾒学料や試飲料などすべて無料にてご対応させていただいておりますので、ぜひ⼀度お⽴ち寄り下さい。
3.5ヘクタールの⾃家畑＋契約農場
トライベックワイナリーは、東京都港区赤坂において3.5ヘクタールの農地があり
2001年4⽉にベリーAやメルローなどの植栽を順次、進めています。
また、契約農場との連携により⾼品質なぶどうを安定⽣産しております。

広さ約700坪の醸造所
600t以上のぶどうを醸造する2階建ての醸造棟を完備。
施設の周りには地元の農家と提携しているぶどう畑が広がります。

ワインバーとショップを完備

隣接のワインバーでは資格を持つスタッフがお客様をお迎えします。
季節のイベント、試飲会など定期的に開催しております。

詳細を見る

この文章を500文字以下にして「自由な指示」にこのように指示を出します。

元の文章をWebサイト構造に変換してください。

制約：
・冗長な文章は禁止
・要約して短いフレーズにする
・情報は削らず圧縮する
・既存の情報は推測で補完しない

出力形式：
HERO:
VALUE:
SERVICE:
FEATURE:
PROOF:
CTA:

各項目は1〜3行で簡潔にまとめる
この後数回同じ内容を依頼します。

そして、出力されるのを待ちます。すると以下のような内容で出力されます。

ワイナリーの公式サイトを作成してください。
## サイト構成
①ファーストビュー
- キャッチコピー「赤坂生まれ　赤坂育ちの　閃七ワイン」を大きく表示
- サブテキスト「赤坂産ぶどうをメインに、国産100%日本ワインの製造を手掛けて50年」を配置
②最新情報セクション
- 「最新情報」の見出し
- 日付・カテゴリ・タイトルの一覧形式でお知らせを3件表示
- 「お知らせを見る」ボタンを設置
③トライベックワイナリーについてセクション
- 「トライベックワイナリーについて」の見出し
- ワイナリーの紹介文（見学・試飲無料の訴求）を掲載
- 「3.5ヘクタールの自家畑＋契約農場」のサブ見出しと説明文を掲載
## デザイン要件
- ワインらしい深みのある赤・ボルドーカラーをベースに使用
- 高級感と親しみやすさを両立したデザイン
- レスポンシブ対応

この作業を何度か繰り返してプロンプトを作成します。

Hirameki 7の文章生成AIにおいては、元となる文章に500文字の制限がございます。元となるページの文章が長い場合は、以下の部分に分けてプロンプトを作成しましょう。

１．ヘッダー/ヒーローセクション

ロゴや、グローバルメニュー、メインビジュアルやメッセージなどのパート

２．メインコンテンツ（情報量によってはこちらも複数に分割します）

商品やサービスの紹介、強み、お申し込みまでのフローなど

３．フッター

アクセス情報、連絡先、サイト内各ページへのナビゲーション

「自由な指示」には以下のように指示を出します。

元の文章は「ヘッダー/メインコンテンツ/フッター」の内容です。
この文章を元にAIにサイトを作らせるプロンプトを作成してください。

ポイント

✔AI文章生成でもトークンの消費があります。

✔ロゴ画像を登録している場合は、ロゴ画像の色味を考えてヘッダー、フッターの背景色を指定することをお勧めします。

✔Hirameki 7のAI機能以外でも、プロンプトの生成をしてもらうことも可能です。

❹ エディターの切替

エディターの切替は、Webサイト機能の「デザイン」メニューより行います。

詳しい変更方法については、こちらをご覧ください。

注意

１．ページ数カウントの注意事項

テンプレートの変更が「AIエディター」⇔「かんたんエディター」間で行われる場合、それぞれのエディターで作成されていたページは保存状態となります。そのため、「かんたんエディター」のテンプレートから「AIエディター」の複数ページが存在するテンプレートへ変更する場合、作成可能ページ数を超えてしまう分は作成されません。

例）シングルプラン（ページ作成可能数10ページ）を契約中に、「かんたんエディター」で作成したページが既に5ページ存在しており、7ページあるテンプレートへ変更した場合、7ページのうちページ一覧に並んだ時にトップページから5ページ目までのページが作成され、本来作成されるはずの2ページは作成されません。

また、既に作成可能なページ数が作成、公開されている状態で「AIエディター」⇔「かんたんエディター」間での変更を行おうとすると、作成可能ページ数不足のメッセージが表示されテンプレートの変更を行うことができません。

例）シングルプラン（ページ作成可能数10ページ）を契約中に、「かんたんエディター」で作成したページが既に10ページ存在している場合、「AIエディター」で編集するテンプレートへは、例えそのテンプレートが1ページであっても変更することができません。「かんたんエディター」で作成したページをリニューアルしたいという場合は、ページ数量変更オプションを一時的にお申し込みください。

２．公開予約中のページが存在している場合変更することができません。

既に作成されているページに「公開予約」が設定されているページが含まれますと、テンプレートの変更を行うことができません。変更を行う場合には、公開予約を解除してから行ってください。

❺ AIエディターを使った生成と編集

変更が完了すると、こちらの画面が表示されますので「エディタで編集」をクリックします。

エディター画面が開いてきますので、そちらに先程作成したプロンプトを入力して、生成を行います。

エディターの詳しい使い方はこちらをご覧ください。

今回は、先に作成したプロンプトを使って生成します。

プロンプトを入力して、AIによる生成が開始されると画像などはUnsplashから指定のプロンプトにあった内容で自動的にはめ込まれて行き、プロンプト内で指定した文章の文言などは、元の文章のテイストを損なわないよう、生成されます。

こだわりのある文章や画像があれば、現在も公開中のページは「かんたんエディター」で作成したページのままとなっておりますので、そちらよりコピー＆ペーストしてAIエディター内で編集を行います。

また、プロンプトの文字数制限により、今回抜けてしまったコンテンツを追加する場合は、以下のような方法でも追加が可能です。

最初に、こちらの構成と同じようなプリセットを探します。

プリセット内の「サービズ紹介」内に同じ構成のプリセットがありましたので、追加します。追加した上で、表示される「デザイン生成」をクリックして、以下のようにAIに指示を出します。

すると、以下のように画像や文言などをAIによって変更してもらえます。

もちろん、必ずしもAIによる生成で変更する必要はありませんが、フォントやフォントカラーなどを指定して生成することで、スピーディーに「かんたんエディター」からの移行が行えます。

なお、手動で変更する手段につきましては、以下ヘルプ記事をご覧ください。

編集中は、こまめに「保存」ボタンをクリックするようにしましょう。保存ボタンをクリック前にブラウザを閉じてしまうと、それまでの作業内容は失われてしまいます。

❻ 公開

編集が終わったら、プレビューを確認していよいよ公開です。

エディターの右上にある「公開」ボタンをクリックすると、「即時公開」か「予約公開」か選択画面が表示されますので、どちらを選んで「公開」ボタンをクリックします。

注意

⭕ 公開作業を行うことで、AIエディターで作成されたページへの切替が行われますが、「かんたんエディター」で作成されたページは削除されていません。「かんたんエディター」で作成したページを削除する場合は、もう一度「かんたんエディター」で使っていたテンプレートへ戻し、公開作業はせずにページを削除するようにしてください。

❼ やっぱり以前のままでいいやと思ったら

AIエディターを使ってページ編集を行ったものの、やっぱり以前の方が良いと思った場合もかんたんに戻すことができます。公開後でも、公開前でも「デザイン」から「かんたんに更新したい」を開き、一番左上に表示されるテンプレートの上にマウスを移動させると「元のデザインを再適用」ボタンをクリックします。

それまで、AIエディターで編集していた内容は保存されますが、再度AIエディターを選択する場合には、「AIでデザインを生成したい」または「自由にデザインしたい」で選択したてプレートより「元のデザインを再適用」ボタンをクリックしてください。

注意

「AIでデザインを生成したい」「自由にデザインしたい」で選択したテンプレートから他の「「AIでデザインを生成したい」「自由にデザインしたい」へ変更した場合は、元のデザインは保存されません。AIエディターとかんたんエディター間のテンプレート変更時のみ直前のテンプレート情報が保存されますのでご留意ください。

キーワードを入力して検索できます

目次