※この記事は2024年8月29日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

The power of Webflow Apps is now available in the Designer

‍

ウェブサイトは単体では成り立ちません。成功するサイトは、ビジネスが繁栄するために必要なツールやプロセスと深く結びついています。

昨年、Webflow Appsをベータ版で発表して以来、私たちのチームは、サイトを構築して公開するための重要なコンポーネントであるAppsに、さらなるパワーと柔軟性を提供するために取り組んできました。

そして、今日、私たちはWebflow Appsの次世代版を発表できることを喜んでいます。

これにより、Appsのパワーがデザイナーにもたらされ、Webflowでの構築方法がより新しい次元で活用できるようになり、日常的に使用するツールとの統合もより深くなります。

主な新機能は次のとおりです：

1. 新しいAppsパネル。 Webflow MarketplaceからインストールされたAppsに直接アクセスできるようになりました。
   ‍
2. Webflowでの構築方法を変えるApps。 デザイナー内で直接Appsを開くことができるようになり、フォーム、画像、テキストなどのサイト要素をリアルタイムで追加および編集するための新しい方法が提供されます。
   ‍
3. テックスタックとのシームレスな統合。 Appsは、より多くのWebflowのコア機能と連携できるようになり、CRM、マーケティング自動化、分析プラットフォームなどのスタック内のツールとより強力な統合が可能になります。
   ‍
4. 透明な権限管理。 サイトやワークスペースにAppsをインストールする際に、より詳細な権限を表示して受け入れることができるようになりました。
   ‍

今日のローンチに伴い、HubSpot、Jasper、Unsplash、Typeform、Finsweet、Memberstackなどのパートナーから20以上の新しいAppsをWebflow Marketplaceで提供します！ これらの新しいAppsは、Webflow Marketplaceですぐに見つけることができます。

また、Appsのはじめ方については、Webflow Universityで詳細を学ぶことができます。

‍

※この記事は2024年8月19日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Updates to our Developer Platform

‍

Webflowの開発者プラットフォームに大幅な更新があります。

これにより、Webflowマーケットプレイスを通じて、開発者がより強力な製品を作成できる新しい機会が開かれます。

主な更新点は以下の通りです：

• デザイナーエクステンション：開発者は、Webflowデザイナーにアプリの機能を追加できます。これにより、サイトのデザイン作業と連携しながら、ユーザーにスムーズな操作感を提供できます。
  ‍
• 新しいREST API：Webflowの中核機能に深く統合される4つの新しいAPIが導入されます。
  ‍
• 認証フローの改善：アプリが必要とするアクセス許可を特定できるようになり、ユーザーがデータへのアクセスやアクションをより細かく制御できるようになります。

Webflowマーケットプレイス向けのアプリを構築する方法や新しいAPIについては、開発者ドキュメントを参照してください。

注：以前のv1からv2への移行方法については、ガイドが用意されています。

‍

※この記事は2024年8月19日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

New shortcuts for unwrapping elements and wrapping in H Flex or V Flex elements

‍

‍

‍

新しいキーボードショートカットが3つ追加！

ワークフローをさらに効率化し、ピクセルパーフェクトなレイアウトをより簡単かつ迅速に構築できるようになります。

最初の2つのショートカットは、要素をV FlexまたはH Flex要素でラップするもので、キャンバス上で右クリックするか、次のショートカットを入力することで使用できます。

H Flexでラップする：Macの場合はCommand + H、Windowsの場合はControl + H

V Flexでラップする：Macの場合はCommand + G、Windowsの場合はControl + G

3番目のショートカットは、要素をアンラップし、その親要素であるdiv、section、H Flexなどを削除することができます。

キャンバス上で右クリックするか、次のキーボードショートカットを使用して要素をアンラップできます。

要素をアンラップする：Macの場合はCommand + Shift + G

Windowsの場合はControl + Shift + G

新しいショートカットを使いこなして、効率的にサイトを構築していきましょう！

Googleの親会社アルファベットも多額の投資をしており、近年ますます世界で注目を集めているWebサイト制作ノーコードツール『Webflow』。

ノーコードの強みを生かした「スムーズな操作」と「わかりやすいUI」、1万もの記事を管理できる「強力なCMS」、ノーコードなのにカスタマイズ自由という「革命的なカスタムコード機能」など、高い機能性によって様々なシーンで活躍できるWebflowですが、これまで1つ致命的な弱点がありました。

それは、UIが日本語対応していないことです。ローカライズされていないため、操作はすべて英語、学習も必然的に英語となり、日本人にとっては非常に学習ハードルが高いツールになっていました。

しかしこの度、Webflowを日本語表示してくれるプラグイン「Webflow日本語化（開発元：supasaito.com）」がGoogle Chromeのプラグインでリリースされました（2024年4月27日現在はアルファ版）。しかも開発元は、Webflow草創期からずっと日本のWebflow界隈を牽引してきたSupasaito（Webflow公認東京コミュニティリーダー）です。当社Funworkと創業時期が近く、共に日本ではかなり早い段階からWebflowによるサイト制作を受託してきました。

この「Webflow日本語化」によって、Google翻訳のような精度の低い日本語ではなく、業界用語など日本語特有のフレーズに対応したUIでストレスフリーにWebflowを操作することができます。

「Webflow日本語化」が生み出す変化

Webflow日本語化によって、Webflowのデザイナー画面（開発画面）が適切に日本語翻訳されることで、日本のWebflow制作業界は下記のような変化が起こると思われます。

1. 日本語UIによって、Webflowによるサイト管理が内製化しやすくなるため、多くの企業がWebflowの導入を検討（再検討）し始める。
2. 英語UIによる学習コスト高が解消され、直感的に操作しやすくなることから、フリーランス含めて、Webflowを操作できる人材（Webflowクリエイター）が増える。
3. 日本語UIによってWebflowはいわば、より自由度の高いWixやStudioといった位置づけになり、スタートアップ企業の最初のHPツールとして採用される頻度が増える。

世界でもトップ10のCMSシェア（2024年1月現在）を誇るWebflowですが、日本でも徐々に認知が広まっており、今回のプラグインリリース二よってさらにシェアが拡大すると予想されます。

当社でも、3年前こそ小規模サイトに使われるだけでしたが、近年では数十ページあるコーポレートサイトや採用サイトのリニューアルでWebflowを活用したり、今後発生するサイト拡張を効率化するためにIPOを目指すベンチャー企業がWebflowへの移行するプロジェクトが立ち上がったりと活躍の幅が広がっています。ノーコードの枠組みにとらわれず、拡張性が高いため、内製化しやすい点や運用コストを抑えられる点にメリットを感じる方が増えてきている印象があります。

Webflow日本語化の始め方

早速インストールを考えている方々のために、

Webflowの登録から日本語画面の表示までの手順を簡単に解説します。

（すでにWebflowを登録済の方は3番からご覧ください。）

1．Webflowの公式サイト右上から、「Get started — it's free」ボタンを押下

↓↓↓

2．登録画面からアカウントを作成（Googleログインが便利です）

↓↓↓

3．「Webflow日本語化」インストールページを表示し、「Chromeに追加」ボタンをクリックし「拡張機能を追加」をクリック

※現在はGoogle chromeにのみ対応しています。

↓↓↓

4．新しいウィンドウで開いたブラウザで再度Webflowにログインし、Webflowのデザイナー画面を開くと、日本語で表示された画面が確認できます。

‍

Webflow日本語化とGoogle翻訳との比較

実際、Google翻訳とこのプラグインでどのようにWebflowのデザイナー画面の日本語表示が違うのか、見比べてみました。

注意点として、日本語のWebflowは昨日アルファ版がリリースされたばかりです。翻訳箇所は日増しに増えていき、続々とアップデートされるようです。

下記画面は、プラグインがリリースされた翌日2024年4月27日のものになります。

‍

＜ナビゲーター表示時_Webflow日本語化＞

‍

＜ナビゲーター表示時_Google 翻訳＞

Google 翻訳だと、ページ内の英語表記まで翻訳されてしまっています。

また、左側ナビゲーター上の要素名・クラス名、右側スタイルパネルのあらゆる英語表示まで日本語になっていますが、いわゆる直訳であり意味のわからない単語が並んでいるため、操作が難しくなっています。

‍

一方で、Webflow日本語化プラグインの方は、まだまだアルファ版ということもあり翻訳箇所自体があまり多くはないですが、表現の違和感は無く、ホバー時のポップアップなどにも対応しているようです。

開発元のSupasaitoも、継続的に翻訳箇所を増やしていくとのことでしたので、今後に期待です。

アップデート情報は、Supasaito公式サイトにて公開されるとのことですので、こちら要チェックです。

また、もし「Webflow日本語化」のアルファ版を使う中で改善要望があれば、Supasaitoが主催する日本のWebflowコミュニティがDiscordで運営されていますので、こちらにご参加ください。

‍

まとめ

今回のプラグインの公開によって、直ちにWebflowが日本市場に広まるかというと難しいかもしれません。ですが、Webflowの日本ローカライズを進める中で、最大の課題と言ってもいい英語UIが解消されるきっかけができたことは非常に大きな一歩です。

今後、プラグインによる翻訳範囲が拡大していくことで、間違いなく日本人Webflowユーザーは増えると思います。

