top of page

Wixの使い方 アカウント設定方法

更新日:2023年6月20日



こんにちは!

大阪府和泉市のホームぺージ制作会社 アクトワンの和田英也です!


今回は「Wixアカウント取得 ホームページの作り方の基礎」というテーマで解説いたします。


Wixは直感的な操作でカンタンにホームページを始めとするWebサイトを作成することができます。


そうは言っても「全くやったことがないことを始める」というのは誰にとっても負担が大きいことですが、はじめの一歩さえ踏み出してしまえば、後はどんどん前に進んでいけたりするものです!


今回の動画ではWixのアカウントを作成するところから、テンプレートを使った基本中の基本の操作、これを覚えてしまえばあとはスキルを肉付けしていくだけ!というところまでを サポートできるよう解説をしております。

それでは早速始めてみましょう!


▼ 目次


Wixアカウント取得方法


まずはWixのアカウント取得から。

検索エンジンで「Wix.com」と検索してください。

Wixアカウントの取得

トップにきている「Wix.comホームページ作成~」をクリックすると、Wixの紹介ページが表示されますので、

Wix紹介ページ

「無料ではじめる」をクリックします。

Wix新規登録画面

すると、メールアドレスとパスワードを設定するだけで新規登録できるようになっています。

GoogleやFacebookのアカウントからログインすることも可能です。

WixGoogleアカウント

新規登録が完了したらガイドに沿ってサイト作成を早速始めてみましょう!

Wix サイト作成質問ページ

こちらでは質問に答えていくと、回答内容に適したテンプレートを用意してくれるのですが、これらはスキップしても構いません。


今回はスキップしていきます。

Wixダッシュボード画面①

質問をスキップしていくと、「ダッシュボードを開く」が出てきます。

Wixダッシュボード画面②

これでWixのダッシュボードが開いた状態になりました。

Wix アドレス確認メール

そして新規登録した時に登録したメールアドレスにWixからメールアドレス確認のメールが届きます。

こちらは「メールアドレスを確認」を押してください。


こちらのダッシュボードでサイトを管理していくことになるのですが、

Wixダッシュボード画面③

左上のマイサイトに移動をクリックするとダッシュボード画面が出てきます。

Wixダッシュボード画面④

複数のサイトを管理しているアカウントであれば、管理しているサイトが全てこちらに表示されます。

新たにサイトを作成する場合は「新しいサイトを作成」をクリックします。

Wix サイト作成質問ページ

するとまた冒頭であったようなサイトアンケートが出てきますが、こちらもスキップして大丈夫です。

Wixダッシュボード画面③


テンプレートを使ってホームページ作成


今回は初めてWixを使っていただく方が操作感に慣れるためにもテンプレートを使います。

Wix ホームページテンプレート①

こちらを開くと様々なホームページテンプレートが出てきます。

ここから気に入ったものを使って編集することができます。


マウスオーバーすると表示と編集というボタンが出てきます。

「編集」を押すと、すぐに編集がスタートできます。

「表示」を押すと、実際のサイトページがどのように見えるのかを確認することができます。

Wixホームページ 白紙テンプレート

テンプレートが不要の場合は白紙のテンプレートも用意されているので、慣れてきたら白紙から始めるのも良いかと思います。

Wix ホームページテンプレート②

今回はこちらの経営コンサルタント会社のテンプレートを使って編集を進めてみようと思います。

Wix ホームページ作成 スタート

編集を押すと、このように画面が表示されます。


では早速色々編集していこうと思います。

Wixの特徴はドラッグアンドドロップという直感的な操作でサイトを編集することができることです。


最初にホームページを1から作り出すのは難しいかもしれませんが、今回のようにオーソドックスなテンプレートを使用して、自分の感覚で色々触りながら慣れていくのも良いのではないでしょうか。


まずは簡単に説明していきます。

Wix ホームページ作成 ヘッダー

ホームページにはヘッダーという箇所があります。

ヘッダーは全てのページに表示されるトップの部分です。

Wixホームページ作成 フッター

逆にフッターはホームページの最下部に表示される箇所のことを指します。

そして各ページはヘッダー、フッター以外の真ん中の部分を編集していくといった感じです。


ではまずはヘッダー部分。

こちらにはテキストパーツが置かれていますので、テキストを編集していきます。

Wix ホームページ作成 ヘッダー編集

