AIが自動でサイト作成「WixADI」でプロフィールサイトを作ってみた！
こんにちは！IT女子のちーさんです。
このブログでも紹介したことがある「Wix」という無料サイト作成サービスがいつの間にかめっちゃ進化してました！そこで、Wixを使ってプロフィールサイトを作ってみたので、紹介しつつ、どんなことができるか機能を紹介したいと思います。
完成したプロフィールサイト
https://chihiro93115.wixsite.com/profile
SNSアカウントと紐づけて、自分が今取り組んでいることを1ページにまとめたような構成になっています。
ちなみに、このプロフィールサイト、3時間くらいでサクッと完成させることができました。操作もかなり直感的で、使いやすかったです。使ってみればわかります。ユーザーが迷わないような設計がしっかりされていました。
ちなみに、前作った銭湯のサイトはこちらで紹介しています。
WixADIとは
最近、Wixで新しい機能が追加されまして、それが「WixADI（Artificial Design Intelligence）」です。
業種や職種、好みのデザインといったいくつかの質問に答えるだけで、AI が数あるレイアウト、画像、テキストの中から最適なものを組み合わせ、ほんの数分でプロ仕様のサイトを作成します。
Wix ADI | AIを活用した次世代のホームページ作成ツール
簡単に言うと、「AIがいい感じのサイトを作るよ〜」というものです。
今までのWixは、どちらかと言うとパワーポイントに近くて、ボタンの場所やボックスの配置を自分の手で調整していくというものでした。
一方「WixADI」は、フォームに情報を入力していくと、自動的に配置などがデザインされてほとんど手作業（ドラッグ&ドロップなど）することなく、サイトが完成するというものです。
WixADIサイト作成ステップ
WixADIでサイトを作るにあたっての準備の流れを解説していきます。
業種を選び、WixADIで作成を選択
最初にどんなサイトを作りたいか？という質問がされます。
私はポートフォリオを選択しました。その後、従来のエディタかWixADIか聞かれるので「ADIではじめる」をクリック。
サイトイメージの質問に答える
選んだテーマに沿ったパーツがレコメンドされるので追加したいものをチェックします。
情報を入力
住所やSNSの情報などをここで入力しておくと、サイトに自動反映されます。
ロゴを選択し、カラーを作る
サイトのロゴをアップロードすると、なんと「この色があなたのアイコンに合いそうです」という感じでテーマカラーを自動で決めてくれます！
私の場合好きなカラーがドンピシャだったので、「スゲー！」となりました。
※ロゴの選択は、どのサイトテーマを選ぶかによってスキップされる場合もあるようです。
URLを決める
次は、webサイトの住所であるURLを決めます。URLの構成は、
http://ユーザーID.wixsite.com/〜〜〜
となっており、ドメインははじめから決まっています。
独自ドメインを設定したい場合は、有料プランに申し込む必要があります。
デザインを作っていく
この時点で、自分専用のテンプレートが完成しています。あとは、自分好みにカスタマイズしていきます。
詳しいやり方は次のセクションで解説します。
WixADIでのサイトデザインの作り方
いよいよデザイン制作です。すでにテンプレートで作られているものを使ってもいいですが、ここでは新たに作っていく方法を紹介します。
セクションを追加
パーツを入れたい部分の「＋」マークをクリックするとセクションが追加できます。左カラムから、目的に沿ったテンプレートを選んでいきます。
フォームを埋める
「編集」メニューで、文字を編集することができます。そこに文字を入力すると右側のサイトデザインに反映されます。「メニューの表示名」は、ヘッダーメニューに表示される文字と連動するので、ここも適切なものに変更しておきましょう。
パーツを追加する
デフォルトだと非表示になっているパーツを追加することができます。この場合、ボタンが非表示になっていたので、ボタンを追加して、自分のプロフィール記事に飛ぶように設定しました。
あとはこれを繰り返していくだけです。ちなみに、フォームを入力した後でも、テンプレートは自由に変えることができます。
スマホデザイン調整
スマホでみた場合のデザインを修正したい場合は、プレビューでスマホ表示にした後に編集画面に戻るとスマホの場合の調整ができます。スマホ版で修正したデザインは、デスクトップ版には影響しないそうです。
従来のWixは、配置が自由だったのでデザインセンスが問われましたが、WixADIは最初から配置が決まっておりそこから動かせないようになっているので、デザインセンスは不要になりました。
ここがスゴイ！SNSとの連携
これはWixADIだけでなくWix全般に言えることですが、SNSとの連携に優れていると感じました。
SNSの発信メインで活動している人には嬉しい機能ですね。
ヘッダーとフッターにアイコン自動設置
プロフィールサイトのヘッダーとフッターにある3つのアイコンですが、これは最初から設定されていました。サイト作成ステップでSNSの情報を入れましたよね？それが自動で連携されてデザインに反映されているのです！これはとても楽ですね。
Instagram連携
Wixは、Instagramとの連携も楽にできます。私は、銭湯のInstagramをやっているので、その写真をリアルタイムで連携できるのはとてもありがたいです。自分の作品をInstagramにポートフォリオとして載せている人にとってもかなり使える機能なのではないでしょうか？
Youtube連携
Youtubeとも非常に楽に連携できました。動画は、動画ライブラリというところで1アカウント共通で管理することができます。
アップロードの仕方も様々選択することができ、YoutubeのURLを入れると自動連携してアップしてくれるという機能もあります。
Wixエディタで微調整
WixADIである程度型が決まったら、従来のWixエディタを立ち上げて、手作業で細かいところを調整することもできます。
WixADIの楽だけど自由度が低いという欠点を見事に補っています。
ただし、Wixエディタで編集した内容は、WixADIに戻ると利用できなくなるようです。なので、WixADIでサイトの型は決まった！となってからWixエディタに移行しましょう。
Wixエディタの方では、ADIでできなかった文字の大きさの調整やちょっとした配置の移動などをドラッグ&ドロップで行うことができます。
ただ、おそらくデザイン自体はADIの方で最適化されているはずなので、下手にいじりすぎない方がいいと思います。
WixADIを使えば、デザインセンスがなくてもある程度いい感じのサイトを超簡単に作ることができます！
使い方も明快で、非常にわかりやすく設計されているので、「自分のホームページが欲しい」「自社のホームページをお金をかけず作りたい」という人は使ってみてはいかがでしょうか？
WixADIについての公式ブログはこちら。
従来のWixエディタでのサイト作成ガイドはこちら。
以上、IT女子のちーさんでした！またね！
