【Wix ADIの使い方】ホームページを10分で自動で作成する

	無料プラン	ドメイン接続プラン	ベーシックプラン	アドバンスプラン	VIPプラン
月額※1	無料	¥500/月	¥900/月	¥1500/月	¥2659/月
広告	あり	あり	なし	なし	なし
独自ドメイン	使用できない	使用できる	使用できる	使用できる	使用できる
データ容量	500MB	500MB	3GB	10GB	35GB

※1　2021年9月時点の為替レートにより日本円を算出しています。現在の日本円を知りたいという方は以下のURLにて調べることができます。
【公式】Wixの有料プランにかかる料金(日本円)

2．Wix ADIを使うための準備をしよう

Wix ADIは基本的な機能を触るだけであれば無料で利用することができますが、他のノーコードツールと同様に会員登録をする必要があります。

まずWix ADIの公式サイトへ移動し、中央にある[今すぐはじめる]をクリックしましょう。

すると、以下のような画面に移動するので、メールアドレスなどの必要事項を記入し、パスワードを設定すればアカウントの作成が完了します。
もちろん、FacebookまたはGoogleアカウントと連携して使いたいという方は右にある[Facebookで続ける]または[Googleで続ける]をクリックすることによってWixアカウントを作ることができます。

アカウント登録が完了すると以下のような質問が表示されるのでそれに答えていきます。回答しなくても特に問題はないので、回答したくないという方は右下の[スキップ]をクリックして飛ばしてもらってもかまいません。

3．ノーコードでWebサイトを実際に作ってみる

デザインの方針を決定する

次にどのような方法でホームページを作成するかを問われるので「Wix ADIで自動作成」と書かれているところの[今すぐはじめる]をクリックします。

すると、どのようなサイトを作成するかについて問われるので、自分の作りたいサイトのイメージを記入します。ここではレストランのホームページを作っていきたいと思うので[レストラン]と入力欄に記入します。
そして右下の[次へ]をクリックします。

次に、そのレストランのホームページに追加したい機能を選択します。先ほど入力したワードから、Wix ADIが自動でおすすめの機能をあらかじめ選んでくれているので、そこから選ぶとよいでしょう。
ここでは「レストランメニュー」と「テーブル予約」の機能をチェックしておきます。ネット予約にも対応しているレストランの場合は「料理の注文」機能にもチェックを入れるほうがいいですね。

次に、ビジネスの名前について聞かれるのでここは適当な名前を記入しましょう。
本記事では「ノーコードレストラン」と記入しておきます。

次に、既存のWebサイトがある場合にインポートを行うかどうかが聞かれます。今回は既存のWebサイトが存在しないため、入力欄には何も記入しなくて大丈夫です。
住所は適当に入力しておきます。

次にさらに追加すべき情報があれば記入します。

次にスタイルを設定します。この設定によっておおまかなデザインのイメージを決定することができます。本記事では[ロマン]を選択しておきます。
後からでも変更することは可能なので、あまり考えこむ必要はありません。

すると、AIが勝手にWebサイトのデザインの候補を以下のように表示してくれます。3パターンのデザイン候補を提示してくれるので、自分の好きなデザインを選びましょう。
こちらも後からコンテンツを編集することができるので、細かい部分に関しては気にする必要はありません。ここでは、一番右のデザインを選ぶことにします。

次に、ページに追加するWebサイトのコンテンツの候補が表示されるので、必要なものにのみチェックを入れます。ここでは「概要」のみにチェックを入れます。
また、この項目も後から編集して追加することもできるので、まだ詳細が決まっていない場合はスキップしても大丈夫なようになっています。

これでデザインの方針の設定については完了です。右上にある[サイトの編集]ボタンをクリックすると、AIがこれまでに設定したデザインを元にWebサイトを作成してくれています。

しかし、このままのWebサイトでもある程度のクオリティは担保されているのですが、やはりAIが作成しているためデザインが少し微妙な部分があったり、キャッチコピーがダサかったり、文章の改行がおかしい部分などが少しは出てきてしまいます。

実際に上記の画像のように「飲んで、食べて、くつろいで。」とキャッチコピーが勝手に作成されていますが、あまりかっこよくなく変なところで改行されています。
なので次の章ではAIが作成したサイトをカスタマイズする方法を解説していきます。

AIが作成したWebサイトのデザインを自分で編集する

