Wixでのホームページの作り方|事前準備から構築・公開まで|Webサイト制作・CMS開発|LeadGrid

Wixでのホームページの作り方|事前準備から構築・公開まで

CMS
目次

Wixは世界中で最も有名なホームページ制作ツールの1つです。しかし、「Wixでホームページ作る方法がわからない」という悩みを抱えている方も多いのではないでしょうか。

本記事では、Wixでのホームページ制作を検討している方やWix初心者の方向けに、Wixでホームページを作る方法を解説します。事前準備からサイトの構築・公開まで、手順ごとに説明するので、ぜひ参考にしてください。

Wixホームページの作り方①事前準備

Wixでサイトの構築に入る前に、以下のことをやっておく必要があります。

  • ホームページ制作の目的を設定する
  • Wixに登録する

ホームページ制作の目的を設定する

まずは、何のためにホームページを作りたいのか目的を明らかにしておきましょう。たとえば、集客したい、名刺代わりのホームページを作りたい、自社商品を販売したいなどです。

Wixでは、テンプレートを選択してからホームページの編集を行います。テンプレートの選択をするのは、アカウントの開設直後です。

Wixでは、テンプレートの変更が後からできません。あらかじめアカウント開設前に、ホームページ運営の目的をしっかりと定めておく必要があるのです。

目的にあった適切なテンプレートを選ぶために、ホームページ制作の目的は事前に決めておきましょう。

Wixに登録する

Wixに登録してアカウントを開設します。

Wixの公式サイトにアクセスして、「今すぐはじめる」をクリックしましょう。続いて、「新規登録(無料)」をクリックして、画面の案内に沿って登録作業を進めます。

登録作業は、メールアドレスを入力しパスワードを設定するだけです。

Wixホームページの作り方②料金プランの選択

続いて利用するWixの料金プランを選択します。

料金プランには、無料プランと有料プラン(プレミアムプラン)があり、有料プランの中でもさらに容量や機能によって細分化しています。

ホームページの目的と規模によって、最適なプランを選択しましょう。料金プランのアップグレード、ダウングレードはいつでも可能です。

Wixホームページの作り方③サイトの作成方法の選択

いよいよホームページを作成していきます。Wixでサイトを作成する方法は主に次の2つです。それぞれについて解説します。

  • Wix ADIで構築する場合
  • Wix エディタで構築する場合

Wix ADIで構築する場合

Wix ADIは、いくつかの質問に答えるだけで自動でホームページを作成できる機能です。

業種や職種、好みのデザインなどの質問に答えるだけで、AI がユーザーのニーズに合った最適なホームページを作成します。Wix ADIで構築する場合は、ほんの数分でホームページが作成できるのです。

さらに、Wix ADIで自動生成されたホームページは細かくカスタマイズしたり、新たな機能を追加したりすることができます。

Wix エディタで構築する場合

Wix エディタは、自分で編集しながらホームページを作成する機能です。

パーツの追加やカスタマイズ、色やテキストの変更など、自分で細かくサイトを構築・編集することができます。 

ドラッグ&ドロップの簡単な操作のみで編集できるため、直感的にホームページが作成できるのです。

Wixホームページの作り方④テンプレートを選択する

Wix ADIで構築する場合は、質問に答えるだけでホームページが完成するのでテンプレートの選択は必要ありません。Wix エディタで作成する場合には、使用するテンプレートを選択します。

Wixでは様々な業種や職種、ユーザーのニーズに合わせて、800種類以上のデザインテンプレートが備えられています。テンプレートは探しやすいようにカテゴリーごとに整理されています。

まずは「メニュー」から、自社の事業内容や目的に合った最適なカテゴリーを探しましょう。たとえばネットショップを開設したい場合には、サービスや商品ごとに複数あるネットショップ向けのテンプレートから選べます。

自社の業種・職種やホームページ制作の目的に合わせて、テンプレートを選びましょう。ただし先述の通り、テンプレートは後から変更することはできません。テンプレートを変更する場合は、ホームページの内容も1から作り直しになってしまうため、慎重に選ぶ必要があります。

Wixホームページの作り方⑤コンテンツの追加

テンプレートに合わせて、コンテンツを追加していきます。コンテンツとして追加するものは、たとえば次のようなものです。ある程度事前に準備をしておくと、ホームページ制作がスムーズに進みます。

  • トップページ
  • 会社情報やプロフィール
  • 画像や動画
  • キャッチコピーや説明文

