IT女子ちーさんのwebろぐ

面白いwebサービス・アプリの紹介を中心に、ユーザー目線でITな情報を発信!エンジニアではないですがweb広告メディア営業が本業のインターネット大好き女子。広く浅く情報収集も好きなので日々の学びもシェアします。主に週末に更新です。

AIが自動でサイト作成「WixADI」でプロフィールサイトを作ってみた!

f:id:i-chihiro93115:20190623115548p:plain

こんにちは!IT女子のちーさんです。

このブログでも紹介したことがあるWixという無料サイト作成サービスがいつの間にかめっちゃ進化してました!そこで、Wixを使ってプロフィールサイトを作ってみたので、紹介しつつ、どんなことができるか機能を紹介したいと思います。

 

 

完成したプロフィールサイト

f:id:i-chihiro93115:20190623101501p:plain

TOPページファーストビュー

https://chihiro93115.wixsite.com/profile

SNSアカウントと紐づけて、自分が今取り組んでいることを1ページにまとめたような構成になっています。

ちなみに、このプロフィールサイト、3時間くらいでサクッと完成させることができました。操作もかなり直感的で、使いやすかったです。使ってみればわかります。ユーザーが迷わないような設計がしっかりされていました。

ちなみに、前作った銭湯のサイトはこちらで紹介しています。

 

i-chihiro93115.hatenablog.com

 

WixADIとは

最近、Wixで新しい機能が追加されまして、それが「WixADI(Artificial Design Intelligence)」です。

業種や職種、好みのデザインといったいくつかの質問に答えるだけで、AI が数あるレイアウト、画像、テキストの中から最適なものを組み合わせ、ほんの数分でプロ仕様のサイトを作成します。

Post | Wix 公式ブログ |ウェブデザインやホームページ作成、SEOなどのノウハウ満載


Wix ADI | AIを活用した次世代のホームページ作成ツール

簡単に言うと、「AIがいい感じのサイトを作るよ〜」というものです。

今までのWixは、どちらかと言うとパワーポイントに近くて、ボタンの場所やボックスの配置を自分の手で調整していくというものでした。

一方「WixADI」は、フォームに情報を入力していくと、自動的に配置などがデザインされてほとんど手作業(ドラッグ&ドロップなど)することなく、サイトが完成するというものです。

 

WixADIサイト作成ステップ

WixADIでサイトを作るにあたっての準備の流れを解説していきます。

 

業種を選び、WixADIで作成を選択

f:id:i-chihiro93115:20190623111020p:plain

最初にどんなサイトを作りたいか?という質問がされます。

私はポートフォリオを選択しました。その後、従来のエディタかWixADIか聞かれるので「ADIではじめる」をクリック。

 

サイトイメージの質問に答える

f:id:i-chihiro93115:20190623110636p:plain

 選んだテーマに沿ったパーツがレコメンドされるので追加したいものをチェックします。

 

情報を入力

f:id:i-chihiro93115:20190623111819p:plain

住所やSNSの情報などをここで入力しておくと、サイトに自動反映されます。

 

ロゴを選択し、カラーを作る

f:id:i-chihiro93115:20190623111232p:plain

サイトのロゴをアップロードすると、なんと「この色があなたのアイコンに合いそうです」という感じでテーマカラーを自動で決めてくれます!

私の場合好きなカラーがドンピシャだったので、「スゲー!」となりました。

※ロゴの選択は、どのサイトテーマを選ぶかによってスキップされる場合もあるようです。

 

URLを決める

f:id:i-chihiro93115:20190623111352p:plain

次は、webサイトの住所であるURLを決めます。URLの構成は、

http://ユーザーID.wixsite.com/〜〜〜

となっており、ドメインははじめから決まっています。

独自ドメインを設定したい場合は、有料プランに申し込む必要があります。

 

デザインを作っていく

この時点で、自分専用のテンプレートが完成しています。あとは、自分好みにカスタマイズしていきます。

詳しいやり方は次のセクションで解説します。

 

WixADIでのサイトデザインの作り方

いよいよデザイン制作です。すでにテンプレートで作られているものを使ってもいいですが、ここでは新たに作っていく方法を紹介します。

 

