Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WebflowからWordPressへの移行方法(ステップバイステップ)

Webflowはコストが高く、サイトオーナーにとっての柔軟性が限られているため、現在多くのユーザーがWebflowからの移行を望んでいる。

WebflowからWordPressへの移行は複雑に見えますが、それだけの価値があります。WordPressは柔軟性があり、価格も手ごろで、プラグインやテーマ(コーディング必須)により多くのカスタマイザーオプションを提供します。また、WordPressはサイトを完全にコントロールすることができます。

WebflowからWordPressへの移行は簡単ではありません。このガイドでは、ステップバイステップでサイトの移行をお手伝いします。

WordPressのセットアップと、Webflowからのコンテンツの移行方法を学びます。私たちのゴールは、可能な限り簡単かつスムーズに移行できるようにすることです。

Migrating from Webflow to WordPress

ここでは、WebflowからWordPressにサイトを移行する手順を簡単に説明します:

なぜWebflowからWordPressへ移行するのか?

使いやすいデザインツールとシンプルなサイト作成で多くのユーザーに選ばれているWebflow。

しかし、すぐにWebflowの限界に気づく。Webflowは、カスタマイザーが少なく、統合が制限されたクローズドなプラットフォームであり、価格設定も強引だ。

そのため、ユーザーにはWebflowを避け、代わりにWordPressを使うことを推奨している。

私たちは、すべてのトップ・サイト・ビルダーを使用し、テストしてきましたが、WordPressの右に出るものはありませんでした。多くの有名ブランドを含む、すべてのサイトの43%以上を動かしています。

ここでは、WordPressがWebflowよりもはるかに優れた選択肢であることをいくつか紹介します:

  • 費用対効果:WordPressには、手頃な価格のホスティングサービスオプションが多数用意されています。無料でオープンソースのプラットフォームなので、コストをコントロールすることができます。
  • カスタマイザー:優れたコード不要のページビルダー、何千ものテーマ(デザインテンプレート)、そして多くのプラグイン(59,000以上)を備えています。これらのツールを組み合わせることで、無限のカスタマイズオプションが得られます。
  • 統合:最も人気のあるサイトビルダーであるWordPressは、ほとんどのサードパーティツールとの統合が可能です。あらゆるマーケティング、eコマース、成長ツールをサイトで利用できる。
  • スケーラビリティ:サイトの成長に合わせてホスティングプランをアップグレードし、必要なリソースのみをお支払いいただけます。

WordPressに切り替えることで、よりコントロールしやすく、より良い設定が可能になります。サイト管理はより簡単になり、長期的には費用も節約できます。

それでは、この移行をスムーズに成功させるためのステップを紹介しよう。

ステップ1: WordPressホスティングサービスに申し込む

移行を開始するには、WordPressホスティングサービスプロバイダーが必要です。良いホスティングサービスは、あなたのサイトがスムーズに動作し、トラフィックを処理できることを保証します。

WordPressが推奨する公式ホスティングサービス、Bluehostのご利用をお勧めします。Bluehostは現在、ユーザーにドメイン名を無料で提供し、ウェブホスティングサービスを大幅に割引しています。

月額1.99ドルから始められるので、手頃で信頼できる選択肢となる。

代替:他のオプションをご希望の場合は、HostingerまたはSiteGroundをご検討ください。どちらも定評があり、優れたパフォーマンスを提供しています。

このチュートリアルのために、Bluehostのスクリーンショットを示します。しかし、基本的なプロセスは、すべてのトップWordPressホスティングサービスに似ています。

Bluehostのサイトに移動し、’今すぐ始める’ボタンをクリックします。

Bluehost website

その後、料金ページが表示され、プランを選択するよう求められます。

ベーシックプランはほとんどのサイトに適しています。

Choose a hosting plan

選択」をクリックしてプランを選び、次に進みます。

次のステップでは、Bluehostは、ドメインを選択するように求められます。

Webflow サイトで使用したカスタムドメインがすでにある場合は、「所有するドメインを使用」ボックスに入力できます。

Choose domain name

または、ここで無料のドメイン名を選択するか、「後でドメインを作成する」をクリックしてこのステップをスキップすることもできます。

次に、個人情報と支払い情報を入力して購入を完了します。

Bluehostは、あなたのログイン詳細が記載されたメールを送信します。あなたはホスティングアカウントのダッシュボードにログインするためにそれらを使用することができます。