トップページ

トップページには、ビジネス名やホームページの概要などの基本情報を掲載します。トップページの編集画面ではテンプレートに合わせて、画像やテキスト、背景、ページの追加ができます。

トップページの作成では、ページ上部の「ファーストビュー」が重要です。ファーストビューとは、ホームページ訪問者が一番最初に目にする部分を言います。 ファーストビューには、訪問者の目を引く画像やキャッチコピーを入れるのが効果的です。

会社情報やプロフィール

会社情報やプロフィールを記載した「Aboutページ」も必要です。Aboutページでは、ビジネスの成り立ちやこれまでの経歴・企業理念・目標など紹介します。

Aboutページを充実させることは、ユーザーの信頼や親近感を得ることにつながります。

画像や動画

画像や動画も、重要なコンテンツです。画像や動画にこだわることで、テンプレートを利用していてもオリジナリティの高いホームページが作れます。

画像や動画はテンプレートに沿って配置していくことになるため、画像や動画にこだわるのであればテンプレート選びの時点で写真や動画が映えるテンプレートを選ぶことも重要です。

また、Wixはポートフォリオサイトとしても人気です。Wixをポートフォリオサイトとして利用する場合には、写真・動画ポートフォリオ用にデザインされた40種類以上の無料テンプレートが利用できます。

Wixには写真や動画を最適な形で公開できるテンプレートに加え、最大 20GBの大容量クラウドストレージが備えられているため、写真や動画データの管理も簡単です。 

キャッチコピーや説明文

ホームページの効果を高めるためには、ユーザーの目を引くキャッチコピー・説明文・ストーリーテリングが重要です。

Wixではテンプレートに合わせて、自在にテキストのデザインや配置を変えられます。ホームページのどこにどのようなテキストを追加するのか、事前に決めておくと編集がスムーズです。

Wixホームページの作り方⑥デザインの編集

コンテンツが追加できたら、全体のデザインを調整していきましょう。デザインの編集は基本的にドラッグ&ドロップの簡単な操作のみです。デザインの編集では、次のようなことをします。

  • パーツの追加や移動
  • 画像・動画の追加
  • ページの追加・編集
  • 最先端のデザイン機能の追加
  • テキストの編集
  • スマホへの最適化

パーツの追加や移動

パーツの追加や移動を行います。操作はドラッグ&ドロップのみです。HTML や CSS などの専門知識は一切不要で、誰でも感覚的に編集することができます。

一方で、テンプレートごとにカスタマイズできる範囲に制限があります。コーディングによるホームページ制作やWordPressなどのCMSを使ったホームページ制作に比べると、デザインの自由度は低いと言えるでしょう。

画像・動画の追加

画像や動画を追加しましょう。Wixでは自分で用意した画像や動画はもちろん、1万点以上の無料写真・動画素材があるWixフリー素材も利用可能です。手元に素材がなくてもすぐにホームページ制作ができます。

Wixは切り抜きや色彩調節などができる便利な画像編集ツールも備えているため、細かいカスタマイズもできます。

ページの追加・編集

Wixでは、ページの追加も柔軟にできます。ページを追加するには、画面上部のナビゲーションバーから、「メニューを管理」>「ページを追加」を選択するだけです。

新規ページを追加する際には、ページの用途に合わせて複数のページデザインから選べる仕様になっています。

最先端のデザイン機能の追加

トップページのデザインを洗練させましょう。Wixでは、トップページに画像のスライドショーや動画を埋め込むこともできます。

3Dエフェクトやスライドショー、動画の組み込みといった最先端のデザイン機能も追加できます。カスタマイズは全てドラッグ&ドロップの操作でできるため、誰でも簡単に魅力的なトップページが作れるのです。

テキストの編集

テキストを編集しましょう。Wixでは、テキストの色やサイズ、フォントスタイルを自在に変更できます。

操作は、ホームページ上の好きな位置にテキストパーツをドラッグするだけです。パワーポイントのような感覚で、誰でも直感的にテキストを追加できます。

また、フォントの追加も可能です。フォントファイルをWixにアップロードすることで、好みのフォントを追加してテキスト編集に使用できます。

スマホへの最適化

スマホへの最適化もしておきましょう。操作はワンクリックでできます。

