Wixでホームページを作成してもGoogleなどの検索エンジンにサイトが載らないと認知が広がりません。
実際に検索エンジンには膨大なウェブサイトが登録されており、ホームページの認知の広げ方は様々ですが、検索順位を上げておいた方がメリットは大きいと思います。
この記事ではWixで検索順位を少しでも上げるために抑えておくSEOの設定方法を解説していきます！

SEOとは？

SEOとは、Search Engine Optimization（検索エンジン最適化）の略で、GoogleやYahoo!などの検索エンジンでウェブサイトが検索されたとき、上位に表示されるようにウェブサイトの構造やコンテンツを調整するプロセスを指します。インターネット上での可視性を高めることで、ウェブサイトへの訪問者数を増やし、自社サイト・商品・サービスなどの認知、販売機会を拡大させることができます。

Wix SEOチェックリストを開く

さっそくWixで作成したサイトにSEOの設定をしていきましょう！
SEO設定項目はWixのチェックリストに沿って設定をしていくのがオススメです。

SEO設定を開く

ダッシュボード→マーケティング・SEO→SEOを選択します。

SEOチェックリストを選択します。

サイトの基本設定やキーワードなどを設定していくと、「SEOチェックリスト」の画面になります。

キーワード設定
サイト訪問者が自社ホームページを検索するときに予想される単語で設定をしましょう！

SEOチェックリストの流れ

「SEOチェックリスト」の画面を開いたら、上から順にSEOに関連する項目を「ステップ1」〜「ステップ3」までの流れに沿って設定していきます。

【ステップ1】トップページをGoogle検索に対応させる

「SEOチェックリスト」の画面を開いたら、上から順にSEOに関連する項目を設定していきます。

トップページのタイトル設定

サイトがGoogleで表示された際のタイトルを設定します。※10文字以上が推奨
「その他」を押すと任意のテキストに編集ができます。
画面右のプレビュー画面で実際にGoogleで表示された際の確認をしましょう！

ホームページの顔となるタイトルを設定しましょう！
キーワードで設定した単語を入れると効果的です。

トップページのディスクリプション設定

トップページのタイトル設定と同様にサイトの説明文を入力します。※50文字以上が推奨

Googleで検索をしたサイト訪問者がホームページをアクセスする前に見る文章のため、適切な文章を入れましょう。

トップページのテキスト設定

トップページにキーワードが最低1つ必要なためサイト編集からキーワードを入れます。

キーワードはサイト内に多く散りばめることがSEOの観点で重要です。
違和感にならないようにサイトの文章にキーワードを盛り込みましょう！

インデックス登録

サイト編集で画面右上の「公開」を押すとインデックス登録されます。

モバイル最適化

サイト編集のスマホ版を編集済みであればOKです。

あわせて読みたい

Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】 WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、W…

独自ドメイン

独自ドメインを設定します。※有料プランへの変更が必要です。
無料でサイトを公開したい場合は設定をしなくてOKです。

あわせて読みたい

お名前.comのドメインをWixに紐づけてサイトを公開する方法【初心者でも設定は出来ます】 Wixは直感的な操作で簡単にWebサイトが作成出来るため多くのユーザーに使用されていますが、いざサイトを公開しようと思ったときにドメインを変更したかったり、現在取…

ドメイン名はホームページに適した（自社の名前など）もので取得をしましょう！

Googleへサイトの提出

Googleで検索した際に作成したホームページを見つけてもらうため、サイトの提出をします。

これでステップ1は完了です！

【ステップ2】サイトページを最適化

画像のALT設定

サイト編集時に画像のALT（代替テキスト）が設定されていない箇所はすべて設定をしましょう。

画像のALT（代替テキスト）は編集画面から変更します。
対象の画像をクリック→設定→「代替テキストを入力」から適切なテキストを設定します。

画像のALT（代替テキスト）は目が見えない方がサイトを訪問した際に、画像を代替テキストで読み上げる形となるため設定が必要です！

ホームページのリンク設定

サイト編集時に追加したリンクテキスト、ボタンのリンク先をすべて設定します。

あわせて読みたい

Wix リンク機能の使い方まとめ！【ページ・アンカー・メール・電話番号など正しくリンクを設定する】 Wixではリンク機能がいくつかあり、最初はどのリンクを使っていいかよく分かりません。「文書ファイルってなに？」「ライトボックスってなに？」と思ったのは私だけでは…

・サイト内の別ページ、アンカーリンク→内部リンクで設定
・サイト内に無いリンク先→新しいタブ（外部リンク）
で設定をしましょう！

下層ページの設定

トップページと同様にすべての下層ページの以下を設定します。
・タイトル
・ディスクリプション
・画像のALT（代替テキスト）
・リンク設定

これでステップ2は完了です！

【ステップ3】SEO対策の設定

SEOアシスタント

「SEOアシスタントへ移動する」から設定をします。

・【ステップ1】トップページをGoogle検索に対応させる
・【ステップ2】サイトページを最適化
上記の対応が完了していれば、残りはGoogleビジネスプロフィールとファビコンの設定だけとなります。

Googleビジネスプロフィール

店舗運営の場合はGoogleビジネスプロフィールも登録されている方が多いと思います。
「今すぐはじめる」からWixに連携の設定をしましょう。

ファビコン

Googleで検索した際に表示されるアイコン画像を設定しましょう。

これでステップ3は完了です！

ビジネス情報・SEOの設定

ここまで完了したら最後にホームページの基本情報とその他のSEO設定をしましょう。

ビジネス情報

ダッシュボード→設定→ビジネス情報を開きます。

プロフィールをすべて編集します。

場所と連絡先情報の項目をすべて入力します。
複数店舗があり、他の店舗も登録したい場合は「2番目の場所を追加」から登録が出来ます。

サイトの設定

ダッシュボード→設定→サイトの設定を開きます。

設定していない項目を設定します。

アクセシビリティ

ダッシュボード→サイト・モバイルアプリ→ウェブサイト→アクセシビリティ
からWixで指摘されている問題を解決してください。

検出された問題をサイト編集からすべて修正していきます。

装飾画像などのALT（代替テキスト）漏れ