ダブルクリックもしくはテキストを編集で、そのままテキストを自由に入力するだけです。


一般的にヘッダーの左上部分に社名やロゴを入れることが多いですね。

他にもサイトに何か画像やボタンパーツなどを挿入したい場合は、

ヘッダー 会社などのロゴの位置

パーツを追加で挿入していきます。

Wix ホームページ作成 ヘッダー編集②

画像の場合はテキストの次に表示されていますね。


こちらを選択し、画像をアップロードを押すと、自由にアップしたい画像を追加することができます。

Wix ホームページ作成 ヘッダー画像挿入

一度アップロードした画像は自動的にサイトファイルに保存され、自由に使えるようになっています。


アップロードした画像を選択した状態で「画像を追加」を押すと、このようにサイトに先程アップロードした画像が表示されます。

Wix ホームページ作成 ヘッダー画像挿入②

そして追加された画像はエディタ上でハンドルを使って好きなサイズに収縮することができます。


ではこの画像をヘッダーにもっていってみましょう。

すると、ドラッグした時にヘッダー内に移動という表示が出てきます。

Wix ホームページ作成 ヘッダー画像挿入③

これで枠内に入れれば画像がヘッダー内に入ったことになります。


続いてヘッダーの右側。

Wix ホームページ作成 ヘッダーメニュー部分

この部分はメニューの展開になっているんですが、ページを作った分だけここにメニューが表示されることになります。


それぞれのページはどのように格納されているのかというと、

Wix ホームページ作成 ヘッダーメニュー部分②

左側のツールバーの中のサイトメニューの中ですね。

こちらにそれぞれ表示されているページがヘッダー右側にも表示されてるって感じになります。


セクション、ストリップ、ボックスについて・編集方法


それではサイトの中も触っていきましょう。

Wix ホームページ作成 セクション

まず一番大きな枠を選んだ時にセクションというものが出てきます。

サイトの中の全てのパーツはこのセクション内に収めていくことになります。


セクションがサイト内の一番大きな下地のようなものである、ということを覚えておいてください。

Wix ホームページ作成 ストリップ

セクションの次に大きな枠となるものがストリップです。

今はセクションの中にストリップが入っている状態です。


ちなみにセクションもストリップも背景画像を自由にカスタマイズできます。

今はセクションに白い背景が入っていて、ストリップに雪山の風景画像が入っている状態です。


ではこのストリップの背景画像を変えてみましょう。

Wix ホームページ作成 ストリップ背景画像編集①

ストリップ背景を変更をクリックします。


すると、画像というボタンが出てくるので、先程のヘッダーに画像をアップロードした時とと同じ要領で画像をアップロードしていきます。

Wix ホームページ作成 ストリップ背景画像編集②

するとこのように背景が変わりました。


ストリップというのは枠の際の部分を引っ張ると矢印が出てきて、サイズを収縮することができます。

Wix ホームページ作成 ストリップ背景画像編集③

アップロードした画像がサイト上で綺麗に表示されるように細かい部分も設定していくとよいでしょう。

Wix ホームページ作成 ボックス

ストリップの中にはさらにボックスという小さな箱があります。


ボックスもパーツの一部で、この中にサイト内で必要なテキストやボタンが入っていて、それぞれ編集可能です。

さらにセクションやストリップ同様にボックス内のデザインも自由にカスタマイズできます。

Wix ホームページ作成 ボックス編集①

ボックスの形、色を選ぶことができますし、背景を透過させることもできます。

Wix ホームページ作成 ボタン

続いてはボタンパーツ。

Wix ホームページ作成 ボタン編集①

ボタンパーツはパーツを追加の中にボタンメニューがあるので、そこでデザインや色などを自由に設定することができます。


基本的にドラッグ&ドロップでサイト内に好きなボタンを追加、不要なボタンはドラッグした状態でDeleteを押せば消すこともできます。

Wix ホームページ作成 ボタン編集②

ボタン内のテキストはダブルクリックか、テキスト・アイコンの変更で編集することができます。

Wix ホームページ作成 ボタン編集③

ボタンの色の設定にはカラースタイルというものがあるのですが、こちらも自由に設定することができ、パレットを変えることもできます。

Wix ホームページ作成 ボタン編集④

個別で色を追加したい場合もカスタムカラーから好きな色を選ぶことができるようになっています。


このようにかなり直感的な操作で色々作っていけるので、やりやすいと思います。

