記事一覧
Webflowは2024年7月15日よりサイトおよびワークスペースプランのアップデートを展開しました。
これにより、Webflowの高度な機能をさらに利用でき、サイトの使用状況メトリックの透明性が高まり、より柔軟な拡張方法も利用できるようになりました。
今回はWebflowの変更されたプランの詳細について紹介します。
プランでより高度なWebflow機能
過去数か月間、すべての有料サイトおよびワークスペースプランのカスタムコードの制限を50,000 文字に増やし、セキュリティ強化のためにすべてのサイトでHTTP Strict Transport Security (HSTS)を利用できるようにし、WebflowサイトのすべてのコレクションでCMSイメージをWebPファイルに変換して帯域幅の使用量を削減する機能を提供しました。
Starter&CMSプランは、CMSの制限が低すぎるという声が上がっていたようです。
そこで、Starter&CMSプランでは、コレクションあたり 60 フィールド、コレクションあたり 10 リファレンスに上限を引き上げました。
これにより、WebflowでCMSを拡張し続ける際に、柔軟性が高まり管理性が向上します。
さらに、Businessプランは静的ページ制限が150ページから300 ページへと倍増し、より大規模で複雑なサイトを構築できるようになりました。
つまりコンテンツの提供を拡大し、チームの行動を迅速化しWebflowでビジネスを拡大し続けることができるのです。
最後に、この夏の後半にはGrowth & Agencyプランはコンポーネントとバリアブルの共有可能なライブラリにアクセスできるようになり、ワークスペース内のすべてのサイトで大規模なブランドの一貫性を確保できるようになります。
* これは、2024 年 7 月 15 日以降に購入、アップグレード、またはダウングレードしたサイトプラン、および移行したサイトや制限を超えたサイトにのみ適用されます。
現時点では、既存の変更されていないサイトプランには適用されません。
使用状況ダッシュボードにアクセスして透明性を高める
Webflowのツールではアカウントの使用状況を把握できないというフィードバックもあったようです。
制限に近づいているかどうかが明確でなく、それが現在のアカウントにどのような影響を与えるかが分かりませんでした。
この問題を解決し、すべてのプランのすべての顧客に透明性を提供するために、現在の帯域幅制限に関する情報を提供する使用状況ダッシュボードが導入されました。
Site setting>Site usageより確認することができます。
プランの制限を更新、特にBusinessプランに柔軟性を向上
96% 以上の顧客が、新しく引き下げられた帯域幅制限内で快適に操作できるため、この変更は大多数の顧客に影響を与えないとされています。
現時点では、すべてのサイトプランでサイト訪問者の制限を撤廃しています。
これにより、制約を気にすることなく幅広いオーディエンスにリーチしやすくなります。
また、帯域幅制限を市場に合わせて調整されたため、Basic, CMS, Business プランの帯域幅制限を縮小しています。
制限に近づいている可能性のあるアカウントに対しては、価格設定にさらなる安心感を与えるためにサージ保護 を提供します。
これにより、一時的に帯域幅が広くなる月の間に追加料金が発生する可能性を抑えます。
Businessプランの柔軟性を高めるために、帯域幅またはCMS アイテムを増やすための2 つの新しい アドオンもリリースします。
これにより、Businessプランは、ビジネスの拡大に合わせて Webflow を拡張するためのより多くの段階的なオプションを利用できるようになります。
* これは、2024 年 7 月 15 日以降に購入、アップグレード、またはダウングレードしたサイトプラン、および移行したサイトや制限を超えたサイトにのみ適用されます。
現時点では、既存の変更されていないサイト プランには適用されません。
より良いWebflowを構築する
今年後半には、Webflowのシートとロールを利用者のニーズに合わせてマッピングする方法を再検討し、簡素化する予定のようです。
チーム全体をWebflowに統合して、ビジネスに合わせてコラボレーションし、拡張することがより簡単になるようにしたいと考えており、これは編集モードやコメントなどの新しいコラボレーション機能を継続的にリリースし、デザインの承認を効率化し、ドラッグアンドドロップ環境でランディングページを作成する機能を提供する今後の改善を発表する中で、特に重要です。
今後ともWebflowのアップデートに期待が寄せられます。新着情報が入り次第、コラムにてご紹介させていただき予定です。
乞うご期待ください。
.webp)
Webflowのサイトプランを使用すると、独自のカスタムドメインで Web上にサイトを公開できるようになります。
カスタムドメインに公開する各サイトには、独自のサイトプランが必要です。
サイトプランを使用すると、カスタムドメインを Webflow サイトにポイントしてWebflow でホストすることができます。
サイトプランの詳細とWebflowでホスティングする利点について、詳しくはこちらをご覧ください
重要
サイトプランは、ワークスペースプランとは別に請求されます。
ワークスペースプランではホスティングは提供されません。
ワークスペースプランの詳細については、こちらをご覧ください
サイトプランの選択方法
Site settings>Plansで、有料のサイトプランにアップグレードできます。
または、サイトに既にアクティブな有料のサイトプランがある場合は、そのプランをアップグレードまたはダウングレードできます。
サイトプランの課金設定を管理できるのはサイト管理者のみです。
サイトレベルのロールと権限の詳細については、こちらをご覧ください
重要
サイトプラン料金は、サイトが含まれるワークスペースに関連付けられたデフォルトの支払いカードを使用して請求されます。
Webflowのサイトプラン
サイトのニーズに応じて、選択するサイトプランが決まります。
以下は簡単な概要ですが、各プランとその関連機能の詳細については、料金ページのサイトプランセクションをご覧ください
または、サイトのPlansでさまざまなサイトプラン機能の詳細な比較表を表示することもできます。
- Site settings>Plansに移動します
- WebsiteまたはEcommerce siteを選択します
- plan optionsの下までスクロールします
Free Starter Site plan
サイトを作成すると、デフォルトで無料のStarter Site planから開始します。
Starter Site planでは
- サイトの月間訪問数が最大 1,000 件
- CMSアイテムが50 件
- 静的ページが 2 件許可
- .webflow.ioサブドメインでサイトを公開
上記の機能が付属しています。
このプランでは、CMS管理、フォームのカスタマイズ機能、eコマース機能をテストする機能も制限されています。
追加のページや機能 (eコマースのチェックアウト機能など) が必要な場合や、カスタムドメインでサイトをホストする機能が必要な場合は、有料のサイトプランにアップグレードする必要があります。
Basic Site plan
カスタムドメインでサイトをホストし、有料のサイトプランで提供される追加のページや機能にアクセスする必要がある場合は、Basic Site plansが適しています。
Basic Site plansは、CMSやeコマース機能を使用しないサイト専用です 。
将来的にCMSやeコマース機能を使用したい場合、いつでもプランをアップグレードできます。
CMS or Business Site plan
サイトでCMS機能を使用する場合、CMSまたはBusiness Site planのいずれかが必要になります。
Basic site planオプションは無効になります。
サイトでCMS機能が必要ない場合は、サイトからすべての CMS コンテンツとコンテンツ エディターを削除して、Basic Site planオプションを再度有効にすることができます。
Ecommerce Site plan
サイトでWebflowのネイティブeコマース機能を使用している場合は、チェックアウトを有効にするためにEcommerce planが必要です。
Site settings > Plans に移動し、Ecommerce siteタブをクリックしてEcommerce site planを選択します。
注記
eコマース機能を使用するサイトを作成したり、テンプレートを購入したりした場合、Ecommerce site planの使用に縛られることはありません。サイト用にCMS またはBusiness Site planをいつでも購入できますが、eコマースチェックアウトは無効になります。
Enterprise plan
ブランドに合わせたプランが必要な場合は、 Webflow Enterpriseプランについて問い合わせが必要です。
現在のサイトプランを確認する方法
Site settings >plansから任意のサイトのサイト プランを管理できます。
正しいサイトのプランにアクセスしていることを確認するには:
- ダッシュボードに移動
- サイトプランを管理するサイトを見つけます
- プラン名のリンクをクリックすると、そのサイトのプランが開きます
- タブをクリックしてeコマース以外のオプションを表示するか、commerce siteをクリックしてeコマースのオプションを表示します。
-
知っておくと良いこと
ワークスペースで正しいサイト設定が表示されていることを確認するには、 Site settings >plansでサイトの名前とサブドメインを確認します。
現在の有料サイトプランを確認するには、 Site settings > Billingに移動します。
有料サイトプランにまだアップグレードしていない場合は、無料のStarter Site planになります。
いかがでしたでしょうか。
作るサイトの目的に適したサイトプランを選択する際に参考になれば幸いです。
Webflowの要素変換機能を使用すると、ブロック要素、タイポグラフィ要素、インラインテキスト要素など、さまざまな要素タイプを最初から再構築することなくシームレスに変換することが可能です。
今回はそれぞれの要素を変換する方法をご紹介します。
ブロック要素を変換する方法
divブロック、コンテナー、グリッド、フレックスボックスなどのブロック要素は、キャンバス上のメニューまたはQuick findを使用して他のブロック要素に簡単に変換できます。
- キャンバス上で変換したいブロック要素を選択します
- 要素を右クリック
- Convert toにマウスを合わせる
- 利用可能な変換リストから希望するブロック要素タイプを選択します
あるいは、Quick findを使用してブロック要素を変換することもできます。
- Quick findを開くには、 Control + E (Windows) またはCommand + E (Mac)を押します。
- 「Convert to」に続けて、希望するブロック要素タイプの名前を入力します（例：「グリッドに変換」）
- Enterを押します
タイポグラフィ要素を変換する方法
見出し、段落、ブロック引用などのタイポグラフィ要素は、既存のコンテンツとスタイルを維持しながら他のタイポグラフィ要素に変換できます。
- キャンバス上で変換したいタイポグラフィ要素を選択します
- 要素を右クリック
- Convert toマウスを合わせる
- 利用可能な変換のリストから希望するタイポグラフィ要素タイプを選択します
ブロック要素の変換と同じ手順に従って、クイック検索機能を使用してタイポグラフィ要素を変換することもできます。
インラインテキスト要素を変換する方法
太字、斜体、スパンタグなどのインラインテキスト要素は、タイポグラフィ要素内の他のインラインテキスト要素に変換できます。
- 変換したいインラインテキスト要素を含むタイポグラフィ要素をダブルクリックします
- インラインテキスト要素を選択する
- 選択したインラインテキスト要素を右クリック
- Convert toにマウスを合わせる
- 利用可能な変換のリストから、希望するインラインテキスト要素タイプを選択します。
インライン テキスト要素に使用できる変換は、選択したテキストの現在の書式設定によって異なります。
たとえば、テキストがすでに太字タグで囲まれている場合、キャンバス上のメニューに太字オプションは表示されません。
デザインの一貫性を保ちながらワークフローを効率化しながら、Webflowで要素を変換するより簡単な方法でパフォーマンスを向上させましょう。
UX（ユーザーエクスペリエンス）とマーケティングは、似ているようでその違いがよくわからない、という方も多いのではないでしょうか。UXの視点をマーケティングに取り入れることで、顧客満足度を高め、ブランドの信頼性を向上させることが可能です。
本記事では、UXとマーケティングの関係性や違い、UXマーケティングの基礎知識から実践方法まで幅広く解説します。UXマーケティングの理解を深め、効果的な戦略立案の参考として、ぜひ最後までお読みください。
UX（ユーザーエクスペリエンス）とは？
UXの定義
UX（ユーザーエクスペリエンス）とは、ユーザーが製品やサービスを利用する際に得る、総合的な体験のことを指す言葉です。UXは単なる機能や外観だけでなく、ユーザーが製品やサービスを使用する前から使用後まで、すべての接点での体験を含みます。
UXと混同しやすい言葉にUI（ユーザーインターフェース）があります。UIとはユーザーがサービスに触れる接点のことです。そのため、UIもUXの一部であるといえるでしょう。
そのため、画像設計に限った場合の優れたUXとは、は、ユーザーが製品やサービスを直感的に操作でき、快適に利用できるよう設計されているのが特徴です。その結果、ユーザーの満足度を高め、製品やサービスへの愛着を生み出します。
例えば、UIベースのUXの例として、スマートフォンの良いUXについて見ていきましょう。
- 操作が簡単
- 画面が見やすい
- 反応速度が速い
- デザインが美しい
UXの定義には例のように、複数の要素が含まれます。まず、ユーザーが直感的に操作できるか、学びやすいか、エラーが少ないかといったユーザビリティ（使いやすさ）です。さまざまなユーザーが製品やサービスを利用できるかどうかも重視されます。
さらに、見た目や操作方法のデザインも大切です。これらは、ユーザーの体験を作り上げる大切な要素になります。ユーザーの感情も UXの一部です。製品やサービスを使って楽しいと感じるか、満足できるかは、そのブランドのファンになるかどうかに関わります。良い体験ができれば、また使いたくなったり、他人にすすめたくなったりします。逆に、悪い体験をすれば、使わなくなるかもしれません。
UXは常に改善し続けることが大切です。ユーザーの意見を聞いて、製品やサービスをより良くしていくことで、ユーザーの期待に応え続けられるでしょう。
UXが広まった背景
UXが広まった背景には、インターネットの普及とテクノロジーの進化が大きく影響しています。まず、インターネットとスマートフォンの普及により、消費者が情報やサービスにアクセスする機会が大幅に増えました。これにより、ウェブサイトやアプリの使いやすさが競争の重要な要素となり、企業はユーザーの満足度を高める必要性を強く感じるようになったのです。
SNSが幅広く利用されるようになり、ユーザーの声が拡散されやすくなったことも、UXへの注目度を高めました。ユーザーが商品やサービスへの意見をSNSで簡単に発信できるようになり、企業はユーザーの体験を向上させる必要性を強く感じるようになりました。
さらに、競争が激化する中で、差別化のための手段としてUXが重要視されるようになりました。単に商品やサービスを提供するだけではなく、ユーザーがその過程でどのような体験をするかが企業の成功に影響することが理解されるようになったのです。UXが顧客満足度とブランド評価に直結することが認識されるようになり、UXの重要性はますます高まっています。
UXとマーケティングの関係性
UXとマーケティングは密接に関連しており、両者を効果的に組み合わせることで、ビジネスの成功につながります。UXは顧客満足度を高め、ブランドへの信頼を築く上で重要な役割を果たします。
一方、マーケティングはUXの価値を顧客に伝え、製品やサービスの魅力を効果的に訴求します。良好なUXは口コミを生み、マーケティング効果を高めます。また、マーケティングリサーチで得た顧客インサイトは、UXの改善に活用できます。
例えば、ECサイトでは、使いやすいインターフェース（UX）と効果的なプロモーション（マーケティング）の組み合わせが、売上向上につながります。UXとマーケティングの相乗効果を意識することで、顧客中心のビジネス戦略を構築できます。
UXとマーケティングの違い
UXとマーケティングは別物なのか？
UXとマーケティングは、ともに顧客満足度の向上を目指すという点で共通していますが、着目点や手法には違いがあります。UXはおもに製品やサービスの使用体験に注目し、ユーザーの問題解決や満足度向上を直接的に目指します。
一方、マーケティングは、製品やサービスの価値を顧客に伝え、購買行動を促進することに重点を置きます。しかし、両者は完全に別物ではなく、相互に影響し合う関係にあると言えるでしょう
例えば、優れたUXデザインは、製品やサービスの使いやすさを向上させることで顧客満足度を高め、結果的にリピーターを増やすことができます。これにより、マーケティングが行うキャンペーンの効果も上がり、より多くの顧客を引きつけることが可能です。
逆に、マーケティングでは、ユーザーのニーズを深く理解し、その情報を基に製品やサービスの改善点を見つけるためのフィードバックを提供できます。これをうけてUXデザイナーはよりユーザー中心のデザインを作成できるでしょう。
UXとマーケティングは似て非なるものですが、双方をトータルに考えることで、より強力な顧客戦略を立てられます。
切り口の違い
UXとマーケティングは、重視するポイントに違いがあります。UXはおもにユーザーの視点から製品やサービスを評価し、使いやすさや満足度の向上を目指します。ユーザーの行動パターンや心理を深く理解し、そこから得られた考察を基に改善を行います。
一方、マーケティングは市場全体を見据え、競合との差別化や顧客獲得、売上の向上などのビジネス目標達成を重視します。例えば、市場調査や広告、プロモーションを通じて製品の魅力を伝えることに注力します。
UXデザイナーは「ユーザーが良い体験ができるようにデザインする」
マーケターは「会社の収益を上げるために、売上が上がるような施策をする」
それぞれアプローチの方法が異なりますが、ビジネスの成功という目指しているゴールは同じということです。
注目しているポイントの違い
UXとマーケティングが注目しているポイントには明確な違いがあります。
UXはユーザーの満足度やロイヤリティ重視です。ユーザーが操作しやすく、満足度の高い体験を提供することが目的なので、インターフェースのデザイン、ナビゲーションの簡便さ、使用感などに注目します。
一方、マーケティングはおもに市場シェアの拡大や売上の向上に注目します。キャンペーンや広告戦略を通じて、より多くの消費者に製品を知ってもらい、購入してもらうことが目標です。
UXデザイナーは「ユーザー個人の好みや行動に注目し、ユーザーが求めているサービスを考える」
マーケターは「消費者のトレンドに注目し、市場が求めている商品やサービスを考える」
こちらもUXは個人、マーケティングはマスに注目していますが、人びとが喜ぶサービスを考え出したいというゴールは同じです。
UXとマーケティングの共通点
リサーチをベースにしている
UXとマーケティングの共通点の一つは、リサーチを基盤としている点です。
UXとマーケティング、どちらもターゲットユーザーや顧客の理解を深めるために詳細なリサーチを行い、そのデータに基づいて戦略を立てます。
UXリサーチでは、ユーザビリティテストやインタビュー、行動観察などを通じて、ユーザーの行動パターンや課題を把握します。一方、マーケティングリサーチでは、市場調査やアンケート、競合分析などを行い、顧客ニーズや市場動向を理解します。
どちらのリサーチも、データに基づいた意思決定を行うための重要な手段であり、主観的な意見や感覚に頼らず、客観的なデータに基づいて行動することが求められます。この点も、UXとマーケティングは似ていると言えるでしょう。
ユーザー心理を考えている
もう一つの共通点は、どちらもユーザーの心理を深く理解しようとする点です。UXではユーザーが製品を使用する際の感情や満足度に注目し、直感的で使いやすいデザインを追求します。マーケティングでは消費者の購買動機や行動パターンを分析し、その情報を基に効果的な広告やプロモーションを展開します。どちらもユーザーの視点に立ち、その心理を考慮することでより効果的なアプローチを行い、ユーザーの期待に応えることが可能です。
ユーザー心理を理解するためには、データ収集と分析が必要です。UXでは、ユーザーテストやヒートマップ分析を行い、ユーザーがどの部分でつまずいているのかを明らかにし、デザインの改善に役立てます。マーケティングでは、アンケート調査や購買履歴の分析を通じてユーザーの行動を解明し、プロモーション戦略を策定します。両方の手法を組み合わせれば、顧客満足度と売上の両方を向上させることが期待できるでしょう。
ブランド体験の向上に影響する
UXとマーケティングは、ともにブランド体験の向上に大きな影響を与えます。優れたUXとマーケティングは、ユーザーが製品やサービスを利用する際の満足度を高め、ブランドに対してポジティブな印象を与えます。
ブランド体験を向上させるためには、UXとマーケティングが協力し合うことが大切です。例えば、ウェブサイトのデザインが直感的で使いやすければ、ユーザーはポジティブな体験を得ることができます。同時に、マーケティングキャンペーンが効果的にユーザーのニーズを満たす提案をすれば、そのブランドに対する信頼感が増すでしょう。その結果、ブランド全体のイメージが向上し、顧客が再度そのブランドを選ぶ可能性が高まります。
ブランド体験の向上は顧客の満足度を高め、長期的なビジネスの成功に貢献します。いつも良い顧客体験を得ることができれば、そのブランドに対する信頼感が深まり、他の競合ブランドとの差別化が図れます。そして、ポジティブな体験が口コミやレビューを通じて広がることで、新たな顧客の獲得にもつながるでしょう。
UXとマーケティングのどちらを優先するべきか
UXとマーケティングのどちらを優先すべきかという問題は、多くの企業が直面する重要な課題です。UXとマーケティングは、どちらも重要な要素であり、どちらが良いと一概には言えず、企業の状況や目標によって異なります。
例えば、スタートアップ企業の場合、初期段階ではUXに注力し、製品の価値を磨くことが重要です。ある程度の顧客基盤ができた段階で、マーケティングに投資し、成長を加速させるというアプローチが有効です。
一方、成熟した市場で競争が激しい場合は、UXとマーケティングを同時に強化する必要があるかもしれません。差別化された体験（UX）と効果的な訴求（マーケティング）の両方が、競合に対して有利な状況を確保する上で重要になります。
UXとマーケティングはどちらも欠かせない要素であり、ビジネスの状況や目標に応じて適切なバランスを取ることが成功のカギとなります。どちらも併せて総合的に考え、顧客中心のアプローチを取ることで、顧客満足度の向上を実現できるでしょう。
UXリサーチとマーケティングリサーチの違い
UXリサーチとは
UXリサーチとは、ユーザーが製品やサービスを利用する際の体験や行動を深く理解するための調査です。製品やサービスがユーザーにどのように受け入れられ、どのように使用されているかを深く理解することを目指しています。
UXリサーチには、定量的な手法と定性的な手法があります。定量的な手法では、アンケートやログデータの分析を通じて、多くのユーザーから得られる数値データを基にした調査が行われます。一方、定性的な手法では、ユーザーインタビューや観察、ユーザビリティテストを通じて、少数のユーザーから深い洞察を得ることができます。これらの手法を組み合わせることで、ユーザーの行動や感情、ニーズを多角的に理解することが可能となります。
UXリサーチで使用するおもな方法は次のとおりです。
- ユーザビリティテスト：実際の製品やプロトタイプを使用してもらい、操作性や理解度を評価する
- インタビュー：ユーザーの意見や感想を直接聞き取る
- 行動観察：ユーザーが製品を使用する様子を観察し、問題点や改善点を見出す
- ペルソナ作成：典型的なユーザー像を作成し、ニーズや行動パターンを可視化する
例えば、スマートフォンアプリの開発では、UXリサーチを通じて、ユーザーの操作の流れやつまずきやすい箇所を特定し、より直感的なインターフェースの設計に活かします。
UXデザイナーや開発者は、調査結果をうけてユーザーのニーズや改善点を特定し、より使いやすい、満足度の高い製品やサービスを提供できるようになります。
マーケティングリサーチとは
マーケティングリサーチは、市場全体の動向や消費者のニーズ、競合他社の状況を把握するための調査です。マーケティングリサーチの目的は、ターゲット市場のニーズを理解し、効果的なマーケティング戦略を立てることです。これにより消費者に対して製品やサービスの魅力を的確に伝えることが可能になります。
マーケティングリサーチでは、次のような手法を使用します。
- 市場調査：市場規模、成長率、競合状況などを分析する
- アンケート調査：大規模なサンプルから定量的なデータを収集する
- フォーカスグループ：特定のグループに対して詳細な意見を聴取する
- 競合分析：競合他社の戦略や製品を調査し、自社の位置づけを明確にする
例えば、新商品の発売前には、マーケティングリサーチを通じて、潜在的な需要や適切な価格帯、効果的な販売チャネルなどを調査し、戦略立案に活用します。
どのように切り分けるべきか
UXリサーチとマーケティングリサーチの切り分けで重要なのは、リサーチの目的と対象を明確にすることです。UXリサーチの場合、直接的なユーザー体験を改善することがメインとなるため、ユーザーの視点に立った深掘りが求められます。逆に、マーケティングリサーチは市場全体のトレンドや競争環境を把握することが目的であり、より広範なデータ収集と分析が必要です。
また、リサーチのステージも異なります。UXリサーチはプロダクトの開発初期から継続的に行われるのに対し、マーケティングリサーチは製品やサービスが市場に出る前後の戦略立案や評価の段階で行われることが多いです。
例えば、新しいオンラインサービスの開発では、初期段階でUXリサーチを重点的に行い、ユーザビリティを向上させます。その後、マーケティングリサーチを通じて市場ニーズや競合状況を分析し、双方の結果を統合して最終的な製品戦略を立案します。このように、両方リサーチを適切に切り分け、連携させることで、より効果的な製品開発とマーケティング戦略の実現が可能となります。
UXとCX（カスタマーエクスペリエンス）の違い
CX（カスタマーエクスペリエンス）とは
CX（カスタマーエクスペリエンス）とは、顧客が企業やブランドとのすべての接点を通じて得る総合的な体験のことです。これは製品やサービスの購入プロセスに限らず、広告やマーケティング活動、カスタマーサポート、さらにはアフターサービスまでを含みます。CXは、顧客が企業とどのように関わり、どのように感じるかを総合的に評価するため、企業にとって非常に重要です。
高級車ブランドのCXに例えると、ショールームの雰囲気、販売員の対応、試乗体験、購入後のメンテナンスサービスなど、すべての顧客接点が重要な要素となります。優れたCXは、顧客満足度の向上、ブランドロイヤリティの構築、そして長期的な事業の成功につながります。
UXとCXの関係性
UX（ユーザーエクスペリエンス）とCXは密接に関連していますが、異なる視点を持ちます。UXは製品やサービスの具体的な使用体験に焦点を当て、使いやすさや満足度を追求します。一方、CXはブランド全体との総合的な体験を指しています。購入前から購入後までのすべてのタッチポイントを含み、顧客がブランドとの関わり全体を通じてどのように感じるかを重視するのが特徴です。
UXとCXは相互に関連しており、どちらも顧客の満足度を高めるために不可欠です。UXが向上すれば、ユーザーは製品やサービスの使用においてより良い体験を得ることができ、結果としてCXも向上します。反対に、CXが優れていれば、顧客はブランド全体に対して良い印象を持ち、リピーターとなる可能性が高まります。そのため、UXはCXの重要な構成要素の一つと言えるでしょう。
とはいえ、優れたUXだけでは十分な顧客満足を得られない場合もあります。製品の使い勝手は良くても、カスタマーサポートが不十分だったり、ブランドイメージと実際の体験にギャップがあったりすると、CXとしては不満足な結果になる可能性があるので注意が必要です。
CXもマーケティングは不可欠
CXの向上を目指すには、マーケティングの役割が非常に重要です。マーケティングはブランドの認知度を高め、顧客との接点を増やす役割を果たします。顧客がブランドに接触する最初の段階から、購入後のフォローアップまで、マーケティング活動はCXの向上に大きく影響します。
マーケティング活動では、まず顧客のことをよく知ることが大切です。顧客が何を求めているのか、何を期待しているのかを正確に理解できれば、その人に合ったメッセージや特別な提案ができます。こうすることで、顧客は自分のことを大切に思ってもらえていると感じ、そのブランドのファンになりやすくなります。
また、マーケティングはCXの一貫性を保つためにも重要です。顧客が店舗、Webサイト,
SNSなど、どこをチェックしても、同じような雰囲気や内容で接することができるよう、マーケティングは大切な役割を果たします。顧客はそのブランドを信頼し、また利用したいと思うようになります。
さらに、SNSやメールを使って顧客とコミュニケーションを取ることも、CXの向上に役立ちます。顧客の意見や感想を積極的に聞き、それを基に商品やサービスを改善していけば、顧客はより満足してくれるでしょう。
マーケティング活動におけるUXを向上させる5つの方法
リサーチとデータ分析でユーザーのニーズを理解する
マーケティング活動においてUXを向上させるための第一歩は、ユーザーのニーズを正確に把握することです。リサーチとデータ分析を通じてユーザーのニーズを深く理解することで、UXの向上を実現することが可能です。
アンケート調査やインタビュー、Webサイトのアクセス解析などを通じて、ユーザーが求める機能や情報、利用時の課題を特定します。これにより、ユーザーが本当に必要としているサービスやコンテンツを提供することができます。データに基づいた判断は、UXの改善に大いに役立ちます。
さらに、リサーチとデータ分析は一度きりの作業ではなく、継続的に行うことがポイントです。市場やユーザーのニーズは時間とともに変化するため、定期的なリサーチとデータ分析を行うことで、常に最新の情報を基にした戦略を立てることが可能になります。
効果的なカスタマージャーニーマップを作成する
カスタマージャーニーマップは、顧客が製品やサービスを利用する際に経験する一連のステップを視覚的に表現したものです。顧客のニーズや期待に応えるために、カスタマージャーニーマップを作成し、ユーザーの気持ちを理解することが大切です。
まず、ターゲットとなるペルソナを明確に定義し、そのペルソナがどのような課題やニーズを持っているかを把握します。次に、顧客が初めてブランドに触れる瞬間から、購入、使用、そしてアフターサービスに至るまでの各タッチポイントを詳細に記録します。この作業により、顧客がどのようにブランドと関わり、どのポイントで満足や不満を感じるかが明確になります。
さらに、各ステップで顧客がどのような感情を抱くかも考慮することが重要です。顧客の感情の高低をグラフで可視化することで、どの部分でUXを向上させる必要があるかが一目瞭然になります。
ユーザーの体験を向上させるための具体的な改善策を見つけやすくするために、カスタマージャーニーマップを積極的に活用しましょう。
ユーザビリティテストの実施と改善を行う
ユーザビリティテストは、ユーザーが実際に製品やサービスを使用する際にどのような体験をするかを評価するための重要な手段です。マーケティング活動においてUXを向上させるためには、定期的なユーザビリティテストの実施が不可欠です。
テストを通じて、ユーザーがどの部分で困難を感じているか、どの機能が使いにくいかなどの具体的な問題点を洗い出すことができます。これにより、ユーザーのニーズにより適した形で製品やサービスを改良することが可能になります。
ユーザビリティテストを行う際には、具体的なテストシナリオと目標を設定します。次に、代表的なユーザーグループを選定し、製品を評価してもらいます。テストの結果を分析する際には、共通の問題点や改善の余地があるエリアを特定します。その後問題点に対して具体的な改善策を提案し、UXデザインを調整します。
改善策を実施したら、再びユーザビリティテストを行い、ユーザー体験にどのような影響を与えたかを評価します。このプロセスを繰り返すことで、ユーザー満足度を継続的に向上させることが可能です。
ユーザー目線のデザインを重視する
ユーザー目線のデザインとは、常にユーザー目線でデザインを考えることです。デザインの段階からユーザーの視点を取り入れ、直感的で使いやすいインターフェースを作成しましょう。
ユーザー目線のデザインで押さえておきたいポイントは次のとおりです。
- シンプルさ：不要な要素を排除し、必要な機能に絞っているか
- 一貫性：デザインや操作方法は統一されているか
- フィードバック：ユーザーの操作に対して適切な反応を返せるか
- エラー防止：ユーザーがミスしにくい設計がされているか
- カスタマイズ性：ユーザーのニーズに合わせたカスタマイズができるか
ユーザーが迷わずに操作できるよう、シンプルでわかりやすいナビゲーションや、視覚的に魅力的なデザインを取り入れるように意識しましょう。また、ユーザーのフィードバックを積極的に取り入れ、デザインを継続的に改善する姿勢も重要です。
PDCAを回し続ける
PDCA（計画・実行・チェック・改善）サイクルを回し続けることは、UXの向上において非常に重要です。
UXを向上させるためのPDCAサイクルは、次のとおりです。
- Plan（計画）：UX改善の目標を設定し、具体的な施策を計画する
- Do（実行）：計画に基づいて改善策を実施する
- Check（評価）：改善の効果を測定し、分析する
- Act（改善）：分析結果に基づいて、次のアクションを決定する
まず、ユーザーリサーチやデータ分析を基にした改善計画を立て、それを実行します。
その後、ユーザビリティテストやユーザーフィードバックを通じて成果を評価し、必要な改善を行います。
このプロセスを繰り返すことで、UXは継続的に向上します。PDCAサイクルを実践することで、常にユーザーのニーズに対応し続けることが可能になります。
UXをマーケティングに活用するときの注意点
デザインだけでなくコンテンツを充実させる
UXをマーケティングに活用する際、デザインの美しさだけに頼るのではなく、コンテンツの充実も重要です。魅力的なデザインはユーザーの興味を引きますが、それだけでは不十分です。
ユーザーが求める情報や価値あるコンテンツを提供することで、サイトやアプリの滞在時間を延ばし、コンバージョン率を高めることができます。ブログ記事や製品レビュー、詳細なFAQセクションを設けることで、ユーザーのニーズに応えることができるでしょう。
一貫性のあるユーザー体験を提供する
一貫性のあるユーザー体験を提供することは、UXをマーケティングに活用する際の重要な要素です。Webサイトやアプリ、メールマーケティングなど、すべてのチャネルで統一されたデザインとメッセージを提供することで、ユーザーはブランドに対して信頼感を抱きます。
例えば、同じブランドカラーやフォントを使用し、コンテンツのトーンやスタイルを統一することで、一貫したブランドイメージを維持できるでしょう。ユーザーはどのチャネルでもスムーズに体験を続けることができ、満足度が向上します。
過度なマーケティング要素の挿入を避ける
UXを重視する際には、過度なマーケティング要素の挿入を避けることが重要です。ポップアップ広告や過剰なプロモーションメッセージは、ユーザーの体験を阻害し、ストレスを与える可能性があります。
ユーザーが必要としている情報や機能にスムーズにアクセスできるようにし、マーケティング要素は自然な形で取り入れるようにするのがポイントです。関連する製品やサービスの提案を適切なタイミングで行うことで、ユーザーに価値を提供しつつ、過剰なアピールを避けることができます。
まとめ
現代のビジネスで成功するには、UXとマーケティングを上手く組み合わせることが大切です。UXは顧客体験の向上を、マーケティングは顧客理解と購買促進を目指します。双方の連携によってユーザー中心の戦略が構築でき、顧客の満足度と信頼性の向上につながります。
デジタル技術の進化により、ユーザー行動を簡単に分析できるようになり、UXマーケティングの重要性はますます高まっています。ぜひ、この記事を参考にして、より良いUXとマーケティング戦略を実現してください。
キャンバス設定には、Webflowでのデザインプロセスを最適化し、効率と精度を向上させるためのさまざまなオプションとツールが用意されています。
上部バーのさまざまなデバイスに対応したブレイクポイントの横にあるキャンバスサイズをクリックすると、キャンバス設定を開くことができます。
X-ray mode
サイトのキャンバスをグレースケールで表示するもので、要素にマウスを合わせると各要素の境界線、余白、パディングが示され、要素がページ上でどのように配置されているかがより明確に表示されます。
X 線モードを有効にするには、Canvas settingを開いてX-ray modeにチェックするか、キーボードでCommand (Mac の場合) またはControl (Windows の場合) + Shift + Xを押します。
Ruler
キャンバス上の要素を正確に測定して配置できます。Rulerには 2 つのオプションがあります。
- Pinned rulers- キャンバスの下部に静的な水平定規を追加します。水平測定の一定の基準点として使用できます。
- Pinned ruler & crosshair- 水平定規と交差する動的な垂直線を追加します。これをキャンバス上で移動して、要素を水平方向と垂直方向に揃えることができます。
Rulerを有効にするには、Canvas settingsを開いてRulerを選択します。
無効にするには、[No ruler]を選択します。
キーボードのShift + Rを押して切り替えることもできます。
Guide
Guide (grid overlaysと呼ばれることもあります) は、視覚的な配置ツールです。
ガイドには 2 つのオプションがあります。
- Line guide — キャンバスに垂直線を追加します
- Filled guide — キャンバスに陰影のある垂直線を追加します
有効にするには、Canvas settingsを開いてガイドオプションを選択します。
無効にするには、[No guide]を選択します。
キーボードのShift + Gを押してガイドを切り替えることもできます。
Vision preview
Vision previewを使用すると、視覚障害を持つサイト訪問者がサイトをどのように表示するかをシミュレートし、デザインが色のみで重要な情報を伝達または示していないことを確認できます。
Vision previewの詳細については、こちらをご覧ください。
Text zoom preview
ブラウザまたはオペレーションシステムの設定でテキストズームを使用しているサイト訪問者に対してデザインがどのように見えるかをシミュレートできます。
テキスト ズーム プレビューの詳細については、こちらをご覧ください。
いかがでしたでしょうか。
Canvas settingsの各項目を使いこなして、Webflowでの制作に是非役立ててください。
Webflowは、サイトのロケール間を効率的に移動できるように、custom locale switcherを設計することができます。
ローカライズされたサイトを公開したら、サイト訪問者がニーズに合った適切なロケールまたは言語を選択できる方法を構築する必要があります。
Locales list elementを使用すると、locale switcherを構築できます。
Locales list elementはCollection list elementと同様に機能し、公開が有効になっているすべてのロケールを表示します。
デザインは自由にカスタマイズできますが、今回はナビゲーションバーにドロップダウンでlocale switcherを構築する方法について紹介します。
始める前に
Localization overviewでローカライズについての概要をご確認ください。
locale switcherを構築するときは、primary localeを編集していることをご確認ください 。
サイトにナビゲーションバーを追加し、ドロップダウン要素をナビゲーションバーにドラッグします。
locale switcherの構築
- ナビゲーターパネルを開く
- ドロップダウン要素の横にある矢印をクリックすると、その子要素が表示されます
- Add panel>Advancedに移動
- Locales listをナビゲーションバーにドラッグします
- ドロップダウン要素をLocales wrapper要素内にドラッグします
- ドロップダウンリスト要素内のLocales listをドラッグします
- ドロップダウンリンク要素を削除します
- ドロップダウントグル要素内のテキストブロック要素を選択します
- Element settings panel>Text block settingsに移動します
- 紫色の「ドット」アイコン をクリックします
- ロケール名を選択
- ドロップダウン要素と子要素を好きなようにスタイル設定します
locale switcherに画像を追加して、各ロケールの表示画像 (アイコンやフラグなど) をその名前とともに表示することもできます。
- Add panel>Mediaに移動
- ドロップダウントグル要素内に画像要素をドラッグします
- Element settings panel>Image settingsに移動します
- 紫色の「ドット」アイコンをクリックします
- Locale画像を選択
- 画像をスタイリング
これで、locale switcherのドロップダウンには、Settings panel>Localizationで Enable publishing to this subdirectory がオンになっているすべてのlocaleが表示され、ドロップダウンのテキストと画像は現在のlocale (例: 「英語 (米国)」) に一致します。
公開が有効になっている場合、localeは公開済みのlocale listとlocale switcherに自動的に追加されます。
アセットパネルまたはコレクションフィールドにアセット（PDF ファイルや画像など）をアップロードすると、そのアセットも Amazon Web Servers（AWS）にインポートされ、コンテンツ配信ネットワーク（CDN）経由で配信されます。
これにより、ファイルをサイトにリンクするファイル名が生成されます。
アセットパネルまたはコレクションフィールドにアップロードしたファイルは制限されません。
ファイルは検索可能ですが、ファイルが公開されているWebページにないか、他の場所にリンクされていない場合は、検索エンジンによって必ずしも検索、またはインデックス化されるわけではありません。
発見される可能性がある方法
サイトにアップロードされたアセットが検索エンジンによって検出またはインデックス化される可能性がある方法はいくつかあります。
- アップロードされたアセットへの直接リンク
- 一意のファイル名（GUID）は推測できる
- アセットはどこかにリンクまたは共有されている（例：コレクションページまたは静的ページにアセットが含まれているか、アセットにリンクされています）
- アセットは、Google やその他の検索エンジンがクロールしてインデックスできるように、公開されているウェブページにある
誤って機密ファイルをアップロードしてしまった場合は、CDNからそのファイルを削除するようリクエストできます。
注記
コレクションページがファイルにリンクしている場合、またはファイルがCMSコレクションリストを介して静的ページ (またはコレクション ページ) 上の他の場所にリンクされている場合、Google はページをクロールし、ページがたどるリンクをインデックスに登録できます。
アップロードされたアセットの発見を防ぐ方法
アップロードされたアセットの検出を防ぐには、いくつかの方法があります。
- パスワード保護
- ファイルリンクにnofollow属性を設定する
- アクセス制限フォームのファイルアップロード
これらの方法では、検索エンジンによってすでにインデックスされている制限付きファイルは削除されないことに注意してください。
制限付きファイルが検索エンジンによってすでにインデックスされている場合は、CDNからファイルを削除するようリクエストできます。
パスワード保護
アセットを含むページまたはアセットへのリンクがパスワードで保護されている場合、そのリンクはページ上で見つかりません。
これは、ページがパスワードで保護された応答を返すためであり、コンテンツは読み込まれず、インデックスも作成されません。
ただし、アセットまたはアセットへのリンクを含むページが最初はパスワードで保護されておらず、後でパスワードで保護された場合、検索エンジンは既にコンテンツをクロールしてインデックス化している可能性があります (ページ上のファイルへのリンクも含む)。
この場合、実際のファイルリンクはまだ読み込み可能であり、検索エンジンはそのファイルを引き続きインデックス化します。
つまり、アップロードされたファイルへのリンクはパスワードで保護されておらず、ページ自体のみがパスワードで保護されています。
さらに、ページのパスワード保護がカスタム スクリプト (Webflow のネイティブ パスワード保護機能ではなく) に依存している場合、パスワードで保護されたページ上のプライベート ファイルはインデックスに登録される可能性があります。
検索エンジンクローラーはJavaScript を無効にしてクロールするため、カスタムスクリプトによってプライベートファイルのクロールやインデックス登録が阻止されることはありません。
ファイルリンクにnofollow属性を設定する
リンク (PDF ファイルへのリンクなど) のインデックス作成を回避するには、制限するファイルへのリンクにrel=nofollow属性を設定します。
リンクにnofollowカスタム属性を設定するには
- カスタム属性を設定するリンクを選択
- 要素設定パネル>カスタム属性に移動
- 「プラス」アイコンをクリック
- Nameフィールドに「rel」 、Valueフィールドに「nofollow」を追加
- 属性を保存するにはモーダル外をクリック
重要
nofollow 属性は、検索エンジンに対して、属性の付いたリンクを制限されたファイルへ辿り着かせない1つの方法に過ぎません。
検索エンジンは、他のリンクからファイルをクロールする場合、引き続きファイルをインデックス化する可能性があります。
また、nofollow 属性は、検索エンジンによって既にインデックス化されている制限されたファイルを削除しません。
アクセス制限フォームのファイルアップロード
「Restrict file upload access」が「OFF」になっている場合、フォームファイルアップロードを通じてアップロードされたアセットは制限されません。
フォームファイルアップロードを通じてアップロードされたファイルを制限するには
Site settings > Forms > Restrict uploaded file accessに移動し、Restrict file upload accessを「ON」に切り替えます。
制限されたフォームファイルのアップロードアクセスを介してアップロードされたファイルは、検索エンジンがインデックスに登録したり、フォーム送信にアクセスできるWebflow アカウントにログインしていない他のユーザーが表示したりすることはできません。
フォーム ファイルのアップロードへのアクセス制限の詳細については、こちらをご覧ください
注記
制限されたフォーム ファイルアップロード アクセスを介してアップロードされたファイルは、CMSコレクション ページまたは静的ページでは使用できません。これはリンクが制限されており、ログインアクセスが必要であるためです。
CDNからファイルを削除する方法
機密ファイルを誤ってアップロードしてしまった場合は、CDN からファイルを削除するようリクエストできます。
そうすることで、ファイルへのリンクが 404エラーになり、検索エンジンは最終的に検索結果からファイルをインデックス解除します。
ファイルがアセットパネルにアップロードされた場合は、次の手順に従ってCDNから削除してください。
- 削除したいすべての資産へのリンクのリストを作成
- サイトからアセットのすべてのインスタンスを削除
- アセットパネルからアセットを削除（アセットパネルからアセットを削除しても、サイトからアセットのすべてのインスタンスが削除されるわけではないことに注意してください）
- ファイルリンクのリストをカスタマーサポートへ
ファイルがコレクション フィールドにアップロードされた場合は、次の手順に従ってCDN から削除してください。
- 削除したいすべてのファイルへのリンクのリストを作成
- コレクションフィールド内のファイルを削除または置き換えて、コレクションアイテムに接続されないようにする
- ファイルリンクのリストをカスタマーサポートへ
※この記事は2023年10月5日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）
New APIs: Component, Variables and Localization
Webflowは最近、コンポーネント、変数、ローカリゼーションの新しい製品を発表しました。
これに対応するために、3つの新しいAPIを公開します。これにより、開発者はアプリを使って、拡張可能で再利用可能なコンポーネントやスタイルを提供できるようになります。また、新しいローカリゼーション製品との統合も簡単になります。
以下が新しいAPIの内容です：
- コンポーネントデザイナーAPI：
- 開発者はWebflowサイトにコンポーネントを追加、結びつけ、管理できます。
これにより、アプリがサイトのデザインシステムに新しい方法で関与できるようになります。
- 開発者はWebflowサイトにコンポーネントを追加、結びつけ、管理できます。
- 変数デザイナーAPI：
- 開発者は色、フォント、サイズなどの変数を定義し、管理できます。
これにより、Webflowアプリを通じてデザインシステムの管理が簡単になります。
- 開発者は色、フォント、サイズなどの変数を定義し、管理できます。
- ローカリゼーションAPI（来月公開予定）：
- 開発者はサードパーティの翻訳管理システムとWebflowの新しいローカリゼーション製品をシームレスに統合できます。
- 開発者はサードパーティの翻訳管理システムとWebflowの新しいローカリゼーション製品をシームレスに統合できます。
詳しくは、私たちの開発者向けドキュメントを参照して、Webflowマーケットプレイスのためのアプリ構築を始めてみてください。
今回はWebflowで不要になったワークスペースをアーカイブする方法についてご紹介します。
ダッシュボードにワークスペースが不要になった場合はアーカイブすることができます。
ワークスペースをアーカイブできる権利があるのは、ワークスペースの所有者だけです。
ワークスペースをアーカイブする際に注意する事は、以下の５点です。
- ワークスペースはダッシュボードから削除されます
- そのワークスペース内のすべてのサイトがアーカイブされます
- ワークスペースプラン（該当する場合）はキャンセルされます。アーカイブされたワークスペースからキャンセルされたワークスペースプランにはクレジットは提供されません。
- そのワークスペース内のサイトのすべてのサイトプランはキャンセルされます。アーカイブされたワークスペースからキャンセルされたサイトプランに対してはクレジットは提供されません。
- そのワークスペース内のすべてのサイトは非公開になります
ワークスペースをアーカイブするには
- ワークスペースのドロップダウンメニューをクリック
- Manage Workspacesをクリック
- アーカイブしたいワークスペースの横にある「・・・」をクリック
- Archive Workspaceをクリック
ワークスペースをアーカイブ解除したい場合は、カスタマーサポートに問い合わせる必要があります。
ワークスペースをアーカイブした後は、すべてのワークスペースメンバーを再度追加する必要があるので注意してください。
いかがでしたでしょうか。
ワークスペースについてのアーカイブには注意点に留意しながら作業しましょう。
UIが悪いと感じるWebサイトやアプリを操作すると、ユーザーはストレスを感じフラストレーションが溜まります。その結果、離脱するユーザーが増加し、ビジネスに大きな損失を与えかねません。しかし、UIの改善は難しいと感じている方は多いのではないでしょうか。
本記事では、「UIが悪い」と感じさせないための具体的な改善ポイントを解説します。また、ヤコブ・ニールセンのユーザビリティ10原則を理解し、チェックポイントを押さえることで、優れたUIデザインを作成するスキルを身につけられます。UIデザインの上達方法も合わせて紹介するので、ぜひ参考にしてください。
UIが悪いとはどういう意味か
UIの役割
UI（ユーザーインターフェース）は、ユーザーと製品がやり取りするための重要な窓口です。UIの役割は、ユーザーが直感的に操作できるようにすることであり、使いやすさとデザインの良さを両立させることが求められます。
優れた機能を持つサービスでも、使いにくければ利用してもらえずメリットを伝えきれません。良いUIがあれば、パソコンスキルに関係なく、誰でもサービスを利用できます。
例えば、Appleの製品はシンプルで直感的なUIを備えており、多くのユーザーに支持されています。UIが優れていると、ユーザーはストレスなく操作を行い、製品に対する満足度が高まります。
UIが悪いと起こること
UIが悪いとは、ユーザーが「どのように操作したらよいかわからない」と感じるインターフェースのことです。操作や情報を得るまでに時間がかかるため、ユーザーが不満に思う原因となります。
UIが悪いと起こる問題の例は次のとおりです。
- ボタンやリンクを見つけにくい
- 文字ばかりで理解するのに時間がかかる
- ホームページが表示されるまでに時間がかかる
これらの要素はユーザーに不満やストレスを与え、離脱の原因となります。UIが悪いと、ユーザーが思い通りの行動が行えません。そのため、ユーザーエクスペリエンス（UX）の低下にも影響します。
例えば、ネットショッピングでカートの場所がわからないといった、複雑なナビゲーションのサイトなら、ユーザーは購入をあきらめて他のサイトに移動してしまうでしょう。わかりにくい・見にくいUIはユーザーの離脱を招き、せっかく訪れた顧客候補を失う原因になります。
また、ユーザーでなく企業目線で作られたUIは、ユーザーにとっては不要な情報や機能であるケースが多いことも覚えておきましょう。ユーザーが知りたい情報にスムーズにたどり着けるようにUIを改善することが重要です。
UIデザインの良し悪しが現れやすいのがフォームです。フォームのUIは商品購入、お問い合わせ、資料請求といったコンバージョンにつながります。売上や顧客獲得の機会を失わないためにも、特に注意しておくべきポイントだと言えるでしょう。
UIはわかりやすければよいのか？
UIがわかりやすいことは重要ですが、それだけでは不十分です。UIは使いやすさと自社ならではの個性を両立させる必要があります。単にわかりやすいだけのUIは、他社との差別化ができず、ユーザーの印象に残りにくくなる場合があるので注意が必要です。
同じようなUIであれば、オリジナリティがあるUIやUXを提供しているサービスをユーザは選びます。ユーザーが直感的に操作できるだけでなく、視覚的に心地よく、必要な情報に迅速にアクセスできることは優れたUIの必須条件です。さらに、ユーザーの信頼感を高め、製品の価値を向上するために、ブランドを意識したデザインも考えることも大切です。
例えば、DropboxのUIはシンプルでありながら美しいデザインで、多くのユーザーが使用しています。ユーザーは直感的に操作できると同時に、洗練されたデザインを楽しめます。このバランスが、Dropboxの成功要因の一つとなっていると言えるでしょう。
UIは単に「わかりやすい」だけでなく、使いやすさ、視覚的魅力、アクセシビリティを兼ね備えたうえで、ブランドイメージにも配慮したものでなければなりません。優れたUIの設計は、ユーザーの満足度を高めビジネスの成功につながるため、常に改善を続けることが重要です。
UIが悪い具体例と改善するためのコツ
読みにくいテキスト
読みにくいテキストは、ユーザーにとって大きなストレスになります。フォントサイズが小さすぎたり、カラーコントラストが低すぎたりすると、情報が正確に伝わらないだけでなく、ユーザーの疲労感も増します。
HubSpotの調査によると、ユーザーの38%がウェブサイトのコンテンツやレイアウトが魅力的でない場合、サイトを離れると回答しています。また、文字ばかりで読みにくいWebページは、UXを大幅に低下させる要因となるため、改善が必要です。
読みにくいテキストの改善ポイントは次のとおりです。
・適切なフォントサイズとタイプを選ぶ
フォントサイズは16px以上を推奨し、読みやすいフォントタイプ（例えば、Arial、Verdana、Helveticaなど）を使用しましょう。
・高いカラーコントラストを保つ
テキストと背景のコントラスト比を4.5:1以上にすることで、視認性が向上します。
・行間と文字間を調整する
行間は1.5倍、文字間は0.5em程度を目安にすると、読みやすさが向上します。
・情報をグループ化する
ユーザーが欲しい情報の場所をすぐに把握できるように、内容でグループ化して分割しましょう。
わかりにくいアイコン
アイコンはUIの中で重要な役割を果たしますが、わかりにくいアイコンが配置されているとユーザーが混乱しやすくなります。一般的に使われにくいデザインや意味があいまいのアイコンは、ユーザーがひと目で機能を理解しにくくなります。
また、アイコンのサイズにも注意しましょう。小さすぎるアイコンは、クリック判定が難しくなり、ユーザーのストレスを増加させます。タッチ操作が主流となっているモバイル端末では、特に注意が必要です。
わかりにくいアイコンの改善ポイントは次のとおりです。
・一般的に認識されているアイコンを使用する
ユーザーが直感的に理解できるアイコンを選びましょう。例えば、ゴミ箱アイコンは「削除」、歯車アイコンは「設定」に使用するなど、ユーザーが見慣れたデザインの採用がおすすめです。
・ラベルを付ける
アイコンの下に短いテキストを加えることで、ユーザーが内容を把握しやすくなります。
・デザインの一貫性を保つ
アイコンのデザインは一貫したスタイルで統一すると、UI全体の見た目と使い勝手が向上します。
・アイコンのサイズを調整する
アイコンのサイズは、最低でも24px以上、アイコン同士の余白は10px以上確保しましょう。
多すぎる機能
機能が多すぎるとユーザーは混乱し、どの機能を使えばよいのか分からなくなることがあります。過剰な機能はUIを複雑にし、UXまで低下させる要因となります。
また、複雑なUIはユーザーの離脱につながる可能性が高まります。ユーザーは機能の搭載数を重視していると思われがちですが、機能が多すぎると何を使ったらよいのか迷ってしまい、使いにくさを感じることがあります。
不要な機能を削減することでUIを簡素化すれば、UXを向上させることが可能です。しかし、全ての機能を削除するのが難しい場合もあります。
そのような場合には、ユーザーが主に使用する機能をわかりやすく前面に配置し、サブ機能はメニュー内に隠す方法が有効です。これにより、主要な機能にアクセスしやすくなり、UIがシンプルで使いやすくなります。
多すぎる機能の改善ポイントは次のとおりです。
・使用頻度が高い機能に絞り込む
ユーザーが最も必要とする機能に焦点を当て、不要な機能を削除します。
・機能を段階的に提供する
全ての機能を一度に提供するのではなく、ユーザーの熟練度に応じて段階的に機能を追加する方法も有効です。
・ユーザーからのフィードバックを取り入れる
ユーザー調査を行い、本当に必要とされている機能を把握します。
欠落したCTA
CTA（Call To Action）とは、ユーザーに特定の行動を促すことを目的とした、Webサイトやアプリケーション上の要素のことです。例えば、商品購入や会員登録のボタンなどがCTAの一例です。
優れたUIデザインは、CTAボタンがわかりやすく配置され、ユーザーが次にとるべきアクションを容易に理解できるようになっています。一方、悪いUIデザインでは、CTAボタンがわかりにくかったり、見つけにくい場所に配置されていたりするケースが多いです。これでは、ユーザーが次に何をすべきか分からず、行動を起こさない可能性があります。
そのため、ユーザーの行動を効果的に誘導するには、CTAボタンを目立つ位置に配置し、他の要素とは異なるデザインや色を使用することが重要です。CTAボタンを適切に配置すれば、ユーザーが行動を移しやすくなり、UXの向上とコンバージョン率の改善にもつながります。
欠落したCTAの改善ポイントは次のとおりです。
・目立つ場所に配置する
CTAボタンは、ユーザーの目に留まりやすい場所に配置することが重要です。例えば、ページの上部や、視線が自然と集まる位置に配置します。
・具体的なアクションにつながる文言を入れる
具体的なアクションを示す「クリック」や「ここを押す」ではなく、「今すぐ購入」や「無料トライアル」といった具体的なアクションを示す文言を使用します。
Unbounceでは、CTAボタンに具体的なアクションを示す文言を追加した場合とそうでない場合のコンバージョン率を比較しました。その結果、具体的なアクションを示す文言を追加した方が、ユーザーが行動しやすくなり、コンバージョン率が向上することがわかりました。
・視覚的に強調する
色やサイズでCTAボタンを強調し、他のコンテンツから目立つようにします。
Performableによると、緑色と赤色のボタンのコンバージョン率を比較した結果、、赤色のボタンの方が緑色よりも高いコンバージョン率を達成することがわかりました。
見た目重視のデザイン
見た目を重視しすぎると、使い勝手が悪くなる場合があります。洗練されたデザインであっても、操作が複雑であればユーザーは使い続けません。良いUIデザインとは、ビジュアルの美しさよりも、ユーザーのニーズを的確に捉え、目的達成をスムーズにサポートできるものだといえます。ユーザーの期待する機能を過不足なく提供し、直感的な操作性を実現することが重要だと言えるでしょう。
見た目重視のデザインの改善ポイントは次のとおりです。
・ユーザビリティテストを実施する
デザインが美しいだけでなく、使いやすいかどうかを確認するためにユーザビリティテストを行います。デザインにこだわりすぎて、ナビゲーションが複雑になり、ユーザーが記事を見つけにくくならないように注意が必要です。
・ユーザーのフィードバックを重視する
デザインについてユーザーからのフィードバックをもらい、改善に役立てましょう。制作側の意向より、ユーザーからの意見のほうを優先したデザインを考えることがポイントです。
・バランスを取る
見た目と使いやすさのバランスを取ることが重要です。必要に応じて、デザインの一部をシンプルにできないかどうか検討しましょう。
良いUIのためのヤコブ・ニールセンのユーザビリティ10原則
ヤコブ・ニールセンのユーザビリティ10原則は、優れたUIを設計するための基本的なガイドラインです。Webサイトやソフトウェアの使いやすさを向上させるための指針として広く用いられています。各原則について詳しく解説します。
システム状態の視認性
システム状態の視認性とは、システムが現在の状態や進行状況をユーザーに明確に伝えることです。例えば、ロードの進行状況をインジケーターで表示することで、ユーザーはシステムがどのような操作を行っているのかを把握できます。これにより、ユーザーの不安を軽減し、信頼感が高まります。
システム状態の視認性の具体例は以下のとおりです。
- ソフトウェアのインストール時に、読み込み状況をアニメーションで表示する
- エラーメッセージが表示された場合、原因と解決方法をわかりやすく記載する
- オンラインショップの購入で、ステップ別に状況がわかるようにする
システムと実世界の一致
システムと実世界の一致とは、システムがユーザーの現実世界の経験や理解度に合わせてデザインされていることです。システムはユーザーにとって親しみやすく、なじみのある言葉や考え方を使用して設計するのが理想です。
どのようなユーザーでも直感的に操作できるようにするため、システム用語なども専門用語ではなくユーザーにとってわかりやすい言葉を使用する必要があります。
システム状態の視認性の具体例は以下のとおりです。
- 地図アプリで、ユーザーの現在地を人型などわかりやすいアイコンで表示する
- 音楽プレーヤーで、再生・停止・スキップなどの直感的に理解できる操作ボタンを配置する
- 金融取引アプリで専門用語を避け、わかりやすい言葉で説明する
ユーザーの主導権と自由
ユーザーの主導権と自由とは、ユーザーがシステムを自由に操作でき、誤った操作を簡単に元に戻せるようにすることです。ユーザーがシステムに強制されず、自分のペースで操作を行えるようにすれば、操作時のストレスも軽減できます。そのため、操作方法や情報へのアクセス方法に、複数の選択肢を提供することが重要です。
ユーザーの主導権と自由の具体例は以下のとおりです。
- 行った操作を簡単に元に戻せるように 「元に戻す」 機能を提供する
- テキストエディタで、複数の方法でファイルを保存できるようにする
(例：メニューから選択、ショートカットキー、ボタンなど)
- 操作を好きなタイミングで中断できるように「キャンセル」ボタンを設置する
一貫性と標準
一貫性と標準とは、システム内の操作やデザインが一貫しており、ユーザーが予想した動作を行えることです。画面レイアウトやデザインも、統一感のあるものにすることで、ユーザーが理解しやすくなり、使い勝手が向上します。また、システム内のどこでも同じ用語や操作方法を使用すれば、ユーザーの学習負荷が軽減され操作性が向上します。
さらに、業界標準に準拠することで、ユーザーは他のシステムからの知識を利用して新しいシステムを使いこなすことができるようになります。
一貫性と標準の具体例は以下のとおりです。
- Webサイトの複数ページで同じデザインレイアウトとナビゲーションメニューを使用する
- ソフトウェアの異なるバージョン間で、同じ用語と操作方法を使用する
- アプリケーションで、アイコンやボタンのスタイルを統一する
エラーの予防
エラーの予防とは、ユーザーが誤操作をしにくい設計をすることです。エラーの予防は、UXを向上させるための重要な要素です。そのため、エラーが発生する可能性をできる限り排除することが、ユーザビリティの向上につながります。もしエラーが発生してしまった場合は、原因と解決方法をわかりやすく伝えることが重要です。
エラーの予防の具体例は以下のとおりです。
- 入力フォームで、ミスを防ぐための自動補完機能を実装する
- 必須入力フィールドに適切な入力フォーマットをガイドするメッセージを表示する
- ソフトウェアのインストール時に、互換性チェックを実施して、エラーを事前に防ぐ
再生より再認
再生より再認は、ユーザーが情報を思い出す（再生）よりも、認識する（再認）方が簡単であるという原則です。必要な情報を見つけるためにユーザーの記憶に頼るのではなく、情報を探しやすくする必要があります。再認を優先することで、ユーザーは快適にシステムを利用できるようになります。
再生より再認の具体例は以下のとおりです。
- Webサイトのメニュー項目をラベル使用してわかりやすく分類する
- カレンダーアプリで、予定を色分けして表示する
- 入力フォームにドロップダウンメニューやオートコンプリート機能を搭載する
柔軟性と効率性
柔軟性と効率性とは、初心者と上級者の両方が効率的に操作できるようにすることです。ユーザーは、自分のスキルや経験に合わせて操作方法を調整できる必要があります。ショートカットやカスタマイズ機能を用意し、ユーザーが自分のペースで操作できるようにすることが大切です。
柔軟性と効率性の具体例は以下のとおりです。
- 初心者向けのチュートリアルと、上級者向けのヘルプドキュメントをそれぞれ提供する
- アプリケーションで、ユーザーがショートカットをカスタマイズできるようにする
- ユーザーが自分の好みに合わせてインターフェースを変更できるようにする
美的で最小限のデザイン
美的で最小限のデザインは、不要な情報を排除し、必要な情報だけを提供することです。シンプルで美しいデザインは、ユーザーが情報を素早く理解し、操作をスムーズに行えるようになる手助けとなります。
関連性の低い情報や装飾的な要素をできる限り減らして、重要な情報がはっきりと表示されるように意識することが大切です。余計な装飾や要素を減らせば、ユーザーは必要な情報に集中できるようになります。
美的で最小限のデザインの具体例は以下のとおりです。
- Webサイトで、シンプルなレイアウトと配色を使用する
- アイコンやボタンをわかりやすくデザインする
- 必要な情報だけに絞り、余白を効果的に活用する
ユーザーによるエラーの認識・診断・回復のサポート
ユーザーがエラーを起こした場合は、エラーを認識して原因を診断し、簡単に回復できる手段を提供することが重要です。エラーメッセージは、わかりやすい言葉で表現し、問題の解決方法を提示するのが効果的です。
また、エラー状態からの復旧方法を明確に示し、ユーザーが迷うことなく元の状態に戻れるようにしましょう。エラーから速やかに回復できるようサポートすることで、ユーザーのストレスを最小限に抑えられます。
ユーザーによるエラーの認識・診断・回復のサポートの具体例は以下のとおりです。
- エラーが発生した際は、赤字などでメッセージを表示し、エラーを認識しやすくする
- ソフトウェアでファイルが破損した場合、自動で修復する機能を提供する
- ヘルプメニューに詳細な情報と問い合わせ先を記載する
ヘルプとドキュメンテーション
ユーザーが困ったときに利用できるヘルプ機能やドキュメンテーションを提供することは、UIの重要な要素です。そのため、ユーザーが必要なときに必要な情報に簡単にアクセスできるようにする必要があります。
適切なヘルプとドキュメンテーションがあることで、ユーザーは自分で問題を解決でき、サポートへの依存度が低下し、自信を持ってシステムを利用できるようになります。
ヘルプとドキュメンテーションの具体例は以下のとおりです。
- Webサイトの各ページにヘルプボタンを設置し、内容に応じた情報を提供する
- 詳細なユーザーマニュアルとチュートリアル動画を提供する
- ステップバイステップのチュートリアルやよくある質問セクションを設ける
UIが悪くならないためのチェックポイント
ユーザーが迷わずたどり着けるか
ユーザーが目的の情報や機能に迷わずたどり着けることは、良いUIの基本です。ナビゲーションが明確でユーザーが直感的に理解できるかどうかが重要です。
UIが悪いと、目的の情報にたどり着くまでに時間がかかり、ユーザーはフラストレーションを感じます。その結果、サイトやアプリから離脱する可能性が高まります。
チェックポイントは以下のとおりです。
- 明確なメニュー構造をしているか
- 検索機能を設置しているか
- パンくずリストを使用いるか
ユーザーが必要な情報に素早くアクセスできるよう、メニューはシンプルでわかりやすく表現することが大切です。例えば、トップメニューに主要なカテゴリーを配置し、サブメニューで詳細な情報を提供します。
さらに、ユーザーが特定の情報を簡単に見つけられるように、サイト内検索機能を設置しましょう。検索バーはページの目立つ場所に配置し、オートコンプリート機能を追加することで、検索の精度を高めます。
ユーザーが現在の位置を把握しやすくするために、パンくずリストの設置も必要です。これにより、ユーザーは迷わずにサイト内を移動できます。
アクション起こせる場所は区別できているか
ユーザーがどこでアクションを起こせるかを直感的に理解できることも大切です。ボタンやリンクといった相互に作用する要素は、はっきりと区別されている必要があります。特に、CTAがわかりにくいと、コンバージョン率が大幅に低下するので注意しましょう。
チェックポイントは以下のとおりです。
- 視覚的に強調できているか
- ホバーエフェクトを活用しているか
- 一貫したスタイルガイドを適用しているか
ボタンやリンクは、視覚的に目立つようにデザインします。色やサイズ、形を工夫し、ユーザーが認識しやすいようにします。例えば、CTAボタンはコントラストの高い色を使用し、大きめに配置してみましょう。
ユーザーがカーソルを合わせたときに視覚的な変化があると、クリックできるエリアがわかりやすくなります。ボタンにマウスを乗せたときに変化するホバーエフェクトを追加すれば、ユーザーにアクションのヒントを与えられます。
ボタンやリンクなどには一貫したデザインスタイルを適用します。これにより、ユーザーはどこでアクションを起こせるかを直感的に理解できるようになります。
一貫性のあるデザインにしているか
システムを操作するうえで、ユーザー体験を左右する重要な要素の一つが、一貫性のあるUIデザインです。全てのページや画面でデザインと操作方法を統一することで、ユーザーは迷いなく直感的に操作を進められ、ストレスフリーな利用体験を実現できます。
そのため、すべてのページや画面でデザインスタイルやインタラクションパターンの統一が必要不可欠です。一貫性のあるUIは、UXを大きく向上させます。
チェックポイントは以下のとおりです。
- スタイルガイドを作成して遵守しているか
- 再利用可能なUIコンポーネントを作成しているか
- ユーザーからのフィードバックを活用しているか
デザインの一貫性を保つために、スタイルガイドを作成し、それに従って全てのUI要素をデザインしましょう。色、フォント、ボタンスタイル、アイコンなどが統一できているかどうかをチェックします。
再利用可能なUIコンポーネントは、デザインの整合性を保ち、開発効率を向上させるための有効な手段です。へッダー、フッター、ボタンなど、共通部品を再利用可能なUIコンポーネントとして作成すれば、全てのページや画面で一貫して使用できます。
また、ユーザーの意見や要望を分析してデザインに反映させることで、より使いやすく直感的なUIを実現できるでしょう。ユーザーの声に耳を傾け、デザインを進化させることが、優れたユーザーエクスペリエンスの提供につながります。
UIデザインスキルを上達させる方法
デザインルールを学ぶ
UIデザインスキルを向上させるための第一歩は、基本的なデザインルールを学ぶことです。配色、タイポグラフィ、レイアウト、ホワイトスペースなどの基本原則を理解することで、視覚的に魅力的で使いやすいデザインを作成できます。
具体的には、デザインの専門書を読む、オンラインコースを受講する、またはデザインブログを定期的にチェックするなどがおすすめです。デザインに関するワークショップやセミナーに参加するのもよいでしょう。
良し悪しを言語化する習慣をつける
優れたデザインと悪いデザインを言葉で表現する習慣を身につけましょう。他者のデザインを評価し、自分の作品と比較する際、なぜそのデザインが良いのか、あるいは悪いのかを具体的に説明できるようになることが重要です。習慣が身につけば自分のデザインを客観的に見つめられるようになり、改善点を発見しやすくなります。
実際にデザインを作成し、フィードバックを得る
実際にデザインを作成し、フィードバックを得ることも効果的な学習方法です。他のデザイナーやユーザーからフィードバックを受け、他者からの視点を取り入れることで、自分のデザインの弱点を発見できます。
さらに、デザインのコミュニティに参加、コンテストへの応募などを通し、同僚やクライアントからの意見を積極的に求めるのもおすすめです。これらのステップを実践することで、UIデザインスキルを着実に向上させれば、ユーザーにとって魅力的なUIデザインを生み出すことができるでしょう。
まとめ
「UIが悪い」とユーザーに感じさせないためには、ユーザーにとってわかりやすく使いやすいデザインを心がけることが重要です。今回紹介したUIの改善ポイントを意識することで、ユーザーが迷わずスムーズに操作できる、快適なUIを実現できます。また、UIの役割を理解し、ユーザーが抱える問題を具体例から学ぶことで、より良いUIデザインを目指せるようになるでしょう。
UIは常に進化し続けています。常に学び続け、ユーザーにとって最適なUIを提供することで、ビジネスを成功に導きましょう。
※この記事は2023年9月14日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）
Transfer Site plans from one site to another
サイトのリデザインのためにサイトをコピーして、その新しいサイトを元のサイトと置き換えたいと思ったことがありますか？
今日の更新により、ワークスペースの管理者や所有者は、手間をかけずにそれできるようになりました。
新しいサイトへの移行時に、元のサイトに関連付けられているアクティブなサイトプランも一緒に移行できます。
これにより、面倒な再設定やキャンセルの手続きなしに、スムーズに作業を進めることができます。
新しいサイトへの移行では、請求スケジュールやサイト・ドメインの設定、支払い方法など、移行されたサイトプランの詳細が引き継がれます。
一方、古いサイトは無料のスタータープランにダウングレードされ、カスタムドメインが削除されます。
この機能の詳細については、Webflow Universityのドキュメントをご覧ください。
Webflowのダッシュボードにサイトを表示したくない場合は、アーカイブするする事ができます。
アーカイブするとサイトは非公開となり、ダッシュボードから削除されサイトのサブドメインは保存されます。
サイトをアーカイブする前に、利用中のサイトプランをキャンセルするか、ワークスペース内の別のサイト (該当する場合) に転送する必要があります。
キャンセルされたサイトプランに対して支払いは発生しません。
ダッシュボードまたはサイト設定からサイトをアーカイブできます。
ダッシュボードからサイトをアーカイブするには
- ダッシュボードに移動
- サイトのサムネイルの下にある「・・・」をクリックします
- メニューからArchiveを選択
- 確認のためサイト名を入力してください
- Archive siteをクリック
サイト設定からサイトをアーカイブするには
- サイト設定に移動
- 上部のバーにあるファイルボックスのアイコンをクリックします
- 確認のためサイト名を入力してください
- Archive siteをクリック
.webp)
注記
ワークスペースの所有者またはサイト管理者のみがサイトをアーカイブできます。
Core および Freelancer Workspace プランでは、すべてのワークスペース メンバーがデフォルトでサイト管理者になります。
役割と権限は、Growth、Agency、Enterprise Workspace プランでロック解除されます。
また、アーカイブされたサイトは、 Workspaceプランに従ってホストされていないサイトの制限にカウントされません。
重要
アクティブなサイトプランがあるサイトはアーカイブできません。
サイトにアクティブなサイトプランがある場合は、アーカイブする前にスターターサイトプランにグレードダウンする必要があります。
有料のサイトプランをキャンセルするか、サイトプランをワークスペース内の別のサイトに転送する必要があります。
アーカイブされたサイトのサブドメインを別のサイトに使用する場合は、アーカイブする前にサブドメイン名を変更してください。
