集客

Wixの使い方!超簡単なホームページ作成ツールだから迷わない!

Wixの使い方!超簡単なホームページ作成ツールだから迷わない!

ホームページを作りたいけど、発注すると高いし、可能な限りお金をかけずに自分で作りたいですよね。そんなあなたに、世界190か国で1億6,000万人以上に選ばれているWixの凄さと使い方を紹介します。Wixは気軽にホームページが作れることを押していますが、実際にWixを使用してみるとWixの凄さにビックリします。

本文ではウェブサイトを作ったことがない人でも分かるように、動画や画像を使って解説しています。まだWixを使ったことがない人はぜひ一度試してみてください。

wixのロゴ

この記事を読むと分かること
  • なぜホームページ作成ツールの中でWixが良いのか
  • Wixの使い方
  • Wixで良い印象のホームページを作る方法

Wixとは?

Wixのメリット

まずは動画を観てください!ITの知識がなくても感覚的にホームページが作れそうだなということが分かるはずです!

Wixは世界中で使われているホームページ作成ツールです。

Wixのメリット
  • 専門知識が要らないので簡単にホームページが作れる
  • テンプレートを選べば一から作る手間が省ける
  • ホームページに必要な機能は全て揃っている
  • モバイル版に自動変換してくれる

全て動画の中で解説されていましたね。なんとなくのイメージは沸いていると思います。次にWixのデメリットを紹介します。

Wixのデメリット

Wixのデメリット

ページ数が多いホームページが苦手

ホームページを自作することに慣れている人は、Wixの編集画面の動作にイライラしてしまうかもしれません。なぜなら、編集画面の動作が多少遅いからです。良くも悪くもWixは初心者向けに特化したサービスになります。

「無料でホームページが作れる」ことがウリのWixですが実際はいくらで出来るのかを紹介します。

Wixの価格

Wixは無料でホームページを作れることをアピールしていますが、無料プランにはデメリットがあります。

Wix無料プランのデメリット
  • 勝手に広告が表示される
  • 独自ドメインが使えない

せっかく自分のホームページを作っても、広告が入ってしまうのは嫌ですよね…。それに独自ドメインが使えません。独自ドメインとはホームページのアドレスのことです。アドレスにはwixsite.comという文字が入ってしまうので、無料で作ったんだなとバレてしまいます。ブランディングやイメージを大事にしたい方には無料プランはオススメしません。

この無料プランのデメリットはWixだけではありません。ホームページもブログも本当に無料で作ろうと思うと、この二つのデメリットは常に付いてきます。

有料プランに入った方が良い人
  • ブランドイメージを大事にしたい
  • 無料で作ったとバレたくない人
  • アクセス数を上げたい人

有料プランと言っても非常に安いので安心してください

有料プランの価格

Wixのプラン毎のサービス内容と価格

Wixは「一番人気!」といって月額1,300円のアドバンスプランを推奨していますが、個人的には900円のベーシックプランで十分だと思います。ベーシックプランは独自ドメインも使えて広告も表示されなくなる最安プランです。

月額900円なので1日たったの30円です。ホームページやブログの読者に「30円をけちる人だ」というイメージをもたれたくないですよね。ビジネス目的でホームページを開設するのであれば尚更だと思います。まずは、最安のプランで始めてみて、もっと機能が欲しくなったり、アクセス数が伸びてたくさんの人が訪れる人気のホームページになったらプランをアップグレードしましょう。アップグレードはいつでも出来るので今はひとまず最安プランで話を進めます。

ドメイン代

サービスの利用料とは別にドメイン代も必要になります。ドメインとはホームページのアドレスのことで、このサイトで言うとrocket-starter.comです。ドメインは誰かが使用していなければ自由に取得できます。人気のあるドメインは値段が高くなりますが相場は1,000円から3,000円です。本来ウェブサイトを作る時に必ずかかる必要経費ですが、Wixの場合は1年以上の有料プランに入るとドメイン代が無料になります。

月額900円でドメインまで付くとなるとウェブ製作の知識がある人が自分でホームページを作る費用と同じぐらいか、それよりも安いです。ドメイン代は、ホームページやブログなどweb上にページを作る場合どうしても必要になる費用なので、この価格でサービスを提供しているWixは本当に凄いです!

 

