実装のしやすさが表現の可能性を広げる──スピッカートがWix StudioでWebサイトをリニューアル
タイアップ
大阪を拠点に、Web制作をはじめロゴ制作やグラフィックデザイン、ブランディングなどを手がけるクリエイティブスタジオのスピッカート。同社では、「日日花（にちにちか）」という写真館や絵本カフェ、薬膳茶販売などを行うスペースを運営しています。先日、この施設のWebサイトを、Wix.comのWeb制作プラットフォーム「Wix Studio」でリニューアルしました。
リニューアル前のWebサイトにはどんな課題があり、Wix Studioを用いることでWebサイト制作はどう変わったのでしょうか。また、全国各地にクライアントを持ち、地域に根づいた案件と向き合っているスピッカートでは、日々どのような形でクライアントの課題解決をもたらしているのでしょうか？
ここでは、Wix Studioを活用してWeb制作に取り組む事例やWix Studioの可能性について紹介します。スピッカートで代表取締役兼ディレクター・デザイナーを務める細尾正行さんと、エンジニアの笠井摩那さんに話をうかがいました。
目次
全国各地から依頼が寄せられるスピッカート
──スピッカートでは、普段どのような案件を手がけることが多いですか。
細尾正行（以下、細尾） 弊社は、大阪府南部の熊取町というローカル地域に本社を構えています。ただ、会社周辺も含め、大阪の企業からの案件はあまりありません。和歌山県や鳥取県、神奈川県など、全国各地のローカルな企業からのご依頼が半数以上を占めます。他には、広告代理店や別の制作会社経由でお話をいただくLP制作や、ロゴやブランドコンセプトから入る案件なども手がけています。お客様は、製造業などの中小企業から個人事業の方まで、幅広く対応しています。
──全国各地から、どのような経緯で依頼が来るのですか。
細尾 「SANKOU!」などのWebギャラリーサイトを見て、お問い合わせをいただくケースが多いです。あと最近は、制作したWebサイトに私たちの会社名を掲載していただけることがあって、それらを見てご連絡いただくケースも増えてきました。
──そうした企業の方などからは、どのようなご依頼が多いですか。
細尾 たとえば「かわいいものをつくりたい」など、ビジュアル面のお話から入ることが多いです。私がイラストを描けるので、昔からイラストを用いた親しみのあるデザインで好評を得てきた経緯があるからなのかもしれません。
当初はWebサイトの見た目のご相談だったのが、そのことをきっかけに相手の困りごとを深掘りしていくと、「実は採用対策に悩んでいて……」という本当の課題にたどり着くことがあります。私たちはその課題を織り込んだうえで、見た目を考えます。
──手がけるWebサイトの種類で言うと、何が多いですか？
細尾 コーポレートサイトが一番多いですね。
最近は、LPのリニューアルも多くなっています。たとえば、宣伝文句の目立つ構成に対して「スピッカートさんらしくアレンジしてくれませんか？」とご相談していただいたり。
──クライアントの傾向もうかがえますか。「自社運用をしたい」といったニーズはいかがでしょうか？
細尾 たしかにCMS機能をご希望される方がとても多いですね。その場合、WordPressベースで構築して納品することがほとんどです。私たちは小さな制作会社ですので、手放して大丈夫そうなクライアントであれば、納品後の運用をそのまま先方にお任せしています。
──スピッカートは、何名体制になるでしょうか。
細尾 全部で14名いて、私を含めた3名がディレクターです。他にデザイナーが5名とエンジニアが4名、コピーライター兼アシスタントディレクターが1名、そしてバックオフィスが1名という構成です。
──今回Wix Studioを使ってリニューアルした「日日花」のWebサイトは、どのような体制で制作されましたか。
細尾 私がデザインを担当し、エンジニアの笠井がWix Studioを使って構築しました。
地域とのつながりを築く場所「日日花」
──運営スペース「日日花」についてうかがいます。どのような場所でしょうか。
細尾 弊社は地方の中小企業や個人事業などからのご依頼が多いので、写真撮影に大きな予算を割けないことが少なくありません。そのため、自社で写真撮影を行う機会が増えて、どんどん社内の撮影技術は上がり、カメラに興味を持つスタッフも出てきました。そこで、普段の仕事ではあまり接点のない周辺地域の方々と出会えて、写真をきっかけにデザインの仕事につながることがあるかもしれないと考え、5年ほど前に地元の写真館として日日花をオープンしたのです。
私の妻が社内の経理を担当する傍ら、3年ほど前から日日花に絵本を置き、絵本カフェとしての活動もスタートしています。さらに、薬膳茶のブレンドを学んだ経験を活かして、2026年には薬膳茶を販売・提供するブランド「茶仁颯燕（サニンサエン）」を立ち上げ。自社でパッケージ制作や販売までを手がけています。
こうした活動は、クライアントワークではできない経験を積み重ねられるので、本業に還元する目的もあって取り組んでいます。他にも、手相占いやワークショップを行うなど、さまざまな人が集い、多様な活動が行われる場所になっています。
──日日花のターゲットとなるお客様は、地元の方が中心ですか。
細尾 はい。世代としては、絵本を置いていることもあり、小さなお子様がいる方から、年配のご夫婦など幅広い層に利用していただいています。文化的な活動に関心の高い方も多く集まる場所となっています。
──そうした活動を通じて、実際にスピッカートの事業につながったでしょうか。
細尾 写真撮影をきっかけにデザインの仕事につながったり、名刺制作の依頼をいただいたりすることがありました。また、2カ月に1度ほどのペースで、お茶を飲みながらデザインの相談をできるイベントも開催するようにして、人とつながったり、コミュニケーションの中から新しいものが出てきたりする経験を重ねています。
たしかに今は、AIの進化によって単につくるだけでは差別化しづらくなっています。そうしたなかで日日花という場が、相手自身も課題を整理しきれていない段階から出会い、つながるきっかけになっています。
──日日花のWebサイトについては、どのような点に課題があり、リニューアルへと至ったのでしょうか。
細尾 リニューアル前は写真館だけの情報を載せて、それ以外の情報はInstagramなどで発信していました。しかしこれからの日日花は、活動概要が確認できるほか、情報がストックされていくWebサイトをきちんと運営したほうがいいと考えていました。集約したサイトがあることで、写真館以外の情報も発信しやすくなるからです。
運用負荷を抑えながら、実装の自由度も確保できる環境
──スピッカートはこれまでもノーコードツールを活用されてきたそうですが、Wix Studioでの制作は今回が初めてですか？
細尾 Wix Studioを触ったのは初めてです。
──ノーコードツールで制作するメリットを、どのように感じていますか。
細尾 先ほども触れた通り、私たちのクライアントは「公開後は自社で運用したい」というご依頼が多いので、ノーコードツールは有力な選択肢として提案しやすいです。その中でも僕たちがメリットに感じているのが、保守管理です。
WordPressで構築したサイトでは、利用環境に応じて、本体やプラグインのアップデート、脆弱性対策などを継続的に行う必要があります。一方、ノーコードツールでは、基盤となるシステムの保守やアップデートの一部をサービス提供側が担うため、制作側の運用負荷を抑えやすいと感じています。
笠井摩那（以下、笠井） 実際に現在も、保守管理に課題を感じているお客様から「WordPressからノーコードツールに移行したい」という相談を受けており、その案件に対応中なんです。
──他のノーコードツールと比べて、Wix Studioでの制作でメリットに感じた点はありますか。
笠井 Wix Studioでは、CMSのアーカイブにページネーションを取り入れやすく、コンテンツ一覧をスムーズに構築できました。また、要素に任意のclass名を付けられるため、複数箇所に共通のスタイルをまとめて適用できる点もとても便利でした。これまでの制作経験から重視していた機能が備わっていて、実装のしやすさを感じています。
細尾 以前利用したノーコードツールの中には、表示速度に課題を感じるものもありました。軽量化の工夫が欠かせないだけでなく、ページ数が多いWebサイトほど重くなりやすいので、運用面で苦労することがありました。
制約の少なさが「表現の可能性」を広げる
──今回の日日花サイトのリニューアルは、どのような手順で進めましたか。
細尾 私がFigmaでデザインをつくって、笠井に渡しました。普段のクライアント案件では細かい指示も入れるのですが、今回はWix Studioで何ができるかを検証しながら進めていったので、あまり指示は入れないようにして、口頭で相談しながら進めていきました。
笠井 受け取ったFigmaのデータは公式プラグインの「Figma to Wix Studio」を使い、フレーム単位で移植しました。初期案のファーストビューを細尾に見せたところ、写真のスライドショーなどに対して「何か物足りない」といった反応でしたので、「それなら、もっとつくり込んでみよう！」と思い、CSSアニメーションを駆使して、つくり直しました。
──リニューアルにあたり、テーマはありましたか。
細尾 日日花はさまざまな活動が行われている場所なので、一言では説明できない魅力があります。その雰囲気をコピーなどで表現して、「何か面白そうな場所だ」という印象を与えられるサイトにしたい、と考えていました。
──Wix Studioはローコードツールでもありますが、コーディング機能は使用されましたか。
笠井 はい。ただ、できるだけWix Studioに備わっている機能の中でつくるようにしました。と言うのも、公開したWebサイトをご覧になったクライアントから、「このようなWebサイトをつくりたい」と相談を受けることがあるからです。自社案件だけでなく、他の案件でも再現できるつくり方を意識しました。
また、運用時の保守性を考慮し、GSAP（JavaScriptアニメーションライブラリ）などの外部ライブラリは使用せず、Wix Studioに標準搭載されているアニメーション機能を中心に実装しました。一部のアニメーションやスクロール時のclass付与にはJavaScriptを使用していますが、独自のJavaScriptコーディングは必要最小限にとどめています。
──先ほど「CSSアニメーションを駆使している」と言われましたが、たしかにclass名が設定できる点は相性が良さそうですね。
笠井 私たちはイラストを外注せず自社で準備するので、普段からCSSアニメーションを使うことが多いです。class名が設定できるのは、この案件に限らずとても相性が良いのは確かです。日日花サイトでは、アニメーションの中で「この要素だけ、秒数を変えて動きをずらす」といった指定をしています。
また、コードを書いた結果をリアルタイムで確認できるので、細かな調整や検証をしながら制作できるところが、Wix Studioの大きな魅力だと感じています。
──実装しやすいことで、制作の制約も減りそうですね。
笠井 エンジニアの立場で言えば、一番やりやすいのはフルスクラッチです。一方で、何かしらのツールを用いる前提で語るなら、他のローコードツールに比べてWix Studioだと制限が少なく構築できるので、自分の持つ知識で表現の可能性を「広げられる楽しさ」を感じながらつくっていました。
取材・文：平田順子、写真：大野博、企画協力：Wix.com Japan株式会社
※本記事はWix.com Japan株式会社とのタイアップ企画です。