画像はWebflow公式ブログから引用しています。
Splineで没入型3Dサイトの構築
WebflowはSplineとの連携を発表し、AppleのようなインタラクティブなWebサイトをより簡単に開発することができます。
3Dは、製品を詳しく見せたり、デザインを引き立たせたり、全体的な見た目を提供する手段として、ウェブサイトやプロジェクトを他と差別化させるのにぴったりの方法です。
そしてSplineは、ウェブベースの3Dデザインソフトウェアで、ユーザーがアニメーションやビジュアルモデル、インタラクティブなコンテンツを簡単に作成できるツールです。
WebflowはSplineとの連携により、ユーザーに向けてビジュアルに魅力的な3Dデザインや没入感あるサイトを制作することができます。アニメーションとの連携によりwebflow内で自由な変更が可能です。
多言語化を超えるローカリゼーション機能
これまでWebサイトを多言語化するには、Weglotの外部ツールを必要としてきました。さらに、テキストに関しては変更ができるものの、画像に関しての表示分けは簡単にはできません。
しかし今回のローカリゼーション機能によってあらゆる国に合わせたWebサイトを簡単に構築することができます。
ローカライゼーションを使用すると、以下のことが可能です:
- デザインからコンテンツまで、特定の場所に合わせてサイトのすべてをカスタマイズできます。コードは不要です。
- Lokaliseなどのパートナーアプリのようなネイティブな自動翻訳を活用したり、選択した翻訳管理システム(TMS)に接続したりできます。
- カスタマイズ可能なサブディレクトリやメタデータからローカライズされたサイトマップまで、最高品質のSEOを活用して、グローバルトラフィックを最大化できます。
ローカリゼーションは、今日(10/06)からエンタープライズのユーザーとパートナーに向けてリリースされます。そして来月には全てのユーザーがこのローカリゼーションを利用することができます。
変数による迅速な開発と柔軟性の向上
みなさんはWeb開発をする際に、デザインシステムを構築していますか?おそらく多くの人がデザインシステムをWebflow内に構築し、より統一的なWebサイトの開発を行なっていると思います。これにより、デザイン作業が簡単で迅速になるだけでなく、ユーザーにも一貫性のあるエクスペリエンスを提供できます。
そしてこのデザインシステムをWebflow内に設定できる変数(Variables)が今日リリースされました。変数は、サイズや色、フォントなどを変数として定義することで、共通したコンポーネントとして保存することができます。
これによる従来のデザインシステムとしての柔軟性や開発速度が上がるだけでなく、ダークモードなどの設定がよりしやすくなります。
カスタムCSSプロパティを新たにサポート
プロジェクトでスタイリングの制御が必要な時に、Webflowデザイナーでスタイル要素にカスタムCSSプロパティと値のペアを追加する方法を開発中との発表がありました。以前まではEmbed codeを埋め込む必要がありましたが、これらのスタイルはクラスとタグ内に埋め込まれ、デザインを大規模にカスタマイズするのがより簡単になります。この機能のリリース日はまだ決まっていません。
コンポーネントがさらなる柔軟性を兼ね備える
コンポーネントがさらに強力で使いやすくなり、一貫性のあるサイトを構築できるようになりました。メインコンポーネントを管理している場合でも、キャンバス上でコンポーネントのインスタンスを作成している場合でも、コンポーネント内の修正可能なプロパティを設定および管理することが今まで以上に簡単になりました。
本日から、プロパティを作成および削除するための簡単なプロセスが提供され、プロパティと要素をリンクさせるための明確なアクション項目も用意されます。そして、新しいサイドパネルにより、コンテンツエディター向けの編集プロセスが効率化され、修正可能なコンポーネントプロパティだけが表示されます。
また、「スロット」の追加によりより柔軟な要素をコンポーネントごとに追加することができます。スロット内には任意の要素、コンポーネント、またはスロットを配置することができます。このスロットの導入により、WebflowのコンポーネントはよりReactコンポーネントの力に近づきました。
スロットは数か月以内にすべてのユーザーに提供される予定です。
Webflowエコシステムの拡大
数週間前、Webflow Appsの発表がありました。これにより、Appsの全機能がデザイナー内で活用できるようになりました。Appsは、フォーム、画像、テキストなどのサイト要素をリアルタイムで追加および編集することで、ワークフローを大幅に強化できるようになりました。さらに、HubSpot、Unsplash、Jasper、Finsweet、Memberstackなど、チームが日常的に利用するツールとの簡単な連携も可能になりました。
そして本日、Marketplaceにさらに多くのAppsが導入されました。これには、Finsweetの新しいWized App、Better Shadows、そしてLokaliseからの新しいローカライゼーションAppも含まれています。
開発者プラットフォームの更新
Webflowのサイトを管理および構築する人々に提供できるAppsの機能を超えて、Webflowの更新された開発者プラットフォームは、エージェンシーやフリーランサー、マーケティングチーム向けにますますパワフルな製品を提供しています。
8月に、WebflowはDesigner Extensionsを導入しました。これは、Webflow Designer APIを活用した新しい機能で、開発者がサイトのキャンバスと直接対話するAppsを構築できるようになりました。また、REST APIにも大幅なアップデートを加え、開発者はForms Assets、Pages、Custom Codeなど、Webflowのコア機能と統合できるようになりました。
そして今日、Webflowは新しいAPIを3つ発表しました。まず、新しいコンポーネントデザイナーAPIのスイートです。これにより、開発者はWebflowサイトにコンポーネントを追加、バインド、管理できます。さらに、開発者向けにカラーやフォント、サイズなどの変数を定義および管理するVariables Designer APIもリリースされます。
さらに、来月にはWebflowとサードパーティの翻訳管理システムを統合するための新しいローカライゼーションAPIもリリース予定です。
最新の開発者プラットフォームのアップデートについて詳しくは、こちらでご覧いただけます。
Figma to Webflowのさらなるアップデート
今年の初めに、FigmaからWebflowへのプラグインがリリースされました。これにより、Figmaで作成したデザインやワイヤーフレームを簡単にWebflowにコピーできるようになっています。
そして今回、新しい機能が追加され、Figmaのコンポーネントとそれに関連する変数が自動的にWebflowにインポートされるようになりました。Figmaでデザインを変更したあと、ボタンをクリックするだけで変更をWebflowに反映させることができます。
改善されたFigmaからWebflowへのプラグインとそれに伴うWebflowアプリは、数か月以内にリリースされる予定です。
DevLink を使用した React コンポーネントのインポート
DevLinkは、開発者にWebflowコンポーネントをReact環境にエクスポートする能力を提供しています。DevLinkを拡張し、新しいReactコンポーネントのインポートを含めることで、ユーザーはReactで構築されたコンポーネントを使用してWebflowサイトをさらにパワーアップさせることができます。将来的には、ストアロケーターやフルスタックアプリケーションなどのライブデータに接続されたコンポーネントを含むすべてを構築できるようになると発表がありました。
チーム権限の管理
チーム内での共同開発は、あらゆる規模のチームにとってスピードや効率向上に不可欠です。
最近のコメント機能のリリースにより、迅速にフィードバックを受け取ることができるようになり、コメント担当者役割を使用することで、特定のチームメンバーをWebflow内で「コメントのみ」に権限の譲渡ができるようになりました。(ただ現在コメント機能は、日本語に対応していない....)
また、Webflow内のコンテンツ編集用の新しい権限を提供し、マーケターやコピーライター、クライアント、または他のチームメンバーが簡単かつ安全な環境でコンテンツを迅速に編集および公開できるようにしました。
さらなる今後の改善として、提案された更新内容をより詳細に表示する新しい公開ワークフローを導入し、公開前に安心感を持つことができるようになるようです。
今後数か月で、ページのブランチによって、さらなるパワーをもたらす予定です。これは、エンタープライズ機能の中でも最も利用されている機能の一つで、専用の承認プロセスを使用してチームメンバーが枝分かれし、より速くテストできるようになります。また、技術的な知識が少ないチームメンバーが、デザイナーが承認したコンポーネントを使用して独自の新しいページを作成する新しい方法にも取り組んでいるようです。