もしこれを気に、先んじてWebflowに触ってみようかな、自社導入を検討しようかな、という方がいらっしゃいましたらお気軽にご相談ください。

日本最多クラスのWebflow案件数を誇る当社にて、無料相談を承ります。

‍

※この記事は2023年8月8日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Protect your site with improved publishing workflows

‍

‍

‍

さらに進化したパブリッシュワークフロー

サイトを意図しない変更から保護するために、エンタープライズプランのユーザー向けに新しいパブリッシュのワークフローを導入します。

この新しいワークフローでは、提案されたすべての変更の準備段階の要約と、ステージングから本番への直接公開機能が提供されます。

Webflowのビジュアル開発スタイルは、マーケターやデザイナーに、エンジニアリングにチケットを提出する必要なく、自分たちのタイムラインでウェブサイトを構築、公開、更新する自律性を与えています。

これにより、デザインと開発の間の引継ぎを効率化し、エンジニアリングコストを削減し、より大きな影響を与える戦略的な開発のための時間を確保できます。

ただし、ビジュアル開発のスピードが、より厳格な公開ワークフローが提供する安全性を犠牲にすることがあります。

両方の世界のベストプラクティスを提供するために、Webflowにベストプラクティスのエンジニアリングコード展開ワークフローを導入します。

アプリケーションのダウンは壊滅的な結果をもたらす可能性があるため、

大規模なエンジニアリングチームでは、厳しいコードテストおよび展開プロセスを採用しています。

この追加のテストにより、大きな変更がライブサイトやアプリに反映されるリスクが低減します。

過去1年間、Webflowでのパブリッシュプロセスの可視性と制御を向上させるための段階的な改善をリリースしてきましたが、今日はそれらのリリースを統合した新しいパブリッシュ体験を提供します。

進捗が細かく可視化！

新しい公開ワークフローでは、提案された変更や新しいウェブリリースのプロセスのチームの進捗状況を細かく把握できます：

• デザイナーによる変更では、デザイナー上の内容とステージングサイト上の内容の違いが表示されます。
• ステージングによる変更では、ステージングサイトと本番サイトの間の違いが表示されます。

また、任意の変更をクリックして、その特定の変更の詳細を詳細に確認し、どの具体的な要素が影響を受けるかを確認することもできます。

さらに、大規模なチームが同時に作業する場合でも、承認された変更のみが公開されることを保証するために、ステージングドメインから本番ドメインに直接パブリッシュすることもできます。

この改善された可視性と制御により、より多くのサイトの制作担当をWebflowに招待し、より少ないリスクで公開できます。

新しい公開ワークフローは、本番サイトを意図しない、テストされていない、または承認されていない変更から保護したい大規模なチームにとって最適です。

ただし、急な修正やなど、できるだけ早く公開する必要がある小さなコンテンツやデザインの変更については、引き続きデザイナーから直接すべてのステージングおよび本番ドメインに公開する機能があります。特定のドメインにのみ公開する必要がある場合は、そのドメインをellipsisメニューから選択することもできます。

新しい公開ワークフローを始める方法については、Webflow Universityの記事でご確認いただけます。

今回はWebflowのコンポーネント機能の使い方について解説します。　

コンポーネントを使用すると、要素や子要素からカスタマイズ可能なブロックを作成して、一貫性があり、効率的な設計を維持できます。

これらのブロックをサイト全体で再利用し、1 か所で変更することで、繰り返し発生する各レイアウトを個別に修正する必要がなくなります。

‍

コンポーネントの作成方法

コンポーネントを使用して次のことができます。

• インスタンスごとに同一のコンテンツを作成します。

‍ナビゲーションバー、フッター、サインアップフォームなど、まったく同じコンテンツを持つ繰り返しレイアウトの同一コピーを作成します。

これらを 1 か所で編集すると、その変更がそのコンポーネントのすべてのインスタンスに影響を与えることがわかります。

• インスタンスごとに固有のコンテンツを作成します。

‍レイアウトは維持しつつも、複製先でテキスト、画像、ビデオ、またはリッチ テキストを変更し、各インスタンスに固有のコンテンツを与えながら一貫したデザインを維持します。

サイト上のほとんどの要素または要素のグループからコンポーネントを作成できます。

‍

1. コンポーネントにしたい要素を選択
2. Style panelまたはElement settings panelを開く
3. パネル上部のcreate componentアイコンをクリック
4. コンポーネントに名前を付けて、Createをクリック

‍

‍

メインコンポーネントの内の、一コンポーネントとなります。

これによって、メインコンポーネントに対する変更は、そのコンポーネントのすべてのインスタンスに反映されます。

次の方法でいつでも、任意のコンポーネント インスタンスのメインコンポーネント編集画面に入ることができます。

• コンポーネントインスタンスをダブルクリックする
• 右クリックし、Edit componentをクリックする
• インスタンスを選択し、ラベルの鉛筆アイコンをクリックする
• インスタンスを選択し、右側のパネルの右上にあるレンチアイコンをクリックする
• ‍

コンポーネントの使用方法と再利用方法

コンポーネントを作成したら、サイト内のどこでも再利用できます。

1. コンポーネントパネルを開く
2. 目的のコンポーネントをクリックしてサイト内の任意のページにドラッグ
3. コンポーネント インスタンスをキャンバス上またはナビゲーターに直接ドロップ

コンポーネントインスタンスを選択すると、そのインスタンスが強調表示され、緑色の枠で囲まれます。‍

コンポーネントパネルを開いて、サイト内で各コンポーネントが何回使用されたかを確認します。  

‍

注記

コンポーネント インスタンスの複製は可能ですが (コピーペースト、右クリック、またはキーボード ショートカットの使用による複製)

メイン コンポーネントの複製は現時点ではネイティブには不可能です。

代わりに、コンポーネント インスタンスのリンクを解除し、そのリンク解除された要素または要素のグループから新しいコンポーネントを作成できます。

コンポーネントをダブルクリックしてメインコンポーネントに入り、ナビゲーターパネルでコンポーネントの要素階層を表示できます。

コンポーネントの要素階層はメイン コンポーネントからのみ表示できます。

つまり、コンポーネント インスタンス内からコンポーネントの要素階層を表示することはできません。

‍

メインコンポーネントを編集する

コンポーネントのすべてのインスタンスに同じ変更を加えるには、メインコンポーネントを編集する必要があります。

次の方法で、任意のコンポーネントインスタンスのメインコンポーネントを編集できます。

• コンポーネントインスタンスをダブルクリックする
• 右クリックし、Edit componentをクリックする
• インスタンスを選択し、ラベルの鉛筆アイコンをクリックする
• インスタンスを選択し、右側のパネルの右上にあるレンチアイコンをクリックする

コンポーネントインスタンスのスタイルを変更するには、class カスタム属性を使用します。

メインコンポーネントの編集は、すべてのコンポーネント インスタンスに影響します。

(コンポーネントインスタンスのコンポーネントプロパティがコンポーネント内の特定の要素に適用されている場合を除く)

メインコンポーネントに対する変更（要素の順番、レイアウト、サイズ、など）は、サイト全体のすべての同一コンポーネントインスタンスに反映されます。

‍

たとえば、コンポーネントとして設定されたカードデザインがあるとします。

カードコンポーネントには見出し要素、段落要素、ボタン要素が含まれており、ボタン要素はカードの一番下に配置されます。

カードのメインコンポーネントを編集し、ボタンをカードの下部から上部に移動すると、その変更はサイト全体のカードコンポーネントのすべてのインスタンスに影響します。

メインコンポーネントの編集は、コンポーネントインスタンスで特に変更されない限り、そのコンポーネントのすべてのインスタンスに影響します。

コンポーネントのプロパティの定義とコンポーネントインスタンスの値の変更について詳しくは、  こちらをご覧ください。

‍

メインコンポーネントを終了する

メインコンポーネントの編集が完了したら、次の方法でメインコンポーネントを終了できます。

• デザイナーの左上隅にあるbackの矢印をクリックする
• キャンバス上のコンポーネントの外側をクリックする
• キーボードのEsc キーを押す

メインコンポーネントの編集を停止した後は、コンポーネントインスタンス内の要素に加えた編集は、その特定のコンポーネントインスタンスにのみ影響することに注意してください。

‍

エディターでコンポーネントを編集する

エディターでサイトのコンテンツを更新するようにコンテンツ編集者を招待した場合

コンポーネントプロパティで変更されておらず、全てのインスタンス間で一貫しているコンポーネント要素に対して行われた変更は他のすべてのインスタンスに適用されます。

また、コンテンツ エディターがコンポーネントプロパティを介して変更されたコンポーネント要素に変更を加えた場合、その変更は編集中のコンポーネントインスタンスにのみ適用されます。

‍

コンポーネントの名前を変更する

コンポーネントの名前を変更するには

1. コンポーネントパネルを開く
2. コンポーネント名の上にマウスを置き、コンポーネントの右側に表示される鉛筆アイコンをクリック
3. 変更を加えて保存する

‍

コンポーネントを削除する

コンポーネントを完全に削除するには

1. コンポーネントのすべてのインスタンスをサイトから削除またはリンク解除
2. コンポーネントパネルを開く
3. コンポーネントの右側に表示される鉛筆アイコンをクリック
4. Deleteをクリックして確認

‍

コンポーネント インスタンスをメイン コンポーネントからリンク解除する方法