ウェブディレクターの僕が「Wix凄い!!」と思ったこと

Wixを使って「凄い!」と感じた機能を紹介します。「凄いのは分かったらから早く使い方教えてよ!」という方はWixの使い方まで読み飛ばしてください。この章の内容は、ホームページ作りなどを経験したことがある人向けです。

Wixは自分でホームページを作れる人からすると「初心者向けのホームページ作成サービスね…」と思いがちです。僕も最初はそう思っていました。ですが色々と機能を使ってみると、ただのホームページ作成サービスではなかったのです…。以前の僕と同じようにWixがただのホームページ作成サービスだと思っている方でも「Wixイイネ!」と感じるWixの凄さを紹介します。

ロゴの色に合わせてサイトの色が全て自動で変わる

ウェブサイトを作った経験がある人なら分かると思いますが、良い感じの色ってなかなか見つけられないんですよ。ウェブデザイナーという仕事があるぐらいなので、素人がそう簡単に良い感じの色を使うのは難しいのです。僕には美的センスがないので、いつも参考サイトの色をパクってサイトを作っています…。

ですが、Wixなら参考サイトを見る必要もありません!なぜなら、ロゴを設定するだけでサイトの色使いを全てロゴに合わせてくれたのです。ロゴをアップロードすると、それに合わせWebサイトに適したカラーパレットが表示され「このカラーを使用」するか確認されます。

「このカラーを使用」のボタンを押すと画面の雰囲気が一気に変わりました。

Wixのロゴからカラーパンフレットを使用したらサイトの雰囲気が一気に変わった画面

色使いは非常に大事です!ホームページに統一感が出ておしゃれに見えます。ロゴをアップロードするだけで、こんなにも統一感のあるお洒落な色使いになるなら、ホームページ製作の仕事を受けたらwixを使おうかなと考えてしまうくらい凄いです…。

 

Shutterstockが使える

wixでShutterstockが使える

おしゃれなホームページにはおしゃれな画像が必要ですし、かっこいいホームページにはかっこいい画像が必要です。クオリティの高い画像を手に入れるには無料画像を集めたサイトからダウンロードするか、質が高い有料画像サイトから購入します。その有名な有料画像サイトの一つがShutterstockです。でもShutterstockの画像は凄くクオリティが高いのは良いのですが、ウェブ製作の仕事についていない人が利用するには高くて腰が引けてしまいます…。

shutterstockの料金プラン

少し画像を使おうと思うと5枚で6,000円か、年間プランだと10枚で3500円×12か月を契約しなければなりません。でもWixだと1枚400円でその都度買えます!

wix-shutterstock2

ホームページは一度完成させてしまえば、その後大幅に変更する事もほとんどありません。クオリティの高い画像を必要な枚数だけ買えるのは非常に嬉しいメリットです。

 

LPに向いている

僕がWixを契約した1番の理由は、LP作りに向いているからです!LPとはランディングページのことで、読者に商品購入などの行動を起こさせることを目的とした縦長のウェブサイトのことです。今まで僕は、ワードプレスでコードとにらめっこしたり、フォトショップで画像を加工しLPを作っていました。個人的な意見ですが、ホームページを作るよりも、LPを作る方が面倒でした。

ですが、Wixを使えば画像を加工したり、コードを書いたりなど一切しなくてOKです!画像は1枚から購入できますし、全て、直感的に操作できます。

 

Wixの始め方

ここからはWixの始め方について解説します。まず初めにWixに登録しましょう。下のボタンを押すとWixの画面が新しいタブで開きます。

画面が開いたら中央の【今すぐ始める】を押してください。

wixのスタート画面

次にWixの新規登録画面です。GoogleかFacebookのアカウントを持っている方は、既に持っているアカウントでログインするとすぐに終わります。

Wixの新規登録画面

ログインが完了すると以下のような画面になるので【次へ進む】を押します。

wix新規登録時の質問画面

あまり深く考えずに直感的に決めて大丈夫です。試しに僕は以下のように入力しました。

wix新規登録時に3つの質問に回答した画面

先ほどの質問の回答でWixから推奨されるツールが変わります。いくつかのパターンを試してみましたがホームページを作成した経験が「一度もありません。」もしくは「多少あります。」を選択すると最先端のAIが作ってくれるWix ADIを推奨されるようです。

