アートディレクター・木村浩康が「Wix Studio」を初体験。 「ノーコードに対する見方が変わった」と絶賛する理由とは？

Wix.comが2023年にリリースした高度なWeb制作ソリューション「Wix Studio」では、従来のノーコードツールの枠を超えたクリエイティブ制作が可能です。今回は、先進的な表現のWebサイトを多く手がけてきた木村浩康さん（Rhizomatiks / Flowplateaux）に同ツールを試用していただき、WebデザイナーにとってWix Studioがどのような価値や使い心地を持つのか、Wix.com Japan株式会社のプロダクトソリューションスペシャリスト・城田剛さんを交えながら、リアルな本音について聞きました。

Flashの遺伝子を継ぐ!?　表現の制約を感じない「Wix Studio」の魅力

–––––木村さんは、これまでノーコードツールにどのようなイメージを持っていましたか？

木村浩康（以下、木村）　　国内外のさまざまなノーコードツールを試したことがあるのですが、「与えられた条件の中で表現するもの」というイメージでした。その制約を飛び越えた表現をするためには、やはり“裏技”的な方法を試さねばならず、そうすると「ノーコードツールを使う意味はあるのかな……？」と思ってしまいました。

–––––そんな中で、今回初めて「Wix Studio」を使ってみていただきました。デザイン的な制約は感じましたか？

木村　　いえ、感じなかったです。「もうノーコードツールはここまで進化しているんだ！」というのが、最初の率直な感想でした。自分の手掛けてきたデザインの大半は、Wix Studioでも再現できるようになっていることに驚きました。

ツール上に用意された機能が充実しているのももちろんですが、より細かな調整が必要な場面では、CSSやJavaScript（Wixの開発プラットフォーム「Velo by Wix」）などのコードや関数が書けるのが非常に便利でした。ノーコードツールでありながら、必要に応じてしっかり“手を動かせる”自由度の高さは、個人的にかなり魅力的だと思いました。

エンジニアと組めば外部サービスやAPI連携などもできるので、表現の上限があまりない気がします。

–––––エディタでの操作は、わかりやすかったですか？

木村　　Web制作の知識がある人間からすると、ツールの学習コストは限りなくゼロに近かったです。

使ってみた印象としては、ノーコードツールというよりも、むしろFlashに近い感覚でした。インターフェイス上に用意されたツールや機能で直感的にWebサイトをデザインでき、さらに細かい部分はコードで調整することもできますし。

僕自身、かつて「Flashでこんな表現をしたい」という思いから自然とActionScriptを覚えていったのですが、Wix Studioもそれに近いものを感じました。学習のためではなく、「こんな表現がしたい」という純粋な欲求が原動力になり、気づけばコードを書いている––––––そんな“つくる喜び”が詰まったツールだと思います。

城田剛（以下、城田）　　実はWixは、2008年にFlashベースのWebサイトエディタをリリースしているんです。その後、モバイル対応やパフォーマンスの向上を目的として、2012年にHTML5エディタを導入し、技術的な転換を図りました。

Wix Studioは、2023年に発表したものですが、直感的な操作性やデザイン重視の思想など、Flashエディタで培われた特徴を”遺伝子”として受け継いでいると言えるかもしれませんね。

木村　　なるほど。それはすごく腑に落ちますね。

–––––特に使いやすいと感じた点はありますか？

木村　　ページをセクションごとに構成していく点は、かつてよく使われていたテーブルレイアウトを思い出させるようで、サイト全体の構成がとても把握しやすいと感じました。

また、作成したWebサイトの構造はレイヤーパネルで確認できるため、セクション単位で俯瞰でき、管理しやすい。僕は「まずは初期衝動のままワーッとつくって、あとから整理する」というスタイルで制作することも多いのですが、Wix Studioはそうしたつくり方にもとても相性がよいと感じました。

コミュニケーションコストを削減し、パフォーマンスを最大化

–––––実際にWix Studioを使ってWebサイトをつくる場合、制作のフローはどのように変わりそうですか？

木村　　まずデザインを始める前の段階ですが、ワイヤーフレームをつくるのにも使えそうですよね。クライアントと打ち合わせをしながら、その場で柔軟に作り替えていけるので、コミュニケーションがスムーズになり、意思決定のスピードも上がるかもしれません。

城田　　Wix Studioにはビジネスの種類など、どんなWebサイトをつくりたいかという情報を入力することで、ワイヤーフレームをAIで生成できる機能も備わっています。

木村　　なるほど。僕の場合はワイヤーフレームが固まったら、「Figma」でデザインを組んでいきます。ブレイクポイントごとに大体4種類のデザインを用意するのですが、それをWix Studioに持っていく作業は、どれくらいスムーズに行えるんですかね。まだ試していないので、気になるところです。

城田　　「Figma to Wix Studio」という機能を使えば、Figmaで作成したデザインをWix Studioに読み込むことができます。ただし、読み込めるのはデスクトップ用のデザインのみです。読み込み後は、Wix StudioのレスポンシブAI機能が、デスクトップデザインをもとに、タブレットやモバイル向けのレイアウトとレスポンシブ設定を自動で生成してくれます。それをベースに手直しを加えて、Figmaでつくったデザインを再現していく、という使い方になると思います。

木村　　各ブレイクポイントのレスポンシブやレイアウトをAIが自動で”いい感じ”に調整してくれるのは、本当に便利ですよね。