コンポーネント インスタンスのリンクを解除し、メイン コンポーネントから独立して変更を加えるには

1. リンクを解除するインスタンス内の任意のコンポーネント要素を右クリックします
2. Unlink instanceをクリックします

リンクを解除すると、デザイン内でそのコンポーネントの他のリンクされたインスタンスを編集しても、リンクが解除されたインスタンスは変更されません。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

‍

‍

※この記事は2024年4月21日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Webflow acquires Intellimize to unlock AI-driven website optimization

‍

‍

‍

webflowで驚くべきウェブサイト体験を作成し最適化する手段が広がります！

全体のマーケティングチームを強化

Webflowのミッションは、web開発の能力を誰にでも提供することです。

過去10年間で、Webflowは何百万ものデザイナーにその能力を与え、手動でコードを書かずにデザインを完全に具現化できるようにしました。

これを行うことで、数えきれないほどの人々の生活を変えるだけでなく、より魅力的で美しいWebを作り出すのにも役立ちました。

しかし、Orangetheory Fitness、IDEO、Dropboxなどのような大規模なチームと協力し始めてから、

ウェブ体験がどのように作成されているかには重大な問題があることに気付きました。

ウェブサイトが構築された後、マーケティングチームがそれを個別化し、より良いものにするための実験を行い、さまざまな顧客のニーズに対応するために最適化することは非常に困難です。

ウェブサイトを最適化するためのツールは、設定が非常に複雑であり、大幅なエンジニアリングのサポートなしには設定できないか、ソースウェブサイトのコンテンツが設計および管理される場所とは別に使用することが困難なことがよくあります。

これがWebflowが解決しようとしている次の大きな問題です。

Webflowの目標は、マーケティングチームやWebエージェンシーに、信じられないほどのウェブ体験を構築するだけでなく、異なるオーディエンスに合わせてサイトを個別化し、どのバージョンがより優れているかをテストするための実験を簡単に作成し、ウェブサイト全体のバイヤージャーニを最適化してコンバージョンと収益を促進する能力を提供することです。

これらの機能を1か所に統合することで、私たちは統一されたウェブサイトエクスペリエンスプラットフォーム（WXP）を構築しています。

このビジョンを持って、デジタル体験の最も重要な部分（ウェブサイト）を取り上げ、マーケティングチームがコードへの依存を打破し、以前に到達できなかった速さで革新することができる視覚優先のプラットフォームを作成しています。

これにより、収益を生み出すことができるマーケティングチームだけでなく、ウェブ上のすべての人にとってより良い体験が実現すると考えています。

Intellimize & Webflow: 同じ原則に基づいて構築

Intellimizeは同様の目標で設立され、構築されました。

Intellimizeチームは、エンジニアリングのサポートなしでマーケティングチームがウェブサイト体験を深く個別化できる素晴らしい製品を作成しました。

Intellimizeチームとの最初の会話から、彼らはWebflowと似たようなビジョンを持っているだけでなく、マーケティングのコード依存を解消する鍵は、マーケティングが常に開発チームからの助けを必要とせずに使用できる視覚優先のツールを構築することだという同じ気持ちを共有していることを知っていました。

設立以来、IntellimizeはSumo Logic（10億以上のページバージョン、変換率の53％の向上）、Snowflake（変換率の60％の増加、予約されたミーティングの49％の向上）、Drift（変換率の129％の改善、280万ドルの追加収益）などの顧客に大きな影響を与えてきました。

IntellimizeのアプローチはWebflowと完全に一致しており、組み合わせることで、過去10年間にウェブサイト開発市場で行ってきたように、広範なウェブサイト体験市場を攪乱することができます。

What's NEXT?

IntellimizeチームをWebflowへ迎えることに非常に興奮しています。

今後数か月間で、WebflowはIntellimizeをWebflowプラットフォームに統合し、すべてのお客様がWebflow内で高度な個別化と実験を実施できるようにします。

Intellimizeのお客様にとっては、製品は変わりませんし、一緒に成長するのを楽しみにしています。

これはWebflowにとって大きなマイルストーンであり、信じられないほどのウェブサイト体験を構築したいすべてのマーケティングチームにとっても重要なことです。

‍

Splineは、インタラクティブな3Dをデザインするためのツールです。

Splineの統合により、Spline sceneとそのイベントをWebflowに直接貼り付けることができます。

Webflowのネイティブインタラクションを使用して、WebflowでSplineオブジェクトをアニメーション化することもできます。

‍

Spline sceneを作成してエクスポートする方法

まず、 Splineでsceneを作成する必要があります。

そのためには、Splineにアクセスしてアカウントを作成し、デザインを開始してください。

設計方法の詳細については、Spline のドキュメントまたはビデオ チュートリアルを確認してください。

sceneを作成したら、sceneをエクスポートできます。

1. エディタのツールバーで[Export] をクリックします。
2. Code Exportに移動します。
3. [Overview]タブの上部にあるリンクをコピーします(リンクには「.splinecode」拡張子が付きます)。

‍

Spline sceneをWebflowサイトに追加する方法

Spline sceneを作成してエクスポートしたら、そのシーンを Webflowサイトに追加できます。

WebflowにはネイティブのSpline scene elementがあり、他の要素と同様にスタイルを設定できます。

1. Add elementからMediaに移動します。
2. Spline scene elementをキャンバスにドラッグします。
3. Element settings panelからSpline scene settingsに移動します。
4. Spline sceneのURLを貼り付けます。

‍

Webflow でスプライン シーンをアニメーション化する方法

1. キャンバス上のSpline sceneを選択します。
2. Interactions panelに移動します。
3. Element triggerまたはPage triggerを選択してください。
4. 手順6まではカスタムアニメーションの設定手順に従います。
5. [Actions] ドロップダウンからスプライン アニメーションを選択します。
6. ドロップダウン からオブジェクトを選択します。

その後、Spline sceneを自由にアニメーション化できます。

‍アニメーション タイムラインでそのオブジェクトの位置、回転、スケール (すべての X、Y、Z 軸上) を設定できます。

‍アクション ターゲットを調整して、アニメーションが影響するelementまたはトリガーを決定することもできます。

Figma to Webflow Appを使用すると、バリアブルやコンポーネントを Figma からWebflowにインポートできます。

始めるには、まずFigma to Webflow プラグインをインストールする必要があります。

‍

Figma to Webflow Appを起動する方法

まず、Webflow サイトを開き、アプリパネルからアプリを起動します。

1. Figma プラグインに移動します
2. 「Design System Sync」タブに移動します
3. ドロップダウンで正しいサイトが選択されていることを確認してください

プラグインが接続されていることを確認したら、バリアブルやコンポーネントを同期できます。

‍

バリアブルとコンポーネントを同期してインポートする方法

バリアブルの同期とインポート

同期およびインポートするバリアブルを選択するには

1. 「Design System Sync」タブに移動します
2. 右上隅にある「variables mode」アイコンをクリックします
3. 同期したいバリアブルを選択します
4. 「Sync to Webflow」をクリックします

その後、Webflow に戻って、アプリのモーダル ウィンドウにバリアブルをインポートできます。

ボックスをオンまたはオフにして、インポートするバリアブルを選択できます。

次に、「Import」をクリックします。バリアブルをインポートすると、Variables tabに表示されます。

‍

コンポーネントの同期とインポート

同期するコンポーネントを選択するには:

1. 「Design System Sync 」タブに移動します
2. 右上隅の「select mode」アイコンをクリックします
3. Shiftキーを押しながらクリックして、Figma キャンバス上の 1 つまたは複数のコンポーネントを選択します
4. 「Sync to Webflow」をクリックします

プラグインがコンポーネントを同期したら、Webflow サイトにアクセスして、Figma to Webflow アプリの更新を確認できます。

1. 「Import new components」をクリックして、新しく同期されたコンポーネントを確認します
2. Webflow サイトにインポートするコンポーネントを選択します
3. インポートをクリックします

Figma からコンポーネントをインポートすると、Webflow はそのコンポーネントに接続します。

後で、同じコンポーネントを Figma から再インポートし、その設計の更新を Webflow で直接確認できます。

要素の位置とスタイルのみが更新されることに注意してください。プロパティまたはバインディングがある場合、Webflow に残ります。

注記

コンポーネントバリアントは、同期時に選択を解除しない限り、重複コンポーネントとして Webflow サイトにインポートされます。

‍

以前にインポートしたコンポーネントを同期する方法

以前に Webflow サイトにインポートしたコンポーネントを同期するには、まず Figma に移動してプラグイン ウィンドウを開きます。

1. ドロップダウンでコンポーネントを同期するサイトが選択されていることを確認してください。
2. 右上隅の「select mode」アイコンをクリックします
3. Figma キャンバス上のコンポーネントを選択します
4. プラグインのモーダルウィンドウで「Continue」をクリックします
5. 「Sync to Webflow」をクリックします
6. Webflow サイトで Figma to Webflow Appを開きます
7. アプリのモーダルウィンドウで「Component updates」をクリックします

次に、各コンポーネントをクリックして表示できます。

• 変更されたスタイル (色、フォントなど)
• コンポーネントに追加またはコンポーネントで更新されるバリアブル
• コンポーネントに追加された新しい要素

[Update Component Styles and Variables] をクリックしてプレビューから 1 つのコンポーネントを更新するか、[Review component updates]ページで[Update all components]をクリックします。