最初のログイン時に、Bluehostは自動的にあなたのためにWordPressをインストールします。WordPressダッシュボードを起動するには’サイトを編集’ボタンをクリックします。

Login to WordPress by click on the Edit Site button in Bluehost

WordPressのインストールでお困りですか?ステップバイステップの詳しい手順については、WordPressインストールチュートリアルをご覧ください。

WordPressのインストールが完了したら、次はサイト用のテーマ(デザインテンプレート)を選びます。

ステップ2:WordPressテーマを選ぶ

WordPressをインストールしたら、次はサイトのテーマを選びます。テーマはサイトのルック&フィールをコントロールします。

WordPressのテーマは有料、無料を問わず何千種類もあります。

Search new WordPress themes

しかし、新規ユーザーは多くの選択肢に圧倒されるかもしれません。完璧なテーマを選ぶために、私たちのチームは最も人気のあるWordPressテーマのリストをまとめました。

余白の多いシンプルなレイアウトを選ぶことをお勧めします。私たちのビジネスのためのサイト構築の経験から、クリーンで最小限のレイアウトは、よりプロフェッショナルでユーザーフレンドリーに見えることがわかっています。

選びすぎは禁物だ。より良いテーマが見つかれば、いつでもWordPressテーマを変更することができます。

この投稿の後半では、ノーコードのページビルダーを使ったWordPressのページデザインについて説明する。サイトのデザインをさらにコントロールできるようになります。

とりあえず、Webflowからデータをエクスポートして、新しいWordPressサイトにインポートできるようにしましょう。

ステップ 3: Webflow サイトのエクスポート

Webflowではコンテンツの一部をエクスポートすることはできますが、すべてをエクスポートすることはできません。

輸出できるものは以下の通り:

  • サイトエクスポートには、HTML、CSS、JS、画像/メディアが含まれます(Workspaceプランのみ)。
  • ブログ投稿などのCMSコンポーネントをエクスポートします。

Webflow サイトのエクスポート

Webflow ページを WordPress サイトに直接インポートすることはできません。ただし、WordPressにコンテンツを移行する前に、サイトを保存しておくとよいでしょう。

Webflow Workspace プランをご利用の場合、Code Export 機能を使用してサイトをエクスポートし、コンピューターに保存することができます。

Webflow アカウントにログインし、Designer ツールを起動します。

Launch Webflow designer

これで Webflow Designer UI に入ります。

マウスを画面の右上に持っていき、「Export code」ボタンをクリックします。

Export website code

エクスポートコードのポップアップが開きます。

ポップアップの下部にある「Prepare ZIP」ボタンをクリックして続行します。

Prepare zip for download

その後、Webflowがファイルを作成し、コンピューターにダウンロードすることができます。

注: ワークスペース・プランをご利用でない場合は、ページをコンピューターに手動で保存する必要があります。または、HTTPSrackウェブサイトコピアを使用してサイトをクロールし、すべてのページをコンピューターにダウンロードすることもできます。

ステップ4:ブログ投稿のエクスポート

Webflowでは、ブログ投稿のようなCMSコンポーネントをエクスポートし、WordPressにインポートすることができます。

ウェブフローデザイナーで「CMS」タブ(左ツールバー)を開き、「ブログ投稿日」をクリックします。

Webflow export blog posts

次に、上部にある「エクスポート」ボタンをクリックして、ブログ投稿をCSVフォーマットでダウンロードします。

ステップ5:WordPressでウェブフローページを再作成する

これで、コンピューターにWebflowのコンテンツが保存されたので、新しいWordPressサイトにコンテンツを取り込むことができます。

Webflowの個々のページをWordPressサイトに直接インポートすることはできませんが、簡単に再現することができます。

そのためには、SeedProdのような ノーコードページビルダーが必要です。SeedProdは、コードを書くことなく魅力的なウェブページを作成できるドラッグ&ドロップ式のデザインツールです。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のチュートリアルをご覧ください。

プラグインを有効化したら、WordPress管理エリアのSeedProd ” ランディングページに移動し、「新規ランディングページを追加」ボタンをクリックします。

Add new landing page button

次に、テンプレートの選択を求められます。

SeedProdにはいくつかの美しいテンプレートが用意されています。あなたが再現したいページに似たものを選んでください。

SeedProd choose template

次に、ページの名前を入力し、URLスラッグを選択します。