h1やh2,h3のタイトルの定義

検出された問題をすべて修正すると「検出された問題はありません」となります。

以上で基本的なWixのSEO設定はすべて完了です！

SEO設定の編集

すべてのSEO設定を終えても、キーワードやタイトル、ディスクリプションなどを後からを編集したい場合もあるかと思います。
ダッシュボード or サイト編集から設定を変更出来るので、編集したい場合は参考にしてみてください。

タイトル・ディスクリプション

サイト編集→画面左のツールバー→ページ・メニュー

対象のページの3点マークから「SEOベーシック」を選択します。
・タイトルタグ（検索結果のタイトル）
・メタディスクリプション（検索結果の説明文）
を編集し、公開を押します。

キーワード

ダッシュボード→サイト・モバイルアプリ→SEOチェックリスト

SEOチェックリストの一番上の項目から変更が出来ます。

※変更してもすぐにGoogleの検索エンジンに反映はされません。
ウェブサイトの巡回（クロール）を定期的にGoogleが行っているため、次回ウェブサイトを巡回された際に更新されます。
気長に待ちましょう。。

アクセス解析

ダッシュボード→アクセス解析を押します。
こちらからホームページにアクセスしたユーザーの解析が出来ます。

・新規 or 常連
・閲覧デバイス
・アクセス元
・1日〜年間単位でのアクセス数
などユーザーの情報を調べて自社の発展に活かしましょう！

まとめ

今回はWixでサイトの検索順位を上げるためのSEO設定のポイントを解説しました。
「Wixで検索順位が上がらない」「そもそもサイトが検索しても出てこない…」といった悩みもすべて実施してみたら変化を感じることが出来るでしょう。
ぜひ実際にWixでSEO設定をしてみて、ホームページの検索順位の改善をはかってみてください！

投稿 Wix サイトの検索順位を上げるためのSEO設定のポイント【基本的に抑える項目を解説】 は なまはげブログ に最初に表示されました。

Wixは直感的な操作で簡単にWebサイトが作成出来るため多くのユーザーに使用されていますが、いざサイトを公開しようと思ったときにドメインを変更したかったり、現在取得しているドメインをWixに紐づけしたいと考える方も多いかと思います。

初心者の方にはドメイン、サーバーなどの設定は専門的な知識がいるため難しく感じますがWixでは多くの情報がブログやYouTubeに広がっているため、その内容を参考にやってみると案外簡単に設定が出来ます。

ぜひ諦めずにドメインを取得してオリジナルのサイトを公開してみましょう！

ドメインとは？

ドメインとは、インターネット上の住所のようなもので、ウェブサイトを訪れるために必要な独自の名前を指します。例えば、「〇〇.com」や「〇〇.net」、「〇〇.example.com」などがそれにあたります。このドメイン名によって、インターネット上でウェブサイトが特定され、訪問者は簡単にアクセスできるようになります。
会社の独自性やブランド、検索エンジンにも影響が出るためサイトを作成する際には重要な項目の1つです。

サーバーとは？

サーバーとは、ウェブサイトのデータやコンテンツを保管し、インターネット経由でユーザーに提供するコンピュータのことです。ウェブサイトを公開するためには、このサーバーが必要になります。

お名前.comでドメインを取得

この記事では一般的にドメインの取得で広く知られているお名前.comでドメインを取得し、Wixに紐づけをしていきます。

・ドメイン→お名前.com
・サーバー→Wixで提供しているサーバー
の形で設定をしていきます。

お名前.comにアクセス

まずはお名前.comにアクセスし、ドメインを取得していきます。

ドメイン名の入力

アクセスしたら検索欄に取得したいドメイン名を入力します。

ドメイン取得可否の確認

ドメインが取得可能であれば「◯」が表示されるため、そのドメインでの契約が可能です。
取得したいドメインに間違いがなければ「お申し込みへ進む」を押します。
※「メール通知」がついていると、すでに別のユーザーで仮登録されているため基本的には取得が出来ません。

ドメインの利用用途を選択

一番近いドメインの利用用途を選択します。

お申込み内容の確認

お申込み内容に相違がないか確認します。
※サーバーの申し込みが不要（ドメインのみ取得したい場合）であればサーバーの申し込み内容は削除します。（ドメイン申し込み時にデフォルトでついています）

新規のお申し込みはメールアドレスとパスワードの登録が必要です。→忘れないようメモなどに保管しましょう。
完了後「次へ」を押します。

会員情報の登録

会員登録に必要な情報をすべて入力します。
入力後「次へ進む」を押します。

お支払い情報の入力

お支払い方法（クレジットカード情報）を入力して、入力後「申込む」を押します。

以上でお名前.comでのドメイン取得は完了です！
登録したメールアドレスにドメイン登録完了の連絡が届くので、お名前IDとパスワードは必ず保管してください。
（お名前.comの管理画面ログイン時に必要です）

Wix 有料プランに変更

管理画面にログイン

ドメインを変更したいWixのサイトのダッシュボードを開きます。
「プランを比較」を押します。

料金プランの選択

外部ドメインの接続は有料プランであれば、すべて接続可能なため状況にあわせたプランを選択します。

お支払い周期を選択

• 2年一括払い→24,000円（19,200円お得）
• 1年一括払い→24,000円（7,200円お得）
• 1ヶ月ごとのお支払い

上記はパーソナルプランの金額になります。
※キャンペーンやWixのアップデートによって、各プランの金額は変動します。

状況にあわせたお支払い周期を選択し、「お支払いへ進む」を押します。

お支払い情報の入力

• 決済方法
• 請求先情報

を入力して「購入する」を押します。

以上で有料プランへの変更は完了です！

Wix ドメインの紐づけ

お名前.comで取得したドメインをWixのサイトに紐づけていきます。

ドメイン検索

ドメインを変更したいWixのサイトのダッシュボードを開きます。
お名前.comで取得したドメインを入力して「接続する」を押します。

「はい。このドメインを所有者しています」を押します。

ポップアップが出るため、画像箇所の「ドメインを接続」を押します。

ドメインを検索してくれるため、しばらく待ちます。

「スタート」を押します。

お名前.comのドメイン接続

