こんにちは！
大阪府和泉市のホームぺージ制作会社 アクトワンの和田英也です！
今回は「Wixアカウント取得 ホームページの作り方の基礎」というテーマで解説いたします。
Wixは直感的な操作でカンタンにホームページを始めとするWebサイトを作成することができます。
そうは言っても「全くやったことがないことを始める」というのは誰にとっても負担が大きいことですが、はじめの一歩さえ踏み出してしまえば、後はどんどん前に進んでいけたりするものです！
今回の動画ではWixのアカウントを作成するところから、テンプレートを使った基本中の基本の操作、これを覚えてしまえばあとはスキルを肉付けしていくだけ！というところまでを サポートできるよう解説をしております。
それでは早速始めてみましょう！
▼ 目次
Wixアカウント取得方法
まずはWixのアカウント取得から。
検索エンジンで「Wix.com」と検索してください。
トップにきている「Wix.comホームページ作成～」をクリックすると、Wixの紹介ページが表示されますので、
「無料ではじめる」をクリックします。
すると、メールアドレスとパスワードを設定するだけで新規登録できるようになっています。
GoogleやFacebookのアカウントからログインすることも可能です。
新規登録が完了したらガイドに沿ってサイト作成を早速始めてみましょう！
こちらでは質問に答えていくと、回答内容に適したテンプレートを用意してくれるのですが、これらはスキップしても構いません。
今回はスキップしていきます。
質問をスキップしていくと、「ダッシュボードを開く」が出てきます。
これでWixのダッシュボードが開いた状態になりました。
そして新規登録した時に登録したメールアドレスにWixからメールアドレス確認のメールが届きます。
こちらは「メールアドレスを確認」を押してください。
こちらのダッシュボードでサイトを管理していくことになるのですが、
左上のマイサイトに移動をクリックするとダッシュボード画面が出てきます。
複数のサイトを管理しているアカウントであれば、管理しているサイトが全てこちらに表示されます。
新たにサイトを作成する場合は「新しいサイトを作成」をクリックします。
するとまた冒頭であったようなサイトアンケートが出てきますが、こちらもスキップして大丈夫です。
テンプレートを使ってホームページ作成
今回は初めてWixを使っていただく方が操作感に慣れるためにもテンプレートを使います。
こちらを開くと様々なホームページテンプレートが出てきます。
ここから気に入ったものを使って編集することができます。
マウスオーバーすると表示と編集というボタンが出てきます。
「編集」を押すと、すぐに編集がスタートできます。
「表示」を押すと、実際のサイトページがどのように見えるのかを確認することができます。
テンプレートが不要の場合は白紙のテンプレートも用意されているので、慣れてきたら白紙から始めるのも良いかと思います。
今回はこちらの経営コンサルタント会社のテンプレートを使って編集を進めてみようと思います。
編集を押すと、このように画面が表示されます。
では早速色々編集していこうと思います。
Wixの特徴はドラッグアンドドロップという直感的な操作でサイトを編集することができることです。
最初にホームページを1から作り出すのは難しいかもしれませんが、今回のようにオーソドックスなテンプレートを使用して、自分の感覚で色々触りながら慣れていくのも良いのではないでしょうか。
まずは簡単に説明していきます。
ホームページにはヘッダーという箇所があります。
ヘッダーは全てのページに表示されるトップの部分です。
逆にフッターはホームページの最下部に表示される箇所のことを指します。
そして各ページはヘッダー、フッター以外の真ん中の部分を編集していくといった感じです。
ではまずはヘッダー部分。
こちらにはテキストパーツが置かれていますので、テキストを編集していきます。
ダブルクリックもしくはテキストを編集で、そのままテキストを自由に入力するだけです。
一般的にヘッダーの左上部分に社名やロゴを入れることが多いですね。
他にもサイトに何か画像やボタンパーツなどを挿入したい場合は、
パーツを追加で挿入していきます。
画像の場合はテキストの次に表示されていますね。
こちらを選択し、画像をアップロードを押すと、自由にアップしたい画像を追加することができます。
一度アップロードした画像は自動的にサイトファイルに保存され、自由に使えるようになっています。
アップロードした画像を選択した状態で「画像を追加」を押すと、このようにサイトに先程アップロードした画像が表示されます。
そして追加された画像はエディタ上でハンドルを使って好きなサイズに収縮することができます。
ではこの画像をヘッダーにもっていってみましょう。
すると、ドラッグした時にヘッダー内に移動という表示が出てきます。
これで枠内に入れれば画像がヘッダー内に入ったことになります。
続いてヘッダーの右側。
この部分はメニューの展開になっているんですが、ページを作った分だけここにメニューが表示されることになります。
それぞれのページはどのように格納されているのかというと、
左側のツールバーの中のサイトメニューの中ですね。
こちらにそれぞれ表示されているページがヘッダー右側にも表示されてるって感じになります。
セクション、ストリップ、ボックスについて・編集方法
それではサイトの中も触っていきましょう。
まず一番大きな枠を選んだ時にセクションというものが出てきます。
サイトの中の全てのパーツはこのセクション内に収めていくことになります。
セクションがサイト内の一番大きな下地のようなものである、ということを覚えておいてください。
セクションの次に大きな枠となるものがストリップです。
今はセクションの中にストリップが入っている状態です。
ちなみにセクションもストリップも背景画像を自由にカスタマイズできます。
今はセクションに白い背景が入っていて、ストリップに雪山の風景画像が入っている状態です。
ではこのストリップの背景画像を変えてみましょう。
ストリップ背景を変更をクリックします。
すると、画像というボタンが出てくるので、先程のヘッダーに画像をアップロードした時とと同じ要領で画像をアップロードしていきます。
するとこのように背景が変わりました。
ストリップというのは枠の際の部分を引っ張ると矢印が出てきて、サイズを収縮することができます。
アップロードした画像がサイト上で綺麗に表示されるように細かい部分も設定していくとよいでしょう。
ストリップの中にはさらにボックスという小さな箱があります。
ボックスもパーツの一部で、この中にサイト内で必要なテキストやボタンが入っていて、それぞれ編集可能です。
さらにセクションやストリップ同様にボックス内のデザインも自由にカスタマイズできます。
ボックスの形、色を選ぶことができますし、背景を透過させることもできます。
続いてはボタンパーツ。
ボタンパーツはパーツを追加の中にボタンメニューがあるので、そこでデザインや色などを自由に設定することができます。
基本的にドラッグ&ドロップでサイト内に好きなボタンを追加、不要なボタンはドラッグした状態でDeleteを押せば消すこともできます。
ボタン内のテキストはダブルクリックか、テキスト・アイコンの変更で編集することができます。
ボタンの色の設定にはカラースタイルというものがあるのですが、こちらも自由に設定することができ、パレットを変えることもできます。
個別で色を追加したい場合もカスタムカラーから好きな色を選ぶことができるようになっています。
このようにかなり直感的な操作で色々作っていけるので、やりやすいと思います。
そしてボタンパーツは押したときのアクションを選ばなければいけません。
今回ボタンデザインを「お問い合わせ」にしているので、ボタンをクリックしたらお問い合わせフォームに移ることが目的になります。
ボタンの設定の中にリンクを追加というものがあります。
ここで移動するページを選べたり、アドレスを設定して、その先に移るようにできたり、といったことができるように設定することができます。
基本的にはページを移動させますので、
テンプレートにはないので、自身で問い合わせフォームなどを作成して、そこに移動できるように設定しておきしょう。
ストリップを編集してカラムを作る
続いてはこちら。
セクションの中にストリップが置かれていますね。
ご覧の通りストリップが3分割されています。
このようにストリップにはカラムといって領域を分ける設定があります。
なので、このようにストリップがカラムによって分割されている状態を1から作ってみましょう。
ストリップもパーツを追加から追加することができます。今回は真っ白なストリップを追加します。
ストリップがあることをわかりやすくするために背景をつけておきます。
ではストリップにカラムを追加していきます。
ストリップを選択した状態でレイアウトのアイコンをクリックします。
そしてカラムを追加を押します。
するとこのようにストリップが2分割されました。
さらにもう一度同じことをすると、
このように3分割されます。
こちらはストリップ全体の背景がブルーになっている状態です。
このようにカラムを3分割にすることで、それぞれに背景を設定することができます。
今は3つのカラムが並んだ状態ですが、カラムを管理から
カラムの順番を並び替えたり、カラムを3つから2つに減らしたり、逆に4つに複製することも可能です
そしてカラムの中にテキストやボタンを追加することも自由です。
テキストは色を変えることもできますので、背景色にあわせたり、テキストボックス内の配置も左寄せ、中央寄せなど、好みの設定にかえていきましょう。
基本的にサイトでも文章でもそうなんですけど、まずは見出しを作って中の本文を作る、という風に作っていくのが良いかと思います。
本文もフォントや文字のサイズは自由に設定することができます。
そして先程登場したボタンなんかも設定することができます。
ところで、カラムを分けたりする上でWixでは非常に重要なことがあります。
Wixにはガイド線があるんですけど、その幅が980pxなんですね。
で、この980pxに必ず収まるようにコンテンツを配置していくことが大事なんですよ。
この980pxというのはタブレットのような比較的小さなデバイスでもコンテンツが必ず表示される領域なんです。
なので、980pxの幅を超えて配置されたパーツは「枠外」となり、デバイスによってはきれいに表示されなくなってしまうんですよ。
で、先程分けたカラムみたいなものだと、それぞれに表示されている点線の範囲内の合計が980pxになるんですね。
なので、この点線内に全てのパーツを配置しておけば、カラム内のコンテンツも、どのデバイスで表示されてもキレイに表示される、ということを覚えておいてください。
ということで、続いてはコンテンツが入った状態のカラムを複製してみます。
このようにコンテンツが入った状態でカラムをコピーする事ももちろん可能ですので、無駄な動作も大幅にカットすることができると思います。
新しいページの作り方
続いて新しいページを作っていきましょう。
新しいページの追加はページ・メニューの箇所からページを追加です。
すると、このように沢山の追加するページのテンプレートが出てきます。
ある程度このようなテンプレートにのっとってページデザインをしておくと、それなりにきれいなものが作れたりします。
全くテンプレートは必要ない場合は白紙ページもあります。
お問い合わせフォームの作り方
サイトで自分の事業を紹介して、問い合わせフォームまで持っていくための問い合わせフォームを設置したいと思います。
テンプレートの中からお問い合わせフォームが付いているものを選びます。
テンプレートの詳細はそれぞれプレビューからも確認できるようになっています。
それでは早速追加します。
ページが追加されると、このようにページ一覧の中にもお問い合わせというページが新たに追加されたことになります。
お問い合わせはWixフォームというものを使います。
こちらにお問い合わせフォームで送ってもらう項目が設定されています。
画像のように現状は姓・名・メールアドレスが横一並びに表記されています。
これらの配置も基本的にはドラッグアンドドロップで編集することができます。
では、新たに電話番号を追加してみましょう。
フォームを選択した状態で新しい項目を追加を押すと、様々な項目が出てきます。
ここに基本的な入力欄があるので、こちらから電話番号を追加してみます。
すると現在のページデザインで電話番号の項目が新たに追加されます。
各項目の枠のサイズやレイアウト、ボタンの配置なども自由に編集することができます。
実際にお問い合わせフォームからサイトにメッセージがあった場合、通知が来るメールアドレスはアカウント取得した時のメールアドレスです。
では、先ほどまで編集していたホームのページに戻ります。
こちらで「お問い合わせ」ボタンをいくつか作成しました。
そのボタンを押すと、先ほど作ってた問い合わせフォームにとぶように、ボタンに設定を加えていきます。
ボタンを選択した状態でリンクマークをクリックして、
リンク先をお問い合わせフォームに設定しておきます。
プレビューを見ながらの作成ページのチェックの仕方
これで駆け足ではありましたが、一応、ホームページの形は整いました。
では、これが実際にはどのように見えるのか？
というのは上図右側のプレビューで確認することができます。
必ずプレビューで自分が作成したページをチェックして、より訪問した人が楽しめるコンテンツになるように細部まで整えていきましょう。
ちなみに先ほどはお問い合わせフォーム作成の際にボタンに対してリンク先を設定致しましたが、ボタンに限らず、画像やテキストに対しても設定することができます。
作成ページの保存・公開方法・まとめ
作成したページは上図右上の保存ボタンを押すと、保存されます。
基本的には自動保存になっていますが、作業内容を失わない為にも必ず保存しておきましょう。
そして今すぐ公開を押すと、サイトが公開されたことになります。
さらにサイトを見るを押すと、実際にWeb上で公開されているサイトを見ることができます。
サイトを公開したらこのように一通りのチェックを必ず行いましょう。
以上がテンプレートを使ったWixのサイト作成です。
本当に専門的な知識がなくても直感的な操作で簡単にwebサイトを作れる、ということを実感していただけたのではないでしょうか？
こういったwebサイトを作るツールは他にも沢山ありますが、最初に「あ、結構簡単だな。」と思えることって結構大切だと考えています。
そういった意味でもWixは非常におすすめのツールです。
今回はパソコンで見た時のレイアウトを中心に解説していきましたが、次回の動画ではスマートフォンで見たときにどのようにレイアウトしていくのか？について解説していきたいと思います。
動画解説版はコチラ
チャンネル登録・高評価・動画に対するコメントなどよろしくお願いいたします！
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!
Comentarios