どうも、時にWEBデザイナー・WEBディレクターのエルティアナです(*・ω・)🎵
私のお仕事のひとつで、Wixのサイト制作をさせていただき、その後のページ作成/更新等を承ってるサイト様があって、毎回毎回、Wixの使い方をWEBで調べながらページを作って更新などしているのですが、毎度毎度、あとから同じことをしようとしたら忘れてる…！ということにとても悩まされているので、今回から、最初はめんどくさいけど…ちゃんとブログにやり方を残していく形で運用していきたいと思い、記事を書き始めました！
Wixはノーコードツールと言って、WEBサイトのコーディングをしなくても、【独特な】Wixエディタという、XDやfigmaになんとなく似ているツールで、お絵描きをするようにWEBページが作成出来て、ブログや、簡易的なデーターベースを連携した自動生成などのCMS機能、やろうと思えば通販システム、予約システムなどのシステム周りまで、なにからなにまでノーコードで構築可能なすごいサービスです！
…なのですが、Wixエディタの使い方があまりにも独特！！ということで、毎回調べて制作！が現状必須になっているんですよね…
しかも最近、サービス全体のエディタツールを、Wix Studioというものに全体的にバージョンアップしたとか、もうすぐされるとかで、これまでのナレッジもどうなるか心配…なのですが、やはり一切コードを書かなくていい！というのと、サーバー管理・保守も不要なため、クライアントワークを受けやすいというメリットもあるので、もう一段階自分の中でナレッジを確立したら、ある程度WixサイトでのWEBサイト制作と運用を請け負ってもいいかな…！と思ってます。
※ただし、Wixのシステム上、とにかく制約が多いので、デザインや使用について、ある程度【仕様上の表現が難しい】という回答になる場合が多い(Wixの匠みたいになればできるのかもですが、私的には無理…！)ので、ある程度WEBサイト制作段階と運用段階で許容してくれるクライアントさんに限って、Wixをおすすめする…という形にはなっちゃうとは思います…あくまで私の場合ですけどね…！
…さて、前置きが大変長くなりましたが、今回は、Wixの制作といってもシンプルな部類になるかと思いますが、あるページを作ったとして、今後そのページが下層ページの1つとなるような形で、その上の階層に一覧ページを作るような対応をしたいので、それをやりながら書きながら、進めていきたいと思います！
一覧ページの作成
今回のページはとてもシンプルかつ、他のページと体裁を合わせたページにしたいので、既存のページを複製する方法で新規ページを追加してみたいと思います！
ページの複製は、現状のWixエディタでは下記の操作で可能です！
上記、ちょっとおせっかい？？なウインドウが出てきましたが、これはおそらく複製したページをCMS(動的な)ページにしませんか？という提案なんでしょうけど、今回は不要なので【ページを複製】を押すと、無事ページが追加されます。
一覧ページとして使えそうなWixパーツを探す
はい！ここでWix最大の強みである、ノーコードツールの威力をいかんなく発揮したいと思います！
ノーコードでデザインだけお絵描きみたいに作成できる！というだけであれば、太古の昔に【ホームページビルダー】というソフトがあり、自動的に生成されるコードがどんなものでも構わない！という形であれば、割とどんな人でも(その時代においては)お絵描き気分でWEBサイトを作成することができたと思います(念のため調べたらまだ販売していて驚愕…！)
話は逸れましたが、Wixだとノーコードならではの、自動的に【画像と文字とリンク】といった一つのブロックを、Wixの管理ツールの設定追加で追加更新していけてしまう便利な【パーツ】というものがあり、これが相当便利な体感をしているので、今回も導入してみたいと思います。
※ただし、目的は『ページリンクの一覧ページ』だけど、Wixのパーツの名前は【フォトギャラリー】とか、なんとなく本来の用途と違うようなものを選ぶ必要はあり、まあ実際問題機能としてはかわらんやろ！みたいな適当さと感性が必要ではあるイメージです！
Wixはもともとイスラエルの企業で、日本法人もある！という感じらしいのですが、海外製のツールというラフさをなんとなく、こんなもんなんだなぁと体感しているところです…！
ギャラリー(グリッド(プロギャラリー))を導入
パーツはWixエディタの左側の一番上にある＋ボタンを押して、パーツを追加するウインドウを開くと、テキストとか画像とかを挿入する、まさにパーツの追加画面が出るのですが、ここに【ギャラリー】というのがありまして、今回の用途としては【グリッド(プロギャラリー)】というのがイメージに合っているので、これを採用します！
導入の仕方はとても簡単で、赤枠で囲ったグリッド(プロギャラリー)というパーツをマウスでつかんで、編集画面上にドラッグアンドドロップするだけです！超簡単！！！
ドラッグアンドドロップすると以下のように挿入され【メディアを管理】のところを押すと、画像/文字/リンクが設定できます！
こんな感じで↓！
デフォルトだと、ボックスをクリックしたら拡大写真が出てくる仕様でしたが、以下のテックボックスを入れると、私の望んだ、ボックスクリック→直接リンク飛ぶ仕様にできました！
下記のボックスは、編集画面内のギャラリーをクリック→設定で出てきます！
あとは忘れがちなスマホ表示のレイアウトもスマホ表示して、なんとなくそれっぽい(閲覧者が最低限これくらいなら見やすいやろ…)というところまでレイアウト調整したら完成です！
※この辺がWIXの難しいところで、テキストの余白とかサイズ等、すごく気になってもどこで変更できるのかわからない or 一生懸命しらべても実は仕様で出来ません…ということも結構あって、まあこれでええやろ…という適当さと心の広さが必要！と勝手に思っております…！
※もし私がWIXでの制作と運用をお受けする場合、こんな感じになりますがそれでも良ければ…というお客様に限ってご対応をさせていただく感じかな…と…適当ですみません……。
まとめ
いかがでしたでしょうか？完全に誰得？？という記事で、その答えが、【はい、私です(*・ω・)】みたいな記事で大変恐縮ですが、これはでも自分にとって今後かなり助かる資産！と思うので、需要はさておき、Wixの使い方もこうやってブログにメモ代わりに書いていこうと思います！
Wixってどちらかというと、サイト制作したい個人の方に(世界的にも？)大人気のツールのイメージですが、プレミアムに課金して、ドメイン反映までしっかりやれば、広告も出ないし、そこそこオリジナリティのあるサイトが比較的簡単につくれて、運用を請け負う側としてもオンプレミスでなく運用可能、Wixに慣れていれば更新もコーディングするよりは簡単！ということで、発注側/請負側双方でしっかり制約事項や免責事項について(もちろん月額運用費用も含めて)契約合意できれば、クライアントワークでもとても重宝するんじゃないかな！？と思ってます！※実際私はもはやWixで出来るレベルのサイト構築と運用しか個人完結では受けられないなとすら思ってるんですが…
ディレクターの立ち位置なら、制作会社に作ってもらうし、運用契約もスポット依頼だけで、WordPressのコアアップデート等重要なタイミングだけ、サーバー管理保守的な対応をやってもらえたら、請け負えるとは思うんですけどね…
AIの台頭もあって、もはや一からデザイン起こして、コーディングも完璧に人間がやる時代でもないかなぁという超主観的な考えの中、そんなこんなでWixは愛用しております！
皆様の中でも同様にWixを使ってみようかなぁという方は、ぜひ一度さわってみてください！