【今すぐはじめる】を押して進みましょう。

wix新規登録時に推奨されるツール

次はどんなサイトを作成しますか?と提案されています。先ほど選んだ三つの質問の内容に合わせて提案してくれているようです。

wixからどんなサイトを作成するかを提案される画面

次は更に細かく分類されています。見逃しやすいのですがスクロールバーが表示されているので、当てはまるジャンルがないかしっかり確認しましょう。選び終わったら右下の【次へ】を押します。

wix新規登録時に詳細な業種を確認する画面

次にホームページに必要な機能を選びましょう。料金が変わることもないですし、後から変更も出来るので選び終わったら右下の【次へ】を押しましょう。

wix必要な機能を選ぶ画面

次は名前の入力画面です。ここではあなたのサイト・お店・会社名などを入力してください。サイトの上部に大きく表示されます。

wix新規登録時に名前を入力する画面

次は既存のウェブサイトがあるかどうかを確認されます。今回は新たにホームページを作る人に向けての解説なので何も入力せずに右下の【次へ】を押します。

wix既存のウェブサイトを持っているかの確認画面

次は情報を入力する画面です。

wix新規登録時に情報を入力する画面

次はサイトのイメージを選ぶ画面です。イメージしているホームページの雰囲気に一番近いスタイルを選んでください。選んだら【次へ】を押しましょう。

wix新規ホームページのイメージに近いスタイルを選ぶ画面

次はホームページのイメージに近いデザインを選ぶ画面です。分かりづらいのですが、デザインは下へスクロールすることが出来ます。全体のイメージを見て決めましょう。
途中の名前を入力する画面で自分の名前を入れた結果、変な画像になっています…笑

wix新規登録時にホームページのデザインを選ぶ画面

しばらく待つと編集画面になります。

wix新規登録時の更新画面

wix新規登録が終わり、ホームページのの編集画面

編集画面は全て感覚的に操作できます。「ここ直したいなぁ」と思ったらクリックするだけです。試しに最上部をクリックしてみます。

wixサイト編集画面でヘッダーを変更

操作が感覚的に出来るのは本当に素晴らしいですね。

アップグレードは右上に表示されています。現在は有料である独自ドメイン代が無料のキャンペーンをやっているようです。選ぶドメインにもよりますが、1,000円から3,000円ぐらいのドメイン代が無料になるのは嬉しいキャンペーンです。

wixアップグレードメニューの位置

Wixのプラン毎のサービス内容と価格

月額1,300円のアドバンスプランで使えるアプリ

ベーシックプランとの大きな違いはプランを使える個数です。アドバンスプランでは、二つのアプリを使用することができます。それぞれ解説します。

サイトブースター

一つ目は「サイトブースター」というアプリが使えるようになります。

wixのアプリであるサイトブースタ―の紹介画面

無料版もありますが、上に記載してある機能は全て有料版じゃないと使えません。この内容を見る限りSEO(サイトが上位に表示されやすくなる)効果は確実にありますが、SEOについて詳しい人からすると「お金をかけるほどでもないかな」という内容です。ただ面倒なことをやってくれるという点では助かります。

Visitor Analytics

二つ目のアプリは「Visitor Analytics」です。

wixのアプリであるvisitor analyticsの紹介画面

サイトの訪問者数やボタンをクリックしてくれたかなど分析してくれるアプリです。この機能は、ウェブサイトを経由して集客する方であれば必須のツールです。なぜなら集客の問題点が明確になるからです。サイトに訪問してくれた人の数が少ないのか、商品の購入・予約画面にまで辿り着かなかったのかなど、何が問題かを明確にしてくれます。

僕がWixでホームページを作るなら、このツールを使うためにベーシックプランに400円を追加して、アドバンスプランを契約しますね。サイトブースタ―は面倒なことをやってくれるおまけです。

「サイトさえあれば良いんだ!」という方であれば、どちらも不必要なアプリなのでベーシックプランで十分でしょう。

それでは次はWix ADIの使い方を紹介します。

 

Wix ADIの使い方

ここではWix ADIの使い方について解説します。ホームページを何度か作成したことがあって、作りたいホームページのイメージが出来ている人はWixエディタの操作方法まで読み飛ばして問題ありません。

ログイン後