コンポーネントのすべてのインスタンスが Webflow サイト全体で更新されます。

‍

コンフリクトのコンポーネントの更新を確認する方法

以前にインポートしたコンポーネントのコンフリクトは、Figma のコンポーネントから 1 つまたは複数の要素を削除し、それらの要素が Webflow にまだ存在している場合に発生します。

コンフリクトのあるコンポーネントの更新を確認するには、アプリのモーダル ウィンドウで [Component updates with conflicts] をクリックします。

次に、各コンポーネントをクリックして、欠落している要素を表示できます。

そこからは、次の 3 つのオプションがあります。

• 欠落している要素を削除する— Webflow 内のコンポーネントのすべてのインスタンスを通常どおり更新します (これにより、コンポーネント内の要素が削除されます)
• 非同期コンポーネントとしてインポート— コンポーネントをそのまま Webflow にインポートします。今後、コンポーネントを Figma から Webflow に同期することはできなくなります。
• Figma での変更を元に戻す- Figma に戻って、削除した要素をコンポーネントに追加し直すことができます。これにより、コンフリクトが解消されます。

‍

以前にインポートしたバリアブルを同期する方法

以前に Webflow サイトにインポートしたバリアブルを更新するには、まず Figma に移動してプラグイン ウィンドウを開きます。

1. 右上隅にある「variables mode」アイコンをクリックします
2. 「Continue」をクリックします
3. 同期したいバリアブルを選択します
4. 「Sync variable(s) to Webflow」をクリックします

Figma で更新され、Webflow に同期されたバリアブルはすべて、アプリのモーダル ウィンドウに表示されます。

ウィンドウにはバリアブルの初期値と新しい値が表示されます。インポートするバリアブルを選択し、[Update variable(s)]をクリックします。

‍

価格競争が激しい日本市場では、企業が生き残るためには製品やサービスのUXを向上させる必要があります。

‍

UXデザインは、製品やサービスの成功に大きく影響を与える重要な要素です。まずはUXの意味や改善方法を正しく理解することが重要です。

‍

この記事では、UXに関する内容を解説しています。UXの意味からUXとUIの違いやUXの改善方法、UXデザインを向上させるためのポイント、さらに成功事例も紹介していますので、ぜひご活用ください。

‍

UX（ユーザーエクスペリエンス）とは？

"UX" は "User Experience"（ユーザーエクスペリエンス）の略称です。これは、ユーザーが製品やサービスを選ぶ段階から、利用して再び購入したいと考えるまでの全体的な経験や満足度を指します。UXを高めることで、競合他社との差別化や顧客満足度向上、ブランド力向上のようなメリットがあり、近年多くの企業はUXの改善に力を入れています。

製品やサービスの成功に大きく影響を与える重要なUX項目として、以下6つの要素があります。

・ユーザビリティ

・コンテンツ

・デザイン

・インタラクション

・パフォーマンス

・アクセシビリティ

次の項目ではそれぞれの要素を解説していきます。

‍

WebサイトにおけるUX

ユーザビリティ

ユーザビリティとは、製品やシステムなどの使いやすさや効果性、ユーザーの満足度を表す言葉です。ユーザビリティの定義にはいくつかありますが、次のような要素が含まれています。

・目標達成に対する有効性

・記憶に残る操作性

・目標達成における効率の高さ

・使用時の満足度

・エラー発生時の直感的な復旧

これらの要素を高い度合いで満たす製品やサービスは、ユーザビリティが高いと考えられます。ユーザビリティの向上には、ユーザーのニーズや行動を理解し、それに基づいて設計を行うことが不可欠です。ユーザビリティテストやフィードバックの収集を通じて、製品やサービスの改善点を特定し、継続的な改善を行うことが重要です。

‍

コンテンツ

ユーザーが製品やサービスを使う際に触れるあらゆる情報や要素を指し、テキスト、画像、動画、アニメーション、アイコン、ボタン、リンクなどが含まれます。これらはユーザーが情報を理解しやすくするだけでなく、必要としている情報を提供する役割があります。良質なコンテンツは、ユーザーの関心や興味を引き、継続的に利用される要因となる重要な要素です。

‍

デザイン

製品やサービスを利用するユーザーが直面するインターフェースや体験を設計するプロセスを指します。これには、視覚的な要素（デザイン、レイアウト、色彩）、操作性（使いやすさ、ナビゲーション）などが含まれます。数あるサービスやプロダクトの中から自社の商品をユーザーに選んでもらうためには、ユーザーのニーズに寄り添った興味を引くようなデザインを設計することが重要です。

‍

インタラクション

コンピュータやデジタルデバイスを通じて行われる相互作用を指します。これは、ユーザーがデバイスやシステムと対話したり、操作したりすることを指します。例えば、ウェブサイトやモバイルアプリの操作、タッチスクリーンを使ったデバイスの操作、音声認識システムとの対話などを指します。ユーザーのアクションに対してフィードバックが提供されるため、開発者は即座にシステムの改善に取り掛かる事が出来ます。このような相互作用によりユーザーは円滑な体験を得ることができ、製品やサービスの成功に繋がります。

‍

パフォーマンス

製品やサービスがユーザーに提供する体験の質や効果を指します。例えばウェブサイトの場合、読み込み速度が速い事が重要です。読み込み速度が遅いとユーザーは待ち時間にイライラし、サイトの利用を妨げる要因に繋がってしまいます。その結果、利用者数減少や売上に影響を及ぼすことがあるため、常にパフォーマンスの最適化に取り組む必要があります。

‍

アクセシビリティ

製品やサービスがバリアフリーであり、すべてのユーザーが利用できることです。障害を持つユーザーや異なる環境下でもアクセス可能であることが重要です。

‍

UXとそれぞれの用語との違い

UI（ユーザーインターフェース）

「UI」は”User interface”の略で、製品やサービスとユーザーを結びつける接点のことを指します。サイトのデザインやボタン、ソフトウェアの操作画面などが具体例として挙げられます。UIは「ユーザー体験」であるUXの一部であり、UX向上には良いUIが欠かせません。

‍

CX（カスタマーエクスペリエンス）

「CX」は”Customer Experience”の略で、UXと同じように「ユーザー体験」を表す言葉ですが、CXの方がUXよりも幅広い範囲が対象になっているという特徴があります。UXは、ユーザーが製品やサービスを使用する際に得る体験に対して、CXはユーザーが企業やブランド全体との接点を通じて得る総合的な体験の事を指します。

‍

DX（デジタルトランスフォーメーション）

「DX」は"Digital Transformation"（デジタルトランスフォーメーション）の略で、デジタル技術を活用して業務プロセスやビジネスモデルへの変革を指します。DXの目的は、ビジネスの変革を迅速に実現できるデジタル企業の実現ですが、デジタル化という目的だけでDXを推進しても、新たな価値の創出が叶わず、単にコストが肥大化しただけの結果となるなど、失敗に終わってしまうことも珍しくはありません。正しい目的を見据えてDXを推進することが重要です。

‍

UXを改善させるポイント

ユーザー視点に立って考える

UXデザインを設計する際、どんな製品やサービスでも最も重要なことは「ユーザー視点」です。「ユーザー視点」とは、ユーザーの立場に立って、サービスに対してどんな感情を抱いているかを考えることです。

製品やサービスを良くしようと「ビジネス視点」になりすぎているよくありがちな失敗例として「情報量を多く盛り込みすぎて視認性が悪い」「目を引くためにデザインに凝りすぎて操作性が悪い」などといったユーザーのストレスになってしまうケースです。ユーザーが使いやすい導線を意識することが大切です。

‍

しかし、実際にユーザー視点を理解しようとしても具体的にどのような方法をとればいいのか悩まれることもあるかと思います。ここでは、ユーザー体験を理解するための手法について解説します。

‍

ペルソナ設計・カスタマージャーニー設計

ペルソナとは詳細な「人物像」を設定したもので、名前や勤務先、職種、居住地、家族構成、使用アプリや行動パターンなどを分析・定義します。カスタマージャーニーとはユーザーが製品やサービスを利用する過程全体を可視化し、ユーザの感情、行動を理解するのに役立ちます。この２つを用いる事でユーザーエクスペリエンスの向上が期待できます。

‍

ヒューリスティック分析

ユーザビリティテストとは違い、UXやUIの専門家が製品やサービスのユーザビリティを評価するための検証手段の1つです。専門家が一連のヒューリスティック（経験に基づいたルールや指針）を使用して、製品やサービスが一般的に認識されるユーザビリティの原則に従っているかどうかを評価します。ユーザーテストやフィールド調査などの他のユーザビリティ評価手法と組み合わせて使用されることがあります。

ユーザビリティテスト

Webサイトやアプリの最適化を目的とした評価・検証手段を指します。実際にユーザーにWebサイトやアプリで実際に見える画面を体験してもらい、使い勝手についてフィードバックを得るテストです。リアルなフィードバックにより、製品やサービスの開発段階やリリース後の継続的な改善に役立ちます。

‍

ターゲットとなるユーザーを分析する

自社の商品やサービスを「誰が」「何のために」利用しているのか、購買履歴や購買頻度などを把握することが大切です。先述した「ペルソナ」を設定するとユーザーの分析に活かせます。そして、実際に「ペルソナ」に合致するユーザーに様々なテストを実施してもらうことで、ターゲットの顧客が抱える問題や課題、解決したいニーズや欲求などについてさらに詳しく把握することができます。

