Wixの使い方まとめ 初心者も無料で簡単にできるホームページの作り方!

Wixの使い方まとめ

こんにちは、yamaです。

この記事では、無料のホームページ作成サービス「Wix」の使い方 をまとめます。

自分の趣味や活動を見てもらいたい。という方は多いと思います。
InstagramやTwitterなどのSNSで公開するのが一般的ですが、より自分好みのホームページが欲しくなる方もいるのではないでしょうか?

とは言え、ホームページを自分で作るのも大変です。
ホームページ作成には、HTML・CSSの学習が必須です。
また、WordpressなどのCMSを利用する場合もレンタルサーバーなどの知識が必要です。

上記のことが「何のこっちゃ?」という方で、でも「ホームページは作りたいな」という方におすすめなのが、ホームページ作成サービスWixです。

今回、Wixの使い方を紹介するにあたり、作例としてポートフォリオサイトを作成しました。

 

作例のサイトはこちら

ギャラリーサイト

ひとりギャラリー

作例はWixの「グラフィックデザイナーB」のテンプレートをカスタマイズしています。

作例を通じて、Wixの登録、テンプレートの編集方法、SEO設定、ホームページの公開までを紹介します。

初心者さん向けに細かく設定方法を紹介しています。
必要な部分を読んでいただき、ホームページ制作に役立ててください

Wixってどんなサービス?

wixの登録画面

ざっくり言えば、専門知識なしで無料でホームページやブログが作れるサービス です。

  • ドラッグ&ドロップの直感的な操作でホームページを作ることができる
  • HTML、CSSの知識なしでもOK
  • 豊富なテンプレートを利用可能
  • 基本無料(有料プランあり) 
  • 世界190ヶ国、1億6000万人以上が使用
  • Googleアナリティクス、サーチコンソールの接続も可能
  • 独自ドメインの取得も可能(有料)

実際の作成時はWixのヘルプ画面から専門用語や操作方法を確認できます。
ここでは難しい専門用語は無視してもOKです。

どんなホームページが作れるの?

  • 個人・店舗・企業のホームページ
  • ブログ
  • ポートフォリオなどのギャラリーサイト
  • ネットショップ(ECサイト)の開業も可能
  • SNSとの連携も可能

個人・企業に関係なく利用可能です。コーポレートサイト、ブログ、ネットショップなどサイトのジャンルも自由に作れます。

 

Wixはこんな方におすすめ

  • ホームページやブログを自分で作りたいけど、HTML・CSSが苦手な方
  • 個人、小規模事業でサイト制作の費用を抑えたい方
yama
無料で利用できるので、試しに使ってみるくらいでもよいと思います。

Wixを使ったホームページ作成方法は3つ

Wixのホームページ作成ツールを簡単に紹介します。

  1. Wix ADI 自動作成ツール
  2. Wix エディタ デザイン編集ツール
  3. Corvid 開発者向けツール

① Wix ADI

  • AIを使用した自動ホームページ作成ツール
  • 数分でサイトが作ることが可能
  • いくつかの質問に答えるだけで、人工知能がサイトを作成

② Wixエディタ

  • デザイン編集ツール(HTML、CSSの知識なしでOK)
  • ドラッグ&ドロップで直感的にサイトを作れる
  • 数百種類のテンプレートを使用可能
  • 2万点以上の写真・動画素材を使用可能

③ Corvid

  • 自分でコーディングする方向け
  • 動的コンテンツ、WEBアプリ作成可能
  • データベースの構築

個人的には自分でデザインができるWixエディタが「Wixらしい」サービスだと感じます。

 

Wixの操作感はどう?

Wixエディタを使ってサンプルサイトを作りましたが、操作感はとても良いと感じました。

エディタの画面もわかりやすく、操作ボタンにマウスを合わせると説明も表示されるため、初めてWixを操作する方でも扱えると思います。

例えば、ページ内にテキストを入れたい場合、メニューボタンの「追加」→「テキストを追加」でテキストエリアを配置できます。
テキストエリアのサイズ変更・配置の変更などはマウスでドラッグするだけで変更可能です。

マウス操作でレイアウトできる

マウス操作で配置や変更ができるのは普通に感じるかもしれませんね。

ボクもHTMLやCSSを学習する前は、PowerPointなどを扱う感覚でホームページが作れると思っていました。
でも、実際の制作では、HTMLやCSSなどのコードを書かなければホームページを作ることはできません。
ボクがはじめてWEBデザインをしたのは20年も前ですが、直感的な操作でホームページが作れるのは当時の理想でした。
それが無料で試せるって凄いことですよ。

 