念のために一度ログアウトしてしまったという方に向けてログイン後の画面から解説します。ログイン後は中央にある【簡易アクション】を押すと【サイトの編集】が表示されます。そして、【サイトの編集】を押すと、サイトの編集画面に切り替わります。

使い方に関して、まずは動画を見てください。

まず覚えておくことは困ったら右下の?ボタンを押すことです。使い方が一通り書かれています。

 

ホームページ作成で使われる専門用語

ホームページを作ったことがない人にとって聞きなれない「専門用語」をいくつか解説します。

プレビュー

プレビューとは、ウェブページを公開せずに実際にどう見えるのかを確認するボタンです。プレビューボタンを押すとPC版のプレビューが表示されます。プレビュー中はプレビューボタンがあった場所にモニターのアイコンが表示されるので、クリックするとモバイル版とPC版を切り替えることができます。これでPCとモバイルの見え方を確認することが出来るので、ある程度出来上がったらプレビューで見え方を確認しながら調整しましょう。

 

アニメーション

サイトの文字や画像に動きを付けてくれます。Wixエディタと比較してWix ADIでは選べるアニメーションは少ないですが、選ぶだけで画面全体が動くようになります。「何を言っているのか分からないよ」という方は動画を観てください。

この動画ではWixエディタを使っています。動画にあるようなサイトを作りたい方は最終的にWixエディタを使うことになります。

 

エフェクト

エフェクトとは文字や画像を加工することです。しかしWixでは文字や画像だけでなく、ホームページのスクロールに合わせて画像を加工することが出来ます。これをスクロールエフェクトと言います。先ほどと同様、動画の方が伝わりやすいので一度見てください。

簡単にこんな機能が付けられるなんてWixって便利です。

 

メディア

ホームページ製作でメディアとは画像や動画のことを指します。

wixでメディアを変更する場所を伝える画像

メディアを編集することで画像サイズの調整や、既存の画像を別の画像や動画に変更することが出来ます。

 

セクション

セクションとは、ホームページを縦に分割した一つ一つのパーツを指します。

これと似た言葉でヘッダーとフッターがあります。画面の最上部のパーツをヘッダー、画面の最下部のパーツをフッターと言います。ウェブサイトの頭と足という意味ですね。

 

カラム

カラムはセクションの中にあり、横に分割したパーツのことを指します。カラムはセクションの中にあることを覚えておきましょう。

wixのカラムを説明する画面

 

Wix ADIの基本操作方法

Wixでは変更したい場所にマウスを合わせると、自動的に編集の候補を表示してくれます。セクションを追加したい場合は画面中央にある+ボタン。追加以外のセクションの操作は左上の縦に…と並んでいるボタンを押すと表示されます。セクションの位置を変えたい場合は右上の矢印ボタン。

wixのセクションの説明画像

セクションのデザインを変えたい場合は左上のデザインを押しましょう。画像や文章を変更したい場合は編集を押してください。デザインのパターンが豊富なので、気に入ったデザインを選んでから文章や画像を編集すると良いです。

画面上部の【左に向いている矢印】が戻るボタンです。戻るボタンを押せるときには濃く表示されています。

wixで戻るボタンの場所を説明する画面

Wix ADIを操作する上で基本的な操作方法は以上になります。サイトを自由にカスタマイズできるだけの知識があなたにはあるので、色々と操作して試してください。簡単に印象の良いウェブサイトを作ることが出来ます。

ここで一つ大切なアドバイスです。ウェブサイトを作成しながら「ここをこうしたいな…」と思うようになったら、あなたは確実にWix ADIに満足できなくなります。気軽に作れるWix ADIでウェブサイトを完成させるか、Wixエディタで満足のいくウェブサイトを作るかはあなた次第です。

妥協しないあなたに向けて、次はWixエディタの使い方を解説します。

Wixエディタに切り替える方法

まず注意点として【Wixエディタ】で編集したサイトはWix ADIに引き継げません。そのため不安な方サイトをコピーしておきましょう。

サイトのコピーを残す手順
  1. 画面左上のページボタンを押す
  2. 現在編集中のページ名の一番右にある歯車ボタンを押す(編集中のページ名が分からない場合はホームのはずです)
  3. 一番下にホームcopyと表示されたらOKです。※ホーム以外のサイトをコピーした場合は別の名称で表示されます。

 