お名前IDとパスワードを入力して、お名前.comの管理画面にログインします。

お名前.comの管理画面に入れたらOKです。

Wixの設定に戻り、「ログインしました」を押します。

「ドメイン設定を見つけました」を押します。

「ネームサーバーを見つけました」を押します。

「以下の Wix ネームサーバーを追加」の箇所から「〇〇.wixdns.net」のネームサーバー2つをコピーします。

お名前.comに戻り、ネームサーバーの箇所を押します。

ドメイン名の箇所にチェックを入れ、「ネームサーバー情報を入力」の箇所に先ほどコピーした「〇〇.wixdns.net」のネームサーバー2つを貼り付けます。
入れ込み後、「確認画面へ進む」を押して内容に間違いがなければ登録します。

Wixの画面に戻り「ネームサーバーを置き換えました」を押します。

あとはドメインが反映されるまでしばらく待ちましょう。

接続状況の画面は以下のようになっています。
ドメインの接続が完了すると「ドメイン接続」にチェックがつきます。

以上でお名前.comのドメインをWixに紐づける作業は完了です！
この段階では完全にドメインの接続は完了していないため48時間は気長に待ちましょう。

完全なドメイン接続までの流れ

実際に体験した流れは以下です。

STEP

1時間後

ドメイン接続の完了メールが届き、お名前.comで登録したドメイン（Wixに紐づけしたドメイン）でサイトが表示されました。

STEP

1日後

お名前.comで登録したドメイン（Wixに紐づけしたドメイン）でサイトを開くと「このサイトは安全に接続できません」となりました。

サイトにアクセスした際の先頭につく「http」→「https」のURLに移行する最中のため、このようなエラーとなります。
（外部からの妨害を防ぐために安全なウェブサイトへと変化をとげています）

STEP

2日後

Wixから特にメールなどは来ませんがWixのダッシュボードを見ると表示が変わっており、以降サイトにログインしてもエラーはありません。

これでドメインの接続が完全に完了です！
※48時間以上経ってもエラーが起きる場合はWixのサポートに連絡をオススメします。

まとめ

今回はお名前.comのドメインをWixに紐づけてサイトを公開する方法を解説しました。実際に設定してみるとそこまで難しく感じなかったはずです。
お名前.com以外のドメイン契約会社でも基本的に設定方法は変わらないので、ぜひドメインを取得してみてオリジナルのサイトを公開してみましょう！

投稿 お名前.comのドメインをWixに紐づけてサイトを公開する方法【初心者でも設定は出来ます】 は なまはげブログ に最初に表示されました。

ノーコードでホームページが作成出来るWixは、実際に使用してみても分からないことが多いです。
私も初めてWixでサイトを作成してみたときは、まず何をしてよいかが分からず、どういった操作をすれば自分のイメージしているパーツが作成出来るかにめちゃくちゃ苦戦しました。

この記事ではSTEP1〜STEP3の順に解説し、1つのホームページを完成するまでの実際の作業の様子を動画で解説していきます。
・STEP1→Wix質問から作成
・STEP2→Wixテンプレートから作成
・STEP3→白紙テンプレートから作成

すべての動画を視聴した頃には、簡単なホームページは1から作成出来るイメージが掴めるでしょう！

STEP1　Wix質問から作成

動画は1.5倍〜1.75倍の再生速度がオススメです。
※1からオリジナルでサイトを作成したい方はSTEP3から視聴をして下さい。

Wixの質問に答えて、生成されたサイトを編集して完成させる内容です。

動画を視聴してみる　※クリックで開けます

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-2

【共通パーツの作成（見出し、ボタン）】
動画では毎回、フォント、フォントサイズの設定をしていますが一括で設定出来るため以下記事を参考に先に設定することをオススメします。

あわせて読みたい

Wix サイトのカラーとフォントを一括で設定する方法【使い回しができるように一番最初に設定したい内容】 Webサイトのデザインにおいて、フォントとカラーはブランドの個性を表現する重要な要素です。Wixではこれらの要素を一括で設定し、サイト全体で統一感を出すことができ…

STEP3-3

【ヘッダー・フッターの作成】
■役立つ記事
WixでGoogle Mapを埋め込む方法！

あわせて読みたい

WixでGoogle Mapを埋め込む方法！【たったの3分でWebサイトでよく見る地図を作成】 Google Mapはどのサイトでも会社説明やアクセスページなどで基本的によく見るパーツですよね。Wixでも埋め込むことができますが、サイト編集の項目が多すぎて初見だとお…

STEP3-4

【ファーストビューの作成】
■役立つ記事
Wix スライドショーの作り方！

あわせて読みたい

Wix スライドショーの作り方！【初心者でもたった5分で作成可能です】 スライドショーは一般的にHTMLやCSS、JavaScriptの言語を使うので、作成するのに難易度はやや高めですがWixはノーコードなので5分程度で簡単に作れてしまいます。しかし…

STEP3-5

【コンセプト・スタッフ紹介のセクション作成】

STEP3-6

【メニューのセクション作成】

STEP3-7

【当店の特徴のセクション作成】

STEP3-8

【ギャラリーのセクション作成】

STEP3-9

【よくある質問のセクション作成】
■役立つ記事
Wix よくある質問の作り方！

あわせて読みたい

wix フォントの追加の仕方！【既存のフォントにはないフォントをたった5分で追加する方法】 Wixでは多くのフォントが最初から使えるので特には困らないんですが、デザインにこだわると指定のフォントを使いたい場合もでてきます。しかし、使いたいフォントの追加…

STEP3-10

【パララックス・求人・お問い合わせのセクション作成】
■役立つ記事
Wix セクション背景の使える機能まとめ！

あわせて読みたい

Wix セクション背景の使える機能まとめ！【パララックスなどを用いてサイトをオシャレにする】 パーツの背景に画像や動画などを設定したいが、その方法が分からない。そんな方にセクションの追加の仕方や背景の変更の仕方を詳しく解説しています。また、サイトのオ…

STEP3-11

【リンク先の設定】
■役立つ記事
Wix リンク機能の使い方まとめ！

あわせて読みたい

