Webデザインは30年でどう変わった？ 今、Wix Studio×Brikで描く「日本のインターネットの変遷」

先日、日本初のWebサイト誕生から近年までの歴史をまとめた「日本のインターネットの変遷」というWebサイトが公開されました。これはWebデザイナーと制作会社向けのノーコード制作ツール「Wix Studio」で作られました。一部、プロンプトを入力するだけでアニメーションやモーション表現を制作するためのツールを生成できる「Brik」も使われています。

このWebサイトを手がけたのは、「Wix.com Japan株式会社（以下、Wix）」 でプロダクトマーケティングマネージャーを務める森和彦さん。どのような目的、手段で制作されたのでしょうか。Wix StudioとBrikが実現するWebサイトの可能性について、うかがいました。

最新鋭のツールでつくる、懐かしのWebサイト

–––––森さんは、プロダクトマーケティングマネージャーとして日頃どのようなお仕事を手掛けていますか。

森和彦（以下、森）　アメリカに在住しながら、日本市場向けにWix StudioやBrik、Base44といったWix製品のマーケティングを担当しています。Webサイトや動画、広告などのクリエイティブをディレクションしたり、日本向けにローカライズしたりするほか、イベントサイトやキャンペーンサイト、LPを自ら制作することもあります。

–––––「日本のインターネットの変遷」というWebサイトを制作したのも、そうしたマーケティング活動の一環ですか。

森　はい、Wix Studioのテックデモとして制作しました。広報担当者から「懐かしさ」をテーマにしたコンテンツの提案があり、近年若い世代の間で広がるレトロブームとも親和性が高いと考えました。

–––––懐かしさを感じさせるものとして、1992年から現在までの日本のWebサイトの変遷を紹介する内容にしたのはなぜですか。

森　Webデザインは時代ごとに大きく変化してきたので、懐かしさやエモさを感じてもらいやすいテーマだと思いました。当初はインターネット黎明期のデザインを再現するWebサイトにすることも考えましたが、世代ごとに懐かしさを感じる時代が異なるため、黎明期から現在までを紹介する構成にしました。

–––––昔のWebサイトのキャプチャは、ブラウザも懐かしいです。

森　ブラウザは、Webサイトと切っても切れない関係ですよね。もう存在しないものは、当時のデザインを再現しました。Webサイトの変遷から、プロダクトの終了や移り変わりの影響がうかがえる点も興味深いです。

–––––森さんは、インターネットの黎明期を実際に体験していますか。

森　はい、当時は「Yahoo!ジオシティーズ」という、HTMLを書いてWebサイトをつくれるサービスなどを使っていました。

–––––今回のテックデモをつくるにあたり、意識した点はありますか。

森　Wix Studioにある多様な機能を使って、実際にどのようなものがつくれるのかを見せることです。そのため、できるだけ多くの機能や表現を盛り込みました。

森　また、私はWebデザイナーではないので、プロの方が見たときに物足りなく感じる点もあるかもしれません。その際に、「自分だったらこうするだろうな」とアイデアを考えるきっかけになることも意識しました。

Wix Studioが実現する、表現力と制作効率

–––––「日本のインターネットの変遷」はどのような手順でつくりましたか。Wix Studio以外にFigmaなどを併用していますか。

森　今回Figmaは使いませんでした。既存テンプレートも使わず、Wix Studioのエディタ上でワイヤーフレームから制作しました。あくまでテックデモなので、コンテンツ内容以上に、UIやナビゲーション、レイアウトやインタラクションデザインに注力しました。

–––––年代は上から下へ、各年代のコンテンツは左から右へと、縦と横のスクロールを組み合わせたUIが印象的でした。

森　インフォグラフィックでは歴史を扱う際に時間軸を一方向で見せることが多いので、年代の流れを縦スクロールで表現しました。一方で、各年代の情報は横スクロールにするとわかりやすいだろうと考えました。Wix Studioの表現力を発揮する意味でも、あまり他で見ないUIにチャレンジしています。

–––––今回使用した中で、特に便利だと感じた機能はありますか。