Wix ADIでは、AIが作成したWebサイトをより自分好みのWebサイトにするために、自身でカスタマイズできる機能が備えられています。細かいデザインの変更を行うことはできませんが、この機能により十分なデザイン性と機能を兼ね備えたWebサイトを作成することができます。

使い方としては、まずWebサイトを構成しているセクション(WixではWebページの構成要素の1つ1つのパーツのことをセクションと呼ぶ)にマウスのカーソルを合わせると青色の枠が表示されるので、左上の[編集]をクリックします。

すると左側に編集のウインドウが表示されるので、そこからタイトルやサブタイトルなどの文章や、ボタンの編集を行うことができるようになります。

同様に左上にある[デザイン](または編集ウインドウの[デザインを編集する]ボタン)を押すと、デザインウインドウが表示され、そこからデザインのレイアウトを変更することができます。テンプレートが複数用意されているので、そこから自分好みなものを選びましょう。

そのレイアウトを編集した後に、そのテンプレートの下に表示される[デザインを編集]をクリックすると、さらにデザインを詳細に編集することができます。ここでは主に、

メディア(画像の変更)
カラー(色の変更)
テキスト(文字のサイズや揃え方の変更)
高さ(セクションの高さを変更)
アニメーション(文字の表示方法の変更)

などを行うことができます。
これらのデザイン設定をしておくだけでもかなり見栄えが良くなるので、実際にホームページを作るときはしっかり設定するべき部分になります。

同様に左上にある[⋮]のマークにカーソルを合わせるとセクションの、

複製
移動
高さの調整
削除

を行うことも可能です。

また、セクションの右上にある[↑]または[↓]のボタンを押すと、セクションを上に移動、または下に移動させることができます。Webサイトの構成を変えたいというときに使うことができます。

新たにページの構成を付け加えたいというときは、セクションの一番上にある青色の[+]ボタンをクリックすると付け加えることができます。
こちらでも非常に多くのテンプレートが兼ね備えられているため、簡単に洗練されたセクションを追加することが可能です。

新たなWebページを追加する

左上にある[ページ]と書かれているボタンをクリックすると、現在作成しているホームページのサイトマップ(Webサイト全体のページの構成のこと)を確認することができます。本記事で作成しているWebサイトは「ホーム」「メニュー」「概要」で構成されています。
このウインドウからWebページを選択することで、それらのデザインの確認・編集を行うことができます。

そのウインドウの一番下にある[ページを追加]をクリックすると、以下の画像のようにWebページのコンテンツが表示されます。テンプレートが複数表示されるので、好みのデザインを選択することが可能です。
ここでは「スタッフ紹介」のページを新たに追加してみることにします。

すると以下のような画面に移動します。ウインドウを見てみると新たに「スタッフ紹介」のWebページが作成されたことを確認することができます。
さらに、ヘッダーを見てみると「スタッフ紹介」のボタンが追加されていることが分かります。

このページを追加する動作は、左上にある[追加]にカーソルを合わせ[ページ]をクリックすることでも行うことができます。
同様に、新たなセクションについてもここから追加することができます。

新たなアプリを追加する

先程と同様に、左上にある[追加]にカーソルを合わせ[アプリ]をクリックすることで、Webサイトに新たなアプリを追加することができます。ここでのアプリとは、Webサイトに搭載するような機能のことを言います。
今回のレストランのホームページだと、質問対応のチャット機能やテーブルの予約機能、ブログの機能などがそれにあたります。アプリという機能は、ページとセクションの両方の機能を兼ね備えています。

[アプリ]をクリックすると、以下のようにアプリのテンプレートが表示されます。その一覧から追加したいアプリを選択しましょう。
すると、そのアプリがダウンロードされWebサイトに追加されます。

Webサイトのデザインを変更する

左上の[デザイン]にカーソルを合わせると、

スタイル
カラー
フォント
アニメーション
ページデザイン

について再度編集を行うことができます。あらかじめ設定しておいたデザインが思っていたのと違った、という場合に簡単に編集することができるので、ぜひ覚えておいてください。

Webサイトのコンテンツを管理する

左上の[管理]のボタンにカーソルを合わせると、現在Webサイトに搭載されているアプリのコンテンツの管理を行うことができます。
本記事では、メニュー機能と予約機能を搭載しているのでそれらのアプリの管理を行うことができます。