Wix リンク機能の使い方まとめ！【ページ・アンカー・メール・電話番号など正しくリンクを設定する】 Wixではリンク機能がいくつかあり、最初はどのリンクを使っていいかよく分かりません。「文書ファイルってなに？」「ライトボックスってなに？」と思ったのは私だけでは…

下層ページ作成

動画を視聴してみる　※クリックで開けます

STEP3-12

【下層ページの共通パーツの作成】

STEP3-13

【メニューページのアンカーリンクとパーツ作成】
■役立つ記事
Wix アンカーリンクの設定方法を解説！

あわせて読みたい

Wix アンカーリンクの設定方法を解説！【初心者でも3分で設定が完了】 アンカーリンクはよく使うけどWixではどのように設定すればいいのか分からない…そもそもアンカーリンクが分からない…こんな悩みを解決すべくこの記事は存在していま…

STEP3-14

【スタッフ紹介ページ・求人ページの作成】

STEP3-15

【求人フォームの作成】
■役立つ記事
Wix お問い合わせフォームの作り方！

あわせて読みたい

Wix お問い合わせフォームの作り方！【たったの3ステップで初心者でも簡単にお問い合わせフォームが作成… お問い合わせフォームはWebサイトではもはや必須のパーツですよね。Wixではテンプレートでいくつかのフォームが用意されていますが、そのままのデザインだと何か物足り…

STEP3-16

【お問い合わせフォームの作成】

スマホ版作成

動画を視聴してみる　※クリックで開けます

STEP3-17

【スマホ時のレイアウト調整】
※この動画ではTOPページのみの解説しかしていないので、下層ページに関してはご自身で参考サイトを真似しながら調整してみてください。
■役立つ記事
・Wix スマホレイアウトの編集の仕方を解説！
・Wix モバイルツールの使い方！

【STEP3を完了した方へ】
ここまでお疲れ様でした！動画の最後が途切れていますが以下のような内容になります。 STEP3のサイトをすべて作成し終えた方はもう簡単なサイトは自力で作れる地盤が出来ています。あとは色々なサイトを作ってみて知見と経験をためていきましょう！

あわせて読みたい

Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】 WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、W…

あわせて読みたい

Wix モバイルツールの使い方！【トップへ戻るボタンやウェルカム画面などスマホでよく使う設定を解説】 Wixのスマホ時に必須と言ってもいいモバイルツールの設定。モバイルツールの設定の存在を知らないとスマホ時のデザインに大きな損失がでることでしょう。今回はモバイル…

まとめ

ここまでの動画の内容を見ることで、実際に作業している様子からWixで1からホームページを作成出来るイメージが掴めたと思います。
この記事を参考にオリジナルのホームページをぜひWixで作成してみてください！

投稿 Wixでサイト作成を実演！【実際に編集している様子を動画で解説】 は なまはげブログ に最初に表示されました。

Webサイトのデザインにおいて、フォントとカラーはブランドの個性を表現する重要な要素です。
Wixではこれらの要素を一括で設定し、サイト全体で統一感を出すことができますが、意外と変更方法が分かりません。

この記事では、Wixでサイトを作成する最初の段階で設定しておきたいフォントとカラーを一括で設定する方法をご紹介します！

カラーの設定

1. Wixエディターを開き、「サイトデザイン」をクリックします。
2. 「カラーテーマ」を選択し、「サイトカラーを編集」をクリックします。
3. 「カラーを追加」を選択し、ブランドに合わせたカラーを選択またはカスタムカラーを追加します。
4. 設定したカラーは、「テーマカラー」として保存され、サイト全体で使用できるようになります。

実際にテキストのカラーを変更してみると、「テーマカラー」に登録したカラーが反映出来ているのが確認できます。
※Wixのアップデートによって画面の見え方などは少し違います。

Wixでは、サイト全体にわたって使用するカラーを事前に定義しておくことができます。これにより、各ページやセクションでカラーを一括で設定し、ブランドのカラーパレットに忠実なデザインを維持できます。
メインカラー、サブカラー、ボタンカラーなどよく使うカラーはこちらに設定しましょう。

フォントの設定

テキストテーマの編集

1. 「サイトデザイン」に戻り、「テキストテーマ」を選択します。
2. 「見出しh1」〜「段落3」までをクリックして編集します。
3. 「フォント」「サイズ」「カラー」といった項目ごとに設定ができます。
4. 設定したフォントは、テキストを追加する際に自動的に適用されますが、必要に応じて個別に変更することも可能です。

実演

実際に「見出し h2」に以下を登録してみます。
・フォントは「Noto Sans JP」で設定
・フォントサイズは30pxの太字
・カラーは水色

Wixエディターに戻り、サイトに「見出し h2」を追加してみます。
先ほど「見出し h2」に設定した内容が反映されているのが分かるかと思います。
この作業を「見出しh1」〜「段落3」まで繰り返して作業が完了です！

カラーと同様に、Wixではフォントも一括で設定することが可能です。統一されたフォントはサイトの読みやすさを向上させ、プロフェッショナルな印象を与えます。
セクションの見出し（h2）、セクションのサブ見出し（h3）、テキストなどはこちらに設定して使い回せるようにしておきましょう。

サイトの背景カラーの設定

1. 「サイトデザイン」に戻り、「ページ背景」を選択します。
2. 「カラー」を選択し、希望の背景カラーを選択します。
3. また、「マイカラー」から事前に設定したカラーを選択することもできます。
4. 背景カラーはページごとに異なるカラーを設定することも可能ですが、ブランドの一貫性を保つためには、全ページで同じカラーを使用することをお勧めします。

Wixでは、サイトの背景カラーも簡単に設定できます。背景カラーはサイトの雰囲気を大きく左右するため、選択には慎重を期す必要があります。

まとめ

今回はWixでサイトのカラーとフォントを一括で設定する方法を解説しました。
フォントとカラーを一括で設定することで、サイト全体に統一感を持たせることができます。これにより、訪問者にとって覚えやすく、信頼感のあるサイトを作成することが可能になります。効率的にサイトのデザインを整えて良いサイトを作成しましょう！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix サイトのカラーとフォントを一括で設定する方法【使い回しができるように一番最初に設定したい内容】 は なまはげブログ に最初に表示されました。

WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。

Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、Wixでもスマホ時のレイアウトを調整する必要があります。

タブレット・スマホで見た時もサイトの見た目が良くなるよう、スマホ時のレイアウト調整のポイントをこの記事で解説していきます！

モバイル最適化

早速スマホ時のレイアウトを調整していきましょう！

まずはじめに「モバイル最適化」を行いましょう。
編集画面上にある「設定」→「モバイル最適化」を選択し、「モバイル最適化を有効にする」にチェックをいれます。

有効化することである程度、自動でスマホのレイアウトの見た目を調整してくれます。

モバイルツールの設定

続いてモバイルツールの設定をします。
編集画面左のツールバーに「モバイルツール」があるので選択。

モバイルツールでは下記の設定と編集ができます。

• モバイルアクションバー
• 「トップ」へ戻るボタン
• ウェルカム画面
• スタイルカラーを見る

スマホ時のレイアウトではよく使うパーツなのでサイト内に設定したい場合は編集をします。
編集方法は以下の記事で詳しく解説していますのでどうぞ。
→参考 : Wix モバイルツールの使い方！【トップへ戻るボタンやウェルカム画面などスマホでよく使う設定を解説】

非表示になっているパーツを表示

モバイル最適化などを行うと、PC時で表示されていたパーツが自動で非表示になる場合があります。
編集画面左のツールバーに「モバイル上で非表示」があるので表示したいパーツがある場合は選択し表示します。

※稀にPC時でグループ化したパーツがスマホのサイト内と「モバイル上で非表示」のツール内のどこにもない場合があります。
→その場合はPCでグループ化したパーツのグループ化を解除することにより表示されます。

スマホのレイアウト崩れを調整

モバイル最適化をしただけではレイアウトは崩れたままなので、崩れている箇所を編集していきます。
ヘッダー　→　ファーストビュー　→　各パーツ　→　フッター　と上から順に編集します。

ツールバーの表示

編集画面右上の「ツール」→「ツールバー」にチェックを入れるとツールバーが表示されます。

個人的にスマホの編集ではツールバーから各パーツのサイズを変更することが多いため、ツールバーをすぐ横に置いておくのがオススメです。

ヘッダーの調整

主にヘッダーでは下記を調整します。

• 会社のロゴのサイズ
• ヘッダーの高さ
• ハンバーガーメニュー
• ハンバーガーメニューの中身

※ハンバーガーメニューはPC時に「模型メニュー」をヘッダーに入れていれば自動で表示されます。ただし、PCでヘッダー・フッターを非表示にしていると表示されません。

ファーストビューの調整

ファーストビューの高さなどを調整します。

スマホで見る場合は250px〜400pxあたりがちょうど良く見えます。
実際の見栄えをは実機（お手持ちのスマホ）で確認をしましょう。
→スマホで自サイトのURLからサイトを開いてレイアウトの見た目を確認

ファーストビューに画像ではなく動画を設定している場合

スマホ時ではデフォルトで動画が画像に変更されているため、スマホ時も動画を再生したい場合は
ファーストビュー選択　→　編集項目の「背景」　→　「スマホで動画を再生」にチェック

各パーツの調整

各パーツでは主に下記を調整します。

• インナー幅
• 文字サイズ
• ボタンサイズ
• 余白
• 画像や動画のサイズ
• 横並びのパーツの調整
• スマホ時、いらないパーツを非表示

順番に解説していきます。

インナー幅

各セクションをこのインナー幅に収め、揃えることでサイトの見栄えが綺麗に見えます。
PC時にはインナー幅が自動で設定されており、画像のような点線がインナー幅になります。

スマホ時にはインナー幅がないためご自身でインナー幅を仮で設定し、各パーツの横幅を揃えます。
Wixのスマホの編集画面が最大幅320pxなので、各パーツを280pxで揃えると綺麗に見えます。

文字サイズ

画像の＋とーのボタンで文字サイズを調整します。

改行したい場合やテキスト内の文字を編集したい場合はスマホの編集では出来ません。
そのため、以下の方法から編集をします。
・新しくテキストを追加し、既存のテキストは非表示にする
・PCのテキストを変更する

※新しくテキストを追加した場合は文字サイズ・行間・フォントの種類がデフォルトになるため、PC時に設定したものに変更する必要があります。（フォントサイズは13px以下は設定できません）

ボタンサイズ

ボタンのサイズを調整します。

• ボタンの高さや横幅
• ボタンの文字サイズ
• ボタンのアイコンサイズ
• ホバー時の各サイズ

余白

セクションなど、各パーツの上下の余白をドラッグして調整します。

画像や動画のサイズ

• 画面いっぱいに見せたい場合は横幅320px
• それ以外は基本、横幅280pxにすると良い

横並びのパーツの調整

横並びのパーツの場合は基本、スマホ時は1列で縦並びにすると綺麗に見えます。

PC時は3列で横並び（3カラム）

スマホ時は1列で縦並び（1カラム）

PC時は3列だったパーツをスマホ時は1列にするだけなので簡単ですね！

スマホ時、いらないパーツを非表示

スマホのレイアウトを編集していると、スマホの時は表示させたくないパーツも出てくるかと思います。
その場合は表示させたくないパーツを選択し、非表示アイコンを選択すると非表示にできます。

これで各パーツのおおまかな調整が完了です！

タブレットのレイアウトを綺麗にする

Wixでは、PCとスマホのレイアウト編集しか出来ないため、タブレットの見た目をよくしたい場合はPC時のインナー幅に収める必要があります。

PC時、インナー幅に収めることで検証ツールで確認したときにタブレットの時も画面からはみ出さずに綺麗に表示できます。

検証ツールでの確認方法（タブレットの見た目を確認する方法）

①自サイトのURLからサイトを開き、以下を実行
Mac　→　「Command」 ＋ 「Option」 ＋ 「I (アイ)キー」で検証ツールを開く
Windows　→　「Ctrl」 ＋ 「Shift」 ＋ 「I (アイ)キー」または「【F12】キー」で検証ツールを開く

②デバイスのマークを選択