ウェブフローで使用していたページと同じURLスラッグを使用することをお勧めします。これにより、検索トラフィックとSEOランキングを維持することができます。

Page name and slug

Save and Start Editing the Page(ページを保存して編集を開始する)」をクリックして続行します。

これにより、SeedProdページビルダーのインターフェースが表示されます。マウスを使って画面上の任意の場所に移動し、項目をクリックして編集を開始することができます。

また、左カラムから表示したい場所にドラッグ&ドロップして新しい要素を追加することもできます。

SeedProd page builder UI

SeedProdはどんなページでも簡単にデザインできます。レイアウトの変更、カスタマイザーの使用、ロゴの追加などが可能です。

詳しくは、WordPressでランディングページを作成する方法のチュートリアルをご覧ください。

別のページビルダーを試してみたいですか?Thrive ArchitectもWordPress用の優れたコード不要ページビルダーです。

Editing a page in Thrive Architect

ステップ6:WordPressにブログ投稿をインポートする

幸いなことに、WebflowからWordPressへのブログ投稿のインポートはもう少し簡単です。

WP All Importプラグインをインストールして有効化する必要があります。有効化した後、WordPress管理エリアのAll Import ” New Importページにアクセスしてください。

Upload CSV file to import

ファイルをアップロード」オプションをクリックし、先ほどダウンロードしたCSVファイルを選択します。

プラグインは自動的にコンテンツタイプ(投稿)を検出し、あなたのためにそれを選択します。

Imported file

次のステップのために「ステップ2に進む」ボタンをクリックしてください。

プラグインがファイル内のデータのプレビューを表示します。続行」をクリックして次のステップに進みます。

ここで、フィールドをWordPressの投稿フィールドにマッピングするよう求められます。例えば、名前フィールドをWordPressの投稿タイトルエリアにドラッグすることができます。

Map fields

WordPressの対応エリアとフィールドを一致させたら、「ステップ4に進む」ボタンをクリックします。

次に、投稿にユニークな識別子を定義する必要があります。自動検出」ボタンを使ってIDを生成してください。このIDはWordPressが内部的に使用するもので、あなたのサイトに表示されることはありません。

Auto-detect unique identifier

最後に「インポートの確認と実行」をクリックして完了です。

インポートが完了すると、プラグインが通知します。

Import complete

ステップ 7: Imagelyのインポート

WP All Importは自動的にWebflowからWordPressに画像をアップロードしません。

Web サイトには Webflow サイトでホスティングサービスされた画像が表示されたままとなり、Webflow Web サイトが削除されたときに問題となります。

幸い、プラグインを使って外部画像をWordPressのメディアライブラリにインポートする簡単な方法がある。

まず、Auto Upload Imagesプラグインをインストールして有効化する必要があります。

有効化した後、投稿 ” すべて投稿ページに移動します。ブログ投稿をすべて選択し、「一括操作」ドロップダウンメニューから「編集」を選択します。

Bulk update posts

Apply(適用)」ボタンをクリックして続行する。

WordPressは、すべての投稿にクイック更新オプションを表示します。更新」ボタンをクリックするだけで、WordPressはすべてのブログ投稿を変更することなく更新します。

Bulk update all posts

これによりアップロード機能が起動し、プラグインはブログ投稿で見つけた外部画像をメディアライブラリにインポートします。

詳しくは、WordPressで外部画像を簡単にインポートする方法のチュートリアルをご覧ください。

ステップ8:ドメイン名設定の変更

旧Webflowサイトでカスタマイザーを使用していた場合、新しいWordPressサイトにカスタマイザーを指定することができます。

そのためには、ドメインのネームサーバー設定を変更する必要があります。DNSまたはドメインネームサーバー設定は、ドメイン名をホスティングサービスに向けます。

WordPressホスティングサービスプロバイダーは、あなたが使用する必要があるネームサーバー情報を提供します。通常、以下のようになります:

  • ns1.bluehost.com
  • ns2. bluehost.com
  • ns3. bluehost.com

詳細については、ドメインネームサーバーの変更方法に関するチュートリアルを参照してください。

WordPressではパーマリンクを変更することで、サイトにSEOに適したURL構造を選択することができます。

WordPressのパーマリンクを旧Webflowサイトと同じURL構造に一致させる必要があります。

そのためには、WordPress管理エリアの設定 ” パーマリンクのページにアクセスします。

Choose permalinks

URLをWebflowのURL構造と一致させるために、投稿名オプションを選択する必要があります。