‍

競合他社のサービスを分析する

市場における競合状況やポジショニング、競合他社の強みや弱点を理解するために競合分析は必要です。市場における競争状況や自社のポジショニングを把握し、強みや弱みを理解することにより、競合優位性を確保するための適切な戦略を策定することができます。また、自社にはない学びも得られるため、新しい視点やサービス改良に大いに役立ちます。

‍

目標（ゴール）を具体的に設定する

ゴール設定は、製品やサービスの設計・開発プロセスで重要なステップです。UX・UIそれぞれのゴール設定をすればユーザーのニーズや期待に合った製品やサービスを提供し、ユーザーが良い体験を得られるようなデザイン構築に繋がります。

‍

データで定量的に測定する

達成したいゴール設定を基に、様々なユーザーデータを活用して、ビジネスや組織の成長や競争力強化に繋げることができます。適切なデータの収集、分析、活用を行うことで、より効果的な意思決定やサービス提供へ繋げられるので、定期的な効果測定が重要です。

‍

検証（PDCA）を何度も行う

一度設定したゴールや設計もその時々に合った定期的な見直しが必要です。ユーザビリティテストの結果や分析の結果からPDCAサイクルを利用し継続的な改善を促進し、業務プロセスやプロジェクトの効率性や品質を向上させましょう。定期的にPDCAサイクルを実施することで、組織や個人の成果を最適化することができます。

‍

UXの重要性

スマホやタブレットなどデバイスの多様化

スマートフォンやタブレットの普及により、モバイルユーザーの割合が増加しており、ユーザーは移動中や外出先でもデバイスを使用し、いつでも製品やサービスにアクセスする事ができます。さらにデバイスの多様化が進む現代において、UXの重要性はますます高まっています。UXデザインは、マルチチャネルでの一貫した体験を提供することで、ユーザーの利便性と満足度を向上させるので重要です。

‍

サービスや商品の付加価値で差別化

現代ではユーザーが同じような製品やサービスを提供する複数の企業から選択することができます。ユーザーが同じ価格帯の競合製品と比較して、より多くの価値を感じることができるようにするためには他社との差別化が必要不可欠です。例えばECサイトであればサイト自体の使いやすさや他サイトにはない機能、実店舗であれば接客や店内の雰囲気が心地良いことなどが付加価値となるでしょう。現代の市場において商品やサービスを売るためには、ただ良いものを作るだけでなく、ポジティブなユーザー体験という付加価値が重要となってきています。

‍

ロイヤルカスタマーをいかに獲得できるか

ロイヤルカスタマーとは、特定の企業やブランドに非常に忠実であり、継続的にその企業やブランドの商品やサービスを購入するユーザーのことを指します。これらのユーザーは、企業やブランドに対して高い忠誠心を持ち、頻繁にリピート購買を行うため、企業にとって非常に価値の高いユーザー層です。彼らは一般に、企業の新商品やサービスを受け入れやすく、口コミや推薦を通じて他のユーザー層にも影響を与えることがあります。ロイヤルカスタマーを獲得することで、企業は安定した収益を確保し、競合他社よりも強いポジショニングを築くことができます。そのため、ユーザーとの関係を維持し、顧客満足度を高めるための戦略を継続的に実施することが重要です。

‍

IOTの進化

「IoT」とは”Internet of Things”の略でインターネットに接続されたさまざまな種類のデバイスや物体が相互に通信し、情報を交換する技術のことを指します。家電製品、車両、センサー、工場機器などのデバイスが、インターネット経由でデータを収集し、分析し、企業へフィードバックされます。ユーザーと企業が繋がりやすくなったことで、ユーザーが企業と接点を持ちたいと感じるUXデザインを生みだせるかが重要になってきています。

‍

UX改善のメリット

ユーザーのストレス軽減と離脱率を低下できる

ユーザーが購買プロセス中にWebサイトを離脱する要因の1つは、「サイト閲覧中にストレスを感じた」ということです。たとえWebページに期待していた情報が掲載されていても、ページの崩れや読みづらい文字、スマートフォン非対応、読み込み速度の遅さ、または商品説明のわかりにくさなどの問題がある場合、ユーザーはストレスを感じ、その結果ページを離れる可能性が高まります。

UXの改善をすることにより、ユーザーのストレスを解消し、離脱率を下げられるため、製品やサービスの成功に不可欠です。

‍

リピート率が増加し、LTVが向上する

UXの向上により、ユーザーは快適な購買体験を享受し、その結果、さらなる継続利用や購入が期待されます。これにより顧客生涯価値（LTV）が向上し、売上に貢献することができます。

現代では、市場には多様な製品やサービスが提供されています。ユーザーはその中から特定の製品を選び利用しますが、UXが不十分であれば、一度きりの利用で他社の製品やサービスに移行してしまう恐れがあります。

ユーザーにとって快適なサービスを提供することで、「継続利用を希望する」「他の商品やサービスも試してみたい」という意欲を喚起し、その結果、リピート率の向上や顧客生涯価値の増加につながる可能性があります。　

‍

口コミによる認知拡大

製品やサービスのUXを改善する際には、提供段階だけでなく、ユーザーが利用する場面や利用後の体験にも注意を払うことが重要です。

たとえば、オンラインで商品を注文した際に、ブランドや商品のイメージにぴったりな美しい装飾が施されていたり、感動的なメッセージカードが同封されていたりすると、ユーザーはSNSに投稿したくなることがあります。

このようなUXが口コミを生み出し、より多くのユーザーを引き付けるきっかけになることもあります。

‍

UXの成功事例

Amazon

Amazonは、世界最大のオンラインショッピングサイトで、優れたUXを提供することで知られており、その成功例は数多くあります。

1-Click注文や購入履歴の活用など、購入プロセスを非常にシンプルにすることで、シームレスな購買体験や顧客の過去の購買履歴や閲覧履歴に基づいてパーソナライズされた商品の推薦を行う機能があり、ユーザーは自分の興味や好みに合った商品を見つけやすくなり、購買意欲が高まります。

また、Prime会員向けの迅速な配送サービスや、柔軟な配送オプションを提供しています。ユーザーはより便利に商品を受け取ることができます。

これらがAmazonが優れたユーザーエクスペリエンスを提供し続けている要因の１つです。

‍

Netflix

Netflixは、映画やドラマ、アニメといったオンデマンドサービスです。UX成功例は数多くあります。

視聴履歴や好みに基づいてパーソナライズされたコンテンツの推薦を行い、ユーザーが視聴している番組や映画に応じて、類似したコンテンツを提案することで、ユーザーが興味を持つ作品を見つけやすくなります。

そして、Netflixの強みは独自のオリジナルコンテンツを積極的に制作・配信していることです。ユーザーは他のプラットフォームでは見られない独占的なコンテンツにアクセスできるだけでなく、Netflixの独自性や魅力が高まり視聴継続を促進しています。

これらの要素により世界で最も理想的なUXデザインを提供している企業の1つです。

‍

スターバックス

カフェ業界屈指の優れたUXを提供する企業の一つです。ユーザー視点のアプローチや、持続的な改善の取り組みにより高い支持を得ています。

スターバックスと言えば、ユーザーが自分の好みに合わせてカスタマイズ可能な注文を行えるようにしています。その種類が豊富で自分オリジナルドリンクを頼めることがUXを高める一つです。

また、最近ではモバイル注文により店舗に到着するとすぐに受け取ることができるシステムがあり、待ち時間を短縮し、スムーズな注文・支払いプロセスを提供しています。

スターバックスのリワードプログラムは、ユーザーが購入した商品に応じてポイントを獲得し、無料の商品や特典を獲得できる仕組みです。これにより、ユーザーはスターバックスでの購買意欲が促進されます。

ユーザーの興味や意欲を常に維持し続ける人気企業の成功例をぜひご参考にしてみて下さい。

‍

Slack

Slackはビジネスコミュニケーションツールです。

Slackのアプリやウェブプラットフォームは、使いやすく、チャンネルの作成やメッセージの送信、添付ファイルの共有など、ビジネスコミュニケーションに必要な機能が分かりやすく、新しいユーザーでも迅速に操作することができます。

また、メッセージの検索機能やチャンネルの整理機能など、情報を効率的に管理するためのツールも充実しています。豊富な統合機能を提供しており、他のツールやアプリケーションとの連携が容易です。これにより、ユーザーはSlack内で作業を行いながら、他のツールやサービスをシームレスに利用することができます。

最後に、Slackは使いやすさだけでなく、コミュニケーションの質や効率性も向上させることができます。グループチャットやスレッド機能、リアクションなど、コミュニケーションの円滑化や意思疎通の改善を支援する機能が豊富に用意されています。これらの要素が合わさって、Slackは優れたユーザーエクスペリエンスを提供し、多くのユーザーに愛用されています。

‍

Spotify

Spotifyはストリーミング音楽サービスです。

まず第一に、ユーザーの音楽の嗜好や再生履歴に基づいて、パーソナライズされたプレイリストやレコメンドが簡単に見つかります。これにより、ユーザーは自分の好みに合った新しい音楽を見つけやすくなり、音楽の探索や発見が促進されます。