③確認したいデバイスのサイズを選択し、リロードして確認

これでタブレットの見た目も綺麗に編集できます！

スマホレイアウト参考

PCとスマホでどのようにレイアウトが変わったかが分かるように自作した参考サイトをポートフォリオに載せております。
検証ツールでデバイスを変えながら確認してみて下さい。

参考 : ポートフォリオページ

まとめ

今回はWixでスマホレイアウトの編集の仕方を解説しました。
レスポンシブ対応までがWebサイト作成のマストな工程ですので、スマホレイアウトまで完結しましょう。
PCでのレイアウトが作れたらスマホでのレイアウト調整は簡単にできるので、この記事を活用してスマホ・タブレットでのサイトの見た目も綺麗に表示してみて下さい！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】 は なまはげブログ に最初に表示されました。

スライドショーは一般的にHTMLやCSS、JavaScriptの言語を使うので、作成するのに難易度はやや高めですがWixはノーコードなので5分程度で簡単に作れてしまいます。

しかし、簡単とはいってもスライドショーの追加の仕方や編集方法が分からなければ作成は困難でしょう。

そこで今回はWixでスライドショーの作り方を解説していきます！

完成イメージ

スライドショーは自動で、または矢印ボタンなどをクリックすることで画像・動画が切り替わったりするパーツです。
Webサイトではよく見るやつですね。さっそく作り方を見ていきましょう！

スライドショーの追加

まずは元となるスライドショーのパーツを追加します。
サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　インタラクティブ　→　ボックススライドショー　→　「特集記事（フード）」のパーツを選択。

スライドショーの編集

いらない項目を削除

追加すると画像のようなパーツがサイト編集画面にでます。

「人気のレシピ」のテキストと「詳しく読む」のボタンはいらないので削除します。

続いて背景の画像もなくします。
スライドショーのパーツをクリックし、　スライド背景を変更　→　単色　から背景色を白にします。
これで背景が白になり、画像が消えました。（スライド背景の透過を0%にするとセクション背景になじみます）

スライド画像の追加

サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　画像　からスライドショーに設定したい画像を新しく追加します。

追加した画像をパーツの中央に配置します。

矢印ボタンとスライドボタンの編集

続いて矢印ボタンとスライドボタンの編集をしていきます。

色の変更

スライドショーのパーツをクリックし、　デザインを変更　→　不透明度・色　から矢印ボタンとスライドボタンの色を変更します。

サイズ・位置の変更

スライドショーのパーツをクリックし、「レイアウト」から矢印ボタンとスライドボタンのサイズ、位置を調整します。

これで1枚目のスライドが完成です！

スライドの枚数を追加

デフォルトではスライドが3枚の設定なのでスライドを追加したい場合は
スライドショーのパーツをクリックし、　スライドを管理　→　「スライドを複製」または「スライドを追加」からスライドを追加できます。

2枚目以降のスライド編集

2枚目以降のスライドは動画のように「スライド1/3」の横にある矢印をクリックすると2枚目→3枚目と切り替わります。

あとは1枚目の編集と同様にスライドの枚数分を編集します。
これで完成イメージのようなスライドが完成です！

応用パターン

最後に完成イメージで作ったスライドショーを応用したパターンをご紹介します。

動画の入れ込み

サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　埋め込みコード　→　シングル動画プレイヤー　→入れ込みたい動画のパーツを選択。

完成イメージでは画像で作成しましたが、動画のスライドショーもできます！
各スライドに動画やYouTube入れ込むことで動画のように動きます。

アニメーション

スライドショーの画像パーツをクリックし、　アニメーション　→　お好みのアニメーションを選択。

動画のようにアニメーションを追加することでスライドショーに立体的な動きが生まれます！

ここまでご紹介した応用パターンも使うと、スライドショーの作成パターンが更に広がるのでぜひ色々と試してみてください！

まとめ

今回はWixでスライドショーの作り方を解説しました。
ノーコードなので簡単にスライドショーが作成できましたね！
ここまで解説したスライドショーの追加の仕方や編集方法、応用パターンを活用して、ぜひたくさんのスライドショーを作成してみてください。

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix スライドショーの作り方！【初心者でもたった5分で作成可能です】 は なまはげブログ に最初に表示されました。

企業のロゴや画像、文字などが画面の左右からゆっくりと絶えず流れているパーツを作りたい。
意外と使えるパーツなので、Wixを使っている方にぜひ届けたい。そんな思いでこの記事を書きました。

今回はWixで画像の無限ループを作る方法を解説します！

完成イメージ

画像の無限ループがよく分からないと思いますので、まずは完成イメージを動画で見てみましょう！
画面横幅いっぱいに画像が並び、右から左にたえず流れています。Webサイトでもたまに見るパーツですね。

実際のサイトへの応用例
→参考 : 架空HP制作会社LP（トップページのCONCEPT箇所）

また、このようなテキストの画像を使うことで文字が流れるように見せることもできます。

作り方レシピ

ではさっそく作り方を解説していきます。パーツの追加から見ていきましょう。

パーツの追加

サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　ギャラリー　→　プロギャラリー　→　ショーケース　を選択。

するとショーケースのパーツが追加されます。

画像の追加・変更

追加したショーケースのパーツをクリックし、「メディアを管理」を選択。
そうすると、このような画面になります。

画像を追加したい場合は「新しく追加」から、変更したい場合は変更したい画像を選択し「画像を変更」からアップロードし、編集します。

パーツの編集

ここからショーケースのパーツの編集をしていきます。

横幅の調整

ショーケースのパーツをクリックし、　ストレッチ　→　全幅に引き伸ばす　のチェックを入れる。
すると画面横幅いっぱいにパーツが広がります。

高さの調整

画像のようにパーツの高さをドラッグして調整します。

無限ループスライド設定

ショーケースのパーツクリックし、　設定　→　レイアウト　をクリック。

• 画像をループ表示にチェックをいれます。
• 自動でスライドにチェックをいれます。
• 連続にチェックをいれます。
• ホバーで一時停止のチェックを外します。
• 速度や間隔の数値を調整します。

以上を設定すると簡単に画像の無限ループが作成できます！