セクションを追加

f:id:i-chihiro93115:20190623112221p:plain

パーツを入れたい部分の「+」マークをクリックするとセクションが追加できます。左カラムから、目的に沿ったテンプレートを選んでいきます。

 

フォームを埋める

f:id:i-chihiro93115:20190623112404p:plain

「編集」メニューで、文字を編集することができます。そこに文字を入力すると右側のサイトデザインに反映されます。「メニューの表示名」は、ヘッダーメニューに表示される文字と連動するので、ここも適切なものに変更しておきましょう。

 

パーツを追加する

f:id:i-chihiro93115:20190623112341p:plain

デフォルトだと非表示になっているパーツを追加することができます。この場合、ボタンが非表示になっていたので、ボタンを追加して、自分のプロフィール記事に飛ぶように設定しました。

 

あとはこれを繰り返していくだけです。ちなみに、フォームを入力した後でも、テンプレートは自由に変えることができます。

 

スマホデザイン調整

スマホでみた場合のデザインを修正したい場合は、プレビューでスマホ表示にした後に編集画面に戻るとスマホの場合の調整ができます。スマホ版で修正したデザインは、デスクトップ版には影響しないそうです。

f:id:i-chihiro93115:20190623112631p:plain

 

従来のWixは、配置が自由だったのでデザインセンスが問われましたが、WixADIは最初から配置が決まっておりそこから動かせないようになっているので、デザインセンスは不要になりました

 

ここがスゴイ!SNSとの連携

これはWixADIだけでなくWix全般に言えることですが、SNSとの連携に優れていると感じました。

SNSの発信メインで活動している人には嬉しい機能ですね。

 

ヘッダーとフッターにアイコン自動設置

f:id:i-chihiro93115:20190623112753p:plain

サイトヘッダー

プロフィールサイトのヘッダーとフッターにある3つのアイコンですが、これは最初から設定されていました。サイト作成ステップでSNSの情報を入れましたよね?それが自動で連携されてデザインに反映されているのです!これはとても楽ですね。

 

Instagram連携

f:id:i-chihiro93115:20190623113038p:plain

Instagram連携セクション

Wixは、Instagramとの連携も楽にできます。私は、銭湯のInstagramをやっているので、その写真をリアルタイムで連携できるのはとてもありがたいです。自分の作品をInstagramポートフォリオとして載せている人にとってもかなり使える機能なのではないでしょうか?

 

Youtube連携

f:id:i-chihiro93115:20190623113220p:plain

Youtbe連携セクション

Youtubeとも非常に楽に連携できました。動画は、動画ライブラリというところで1アカウント共通で管理することができます。

f:id:i-chihiro93115:20190623113531p:plain

動画管理画面

アップロードの仕方も様々選択することができ、YoutubeのURLを入れると自動連携してアップしてくれるという機能もあります。

 

Wixエディタで微調整

WixADIである程度型が決まったら、従来のWixエディタを立ち上げて、手作業で細かいところを調整することもできます

WixADIの楽だけど自由度が低いという欠点を見事に補っています。

f:id:i-chihiro93115:20190623104906p:plain

WixADIからWixエディタに移行するときのアラート

ただし、Wixエディタで編集した内容は、WixADIに戻ると利用できなくなるようです。なので、WixADIでサイトの型は決まった!となってからWixエディタに移行しましょう

Wixエディタの方では、ADIでできなかった文字の大きさの調整やちょっとした配置の移動などをドラッグ&ドロップで行うことができます。

ただ、おそらくデザイン自体はADIの方で最適化されているはずなので、下手にいじりすぎない方がいいと思います。

 

WixADIを使えば、デザインセンスがなくてもある程度いい感じのサイトを超簡単に作ることができます

使い方も明快で、非常にわかりやすく設計されているので、「自分のホームページが欲しい」「自社のホームページをお金をかけず作りたい」という人は使ってみてはいかがでしょうか?

 

WixADIについての公式ブログはこちら。

ja.wix.com

 

従来のWixエディタでのサイト作成ガイドはこちら。

ja.wix.com

 

以上、IT女子のちーさんでした!またね!