次に、アプリやプレイヤーは、使いやすく、再生リストの作成、曲の検索、アルバムの閲覧など、音楽を探索し再生するための機能が使いやすく配置されています。

また、プレミアム会員に対してはオフライン再生機能を提供しており、インターネット接続がない場所でも音楽を楽しむことができます。

そして、複数のデバイス間での音楽再生をシームレスに行うことができます。ユーザーは様々なデバイスで同じアカウントにログインし、自分のプレイリストやライブラリにアクセスできます。

どの機能も普段アプリを使う上で、とても使いやすく楽しめるので、優れたUXで顧客の心を掴んでいるのが納得できます。

‍

クックパッド

クックパッドは日本最大の料理レシピプラットフォームです。

特徴は料理レシピの検索や共有を容易にする直感的なプラットフォームデザインにあります。サイト上では、ユーザーが特定の料理や食材を検索する際に、カテゴリーやキーワードを用いたスマートな検索機能が提供されています。これにより、ユーザーは簡単に興味のあるレシピを見つけることができます。また、ユーザーが自分の好みやニーズに合ったレシピを見つけるためのフィルタリングオプションも豊富に用意されています。

さらに、ユーザー同士がレシピを共有し、評価し合うサービスがあります。他のユーザーと情報交換を行うことで、コミュニティの活性化やユーザーエンゲージメントの向上を図っています。このような優れたUXデザインによって他の料理アプリとしっかりと差別化を図っており、現在、日本国内で約630万人がクックパッドを利用しており、料理系アプリの中でダントツの人気を誇っています。

‍

まとめ

各業界において、競争がますます激化していく中で、ユーザーは多くの選択肢の中から最適な体験を求めており、技術の進化やデジタル化の進展により、ユーザーの期待はますます高まっています。ユーザーに選ばれるためには優れたUXを提供することで競合他社と差別化する必要があります。

UXは企業やサービスの成功において不可欠な要素であり、今後ますます重要性が高まるでしょう。ユーザー視点のアプローチやデザイン、新たなテクノロジーの活用などが、優れたUXを実現するための鍵となります。

‍

webflowでは、画像をアップロードすると自動で複数の大きさの画像を生成するResponsive imagesという機能があります。

画像サイズはウェブサイトのスピードとパフォーマンスに直結するので、webflowの重要な機能の一つといえると思います。

今回はこのResponsive imagesの使い方について解説していきます。

Responsive imagesとは

Responsive imagesはwebflowが指定する要件にあった画像をアップロードすると、デバイスのサイズと解像度に適した画像を自動で表示してくれる機能です。

webflowでは、画像をサイトにアップロードすると以下の7つ画像を自動的に生成します。

• 3200px
• 2600px
• 2000px
• 1600px
• 1080px
• 800px
• 500px

生成された各サイズの画像は制作者側で使い分ける必要はなく、デバイスのサイズと解像度によって自動的に表示を切り替えてくれます。

（内部的には<img>要素にsrcset 属性とsizes属性が自動で追加されているようです）

Responsive imagesの使い方

Responsive imagesを使うためには

1. アップロードする画像が要件を満たしていること
2. Responsive images機能が有効化されていること

を満たす必要があります。

画像の要件

アップロードする画像の要件です。

1. 3200px以上の画像サイズであること(元の画像より小さい画像しか生成しない)
2. 4MB未満の容量であること
3. JPG/PNG/WebPいずれかであること

Responsive images有効化

Responsive imagesはデフォルトで有効化されていますが、念のため有効化されているか確認しましょう。

Designer画面から画像を選択し、画面右側のタブのDisable responsivenessにチェックが入っていないことを確認します。チェックが入っていなければResponsive images機能は有効化されています。

サイト全体の画像のスキャン

サイト全体でレスポンシブな画像が設定されているか確認したい場合は、Command + Shift + I (Mac の場合) またはControl + Shift + I (Windows の場合) で確認することが出来ます。

サイトのリリース前に一度実行しておくとよいかもしれませんね。

注意点

リッチ テキスト要素に追加した画像はResponsive imagesの対象外の様です。

This feature generates responsive variants for all inline JPGs, PNGs, and WebP images, except those added via rich text elements.

そのため、ブログやニュースを投稿する際に画像を使用する場合は自身で最適指し手からアップロードしたほうがよさそうです。

参考

https://university.webflow.com/lesson/responsive-images?topics=layout-design

https://webflow.com/blog/new-feature-responsive-images

ホームページを運営しているにもかかわらず、なかなか集客が上手くいかないことはよくある課題です。その背後には様々な原因が潜んでいます。

例えば、「SEO対策ができていない」「ホームページの構造が複雑になっている」「更新や運用の仕方がわからない」「U I/UXに対応できていない」などが考えられることでしょう。

この記事では、ホームページで集客が上手くいかない原因と、即座に実施できる「SEO対策」という基礎的な内容について紹介していきます。

‍

ホームページで集客できない原因のよくある事例

1. ホームページで「誰」を集客したいのかターゲットが決まっていない　

‍

＜悪い例＞

・商品的に女性向けだから女性が好みそうなデザインにしよう

‍

＜良い例＞

・過去の商品購入者のデータを参考にして20代後半〜30代前半の既婚女性をターゲットにしよう

‍

ホームページの成功は、まず最初にターゲットを明確に把握することから始まります。

‍

しかし、ホームページで集客が上手くいかない多くの場合は「誰を集客したいのか」を決めていないため、ユーザーに対して効果的なアプローチが不足していることがあります。

具体的なターゲットが設定されずに作成されたホームページは、提供する情報が漠然とし、全体的に統一性がなくなります。

‍

また、特定のターゲットにフォーカスしていない為、ユーザーの求める適切なコンテンツを提供することが難しく、その結果ユーザーがホームページを離れ、集客が出来ない原因に繋がります。

例えば「既存顧客」や「見込み顧客」では求める情報やアプローチは異なるため、それに合わせたコンテンツやデザインを最適化することで、ユーザーに対して魅力的なサイトを提供することができます。

‍

2. ホームページの更新や運用をしていない　

‍

ホームページの運営では、定期的な情報発信と継続的なアップデートが不可欠です。

新商品やサービスの情報を適切なタイミングで提供しないままホームページを放置するといくつかのデメリットが生じます。

‍

更新が滞るとユーザーに会社への不安を抱かせ、信頼性が低下し企業のブランドイメージにも悪印象を与える可能性があります。

検索エンジンの視点から見ても、更新のないホームページは評価が下がります。

検索エンジンはユーザーに価値のある情報を提供することを重視しており、情報が古いホームページは低い評価を受けます。その結果、検索順位が下がり、新規訪問者を獲得することが難しくなり、リピーターも離れ、貴重な顧客を失う結果につながります。

‍

また、競合他社が適切にホームページを更新している場合、ユーザーが他社に流れるリスクもあります。

ホームページの目的は集客やブランドイメージ向上、販売促進であるはずですが、数ヶ月間更新されないまま放置すると、逆にこれらの目標に反する影響を与えることになります。

‍

3. 競合他社がどのようにホームページで集客しているのか調査していない　

‍

ユーザーは複数のホームページを見て検討し、顧客の解決したい問題を解決してくれる商品・サービスを購入するのが一般的です。

そのため、競合他社が何を売りにしているのか調査を行い、自社サービスの差別化ポイントや、訴求したい内容を明確にしないとサイトまで訪れた顧客にサービスの良さが上手く伝わらず、離脱に繋がってしまいます。

‍

また、競合他社がどういった集客を行なっているかも分析することで自社の集客に何が足りていないのかを把握することができます。

つまり、競合他社を分析することでサービスの訴求力を上げるだけでなく、今後どういった集客に力を入れるべきなのかといった戦略も立てられるようになるのです。

‍

4. ホームページのSEO対策ができていない　

SEO（検索エンジン最適化）対策とは狙ったキーワードで検索結果の上位に表示されるように、ホームページのコンテンツを調整したり被リンクの獲得などを行う施策のことです。

この施策が不十分だと、検索エンジンで上位に表示されにくくなり、ホームページのアクセス数も減りホームページへの信頼が低下してしまう可能性があります。

ユーザーに有益なページと判断されるためには、ホームページの見た目だけでなくコンテンツの質が重要です。

‍

その為にはターゲットとなるユーザーがどんなキーワードで検索しているのかを調査し、ユーザーが求める情報に対応したキーワードの選定などが重要なポイントになります。

また、広告と比較してもSEO対策を行って上位表示された場合、表示やクリックごとの費用がかからないのが大きなメリットでもあります。

‍

5. コンテンツ発信（情報発信）ができていない　

‍

ホームページのコンテンツは、企業が提供する情報の骨組みであり、商品やサービスの詳細、実績など他社との比較素材として重要です。

コンテンツが不足すると、ユーザーが求める情報が不足し、興味を引くことが難しくなります。他社が豊富な情報を提供している中で、自社のホームページがコンテンツ不足だとユーザーは他のサイトに移動する可能性が高まり結果として、ユーザーはページを離れる可能性が高まります。

また、コンテンツが不足すると検索エンジンでの評価が低くなり、検索順位が下がってしまう可能性があります。

目的に応じて多様なコンテンツを発信し、ユーザーの悩みや課題に対する有益な情報を提供していくことで、広い層に対して関心を引き、信頼関係を深めつつ知名度を高めていくことが可能です。

