ノーコードでホームページが作成出来るWixは、実際に使用してみても分からないことが多いです。
私も初めてWixでサイトを作成してみたときは、まず何をしてよいかが分からず、どういった操作をすれば自分のイメージしているパーツが作成出来るかにめちゃくちゃ苦戦しました。
この記事ではSTEP1〜STEP3の順に解説し、1つのホームページを完成するまでの実際の作業の様子を動画で解説していきます。
・STEP1→Wix質問から作成
・STEP2→Wixテンプレートから作成
・STEP3→白紙テンプレートから作成
すべての動画を視聴した頃には、簡単なホームページは1から作成出来るイメージが掴めるでしょう!
目次
STEP1 Wix質問から作成
動画は1.5倍〜1.75倍の再生速度がオススメです。
※1からオリジナルでサイトを作成したい方はSTEP3から視聴をして下さい。
Wixの質問に答えて、生成されたサイトを編集して完成させる内容です。
動画を視聴してみる ※クリックで開けます
STEP1
【Wix質問からサイトを作成】
※動画の音声が小さめなので、PCの音量は大きくしていただければと思います。
【Wixアカウント作成】
https://support.wix.com/ja/article/wi…
【動画の解説】
※「STEP1」・「STEP2」の動画は簡易的な解説の動画になります。 技術的な解説動画は「STEP3」からの動画になるため飛ばしていただいても構いません。
■STEP1→Wix質問からサイトを作成
■STEP2→Wixテンプレートからサイトを作成
■STEP3 白紙テンプレート(1から作成)
STEP2 Wixテンプレートから作成
WIXの豊富なテンプレートから編集して、サイトを完成させる内容です。
動画を視聴してみる ※クリックで開けます
STEP2-1
【Wixテンプレートからサイトを作成①】
※動画の最後が中途半端に終わってますが、STEP2-2で続きを解説しています。
【Wixテンプレートからサイトを作成のポイント】
・基本的に選択したテンプレートは大きな変更点は加えず、そのまま使用するのがオススメです。
・一度選んだテンプレートは後から他のテンプレートに変更は出来ないため、他のテンプレートを使用してサイトを作成したい場合は作り直す必要があります。
STEP2-2
【Wixテンプレートからサイトを作成②】
※STEP2-1の動画の最後にリンク先が上手く設定できていませんが、Wix編集画面を閉じてキャッシュを削除したら正常にリンク先が機能しました。
STEP2-2の冒頭では上記の作業をした後に動画が始まっています。
■役立つ記事
・Wix アンカーリンクの設定方法を解説!
・Wix スマホレイアウトの編集の仕方を解説!
あわせて読みたい
Wix アンカーリンクの設定方法を解説!【初心者でも3分で設定が完了】
アンカーリンクはよく使うけどWixではどのように設定すればいいのか分からない…そもそもアンカーリンクが分からない…こんな悩みを解決すべくこの記事は存在していま…
あわせて読みたい
Wix スマホレイアウトの編集の仕方を解説!【タブレット・スマホで見た時も綺麗に表示する】
WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、W…
STEP3 白紙テンプレートから作成
1からすべて自分でサイトを完成させる内容です。
テンプレートのサイトを編集するのも良いですが、基本的にお客さんのサイトを作成する場合などはこちらの対応となります。
STEP3の動画ではポートフォリオページの「架空レストランHP」を作成しています。
あわせて読みたい
ポートフォリオ
このページではWixで自作したサイトを掲載しています。ご覧いただけたら嬉しいです。 架空レストランHP 架空ホームページ制作会社LP 架空インテリア小規模ECサイト
TOPページ作成
動画を視聴してみる ※クリックで開けます
STEP3-1
【作成サイトの仕様確認】
※「STEP3」からは実際にご自身でも手を動かしながら動画のようにサイトを作成してみてください。 1つ1つの動画は短いので、1週間以内を目安に完成を目指しましょう!
【参考サイト】
架空レストランHP
STEP3-4
【ファーストビューの作成】
■役立つ記事
Wix スライドショーの作り方!
あわせて読みたい
Wix スライドショーの作り方!【初心者でもたった5分で作成可能です】
スライドショーは一般的にHTMLやCSS、JavaScriptの言語を使うので、作成するのに難易度はやや高めですがWixはノーコードなので5分程度で簡単に作れてしまいます。しかし…
STEP3-5
【コンセプト・スタッフ紹介のセクション作成】
下層ページ作成
動画を視聴してみる ※クリックで開けます
STEP3-13
【メニューページのアンカーリンクとパーツ作成】
■役立つ記事
Wix アンカーリンクの設定方法を解説!
あわせて読みたい
Wix アンカーリンクの設定方法を解説!【初心者でも3分で設定が完了】
アンカーリンクはよく使うけどWixではどのように設定すればいいのか分からない…そもそもアンカーリンクが分からない…こんな悩みを解決すべくこの記事は存在していま…
STEP3-14
【スタッフ紹介ページ・求人ページの作成】
スマホ版作成
動画を視聴してみる ※クリックで開けます
STEP3-17
【スマホ時のレイアウト調整】
※この動画ではTOPページのみの解説しかしていないので、下層ページに関してはご自身で参考サイトを真似しながら調整してみてください。
■役立つ記事
・Wix スマホレイアウトの編集の仕方を解説!
・Wix モバイルツールの使い方!
【STEP3を完了した方へ】
ここまでお疲れ様でした!動画の最後が途切れていますが以下のような内容になります。 STEP3のサイトをすべて作成し終えた方はもう簡単なサイトは自力で作れる地盤が出来ています。あとは色々なサイトを作ってみて知見と経験をためていきましょう!
あわせて読みたい
Wix スマホレイアウトの編集の仕方を解説!【タブレット・スマホで見た時も綺麗に表示する】
WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、W…
あわせて読みたい
Wix モバイルツールの使い方!【トップへ戻るボタンやウェルカム画面などスマホでよく使う設定を解説】
Wixのスマホ時に必須と言ってもいいモバイルツールの設定。モバイルツールの設定の存在を知らないとスマホ時のデザインに大きな損失がでることでしょう。今回はモバイル…
まとめ
ここまでの動画の内容を見ることで、実際に作業している様子からWixで1からホームページを作成出来るイメージが掴めたと思います。
この記事を参考にオリジナルのホームページをぜひWixで作成してみてください!