実際に[メニュー]をクリックすると、ダッシュボードが表示され[メニューを編集]をクリックすることによって、メニューの編集と追加を行うことができるようになります。
また、[予約]ボタンをクリックすると、現在の予約状況などを確認することができるようになります。

WebサイトのSEOの設定を行う

左上の[ページ]をクリックし、サイトマップを確認できるところのウインドウの横にある歯車ボタンをクリックして[SEOベーシック]をクリックすると、SEOの設定を行うことができるようになります。
ちなみにSEOとは「Search Engine Optimization (検索エンジン最適化)」のことで、Google検索の表示順位をあげる施策のことを言います。

ここでは以下の部分のSEO設定を行うことができます。

タイトルタグ(検索結果に表示されるタイトル)
メタディスクリプション(タイトルの下に表示されるWebサイトの説明文)
キーワード(検索に引っかかりやすくするための単語)
ページURL(WebページごとのURL)

を設定することができます。

さらに詳しくSEOの設定を行う場合は、SEOのウインドウの一番下にある[SEO Wizを開く]ボタンをクリックして、そのサービスを使用することをおすすめします。
SEO Wizの使い方に関しては、こちらの記事に詳しく書かれているのでSEOを詳しく設定したいという方はぜひご覧ください。

スマホ画面のレイアウトの変更を行う

Wix ADIの画面上部の中央あたりにあるパソコンのマークにカーソルを合わせ[モバイル]をクリックすると、スマホ画面のレイアウトを確認することができます。この画面の操作を行うことで、スマホ画面のレイアウトを編集を行うことができます。

こちらの画面の左下に「モバイルエディタで編集した内容は、デスクトップ版のサイトには影響しません。」と書かれていますが、これはスマホ画面の編集を行ってもパソコン画面の内容は何も変わらないということです。

つまりパソコン画面のレイアウトの編集を行ってからであれば、スマホ画面のレイアウトの編集を行ってもデザインの変更によって互いに干渉が起こることはないということです。
なので、パソコン画面とスマホ画面で違ったデザインを実現させることができます。

実際に、初期設定ではヘッダーの部分がハンバーガーメニュー(「≡」の記号をクリックすることによってメニューを表示できるデザイン)に変更されています。
[メニューを開く]ボタンをONにすると、メニューの確認を行うことができます。

ハンバーガーメニュー以外にも、パソコンのデザインに対してスマホのデザインを変更することによって、Webサイトの「見やすさ」や「使いやすさ」を向上させることができます。

Webサイトに必要な設定を行い、WEB上に公開する

右上にある[サイト]にカーソルを合わせ[設定]をクリックすると、Webサイトのダッシュボードに移動し設定を行うことができます。

そこには、Webサイトの設定で必要な項目について表示されているので、その指示にしたがって情報を入力していきます。

これらの設定が終われば、Wix ADIの編集画面に戻り右上にある[公開]のボタンをクリックします。この動作によって、Web上に公開することが完了します。

分からないことがあったときは？

Wix ADIのことで分からないことがあればヘルプ機能を活用することがおすすめです。画面の右下に[？]のマークのボタンがあるので、それをクリックするとヘルプのウインドウが表示されます。

より細かくデザインを編集したいときは？

Wix ADIのデザインに満足できないというときは、Wix エディタという機能を使って自分でWebサイトを制作することをおすすめします。
右上にある[サイト]にカーソルを合わせ[エディタを開く]をクリックすると、Wix エディタに移動することができます。

しかし、Wix エディタはデザインの知識がないと美しいWebサイトを作ることは難しいので、Web制作を行ったことがないという方はWix ADIのデザインをそのまま使うことがおすすめです。

4．おわりに

本記事では、Wix ADIの機能を活用して綺麗なWebサイトを作成する手順について説明を行いました。

Wix ADIを使えば、Web制作の経験がない方でも簡単にかつ迅速にWebサイトを作成することができます。なので、もしホームページが必要になったときにはぜひ、このWeb制作ツールを使ってみてください。

今後も各ノーコード開発ツールの使い方を分かりやすく紹介していきたいと思います。

Wixの公式サイト

また、ノーコードジャパンでは、ノーコード開発者たちが気軽に質問し合える無料のプラットフォームNoCode Forumを運営しております。ノーコード開発で分からないことがあったら一人で悩まず、気軽に質問してみましょう。