オプション設定

上記の動画を見ると画像をホバーしたときに背景色とハートのアイコンがつき、クリックしたときに画像のポップアップが表示されてしまうのでクリックしても何も起こらない仕様に変更します。

ホバー時の背景色をなくす

ショーケースのパーツをクリックし、　設定　→　デザイン　→　オーバーレイ・アイコン　をクリック。
オーバーレイ色の数値を「0%」に変更します。

ホバー時のハートアイコンをなくす

ショーケースのパーツをクリックし、　設定　→　ハートアイコン　のチェックを外す。

クリック時のポップアップ表示をなくす

ショーケースのパーツをクリックし、　設定　→　クリック時のアクション　を見る。
選択項目がデフォルトで「拡大表示で開く」になっているので「なし」に変更。

上記の各オプション設定をすることで完成イメージのような画像の無限ループを作ることができるので
ぜひ試してみてください！

まとめ

今回はWixで画像の無限ループを作る方法を解説しました。
意外と使えるパーツなので、デザインのパターンとして覚えておくと良いと思います。
ここまで解説したWixで画像の無限ループを作る方法を使い、理想とするWebサイトに一歩近づく助けになることが出来たら幸いです！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix 画像の無限ループを作る方法！【左右からゆっくり流れてくるパーツを作成】 は なまはげブログ に最初に表示されました。

Google Mapはどのサイトでも会社説明やアクセスページなどで基本的によく見るパーツですよね。
Wixでも埋め込むことができますが、サイト編集の項目が多すぎて初見だとおそらく見つけるのは難しいです。

そこで今回はWixでGoogle Mapを埋め込む方法を解説します！

Google Mapの追加

まずはサイトにGoogle Mapの追加をしていきます。

サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　フォーム　→　地図　の中からお好みのデザインを選択。
※個人的には普段から見慣れているGoogle Mapのデザインに近い「クラシック(高速道路)」・「クラシック(地形)」がおすすめです！

これでサイトにGoogle Mapの追加が完了です！

Google Mapの編集

デフォルトでは住所がWixの本社になっているので、変更する必要があります。

Google Mapのピン位置を変更

Google Mapのパーツをクリックし、「地図を管理」を選択。

編集項目がでるので「住所」の項目をGoogle Mapに表示したい住所に変更し、「タイトル」も変更します。

上記を変更するとGoogle Mapの表示が変わったことが確認できます。

Google Mapの幅を変更

Google Mapをサイトの横幅いっぱいに見せたい場合もあるかと思います。
設定方法はごく簡単で、Google Mapのパーツをクリックし、「ストレッチ」を選択。
「全幅に引き延ばす」にチェックを入れる。

そうすると画面の横幅いっぱいにGoogle Mapの地図が広がります。
あとはお好みでパーツをドラッグし、高さを調整してください。

いらない表示項目の削除

デフォルトでGoogle Mapに表示されている各項目を少し解説します。
こちらを参考にいらない項目を削除してください。削除の設定は後ほど解説しています。

地図/衛星写真

地図の表示の仕方を変更できます。

ズームイン/ズームアウト

地図の拡大、縮小を操作できます。

ストリートビュー

地図のストリートビューを表示できます。

ルート案内リンクを表示

目的地までの案内が表示されます。

マップのドラッグ

地図を画面いっぱいに表示します。

各項目の挙動は以上になります。

ここまで解説した各項目の編集は「設定」→「Google マップ設定」からチェックを外すことで非表示に変更できるのでお好みで設定してみてください。

まとめ

今回はWixでGoogle Mapを埋め込む方法を解説しました。
ここまで記事を読むことでGoogle Mapの追加から編集、細かな設定までを覚えることができたと思いますので、ぜひサイトに埋め込みをしてみて下さい！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 WixでGoogle Mapを埋め込む方法！【たったの3分でWebサイトでよく見る地図を作成】 は なまはげブログ に最初に表示されました。

お問い合わせフォームはWebサイトではもはや必須のパーツですよね。
Wixではテンプレートでいくつかのフォームが用意されていますが、そのままのデザインだと何か物足りなさを感じてしまいます。

ある程度の作り方さえ覚えてしまえば、テンプレートのフォームをカスタマイズしていい感じのお問い合わせフォームにブラッシュアップできるので、ぜひこの記事で覚えていってください。

ではさっそくWixでお問い合わせフォームの作り方を解説していきます！

作成例

こちらはWixのテンプレートのフォームをカスタマイズして作成したお問い合わせフォームになります。
編集の仕方をマスターすれば、初心者でも簡単にこのようなお問い合わせフォームを作ることができます。
→ 参考 : 架空レストランHPのお問い合わせページ

お問い合わせフォーム完成までの流れ

完成までの工程はたったの3ステップです！

順番に解説していきます。

お問い合わせフォームの追加

Wixのテンプレートで用意されているフォームの種類は以下になります。
作成イメージに近いフォームを選ぶと良いです。

ではさっそく、フォームを追加しましょう！

サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　フォーム　→　お問い合わせ　の中からお好みのデザインを選択。

するとサイトにお問い合わせフォームが追加されます。

お問い合わせフォームの編集

上記で追加した「お問い合わせフォーム」のパーツを実際に編集しながら一緒に作成していきましょう！

フォーム名の編集

追加したお問い合わせフォームをクリック　→　「連絡先情報」のテキストをダブルクリック　→　テキストを編集　から任意の名前に変更でき、フォントサイズや色もここで変更できます。

項目の編集

続いて「お名前」や「メールアドレス」といったフォーム内の各項目を編集をします。

テキスト入力設定

お問い合わせフォームをクリック　→　編集したい項目をダブルクリック　→　項目を編集

こちらでは主に下記を編集できます。

デザイン・色の設定

各項目のデザインや色の変更は
お問い合わせフォームをクリック　→　編集したい項目をダブルクリック　→　デザインを変更　から編集できます。

また、項目の通常時・ホバー・フォーカス・エラー・無効時のデザインも設定できます。

お問い合わせフォームをクリック　→　編集したい項目をダブルクリック　→　デザインをカスタマイズ　→　画像箇所のトグルから「通常時・ホバー・フォーカス・エラー・無効」を選択して編集します。