‍

6. ホームページを訪れたユーザーのアクセス解析を行っていない　

‍

アクセス解析とは、ホームページへ訪れたユーザーが「どのような時間帯・環境でアクセスしているのか」「どのコンテンツが人気で、逆に見られていないのか」「ユーザーがどのページでホームページを離脱したか」などを分析することです。

アクセス解析を行わないと、ホームページの訪問者数や人気コンテンツ、離脱ページの特定などの把握が難しく、ホームページの改善ポイントが見つけられません。

‍

また、アクセス解析を効果的に活用するためには、単なる数字の把握だけでなく、コンバージョン数を増やすための具体的な課題と改善策を見つける意識が重要です。ホームページ上でのユーザー行動をチェックしデータを分析し、正確に把握して改善に繋げていくことが理想的です。

‍

‍

そもそもホームページの目的とは？

ホームページ＝会社の名刺　

ホームページはインターネット上での企業の顔であり自社の名刺代わりです。

ホームページでは、会社の概要、コンセプト、実績、事業内容などを提供し、信頼性を高めるために非常に重要な存在です。

ホームページを通じて、企業の雰囲気や特長を伝えることができ、基本情報を正確で信頼性の高いものとして発信することで、企業の信頼構築において重要な役割を果たしています。

‍

会社のことを知ってもらう＝認知度の向上　

新商品や新サービスがリリースされ、まだ広く知られていない場合や、既存の製品やサービスをより広く知ってもらいたい場合、認知度向上が不可欠です。

ホームページの運用は多くの人に企業の存在を知ってもらう効果的な手段となります。その他にもソーシャルメディアやSNS等を活用して情報発信を行うことで、会社の認知度が向上し信頼を獲得しやすくなります。

ホームページから問い合わせの獲得＝集客を増やす　

ホームページからの問い合わせは、会社の売り上げを伸ばすのに大切な役割を果たします。

ホームページを訪れたユーザーが商品やサービスに興味を持って、問い合わせフォームや連絡先を使って連絡してくれることで、必要な情報やサービスを提供することができます。

ユーザーが商品を買いたくなるような気持ちを強め、結果として売上につながります。

‍

そのため、ホームページ上の問い合わせフォームを使いやすくしたり、見つけやすい場所に置いたりすることが大切です。また、問い合わせにすぐに対応できるよう社内体制も準備しておくことも、成功の秘訣です。

‍

‍

ホームページで集客する具体的な手順

自社の商材や強みを理解して「誰」を集客したいのかターゲットを明確にする

関連部署の社員と話し合いをして社内で共通認識を持たせる　

ホームページ集客、誰に向けたホームページなのかという方向性などを関連部署の社員に共通認識を持たせる事で以下のメリットがあります。

・統一されたビジョンやメッセージの確立

これにより一貫性のある情報提供が可能となり、効果的なコンテンツ戦略が構築できます。

・専門知識を活用

関連部署の専門知識を信頼性の高い情報をホームページに組み込み、ユーザーエクスペリエンスを向上させます。

・問題や課題を早期に発見

方向性が共通認識としてあれば、プロジェクトの優先順位が明確になり、問題が起きた時も迅速な対応が可能となります。

‍

年齢や性別だけでなくペルソナを意識して設定する　

ペルソナの詳細な設定は、企業がユーザーのニーズを正確に把握し、それに基づいた商品やサービスを提供する上で不可欠です。

年代や性別など最低限の情報のみのターゲットをさらに深掘りし詳しい項目設定で行うペルソナの設定は、プロジェクト関係者の共通認識を促進し、方向性を統一する効果があります。

‍

また、より具体的なペルソナを設定することで、ターゲットが明確になり商品の訴求力が向上し、効果的な施策に集中できるため、コスト削減にも寄与します。

総じて、ホームページで集客を行う上でペルソナの設定は他者との差別化につながります。

‍

できるだけターゲットは少数に絞り込む　

ターゲット設定を行う際、しばしば陥るのが「できる限り多くのユーザーの目に触れさせたい」という思いから、広範囲にわたるターゲット群を設定してしまうことです。

しかし、ターゲットを増やすほどに、「このホームページは具体的に誰を対象としているのか」という核心がぼやけてしまい、設定したターゲットが本来の目的を果たさなくなる傾向にあります。

この問題を解決するために、ターゲットは１〜３つに絞り込むようにしましょう。

そして、それらを「メインターゲット」「サブターゲット」と明確に階層化し、ホームページが誰に最も価値を提供するかを明確にすることが重要です。

‍

競合他社がどのようにホームページで集客しているか調査する

自社で足りていないコンテンツ（情報）が何か把握する　

競合他社のコンテンツを分析し、自社のコンテンツと比較をする事で自社には「どのようなコンテンツが足りていないのか」「どのようなコンテンツがあればユーザーに喜ばれるのか」を把握する事ができます。

例えば、競合他社のホームページでFAQのコンテンツを設けているのに対し、自社ではユーザーへの一方的な発信しかしていないなど、自身では気づけなかったコンテンツを見つけ取り入れていく事ができます。

また、競合他社の商品やサービスの特徴を把握することで、「自社の商品・サービスが顧客の課題解決にどれだけ寄与するか」「他社との異なる差別化ポイントは何か」をなど自社のサイトで強調すべき特徴や魅力、伝えるべき情報を見つけ出す事ができます。

‍

競合他社のマーケティング手法を把握する　

競合他社を調査する事でどのような施策がコンバーション（成果）に繋がりやすいのかを確認する事ができます。

まずコンテンツの形式や種類を把握し、ブログ記事、動画、インフォグラフィックなど、どの形式がコンバージョン率を上げるために効果的かを探っていきましょう。

例えば、競合他社がブログ記事を活用している場合、どのテーマやスタイルがユーザーの興味を引きつけているかを分析します。

競合他社のブログが特定のトピックに絞っている場合、同様のトピックを自社のブログに組み込むことで、共通のターゲット層へアプローチがしやすくなります。

また、どのようなキーワードを狙っているかなど、競合他社のSEO対策を分析する事で、検索エンジン上でどれだけアクセスを獲得できているのか把握することがでます。

‍

競合他社のターゲットを把握する　

様々な集客に関する施策を行いターゲット層を少数に絞り込んでいるにもかかわらず集客が得られない場合、予め想定されたターゲットと実際にホームページを訪れるユーザーにズレがある可能性があります。

‍

その解決策として競合サイトを調査し、競合他社のホームページで、コンテンツやメッセージなどをどの層にアピールしているかを探り、どのようなターゲット層を惹きつけているかを調べ、正しいターゲット層についてもう一度見直していきましょう。

‍

競合他社を調査する方法

おおよそのページ数は「site:」で検索する　

競合他社のホームページや自社のホームページがGoogleに認識されているページ数を確認できる方法を紹介します。

この情報から競合他社のSEO対策や自社ホームページとの差分を把握し、ページ数が足りていないのか、もしくはページごとのタイトルや説明文のつけ方が間違っているのか確認することができます。

手順は「Google検索」で、「site:」の後に調査対象のホームページのトップページのURLを入力するだけです。

ただし、この方法はあくまでページ数の概算であり、信頼性には限りがあるため、大まかな目安として活用するようにしましょう。

‍

被リンクの数は無料や有料のツールを使って調べる　

‍

被リンク数は他のホームページからリンクが張られている数を示し、これの数値が大きいほど、評価の高いホームページとして上位表示されやすい傾向があります

。

被リンク数をチェックする方法は「hanasakigani」と呼ばれる無料ツールを利用すると簡単にチェックすることができます。

‍

アクセス解析は無料や有料のツールを使う　

アクセス解析の方法の一つとして、Similarwebを利用することが挙げられます。 

Similarwebには無料版と有料版の2つの料金形態があり、その違いは同時ログイン可能ユーザー数、分析件数、使える機能数などが異なります。

このツールは多くのマーケターに支持されており、アカウントを登録し、対象となるWebサイトのURLを入力するだけで、直感的で理解しやすい解析結果を得ることができます。 

また無料版では登録不要で競合サイトのアクセス解析が手軽に行えます。 

まず最初は無料版を活用し、精度の高い分析が必要になったら有料版を活用するというようにフェーズで使い分けることも効果的です。

‍

問い合わせに繋がる検索キーワードを選定する

軸となるメインキーワードを決める　

‍

まず最初にコンテンツの軸となるメインキーワードを決めましょう。メインキーワードとはコンテンツの主題や中心のテーマになる重要なキーワードです。

これを決めることで、作成すべきコンテンツの方向性が決まります。

メインキーワードは検索エンジン最適化（SEO）の観点からも重要で、特定のページやキーワードに対して検索結果で上位に表示されるように努める際に使用されます。

メインキーワードの選定には、検索ボリュームがある程度あり、かつ競争が激しくないキーワードを選ぶことが一般的です。

これにより、特定のキーワードでの上位表示がより実現しやすくなります。

‍

メインキーワードから膨らませていく　

メインキーワードを決定したら、次にそのキーワードを中心に関連する他のキーワードを膨らませていく必要があります。

その方法として、サジェストキーワードの活用（検索候補）、関連キーワードの調査、サイトの流入キーワードの分析などが挙げられます。