また、デザインが完成した後には、「デザイナーの意図を汲み取ってエンジニアが再現する」という工程がありますよね。その中でWix Studioの魅力だと思ったのが、アニメーションの設定が非常に細かく行えることです。

僕もそうなのですが、エンジニアに「こんな動きをつくってほしい」と依頼する際に、デザイナーがうまく言語化できなくて「ここはシュッとした感じで」とか「なんか動きが固いのでもうちょっとゆっくり」といった指示になってしまうことがよくあるんですよ。特にモーショングラフィックのセンスって属人的になりがちで、エンジニアによって仕上がりが全然違ってくるんですよね。

本来、デジタルコンテンツのアートディレクションをするなら、「ここのインターバルは何秒にしてください」といった具体的な指示が出せるべきだと思うのですが、そこまで理解しているデザイナーはWeb業界でも少ないのが現状です。Wix Studioでは、イージングの種類などもメニューから選べるので、デザイナー自身が望む動きを自分でつくれるのがいいなと思いました。

–––––言われる側もストレスを感じるとは思いますが、「そうじゃないので、こう変えてください」と伝える側にも、心理的な負担がありますよね。

木村　　そうなんです。特に納期に追われている案件では、伝えるタイミングや言い方が本当に難しいんですよね。Webサイトの場合、絶対に外せない要件をまず優先することになるので、デザイン面は多少実現できない部分があっても「まあ、これでも成立する」と判断されてしまうことがあります。その結果、どうしても重要度が低く見積もられてしまうんです。でも、デザイナーにとっては絶対に譲れないポイントって、やっぱりあるじゃないですか。

–––––コミュニケーションの必要性が減ることで、齟齬が生まれる機会も少なくなる、といった部分がメリットだということでしょうか。

木村　　それも一つのメリットではありますが、僕としては、エンジニアに本来の職能を最大限に発揮してもらえることが、いちばん大きいと思っています。細かな修正のやりとりが不要になることで、Webサイト全体の表現力を高める方向に、より多くのパフォーマンスを注いでもらえるようになります。

もちろん、自分で設定する分だけデザイナーの作業量は増えるかもしれません。でも、頭の中でイメージしているデザインを自分の手で完全にコントロールしてつくれるぶん、最終的な満足度は確実に上がると思います。

「つくる楽しさ」が学びにつながる。若手育成にも効果抜群

–––––ここまではWix Studioの長所について伺ってきましたが、「ここが改善されるともっとよくなる」と感じた点はありますか？

木村　　機能面で大きな不満はありませんでした。あえて挙げるとすれば、UIに小さな改善余地がある程度です。

たとえばメニューアイコンの配置を、デザイナーが日頃使い慣れているツール（たとえばAdobe系）に寄せるような工夫があれば、さらに親しみやすくなるかもしれません。「T（タイポグラフィ）」や「シェイプ」など、よく見る表示になるだけで、初めて触れる人の学習コストは大きく下がると思います。

実際、こうした細かな配慮が加われば、操作性はより直感的に感じられるはずです。私も初回は「テキスト追加」が見当たらず少し探しましたが、右クリックの 「クイック追加」 から呼び出せると分かればすぐ解決しました。

機能自体は必要十分に揃っており、あとは微調整が入ればデザイナーが初見で操作できるレベルになる–––––そんな完成度だと感じています。

–––––では、Wix Studioを実際の案件で活用する場合、どういったタイプのWebサイトに向いていると思いますか？

木村　　従来はフルスクラッチでないと実現が難しかったような、自由度の高いデザインも可能なので、基本的には幅広いタイプのWebサイトに使えると思います。中でも、更新のしやすさが魅力なので、ECと連動したWebサイトやメディアサイトのように、多くの人が保守・管理に関わっていて、更新頻度が高いサイトとは特に相性がよいのではないでしょうか。

最近は、弊社にもクライアント側で更新を行う前提のWebサイト制作依頼が増えてきていて、そういったケースではWix Studioを活用することも視野に入れています。

一方でスペシャルサイトのように、一度公開したら頻繁な更新がなく、かつ尖った表現が求められるようなケースでは、価値を発揮しづらいのかもしれません。

–––––最後に、デザイナーやWeb制作会社にとって、Wix Studioを制作に使う価値はどこにあると感じますか？

木村　　先ほどもお話ししたとおり、デザイナー自身がアニメーションを設定できたり、エンジニアとのコミュニケーションがスムーズになったりすることで、クリエイティブの質を高めることにより多くの力を注げるようになる点は、大きな価値だと思います。

あと、Webサイトの構造を把握しやすく、プロセスの中で自然とコードを学びたくなるような“つくる喜び”があることも魅力です。そうした観点から、若手スタッフの教育ツールとしても非常に優秀だと思います。まずはテンプレートを活用してノーコードで制作してみることで、Webサイトがどのように構成されているのかを感覚的に理解できるようになるでしょう。

グラフィックデザインの経験があれば、Web 制作の知識が浅くても、このツールを使えば、短期間で即戦力として活躍できるようになる。従来はある程度技術を身につけないと実感できなかった“Webサイトをつくる楽しさ”を、Wix Studioなら早い段階で味わえます。その分、本来追求すべきクリエイティブの質に、より集中できる–––––その点が、Wix Studioを使う大きな価値なのではないでしょうか。

木村浩康さんも登壇！ Wixの無料ウェビナーが5月29日（木）に開催

Text：平田順子、Photo：山田秀隆、企画協力：Wix.com Japan
※本記事はWix.com Japanとのタイアップ企画です。