「作品体験を壊さず、購買導線を設計できる」小玉千陽（ium）が感じたWix Studioとポートフォリオサイトの相性【後編】

プロ向け制作プラットフォーム「Wix Studio」を活用し、写真家・小玉真由美さんのポートフォリオサイト制作に挑戦した、株式会社iumの代表取締役社長・小玉千陽さん。前編では、「SNS時代に、あえてWebサイトを作る意味」をテーマに、作品世界へ没入させるUI/UX設計について話を伺いました。

後編では、実際のWix Studioを使った制作フローや、ChatGPT・Claude CodeなどのAIツールを組み合わせた実装プロセスについて深掘り。ノーコードツールを軸にしながら、AIとコードを活用して表現を拡張していく、これからのWeb制作のあり方について伺います。

試行錯誤のスピードが格段に向上

–––––ここからは、実際のWix Studioでの実装プロセスについてお聞きします。今回の制作は、どのような手順で進めましたか？

小玉千陽（以下、小玉）　　最初は手描きのラフで、ページの遷移や「どのような体験を作るか」という大枠のコンセプトを練りました。その後、Figmaを活用しながら、レイアウトの検証やビジュアルのプロトタイプを作成します。

本来であれば、Figma上でコマ送りアニメーションなども細かく作り込んでから実装に移るプロセスをとるのですが、今回はFigmaでの完成度が6〜7割程度になった段階で、早々にWix Studioへ移行しました。

というのも、ブラウザ上で実際に要素を動かしながら、細かなチューニングを行っていくアプローチのほうが、圧倒的に効率がよいと気づいたんです。Wix Studioならプロトタイプを作りながら本番環境を構築できるので、試行錯誤のスピードが格段に上がりましたね。

–––––複数のAIツールを掛け合わせて制作を進めているそうですね。

小玉　　はい。今回はWix Studioのエディタを開きながら、外部のAIツールをディレクターやアシスタントのように連携しています。例えば、ChatGPTに「こういう挙動を実現したい」と相談して指示内容を整理してもらい、それをもとにClaude Codeに実際のカスタムコードを書かせる、といったフォーメーションを試しています。

「ここをホバーしたときにパッパッと切り替わるのは違うから、フェードで切り替わってほしい」「ちょっとフェードが早いから、もっとゆっくりにして」といった具合に、自分が求めている動きになるまで、自然言語でAIにチューニングを依頼しています。

Wix Studioには元々多彩なホバーアクションやアニメーション機能が備わっていますが、さらに独自の挙動を追求したい場合に、この手法が活きてくると感じました。

–––––プロのデザイナーとして、AIと泥臭くやりとりされているのが印象的です。

小玉　　この試行錯誤のおかげで、自分一人では難しかった高度な表現をスピード感をもって形にできています。まさかノーコードツールを極めるために、自分がGitHubにアカウントを作ってAIとコードのやりとりをすることになるとは想像もしていませんでしたが（笑）。

–––––普段からAIをかなり積極的に活用されているのですね。Wix StudioとAIの組み合わせによる可能性について、どう感じていますか？

小玉　　実は実務以外でも、日常的にAIを使ってプロトタイピングを楽しんでいます。例えばお酒を飲んだときの「酔いの回り方」の曲線をグラフ化してシェアするアプリや、冷蔵庫にある野菜の名前を入力するとレシピが出てくるアプリなどです。

こうした日常的な遊びの中でAIを活用していることが、実務におけるAIへのディレクション能力にもつながっている気がします。Wix Studio上で複雑なカスタムコードを生成し、思いどおりのアニメーションを実装する際にも、その感覚がそのまま活きていると感じます。

「自由なレイアウト」と「壊れない運用」を両立する

–––––スマホ版への対応は、どのようにお考えですか？

小玉　　 モバイルファーストで考えすぎると、どうしても表現の幅が狭まってしまうんですよ。なので、まずはPC版で自由なレイアウトを作り、それをWix Studioの「レスポンシブAI」でモバイル版へ変換しながら微調整していく手法をとろうと思っています。