Wixエディタは画面上部のメニューにある【サイト】を押すと、一番下に【Wixエディタを開く】というボタンが表示されます。

wixエディターの場所を説明する画面

ボタンを押すと警告文が表示されます。

wixエディターで編集したサイトはWix ADIに引き継げないことを警告する文章

【色々とカスタマイズできるWixエディタで作ったデータを基に、Wix ADIに戻ることが出来ない】という警告になります。

それではWixエディタを開きましょう。※僕はWixエディタを始めるぞ!と意気込んで左のボタンを押しました…10秒待っても変化がなく、もう一度開いてみるとWixエディタは薄い水色で右のボタンでした…。

 

Wixエディタの使い方

Wixエディタを開くと英語の動画が流れますが、消して問題ありません。

サイトの保存方法

まず初めにWixで作ったサイトを保存する方法を覚えましょう。サイトを保存する場合は右上にある保存ボタンを押してください。確認画面が出ますが気にせず【編集内容を保存】を押しましょう。

wixで作ったサイトを保存する画面

次にサイト名を決めましょう。編集ボタンを押して好きな文字を入れましょう。グレーになっている部分は無料版では変更できない部分です。サイトのURLを見ただけで、無料版であることがわかってしまいます。

Wixでサイトの名前を決めて保存する画面

サイト名を決めたらチェックマークを押してから閉じるボタンを押しましょう。

wix無料版でURLを変更する画面

これで保存が終わりました。公開ボタンを押せばいつでも公開できます。公開ボタンを押さない限りは公開されることはないので、安心して編集してください。

URLの.wixsite.comの前にはアカウント名が入ります。無料版の場合はアカウント名を変えるとURLも変わります。アカウント名の変更はダッシュボードで行います。ダッシュボードは上部のメニューから【設定】を選んで、その中の一番下にあります。

wixの編集画面のダッシュボードの位置

その後、右上のご自身のロゴ(アカウント)をクリックすると、一番上に【アカウント設定】が表示されるのでクリック。アカウント名が変更できる画面が表示されます。アカウント名は無料ドメインの場合にはURLに表示されますが、有料アカウントで独自ドメインを使う場合は関係しません。

wixのアカウント名変更の画面

元の編集内容に戻したい時

作成中のページは自動保存されているので「前に作ったページに戻したい」と思ったら保存済みにカーソル合わせて【編集履歴を見る】を押すと、編集履歴から好きな時点にページを戻すことが出来ます。

wixの編集履歴を見る画面の説明

いつでも過去に戻れるので失敗を気にせずどんどん作れてしまうのもWixの良いところです!

 

テンプレート画面

サイトのデザインから選びなおしたいという方は、テンプレート画面から選ぶことが出来ます。テンプレートを選ぶと、以下の画像のように「プログラミングが出来る人向けの画面」が表示される場合があります。その場合は赤枠で囲った二か所のボタンを押しましょう。

wixのデベロッパー向け画面が表示されていることを説明

エディタに表示されているアイコンの使い方はマウスを重ねると日本語で説明が表示されるので、ここでは説明を割愛します。

 

文章の編集

文章をダブルクリックするか、一度クリックして表示されたメニューの中から【テキストを編集】を押すと文章が編集できるようになります。テキスト設定ではフォントや文字のサイズが選べます

wixのテキスト編集画面の解説

【テキスト設定】はあまり変更する必要はないと思いますが【エフェクト】は選んでも良いでしょう。いくつか試してみて、しっくり来るエフェクトを選んでください。

デザイン初心者に向けてエフェクトのワンポイントアドバイス
  • サイト内で使うエフェクトは1つに絞りましょう
  • 文章はエフェクトなし か 選んだ1つのエフェクトだけを使用してください
  • サイトに統一感が生まれます

 

日本語フォントの追加方法

初期設定では、フォントの中に日本語がありません。フォントを一番下までスクロールすると【言語を追加】ボタンが表示されるので、押しましょう。

wixで日本語フォントを追加する画面

余計なフォントが表示されないように、不必要な言語の選択は外して日本語だけチェックを入れましょう。最後に【保存】を押せばOKです。

wixで日本語のフォントを追加する画面

これで日本語のフォントが使えるようになりました。

wixで日本語のフォントが表示された画面

