みなさん、こんにちは！
今回は、Wixのに搭載されている「プルダウン」と呼ばれる、
あらかじめ用意されている答えを、ユーザーに選んでもらう、または、
クリックすると色々な情報が出てくるような仕様にする事ができるので是非最後までご覧ください。
ユーザーに選んでもらう事によって、選ぶ側は選択しが出てくるので、とても楽に選択する事ができます。
また、情報を適宜収納する事により、コンテンツがごちゃつかないサイトデザインを行う事ができるので是非この記事を読んですぐにWebサイトに反映させて見てください。
Wixとは？
Wixのご紹介
Wix（ウィックス）とは、2006年にイスラエルで生まれ、2010年に日本語版がリリースされ、現在全世界で 2.3億人以上の登録ユーザーを有する人気ホームページ作成ツールです。
CMでこのキャッチフレーズを見たことがある方も多いのではないでしょうか。「1.2秒に1人が Wixを使ってHPを作っています」
直感的にHPを作成・ドラッグ&ドロップにて変更が簡単にできる為、幅広いユーザーから支持を受けています。
Wixでドロップダウンでコンテンツを表示させる機能とは？
Wixでドロップダウンで表示される1問1答型のデザインの見せ方を「アコーディオン」と言います。
Wixでのアコーディオンとはその名のアコーディオンの通り、
折重ねられた1問1回答型のボックスの事を指します。
この「アコーディオン」を利用することによって、長く間延びしてしまったサイトの体裁を綺麗にまとめて格納することができます。
WixではFAQの機能として取り入れられており、それを代用することにより他のページで使用することが可能となります。
Wixプルダウン「アコーディオン」を使うメリット
上記写真が弊社が行なっていう自社事業「アフタヌーンティバスクルージング」の Wixで作成しているサイトのFAQになります。
この「よくある質問」の量でもこの画面幅をとり、スクロールするだけで嫌になってしまいます。
Wixでアコーディオンを使う一番の理由としては、ユーザーの欲しい情報を一箇所にそしてコンパクトにまとめられるから、ユーザーが欲しい情報を取得しやすい為ユーザービリティが高い事が一番の、メリットだと思います。
また、 Wixのエディタを使って、アコーディオンを取り入れている企業様も少ないので、 Wixを使って村機能を使っていたら、「おっ」と制作者側は思うはずです！
Wixプルダウンの作成方法
FAQの作成方法についてご紹介
Wixエディタでは、アコーディオンをワンクリックで作成することができないため、
一旦前述通り、 Wix FAQのアプリケーションを入れたのちそれを代用して「アコーディオン」を作成していきます。
1. Wixエディタにログイン
2.エディタ左側のツールバーよりで「アプリ」
をクリックします。
3.検索窓に「Wix FAQ」と入力し検索を行います。
3.トップに出てくる「Wix FAQ」を選択します。
4.「サイトに追加」をクリックすることで一般的な WixのFAQが完成します。
アプリを追加した時にはデザイン性の低い状態で追加されてしまうので、
ここから、FAQをクリックして「設定」から、デザインの変更を行なっていきましょう。
背景を投下したり、よくある質問内に少し装飾をすることによって、堅苦しい「よくある質問」から事業のカラーを出したよくある質問に変換させることが可能です。
Wix FAQを用いた「アコーディオン」の作成方法をご紹介
まず前章でご説明した内容の、FAQの追加方法より、「 Wix FAQ」を追加下さい。
まず、初期設定で入っている「タイトル」・「検索バー」・SNSのカテゴリなどを全て非表示にしていきます。
そして、「設定」→「デザイン」→「ヘッダー・背景」に進み背景色の色を透明にすると、
これでエディターXで基本機能として存在している、「アコーディオン」機能の完成です。
これを転用することによりFAQとしてではなく、自由にページ移動してアコーディオンを使用する事ができます。
プルダウンメニューに掲載する文章の変更の仕方
Wixのアコーディオンのテキスト内容の変更方法は「 Wix FAQ」をクリックすることによって、
「よくある質問の管理」のボタンが出てくるので、それをクリックします。
そしてカテゴリごとに分かれているよくある質問の中から、編集したいものをクリックして、内容を変更していきます。
Wix FAQと書いてありますが、他の場所に転用して、1問1答の回答を変えることにより、
アコーディオン式の、ユーザーが気になる内容をクリックして、そこをクリックすることにより、内容がポップアップで出てくるというアコーディオン式の設定ができますので、是非文章が長いなと感じた時は、この機能を試してみて下さい。
お問い合わせフォームをプルダウンで設定する方法
まず左側のツールバ「ページ&メニュー」より「お問い合わせフォーム」を新規追加してください。
ドロップダウンメニューの追加方法
1.追加されたフォームをクリック
2.パーツをクリック→「基本的な項目」
3.ドロップダウンをクリック→追加されます。
ワンクリックで追加することが可能です。
選択肢を変更する方法
ドロップダウンを選択し、「選択肢を管理」から選べるドロップダウンを選択していきます。
→名前をクリックし、そのまま編集します。
グローバルメニューをドロップダウン設定する方法
グローバルメニューをドロップダウンにする方法はとても簡単で、
ドロップダウンしたいものをまとめるだけです。
ホームにドロップダウンを組みたい場合、写真のように設定していく方法をご紹介していきます。
この場合ですと「ページ&メニュー」から、ドラッグ&ドロップで「自己紹介」「お問い合わせ」「新しいページ」をホームに掛かるようにドラッグ&ドロップするだけです。
ホームの上でドラッグを離すと自然とホームの下に小ページのように繋げる事ができます。
このように設定できた後に、「ドロップダウン」のデザインを整える事により、Webサイトのテイストに合ったグローバルメニューを設定することが可能です。
デザインの変更は少し限定的ですが、背景色の変更や透明度ホバー時の色の変更など様々なものに転用が効きます。
まとめ
最後までご覧いただきありがとうございました。
本日は、 Wixの機能で使い方をマスターすればとてもスッキリ見える事ができ、
ユーザービリティを向上させる事ができる「Wix ドロップダウン」についてご紹介していきました。
適所にドロップダウンを設定していただき、必要な情報が必要な場所にある状況を作り出して、
ユーザーの工数を減らす事により、少しでも多くのお問い合わせが来る動線を引けるように試してみてください。
弊社では制作面でのお困りごと・貴社のHPをプロの目線で現行サイトを分析して、アドバイスさせて頂く「無料相談会」を実施しております。
ご興味がある方は下記のボタンより、弊社「株式会社ラジャ」までお問い合わせください。