今回のWebサイトでは、画面の左と右で別々の「リピーター」要素（リスト機能）を連動させるという、少し特殊な非対称の構造を採用しています。AIがこの複雑なレイアウトをスマホ向けにどう解釈し、再配置してくれるのか。その結果も含めて楽しみにしているところです。

–––––納品後の運用を見据えたCMS（コンテンツ管理システム）については、どう設計されていますか？

小玉　　Webサイトの骨格となる部分にはしっかりロックをかけつつ、クライアントである母が日常的に更新するインフォメーションやプロフィールなどのテキスト・画像部分のみを、CMSのデータセットに紐づけています。

–––––運用側の自由度とデザインの担保を両立させているのですね。他のツールと比較して、その設定はスムーズでしたか？

小玉　　WordPressなどで制作する場合、クライアントが触れる部分と触れない部分を明確に制御しようとすると、フィールドを細かく設定する必要があり、工数が膨大になってしまうことがありました。

その点、Wix Studioは運用側の自由度を保ちながら、予期せぬレイアウト崩れを防ぐ仕組みをシンプルに構築できるのがありがたいですね。複雑な設定が不要なのも助かっています。

Webサイトの世界観を損なわず使えるEC機能

–––––今回のWebサイトにはオンラインショップも導入される予定とのことですが、その狙いを教えてください。

小玉　　ヒアリング時に、母から「写真集やプリント作品もWebサイト上で販売したい」という希望があったんです。Wix Studioでは「Wixストア」機能を活用することで、作品を鑑賞するという一連の体験の延長線上に、自然な形で購買導線を組み込むことができます。

別々のプラットフォームをつなぐのではなく、Wix Studio内で完結できるからこそ、作家の世界観を損なうことなく、ギャラリーからショップへとユーザーを案内できるんです。

–––––鑑賞体験を途切れさせずに販売までシームレスにつなげられる工夫は、クライアントワークでも大きな強みになりそうです。

小玉　　クライアントワークでも、「ブランドサイトを立ち上げたいけれど、ECもやりたい」というご相談はよくいただきます。これまでは予算の都合上、ブランドサイトと外部のECプラットフォームを別々に構築せざるを得ないケースもありました。しかし、それではどうしてもユーザー体験が途切れてしまうんです。

でもWix Studioなら、一つのプラットフォーム内で世界観を損なうことなくユーザーを案内できます。個人のアーティストや小規模なビジネスにとっても、これは非常に強力な選択肢になると感じました。

–––––ますますWebサイトの完成が楽しみになりました。では最後に、技術が民主化され誰でもWebサイトを作れる時代において、プロのデザイナーが提示すべき価値とは何でしょうか？

小玉　　AIを活用すれば、最短距離で美しいデザインを生成することは可能です。しかし、だからこそプロには、AIが出した最適解に対して、あえて遠回りするような「人間らしい引っかかり」を意図的に残す判断力が求められていると思います。

ツールを使いこなしたうえで、情報構造としての深みや、感覚的な面白さをどう編み込んでいくか。基礎をしっかり理解したうえで、効率化できる部分はAIに任せ、人間は「どういう体験を作れば心地よいか」という感覚的なチューニングに時間を割く–––––––そこに、デザイナーの真価が問われていると、私は考えています。

Wix Studioの真価に迫る、無料ウェビナーを開催！

プロフェッショナル向けのノーコードツール「Wix Studio」を展開するWix.comとオンラインメディア「Web Designing」が、Flowplateauxの木村浩康さん、tote incの谷井麻美さん・山口国博さん、ium incの小玉千陽さんをゲストに迎え、Wix Studioを使ったWebサイト制作の実践に迫るウェビナーを開催します。

本ウェビナーでは、ECサイト、音楽体験サイト、ポートフォリオサイトという3つのテーマで、実際にWix Studioを使ったサイト制作のプロセスを公開。UX設計の発想や制作フローの変化など、制作の試行錯誤を振り返りながら、プロのクリエイターが感じたWix Studioの手応えや工夫、そして制作の現場で活きるポイントを紹介します。

実制作だからこそ見えてきたリアルな知見を、ぜひご覧ください。

取材・文：長谷川智祥、写真：秋山枝穂、企画協力：Wix.com Japan株式会社
※本記事はWix.com Japan株式会社とのタイアップ企画です。