項目の追加

お問い合わせフォームをクリック　→　新しい項目を追加

追加できる項目の例は下記をご覧ください。

連絡先項目

基本的な項目

各項目の詳しい解説はしませんが、実際にご自身で追加して動きなどを確認してみてください。

フォームの編集

最後にフォームの編集をします。

お問い合わせフォームをクリック　→　デザインを変更

入力欄

各項目の入力欄のデザインを一括で編集できます。

「送信」ボタン

送信ボタンのデザインを編集できます。

フォームの背景

フォームの背景を編集できます。

ここまでの編集の流れを順番に設定していくとフォームのデザインまでのカスタマイズが完了です！

編集前→編集後の完成イメージ

お問い合わせフォームの送信設定

フォーム名（通知メッセージ）

お問い合わせフォームをクリック　→　フォーム設定　→　設定　→　「フォーム名を入力してください」から任意のフォーム名を入力。
※回答集計表と通知にのみ表示されます。

送信メッセージ

お問い合わせフォームをクリック　→　フォーム設定　→　送信メッセージ　→　「送信完了メッセージ」から任意のフォーム名を入力。

通知メール

お問い合わせフォームをクリック　→　フォーム設定　→　設定　→　「通知メール」

デフォルトではWixに登録したメールアドレスになっているので、通知を受け取りたいメールアドレスを変更したい場合は通知を設定をクリックし、ダッシュボードから変更。

基本的な設定だけを解説しましたが、他にも細かな設定ができるのでぜひ試してみてください！

まとめ

今回はWixでお問い合わせフォームの作り方を解説しました。
使い方に慣れたらノーコードなので直感的にサイト制作ができるのがWixの強みです。
ここまで解説したお問い合わせフォームの追加の仕方、編集の仕方、各種設定の方法を活用することで、テンプレートのフォームをカスタマイズして理想のお問い合わせフォームを作ることができるので、ぜひ作成してみてください！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix お問い合わせフォームの作り方！【たったの3ステップで初心者でも簡単にお問い合わせフォームが作成可能】 は なまはげブログ に最初に表示されました。

Webサイトでよく見かける「よくある質問」のパーツですがWixでアコーディオンも含めた実装方法が分からなかったのでこの記事にて記録します。

サイト編集内を色々と探してもそれらしきパーツは見当たらないんですよね,,,
私と同じような経験をする人が一人でも減ることを願い、さっそく本題に進みましょう。

では、よくある質問の作り方を解説していきます！

よくある質問の追加

さっそく「よくある質問」のパーツを追加しましょう！
サイト編集のアプリから追加します。

サイト編集　→　画面左にあるツールバー　→　アプリ
検索バーで「よくある質問」と検索　→　Wix FAQ　を選択。

すると「よくある質問」のパーツが追加されます。

よくある質問の編集

追加したパーツはそのままでも十分に使えますが編集方法も少し解説していきます。

デザイン変更

最初から1番目の回答が開いているのが気になるので、クリックしたら表示される仕様に変更します。

「よくある質問」パーツをクリック　→　編集アイコンがでるので「設定」を選択。

Wix FAQの編集がでるので「設定」を選択。

「最初の回答を常に表示」のチェックを外す。

そうするとクリックしたら回答が表示される仕様に変更できます。

SNSアイコンを削除

デフォルトでは回答を表示すると画像のようなSNSアイコンがありますが、「よくある質問」のパーツに表示する可能性は少ないため削除します。

「よくある質問」パーツをクリック　→　編集アイコンがでるので「設定」を選択。
Wix FAQの編集がでるので「表示情報」を選択し、各SNSのチェックを外す。

これで回答を表示してもSNSアイコンがでなくなりました！

質問と回答のテキスト変更

次は質問と回答の内容を変更します。
「よくある質問」パーツをクリック　→　編集アイコンがでるので「よくある質問を管理」を選択。

ダッシュボードに切り替わるので変更したい項目の「編集」を選択。

あとは質問と回答のテキストを編集すれば完成です！

挙動確認

実際に上記の流れで作成すると動画のような「よくある質問」パーツが作成できます。

カテゴリーの設定

ここまで質問と回答などの編集をしましたが、カテゴリーごとに質問を表示したい場合もあるかと思います。Wixではカテゴリーも簡単に分けて表示できるのでご紹介します。

「よくある質問」パーツをクリック　→　編集アイコンがでるので「よくある質問を管理」を選択。
デフォルトでは「一般」というカテゴリーがありますが3点マークから「カテゴリー名を変更」を選択して任意のカテゴリー名に変更します。

カテゴリーの追加

同様にダッシュボードから編集できます。
画面右上の「新しく追加」から「カテゴリー」を選択して任意のカテゴリー名を入力し「Enterキー」で確定します。

カテゴリーの振り分け

カテゴリーを追加できたので質問内容をカテゴリーに振り分けます。
質問と回答を編集したときのように各質問の編集画面を開き、任意のカテゴリーにチェックを入れ、保存します。
※カテゴリーの表示順はダッシュボードからドラッグして変更できます。

デザインの調整

カテゴリーの設定はできたので編集画面に戻り、デザインの調整をします。
現在のカテゴリーを表示している時はそのカテゴリーの色を変更する仕様にしたいと思います。
デフォルトでは「選択したカテゴリー」と「カテゴリー」の色が同じなので「カテゴリー」の色を黒にし、フォントサイズも大きくします。
※よくある質問のデザインは見やすくするため「シンプル」に変更してます。

上記の設定をすると動画のような仕様になります。これでカテゴリーの設定が完了です！

まとめ

今回はよくある質問の作り方を解説しました。
サイト編集内を色々と探してもそれらしきパーツは見当たりませんでしたが、アプリから追加すれば簡単にアコーディオンを含めた、よくある質問パーツが完成しましたね。
ここまで解説したよくある質問の作り方を駆使して、理想とするWebサイトに一歩近づく助けになることが出来たら幸いです！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix よくある質問の作り方！【質問をクリックすると回答が表示されるようなパーツの作成方法】 は なまはげブログ に最初に表示されました。