機能性と運用性の高さで、動きのあるWebサイトを実現──スピッカートがWix StudioでWebサイトをリニューアル
タイアップ
大阪を拠点に、全国各地の中小企業や個人事業主を対象に、地域に根ざした案件を多数手がけるスピッカート。先日、同社が運営し、写真館や絵本カフェをはじめ、多様な取り組みを行う施設「日日花（にちにちか）」のWebサイトをリニューアルしました。
制作には、Wix.comのWeb制作プラットフォーム「Wix Studio」を採用。Wix Studioを初めて活用した今回の制作を通じて、Wix Studioの機能性や使い勝手の良さを体感し、「今後、クライアント案件での活用も模索したい」といった手応えを感じたそうです。
Wix Studioの使用感と今後の可能性について、スピッカート代表取締役兼ディレクター・デザイナーの細尾正行さんと、エンジニアの笠井摩那さんに話をうかがいました。
リニューアル前のサイト課題やWix Studioを触った使用感については、こちらでも解説しています。
目次
普通じゃツマラナイ、“面白さ”を感じさせる動きと言葉
──日日花のWebサイトリニューアルについて、以前の話では、日日花が「なんだか面白そうな場所、という印象を持ってほしい」とおっしゃっていました。デザイン自体はシンプルでありながら、いろいろなところがたくさん動いているアニメーションが印象的です。デザインを手がけた細尾さんからエンジニアの笠井さんには、どのような要望を伝えたのですか。
細尾正行（以下、細尾） ほとんどのWebサイトは、「情報を知りたい」「予約をしたい」「買い物をしたい」など、何らかの「目的」があって見られるものです。Webサイトには、目的を達成しやすくするための機能美が必要、と考えています。特に日日花は近隣地域の方々がターゲットなので、迷わないレイアウトを心がけました。その上で、アニメーションのギミックなどから、面白さを感じ取っていただけたらと考えています。
「クライアント案件の参考例になるので、自社運用しやすいようになるべく基本機能で制作してほしい」と笠井に伝えていたので、当初は私の要件を忠実に守り過ぎた、おとなしい仕上がりになっていました。私たちがWix Studioの機能を把握しきれておらず、遠慮ぎみの使い方になっていたので、「もっと決まったイメージに縛られず、“何をやるんだろう？”と期待したくなる感じを出してほしい」と伝えました。
笠井摩那（以下、笠井） 改善提案をもらってからは、「普通はそんなところまで動かさないだろう」というような箇所にも、細かいアニメーションをつけていきました。細尾は日ごろから「普通じゃツマラナイ！」とよく言っていますし。
細尾 ここならではの体験を提供したいですからね（笑）。
笠井 ガチャガチャした、にぎやかな感じにしていくことで、「いろいろなことをやっている場所」という雰囲気を出したい、と考えたわけです。
──たくさんの箇所が動いているのに、決して過度な演出には感じませんでした。表現するうえで、動かし方のコツはありますか。
笠井 アニメーションをつけるときは、リズムや視点がバラバラにならないよう、全体の調和を意識しています。動きにリズムを持たせつつ、視線の流れも考慮し、心地よく感じられるよう微調整していくんです。意図的に常時動かさず、静止する時間帯をつくることで、規則正しくて単調な動きとならないようにしています。
また、ファーストビューのメインビジュアルは、絵本カフェもある場所を念頭に置いて、紙芝居をめくるイメージでスライドショーを切り替えています。
──アニメーションと合わせて、Webサイト各所のコピーからも、とても楽しげな印象を抱きました。特にファーストビューの「写真と絵本と養生茶とカロリーと占いとワークショップとデザインと これから、と。」というのは、既成の枠にとらわれない感じがすごく伝わってきますね。
細尾 「写真」「絵本」と、何をしている場所なのかを示しながら、「と」でつなぐことで、今後新たな要素が増えても反映できるようにしました。さらに「これから、と。」を加えることで、まだまだ増えていくという可能性を表現しています。普通のカフェとは違った何か、を求めている方にぜひ来てほしいですからね。
自分たちにはもちろんですが、お客様にとって「新しい発見がある場所」になれたら、と思っています。
──コピーが動いているところもたくさんあって、楽しい雰囲気が伝わってきます。特に、文字をアニメーションさせていますよね。テキスト部分を画像化しなかったのは、なぜですか？
笠井 今後、コピーが変わることがあるかもしれないので、修正対応しやすく画像化を避けました。今回のリニューアルを機に、長く運用しやすいWebサイトにしていきたいですから。「くしゃっと笑って」などのコピーを意識しながら、アニメーションをつけていきました。
──Wix Studioは「class名を付けられることで、CSSアニメーションをつくりやすい」と、前回おっしゃっていました。制作のしやすさは、いかがでしたか。
笠井 GitHubと連携してVSCodeでコーディングできたので、コードを書きながら動きの変化を確認できたのが、すごく進めやすかったです。少なくとも、私がこれまで使ってきたノーコードツールにはなかった体験でした。また、公開前でもJavaScriptの動きがリアルタイムに反映されるので、細部の調整や確認がしやすく、ストレスなく制作できました。
AIや予約機能で、実装効率を向上
──以前は写真館情報中心だったのが、リニューアル後は他の活動に関するコンテンツが増えましたね。
細尾 ありがとうございます。今回のリニューアルでは、他のさまざまな活動も紹介できるようにしました。それぞれのコンテンツも、検索でたどり着いたときはランディングページになるわけで、「何か面白そうな場所だ」と感じてもらえる見え方を意識しました。
写真館のページでは、「よくあるご質問」を充実させています。コンテンツは絵と短いテキスト中心に構成しており、この部分で詳細な情報を伝えつつ、SEO施策としての役割もあります。絵本のコンテンツでは、Web上の本棚をイメージして絵本のインデックスをつくり、noteに書いたレビューへもリンクしています。
──絵本のページなどのイラストは、細尾さんが描かれているのですか。
細尾 はい。同じ絵を店舗ののれんにも使っています。親しみやすさを感じてもらえたら、と思って描いたイラストになります。
──今回、Wix Studioに搭載のAI機能は活用したのでしょうか。
笠井 要素が複雑にレイアウトされているので、レスポンシブAIは使いませんでした。今回は、CSSグリッド機能で簡単に調整できたので、また次の機会に使ってみたいです。
──なるほど。では、AI機能は具体的に、どのような場面で活用しましたか。
笠井 初めての利用で、操作方法を熟知していないところはありましたが、使いたい機能はWix Studioのダッシュボードに搭載されているAIエージェントに聞きながら進められた点が便利でした。
他のAIツールとの連携も、とてもスムーズでしたね。当初、絵本ページはものすごく自由度の高い構成案が出ていたため、CMSを組み合わせた複雑な実装を考えていました。しかし、Claude Codeに相談してシンプルな構成に見直すことで、ためらうことなくWix Studioで組むことができました。
細尾 今後の更新は、絵本カフェを運営するスタッフが担当します。Web制作に関しては素人のスタッフですが迷わず使えるように、エージェントにどういった指示を出せば操作できるか、というマニュアルを用意しておく予定です。
──自社で運用したい企業、担当者にとっても、そうしたマニュアルの存在は心強いですね。
細尾 はい。運用に慣れていなくても、自社でやりやすくなるはずです。「この操作、どうやるんでしたっけ？」といった、制作会社への問い合わせが減って、運用する側の負担も軽くなるでしょう。自社運用を進めやすくなると思います。
笠井 他に運用の観点では、セクションを丸ごとコピーしてコンポーネント化し、他のページに持ってきて編集できるのも便利な点でした。新たな取り組みが増えても、素早く対応できます。
──以前のサイトでは外部の予約サービスをリンクさせていたのが、今回Wix Studioに備わっている予約機能であるWix ブッキングに変えたんですよね。
笠井 はい。Wix Studioだと、予約システムを簡単に実装できるので、大幅に工数を抑えられました。一つのダッシュボードで管理できるので、自社運用を希望するWebにあまり慣れない人であっても「操作に迷うことがないのでは？」と思います。
細尾 スタッフの出勤時間を登録しておくと、それに応じて予約枠を設定することもできるんですよね。思っていた以上に実務的で、機能性が高いのも嬉しい点です。
チャレンジのハードルを下げ、ビジネス成長の機会を生む
──Wix Studioを採用したことで、制作上のコミュニケーションはどのように変わりましたか。
笠井 エンジニアとデザイナーとのやりとりがスムーズになりました。これまでは、「アニメーションをもっとスパッと動かして」みたいな、擬音でのやりとりがあり、エンジニアはデザイナーの意図やニュアンスを汲み取る必要がありました。しかし、Wix Studioならデザイナー自身も一緒に触ることができるので、両者の齟齬を少なくして、進めることができます。
細尾 Web制作に慣れていない人でも、画像やコピーを自分でさっと変えられるのも便利ですね。
クライアント案件におけるコミュニケーションを考えると、Wix Studioで進めていれば、その場で動くものを見せられますからね。相手と完成イメージが共有されやすくなるので、合意も取りやすくなると思います。
──どういったタイプのクライアントと相性がよいと思いますか。
細尾 小規模からある程度大きな規模まで、何にでも対応できると思います。特に、私たちが今回使った予約機能をはじめ、ECや会員ページ、メルマガ配信など、さまざまな機能がオールインワンで、かつ追加料金なしで使える点は大きな魅力です。
何かやりたいことがあっても、「他のサービスを使うと、追加予算がかかるから……」とクライアントが断念されてしまうことは、これまでにもよくありました。それが、予算を気にせず導入しやすくなります。新しいことにトライするハードルが下がるので、事業を成長させる機会をつかみやすくなると思います。
──特にスピッカートさんのクライアントに多い、ローカルな中小企業や個人事業主の方との相性ではいかがですか。
細尾 価値を発揮しやすいと思います。あとから「こういうことをやりたい」と思ったときに、標準機能として備わっていれば躊躇なく取り組めますし、具体的に前へと進みやすいですよね。たとえば、私たちのクライアントには、銭湯の方がオリジナル手ぬぐいをつくっていたりして、「商品を1～2点だけECサイトで売ってみたい」といったご相談があったりします。そういう小規模なECにも対応しやすそうです。
また、美容院や宿泊業などでは予約機能が便利に活用できるでしょうし、私たちのもとには「オウンドメディアをつくりたい」という相談も多いので、運用しやすいCMS機能が大きな魅力ともなるはずです。
笠井 決済や予約に関する基盤の構築・保守をプラットフォーム側に任せられると、制作会社としては保守の負担がぐっと減ります。表現の部分によりリソースを使えるのも、ありがたいです。
細尾 今回は初めて使ったのでまだ慣れない点がありましたが、もっと機能などを理解したら、さらにいろいろなアイデアが出てきそうな可能性を感じています。
──AIやノーコードが進化する中で、Web制作会社の役割も変化してきています。今後、スピッカートさんはどのようなところに注力していきたいですか。
細尾 正直、暗中模索ですが、自分たちの武器の1つが「コミュニケーション」だと考えています。私たちは、笠井はじめエンジニアも積極的にクライアントと対面し、コミュニケーションをとるようにしていて、言語化されていない部分からニーズを汲み取るように努めています。そうした点は、今後も強化していきたいです。
どれだけAIやノーコードが進化しても、制作の入口としてクライアントと直接向き合い、課題を引き出していく過程は変わらずに残ります。私たちは、職域に関係なくクライアントと会い直接話をすることが、何よりの自社の強みだと思っているので。
──最後に、Webサイトをリニューアルしたことで、日日花を今後どのような場にしていきたいかを教えてください。
細尾 リニューアル前はあまり更新していなかったので、更新頻度を高めたいですね。Webサイトは、使っていかないとよくなりませんよね。今後は絵本カフェのスタッフが随時更新することで、今までにない発見や動きが出てくると思います。日日花が「何をしている場所なのか？」という情報発信がしやすいWebサイトへと生まれ変わり、ユーザーのアンテナに引っかかりやすくなったので、新規ユーザーが増えていくことを期待しています！
取材・文：平田順子 写真：大野博 企画協力：Wix.com Japan株式会社
※本記事はWix.com Japan株式会社とのタイアップ企画です。