ここに表示されている以外のフォントを使いたい場合は【言語を追加】の隣にある【フォントをアップロード】を押してアップロードしてください。

デザイン初心者に向けてフォントのワンポイントアドバイス
  • 使うフォントは2つまでに絞りましょう
  • 見出しの役割を果たす大きな文字サイズで使うフォントと、説明をする小さな文字サイズで使うフォントで使い分けをしましょう
  • フォントを使い分けるのが面倒な方は1つでも大丈夫です

この3つを実行するとサイトに統一感が生まれます!

 

カラムの編集方法

セクション内でテキストが無いところをクリックすると、カラムのレイアウトを変えるボタンが表示されます。クリックするとストリップレイアウトが表示され、カラムの幅を自由に変更できます。

wixのカラムを分けるボタンの説明画像

カラムの数を変更したい場合は隣の【カラムを管理】を押しましょう。

 

画像の選び方

画像を選ぶ時は、画像選択画面の左から【Wix画像・動画素材】もしくは【Unsplush】を選んで、キーワードを入力して検索しましょう。検索の際は、言語で注意点があります。

画像を検索する時の言語
  • 【Wix画像・動画素材】では日本語
  • 【Unsplash】では英語

wixの画像を検索する画面

どうしても良い画像が見つからない場合、外部サイトのpixaboyであれば無料で良い画像が見つかるかもしれません。pixaboyは登録も不要なので自由にダウンロードしてください。どうしても見つからない場合は1枚400円のShutterstockを使いましょう。Shutterstockで良い画像が見つけられなかったことはありません。

ダウンロードした画像は画像検索画面の左上の【アップロード】を押すとアップロードできます。アップロードできる画像はPCに入っているものだけでなく、Googleドライブ・フェイスブック・インスタグラム・ドロップボックスからも直接アップロードが可能!

さらにリンクを入れるとダウンロードせずにアップロードすることも出来ます。アップロードした画像はそのまま編集することが出来ます。

Wixでアップロードした画像を編集するボタンの解説

画像の編集で出来ること
  • 傾ける
  • 反転させる
  • 文字を入れる
  • 切り取る
  • サイズを変更する
  • 明るさや色味を変える
  • 他の画像と組み合わせる

 

セクションを追加する

Wix ADIではプラスボタンを押すだけで追加できたセクションですが、Wixエディタでは少し面倒になっています。画面左にあるアイコンからストリップを選んで、表示されたセクションをドラッグ&ドロップすることでセクションを追加できます。

wixでセクションを追加する

同じセクションを追加したい場合は複製機能を使います。コピーしたいセクションをクリックして、その後右にある複製ボタンを押しましょう。

wixの複製ボタンの場所の説明画面

 

 

スマホデザインを変える

画面上部のモバイルのボタンを押すと、モバイルの画面に切り替わります。PC版とは見え方が違うのでモバイル版の調整をしましょう。

wixモバイル版の見え方の調整画面

モバイル版で変えることが出来るのは文字の位置やサイズ、画像の順番などのデザインだけです。文字を追加したり、PC版と違う内容にすることは出来ません。あくまでも見え方が変わるモバイル版の調整方法なので、PC版が完成した後に行いましょう。

 

Wixの広告

Wixの無料版は広告が上部に常に表示されます。

やはりビジネス利用で残しておくのはイマイチですね…。参考までに僕が作った女性向けのホームページ製作サイトを掲載します。PC版で見ると動きのあるサイトになっているので、モバイル版とPC版の両方で開いてもらえれば、どんなクオリティのものが出来るのか分かると思います。

 

Wixでホームページを作ろう!

Wixでは簡単にホームページが作れますので、楽しくパズル感覚で作ってみてください!普段ホームページの作成をしている僕でも、Wixの多彩な機能には驚かされました。さらにWixはアップデートを繰り返しているので、便利な機能が追加されたり、便利な有料サービスが無料になったりと、将来性にも期待できます!

今回のLP制作を機にWixでウェブサイトを作ってみようと思い、現在デザインを試行錯誤しています。ウェブサイトを自分で作れるという経験者の方も、一度触れてみる価値ありです。簡単に質の高いウェブサイトが作れることに驚くはずです!

あなたもWixで簡単に質の高いウェブサイトを作って、集客を成功させちゃいましょう!

wixのロゴ