MoteRakuの真骨頂は、AIが作ったTOPページのデザインをテーマの影響ゼロの白紙キャンバスにそのまま貼れることです。テーマのCSSと混ざって崩れる…という定番のつまずきがありません。この記事では、TOPページを作ってサイトの顔にするまでを解説します。
手順1. AIにTOPページを作ってもらう
お使いのAIに、サイトの内容を伝えて頼みます。例えばカフェなら：
カフェのホームページのTOPページを、HTMLとCSSで作ってください。
・ファーストビュー（お店の名前とキャッチコピーと来店ボタン）
・お店のこだわり3つ、メニュー紹介、アクセス、の各セクション
・一番上に {HEADER}、一番下に {FOOTER} とだけ書いてください
・スマホでもきれいに見えるレスポンシブで
・<body>の中身だけでOK。HTMLとCSSは分けて出してください
{HEADER} {FOOTER} と書いておけば、前回作った共通パーツがその位置に入ります。
手順2. 新規ページに貼ってプレビュー
MoteRaku → 新規ページ追加 でページを作り、HTML欄とCSS欄に貼り付けます。編集画面の下にプレビューが出るので、PC・タブレット・スマホの3つの幅で確認しましょう。プレビューの端をドラッグすれば好きな幅にもできます。
気に入らない部分があれば、コードをコピーしてAIに「ここをこう変えて」と頼み、返ってきたコードを貼り直すだけ。コードを読める必要はありません。
手順3. フロントページに設定する
ページ編集画面の右サイドバー「MoteRaku 反映先」でフロントページをONにするか、MoteRaku → 表示設定 の「フロントページ」でこのページを選びます。これでサイトのトップURLがこのページになります。
MoteRakuのフロントページ設定は、WordPressの表示設定やテーマの設定より優先されます。テーマを読み込む前にページを切り替えるので、テーマ側から干渉されることがありません。
手順4. SEOも忘れずに
編集画面の「MoteRaku SEO設定」で、検索結果に出るタイトルと説明文（ディスクリプション）を設定できます。文字数カウントが付いているので、目安に収めながら書けます。OGP画像（SNSでシェアされた時の画像）はアイキャッチを設定するだけでOKです。
TOPページができたら、次は会社概要ページを追加してみましょう。
当記事に対してのコメントをご記載くださいませ！