また、SNS上の投稿やコメント、顧客の口コミなどを調査しどのような言葉やフレーズが使われているかを調べ、ユーザーが実際に検索しそうなキーワードを拾い上げ、幅を拡げていきましょう。

‍

検索ボリュームや上位のホームページをチェックする　

キーワードの選定が進んだら検索ボリュームの確認が不可欠です。

この際、Googleキーワードプランナーなどのツールを使用して、キーワードの検索ボリュームを調査します。

ただし、ボリュームが多い場合は競合が激しく、少ない場合は競合は少ないが上位表示してもアクセスがほとんどないなどのバランスを考慮する必要があります。

次に、選定したキーワードの上位表示している競合他社の調査が必要です。

選定したキーワードで実際に検索を行い、上位表示されている競合サイトを調査します。競合サイトが満たしているニーズやポイントを確認し、これらを自社サイトに取り入れることが望ましいです。

‍

選定したキーワードでコンテンツを作成する

検索するユーザーのニーズを理解する　

質の高い記事は、検索ユーザーのニーズを正確に理解し、その要望や欲求に適した情報を提供することが不可欠です。

ユーザーが検索エンジンに入力するキーワードやフレーズを分析し、ユーザーが持つ様々なニーズを洗い出します。

特に重要なニーズは、最大でも3つ程度に絞り込み、どの情報をどの順番で提供すれば良いかを考え続けながら記事の内容を検討していきましょう。

‍

上位表示している競合他社の記事を調査する　

競合他社のキーワード戦略や提供している情報の種類を理解することで、同じ分野で有力なキーワードを見つけ、自社のコンテンツに組み込むことが可能です。

調査対象の競合サイトがどのようにSEOを最適化しているかも重要です。これにより、検索エンジンにとって有益な要因や戦略を学び、自社のサイトもSEOを向上させ、上位表示させることでアクセス数を獲得しやすくなります。

また、競合サイトの強みや弱みも把握することが重要です。自社のコンテンツで差別化し、競合相手との差を明確にすることが競争力の向上につながります。

これにより、ユーザーにより価値あるコンテンツを提供できるようになります。

‍

記事の構成案を作成する　

まず構成案を考え、大見出しや中身出しといった見出しを作成することで記事の情報が整理され、読者が理解しやすくなります。

読者の視点から何をどんな順番で伝えるかを考え、記事タイトルから導入文、本文、そしてまとめまでの流れを構成することにより全体像を把握し、ライティングをスムーズに進めることができます。

また、構成案を作成することで記事の焦点が明確になり、トピックに焦点を当て読者にとって最も重要な情報を提供することができます。

‍

記事の本文を執筆（ライティング）する　

構成案が完成したら、次は構成案に沿って本文を書いていきましょう。文章の長さは適切に保ち、冗長さや不足を避けることが大切で、適切な文字数と構成に心を配ります。記事の冒頭では読者の関心を引く導入を工夫し、本文のまとめで要点を再強調して理解と印象の定着を促進します。最後に、SEOを考慮して選定したキーワードを文章に自然に組み込む事で読者に有益で魅力的なコンテンツを提供することが可能です。

また、「である調」や「ですます調」が統一されていなかったり、誤字脱字がある場合文章の品質を低下させてしまう為必ず時間をかけて見直しをしましょう。

‍

ツールを用いてアクセス解析を行う

ホームページのアクセス数やCV数などの数値を把握する　

ツールでホームページ全体のアクセス数やCV数を把握する際に、月別・週別・日別の期間単位で把握する事がポイントになります。

次にページごとの数値を把握することで、そのデータを元にどのコンテンツやページが人気かどうかを把握できます。これにより、効果的なコンテンツ戦略を立案し、人気のあるコンテンツを強化することが可能です。

どのキャンペーンや手段が成果を上げているかを分析し、予算やリソースを効果的に配分することもできます。

またサイト全体のアクセス数やCV数を分析することで、具体的なページへの流入や離脱点、コンバージョンまでの経路などが分かるため、ユーザーのニーズに適した改善策を検討できます。

‍

ホームページに訪れているユーザーを把握する　

アクセス解析を行いホームページに訪れているユーザーの性別や年齢、ユーザーがどの経路を通じてホームページにアクセスしているのかを把握します。

検索エンジンから来たのか、広告を経由して来たのか、特定のウェブサイトやソーシャルメディアから来たのかなどのチャネルを知ることで集客に関する効果的な施策を検討しやすくなります。

また、デバイスごとのコンバージョン率も見逃せません。

PCとスマートフォンなど異なるデバイスでの比較分析を行い、例えばスマートフォンからのコンバージョン率が低い場合、スマートフォン向けの改善策を検討していく必要があります。

‍

ページごとの数値を把握する　

ページ別のアクセス数やコンバージョンを調査することは、各ページの特性や改善のポイントを把握するために重要です。

ランディングページやアクセスが多いページなどの特性を確認し、行動フローを分析してユーザーの移動パターンを探ります。

特に、改善が期待できるページから分析を始めることが効果的であり、例えば最初に訪れるランディングページやコンバージョン前のフォーム入力ページを重点的に検証します。

訪問数や滞在時間のデータを基に、効果的なコンテンツを見極め、人気のないページや高い離脱率のページを特定し、改善していきましょう。

同時に、ページごとのコンバージョン率の分析を通じて、ユーザーアクションが少ないページを特定し、コンバージョンの向上に向け戦略を立てていきます。

‍

アクセス解析で使える無料ツール

Google Analytics　

Google アナリティクス（Google Analytics）は、Googleが提供する無料のウェブ解析サービスです。

このツールを使用することで、幅広いデータの計測や解析やウェブサイトやモバイルアプリケーションのトラフィックやユーザー行動に関する詳細なデータを収集・分析することが可能です。

例えばホームページにどのような人が訪れているのかや、ホームページ内でどのページを見ているのかといったといった属性データや行動データを見る事ができます。

サイトにアクセスしたユーザーの動きを解析するアクセス解析ツールであり、Google Search Consoleとの違いはユーザーがサイトを閲覧した後のデータを取得・分析をします。

‍

Google Search Console

Google Search Consoleは、Googleが提供する無料のウェブ解析サービスです。

検索順位はもちろん、他にも表示回数、クリック数、クリック率、検索クエリなどが提供され、特定のページやキーワードがサイトにどれだけのトラフィックをもたらしているかを確認することができます。

Google Analyticsとの違いは、ユーザーがサイトを閲覧する前のデータを分析することができます。

‍

User Heat　

User Heatは、株式会社ユーザーローカルが提供するヒートマップツールです。

このツールは特定のウェブページ内でのユーザーの活動を視覚的に示すため、マウスムーブ、クリック、熟読エリア、終了エリア、離脱エリアなど 5種類のヒートマップを使用し色や図形で可視化します。

User Heatを使用することで、クリックされていないボタンや読まれていない箇所を把握し、コンテンツの改善などに役立てることが可能です。

月間30万PVまで計測可能であり、PCおよびスマートフォンのユーザーの動きを確認できます。

無料版から利用可能であり、有料版では通常のアクセス解析とヒートマップ解析に加え、Webサイトの勉強会などのサービスが提供され、より高度なUI/UX改善が可能です。 

‍

日々順位状況を把握する

順位状況を把握する重要性　

SEOの世界は絶えず変化しており、日々の検索順位の計測は必ず行うようにしましょう。

日々の変動に過度に囚われないよう注意しつつ、大まかなトレンドやランキングの変動を把握しておく事で急激な順位変動があった場合でも、素早く原因を見極め対策を検討することが可能です。

この継続的な活動により、SEOの成果を最大限に引き出すことが可能となり、ホームページからの集客が期待できます。

検索キーワードの順位について　

検索キーワードの順位とは、Googleをはじめとする検索エンジンにおいて、検索したキーワードで表示されるWebサイトの品質に点数をつけてランキング付けされた順位のことです。

検索順位によってクリック数やアクセス数が大きく変動し、1位に近づく程ホームページ集客の加速につながります。

上位に近づく為にはコンテンツ作成時に狙ったキーワードで上位表示ができているかを確認し、上位にないコンテンツはリライトを行うなどコンテンツの質を高める工夫が必要です。

‍

Google Search Consoleで順位を把握する　

Google Search Consoleは、Googleが提供しているWebサイト解析ツールで、無料で利用することができます。

検索順位はもちろん、他にも表示回数、クリック数、クリック率、検索クエリなどが提供され、特定のページやキーワードがサイトにどれだけのトラフィックをもたらしているかも確認することができます。

これらの機能により、Google Search ConsoleはSEO戦略の策定と実行において欠かせないツールであり、サイトの可視性向上やパフォーマンス最適化に寄与します。

‍

まとめ

ご紹介した通りホームページでの集客が上手くいかない原因は様々ですが、まずは効果的なSEO対策や良質な充実したコンテンツなどの提供こそがホームページの評価に繋がる近道になります。

ホームページはただ作成するだけでなく育てていくことが重要です。

ホームページの定期的な更新や日々の検索順位の監視、定期的なアクセス数やCV数の把握、分析、改善などの継続的な活動が成功の鍵となります。

これらの対策を実施することで、ユーザーに対して魅力的で信頼性のあるサイトを提供し、集客の向上とコンバージョン率の向上を目指していきましょう。

‍

‍