森　やはり「CSSグリッド」です。画面を縦と横に区切るツールで、レイアウトの構築に使いました。例えば、左のグリッドはブラウザ幅の何%にするといった設定もできるのが便利で、レスポンシブにも対応しています。

また、他のWebサイトのデザインを再利用できる機能も作業効率化に役立ちました。再利用したいデザインのライブラリを作成したり、過去に制作したWebサイトのエディタと、新たにつくるWebサイトのエディタをブラウザの別々のタブで開き、コピー＆ペーストでセクションを移すという使い方もできます。

–––––たくさんの画像からファイル名を指定してアップロードするのも、意外と手間がかかります。ドラッグ＆ドロップやコピー＆ペーストで簡単に操作できると、直感的に制作できそうですね。

森　直感的に制作できることは、とても大切だと思っています。Webデザイナーやクリエイターの方々がアイデアをアウトプットする際に、集中を妨げるような負荷は極力ないことが望ましいので。

また、外部ツールなどとの連携なしに機能の拡張やアナリティクスなどを使えるのも、企業の方にとって安心感を持っていただけるポイントではないかと思っています。追加の費用がかからなかったり、管理しやすかったりするのはもちろん、プロにWeb制作だけ依頼して運用は自社でしたいというニーズにも応えやすくなっています。

–––––プロンプトを入力するだけでアニメーションやモーション表現をつくるツールを生成できるBrikも使われたそうですが、どのように活用していますか。

森　Webサイトを開いた際に表示されるタイトルアニメーションで使いました。マウスに動きに応じてピクセルが変化します。これはBrikのコミュニティで共有されていたツールをカスタマイズし、生成したHTMLコードをWebサイトに埋め込んでいます。プロンプトだけで高度なアニメーションやモーションなどをつくれる、素晴らしいプロダクトです。

森　Wix Studioも含めて、こうしたツールの使いやすさによって、Webデザイナーの方々が考えているアイデアをそのまま自身の手で表現できるようにした点が強みだと考えています。

ノーコード×AI時代に求められるクリエイターの力

–––––先ほど、Webサイトの変遷にはツールの移り変わりの影響も大きいというお話がありましたが、Wix StudioやBrikのような高機能なツールの登場もそうした進化の一つだと言えます。ノーコードやAIツールの普及で、クリエイターに求められる役割も変わっていきそうですね。

森　従来はコーディングを依頼する必要があった領域も、Webデザイナーの方が自ら制作を主導できるようになりました。ノーコードやAIでつくるハードルが下がったといっても、デザイン未経験者とプロの境界線がなくなるかというと、そうではありません。こうしたツールをもっとも効果的に活用できるのは、作品としてまとめあげる力や体験を成立させる力を持つデザインのプロフェッショナルだと思っています。

時間やコストの削減だけでなく、デザイナーの方が自ら細部までつくり込めるようになったことでクオリティが上がり、ビジネスにも寄与することを実現したツールでもあると思っています。

また、Brikで制作できるモーションデザインは、競合との差別化という点で大きな力になるのではないでしょうか。

–––––日本のインターネットの変遷は、今後どのようになっていくと予測していますか。

森　プロの現場でもAI技術の導入が進むのではないかと思っています。ただ、AIでなんでもつくれるようになるかというと、そうではありません。良いデザインの背景には胸を打つストーリーやあえて残された「遊び心」があるからです。ユーザーの心に響くデザインを設計するのは、プロの人間だからこそできることです。これからのWebデザイナーの方々は、そうしたスキルをより追求することを求められるのではないでしょうか。

また、すぐつくれるようになったことで、クライアント企業との打ち合わせ段階で動くモックアップを見せたり、あらかじめポートフォリオのように作例を準備するといったこともできるようになりました。制作前の段階からクリエイティブが変わる、ツールによる変革だと言えます。それにより、さらにクライアントの期待に応えられるようになるでしょう。

–––––数年後に振り返ったときに、Wix StudioやBrikが大きな変革を起こしたという歴史になっているかもしれませんね。

森　そうなるといいですね。もし本当にそんな未来が来たら、「日本のインターネットの変遷」の続きとしてぜひ書き加えたいと思います。

取材・文：平田順子