PCで作ったホームページをスマホに最適化させる場合には、エディタトップメニューの「設定」>「モバイル最適化を有効にする」をクリックして完了です。

PC版とスマホ版を別々にカスタマイズすることもできるため、それぞれでデザインを微調整したい場合にも対応できます。

Wixホームページの作り方⑦必要なビジネス機能を追加

続いて、必要なビジネス機能を追加します。追加できるビジネス機能には、たとえば次のようなものがあります。

  • ブログ機能
  • ネットショップ機能
  • 予約機能

ブログ機能

Wixで作成したホームページにブログ機能「Wix ブログ」を追加するだけで、ブログ開設ができます。

一部テンプレートには、「Wix ブログ」が初めからインストールされています。インストールされていない場合には、エディタから直接追加しましょう。

ネットショップ機能

ネットショップ機能は、有料プランのビジネス&Eコマースプランを契約することで利用できます。ビジネス&Eコマースプランを契約した上で、ネットショップ機能「Wix ストア」を追加しましょう。

「Wix ストア」を追加することで、オンライン決済機能・商品管理・受注管理などの機能が使えるようになります。

予約機能

ネット予約機能も、有料プランのビジネス&Eコマースプランを契約することで利用できます。

ビジネス&Eコマースプランを契約した上で、予約型サービス向け機能「Wix ブッキング」を追加しましょう。

予約状況や顧客情報の管理も簡単です。オンライン決済機能を導入すれば、予約時に料金の支払いを受け付けることもできます。

Wixホームページの作り方⑧ホームページを公開する

ホームページの構築・デザイン・必要な機能の追加が完了したため、いよいよホームページを公開します。公開前にしておくべきことと、公開後にすべきことも合わせて解説します。

  • SEO対策をする
  • ホームページを公開する
  • 効果測定をする

SEO対策をする

ホームページ公開後により多くの人にホームページを見てもらうためには、SEO対策が欠かせません。ホームページが完成したら、SEO対策の設定も忘れずにしておきましょう。

タイトルタグや見出しタグ、メタディスクリプションの設定など、基本的なSEO対策の設定をします。

ホームページを公開する

ホームページが公開できる状態に仕上がったら、プレビュー機能で最終確認を行いましょう。

終わったら「公開」ボタンをクリックして、ホームページを公開します。

効果測定をする

ホームページ公開後の効果測定も重要です。

SEOについては、Wix のSEO対策機能「Wix SEO Wiz」を使って効果測定ができます。定期的にサイトの SEO 対策状況をチェックし、改善をしましょう。

まとめ

Wixでのホームページの作り方を紹介しました。Wixでは、専門的なスキルなしで誰でも感覚的におしゃれなホームページが作れます。

SEO対策やホームページ公開後の定期的な効果測定も欠かさずに行うことで、より効果的なホームページを目指しましょう。

集客を目的にホームページ作成をしたい場合には、LeadGridもおすすめです。

LeadGridはランディングページやWebページ制作など、運用に必要な機能を備えたCMS(コンテンツ管理システム)です。LeadGridではランディングページの要素をブロック化しており、ブロックをドラッグ&ドロップすることで簡単に要素の入れ替えを試せます。

またページを見たまま編集できる「ページ編集機能」やドラッグ&ドロップで簡単にフォームを作成できる「フォーム管理機能」など、Webの知識がなくても担当者ベースで施策が可能です。

LeadGridの詳細はこちら

プロフィール画像
記事を書いた人
LeadGrid BLOG編集部

LeadGrid BLOG(リードグリッド ブログ)は、リード獲得に役立つ情報を発信するWebマーケティングメディアです。

Web制作・CMS開発・
Webマーケティングに関して
お気軽にご質問・ご相談ください

多くのWeb制作、オウンドメディア制作、
Webコンサルティング、コンテンツマーケティング
の実績から制作から運用・改善まで
トータルでサポートします。

  • 資料ダウンロード

    リード獲得やサイト制作、オウンドメディア制作などに役立つ資料を無料で提供しています。

    資料ダウンロード
  • 無料相談・お問い合わせ

    LeadGridやWebサイト制作に関するご相談、お問い合わせはこちらから。

    無料相談・お問い合わせ
  • 無料デモお試し

    LeadGridのCMSやメディア、イベント管理などの基本機能を2週間無料で体験いただけます。

    無料デモ体験
資料ダウンロード 無料相談・お問い合わせ