そしてボタンパーツは押したときのアクションを選ばなければいけません。

Wix ホームページ作成 ボタン編集⑤

今回ボタンデザインを「お問い合わせ」にしているので、ボタンをクリックしたらお問い合わせフォームに移ることが目的になります。


ボタンの設定の中にリンクを追加というものがあります。


ここで移動するページを選べたり、アドレスを設定して、その先に移るようにできたり、といったことができるように設定することができます。

基本的にはページを移動させますので、

Wix ホームページ作成 ボタン編集⑥

テンプレートにはないので、自身で問い合わせフォームなどを作成して、そこに移動できるように設定しておきしょう。


ストリップを編集してカラムを作る


続いてはこちら。

セクションの中にストリップが置かれていますね。

Wix ホームページ作成 ストリップ編集①

ご覧の通りストリップが3分割されています。

このようにストリップにはカラムといって領域を分ける設定があります。


なので、このようにストリップがカラムによって分割されている状態を1から作ってみましょう。

Wix ホームページ作成 ストリップ編集②

ストリップもパーツを追加から追加することができます。今回は真っ白なストリップを追加します。

Wix ホームページ作成 ストリップ編集③

ストリップがあることをわかりやすくするために背景をつけておきます。

Wix ホームページ作成 ストリップ編集④

ではストリップにカラムを追加していきます。

Wix ホームページ作成 ストリップ編集⑤

ストリップを選択した状態でレイアウトのアイコンをクリックします。

そしてカラムを追加を押します。

Wix ホームページ作成 ストリップ編集⑥

するとこのようにストリップが2分割されました。

さらにもう一度同じことをすると、

Wix ホームページ作成 ストリップ編集⑦

このように3分割されます。

こちらはストリップ全体の背景がブルーになっている状態です。

このようにカラムを3分割にすることで、それぞれに背景を設定することができます。

Wix ホームページ作成 ストリップ編集⑧

今は3つのカラムが並んだ状態ですが、カラムを管理から

Wix ホームページ作成 ストリップ編集⑨

カラムの順番を並び替えたり、カラムを3つから2つに減らしたり、逆に4つに複製することも可能です

Wix ホームページ作成 ストリップ編集⑩

そしてカラムの中にテキストやボタンを追加することも自由です。

テキストは色を変えることもできますので、背景色にあわせたり、テキストボックス内の配置も左寄せ、中央寄せなど、好みの設定にかえていきましょう。

Wix ホームページ作成 ストリップ編集⑪

基本的にサイトでも文章でもそうなんですけど、まずは見出しを作って中の本文を作る、という風に作っていくのが良いかと思います。

Wix ホームページ作成 ストリップ編集⑫

本文もフォントや文字のサイズは自由に設定することができます。

Wix ホームページ作成 ストリップ編集⑬

そして先程登場したボタンなんかも設定することができます。


ところで、カラムを分けたりする上でWixでは非常に重要なことがあります。

Wix 980pxガイドラインについて①

Wixにはガイド線があるんですけど、その幅が980pxなんですね。

で、この980pxに必ず収まるようにコンテンツを配置していくことが大事なんですよ。


この980pxというのはタブレットのような比較的小さなデバイスでもコンテンツが必ず表示される領域なんです。

Wix 980pxガイドラインについて②

なので、980pxの幅を超えて配置されたパーツは「枠外」となり、デバイスによってはきれいに表示されなくなってしまうんですよ。

Wix 980pxガイドラインについて③

で、先程分けたカラムみたいなものだと、それぞれに表示されている点線の範囲内の合計が980pxになるんですね。


なので、この点線内に全てのパーツを配置しておけば、カラム内のコンテンツも、どのデバイスで表示されてもキレイに表示される、ということを覚えておいてください。


ということで、続いてはコンテンツが入った状態のカラムを複製してみます。

Wix ホームページ作成 カラム複製

このようにコンテンツが入った状態でカラムをコピーする事ももちろん可能ですので、無駄な動作も大幅にカットすることができると思います。



新しいページの作り方


続いて新しいページを作っていきましょう。

Wix ホームページ作成 新しいページ作成①

新しいページの追加はページ・メニューの箇所からページを追加です。

Wix ホームページ作成 新しいページ作成②

すると、このように沢山の追加するページのテンプレートが出てきます。

