Q.StudioのデザインはWordPressでどこまで再現できますか？

Studioの管理画面に、WordPressへ書き出すボタンはありません。デザインデータやページ構成、HTMLやCSS、CMSのコンテンツを他社サービスへ丸ごと書き出す機能自体が、用意されていないためです。そのため、画面の装飾やレイアウトをWordPressへ移すには、移行先の環境で新しくテーマやブロックを配置して作り直す必要があります。

紛らわしいのが、StudioのWordPressインポート機能です。名前だけ見るとWordPressへ移す機能に思えますが、向きは反対で、WordPressから書き出したXMLファイルを使い、投稿記事や固定ページをStudioのCMSへ取り込むためのものです。StudioからWordPressへ移る場面では使えません。

WordPress側の「エクスポート」と「インポート」も、移せるのは記事などのコンテンツに限られます。WordPress同士で引っ越す場合でも、サイトのデザイン、テーマ、プラグインは一緒に運ばれません。見た目はテーマで作り直す、という点はどこから移っても同じです。

あります。Studioの公開ページをいったんFigmaに取り込み、それを見本にWordPressで組む方法です。いちばん手軽なのは、公開ページのスクリーンショットをFigmaへ画像として貼る方法です。取り込むにはそのファイルの編集権限が要ります。ただし画像のままなので、文字や部品を一つずつ動かして直すことはできません。

部品の単位で扱いたいなら、html.to.designというFigmaプラグインがあります。公開ページのURLを入力すると、そのページをFigmaへ取り込めます。ログインが必要なページは、ブラウザー拡張のほうを使いましょう。Studioで作ったサイトでどこまで正しく取り込めるかは保証されていないので、取り込んだ後に元の画面と見比べてください。

Figma上にデザインを落とし込めると、画面ごとの配色やフォントサイズを整理しやすくなり、コメント機能を使って社内や制作会社と修正箇所の意思疎通を図れる利点があります。画面の上に直接コメントを付けられるので、「この余白はStudioと同じに」「この見出しは変えたい」といった指示を場所ごとに残せます。

ちなみに、StudioのFigma連携はFigmaのデザインをStudioへ取り込む向きの機能で、Studioの画面をFigmaへ出す機能ではありません。WordPress側では、ブロックテーマを有効にしたうえでサイトエディターを使えば、ブロックで全体のレイアウトを組み、書体や配色を調整できます。

プラグインの変換だけでは仕上がらず、変換したあとに手で整える工程が残ります。変換ツールは実際にあり、UiChemyはFigmaのデザインを編集できるページに、YotakoはWordPressのテーマに変換します。とはいえ、これらのツールを使っても完全な状態で仕上がるわけではありません。UiChemyは複雑なレイアウトだと完全には再現できない場合があるとしており、Yotakoも、AIで仕上がらなかった部分を手で整える手順を用意しています。

UiChemyでは、使うページビルダーによって変換の方法が変わります。AI Express ModeはElementor向けで、GutenbergやBricksで使うならClassic Modeです。UiChemyのモード比較を見ると、Classic Modeではデザインの要素と部品を対応付けたうえで、見た目の調整、ホバーなどの状態、動きは書き出した後に手で仕上げます。AI Express Modeでは、これらを変換の途中で当てはめます。

画面幅ごとの表示も調整の対象です。UiChemyには文字サイズや余白を細かく直す機能があり、Yotakoでは同じページにパソコン用とスマートフォン用のデザインを組み合わせます。

Studioから移る場合は、この前にStudioの画面をFigmaへ起こす手間が加わります。Studioから直接コードを移行できない以上、Figma変換プラグインはあくまで大まかな配置を流し込むための下準備として捉えるのが無難です。ツールは手間を減らす道具であって、Studioで作った動きやスマートフォンでの見え方は、変換後に一つずつ確かめて直すことになります。

弁護士や税理士、司法書士の事務所サイトをWordPressへ移すとき、デザインより先に決めておきたいのは、相談者の個人情報をどこに残すかです。Studioでは、問い合わせ内容をデータベースに保持せず、通知メールの送信だけで完結させる運用が選べます（ただし、その場合は画像やPDFなどの添付ファイルを受け取れなくなります）。一方、WordPressで定番のContact Form 7も、単体ではデータベースへ送信メッセージを記録しません。

送信ログを管理するためにFlamingoプラグインを導入すると、サーバー上のデータベースに相談内容が保存されます。Flamingoを入れたまま特定のフォームだけ保存したくない場合は、そのフォームの追加設定に「do_not_store: true」と書けば、そのフォームの内容は残りません。WordPressで添付を受けるかどうかも、このタイミングで決め直します。

保存期間については、個人情報の保存期間に一律の決まりはありません。ただし、使う必要がなくなった個人データは遅滞なく消すよう努めることが、事業者に求められています。Studioに溜まっている回答は、CSVでダウンロードしたうえで、ゴミ箱へ移してから「完全に削除」を実行すれば消えます。

あわせて、新しいサーバーで公開前に確かめるときは、パソコンのhostsファイルで新サーバーを向け、実際のフォームから送信して、メールが届くことと、保存しない設定ならデータベースに残っていないことの両方を見てください。

LP1ページでも、費用はページに載っている制作量と、WordPressの管理画面から更新できるようにする箇所の多さで変わります。同じ1ページでも、セクションが多く縦に長いLPや、価格表や実績の欄を自分で書き換えたいLPは、そのぶん費用が上がる料金体系になっています。

問い合わせフォームも、制作会社によって基本料金に入る場合と別料金の場合があります。LPに申し込みフォームが付いているなら、見積もりを頼む時点でその旨を書いておきましょう。

JavaScriptやCSSを用いたスクロール演出、要素の出現アニメーションの実装も、コーディング費用のお見積もりを左右する主要な項目です。Studioの出現アニメーションは、画面幅ごとに要素の大きさを変えていると、スマートフォンで開始位置が画面の外になって表示されないことがあります。移行するなら、どの画面幅でどう動いていたかも伝えておくと、見積もりと仕上がりのずれを減らせますね。

はまれぽの料金には月額制と単発制があり、単発制は移すだけの契約です。公開後の無償修正とソース一式の引き渡しは付きますが、継続の保守は付きません。費用は、料金ページ（/ryokin/）の計算例と無料サイト診断（/shindan/）で確かめられます。無料診断ではページ数やフォームの有無を聞き取り、料金表をもとに概算を出してくれます。ただしこれは目安で、正式な金額はページの作りや外部サービスとの連携を聞いたうえで決まります。

保守費用に入っていることが多いのは、WordPress本体とプラグインの更新、バックアップ、不具合が出たときの修正や復元です。テーマの更新まで受け持つサービスもあります。更新の前にバックアップを取り、テスト環境で動作を確かめてから本番に反映するところまで含めている会社もあります。

逆に、保守費の範囲外になりやすいのが、機能の追加やページの内容の書き換えです。ただし、保守契約を結んでいても対応範囲には各社で細かな条件があります。たとえば、復元の回数や修正にかかる工数に制限を設け、それを超えると別に見積もるプランもあり、条件はサービスやプランによって異なります。契約前に、復元の回数と修正の上限を確かめておけば、トラブルのときに慌てずに済みます。

WordPressでは、安全に使い続けるためにテーマとプラグインを最新に保ち、自動更新を有効にする前に、問題が起きたら以前のバージョンへ戻せる状態にしておくことが勧められています。他社が作ったサイトを引き継ぐ場合は、保守を始める前にサイトの状態を調べる初期調査が入り、その結果で見積もりが出ます。