Wixを使ってホームページを作った感想

主に、Wixエディタを使った感想をまとめます。

Wixの良いところ

  1. マウス操作で直感的にデザインできる
  2. アニメーションなども簡単に実装できる
  3. Wixエディタの画面がわかりやすい
  4. ヘルプが充実している
yama
デザインする機能が充実!作っていて楽しいです!

①と②は操作感についてです。
直感的に操作できるので、初心者さんでも作りたいイメージにかなり近づけることができます。
プログラムの知識がなければ難しいアニメーション機能もクリックだけで実装できるのは驚異的です。
様々な機能を簡単に実装できるので、色々試したくなりますよ。

③と④は管理画面などの使用感です。
エディタ画面からヘルプ(「?」マークで表示)にすぐ飛べるので、わからないことが解決しやすいです。
ヘルプを読めばで大半ことは解決できると思います。

 

Wixのイマイチなところ

  1. 作業途中でテンプレートを変更できない
  2. コードがカオス
  3. SEOをしっかり設定するには有料版が必要

①のテンプレート変更は改善して欲しいですね。
Wixエディタでテンプレートを最初に選んだ後、作業の途中でテンプレートを変更することはできません。
別のテンプレートにしたい時は全て作り直しになります。
Wixエディタを使って一番気になったところですね。

yama
変更できない理由も想像つくのですが、なんとかできないかなぁと思うわけです。

②は、コードを書いてホームページを作る人は気になる部分でしょう。

htmlに直接cssが適用されている

Wixエディタの場合、配置した要素に直接装飾を加えていきます。
それが直感的に操作できる良さなのですが、サイト内部のHTMLを見ると各要素に直接CSSが適用されています。
これがコードを冗長にして、Wixサイトが重いなどと言われる理由なのかもしれません。

yama
②については、「とりあえずホームページを作りたい」という人には問題ないかもしれませんね。

③は、Wixの悪いところというより、単なるユーザーのワガママです。

WixでSEOをしっかり設定するには、有料プランの使用が必要になります。
Googleアナリティクスとの連携を自動設定することもできますが、これも有料プランに入る必要があります。

無料プランでもSEO設定はできます。
ただし、手動設定のため初心者さんには難しく、慣れた人の知識や手助けが必要になります。
無料でもSEO設定できるので十分なのですが、基本無料で使えるとなるとワガママになってしまうわけです。

 

ここまでのまとめ

Wixってこんな感じ
  • 基本無料でホームページが作成できる
  • テンプレートがあるので0から作る必要なし
  • HTMLやCSSといったプログラム知識がなくても大丈夫
  • アニメーション効果などの凝ったデザインもできる
  • ヘルプ機能も充実して安心

エディタ画面がわかりやすくサポートも充実するなど、専門知識なしでホームページを作る工夫がされています。
全体的に非常に快適で、楽しくホームページが作れると思います。
専門的に作りたい人はHTMLやCSSを学習すると思いますので、「はじめてのホームページ」には最適なのではないでしょうか。

Wixについて、サービスの概要と実際に使った感想をまとめました。
「Wixって面白そう」と思った方は、以降の記事で具体的な作成手順を紹介していますので、参考にしてくださいね。

 

Wixの登録からホームページ公開までの流れ

ここからは、Wixエディタを使ったホームページの作り方を紹介していきます。

  1. Wixのアカウントを作成
  2. Wixテンプレートの選択とドメインの設定
  3. テンプレートを編集してホームページを作る
  4. ブログ記事の作成
  5. SEO設定の確認
  6. ホームページの公開

がWixを利用するための準備作業。
 がWixエディタの編集パートです。

順番に紹介していきましょう。

1. Wixアカウトを作成しよう

Wixアカウントの作成画面

Wixでホームページを作るためには、最初にアカウントを作成します。
アカウントは、メールアドレス・パスワードの設定だけで無料で作成できます。

アカウント作成時は無料プランでスタートしますが、有料プランへ変更することも可能です。
基本は無料プランで良いと思いますが、独自ドメインでWixサイトを運営したい方は有料プランに変更する必要があります。

Wixアカウント作成からドメインの設定までの基本事項は、次の記事で紹介しています。

Wix 無料プランのアカウント作成方法 有料プランとの違いも紹介!

2019.11.01
関連記事に書いてあること
  • Wixアカウントの作成方法
  • 無料プランと有料プランの違い

 