ある程度このようなテンプレートにのっとってページデザインをしておくと、それなりにきれいなものが作れたりします。


全くテンプレートは必要ない場合は白紙ページもあります。


お問い合わせフォームの作り方


サイトで自分の事業を紹介して、問い合わせフォームまで持っていくための問い合わせフォームを設置したいと思います。

Wix ホームページ作成 お問い合わせフォーム①

テンプレートの中からお問い合わせフォームが付いているものを選びます。

テンプレートの詳細はそれぞれプレビューからも確認できるようになっています。


それでは早速追加します。

Wix ホームページ作成 お問い合わせフォーム②

ページが追加されると、このようにページ一覧の中にもお問い合わせというページが新たに追加されたことになります。

Wix ホームページ作成 お問い合わせフォーム③

お問い合わせはWixフォームというものを使います。

こちらにお問い合わせフォームで送ってもらう項目が設定されています。

画像のように現状は姓・名・メールアドレスが横一並びに表記されています。

Wix ホームページ作成 お問い合わせフォーム④

これらの配置も基本的にはドラッグアンドドロップで編集することができます。

では、新たに電話番号を追加してみましょう。

Wix ホームページ作成 お問い合わせフォーム⑤

フォームを選択した状態で新しい項目を追加を押すと、様々な項目が出てきます。

ここに基本的な入力欄があるので、こちらから電話番号を追加してみます。

Wix ホームページ作成 お問い合わせフォーム⑥

すると現在のページデザインで電話番号の項目が新たに追加されます。

Wix ホームページ作成 お問い合わせフォーム⑦

各項目の枠のサイズやレイアウト、ボタンの配置なども自由に編集することができます。

Wix ホームページ作成 お問い合わせフォーム⑧

実際にお問い合わせフォームからサイトにメッセージがあった場合、通知が来るメールアドレスはアカウント取得した時のメールアドレスです。

Wix ホームページ作成 お問い合わせフォーム⑨

では、先ほどまで編集していたホームのページに戻ります。

Wix ホームページ作成 お問い合わせフォーム⑩

こちらで「お問い合わせ」ボタンをいくつか作成しました。

そのボタンを押すと、先ほど作ってた問い合わせフォームにとぶように、ボタンに設定を加えていきます。


ボタンを選択した状態でリンクマークをクリックして、

Wix ホームページ作成 お問い合わせフォーム⑪

リンク先をお問い合わせフォームに設定しておきます。


プレビューを見ながらの作成ページのチェックの仕方


これで駆け足ではありましたが、一応、ホームページの形は整いました。

では、これが実際にはどのように見えるのか?

Wix ホームページ作成 プレビューチェック

というのは上図右側のプレビューで確認することができます。


必ずプレビューで自分が作成したページをチェックして、より訪問した人が楽しめるコンテンツになるように細部まで整えていきましょう。


ちなみに先ほどはお問い合わせフォーム作成の際にボタンに対してリンク先を設定致しましたが、ボタンに限らず、画像やテキストに対しても設定することができます。


作成ページの保存・公開方法・まとめ

Wix ホームページ作成 保存方法

作成したページは上図右上の保存ボタンを押すと、保存されます。


基本的には自動保存になっていますが、作業内容を失わない為にも必ず保存しておきましょう。

Wix ホームページ作成 保存方法②

そして今すぐ公開を押すと、サイトが公開されたことになります。

Wix ホームページ作成 公開方法

さらにサイトを見るを押すと、実際にWeb上で公開されているサイトを見ることができます。

サイトを公開したらこのように一通りのチェックを必ず行いましょう。


以上がテンプレートを使ったWixのサイト作成です。

本当に専門的な知識がなくても直感的な操作で簡単にwebサイトを作れる、ということを実感していただけたのではないでしょうか?


こういったwebサイトを作るツールは他にも沢山ありますが、最初に「あ、結構簡単だな。」と思えることって結構大切だと考えています。

そういった意味でもWixは非常におすすめのツールです。


今回はパソコンで見た時のレイアウトを中心に解説していきましたが、次回の動画ではスマートフォンで見たときにどのようにレイアウトしていくのか?について解説していきたいと思います。


動画解説版はコチラ


チャンネル登録・高評価・動画に対するコメントなどよろしくお願いいたします!


Wix Tech Salon

アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております!

Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!


閲覧数:60回0件のコメント

関連記事

すべて表示

Comments


bottom of page