パーマリンク設定を更新するには、「変更を保存」ボタンをクリックするのをお忘れなく。

ステップ10:WordPressの必須プラグインをインストールする

コンテンツをサイトにインポートしたら、次はWordPressに欠かせないプラグインをインストールしましょう。

プラグインはWordPressサイトのアプリのようなものです。携帯電話のアプリのように、プラグインはWordPressサイトに新しい機能や特徴を追加します。

以下は、新しいWordPressサイトに必要不可欠な機能を追加する、最も人気のあるWordPressプラグインです:

  • WPForms WordPressサイトにお問い合わせフォームを追加できます。
  • WordPressのためのAll In One SEO:WordPressのための最も包括的なSEOツールキットです。検索エンジンからより多くの無料トラフィックを得るのに役立ちます。
  • Duplicator:WordPressの自動バックアップを設定できます。バックアップを自動的にクラウドにアップロードし、必要に応じて1クリックで復元することもできます。
  • MonsterInsights:WordPressにGoogleアナリティクスを簡単にインストールでき、ダッシュボードにわかりやすいサイトトラフィックレポートを表示します。
  • PushEngage:モバイルやデスクトップ端末のユーザーに即座に通知を送りたいですか?PushEngage は市場で最高のプッシュ通知サービスで、サイト訪問者を呼び戻し、ページビューを増やし、コンバージョンを高めるのに役立ちます。

新規WordPressサイトを成長させるためのツールやヒントがもっと必要ですか?すべてのタイプのサイトに必須の WordPress プラグインのリストをご覧ください。

WordPressを学ぶ(無料リソース)

WordPressは非常に使いやすいが、時にはナビゲーションの手助けが必要な場合もある。

WordPressにすぐに慣れるための学習リソースをご紹介します:

  • WordPressトレーニングコース:初心者のためにデザインされた無料のWordPress動画トレーニングコース。新規ユーザー向けにWordPressの基本をカバーする33のレッスンがあるWordPress 101から始めることをお勧めします。
  • YouTubeのWPBeginner:私たちの YouTube チャンネルには 931 以上の動画があり、972,000 人の購読者がいます。WordPressでビジネスを成長させるための詳細な動画チュートリアル、ヒントやコツ、実践的なアドバイスを提供しています。
  • WPBeginnerソリューションセンターです:どのプラグインやツールを使おうか迷っていませんか?私たちのソリューションセンターは、私たちのチームによって徹底的にテストされ、レビューされた最高のWordPressツールとプラグインのキュレーションコレクションです。
  • WordPress用語集: WordPressでよく使われるキーワードを初心者向けに解説した辞書です。WordPress初心者がWordPress用語に慣れ親しむための理想的な場所です。

特定のWordPressトピックについてヘルプが必要ですか?Googleで質問を入力し、最後に「WPBeginner」を追加してください。

私たちは過去15年以上にわたってWordPressのリソース、チュートリアル、ハウツーガイドを公開してきました。そのトピックに関するステップバイステップのチュートリアルがすでにある可能性が高いです。

代替案Webflow 移行の専門家の支援を受ける

Webflowはクローズドな独自プラットフォームであり、WordPressへのサイト移行はまったく容易ではない。

上記のチュートリアルのステップに従うことは、初心者にとって時間がかかり、ストレスになる可能性があります。手順を踏んでも、すべてのデータをWordPressに転送できないかもしれません。

もっと簡単な解決策は、WordPressのプロに移行を手伝ってもらうことだろう。

あなたはプロのWordPress開発者を雇うことができ、あなたの必須を議論する。その後、移行に関するトラブルシューティングのために時間単位で報酬を支払うことができます。

例えば、プレミアム WordPress サポートサービスを選択し、開発者にオンデマンドで移行支援を依頼することができます。

WPBeginner Pro Services

また、クイックサイト立ち上げサービスも提供しており、お客様のニーズに合った完全カスタムで魅力的なWordPressサイトをデザインします。その後、開発時間アドオンを購入することができ、私たちのチームはWebflowの移行も処理することができます。

これらのサービスに関するご質問は、ウェブサイト・デザイン・サービスのページでサポート・エージェントにお問い合わせください。

この投稿がWebflowからWordPressへの移行のお役に立てば幸いです。WordPressサイトへのトラフィックを増やす方法についてのチュートリアルや、WordPressを使ってオンラインでお金を稼ぐさまざまな方法をすべてご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。