2. テンプレートとドメインの設定

Wixのテンプレート選択画面

アカウントの登録の次は、ホームページの作成の準備をします。

Wixでは先ほど紹介した3つの作成ツール(自動作成、デザイン編集、開発者向け)からホームページを作ります。
デザイン編集(Wixエディタ)をおすすめしますが、目的に合わせてツールを選びましょう。

テンプレートは最初にしっかり選ぶことをおすすめします。
Wixのテンプレートを作業途中で変更することはできません。
テンプレート変更するには、サイトを最初から作りな直す必要があります。

後作業を増やさないためにも、大事なことだと思います。

作成ツールの設定、テンプレート選択からドメインの設定までの流れは次の記事で詳しく紹介しています。

Wix 無料プランのアカウント作成方法 有料プランとの違いも紹介!

2019.11.01
関連記事に書いてあること
  • 作成ツールの設定
  • テンプレートの選択
  • サイトドメインの設定

 

3. Wixテンプレートを編集してホームページを作る

テンプレートの編集は、次の順番で行いました。

  1. ヘッダー・フッターの編集
  2. ページボディ編集
  3. スマホ表示の確認
  4. SEOの設定

ホームページを作る時、メインの内容から作りたくなりますよね。
ですが、最初は「ヘッダー」や「フッター」の編集をおすすめします。

一つの理由は、Wixの操作に慣れるのにちょうど良いからです。
シンプルなサイト構成であれば、ヘッダーやフッターの掲載内容も限られてきます。
文字入力・リンクの設定・マウス操作でのレイアウト調整といったWixの使い方に慣れておきましょう。

ヘッダー・フッターの編集

ヘッダーやフッターには「サイトのメニュー」を載せますよね。
その時にサイトの構成を決めないとメニューを作れないので、サイト構成を整理するためにもヘッダーやフッターの編集がおすすめです。

Wixの編集画面の解説と、ヘッダーとフッターの編集方法は次の記事で詳しく紹介しています。

初心者向け Wixサイトの編集方法 ヘッダー・フッターのカスタマイズ

2019.11.03
関連記事に書いてあること
  • Wixエディタの画面解説
  • ヘッダーの編集
  • SNSボタンをヘッダーに設置
  • フッターの編集

ギャラリー機能を使ったポートフォリオの作成

ヘッダー、フッターなどの共通部分が作成できたら、メインコンテンツの作成です。

作例のポートフォリオサイトは、Wixのギャラリー機能でメインコンテンツを作成しています。
ポートフォリオは、自分の作品や実績をまとめる作品集のようなサイトです。
Instagramに写真を公開している方は多いと思いますが、自分でデザインしたホームページで写真やイラストなどを公開するイメージですね。

yama
Wixでポートフォリオサイトを作るのはおすすめですよ。

Wixのギャラリー機能を使ったポートフォリオサイトの作り方は、次の記事で詳しく紹介しています。

Wixのギャラリー機能を使ったポートフォリオサイトの作り方

2019.11.05
関連記事に書いてあること
  • ギャラリーをページに配置する方法
  • 写真のアップロード方法
  • ギャラリーの編集方法
  • デザインの変更

※ 具体的な操作方法の記事は順次追記していきます。




Wixの使い方まとめ

デザインのコツがわかる!
無料メールマガジン配信中!!

メルマガ登録

デザインの基礎がわかる!
全10回だから気軽にできる!
実際のデザイン案件をベースにした実習あり!

10回でマスターできる! レイアウトデザインのコツ
デザインの基礎について、実際の案件をベースにしたデザインワークを行う無料デザイン講座です。

個人・ブロガー向け
デザイン制作サービス

デザイン作成承ります

個人で活動している方、ブロガー向けのデザイン作成サービスです。

ロゴマークや名刺など、デザインでお悩みの方 !

自分で作る時間がない!」
「自分で作りたいけどまとまらない!」
「何をどうしていいのかわからない!!」

そんなデザインに関する悩みを解決します。
個人で仕事を依頼するって何だか難しく感じますが、メール等で打ち合わせしながらデザインを進めています。
料金設定も個人向けにわかりやすく設定しています。

お問い合わせフォームまたは、下記のページからご相談ください!
お待ちしております!

ひとり広報 Line@

デザインのコツに関する質問・疑問。デジカメの購入相談など。Line@も気軽に使ってください!

ひとり広報が「LINE@」始めたよって話

2017.09.18

Line@友だち追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA