ノーコードやローコードのアプリケーションプラットフォーム（LCAP）は、近年さらに注目を集めてきています。ローコードの製品には、特定のニッチな分野をターゲットにしたものもあれば、広範囲のアプリケーション、ソフトウェア、ツールのコーディングを不要にするソリューションを提供するものもあります。

ローコードまたはノーコード開発のいい点は、アプリやツールの構築をより身近なものにしてくれることです。特に大きなアイデアはあるものの、資金があまりない若い起業家にとっては魅力的です。

多くのLCAPでは、ユーザーがAPIやGoogleのFirebaseのようなインフラストラクチャ・アーキテクチャと統合できるようになっており、企業は手頃な価格のアプリや既存のソフトウェアのプラグインを作ることができます。

ローコード開発は、UX調査やテストにおいても有効的です。UXデザイナーは、デザインを開発チームに渡す前に、LCAPを使って完全に機能するプロトタイプを作成し、より効率的にユーザーテストを行うことができます。このようなローコードのワークフローは、新製品や新機能をリリースする際の時間とコストを大幅に削減します。

ローコードとノーコード、その違いは？

多くの人にとって、「ローコード」と「ノーコード」は同じ意味を持つ言葉です。ノーコードと謳っている開発ツールのほとんどは、ユーザーがカスタマイズのために何らかのコード（通常はCSS）を挿入することを可能にしており、これが基本的にはローコードとなります。

最も一般的で広く受け入れられている言葉は、ローコード（Low-Code Application Platforms – LCAP）で、ローコードとノーコードの開発環境を指しています。

それでも、ローコードとノーコードには微妙な違いがいくつかあります。

ノーコードツール

ノーコードビルダーは通常、あらかじめテンプレートが用意されており、ユーザーはロゴや画像、テキストを変更することしかできません。

また、これらのノーコードツールでは、Google SheetsやAirtableのようなシンプルなデータベースに接続することもできます。技術的なスキルを持たないユーザーでも機能するアプリを構築できるため、ノーコード開発は非常に身近なものとなっています。

ローコードツール

ローコードビルダーは、テンプレートを提供するだけでなく、ページやコラムのレイアウトを編集したり、CSSやJavascriptを追加したり、APIを接続したりと、よりカスタマイズが可能です。

ローコードツールでは、GoogleのFirebaseやParse、AWS Amplifyのような、より技術的なデータベースへの接続も可能になるかもしれません。

SAPやSalesforceのような多くの企業向けアプリケーションは、企業がソフトウェアと統合するアプリを構築できるように、ローコードツールを提供しています。

ローコード開発の仕組みとは？

ローコードツールでは通常、ドラッグ＆ドロップ式のビルダーを使用して、アプリ（モバイル、デスクトップ、ウェアラブル・デバイス）やウェブサイトのページに要素を配置します。これらの要素には、テキスト、画像、ボタン、ナビゲーションなどが含まれます。これらの要素の中で、ユーザーはデータベースからデータを引き出したり、アクションやアニメーションを作成したりすることができます。

各要素は、ローコードツールがアプリやWebサイトをコンパイルする際に使用する、効果的なウィジェットです。また、ローコードツールの中には、ホスティングオプションを提供しているものもあり、ユーザーはコードのエクスポートや適切なホスティング環境の確保を気にする必要がありません。

デザインプロセスにおけるローコード

ローコードは、デザインプロセスにおいても不可欠なツールになりつつあります。まず、デザインツールが画像ベースではなくコードベースであれば、構築されたプロトタイプの挙動は最終製品に近くなり、インタラクションも非常にリアルになるという事実があります。

ローコードデザインツールのもう一つの利点は、製品チーム全体に力を与えることができることです。ローコードデザインソフトウェアを使えば、デザインの経験がほとんどないプロダクトチームでも、UXチームが作成したデザインライブラリを使って製品やインターフェースを簡単に作ることができます。

その典型的な例がUXPin Mergeです。デザイナーはMergeを使用して、準備の整ったUIコードコンポーネントをUXPinにインポートし、すぐにそれらを使ってデザインすることができます。これらの準備の整った要素は、開発者のGitリポジトリやStorybookから得られます。

製品チームは、これらのコンポーネントを使って新しい製品やユーザーインターフェースを設計することができます。何よりも優れているのは、インタラクションがすでに用意されているため、チームが作るプロトタイプは忠実度が高く、会社のすべての標準に沿ったものになるということです。

チームのメンバーはすぐに使えるコンポーネントを使うので、エンジニアリングチームは最終製品をより早く作ることができます。

PayPal DesignOps 2.0のローコードプロダクトデザイン

ローコードプロダクトデザインの素晴らしい実践例として、PayPalのDesignOps 2.0があります。UXPin Mergeを使用して、PayPalのUXデザイナーと開発者は、製品チームが作業できる60以上のコンポーネントのデザインライブラリを構築しました。

このコードベースのデザインライブラリにより、PayPal の製品チームは UX チームからの最小限のインプットで製品を作ることができます。また、エンジニアリングプロセスも格段に速くなり、開発者は製品開発作業の80％以上をUXチームの支援なしに終えることができるようになりました。

ローコード開発のメリット

ローコード開発の最も大きなメリットは、スピードとアクセシビリティです。誰でもアイデアを実用的なアプリに変えることができ、多くの場合、数時間以内に完成させることができます。

ここでは、ローコード開発のメリットについて詳しくご紹介します。

• スピード – ローコード開発では、チームや個人が迅速にアプリケーションを構築することができます。シンプルなアプリケーションでも、エンジニアが機能する製品にコード化するには数日かかります。より複雑なアプリケーションは、数週間から数ヶ月かかることもあります。
• コスト削減 – アプリやウェブサイトを構築する際、エンジニアリングは最もコストのかかるステップの一つです。セキュリティのように、専門的なエンジニアリングスキルを必要とする要素もあり、これにはコストと時間がかかります。
• 簡単なデプロイメント – ローコードツールは、多くの場合、ワンクリックでデプロイメントとホスティングを行うことができます。アプリやWebサイトのホスティングには、サーバーやホスティング環境について何も知らない場合は特に、多くの課題が伴います。
• コンセプトテスト – ローコードツールは、スタートアップ企業が新しいコンセプトやアイデアをテストするための安価な製品を作るのに最適です。概念実証に成功すれば、スタートアップ企業が重要なシードステージの資金を確保するのに役立つでしょう。既存の企業は、開発に投資する前にテストするために、新しいサービス、プラグイン、アドオンを構築するためにローコードプラットフォームを使用するかもしれません。

ローコード開発のデメリット

ローコードツールには多くのメリットがありますが、いくつかのデメリットもありますのでご紹介します。

• スケーラビリティ – ローコードツールはコンセプトの証明には優れていますが、これらのアプリはプラットフォームの限界に縛られているため、スケーラブルではありません。しかし、アプリが収益を上げるようになれば、開発者の雇用に投資し、スケーラブルなソリューションを考えることができます。
• イノベーションの制限 – ローコードツールは、イノベーションにも大きな制限があります。繰り返しになりますが、プラットフォームの枠内で作業しなければならないため、潜在的に革新的なコードやアルゴリズムを書くことができません。
• 高価なホスティング – ローコード・アプリケーションを構築するのは安くて速いのですが、ローコードツールで提供されるホスティングは、特に規模が大きくなるにつれて、通常のホスティングサービスよりも指数関数的に高価になります。
• パフォーマンス – ローコード開発がパフォーマンスに悪影響を与える要因はいくつかあります。第一に、これらのシステムは一律のソリューションを提供するため、最終的なアプリケーションには多くの冗長なコードや未使用のコードが含まれている可能性があります。第二に、ローコードホスティングサービスを利用している場合、共有ホスティング環境である可能性が高く、スピードとパフォーマンスの面で理想的ではありません。
• セキュリテイ – 機密データや消費者データを処理するアプリは、世界の一部の地域では、プライバシー法を通過するのに十分なセキュリティを備えていない可能性があります。例えば、EUのGDPRやカリフォルニア州のCCPAは、個人データの管理について非常に厳しい基準を設けています。

ローコード／ノーコードツールでは何が作れるのか？

「これがノーコードでできるの？」と驚くことがあるかもしれません。例えば、Bubbleのような有名なLCAPも、シンプルなAPIから複雑なソーシャルメディア、SaaSアプリケーション、Airbnbのような宿泊施設予約サイトなど、あらゆるものを作ることができます。

一部のLCAPプラットフォームでは、Javascriptの機能や洗練されたユーザーフローをドラッグ＆ドロップのビルダーで作成する機能を提供しています。

カスタムソフトウェアのアドオンとAPI

ローコード開発は、既存のソフトウェアと統合するためのカスタム・アドオンを必要とするビジネスに最適です。

例えば、従業員が勤務時間を記録するために会計ソフトに接続するローコードアプリを構築することができます。この種のアプリは会社にとって利益を生まないので、カスタムアプリに何万ドルも費やすことは経済的に意味がありません。

上記のシナリオでは、経理部の誰かがローコードでアプリを作り、1日で正確に動作するようにデプロイすることができます。

Zoho Creatorは、企業が現在のシステムと統合したネイティブのiOS/Androidアプリを構築することができるローコードアプリビルダーである。

SaaS製品

ローコードツールを利用して、シンプルなSaaS製品を開発するスタートアップが増えています。デザイナーやエンジニアに頼る必要がないため、コストを抑えて迅速に拡張することができます。

教育

ローコードは、教育用ツールやアプリの構築に最適なソリューションです。これらのアプリは、新しい学生の申し込みを受け付けるだけの簡単なものから、学生がビデオを見たり、宿題を提出したり、クラスメートと交流したり、コースノートをダウンロードしたり、成績表を受け取ったりできるカスタマイズされたバーチャル教室まで、さまざまなものがあります。

これらはローコードアプリケーションのほんの一例に過ぎませんが、特に必要なサービスのシステムをデジタル化しようとしている資金不足の発展途上国にとっては、その可能性は計り知れないものがあります。

ローコードは開発者を置き換えるか？

開発者の必要性は常にありますが、ローコードアプリのプラットフォームはアプリ開発の未来形とも言えるでしょう。

LCAP業界は急速に変化しており、新興企業に新たな機会をもたらし、多くの企業にレガシーシステムのアップグレードや改良を可能にしています。

デバイスの互換性のための自動アップグレードや、最新のセキュリティ要件を満たしたりするインテリジェントなLCAPを使用して、非常に複雑なエンタープライズアプリケーションが構築されるようになるのはそう遠い未来ではないでしょう。

ローコードツールの将来性

Brandessence Market Research社によると、ローコード市場は、2027年には651.5億ドル、2030年には1,870億ドル の規模になるといいます。

Salesforce、Microsoft、Appian、Oracle、Agileなどのソフトウェア大手は、すでにローコード市場に強力な足場を築いており、これらのシステムを継続的に改良して、顧客にさらなるカスタマイズを提供しています。

これらの企業は、ソフトウェアを構築するのではなく、顧客のビジネスニーズにぴったり合った独自のアプリケーションを開発するためのツールを提供することになるでしょう。

ここで重要なのは、こうしたローコードツールは、イノベーションを推進する開発者やエンジニアがいなければ存在しないということです。AIを搭載したものであっても、ローコードアプリケーションの限界に囚われることになるでしょう。

ローコードは必ずしも開発者に取って代わるものではなく、開発チームが構築するシステムやツールを変えるものです。

プロダクトチームの誰もが使えるローコードツールを使ってデザインと開発の連携を強化したいとお考えでしたら、Storybookを統合したUXPinの無料トライアルをお試しください。デジタル製品をより早く作るためのコードベースデザインツールのパワーをご体験ください。

The post ローコード ツール、ノーコードツール appeared first on Studio by UXPin.

モバイルアプリとWeb アプリのどちらを導入するかを決めるのは、いつも簡単というわけではなく、UX（ユーザーエクスペリエンス）や技術的な制約、費用対効果や拡張性など、決断前に考慮すべき要素は数多くあります。

そこで本記事では、どのアプローチがプロジェクトに最適かを、十分な情報に基づいて判断できるようにするため、『Webデザイン』と『モバイルアプリデザイン』の違いについて見ていきます。このヒントに沿って、UXPin の無料トライアルにサインアップし、これから開発するモバイルアプリやウェブアプリのような見た目や動きのある高度なプロトタイプを構築可能なエンドツーエンドのプロトタイピングツール UXPinをぜひ無料でお試しください。

モバイルアプリ とは

モバイルアプリは、携帯可能なモバイルデバイスのために特別に設計されたツールであり、その形態はさまざまです。単機能の小さなアプリケーションから、より複雑で多機能なモバイルプラットフォームまで、それぞれがユーザーに質の高い体験を提供してくれるはずです。

アプリの目的と範囲は大きく異なり、それによって人々はゲームやレジャーからビジネスや専門的な追求に至るまで、さまざまな活動ができます。

アプリを開発する際、製品開発チームは、アプリを作成するデバイスの画面サイズと OS（オペレーティングシステム）の考慮が必要なことがよくありますが、モバイル技術の急速な進歩に伴い、現在では多くのアプリがクロスプラットフォームの互換性を考慮して作られており、さまざまなデバイスやプラットフォームのユーザーがアプリを楽しむことができます。

現在利用できるモバイルアプリの種類は以下の通りです：

• ネイティブ：通常、単独のプラットフォームや OS（iOsアプリやAndroidアプリ）向けに開発される。
• ハイブリッド：再利用可能なコードを活用し、少ない労力と費用でネイティブに近い UX（ユーザーエクスペリエンス）を提供する。
• PWA：Progressive Web Appsの略で、HTML、CSS、JavaScript、その他のフレームワークで作られたモバイルWebアプリのことである。

モバイルアプリ の利点

• 効率的に動作する（モバイルデバイス向けにネイティブに作成されている）
• インターネットに接続せずにオフラインで作業できる
• より良い分析、つまり、より正確なデータ収集とコンバージョントラッキングが提供される

モバイルアプリの欠点

• 設計にコストがかかり、維持はもっとかかる
• iOSとAndroid で別々のアプリの構築が必要
• プライバシーやセキュリティの維持は自己責任

Webアプリ とは

Webアプリは、ユーザーがインターネットに接続できる端末であれば、Webを通じてアクセスできるので、ユーザーはブラウザ上で動作するのに、PCに別のアプリケーションをインストールして管理する必要がありません。その点においてアクセシビリティが向上するでしょう。

Webアプリケーションを使うメリットは、従来のWebサイトと比べて、AngularJS や ReactJSといった強力なフロントエンドフレームワークのおかげでよりインタラクティブなUXを実現できることです。

このフレームワークによって、アプリ開発者はダイナミックなシングルページアプリケーションをサクッと構築することができ、それによって別々のビュー間のスムーズな遷移が実現され、ユーザーからの入力を受けたときに素早く反応することができるのです。

Webアプリケーションは、セキュリティを犠牲にすることなく、驚異的な性能やスケーラビリティを提供するため、よく使われるソリューションとなっています。

Webアプリの利点

• サーバーにホストされ、ブラウザのインターフェースを通じてインターネット上で配信される。
• 遠隔地のサーバーに保存され、ブラウザーのインターフェースを通じてオンラインで供給されるため、ユーザーは更新プログラムのインストールが不要
• Web開発チームによるメンテナンスが簡単

Webアプリの欠点

• 使用にはインターネットへの接続が必要
• 読み込みに時間がかかる可能性がある – サーバーに負荷がかかると、アプリのコンテンツがすぐに表示されず、UXに深刻な影響を与えることがある。ユーザーの離脱を引き起こしてしまうこともあり得る。
• ターゲットオーディエンスに発見されにくい – Webアプリはアプリストアに載っていないため、アプリストアのプロモーションにはならない。Product Hunt、Capterra、ITreviewなどのレビューサイトは、ウェブアプリを宣伝する適切な方法ではあるが、Apple や Android のアプリストアに比べると今ひとつ。

モバイルアプリ と Webアプリ の違いについて語る

ここで、モバイルアプリとWebアプリの違いをサクッと見てみましょう。

• Webアプリはほぼすべてのブラウザからアクセスできるが、モバイルアプリはアプリストアからのダウンロードが必要。
• 画面サイズの要件の違い。モバイルアプリはデスクトップでアクセスすることができないことから、小さな画面専用に作成されるため、ピクセル数が少なくなるが、Webアプリは、モバイルとデスクトップの両方でのアクセスが可能。
• モバイルアプリはインターネットに接続しなくても使えるが、Webアプリは使えない
• Webアプリはインターネット接続が必要でウェブブラウザに依存するため、モバイルアプリに比べて動作が遅くなりがち。
• デザイナーとして、高いユーザビリティとアクセシビリティの基準を確保するには、「パソコンは大抵座って使う」、「アプリのユーザーは通勤やジョギングで携帯電話を使っているであろう」というようなさまざまなシナリオの考慮が必要。
• モバイルアプリは、Webアプリよりもセキュリティが高度であるため、モバイル アプリの開発では、2 要素認証やその他安全性を上げる手段を作成することで、それに対応すべきである。

モバイルアプリとWebアプリの選択に関する有効な方法

ここでは、モバイルアプリとWebアプリのどちらを選ぶかを決める際に、最も考慮すべき点をご紹介します。

ユーザーのコンテクストと目的の決定

Web は豊富なリソースと情報をユーザーに提供し、Webユーザーは通常、ゆったりと座ってアクセスします。一方モバイルデバイスは、ユーザーが外出先で情報を検索し、サッと入手するためのユニークな機会を提供します。

モバイルUXをデザインする場合、「必要な情報に最小限の時間で最大限アクセスできるようにする」という目的のもとで、ナビゲーションはシンプルで分かりやすく、よく構造化されたコードが簡潔に書かれ、視覚的に優先順位が付けられている必要があります。

UX デザイナーは、次のようなデザイン要素に細心の注意を払ないといけません：

• 小さな画面のユーザーにとって最も直感的な自然なジェスチャー
• メニュー選択のシンプルさ
• クリアな視覚経路
• フォントや色など、一貫した UI 要素
• クリックやアクセスがしやすいボタンやリンク
• その他、ユーザーナビゲーションがしやすくなるインタラクティブな要素

また、ユーザーが誰でもアプリを最大限に活用し、機能的に使えるようにするため、関連するアクセシビリティ基準とペアになっていないといけません。

結論：Webアプリは長時間のユーザーセッションに適しており、モバイルアプリと競合することはないが、習慣や食事の記録アプリ、モバイルECアプリ、SNSアプリなど、製品が短時間で定期的に使用される場合は、おそらくモバイルアプリが適している。

製品やサービスの必要な画面サイズを見極める

B2Bツールの多くはWebベース化され、ユーザーは携帯電話やタブレットなどのモバイルデバイスからアクセスできるようになりましたが、これは、以下のような理由で有益です：

• ユーザーのデバイスに関係なく、都合よくサッと情報にアクセスできるようになる
• より大きな画面で、より鮮明に、より詳細にコンテンツを見ることができる
• PDFのダウンロードやエクスポートを定期的に行う必要がある場合、PDFはモバイル端末のデータ容量を大きく占め、頻繁に保存すると端末が重くなる可能性があることから、ユーザーはモバイルデバイスよりもデスクトップコンピュータで行う方がはるかに簡単で効率的である。そもそも、モバイルはファイルの閲覧に便利な画面サイズではない。
• ユーザーは、複数のデバイスにファイルを分散させるよりも、１つにファイルを保存することを好むであろうことから、企業がB2Bプラットフォームを最大限に活用するには、Webベースのアクセスの提供が不可欠である。
• コンテンツがはっきり見えないこともあるモバイルだけでなく、より大きな画面でアプリにアクセスできるようにすることで、企業はクライアントに常に良いUX を提供できる。

結論：Webアプリは、多数のチャートや分析データがある複雑な（主に仕事に関連する）アプリに適しており、このようなタイプのアプリでは、通常、画面間を何度も行き来する必要がある。

デバイス固有の機能をリストアップする

例えば、美容製品を販売しているのであれば、一日の大半を過ごす場所であるモバイルデバイス向けに美容アプリを開発する方がはるかに有益です。

このプラットフォームで、より多くのオーディエンスを獲得し、コンピュータでは利用できない複数の機能、特に高解像度の携帯電話カメラを活用できます。この種の製品では、市場での成功には画質が不可欠です。

モバイルビューでアクセスできるWebベースのアプリケーションを設計することで、デバイスのカメラを使うことができますが、他の機能の一部は、モバイルのハードウェアと機能によってのみアクセス可能です。例えば、ランナー向けのアプリを作るのに欠かせなかった、携帯電話に内蔵されたジャイロセンサーやGPSのようなものを考えてみてください。

また、モバイルアプリのUX/UIデザインを設計する際には、大きめのインタラクティブボタンやシンプルなナビゲーションなど、デバイス固有の要素を必ず含めるようにしましょう。さらに、必ずソフトウェア開発チームと協力して、サードパーティ製アプリの統合が完璧に機能するようにしましょう。統合の種類は製品によって異なりますが、SNS、オンライン決済方法、プッシュ通知などがあります。

結論：モバイルアプリには、GPSや高解像度カメラなど、端末固有のハードウェアや機能が付加されていいる。

競合他社の選択肢をチェックする

企業は、何を開発すべきかに関して情報に基づいた判断をするために、新製品やアプリを発売する前に、競合状況の分析をすべきです。

もし、市場のトッププレイヤーの多くがWebベースのソリューションであることが判明したなら、その線を行くのがベストでしょう。彼らはユーザーが便利に使えるプラットフォームでソリューションを作って、そのUXによって目標を達成したのですからね（結局、そうでなければ、このようなアプリが市場でこれほどまでに成功することはないでしょう）。

また、「同じカテゴリの製品にユーザーは親しみを感じる」ことを忘れないようにしましょう。そうすることで、競合他社からこちらに乗り換える場合、あなたのアプリを使い始めるのがはるかに簡単になります。競合他社を徹底的に調査することで、投資する前にチャンスと潜在的なリスクを特定することができるのです。

結論：アプリの目的がカテゴリーに革命を起こすことでないのなら、他の人が成功を収めているプラットフォームを採用する価値はある。そこに、ターゲットとなる人がいるかもしれない。

モバイルアプリかデスクトップアプリか？UXPinでデザインしよう

この記事を読んで、モバイルアプリとWebアプリのジレンマでどちらを取るかを選べるようになれば幸いです。ユーザーのコンテクスト、画面サイズ、競合他社の状況などが、アプリの成功にどう貢献するかを理解するのに、ぜひ上記の考察を参考にして下さい。

UXPin があれば、ウェブアプリやモバイルアプリを問わず、高度なプロトタイプを作成し、それをステークホルダーやデベロッパーと速やかに共有することができます。実際に使ってみませんか？無料トライアルでこのツールをぜひお試しください。

無料トライアルは今すぐお試しになれます。準備はいいですか？UXPinをお試しになり、製品のデザインと開発のプロセスを効率化しましょう。トライアル開始はコチラ。

The post モバイルアプリとWebアプリ【違いと各メリット】 appeared first on Studio by UXPin.

 Webアプリケーション開発 とは、Web ブラウザからアクセスして実行するソフトウェアアプリケーションを作成するプロセスです。アプリケーションは、さまざまなデバイスや OS（オペレーティングシステム）で動作するように設計することができます。

 Webアプリケーション開発 プロセスにおいて、インタラクティブでダイナミックな体験を構築するためには、大体 HTML、CSS、JavaScript などの技術とフレームワークやライブラリが使われます。

ドラッグ＆ドロップの UI ビルダーで、インタラクティブな Webアプリケーションのプロトタイプやワイヤーフレームを構築しませんか？

完全にコード化された React コンポーネントを使ってそれを動かして、アプリの美しくインタラクティブなレイアウトを作成しましょう。デザインにデザイナーがいなくても大丈夫です。こちらから UXPin Merge をぜひお試しください。

 Webアプリケーション開発 とは？

 Webアプリケーション開発 とは、ユーザーが Webブラウザからアクセスして操作できるアプリケーションを作成するソフトウェア開発プロセスです。

ユーザーのデバイスにインストールされる従来のデスクトップアプリケーションやモバイルアプリケーションとは違って、サーバー上でホストされ、実行にはインターネット接続が必要です。

Webアプリ開発に取り組むとき、プログラマーは主に Web テクノロジーの組み合わせて使います。

例えば HTML はコンテンツの構造を定め、CSS はプレゼンテーションとレイアウトを処理し、JavaScript はアプリケーションにインタラクティブ性をもたらします。このような技術は、一般に「フロントエンド」と呼ばれるものの骨組みをを形成します。

バックエンドの開発では、プログラマーは Node.js、Python、Ruby on rails、PHP などのサーバーサイドのプログラミング言語と、MySQL、PostgreSQL、その他の SQL データベースなどのデータベースを使います。

また、バックエンドは、フロントエンドからのリクエストの処理やデータの管理、必要なビジネスロジックの実行を担います。

Webアプリケーション の種類

Web アプリケーションには以下のような種類があります。以前の記事では、ゼロからWeb アプリケーションを作るということについて調べました。以下などを色々と知っておくのもいいでしょう：

• シングルページアプリケーション： Webアプリケーションで、単一の HTML ページを読み込み、ユーザーがアプリを操作すると動的にコンテンツが更新される。
• マルチページアプリケーション： 複数の HTML ページで構成される Web アプリケーションで、各ページが個別のビューや機能を表しているため、ページ間を移動する際に全ページのリロード（再読み込み）が必要になる。
• プログレッシブ Web アプリケーション（PWA）： ネイティブアプリのような体験を提供することにより、オフラインアクセス、プッシュ通知、レスポンシブデザインなどの機能を提供しながら、Web ブラウザから直接アクセスできる。

また、「静的 Web アプリケーション」や「動的 Web アプリケーション」もありますが、それについては、こちらの記事をご覧ください。

 Webアプリケーション開発 プロセスとは

Webアプリケーション開発プロセスは、Webアプリケーションを作成するための体系的なアプローチであり、ユーザーにとって使いやすいWeb アプリを構築するための複数のステップで構成されています。

このプロセスはモバイルアプリ開発と似ており、イテレーション（反復）を伴う「設計」、「開発」、「テスト」のフェーズがあります。デザインチームと開発チームが新機能を追加したいときはいつでも、新しい Web アプリを構築するのと同じワークフローに従います。

機能の設計、その反復、そして開発を行い、モバイルデバイス向けのWeb開発でも、同じプロセスが繰り返されます。

Web アプリ開発で「すること」

Web アプリの作成は、ソフトウェア開発と同様に、アプリの UX（ユーザーエクスペリエンス）と UI（ユーザーインターフェース）のデザインに関する原則に従う必要があるということになります。そこで、以下の原則に従うことをお勧めします。

レスポンシブデザインのベストプラクティスに従う

レスポンシブデザインは、Web アプリケーションの UI とレイアウトがさまざまな画面サイズや解像度、デバイスタイプにシームレスに適応することを保証する Web アプリケーション開発のアプローチです。

エンドユーザーに最適な表示とインタラクション体験を提供することを主な目的としています。

ユーザーは、デスクトップ PC やノートパソコンからタブレットやモバイルデバイスまで、さまざまなデバイスから Web にアクセスする可能性があるため、レスポンシブ UI デザインを扱う必要があります。

レスポンシブUIデザインのヒントには、以下のようなものがあります：

モバイル優先型アプローチから始める

まず、一番小さなスクリーン（大体はモバイルデバイス）に焦点を当てることからデザインプロセスを始める。このアプローチにより、核となるコンテンツと機能が小さな画面向けに優先され、その後、大きな画面向けに段階的に強化される。

流動的なグリッドと柔軟なレイアウトを使う

ピクセルのような固定単位ではなく、パーセンテージや ems のような相対単位を使った流動的なグリッドシステムと柔軟なレイアウトを導入する。これにより、Web コンテンツが画面サイズに比例して適応し、デバイス間で一貫した UX を実現できる。

ブレイクポイントにメディアクエリを使う

メディアクエリを使って、さまざまなスクリーンサイズに対応するためにデザインを変更する「ブレークポイント」を設定する。そしてそのブレークポイントに基づいて、レイアウト、フォントサイズ、その他のスタイルを調整し、さまざまなデバイスに最適化されたエクスペリエンスを提供する。

複数のデバイスでテスト

レスポンシブ Web デザインをさまざまなデバイスやブラウザで定期的にテストする。エミュレーターやブラウザ開発者用ツールも有用だが、さまざまなプラットフォームで発生する可能性のある具体的な問題を特定して対処するには、実際のデバイスを使った実環境テストが極めて重要である。

コンテンツの優先順位付け

ユーザーにとっての重要性と関連性に基づいてコンテンツの優先順位を決めて整理する。特にスペースが限られている小さな画面では、重要なコンテンツはアクセスしやすく目立つようにする。

タイポグラフィの調整

フォントサイズと行の高さを調整し、さまざまなデバイスでの読みやすさを確保する。様々な画面サイズで文字が適切に拡大縮小されるように、フォントサイズに相対単位を使うことを考慮する。

タッチやジェスチャー入力を考慮する

特にモバイルデバイスでは、タッチやジェスチャーによるインタラクションを念頭に置いてデザインし、ボタンやインタラクティブ要素は、タッチ入力に対応できるよう、適切なサイズと間隔を確保する。

アクセシビリティへの配慮

アクセシビリティの基準に注意を払う。レスポンシブデザインがハンディキャップのあるユーザーに対応し、個人の能力や使うデバイスに関係なく、どんな人にもシームレスなエクスペリエンスを提供できるようにする。

パフォーマンスの最適化

不要なアセットを最小限に抑え、ページ全体の読み込み時間を短縮することで、Web サイトのパフォーマンスを最適化する。画像の遅延読み込み、HTTP リクエストの最小化、ブラウザのキャッシュの活用などを検討し、UX を強化する。

最初からレスポンシブなアプリのワイヤーフレームを作りたい方向けに、UXPin Merge と MUI のコンポーネントを使った方法を見ていきましょう。

レスポンシブダッシュボードを構築するには？

コーディング規約の遵守

コーディング規約とは、デベロッパーがコードを書くときに遵守する一連のガイドラインと規約のことであり、共通言語として機能し、チームメンバー全員が同じような方法でコードを書くことを保証します。

この一貫性で、より良いコミュニケーションが育まれ、誤解が最小限に抑えられ、デベロッパーはコードベースのさまざまな部分をシームレスに切り替えることができるようになります。

さらに、コーディング規約に従えば、ソフトウェア開発者は問題の特定や修正がしやすくなります。

コードが予測可能な方法で構造化されているため、デバッグはより単純なプロセスとなり、それによって、実行の流れを辿って潜在的な問題を見つけやすくなります。

コーディング規約は、命名規則、インデント、フォーマット、ベストプラクティスなど、コーディングのさまざまな側面をカバーしているのです。

画像とメディアの最適化

画像の最適化は、アプリのパフォーマンス、UX、全体的な読み込み速度に直接影響するため、Webアプリにとって非常に重要です。

画像が大きかったり、最適化されていなかったりすると、ページの読み込み時間が大幅に増え、それによってユーザーとのインタラクションが遅くなり、Web ページやアプリケーションにユーザーがアクセスしてくれなくなる可能性があります。

以下で、最適化された画像やメディアを実現する方法を見てみましょう：

• 圧縮： 画質を過度に落とすことなくファイルサイズを小さくするには、画像圧縮技術を使う。例えば ImageOptim や TinyPNG のようなツールや、Squoosh のようなオンラインサービスで、画像を効果的に圧縮できる。
• 画像のリサイズ： 画像が Web アプリでの表示に適したサイズにリサイズされていることを確認する。画像が必要以上に大きい場合は、サイズを変更することでファイルサイズを大幅に縮小でき、Photoshop、GIMP、オンラインプラットフォームなどのツールを使ってサイズを調整できる。
• 適切なファイル形式の選択： 各画像に適したファイル形式を選ぶ。写真の場合は JPEG が適していることが多く、透明度のある画像には PNG が最適であり、シンプルなグラフィックやアイコンには SVG が適している。ちなみに、各フォーマットには、圧縮と品質に関する考慮事項がある。
• 遅延ローディング（読み込み）：画像、特にユーザーの画面に初期状態では表示されない画像については、遅延読み込みを実装する。画像がユーザーのビューポートに入ったときだけ読み込まれるようにすることで、ページの初期読み込み時間が短縮される。
• レスポンシブ画像： さまざまな画面サイズに対応するレスポンシブ画像を使う。これにより、小さな画面での大きな画像の不要な読み込みを防ぎ、さまざまなデバイスでより良い UX が保証される。
• コンテンツデリバリーネットワーク（CDN）： CDN を活用し、地理的にサーバー間で画像を配信する。CDNで、ユーザーに近いサーバーから画像が配信されることで待ち時間が短くなり、読み込み時間がさらに改善される。

キャッシングを戦略的に活用する

キャッシュとは、Web 開発において、特定のデータやリソースを保存して再利用し、元のソースからのリクエストや取得を繰り返す必要性を減らすために使用される技術です。

キャッシングがコンテンツの読み込みと表示に必要な時間とリソースを最小限に抑えることで、Web アプリケーションのパフォーマンスと UX が上がります。なので、頻繁にアクセスされるデータや静的なデータにとって特に有益です。

ブラウザキャッシングやサーバーサイドキャッシング、CDN を利用してサーバーの負荷を軽くし、Webアプリケーション全体の速度を上げましょう。

継続的インテグレーション（CI）と継続的デリバリー（CD）への取り組み

CI/CDとは、継続的インテグレーション（Continuous Integration）と継続的デリバリー（Continuous Delivery）の頭文字をとったもので、開発とデリバリーのプロセスを改善することを目的とした、最新のソフトウェア開発プラクティスのセットのことです。

継続的インテグレーションとは、ステージング環境や本番環境へのソフトウェアのデプロイプロセスを自動化することであり、継続的デリバリーは、ステージング環境や本番環境へのソフトウェアのデプロイプロセスを自動化することに重点が置かれています。

そこで、CI/CD のパイプラインをセットアップして、「テスト」、「構築」、「デプロイ」のプロセスを自動化しましょう。

継続的インテグレーションで変更がシームレスに統合されることが保証され、継続的デプロイで Web アプリケーションの更新がより速く、より信頼できるものになります。

また、CI/CD で、開発およびデプロイプロセスのスピード、信頼性、コラボレーションの面で強化され、最終的にはより効率的で競争力のある開発ライフサイクルにつながるため、Web ベースのアプリにとって極めて重要です。

Web アプリ開発で「しないこと」

Webアプリに関しては、「やってはいけないこと」がいくつかあります。以下で、フロントエンドのデベロッパーとデザイナーが避けるべき主な事柄を見ていきましょう。

一貫性のないUI

Web アプリ開発における UI の一貫性とは、アプリケーション全体を通して、UI 要素、ビジュアル要素、インタラクションパターンにわたって均一でまとまりのあるデザインを維持することを指します。

これによって、ユーザーは Web アプリのさまざまなページやセクションをナビゲートする際に、予測可能で調和のとれたエクスペリエンスが得られるようになります。

一貫性とは、シームレスで直感的な UI を作るために、確立されたデザインパターン、スタイリング規約、インタラクション動作を遵守することです。一貫性のない UI に伴う危険性を以下に挙げてみましょう：

• 混乱を招くUX：UI の不一致により、ユーザー間の混乱が生じる可能性がある。例えばボタン、ナビゲーション メニュー、配色などの要素がページごとに違うと、ユーザーはアプリケーションの操作方法を理解しにくくなり、直感的でなくイライラする体験につながる可能性がある。
• 高い認知的負荷： ユーザーは、一貫性のない UI に適応するために、さらに認知的な努力を払わないといけなくなる。デザイン要素の動作が違ったり、視覚的な手がかりが違ったりすると、ユーザーはそのアプリケーションに対する予測や認知度などのメンタルを常に調整し直さなくてはいけなくなり、その結果、認知的負荷が増え、それが全体的なエクスペリエンスの妨げになる可能性がある。
• エラー率の増加： 矛盾はエラー率の上昇につながる場合がある。特定のインタラクションパターンに慣れているユーザーは、予期せぬ変更に直面したときにミスを犯す可能性があり、その結果、意図しないアクションやフラストレーションが発生し、Web アプリの使用中にエラーが発生する可能性が高くなる。

UI に一貫性がない場合は、アプリの再設計が必要です。Webアプリに最適な最新のコンポーネントライブラリを使って、他の企業がどのように UI をすばやく更新できたかをご覧ください。

使い勝手の悪さ

ユーザビリティには、使いやすさ、直感性、ナビゲーション、全体的なユーザー体験などの要素が含まれますが、使い勝手の悪い Web アプリだと、多くの場合、イライラ、混乱、そして全体的にネガティブなユーザーエクスペリエンスにつながる課題が浮き彫りになります。

Web アプリの使い勝手の悪さを特定するには、ユーザーとのインタラクションとエクスペリエンスのさまざまな側面を評価する必要があります。以下に、Webアプリのユーザビリティに改善が必要であることが伺える兆候を挙げましょう：

• 重要なページでの高い離脱率： お会計や登録のページなど、重要なページでユーザーが頻繁に Web アプリを終了している場合、ユーザビリティに問題がある可能性があり、重要なページの離脱率を分析して、潜在的な障害や分かりにくい要素の特定が必要。
• 頻繁なサポートリクエスト： Web アプリケーションの使用方法に関するサポートリクエストや問い合わせが増加している場合は、ユーザビリティが低い可能性がある。ユーザーは、大規模なガイダンスを必要とせずに、直感的にナビゲートし、タスクを実行できるべきである。
• タスク完了率が低い： タスクの完了が難しいと、タスクの放棄につながる可能性があり、その際ユーザーはフォームを未記入のまま放置したり、有料ユーザーに転換しなかったり、友人や同僚をアプリに招待しなかったりする。
• ユーザーエンゲージメントの制限： 主要な特徴や機能に対するユーザーのエンゲージメントが低い場合、ユーザビリティが低い可能性がある。ユーザーが特定の要素を発見または使用していない可能性があり、これはデザインや配置が直感的でないことが伺える。

ユーザーのエラーを処理しない

Web アプリケーションにおいて、ユーザーエラーの効果的な処理は、ポジティブなユーザー体験をもたらしたり、ユーザーのフラストレーションを防ぐのに非常に重要です。なので Webデベロッパーとデザイナーは、問題の本質を伝えて可能な解決策を提案する、明確で説明的なエラーメッセージを提供する必要があります。

文章は、ユーザーをさらに混乱させるような専門用語や複雑な用語を使わずに書かれるべきであり、ユーザーにとって意味のある方法で伝わらないといけません。

そしてもう一つ重要なことは、エラーメッセージの配置です。エラーが発生した特定のフィールドやエリアの近くにエラーメッセージを表示することで、ユーザーは問題をサッと特定し、フォームやプロセスのどの部分に注意が必要かを理解することができます。また、ユーザー入力のリアルタイム検証を実装しましょう。ユーザーがフォームに入力する際、その入力が有効かどうかを即座にフィードバックします。

この積極的なアプローチにより、ユーザーはフォームを送信する前にエラーを修正することができます。

バリデーションをテストできるプロトタイプを作成したい場合は、Webアプリのデザインに UXPin Merge を使いましょう。 UXPin Merge でユーザー入力のバリデーションをサッと設定して、実際のユーザーでテストすることができます。

リリース前の UI テストを怠る

開発チームは、アプリの最初のバージョンをリリースする前に UI をテストするのを忘れてしまうかもしれませんが、UI テストは、エンドユーザーが遭遇するかもしれない潜在的な問題を特定して対処するために非常に重要です。

開発プロセスの早い段階で UI をテストすることで、デザインの段階で見落とされた可能性のあるデザイン上の欠陥や矛盾を検出することができ、リリース前にこのような問題に対処することで、アプリの UI を再デザインする時間が節約されます。

ユーザビリティテストのセッションを通じて、潜在的なユーザーからフィードバックを集めます。ユーザーが UI をどのように操作するかを観察することで、改善が必要な領域に関する貴重なインサイトが得られます。

また、Web アプリのベータ版をリリースして、フィードバックを集め、ユーザーのインタラクションを監視し、本リリース前に予期しない問題を特定することもできます。

クロスブラウザ互換性を無視する

クロスブラウザの互換性を無視するというのは、Web サイトの使いやすさ、機能性、そして全体的な UX に大きな影響を及ぼす可能性のある、Web 開発におけるよくある間違いです。

クロスブラウザ互換性とは、Web サイトや Web アプリケーションが、さまざまな Web ブラウザ間で一貫して効果的に機能する能力のことであり、この点を無視すると、ユーザーによってはアプリを使えなかったり、パフォーマンスやレイアウトのエラーが発生したりするなど、さまざまな課題やユーザーの不満につながる可能性があります。

Google Chrome、Firefox、Safari、Edgeなど、常にさまざまなブラウザで UI をテストし、Web アプリがさまざまなブラウザ環境でも一貫して表示され、機能することを確認しましょう。

これは、特定のブラウザに特有の潜在的な問題が出るのを避けるのに極めて重要であり、それに対するお役立ちツールがあります。

ドキュメンテーションを提供しない

ドキュメンテーションは、コードベースを理解し、コラボレーションを促進し、Web アプリケーションの保守性を確保するための重要なリソースとなります。

適切なドキュメントがなければ、アプリのメンテナンスは大変で時間のかかるプロセスになります。

文書化されたコードベースの説明、アーキテクチャの決定、コーディング規約で、開発チームのメンバーはプロジェクトをより効率的に理解することができますからね。

十分に文書化されたコードで、意図された動作が明確になり、それによって、メンテナンス時にエラーが発生する可能性が下がります。

文書化されたコードベースのガイドラインとアーキテクチャの文書は、アプリを問題なくスケーリングするためにも非常に重要です。

甘いセキュリティ対策

セキュリティをおろそかにすると、データ漏洩、不正アクセス、ユーザーの信頼低下など、深刻な結果を招くかもしれません。

アプリは Web ベースなので、SQLインジェクション、クロスサイトスクリプティング（XSS）、クロスサイトリクエストフォージェリ（CSRF）などの一般的なサイバー攻撃の影響を受けやすく、このような攻撃が、不正アクセス、データ操作、セッションハイジャックにつながる可能性があります。

セキュリティを甘く見ると、インシデント対応の準備ができていない場合がよくあります。

明確に定めれたインシデント対応計画がなければ、ソフトウェアデベロッパーとセキュリティチームは、セキュリティインシデントの影響を速やかに押さえて軽減するのが大変になる場合があります。

UXPin Mergeでインタラクティブな Web アプリケーションのプロトタイプを構築しよう

本記事では、Web アプリケーション開発の「すること」と「しないこと」をお話ししましたが、さっそく自分の Webアプリを作ってみませんか。

ドラッグ＆ドロップで UI を作成できる UXPin Merge をぜひお試しください。

MUI やその他のオープンソースライブラリから提供されている React UI コンポーネントを使ってデザインすれば、デザインから開発まで１０倍速く進めることができます。UXPin Merge のお試しはこちら。

The post Webアプリケーション開発 – 「すること」と「しないこと」 appeared first on Studio by UXPin.

人々は「ウェブデザイン」と「開発」という言葉を、デザインと開発の両方の分野を表すために用います。インターネットが使われ始めた当初では、この表現は正確だったかもしれませんが、現在では、これらの分野は建築家と建設業者のように区別されるようになりました。

この記事では、「ウェブデザイナーとウェブエンジニアの違い」や「現代のウェブサイトのデザインと開発」について掘り下げていきます。また、異なる分野を理解するために、さまざまなデザインと開発の職種についても見ていきます。

UXPinは、革新的なコードベースのデザインツールで、デザインと開発の間のギャップを埋めるものです。 ベクターグラフィックスをレンダリングする代わりに、HTML、CSS、Javascriptをレンダリングするため、デザイナーはコード化されたウェブサイトと同じ機能を持つ高忠実度のプロトタイプを構築することが可能です。

ウェブデザイン と 開発とは？

ウェブデザインと開発とは、ウェブサイトを構築するエンドツーエンドのプロセスを表す包括的な用語です。ウェブデザイナーは、ウェブサイトのビジュアル表現を作成し、それをHTML、CSS、Javascriptに変換するデベロッパーに渡します。

ウェブデザインとは？

ウェブデザインは、ウェブサイトの視覚的要素、ページ、ナビゲーションを作成することです。ウェブデザイナーは、色、アセット（画像、ロゴ、アイコン）、タイポグラフィー、画面に表示される構成要素などを担当します。また、デスクトップ、タブレット、モバイルなど、複数のデバイスでウェブページをどのように見せるかを決定する必要があります（レスポンシブデザインとも呼ばれます）。

ウェブデザイナーは、ウェブサイトのグラフィック表示やプロトタイプを作成するデザインツールを使って仕事をします。残念ながら、ほとんどのデザインツールはコードをレンダリングしないため、開発者はデザイナーのモックアップやプロトタイプに従ってウェブサイトを作り直さなければなりません。

ウェブ開発とは？

ウェブ開発とは、HTML、CSS、Javascriptを記述し、機能するウェブサイトを作成することです。また、ウェブサーバー、データベース、セキュリティなど、ユーザーの目に触れない部分（バックエンドとも呼ばれる）も担当します。

ウェブ開発には2つの分野があり、両方を担当する開発者（フルスタックデベロッパー）もいれば、どちらかに特化した開発者もいます。

• フロントエンドエンジニア：ウェブサイトやアプリケーションなど、ユーザーが目にするもの（クライアントサイド）および対話するものすべてを開発します。ウェブデザインを機能するウェブサイトやアプリケーションにするためのHTML、CSS、Javascriptを書くのが仕事です。フロントエンド開発者は、ブラウザやデバイスの違いによる情報の表示方法を理解し、その違いを許容するコードを記述する必要があります。
• バックエンドエンジニア：ウェブサイトやアプリケーションを機能させるためのサーバーサイドの環境を構築する。バックエンドデベロッパーの仕事はユーザーには見えませんが、ウェブサイトやアプリケーションの機能やパフォーマンスに大きな影響を与えます。バックエンド開発者は、ユーザーがウェブサイトやアプリケーションからデータを送受信できるように、サーバーやAPI、さらにはAI/機械学習などを扱うため、Python、PHP、Javaなど多くのプログラミング言語の能力が必要です。

ウェブデザインとウェブ開発の歴史について知りたい方は、この魅力的な年表で、1990年から2017年までの各時代の重要な瞬間をハイライトしています。

ウェブデザイン の職種とキャリアパス

ウェブデザインは、多くの役割と分野を包含する広い言葉です。今回は、その中でも特に人気の高いウェブデザインの4つの分野を紹介します。

• UXデザイン
• UIデザイン
• プロダクトデザイン
• デザインオプス

UXデザイン

UX デザイナー （ユーザー・エクスペリエンス・デザイナー）は、ウェブサイトやアプリケーションのユーザビリティとアクセシビリティに焦点を当てます。ユーザー調査やペルソナの作成を通じてお客様の気持ちに寄り添い、お客様のニーズに合ったウェブサイトやアプリケーションをデザインします。

UX デザイナー は、デザイン思考のプロセスに従って、ユーザーの問題を十分に理解し、それを解決する方法を考えます。デザイン思考のプロセスには、以下の5つの段階があります。

1. 共感する： ユーザーが何を必要としているかを発見する
2. 定義 ：解決したい問題を決定します。
3. 考案 ：ユーザーの問題に対する可能な解決策を開発する。
4. プロトタイプ ：プロトタイプを作成する
5. テスト：プロトタイプをユーザーや関係者とともにテストします。

UX デザイナー の仕事には、以下のようなものがあります。

• ユーザー調査
• ワイヤーフレーム、モックアップの作成
• プロトタイピングとテスト
• 競合他社・市場調査
• 情報アーキテクチャ
• ナビゲーション

無料e-Book「UX Design: The Definitive Beginner’s Guide」をダウンロード

（UXデザインについてさらに詳細、ベストプラクティス、専門家のアドバイスなどついて）

UIデザイン

UIデザイン（ユーザーインターフェースデザイン）は、デジタル製品やウェブサイトのビジュアルデザイン要素やインタラクション（ボタン、色、アイコン、タイポグラフィー、画像、フォーム、その他の要素やコンポーネント）の作成を専門とするUXデザイナーのことである。さらに、アニメーションやマイクロインタラクションなどのインタラクティビティも重要な仕事です。

UIデザイナーはデザイン思考の方法論にも従いますが、ユーザーが何をするか、どのようにデバイスを使うかに、より焦点を当てます。その他、UIデザインに特化したスキルをいくつかご紹介します。

• グラフィックデザイン
• インタラクションデザイン
• イラストレーター

UXデザインとUIデザインの違いについては、こちらの記事で詳しく解説しています。

プロダクトデザイン

プロダクトデザイナーは、既存の製品を扱うことを除けば、UXデザイナーと同じような仕事をします。プロダクトデザイナーの仕事の大部分は、ブランドの関連性と競争力を維持しながら、収益を拡大するための製品を開発することです。

プロダクトデザイナーは、ゼロから要素や部品をデザインするのではなく、既存のデザインシステムを使って新しい機能やインターフェースを構築します。UXデザイナーと同様に、プロダクトデザイナーもユーザビリティテストやデザインハンドオフのためにプロトタイプを作成する必要があります。

この記事では、UXデザインとプロダクトデザインの違いについて説明しています。また、エンタープライズプロダクトデザインに関する無料の電子書籍もご用意しています。

DesignOps

DesignOpsは、これら4つの分野の中で最も若い分野ですが、この10年間で人気と重要性を増しています。DesignOpsは、デザインそのものに焦点を当てるのではなく、デザインのプロセスとワークフローを最適化することに着目しています。

DesignOpsは役割であると同時に、考え方でもあります。企業は、誰かが管理しなくてもDesignOpsを導入することができます。企業が成長するにつれ、DesignOpsのリーダーはデザインを拡張し、非効率性を減らし、コラボレーションを改善するのに役立ちます。

UXPin無料eBook「DesignOps 101: Guide to Design Operations」には、世界中のDesignOpsの専門家が執筆した6つの章が含まれています。この本は、DesignOpsとそれが組織に与える影響についての素晴らしい入門書です。また、ここではDesignOpsとデザインにおけるその役割について概説しています。

ウェブデザインと開発の流れ

ここでは、典型的なエンドツーエンドのウェブデザイン・開発プロセスを紹介します。

1. デザイナーとデベロッパーは、新しいウェブサイトや製品の概要を受け取ります。
2. デザイナーは、ユーザーや市場、競合他社の調査から始めます。ペルソナやユーザージャーニーマップを作成し、ユーザーへの共感や問題の本質を理解します。
3. 次に、スケッチやペーパープロトタイプでデザインのアイデアを出します。この手描きのスケッチによって、デザイナーはコラボレーションを容易にし、多くのアイデアを素早く開発することができます。
4. ペーパープロトタイプを数回繰り返した後、デザイナーはウェブサイトやアプリケーションのワイヤーフレームを作成します。ワイヤーフレームは、情報アーキテクチャの設計とナビゲーションのテストに使用されます。
5. 次に、ユーザビリティテストやステークホルダーとの共有のために、製品やウェブサイトのモックアップや忠実度の高いプロトタイプのレプリカを作成します。
6. テストが完了したら、デザイナーはモックアップとプロトタイプを、開発者にデザインを引き継ぐためのドキュメントとともに準備します。
7. 開発者はデザインを参考にしながら、HTML、CSS、Javascriptを駆使してウェブサイトやアプリケーションを構築していきます。デジタル製品をより速く開発するために、フロントエンドフレームワークを使用することもあります。
8. フロントエンドとバックエンドの開発者は、パッケージやAPIなどのツールを使って、ウェブサイトやアプリケーションの機能を強化したり、他の製品（社内外）と連携させたりします。
9. 開発者が開発フェーズを終えると、デザイナーは品質保証プロセスを実施し、デジタル製品の外観と機能が正しく保たれていることを確認します。

UXPinによるエンドツーエンドデザイン

デザイナーは、デザインプロセスのあらゆる段階でUXPinを使用して、ユーザーフロー、ワイヤーフレーム、情報アーキテクチャ、モックアップ、プロトタイプを作成することができます。プレビューと共有機能により、プロトタイプをテストに使用したり、関係者とアイデアを共有したりすることができます。モバイルアプリケーションの設計では、UXPin Mirror を使用して、iOS または Android デバイスでプロトタイプを共有し、テストすることができます。

UIデザイナーは、高度なインタラクションを備えた美しいアイコンやUIコンポーネントを作成し、顧客のための没入型ユーザーエクスペリエンスを実現することができます。

イメージベースのデザインをレンダリングする他のデザインツールとは異なり、UXPinはコードベースなので、プロトタイプに高い忠実度と高い機能性を与えることができます。ここでは、従来のイメージベースのデザインツールにはない、コードベースの4つの機能を紹介します。

• ステート：1つの要素やコンポーネントに複数の状態を適用し、それぞれに異なるプロパティ、インタラクション、アニメーションを持たせることができます。
• インタラクション：高度なアニメーションや条件付き書式設定により、複雑なインタラクションを作成できます。
• 変数：ユーザーの入力を取得、保存し、その情報を使ってアクションを起こしたり、ユーザー体験をパーソナライズすることができます。
• エクスプレッション：Javascriptのような関数で、完全な機能を持つフォームの作成、パスワードの検証、ショッピングカートの更新などを行います。

UXPinでは、デザインプロジェクトと一緒にデザインシステムを作成、管理、拡張することも可能です。製品チームやデザインチームのために、権限を設定したり、ドキュメントやガイドラインを追加することもできます。

UXPinでMUIを使ったデザイン

要素やコンポーネントのデザインを何から始めればいいのかわからないという方もいるのではないでしょうか？UXPinの新しいMUI統合により、MUIのインタラクティブなReactコンポーネントを使用して、完全に機能する高忠実度のプロトタイプを作成することができます。

デザイナーは、ブランドや製品の要件に合わせてMUIコンポーネントをカスタマイズすることができます。デザインのハンドオフ時に、開発者はUXPinからコンポーネントのプロップをコピーして、最終製品を開発します。

カスタムMUIコンポーネントをリポジトリに保存し、Mergeを使用して新しいデザインをUXPinのデザインエディタに同期し、デザイナーが新しい機能をデザインします。

UXPinでウェブデザインと開発を始める準備はできましたか？無料トライアルに登録して、コードベースのデザインツール1つでデザインプロジェクトにどのような革命が起こるかをご体験ください。

The post ウェブデザインと開発の違いとは？わかりやすく！ appeared first on Studio by UXPin.

 ReactJS は、世界で最も使われているフロントエンドライブラリです。このライブラリのコンポーネントベースの手法により、開発チームはプロジェクト全体でコンポーネントを構築して再利用することができ、その結果、ゼロからのプログラミングが減り、開発スピードが上がります。

そこで、本記事では ReactJS のWeb サイト やWebアプリを１５個紹介し、この汎用性の高いフレームワークで何が可能かを実証します。また、製品開発者が特定の成果を達成したり、ReactJSの ウェブサイト のパフォーマンスを最適化するのに使えるツールもご紹介します。

初期段階のプロトタイプから最終的なフロントエンド開発まで、製品開発プロセス全体で ReactJS を使ってみませんか。UXPin Mergeは、Reactベースのコンポーネントをデザインツールに持ち込むことができる画期的なデザインテクノロジーです。Mergeの詳細はこちら。

 ReactJS で構築できるもの

React の開発者は、シンプルなランディングページやWeb サイト から、複雑なゲーム、SNS プラットフォーム、ビジネスアプリに至るまで、あらゆるものにこのフレームワークを使っており、React の柔軟性と汎用性は、レスポンシブWeb サイト やクロスプラットフォームアプリなど、多くのプロジェクトで選ばれています。

コンポーネントベースのWeb開発アプローチにより、デベロッパーは UI（ユーザーインターフェース）を簡単に構築でき、標準的な HTML、CSS、Javascript のワークフローを使うよりも速く、変更とイテレーションを行うために要素を移動させることができます。

Reactは、最も広く使われているプログラミング言語である Javascriptで書かれているため、比較的簡単に習得でき、世界最大級の開発者コミュニティを誇っています。

React を使うべきとき、そうでないとき

Reactは、SNS プラットフォームやニュース出版物、SaaS製品など、シングルページのアプリケーションや複雑なウェブベースのプロジェクトに最適です。

ランディングページ、ネイティブアプリケーション、小規模なWeb サイト などは、別のフロントエンド技術を選択した方が良いケースであり、例えば、iOSやAndroidのネイティブアプリには、React Native やFlutterが適しています。

 ReactJS の ウェブサイト の事例１５選

大規模企業、スタートアップ、SaaS企業、中小企業など、技術スタックにReactを使用している企業を取り揃えました。このリストは、強力な Javascript ライブラリを使って構築されたWeb サイト やWebアプリケーションに対するReactの多用途性を示しています。

１．Facebook

Facebook は、親会社の Meta が２０１２年にフロントエンドライブラリを開発し、現在もオープンソースプロジェクトとして維持しているため、React Webサイトの最も有名な例と言えます。

Metaは当初、Facebook のニュースフィードに React を使っていましたが、現在は同社の製品エコシステム全体でこのライブラリを使っています。React は、誰かが投稿に「いいね！」をしたときに、ページ全体をリロードするのではなく、コンポーネントだけを変更するため、パフォーマンスが大幅に上がり、リソースも少なくて済むため、Facebookにとって大きな改革となりました。

Metaは、Facebook、Facebook Ads Manager、OculusのiOS/AndroidアプリにReact Native（Reactのモバイル版）を使用しています。

２．Repeat

SaaSプラットフォームである「Repeat」では、WebサイトとWebアプリケーションに NextJS が使われています。NextJSでは、フルスタックのWebアプリケーションを作成することができ、それによって「バニラReact 」で可能なことを拡張します。

ちなみに、Repeat のホームページは、レンダリング、ルーティング、アセット最適化など、NextJS の強力な機能によって実現した、動きと没入感のあるアニメーションでいっぱいです。

３．PayPal

PayPal では、６０以上の社内製品に、Microsoft の Fluent Design のReact 版が使われており、その製品には、日常業務に必要なダッシュボードやデータの可視化が多く含まれています。

PayPal も UXPin Merge を使用しており、それによって同社のデザインチームはReact コンポーネントを使ってプロトタイプとテストを行えるようになっています。この「コードからデザイン」のワークフローによって、デザインと開発のギャップが埋められ、デザイナーとソフトウェアエンジニアは同じコンポーネントライブラリで作業できるようになります。

４．Netflix

Netflix では、状態管理に React とReact Redux が使われています。Netflix の公式技術ブログによると、「Reactによって、Node.jsなどのサーバとクライアントの両方のコンテクストで実行可能な JavaScript  UIコードを構築することができるようになりました。」とあります。

Netflix では、ユーザーが HD 動画を高速に読み込むことを予想しているため、パフォーマンスが非常に重要であり、デベロッパーは、ライブDOM（Document Object Model ）操作によるレイテンシーを減らすために仮想DOMを使っています。

また、Netflix は React の Component と Mixin API を使って、「再利用可能なビューの作成、共通機能の共有、機能拡張をしやすくするパターン 」を実現しており、この機能によって、Netflixはユーザーテスト時にコンポーネントをA/Bテストして、最適なソリューションを決定することができます。

５．Product Hunt

Product Hunt も React/NextJS のユーザーです。Facebookのように、Product Hunt は同意とコメントを含む各投稿のマイクロインタラクションの処理が必要です。

６．Puma Campaigns

Gatsby は、パフォーマンスの高いWebサイトやランディングページの開発を実現する React で構築されたフロントエンド技術であり、プーマでは、こちらのランニングシューズ「Velocity」のランディングページをはじめ、キャンペーンのランディングページに「Gatsby」を採用しています。

Gatsbyでは、WordPress、Netlify、Drupal、Contentfulなど、よく使われている CMS プラットフォームをコンテンツ管理に使って、React のWebサイトやアプリケーションを開発することができ、このフレームワークによって、 React の汎用性と、コンテンツチームが好む CMS の利便性がデベロッパーにもたらされます。

React や Angular などのシングルページアプリケーションフレームワークにとって、SEO は大きな問題ですが、Gatsby はこの問題を解決するために、「SEOコンポーネント」を搭載しており、それによって検索エンジンがWebサイトのコンテンツや個々のページをインデックスできるようになります

また、プーマでは iOS と Android のアプリケーションに React Native が使われています。

７．TeamPassword

パスワード管理のスタートアップ企業である TeamPassword は、多くのB2B企業やSaaSプロバイダーで使われているマテリアルデザインを使って開発されたオープンソースのReactコンポーネントライブラリである MUIデザインシステムのカスタマイズバージョンを使用しています。

TeamPassword の開発者は、以前のフレームワークよりもメンテナンスが簡単な React を選びました。２名で構成されるエンジニアリングチームは、UXPin Merge を使っており、それによって React ライブラリをプライベートレポジトリから UXPin のデザインエディターにインポートして、プロトタイプとテストを行うことができます。

８．BBC

BBC（英国放送協会）は React をいち早く採用し、２０１５年にはフロントエンドライブラリとその機能を紹介するワークショップを開催したほどです。

２０２２年、BBCは Vercel の協力のもと、NextJS と Vercel を使ってWebサイトを再構築しました。この再構築により、HMR（Hot Module Replacement）が１.３秒から１３１ミリ秒に短縮され、BBC のような大規模で複雑なWebサイトでは驚異的なパフォーマンスが実現しました。

９．Airbnb

Airbnbは、Android、iOS、React Nativeのモバイルアプリケーション向けのオープンソースのアニメーションツールである「Lottie」の開発で有名なオープンソースプロジェクトの「Airbnb.io」など、同社の製品エコシステムの一部にReactを使用しています。

Airbnb.ioは、Gatsby を使って開発されたWebサイトで、同社のブログ記事やオープンソースプロジェクトの詳細、GitHubレポへのリンクが掲載されています。

１０．Cloudflare

Cloudflare は、２０１５年に Backbone と Marionette から React と Redux に移行し、cf-ui デザインシステムを開発しました。このマルチブランドのデザインシステムは、Cloudflare の社内外のWebサイトや製品に対応しています。

Cloudflare はコンポーネントライブラリの再構築が必要だったため、チームはアクセシビリティに焦点を当て、その過程で以下のオープンソースプロジェクトを作成しました：

• react-modal2,
• a11y-focus-store,
• a11y-focus-scope.

１１．UberEATS

Uber は、Webベースのレストランダッシュボードである「UberEATS」にReact Native を採用しています。チームは、レストランがタブレットでアクセスできるWebアプリケーションを開発する必要があり、そこで React Native の使用を決めました。シングルページのウェブアプリケーションは、UberEATS マーケットプレイスの三者と通信してレストランのレシートプリンターと接続します。

また、Uberは、ReactJS のWebサイトやWebアプリを構築するためのオープンソースのデザインシステムである「Base Web」も開発しました。カスタマイズ性の高いこのデザインシステムは、テーマ設定機能を備えた広範な UI コンポーネントライブラリを誇っています。

関連記事：DPM（デザインプログラムマネージャー）が与える影響とは？

１２．Shopify

Shopify は、Webサイトとウェブアプリケーションに React を、モバイルアプリケーションに React Native が使われており、デベロッパーは、有名な Polaris Design System を使ってShopify 用のReactアプリの構築ができます。

１３．スカイスキャナー

スカイスキャナー は、月に 4,000万以上のアクセスを誇る、最も広く利用されている旅行サイトの１つであり、数百の航空会社や数千のホテルと接続し、旅行データを数秒でユーザーに表示します。

スカイスキャナーは、Webサイトと製品のエコシステムに React と React Native を使用しており、同社の Backpackデザインシステムは、Webとネイティブのコンポーネントを備えた広範なUIライブラリを備えています。

１４．Pinterest

Pinterest も React を使ったSNSプラットフォームの一つであり、同社の Gestalt デザインシステムには、React ウェブアプリとReact Native モバイルアプリケーション（iOSとAndroid）用のコンポーネントが搭載されています。

Pinterestは、React がシングルページのアプリケーションに大規模なパフォーマンスの利点をもたらすもう一つの例です。このWebサイトの有名な無限スクロールは、「遅延読み込み」を使って、６列の画像と動画を驚くほど高速に表示します。

１５．Cuckoo

Cuckoo は英国を拠点とするブロードバンドサプライヤーで、WebサイトにReact とNextJS が使われており、このWebサイトには、ヒーローの大きな回転シーケンスなど、かなりの量のアニメーションがあります。そのアニメーションがWebサイトのパフォーマンスに影響を与えないのは、NextJS の使用の賜物です。

UXPin Mergeで React の ウェブサイト とアプリをプロトタイプする

Webサイトや Webアプリケーションなど、あらゆるデジタル製品において、プロトタイプとテストは極めて重要です。デザイナーは、自分のデザインがユーザーのニーズを解決し、ビジネス価値を提供するものであるかどうかを判断しなければならず、正確な結果を得るには、最終的な製品体験を再現した高品質のプロトタイプを使わないといけません。

Merge は、デザイナーがインタラクティブなプロトタイプを構築できるようにReactコンポーネントをUXPinにインポートする、コードベースのデザインテクノロジーです。このような Mergeコンポーネントは、同じレポジトリから提供されるため、最終製品と同じ忠実度と機能性が備わっています。 – なのでデザイナーのワークフローは変化せず、より質の高い UI 要素を使って作業すればいいだけです。

UXPin Merge のメリットはデザインチームだけにもたらされるわけではありません。Mergeはドラッグ＆ドロップでデザイン環境を構築するため、デベロッパーやその他の非デザイナーでもプロトタイプやテストにアクセスできるようになります。

スタートアップ企業である TeamPassword の 2 名のエンジニアチームは、カスタム MUI の デザイン システムと同期された Merge を、新製品のプロトタイプとテストに使っています。Merge に切り替える前は、TeamPassword はコードでプロトタイプを作成していたため、市場投入までの時間がかかり、会社の競争力を下落とすことになっていました。

UXPin Merge に切り替えてから、TeamPassword は機能をより速く出荷できるようになり、デザインシステムを使うことで UI の一貫性が上がりました。また、TeamPassword は、Reactライブラリを使ってWebサイトのデザインも一新しました。

React Webサイト、Webアプリ、ネイティブアプリ、クロスプラットフォームアプリケーションのいずれを構築する場合でも、UXPin Mergeは、「コードからデザイン」へのシームレスなワークフローにより、デザインと開発のギャップ解消を実現します。

世界最先端のデザインツールを使って、次のデジタル製品をデザインしませんか。詳細とアクセスリクエスト方法については、Mergeのページをぜひご覧ください。

The post Reactが使われているウェブサイトの15事例 appeared first on Studio by UXPin.

Google はレスポンシブ・ウェブデザイン（RWD）を常に推奨しており、特に２０１５年４月２１日にモバイルフレンドリーなサイトを上位に表示する大規模なアップデートが実施された後は、その傾向が顕著です。

ただし、アップデートではレスポンシブデザインを使わなければいけないとは規定されておらず、サイトがモバイルからアクセスでき、いい UX とパフォーマンスを備えていることだけが明記されています。

それを念頭に置いて、パフォーマンスと UX デザインに関して、「アダプティブデザイン」と「レスポンシブデザイン」の長所と短所を検証してみましょう。

Web デザイン用のプロトタイピングツールをお探しでしたら、UXPin がオススメです。様々なブレークポイントを使用できます。こちらから無料トライアルをぜひお試しください。

アダプティブデザイン と レスポンシブデザイン の違い

ではまず、レスポンシブデザイン と アダプティブデザイン の主な違いは何でしょう。

レスポンシブ Web サイトデザイン と アダプティブ Web サイトデザイン

レスポンシブ Web デザインは、画面のサイズに関係なく流動的に適応し、対象デバイスに応じて CSS メディアクエリを使ってスタイルを変更します。これにより、ディスプレイのタイプ、幅、高さなどの要素に基づいて、1 つのクエリだけでレスポンシブ Web サイトがさまざまな画面サイズに適応することができます。

対するアダプティブ Web デザインでは、最初に読み込まれると反応しないブレイクポイントに基づいた静的なレイアウトが使われます。

アダプティブは、画面サイズを検出し、それに適したレイアウトを読み込む仕組みになっており、大体は以下の一般的な画面幅に合わせてアダプティブサイトをデザインすることになります：

• 320
• 480
• 760
• 960
• 1200
• 1600.

一見アダプティブの方が、最低でも６つの幅に対応したレイアウトをデザインしないといけないことから手間がかかるように見えますが、レスポンシブはメディアクエリの不適切な使用（あるいはまったく使用しない）によって、表示やパフォーマンスに問題が生じる可能性があるため、より複雑になる可能性があります。

特に後者については、多くのサイトが完全なデスクトップ モデルを提供しており、モバイル デバイスに読み込まれていない場合でも、サイトの速度が大幅に落ちるため、ここ数年で多くの議論を巻き起こしてきました。この回避にはメディアクエリの使用ができますが、レスポンシブサイトがモバイル専用サイトほど速くなることはないため、若干のトレードオフが発生してしまいます。

Web サイトがレスポンシブかアダプティブかを見分ける方法は

レスポンシブデザインには、さまざまな画面サイズに動的に調整する、より流動的で柔軟なアプローチがあり、アダプティブデザインには、サーバー側の検出によって特定のデバイスや画面サイズに合わせた、事前に定められたレイアウトがあります。

アダプティブな Web サイトを認識する際に、さまざまなデバイスや画面サイズからサイトにアクセスする時に、レイアウトが急激に変化することに気づくかもしれません。これは、事前に設定された特定のレイアウトが読み込まれるためであり、画面サイズに柔軟に対応するのではなく、そのサイズに合わせたレイアウトが用意されているためです。

レスポンシブ Web サイトは流動的なグリッドを使用しているため、レスポンシブ Web サイトを識別するには、ブラウザウィンドウのサイズを変更するか、さまざまなデバイスでサイトを表示し、画面サイズに合わせてレイアウトとコンテンツがどのように再配置されるかを観察するといいでしょう。

アダプティブ Web デザインを使う理由

アダプティブは、既存のサイトを携帯電話向けに改修する際に有用であり、これによって、特定の複数のビューポートに対応したデザインと Web 開発をコントロールすることができます。

デザインするビューポートの数は、完全に自身や会社、そして全体の予算次第ですが、レスポンシブデザインでは必ずしも得られない一定のコントロール（コンテンツやレイアウトなど）が可能です。

そして一般的には、低解像度のビューポート用にデザインすることから始め、UI デザインがコンテンツに制約されないように、またユーザビリティが損なわれないように、順を追ってデザインしていきます。

デザインは、前述の６つの解像度に対応していくのが標準的ですが、最も一般的に使われているデバイスの Web 解析を調べ、そのビューポートに合わせてデザインすることで、より十分な情報に基づいた決定を下すことができます。

ゼロからアダプティブ Web サイトをデザインする場合でも、それは問題ありません。一番低い解像度のデザインから始め、徐々に上げていきましょう。その後、メディアクエリを使って、より高い解像度のビューポート用にレイアウトを拡張するといいでしょう。ただし、さまざまなスクリーンサイズ向けに UI デザインを行った場合、ウィンドウのサイズをデバイスのスクリーンサイズに合わせて変更すると、レイアウトが「ジャンプ」してしまうことがあります。

複数のビューポートに対応したサイトをデザインおよび開発するのは余分な作業になりかねないので、通常は後付けに使われます。

アダプティブ Web デザインの３例

アダプティブ Web デザインを使用しているサイトの例を探すと、おそらく大企業や大規模な組織の Web サイトで見つかるでしょう。その組織の多くは、モバイルが登場する以前から存在しているため、複雑なレスポンシブリデザインを行うよりも、巨大な Web サイトをアダプティブ Web デザインで改修する方がはるかに簡単（かつ安価）ですからね。

では、世界の主要企業が、Google のモバイルフレンドリーなランキング要素への適合に向けて現代的なデザイン要素を取り入れるために、どのようにアダプティブ Web デザインソリューションを活用しているかを見ていきましょう。

１．Amazon

EC の巨大勢力である Amazon は、自社の Web サイトにアダプティブデザインのオーバーホールが必要であることをすぐに見極めました。それによって、世界中の顧客がどのデバイスからサイトにアクセスしても、（Google ランキングの重要な要素の一つである）「より速いページ読み込み速度」と「一貫した UX（ユーザーエクスペリエンス）」を提供することができるようになりました。

Amazon のアダプティブ Web デザインのアプローチで、フルサイトのエクスペリエンスとブランドアプリが整合され、それによってユーザーは２つのアプリを切り替えたり、Web とアプリの見た目のデザインの違いに関係なく、同じ機能とワークフローの配置を堪能することができます。すべてのデバイスでこの一貫性を確保するアダプティブデザインのテンプレートによって、ユーザーは、ナビゲーションの方法を色々と学ばなくても、ブラウズ、ショッピング、チェックアウトを行うことができるのです。

このアプローチにより、Amazon ではページの読み込み速度が最適化され、ユーザーはデスクトップの Web サイトからもモバイルと同様にこの EC プラットフォームにアクセスできるようになります。また、重要な検索バーのような要素は、モバイル向けに最適化された他の様々な機能にもかかわらず、すべてのフォーマットでデザインレイアウトの焦点のままであり、Amazon のアダプティブデザインアプローチは、物事を効率的かつ一貫性を保つ方法の成功例となっています。

２．USA Today

アメリカで人気の日刊紙である USA Todayは、オンラインニュースソースがきちんと人目につくようにするために Web サイトのリニューアルを選択した際、テクノロジーに精通したアダプティブ Web デザインのアプローチを採用しました。‐ これは、レスポンシブ Web デザインでは再現できませんでした。

出典：USA Today

同紙は、 Web サイトとアプリケーションが使用されているデバイス、OS（オペレーティングシステム）、スクリーン・サイズを識別し、それに応じてコンテンツを適応させる技術を採用しました。この革新的なアプローチにより、デベロッパーは上述の一般的な６つの画面幅に制限されない体験を作成することができ、ユーザーにユニークな体験を提供することができました。

３．IHG

アダプティブWeb デザインのアプローチを考えるとき、ホスピタリティ企業は通常、頭に浮かばないでしょう。

しかし、IHG では、顧客はモバイルか PC かに関係なく、より速やかな予約ができる、より速い Web およびアプリの予約体験を求めていることがわかり、ホテル チェーンもそれに応じました。

出典：IHG

IHG では、ほぼすべてのモバイルデバイスに搭載されている、アクセス可能なGPS データと位置情報サービスを活用したアダプティブ Web デザインアプローチを採用したことにより、外出先から地元のホテルを予約できるようなアダプティブ Web サイトのインターフェースが開発され、ユーザーは予約の確認や、利用可能なオファーにサッと簡単にアクセスできるようになりました。

レスポンシブ Web デザインを使う理由

現在、新しいサイトのほとんどではレスポンシブが使われていますが、WordPress、Joomla、Drupal などの CMS （コンテンツ管理システム）のシステムを通じてアクセスできるテーマが利用できるようになったおかげで、経験の浅いデザイナーやデベロッパーでもレスポンシブに対応できるようになりました。

レスポンシブデザインは、アダプティブデザインほどコントロールはできませんが、構築と維持にかかる労力ははるかに少なくなります。また、レスポンシブレイアウトは流動的であり、アダプティブでは拡大縮小時にパーセンテージを使ってより流動的な感覚を与えることができますが、ウィンドウサイズが変更されると再びジャンプが発生する可能性があります。例えば、流動的なレイアウトを示す下の画像では、デザイナーがパーセンテージ幅を使用しているため、ビューはユーザーごとに調整されます。

写真提供： Smashing Magazine

レスポンシブでは、すべてのレイアウトを念頭に置いてデザインすることになりますが、もちろんこれはプロセスがややこしくなったり、非常に複雑になってしまう能性があります。つまり、中解像度用のビューポートを作成することに集中し、後でメディアクエリを使って低解像度や高解像度を調整すればいいということになります。

要するに、新規プロジェクトにはレスポンシブを、改修にはアダプティブを使うのが一般的だということです。

デザインをレスポンシブする方法はこちらの記事をご覧ください：レスポンシブデザインガイド – 簡単な8ステップ

レスポンシブ Web デザインの３例

レスポンシブ Web デザインは、ユーザーにより流動的な体験が求められる新しいサイトや、Google がより注目するサイトに適しています。また、デベロッパーとデザイナーにとってレスポンシブ Web サイトの作成や維持がしやすいことから、世界中の大手テクノロジー企業やデザイン企業の多くに選ばれているデザイン手法でもあります。

次に、レスポンシブ Web デザインを採用したサイトの良例と、それがサイトのパフォーマンスやユーザーエクスペリエンスにどのような影響を与えているかを見てみましょう。ちなみにこれらは、ECやメッセージングの分野で活躍する大手ブランドの要求にも応えています。

１．Slack

企業の間で Slack の人気が急上昇している最大の理由の１つに、ユーザーがメッセージングアプリ導入や使用がしやすいと言う点があり、多数の統合機能と最適化機能を備えたわかりやすいインターフェースを誇る Slack のシンプルさと「人間的」な雰囲気は、その印象的なレスポンシブ Web デザインに反映されています。

デスクトップとモバイル間のアプリの有名な適応性は、ディスプレイがいかにシームレスに遷移してレイアウトを再配置するかによって強調されており、Flexbox と CSS グリッドレイアウトが使われていることで、Slack のレスポンシブインターフェースがワンランク上になっています。

つまり、Slack の Web サイトがアプリと同じであるということであり、それによって、ユーザーは仕事用のノートパソコンや PC と同じシンプルさと使いやすさをモバイルデバイスでも体験することができます。

出典：Slack

２．Shopify

Shopify は、レスポンシブ Web デザインにさまざまな路線を取りました。Webサイトとアプリをさまざまな方向に進め、「１つで事足りる万能な」アプローチではなく、デバイス選択型の最適化を選択したのです。

Shopify のデザイナーは、スクリーンサイズに関係なく、デザイン要素はユーザーが使うスクリーンに合わせるべきだと考えました。そこで Shopify は、（たとえそれが変更を意味する場合でも）全ユーザーが一貫した UX を享受できるようにするため、デバイスの画面サイズに応じて反応するようにサイトをデザインしました。また、色々な CTA（Call to Action）とイラストを多様なサイズとページ上のさまざまな位置で提供しました。

PC やタブレットでは Shopify の CTA や画像がフォームの右側に表示されますが、モバイルではそれらの要素がフォームの下および中央に表示されます。このレスポンシブデザインのアプローチにより、ユーザーはより多様な UX を堪能しながら、スクリーンのサイズに関係なく、最適化されたインタラクション機能を体験することができます。

３．Dribbble

クリエイティブデザインのハブである Dribbble を利用している人なら、このセルフプロモーションとソーシャルネットワーキングプラットフォームが、いいレスポンシブ Web デザインであることがわかるでしょう。このプラットフォームの Web サイトは、閲覧しているデバイスにアクティブに対応し、閲覧体験を上げる柔軟な空間を提供しています。

Dribbble の Web サイトは、スクリーンサイズと連動するフレキシブルなグリッドレイアウトを採用しており、デバイスに応じてシフトするグリッドカラムにレイアウトを適応させることで、ユーザーのインタラクションにアクティブに反応します。つまり、デザイナーはグリッド上に表示されるアイテムを調整し、視認性とアイテム数を最適化できるということです。そしてその結果、ユーザーはごちゃごちゃして見えたり、無秩序に見えたりすることなく、バランスの取れたいい体験を得ることができます。

例えば １３インチのノートパソコンや PC の画面でサイトにアクセスするユーザーには４×３のグリッド構成が表示され、より小さな画面でアクセスするユーザーには同じポートフォリオが1カラム形式で表示されます。

出典：Dribbble

アダプティブ か レスポンシブか？サイトのスピード、コンテンツ、UX の検証

前述したように、レスポンシブサイトは（適切に実装されていなければ）サイトスピードの面で苦戦する可能性があります。

また、レスポンシブでは、アクセスする各スクリーンにサイトを確実にフィットさせるために、コーディングがより多く必要になります。対するアダプティブデザインでは、レイアウトごとに別々の HTML と CSS コードを開発して管理する必要があるため、（アダプティブ・デザインと比較して）余分な作業については議論の余地があります。また、アダプティブサイトの修正は、実装時に SEO、コンテンツ、リンクなど、サイト全体ですべてが機能していることを確認しなければならない可能性が高いため、より複雑です。

もちろん、UX（ユーザーエクスペリエンス）も考慮べきです。レスポンシブでは基本的に、デバイスのウィンドウに合わせて流れるようにコンテンツをシャッフルするため、デザインが移動する際の視覚的な階層に特に注意を払う必要があります。

Nielsen Norman Group では、「レスポンシブデザインは、大きなページ上の要素をより細い長いページに合わせて整理するか、またはその逆を考えるようなパズルの解読のようになってしまうことがよくあるが、要素がページ内に収まるようにするだけでは不十分である。レスポンシブデザインの成功には、デザインはすべての画面解像度とサイズで使用可能でないといけない。」とあります。

つまり、どちらのテクニックを使うにしても近道はなく、両者とも、基本的に「すべてに対応できる」サイトの作成に伴う作業が必要です。ただレスポンシブには、今後はサイトのメンテナンスに膨大な時間を費やす必要がなくなるため、若干の利点があります。

レスポンシブデザイン と アダプティブデザインはどちらがいいのか

結局のところ、重要なのは、どのようなデザイン手法を取り入れるにしても、何よりもまず対象者（オーディエンス）を考慮することです。彼らがどのような人たちで、どのようなデバイスでサイトにアクセスする傾向があるのかを正確に把握すれば、さまざまなレイアウトやコンテンツなどに関して、彼らを念頭に置いたデザインがしやすくなります。

また、既存のサイトがあるか、ゼロから始めるかによっても大きく変わってきます。レスポンシブ デザインは主力のデザイン手法となっており、現在約 1/8 の Web サイトがレスポンシブを使用していると考えられています (一方、アダプティブの使用率についてのデータはほとんどありません)。レスポンシブの採用率も急速に伸びており、単体のモバイル サイトとほぼ同じレベルに達しています。

これらを考慮すると、アダプティブデザインが求める継続的な作業のためだけであれば、通常はレスポンシブが望ましい手法であると言ってもいいでしょう。

ただし、Catchpoint が行ったテストによると、クライアントや企業に予算がある場合は、アダプティブの方が良い選択となる可能性があります。彼らは WordPress で「標準の WP TwentyFourteen レスポンシブ テーマ」と、 「Wiziapp と呼ばれるプラグイン」をの２つを使って２つの Web ページを作成しました。

このプラグインは、ユーザーが Web ページにアクセスしているデバイスに応じてモバイルテーマを提供し、さらにプロセスを効率化できるように高度な設定オプションも提供しています。

読み込み時間の結果がそれを物語っています：

最適化が全く行われていないことが指摘されるべきですが、これでレスポンシブサイトがデスクトップコンピューターに必要なものを全てダウンロードしていることがわかります。つまり、まっさらな状態だと、このテーマはあまり良いパフォーマンスを提供しないということです。

繰り返しになりますが、これはメディアクエリを使うことで克服できますが、上記の例は、レスポンシブ UX デザインが一般的な選択肢である一方で、スマートフォンにとって必ずしもベストではないことを示す良い例です。ただし、より良いものが登場するまでは、適切なコーディングと優れたレスポンシブサイトの実装方法を学ぶ以外に、私たちに何ができるかはまだよくわかりません。

結論ですか？

レスポンシブ デザインは今後も人気があり続けるでしょうが、それは、アダプティブに求められる多大なメンテナンスに対する適切な解決策がまだ見つかっていないからかもしれません。 ただ、Web が明らかにレスポンシブを好むにもかかわらず、アダプティブ Web デザインは廃れていないため、少なくとも理論的には、レスポンシブ Web デザインを吹き飛ばすような改善が現れる可能性があります。

レスポンシブ Web サイトデザインとアダプティブ Web サイトデザイン – よくある間違い 

デザインはイテレーション（繰り返し）のプロセスであり、何がうまくいき、何がうまくいかないかを見極めるまでには、ある程度の試行錯誤が必要です。ただだからといって、レスポンシブ Web デザインとアダプティブ Web デザインの両方をマスターするのに、デザイナーが失敗を重ねて痛い目に遭わないといけないというわけではありません。

それでも、プロセスを遅らせがちな最も一般的な間違いを避けることはできます。

デスクトップ版にこだわりすぎる

モバイルデザインは、デスクトップベースと肩を並べる勢いであり、より小さなデバイスで最適化された UX を提供することで、PC やノートパソコンで見られるデザインの選択肢を凌駕することも少なくありません。ただし、オンライン上のものは大抵デスクトップベースのサイトから始まり、モバイルバージョンは後から登場したことから、多くのプラットフォーム、ツール、サイトがデスクトップ起源に傾き、モバイルは補助的なニーズと見なされています。

デザイナーは、デスクトップ中心の考え方から脱却し、デザインがモバイルで機能する可能性と、それがデザイン思考の進化にどれだけ大きな影響を与えることができるかに焦点を当て、モバイル主導型の仕事へのアプローチに適応し始める必要があります。

これは、複数のスクリーンサイズに対応するデザインに根ざしたアプローチへの移行ということであり、専用デザインが必要とされる可能性が最も高いと言われてきた従来の６つのスクリーンサイズから切り離して、固定比率ではなくパーセンテージをターゲットとするということです。つまり、デスクトップデザインを完全に割り引くという意味ではなく、モバイルとのバランスを取るということになります。

ジェスチャーを考慮しない 

今日のモバイルデバイスのほとんどがタッチ機能を誇り、ユーザーがハードウェアや表面に接触することなく Web サイトをナビゲートできるようになるのは時間の問題ですが、ジェスチャーは、大きな可能性を秘めたレスポンシブウェブデザインの要素として見過ごされがちです。

ジェスチャーを使ったズーム、スワイプ、スクロール、リターンから、指示の伝達や複雑なコマンドの実行に至るまで、レスポンシブデザインはこれらの動きを次のレベルに引き上げるための豊かな土壌ですが、主に、全デバイスで一貫したナビゲーションを実現するジェスチャーアーキテクチャの開発が複雑なことから、デザイナーは、デザインの革命的な側面となりうるこのデザインを避け続けています。

考えられる解決策としては、 Web サイトが他のデバイスでも複製可能な統一された構造に従い、使いやすさと正確さを提供できるようにするというのが一つ挙げられます。

ボタンが小さすぎる 

ボタンが小さすぎて正確に打てないアプリを扱ったことがある人なら誰でも、これがモバイルで一番イライラするデザイン上の問題の一つに挙げられることに異議はないでしょう。デスクトップ版では正確なマウスカーソルの恩恵を享受できますが、小さい画面やモバイルデバイスでは、親指や指はマークを見逃しがちです。

レイアウトと利用可能なスペースを最適化しようとするレスポンシブデザインでは、クリック可能な要素をひとまとめにしたり、小さな画面に合わせて縮小したりする傾向がありますが、これがユーザーのイライラの原因になったり、サイトの正確性、操作性、UX を引き起こしてしまうことがあります。 

なのでデベロッパーは、親指、指、目が全て同じように作られているわけではないことをよく考え、レスポンシブデザインのアプローチによってボタンがどのような影響を受けるかに注意を払わないといけません。

機能性よりもデザインを優先する

デスクトップでもモバイルでも見栄えのする Web サイトは重要ですが、Web サイトは何よりもまず、機能するものであるべきです。魅力的なサイトにアクセスしたユーザーは、当然、その実用性にも同等の努力が払われていると考えるでしょうから、見た目と同じように Web サイトが機能しなければ、そのイライラはすぐ想像がつきますよね。そしてその怒りは、トラフィックや評判の大幅な低下につながりかねません。

デスクトップとモバイルの機能レベルについても同じことが言えます。言いデザインと操作性のベンチマークとなるデスクトップサイトが、モバイルでは全然ダメなようでは、モバイルをまったく意識しない方が賢明です。

さまざまなニッチでテストを行い、効果的なプロトタイプを使って、デザインが機能性に合っていることを確認することで、デベロッパーの認識を超えていきましょう。

モバイル用に別の URL を設ける

デスクトップ版とモバイル版で別々の URL を使うのは、貴重な時間を無駄にして、検索順位にダメージを与えるデザインキラーです。各バージョンを行き来することでユーザーのイライラを引き起こすだけなく、複数の URL を使うというのは SEO のベストプラクティスに反しており、多くの場合不要なことです。

ただ場合によっては、複数の URL を使用すると、デベロッパーはモバイル デバイスでのパフォーマンスが上がる軽量モバイル バージョンの Web サイトを作成できるようになります。ただし、デスクトップ バージョンがモバイルに非常に適している場合に限ります。

将来の維持・開発コストが考慮されていない

開発にはお金がかかりますが、将来のことを考えずに目先の金銭的なことを考えてデザインを決定してしまうことがよくあります。

アダプティブ Web デザインは、その開発に労働集約的な性質があるため、より高い初期投資が必要ですが、そのメンテナンスのコストは一般的に長期的に安定しています。

対するレスポンシブ Web デザインは、予期せぬコストにつながる可能性がありますが、UX の向上から生じる報酬は、そうした金銭的リスクを帳消しにしてくれるかもしれません。

UXPinでUIをデザインしよう

自身でレスポンシブな UI デザインのモックを始めたい場合は、UXPin でするのがおすすめです。このコラボレーションプラットフォームには、あらかじめ設定されたブレークポイントとカスタムのブレークポイントが用意されています。そして完成したら、スペックモードを有効にして、デベロッパーへのデザインハンドオフを自動化しましょう。

UXPin を使って、モバイル、デスクトップ、およびその中間のすべてのプロトタイプを作成しませんか。さまざまなインタラクティブ・プロトタイピング機能を試して、ステークホルダーやエンジニアが理解しやすいデザインを実現しましょう。無料トライアルはこちら。

The post レスポンシブデザイン と アダプティブデザイン： 最良の選択とは appeared first on Studio by UXPin.

 データテーブル は、多くの企業のUXプロジェクトにとって非常に重要なコンポーネントであり、UXデザイナーは、ユーザーのニーズに応じてデータを視覚化してソートするための最適なUXテーブルデザインソリューションを見つけなければいけません。

本記事では、一般的なコンテンツとユーザビリティの問題を解決するために、テーブルUIデザインのベストプラクティスを例を挙げて見ていきます。また、特定のトピックをさらに研究するのに役立つリソースもご紹介します。

主なポイント：

•  データテーブル のUXデザインには、ユーザーが情報を簡単に検索、理解、操作できる方法でデータを整理して表示することが含まれる。
• 効果的なデータテーブルのデザインには、レイアウトの選択、データの構成、見やすさ、ユーザータスクの機能性などが含まれる。
• データテーブル のデザイナーは、読みやすさの優先、視覚的な階層作り、応答性の確保、列の適切な順序付け、より良いUXのためのアクセシビリティに注力すべきである。

データテーブルの UXデザインとプロトタイプは、画像ベースのデザインツールを使うデザイナーにとっては大変です。画像ツールには、ソート、検索、スクロール、アクションなどの基本的なテーブル機能を作成する機能がありませんからね。

UXPin Mergeを使うと、デザイナーは完全に機能するデータテーブルを同期したり、MUIのようなコンポーネントライブラリを使ってテーブルのUXをデザイン、プロトタイプ、テストすることができます。

 データテーブル のデザイン

まずは、ユーザーが情報を視覚化できるように、データテーブルの構造と、これらの要素がどのように組み合わされているか詳しくみてみましょう。

• テーブルヘッダー： データテーブルの各列のラベル
• 行： データベースからの各エントリー
• ツールバー： データを操作するためのツール（検索、編集、削除、設定など）
• ページネーション： 複数ページのデータを表示するための UIパターン
• 行チェックボックス： 単一または複数の行を選択して削除、コピー、処理などのタスクを実行するために使用する。
• 並べ替え： 特定の列を昇順、降順に並べ替えることができる。
• 水平ルール： 各行を区切る水平線（<hr> HTML要素）。

いい データテーブル にするには

いいデータテーブルをデザインするには、主に以下の４つの要素が挙げられます：

1. ​​表示したいコンテンツに適したデータテーブル UI を使う。
2. テーブルのレイアウトとコンテンツの優先順位を正しく設定する。
3. コンテンツを読みやすくする。
4. データテーブルで、ユーザーがタスクを完了するための機能を得られる。

何よりもまず、ユーザーに必要なデータをすべて表示するのに十分なテーブルでないといけません。また、UXデザイナーはデータに正しい優先順位をつけないといけません。

いいデータ表には明確なヘッダーと説明があり、これによってユーザーは自分が何を見ているのかがわかります。また、デザイナーは読みやすいタイポグラフィーを使ったり、列と行の間に適切な間隔をあけて、ユーザーがコンテンツを読みやすく、吸収しやすいようにしないといけません。

最後に（最も重要なことですが）、データテーブルはユーザーにとって使いやすいものでないといけません。ユーザーのニーズを解決し、直感的に使えるものであるべきです。ユーザーがデータテーブルの使い方の習得よりもデータの分析に集中できるように、難なく習得できるものであるべきです。

ユーザーにとって使いやすい データテーブル をデザインする方法

ここでは、ユーザーに優しいデータテーブルをデザインするためのベストプラクティスを見ていきましょう。

データテーブルの読みやすさ

データテーブルのUXにとって、読みやすさは非常に重要です。デザイナーは、以下のような要素を考慮する必要があります：

• 視覚的なノイズを減らす： ユーザーがデータを読んで操作するのに必要なコンテンツと UI 要素のみを表示する。
• 読みやすいフォントを使う：データテーブルの書体、サイズ、空白、文字間隔は、アプリケーションの他の部分とは異なるフォントを使うことになる場合でも、ユーザーがコンテンツを読むのに十分な大きさでないといけない。
• 分離を作る: ユーザーがデータを簡単に区別して吸収できるように、パディング、間隔、配置、および線での分離の作成が有効である。
• 一貫性： ユーザーが必要なものを見つけるためにテーブルをより速くスキャンできるようになるように、フォント、スペーシング、サイジングなどを使うことで、一貫性や親しみやすさを作る。
• 固定ヘッダー： ユーザーが常にコンテキストを把握できるように、スクロールしてもヘッダーは表示されるようにする。

視覚的階層を構成する

読みやすさには、視覚的階層を構成することが関係しています。つまりデザイナーが、タイポグラフィー、サイズ、間隔、その他の要素を使うことで、データが区別され、表が見渡しやすくなります。

• 列と行のヘッダーには、太字と少し大きめのフォントサイズを使う。
• 見出しと表の内容を区別するために網掛けを使う。
• 「ゼブラストライプ」で、行と行の間の区切りができて読みやすくなる。
• リンクには対照的な色を使い、どのコンテンツがクリック可能か分かるようにする。

 データテーブル はレスポンシブでないといけない

UXデザイナーは、ユーザーが日々のタスクをこなしながらテーブルをどのように使うかを理解し、組織全体で一貫したまとまりのあるユーザー体験を作り出さないといけません。

データテーブルは、ユーザーがビジネスのどこででもデータを分析できるように、レスポンシブでないといけません。例えば営業チームは外出先でモバイルデバイスからデータにアクセスしたいかもしれませんし、倉庫の従業員は主にタブレットを使いますよね。

データの関連性に応じて列を並べる

NNグループの記事では、「列のデフォルトの順序は、ユーザーにとってのデータの重要性を反映すべきであり、関連する列は隣接すべきである 」と推奨しています。

UXデザイナーは、関連性に応じて列を並べてグループ化しないといけません。例えば、住所、都市名、国名、郵便番号のような場所の詳細は、一緒でなければならず、これをバラバラに配置すると、ユーザーはカラムを比較するためにテーブルをスクロールしたりスキャンしたりする手間が増えてしまいます。

 データテーブル のアクセシビリティ

WebAIM では、アクセシブルなテーブルを作成するための以下のようなヒントが挙げられています：

• テーブルのキャプション：テーブルを開く要素の後に配置されている HTML要素の<caption>は、スクリーンリーダーにコンテクストを提供する。HTML はエンジニアの責任である一方で、UX デザイナーは、ユーザー調査とテストに基づいて、適切なキャプション記述を提供しないといけない。
• 行と列のヘッダーを識別する： UX デザイナーは、スクリーンリーダーがコンテンツを正しく識別できるように、適切な行見出しと列見出しを使わないといけない。
• データセルを適切なヘッダーに関連付ける： scope属性は、例えば、<th scope=”col”>Name</th> と <th scope=”row”>Jackie</th> など、スクリーンリーダーにヘッダーが行に属するか列に属するかを伝える。また、scope属性で、スクリーンリーダーは、ユーザーが視覚的にスキャンするように、テーブルを簡単に色々と行けるようになる。
• 絶対的なサイジングではなく、比例的なサイジングを使う： ピクセルのセルサイズを固定するのではなく、パーセンテージを使うことで、テーブルを自動的にスクリーンのサイズに合わせることができ、視覚にハンデのあるユーザーにも読みやすくなる。

データテーブルのアクセシビリティに関するその他のリソースとして、以下が挙げられます：

• Creating Accessible Tables by WebAIM（WebAIM による、アクセシブルなテーブルの作成）
• Accessible Tables by the University of Minnesota（ミネソタ大学によるアクセシブルなテーブル）
• Tables Tutorial by Web Accessibility Initiative（Web Accessibility Initiativeによるテーブルのチュートリアル）

複雑なデータテーブルのためのアトミックデザイン

Smashing Magazine社 では、複雑なデータテーブルをデザインするためのアトミックデザインのアプローチが概説されています。アトミックデザインとは、最小のUI要素からデザインし、より複雑なコンポーネント、パターン、UI全体を作成するために徐々に構築していく手法です。

例えば Smashing Magazine社 は、この手法を用いてデータテーブルを以下のように分類しています：

• 原子：フォント、色、アイコン
• 分子：セル、ヘッダー、アクセサリ
• 有機体： 行、列、ページネーション、ツールバー
• テンプレート： 表全体

おすすめの UXテーブル例６選

ここでは、UX テーブルの例６選と、それがユーザーのために解決する問題を見ていきましょう。

１．大規模データセットの水平スクロール

大規模なデータセットでは、多くのカラムに対応するために水平スクロールが必要です。UXデザイナーは、ユーザーにとってどのコンテンツが最も重要かを判断し、常に表示されるものと、スクロールしなければ表示されないものの優先順位を決めないといけません。

この好みは組織全体で変化する可能性があるため、ユーザーが列を並べ替えることで表示されるものを個別化できるようにするというのは、いいユーザー体験を生み出す上で極めて重要です。

ユーザーがスクロールするときに常に参照できるように、最初の列に識別子を置いて固定することをお勧めします。ユーザーが複数の列を固定できるようにするとで、さまざまなデータを比較できるようになります。

２．拡張可能な行と列

拡張可能やサイズ変更が可能な列は、ユーザーのための２つの目的があります：

1. ユーザーが過剰な内容のセルを表示できるようにする。
2. ユーザーが重要でないと判断したコンテンツのセル幅を最小化できるようにする。

UX デザイナーは、視覚的なノイズを減らし、目の前のタスクにとって最も重要なコンテンツを読みやすくするために、行や列を「非表示」にすることも検討できる場合もあります。

拡張可能な行によって、UX デザイナーはユーザーが必要なときにだけ表示される詳細な情報を含めることができます。CodePenの例では、簡単な説明とステータスを持つ一連のジョブカードが示されており、そこでユーザーは、アコーディオンを開いて、追加のメモや仕事のコストを表示することができます。

３．行フォーカスデータ表

このホバー効果により、ユーザーは一度に１つの行にフォーカスすることができます。複数の列やデータポイントがある場合、このエフェクトを使うと、ユーザーは行をハイライトすることができることから、もっと読みやすくなります。

また、UXデザイナーは、他の行をぼかして、１つの行を選びやすくするようにしてもいいかもしれません。

同じような例で、このデータテーブルは特定のセルをホバー効果で強調しています。

４．無限スクロールデータ表

無限スクロールは、データ量の多いテーブルで便利です。ページネーションに代わる優れた方法であり、ユーザーはクリックする代わりにスクロールするだけでより多くのコンテンツを見ることができます。

５．列の並べ替え

列の並べ替えは、ユーザーが好みに応じてデータを並べ替えるのに非常に重要です。たとえば、倉庫管理者は注文を早い順に並べ替えて進捗状況を監視し、問題に早期に対処できます。 また、配送希望に基づいて並べ替えることもでき、同日の注文が締め切り前に発送されるよう順調に進んでいることを確認できます。

６．インラインフィルター

データテーブルのフィルターで、ユーザーは自分の好みを絞り込んで、関連する項目だけを表示することができます。このデータテーブルの例では、ユーザーは複数のフィルターを適用して、必要なものを正確に見つけることができます。そしてこのようなインラインフィルターは、無関係なコンテンツを排除できる大規模なデータセットにとって特に便利です。

UXPinでテーブルをデザインする方法

UXPin は、インタラクティブで忠実度の高いプロトタイプを作成するための高度なプロトタイピングツールです。１つのインタラクションをシミュレートするのに複数の静的なアートボードを作成する代わりに、デザイナーは UXPin で、１つのアートボード「Page（ページ）」を使ってファンクショナルコンポーネントを設計するのにステート（状態）、Variables（変数）、および条件付きインタラクションを利用できます。

また、UXPinでテーブルを挿入するには、「Search All Assets（すべてのアセットを検索）」の検索アイコン（command + F / Ctrl + F）をクリック -> 入力フィールドに「table」と入力 -> 「コンポーネント」見出しの下にある「Table」をクリックします。

テーブルコンポーネントへのデータのインポート

テーブルコンポーネントに実際のデータを入力するには、JSONファイル、CSV ファイル、Google シートなどの外部データソースに接続します。その際、テーブルのスタイリングを行う前にこの作業を行い、デザインするコンテンツのイメージをよく把握しておくのが一番です。

まず、レイヤー名が JSON/CSV/Google Sheet のテーブルヘッダーと一致していることを確認する必要があります。Googleシートでどのように動作するかは、以下の画像を参照してください。

データを同期するには、入力したいレイヤーを選択し、水平ツールバーの 「Fill with Data （データ入力）」のアイコンをクリックして「JSON / CSV / Sheets」に移動します。

ローカルの JSON または CSV ファイルからデータをインポートする場合は「Browse File…（…のファイルを参照）」 をクリックするか、「Import from URL （URL からインポートする）」の入力フィールドに外部の JSON、CSV、または公開されている Google Sheets のファイルの URL を貼り付けます。

その後、構造が正しく一致している場合だと、データはテーブルコンポーネントに表示されます。

テーブルコンポーネントにソート機能を追加する

ステートとインタラクションを使ってデータをソートすることもできます。

まず、新しい状態で異なるレイヤーをすべて選択します (この場合、特定の列のText Layers 全てになります）。 その後、水平ツールバーの「Add State（ステートの追加）」（command+shift+S/ctrl+shift+S）のアイコンをクリックし、「Set State（状態の設定）」入力フィールドを使って新しいステートに名前をつけます。

次に、例えば 数値順、アルファベット順など、好きなように表のセルを並べ替えます。これを行う方法では、別の外部データソース（この場合はGoogle Sheetsが最適）を作成し、新しいデータを取り込むために前の手順を繰り返すのがベストです。

その後、元のステート（デフォルトでは 「Base（ベース）」と表記）に戻します。

最後に、関連するテーブルヘッダーを選択し、「Properties Panel（プロパティパネル）」の 「New Interaction（新しいインタラクション）」のアイコン（「+」）をクリック ->「Set State（ステートの設定）」を選択 ->「Element（要素）」で関連するエレメントを選択 ->「Set state（ステートの設定）」で作成したステート（および指定したい追加設定）を選択します。

テーブルコンポーネントのスタイリング

次に、Component （コンポーネント）のスタイルを設定します。すでに本記事で説明した UXデザインのベストプラクティスに従った方法で構造化され、スタイルが設定されていますが、プロパティパネルを使って、好きなデザインに設定できます。

また、UXPin でデザインシステムを使っている場合、デザインシステムのカラースタイルとテキストスタイルを再利用することで、このステップを短縮できます。それには、スタイルを設定したいレイヤーを選択し、「Design System Library（デザインシステムライブラリ）」のアイコンをクリックしてUXPin のデザインシステムライブラリに移動し、適用したいスタイルを選択します。

ゼロからデザインせずにオープンソースのコンポーネントを使う

もっといい方法は、オープンソースの React コンポーネントを UXPin にインポートするか、ビルトインライブラリのいずれかを使うことです。例えば UXPin Mergeには、MUI、Ant Design、Bootstrapにデータテーブルのコンポーネントがあるので、ライブラリから取り出してキャンバスにドロップするだけです。

そして、データをインポートし、ニーズに合わせてコンポーネントのプロパティを調整すれば、ステークホルダーにデザインを見せる準備が整いました。これで完了です！

そしてテーブルはコードでバックアップされているので、StackBlitzのような開発環境に直接コピーすることができます。

従来、UXデザイナーはプログラミング スキルを必要とするか、HTML、CSS、JavaScript を使用して機能するデータ テーブルを構築するエンジニアに頼る必要がありました。

しかし、UXPin Mergeを使うことで、UXデザイナーは主導権を握ることができ、コンポーネントを使うために 1 行のコードを記述する必要がなくなるのです。 また、エンジニアリングチームからの入力なしで変更を加えたり反復したりすることもできます。気になった方はまずは14日間の無料トライアルでお試しください。

The post 【 データテーブル 】テーブルUIのベストプラクティス appeared first on Studio by UXPin.

Figmaは、美しいモックアップを作成し、他のデザイナーとリアルタイムで連携するための素晴らしいツールです。

ポートフォリオを作成し、自分のスキルをアピールするのに最適なツールのひとつですが、大規模な組織の場合だと、デザインをコードに変換するのが難しいため、Figma では不十分かもしれません。

そこで UXPin の出番です。UXPin で、デザイナーとデベロッパーはコミュニケーションを図り、デザインから開発ワークフローにコピーできる UI コンポーネントの共有ライブラリを使えるようになります。

変換は必要ありません。Figmaプラグインを連携し、UXPinにデザインを取り込んで、より強固なプロトタイピングができるようにしました。

今すぐ無料トライアルにサインアップして、最初のUXPinプロトタイプを作成しましょう！

Figma でデザイン、UXPin でプロトタイプ

わかります。Figma でのデザインっていいですよね！でもUXPinでのプロトタイプが持つ 高い忠実度や機能性もいいですよね。このように迷われている方には、UXPinのFigmaプラグインをおすすめします。「Figmaでモックアップをデザイン、プロトタイプのためにUXPinにコピーする」という両方の長所が得られます。

このワークフローには両方の長所があり、チームが製品と状況に最適なソリューションを導入することを推奨していますが、UXPinを使えば１つのツールで完結します。

UXPinはデザインおよびプロトタイピング ツールとして効果的であり、画像ベースのツールで可能な範囲を超えて UXを広げる機能を提供しています。

UXPinとFigmaでプロトタイプを作成するのが理に適っている理由

Figma、Adobe XD、Sketch などは静的なベクター グラフィックをレンダリングするため、デザイナーはコードを複製できず、複製する場合は多大な労力や回避策、追加のツールが必要になります

UXPin はコードベースのデザインツールです。これは、デザイナーがコードを扱うという意味ではなく、UXPin は HTML、CSS、JavaScript をバックグラウンドでレンダリングして、デザイナーにコードと同じ忠実性と機能を提供するということです。

そして、コードによる以下の４つの機能により、デザイナーは UXPin でより高度なプロトタイプを作成することができます。

１．ステート（状態）

UXPin のステートでは、１つのコンポーネントに対して複数のステートを作成できます。例えば、ボタンはユーザーのインタラクションによってトリガーされるさまざまなプロパティを含む複数のステートを持つことができます。

また、機能的なドロップダウンメニュー、ステッパー、カルーセル、アコーディオンなどの複雑なコンポーネントを作成することもできます。

２．インタラクション

デザイナーは、デザインツールの制限ではなく、コードに制約された複雑なUXPin のインタラクションを作成できます。また、UXPinには、没入感のあるプロトタイプ体験をデザインするためのトリガー、アクション、アニメーションも多数あります。

デザインチームは、「if-then」や「if-else」条件の条件付きインタラクションによって、ユーザーの入力やトリガーに反応する動的なプロトタイプを作成できます。

そしてデザイナーは、この Javascript のようなインタラクティブ性により、デザインの決定が UXにどのような影響を与えるかを確認し、改善すべき点を突き止めることができます。

このような現実的な相互作用により、ステークホルダーとエンジニアには、より生産的なフィードバックのプロセスやデザインハンドオフにするための説明が殆ど要らなくなります。

３．バリアブル（変数）

Figmaなどの大抵のデザインツールでは、フォームをテストするのは不可能です。なぜか？フィールドが入力ではなく画像だからです。

その点 UXPin では、フォームフィールドはまるでエンジニアが開発したかのように機能し、テキスト入力、チェックボックス、ラジオ、セレクト/ドロップダウン、複数選択、ボタンをすぐに使えます。

バリアブル（変数）を使うと、デザイナーはプロトタイプからユーザ入力をキャプチャし、アプリケーションの他の場所でそのデータを使うことができます。

例えば、サインアップ中にユーザーの情報を取得したり、個別化されたウェルカムメッセージを作成するために名前フィールドを使ったりできます。

４．Expression

UXPin の Expressionで、他のデザインツールの可能性をはるかに超えるプロトタイプが実現します。

パスワードやその他のフォームフィールドの検証、ユーザーの操作に基づいて更新されるショッピング カートのデザイン、動的なエラー メッセージの作成などができます。

そしてデザイナーは、ステート、インタラクション、バリアブルなどの他の UXPin機能が組み合わさると、 Expressionによって、プロトタイプや、コードと見分けがつかないユーザーフローを構築できるようになります。

このような機能やその他の高度な UXPin機能についての詳細は、UXデザインのインフルエンサーであるジェシー・ショウォルター氏によるYouTube のチュートリアルでぜひご覧ください。

Figmaのモックアップをインタラクティブな UXPinプロトタイプにする５つの理由

１．高忠実度（Hi-Fi）プロトタイプ

• Figma：美しく見えるベクター・モックアップであるが、実際の機能性や忠実さは再現されないため、デベロッパーやステークホルダーにとってはプロトタイプの解釈が大変になる。
• UXPin：コードのような忠実性と機能により、デザイナーは最終製品と区別できない没入型の動的なプロトタイプの体験を作成できる。‐ つまり、ドキュメントが要らなくなり、デザインハンドオフがスムーズになり、市場投入までの時間が短縮される。

Figma、Sketch、Adobe XD などが作成するものである、忠実度の高いモックアップと、見た目も感触も最終製品と同じ高忠実度のプロトタイプとの間には大きな違いがあります。

UXPin だと、プロトタイプがコードのようにユーザーのインタラクションに応答するため、プロトタイプの説明がほとんどまたはまったく必要ない、真の高忠実度の結果がもたらされます。

２．UI デザインと本当のプロトタイプのギャップを埋める

• Figma：Figma で UI デザインのアイデアをデザインおよび開発する。
• UXPin：Figma の限界を超え、UXPin で高度なプロトタイプを作成する。

Figma には、美しいデザインやモックアップを作成するための機能が備わっていますが、デザイナーはプロトタイプの段階で壁にぶつかってしまいます。

そこで UXPin の Figmaプラグインで、デザインチームは UXPin で忠実度の高いプロトタイプを作成するのに、両方のツールの長所を活用することができます。

UXPinでUIデザインの変更と反復を行うか、デザインと編集にFigmaを使って、プロトタイピングツールとしてのみ使うのかは、お任せします！

３．ユーザーテストの強化

• Figma：テストは基本的なクリック／タップのインタラクション、ユーザーフロー、ナビゲーションに限定される。
• UXPin：最終製品を正確に再現する没入型プロトタイプ

Figma のベクターベースの制約と限界は、正確なテストの妨げになります。デザイナーは、は基本的な対話性を実現するために複数のフレームを使わなければならず、多くのコンポーネントは再現できません。

一方、コードベースのデザインツールである UXPin を使うと、デザイナーはコードを１行も書くことなく、デベロッパーが構築できるものの実現可能性がある制限されたプロトタイプを構築できます。このような複雑で動的なプロトタイプで、UXは向上し、デザインチームはビジネスチャンスを特定するための貴重なインサイト得られます。

また、デザイナーは、UXPin プロトタイプを使ってテストするときに、重要なユーザビリティとアクセシビリティの問題も正確に指摘することから、それで UX負債が減り、より高品質なデザインプロジェクトの成果が得られます。

４．より速い反復（イテレーション）

• Figma：最終製品の動作を模倣するための複数のフレームとコンポーネント – 変更や再デザインは時間を食う。
• UXPin：レイヤーとステートを１つの画面で使い、数回のクリックで変更が可能。

Figma でのプロトタイプの課題の１つに、デザイナーが、コードのインタラクティブ性を模倣するのに複数のフレームやコンポーネントを作成しないといけないという点があります。またそのインタラクションは、ぎこちなく、直感的ではない上に、デザインや変更には時間がかかります。

UXPin では、デザイナーは「ページ」と「レイヤー」で作業します。複数のフレームやページを切り替える代わりに、１つのキャンバス上で作業し、プロパティパネルで変更を加えます。

また、このワークフローは、より直感的で、より速い反復を促進することから、デザイナーはより速く問題を解決することができます。

５．より円滑なデザインハンドオフ

• Figma：多くのドキュメント、デベロッパーとのやり取り、インタラクションを模倣したビデオ/GIF、他のツールへのリンク。
• UXPin：プロトタイプは最終製品のエクスペリエンスとインタラクティブ性を再現し、それによって長いドキュメントや追加ツールの必要性が軽減される。

デザイナーは、After Effectsなどのツールを使ってモーションやインタラクションを再現することが多いです。なぜか？デザインツールには忠実さと機能性がないからです。また、デザイナーは技術的な制約のためにエンジニアが再現できないトランジションやインタラクションを作成しますが、その際に複数のツールやファイルを切り替えるのは、混乱を招き、時間がかかり、エラーが増えます。

UXPin を使えば、コードを正確に模倣したコンポーネントやインタラクションをデザインできるので、デザイナーは追加のツールを使う必要がありません。また、プロトタイプが何をするものかを説明するためのビデオや GIF、行ったり来たりのやり取り、長ったらしい PDF は必要ありません。

そして、デザイナーは UXPin でプロトタイプに注釈を加えたドキュメントを作成できるため、エンジニアやステークホルダーは複数のファイルを切り替える必要はありません ‐ すべて一箇所に集約されています！それでデベロッパーやステークホルダーは、UXPinのプレビュー上のコメント機能を使って、質問したり、チームメンバーをタグ付けしたり、編集用のコメントを割り当てることができます。

現実的なプロトタイプやサポート用ドキュメント、連携が一箇所にあるため、デザインハンドオフがよりスムーズになってより摩擦が少ないものになります。

UXPin – エンドツーエンドのデザインソリューション

Figma でデザインし、UXPin でプロトタイプを作成することはできますが、それは、ツールが１つしか要らないのに２つ使うということになります！

UXPinの場合、コラボレーション、ワイヤーフレーム作成、情報アーキテクチャデザイン、モックアップ、ゼロからのコンポーネントデザインなど、Figmaと同等のデザイン体験を得られます！

UXPin のエンドツーエンドのデザインソリューションでは、デザインシステムの構築、管理、共有など、UXPin 内ですべて行うことができるため、デザイナーはツールを切り替える必要がありません。

そして使うツールが減ると、UX ワークフローが効率化されるだけでなく、コストが削減され、デザインリーダーは貴重なリソースを他に当てることができるようになります。

また、ステークホルダーに画像ベースのプロトタイプとそれに付随するドキュメントを読み解く時間や忍耐力がほとんどなくても、UXPin のプロトタイプは説明が少なくて済むため、ステークホルダーは最終的な製品体験を楽しむことができます。

そしてこの没入型体験は、デザインソリューションへの賛同を高めながら、ステークホルダーから有意義なフィードバックを引き出してくれます。

画像ベースのデザインの制限に別れを告げ、UXPinを使ってプロトタイプ、連携、デザインの成果上げませんか。

無料トライアルにサインアップして、UXPin がどのように製品デザインのワークフローに革命を起こして優れたUXを提供できるかをぜひご覧ください。

The post Figmaのデザイン をインタラクティブなプロトタイプに変える appeared first on Studio by UXPin.

Web サイトの構造で、ユーザーはサイトをナビゲートし、探している情報を見つけることができます。

本記事では、サイト構造がデザイナーにとって重要な理由と、デザイナーが効果的なサイト構造を作成する方法について説明します。

主なポイント：

• Webサイト構造とは、Webサイトのコンテンツやページがどのように構成され、相互につながっているかを示すものである。
• Webページの階層配置とその相互関係が含まれる。
• Web サイト構造で、訪問者や検索エンジンはWebサイトのコンテンツをナビゲートして理解することができる。
• Web サイトアーキテクチャには、階層型、シーケンス型、マトリックス型、データベース型の４種類がある。

新しいサイトのデザインですか？ UXPin を使って、Web サイトのアーキテクチャを構築し、実行可能なプロトタイプに変換しませんか。

UXPin は、UIとUXデザインプロセスからデザインのハンドオフまでをシンプルにするエンドツーエンドのソリューションです。ぜひ今すぐ UXPin をお試しください。

Webサイト構造 とは

Web サイト構造とは、Web サイト内のさまざまな要素やページの構成やレイアウトのことであり、サイト内のさまざまなページが、内部リンクやその階層構造を通じて、どのように互いにリンクされているかということです。

これは、Web クローラーがコンテクストを適切に読み取れる一方で、ユーザーがサイト内を移動する方法を知ることができるように、サイト上の情報がどのように編成され、表示されるかということになります。

いい Web サイト構造だと、ユーザーにとってもクローラーにとってもナビゲーションがしやすくなり、それは UX（ユーザーエクスペリエンス）だけでなく、検索エンジンにおける Web サイトの SEO ランキングにも影響します。

デザイナーにとって Web サイトの構造が重要な理由

 UXデザイナーの役割は、アクセシビリティに配慮した使いやすく素晴らしい UX を備えた Web サイト の制作です。

いい Web サイト構造だと、ユーザーが探しているものを見つけやすくなり、Web サイトのユーザビリティや使いやすさが上がります。

Webサイト構造４種

UX デザインで使う Web 構造には、階層型、シーケンス型、マトリックス型、データベース型など、さまざまな種類がありますが、それはどのようなものなのでしょうか。

階層型 Webサイト構造 

階層型構造は、最も一般的な Web サイト構造で、親ページ（メインページ）１つと、メインページから流れてくる子ページ（カテゴリやサブカテゴリ）を基本とする階層構造です。例えば UXPin のページ（上の画像）を思い浮かべてください。

この構造の例 として、UXPin の Web サイトが挙げられます。ナビゲーションバーと Web サイトのフッターで、さまざまな子ページに移動できる Home ページのスクリーンショットを見ることができます。

その際、ユーザーはページをクリックして移動することができますが、必要に応じてすぐに Home ページに戻ることができます。

また、この Web サイトは、アカウントを作成してプラットフォームの機能を探索するための一連の手順をユーザーに案内するように設計されています。

シーケンス型 Webサイト構造

シーケンス型 Web サイト構造とは、ユーザーを一連のステップやコンテンツの特定の順序に誘導して、望ましい結果や体験を達成させるデザイン手法あり、ストーリーを語ったり、プロセスを提示したり、論理的な進行でユーザーを導きたい場合に特に効果的です。また、集中的かつ直線的な情報の流れが確保されるため、ユーザーはコンテンツの理解や関わりがしやすくなります。

シーケンス型構造の模範的な例としては、ニュースレターで紹介されている Growth Design の UX のケーススタディページが挙げられます。これに関連して、UX ケーススタディのページは情報を段階的に提示するために細心の注意を払って編成されており、それによって、ユーザーはプロジェクトやデザインプロセスの進化を追跡できるようになっています。また、各ステップは前のステップの上に構築されていることから、話に一貫性ができ、紹介された作品をより深く理解できるようになっています。

Growth Design の UX のケーススタディページにあるように、シーケンス型 Web サイト構造の主な特徴には次のようなものがあります：

• 明確な進行 – 各ステップやセクションは、論理的に前のステップやセクションに続いており、スムーズで明確な進行を作り出している。
• 惹きつけるストーリーテリング – 構造がストーリーテリングを促進し、それによってユーザーを魅了して、その興味を維持する物語の表現ができるようになる。
• 視覚的階層 – 画像、図表、マルチメディアなどの視覚的要素を戦略的に使用することで、階層を強化し、シーケンスのキーポイントを強調する。
• 集中的なユーザージャーニー – ユーザーは事前に定められた経路に沿って誘導されるため、認知的な過負荷が軽減され、構造的に情報を吸収しやすくなる。
• CTA（コールトゥアクション）の統合 – シーケンスの適切なポイントに関連する CTA を統合し、ユーザーインタラクションを促進したり、特定のアクションを促したりする。

マトリックス型 Web 構造

組織用語での「マトリックス型構造」とは、従業員が機能マネジャーとプロジェクトマネジャーの両方に同時に報告する管理手法を指します。この二重の報告システムによって、より柔軟性が増し、機能的な専門知識とプロジェクト指向の目標のバランスが取れるようになります。

マトリックス構造は、Web サイトの構造、特にニューヨークタイムズのようなオンライン新聞では一般的ですが、複雑で多次元的なサイトアーキテクチャを表現するメタファーとして使うことができます。

オンライン新聞のマトリックス型 Web サイト構造は以下のようになります：

• コンテンツカテゴリー – ニュース、オピニオン、ビジネス、テクノロジーなど、さまざまなコンテンツカテゴリーで構成されており、各カテゴリは、独自の専門知識とコンテンツ制作者を備えた機能領域として機能する。
• ダイナミック（動的）な Home ページ – Home ページは動的なダッシュボードとして機能し、さまざまなカテゴリにわたる最新ニュースを組み合わせて表示する。その際、トップ記事、トレンドのトピック、マルチメディア コンテンツを組み合わせたものを特集する場合があり、それによって厳密に階層化されたプレゼンテーションから逸脱したものになる。
• 検索機能 – Web サイトには、強力な検索機能が統合されている。ユーザーはキーワード、トピック、著者名を入力することができ、検索結果は、さまざまなカテゴリーやセクションから動的にコンテンツを引き出し、それによってマトリックスのような相互関係が反映される。
• 多次元ナビゲーション – ユーザーは自分の興味に基づいて Web サイトをナビゲートし、ナビゲーションは厳密に階層化されているわけではない。その代わりに多次元的で、ユーザーはさまざまな次元を同時に探索することができ、特定のカテゴリーを追うことも、横断的なトピックをシームレスに掘り下げることもできる。
• ユーザーの個別化 – マトリックス型構造で、読者が好みに基づいてニュースフィードをカスタマイズできる「ユーザーの個別化」が実現でき、そのカスタマイズには、お気に入りのカテゴリーの選択や、特定の著者のフォロー、カスタマイズされたオススメの受け取りなどが含まれる。

階層モデルは明確で構造化された経路を提供しますが、オンライン新聞のマトリックス型構造は、より動的で相互接続されたアプローチを取り入れており、読者の多様な興味への対応や、多次元にわたる探索の促進、デジタル時代のニュース情勢の複雑さを反映しています。

データベース型 Webサイト構造 

データベース型モデルは、「ダイナミック Web サイト構造」とも呼ばれ、ユーザーが作成したコンテンツを多く含むサイトに普及しているモデルです。コンテンツを動的に保存、管理、検索するためにデータベースに依存し、柔軟性、拡張性、リアルタイムの双方向性を提供するのが特徴です。

固定のコンテンツがある静的な Web サイトとは異なり、データベース型モデルにはコンテンツの管理と表示に柔軟性があります。コンテンツは、データベースとのインタラクションを通じて簡単に追加、編集、削除することができ、ユーザーの貢献に基づいて Web サイトを進化させることができます。

例えば Pinterest のようなサイトを考えてみましょう。このサイトは、投稿、「いいね！」、コメント、ピン、その他の投稿など、ユーザーによって作り出されるコンテンツに依存しており、データベースは、このダイナミックなユーザー生成データを保存や検索するための中央レポジトリとして機能します。

ユーザーは、リアルタイムでのサイトの操作や、コンテンツの送信、動的機能の利用ができます。そして、カスタマイズされたユーザープロファイルやコンテンツのオススメなどのパーソナライゼーション機能は、多くの場合データベース主導のインサイトに基づいて実装されます。

ユーザー生成コンテンツの性質を考慮し、データベース型モデルを使う Web サイトは、品質とコミュニティガイドラインの遵守を保証するために、強固なコンテンツモデレーションツールが組み込まれています。また、動的なコンテンツ投稿に関連する潜在的な脅威から保護するために、セキュリティ対策も実施されています。

最適な Webサイト構造 の選び方

Web サイトの構造を作成するには、サイト上のコンテンツ（Home ページ、カテゴリー、個別ページ、ブログ記事）をどのように整理するかをマッピング（図面化）する必要があり、これが、Web サイトの構造化が Web デザインプロジェクトの最初のステップであるべき理由です。

いい Web サイト構造の基本原則は、IA（情報アーキテクチャ）であり、IA で、コンテンツが効果的かつ一貫して整理され、構造化され、ラベル付けされていることが保証されます。

サイトの情報アーキテクチャをデザインするには、以下の要素を考慮しましょう：

• ユーザージャーニー： Web サイトはユーザーにサービスを提供するために作られるため、ユーザーがどのようにそのサイトを体験し、どのようにやりとりするか、また、その Web サイトがどのように機能するかに対するユーザーの期待を考慮することが重要である。その際、ユーザーへのインタビューやカードソートを行うことで、ユーザーのジャーニーを特定することができる。
• コンテンツ： Web サイト構造は、サイトのコンテンツの種類と量によっても大きく左右される。例えば ECサイトの構造は、学術サイトの構造とは異なる。UX コンテンツについてさらに読む：UX コンテンツ戦略 【作成方法や４つのポイント】
• コンテクスト： Web サイトのコンテクストは、そのビジネスの目標、その Web サイトが存在する文化的背景、そして利用可能なリソースによって決められ、Web サイトを構成する際には、この事実を考慮することが重要である。

Web サイト 構造の主な要素

Web サイトの階層構造に注目してみましょう。これは、企業 Web サイト、EC ストア、一般的なブログなど、ほとんどのコンテンツ Web サイトが基づいている構造です。

では、その各要素について、デザインプロセスでどのように最適化できるかを見てみましょう。

Home ページの Web 構成

Home ページは、Web サイトの階層構造の最上位ページであり、ユーザーがWeb サイトをナビゲートする中心的な場所です。なので、Web サイト上の重要なページが全てこのページからリンクされていることを確認してください。Home ページと主要なカテゴリーページとの関係は、Home ページのメニューまたはメインナビゲーションによって表されます。

以下で、Web サイトに役立つナビゲーション／メニューをデザインする方法を見てみましょう。

ナビゲーションまたはメニューの Web 構造

サイト訪問者は、Web サイト上の情報の構造を理解し、探しているものを見つけるためにナビゲーションを使います。なのでメニューやメインナビゲーションには、主要なカテゴリーページがすべて表示されるようにしましょう。また、ナビゲーションを作成する際には、以下のルールに従ってください：

• 各要素には短いフレーズ、あるいは単語を１つだけ使う。
• ユーザーが理解できる簡潔な言葉を使う。
• ナビゲーションをサイトリンクでごちゃごちゃにしない。

Apple のメインナビゲーションは、このルールに従って、シンプルだけど超便利なメニューを作り出しています。

もしサイトに、アカウント情報などユーザーにとって便利なサブカテゴリーがある場合は、Asos のように二次的なバーティカルメニューを作るといいでしょう。

プライバシーポリシーや免責事項、法的情報などのユーティリティページのようなその他の有用なカテゴリは、Web サイトのフッターに配置するといいでしょう。

カテゴリーとサブカテゴリーの Web 構造のベストプラクティス

カテゴリーを使って、似たようなコンテンツを持つ Web サイトページをグループ化することで、ユーザーがコンテンツにアクセスしやすくなります。例えばブログ記事は「マーケティング」などのカテゴリーにグループ化し、さらに「ランディングページ」や「メールマーケティング」などのサブカテゴリーに細分化することができます。

また、EC Web サイトをデザインしている場合は、商品を「男性用」「女性用」などのカテゴリーに分類することができます。カテゴリーが多すぎる場合は、さらにサブカテゴリーに細分化するといいでしょう。EC ストアの例を続けると、女性カテゴリーには「洋服」、「靴」、「バッグ」などのサブカテゴリーがあるといいでしょう。

その好例が、Asos Marketplace の Web サイトで、衣料品カテゴリーには、「水着」、「スウェット」、「ジャージ」、「パーカー」など、その店で購入できる衣料品の種類を示すサブカテゴリーがあります。

個別ページの Web 構造に関するヒント

個々の Web サイトのページやブログ記事を、ユーザーが探しているものを見つけやすく、似たようなコンテンツを見つけやすく、Web サイトのどこにいるのかを理解しやすいように構造化することが重要です。その際、パンくずリスト、タグ、コンテクストサイトリンクが、個々のページの IA を構造化するのに使われます。

個々のページにつけるヘッダーに気をつけましょう。例えば、ブログ記事のタイトルは H1（見出し１）であり、そのすべてにメタデータがあるなど、正しい順序に従っていることを確認してください。

メタデータも UX の重要な一部です。そのサイトが何について書かれているのか、ユーザーを混乱させたくありませんよね。

パンくずリストを使う

ページや投稿にパンくずリストという形でナビゲーションを追加することができます。パンくずリストはクリック可能なサイトリンクで構成され、ユーザーがサイト内のどこにいるのか、サイト構造を正確に示します。

例えば Mailchimp が使っているようなパンくずリストだと、ユーザビリティや UX（ユーザーエクスペリエンス）が上がります。

タグとカテゴリーの追加

タグは、特定のページで似たようなコンテンツをグループ化するもう一つの便利な方法です。タグとカテゴリーの違いは、カテゴリーには階層があり、さらにサブカテゴリーに細分化できますが、タグには階層はなく、単に似たようなコンテンツをグループ化するだけです。

例えば、Grammarly のブログでは、「ハウツー」、「製品」、「インスピレーション」などのカテゴリーやタグを使ってブログのコンテンツをグループ化しています。

このようなタグの有用性は、ユーザーが「ハウツー」とタグ付けされた記事の一つをクリックすると、ブログ記事の最後に同じく「ハウツー」とタグ付けされた他の記事が表示されることで示されます。これは、Web サイトの構造によってユーザーが情報を見つけやすくなっていることを示すいい例です。

また、タグは EC サイトで、商品をブランド別にグループ化し、類似商品にユーザーを誘導するために使用することもできます。

タグ作成のためのベストプラクティスを以下に３つ挙げてみましょう：

1. タグの数を増やしすぎたり、記事ごとに新しいタグを作らないようにする。
2. タグは、サイドバーやブログ記事／商品ページの最後など、サイト訪問者が目にしやすい場所に設置する。
3. タグはクリック可能な状態にし、ユーザーが必要であれば類似のコンテンツを閲覧できるようにする。

コンテクストリンク 

これは、他の Web ページ上の他の関連コンテンツを指す Web ページまたはブログ投稿上のリンクであり、コンテクストリンクは、ユーザーに関連するコンテンツを表示するのに便利です。そしてブログ投稿のコンテクストでは、コンテクストリンクを使って、同様のコンテンツを持つ他のブログ投稿をユーザーに示すことができます。例えば Grammarly は、以下に示すように、ブログ投稿でそれを行っています。

また、コンテクストリンクは、EC サイトで、関連商品、他の人が買った商品、よく一緒に買われる商品などのページにリンクするために使うこともできます。

 Webサイト構造 をデザインに手軽に取り入れよう

Web 構造とは、Web サイト上で情報がどのように整理され、相互に接続されているかということです。

効果的なサイト構造だとユーザビリティや UXが向上する上で、Web構造化はWeb デザインのプロセスの重要なステップとなります。

そして UXPin デザインツールを使えば、他のチームメンバーやデザイナーと協力しながら、Web サイトのデザイン、プロトタイプ作成、構造化を簡単に行うことができます。ぜひ今すぐ UXPin をお試しください。

The post 実例で学ぶ Webサイト構造 入門 appeared first on Studio by UXPin.

ソフトウェアや Web開発には、初期コンセプトからデザイン、納品、QA、ライフサイクル管理まで、多くの役割と責任があります。UIデザインと UI開発 には、ユーザーがどのように UI（ユーザーインターフェース）と関わり対話をするかに影響を与える重要な役割があります。

そこで本記事では、UIデザインと  UI開発 の内容、これらの役割を支える人々、そしてデジタル製品を提供するためにどのように協力しているかを比較していきます。

主なポイント：

• UIデザインは製品のUI（ユーザーインターフェース）をデザインするプロセスであり、UI開発はそのデザインをプログラミングするプロセスである。
• UI デザインと UI開発は、ソフトウェア開発プロセスの対極にある。
• UIデザイナーとUIデベロッパーは、有用で、持続可能で、実現可能な製品を作るために協力する。

サクッと開発できるUIデザインを構築しませんか。UXPinのデザインエディターでReact、Storybook、npmのコンポーネントを使って、素早く制作できるプロトタイプを作成しましょう。詳しくは UXPin Mergeのページをぜひご覧ください。

UIデザインとは

UIデザインとは、UIの要素、レイアウト、インタラクション（ユーザーが見て、操作するもの全て）をデザインするプロセスのことをいいます。その要素には、画像、アニメーション、スライダー、テキストフィールド、ボタンなどが含まれます。また、UX（ユーザーエクスペリエンス）デザインと同様に、ユーザーのニーズとテストに基づいて決められます。

UIデザインで行うこと

UIデザイナーは、ユーザーが操作するデジタル製品やアプリケーションの視覚的要素をデザインする役割を担っており、全体的なUXの向上だけでなく、与えられたUI内でどのようなアクションが可能であるかを伝える、ユーザーに優しく見た目的にも美しいインターフェースを作成することに主に焦点を当てています。（例：ボタンのクリックやホームページへの移動、文字入力など）

UI デザイナーのスキルと責任

UIデザイナーは、UIデザインプロセスの責任者であり、その役割には以下が含まれます：

• 製品の美観：ブランディング、ビジュアルデザイン
• リサーチ：使用状況やユーザーの把握
• テスト：ユーザーにとってわかりやすいデザインであることの確認
• デザイン：プロトタイプ、モックアップ、インタラクションデザイン、アニメーション、ビューポートレイアウト（レスポンシブデザイン）の作成

UIデザイナーに求められる資質およびスキルセット

• ビジュアル面での創造性
• Webデザイン
• グラフィックデザイン
• デザイン原理およびデザイン思考
• ビジュアルデザインへの興味
• ユーザージャーニーとペルソナ
• ユーザーリサーチ
• タイポグラフィ
• 形と機能のバランス
• ユーザーのインタラクションと行動への注目
• タスク指向

UIデザインプロセスとは

UIデザイナーは、他のUX担当と同じデザイン思考プロセスに従いますが、フレームワークの中では以下のようにさまざまなことを行います：

• 共感：ユーザーの環境、動き、行動に焦点を当てる。
• 定義：ユーザーが目標を達成するために必要な各ステップに焦点を当てる。
• アイデア出し：ユーザーが製品をナビゲートするために必要な要素やコンポーネントについて見る。
• プロトタイプ：忠実度の高いプロトタイプのためのモックアップとインタラクティビティをデザインする。
• テスト：ユーザーがどのように製品を操作するかをテストし、実用的な質問をする。

さらに読む：UX デザイン vs UI デザイン その違いを把握しよう

UIデザイナーが使うソフトウェア

UIデザイナーは一般的に、他のUXデザイナーと同じデザインツールやソフトウェアを使い、そのツールで、UIのデザイン、プロトタイプ作成、テストを行います。

UIデザイナーは、最終製品のように見え、機能する忠実度の高いプロトタイプを作成することを目標としています。UXPinのようなコードベースのデザインツールで、UIデザイナーがデジタル製品のプロトタイプを作成し、テストする方法に革命をもたらしました。

UXPinの高度なプロトタイピング機能には以下のようなものがあります：

• ステート（状態）：１つのコンポーネントに対して、相互作用とシステム変更のための個別のプロパティを持つ複数のステートを作成する。
• 条件付きインタラクション：ユーザーやシステムのアクションに反応する Javascript のような「if-then」や「if-else」ルールで、動的なユーザー体験を作り出す。
• Variables（変数）： 例えば、ユーザーの名前入力からカスタマイズされたウェルカムメッセージを表示するなど、ユーザーの入力を保存し、そのデータに基づいてアクションを実行する。
• Expression：Javascriptのような関数を書いて、フォームのバリデーションや計算フォーマットなどの複雑なタスクを実行する。

１４日間の無料トライアルで、UXPin のこれらの機能やより高度な機能をぜひお試しください！

 UI開発 とは

UI開発 とは、クライアント向けのインターフェースをプログラミングするプロセスであり、UIデザイン同様に、UI 開発のプロセスには、画像、アニメーション、スライダー、テキストフィールド、ボタンなどのコードを書くことが含まれます。

UI デベロッパーとは

UIデベロッパーは、Web サイトやアプリケーションのビジュアルデザインの実装を担当します。UIデザイナーはインターフェースの全体的な LnF（ルック＆フィール）の作成に重点を置きますが、UI デベロッパーはインターフェースが Web上またはアプリケーション内で機能するようにコードを記述することで、そのデザインに動きなどを加えます。

UIデベロッパーのスキルおよび業務

製品や組織の構造によっては、UI開発の役割はフロントエンドデベロッパー、UXエンジニア、またはフルスタックエンジニアが担う可能性があります。その責務はエンジニアリングチームの構成によって異なりますが、以下のようなものがあります：

• UIコンポーネント開発
• UIメンテナンス
• スタイリングアーキテクチャ
• 実装
• 技術面での実現可能性
• バックログ管理
• パフォーマンス
• クエリのアーキテクチャ
• 検索エンジンの最適化

フロントエンド開発とバックエンド開発の違い

エンジニアは、プログラミングを以下のように「フロントエンド開発」と「バックエンド開発」の２つの分野に分けています。

• フロントエンド開発：HTML、CSS、Javascript を使った「クライアント向け」のインターフェースの開発に重点を置く。
• バックエンド開発： フロントエンドのインターフェースをデータベース、API、認証などに接続するためのサーバーサイドのコードを書き、プログラミング言語には、Java、Ruby、Python、Javascript などがある。

さらに読む（英語）：Front-End vs. Back-End: What’s the Difference?（フロントエンドとバックエンド： その違いとは？）

UI デベロッパーが使うソフトウェア

他のエンジニアと同じように、UI デベロッパーは IDE（統合開発環境）を使ってコードを調べたり書いたりします。また、最近の IDE には、Git、パッケージマネージャー、レポジトリ、API などのようなエンジニアリングツールとのインターフェースのための様々な拡張機能が備わっています。

さらに読む（英語）：The 7 Essential Tools for Frontend Web Development.（フロントエンド Web 開発に欠かせない７つのツール）

UIデザインと UI開発 

UIデザインと UI開発が定義されたことで、その分野がソフトウェア開発プロセスの対極にあることが明らかになりました。UI デザインはデザインプロセスで行われ、UI 開発はエンジニアリングプロセスで行われます。

UI デザイナーと UI エンジニアは別々の分野ですが、最終製品を成功させるために協力しないといけません。

また、UIデザイナーと UIエンジニアの役割がどんな組織にもあるわけではない点に注意することが重要です。

以下に、UI の役割と責任を果たす可能性のある職種を挙げてみましょう：

• UIデザイン：UX エンジニア、ビジュアルデザイナー、グラフィックデザイナー
• UI開発：フロントエンドデベロッパー、UXエンジニア/UX デベロッパー、フルスタックエンジニア

UIデザイナーと UIデベロッパーの協力体制

ここでは、UI デザイナーと UI デベロッパーがプロジェクトでどのように連携するかを示す一般的なワークフローを見てみましょう：

• UIデザイナーは、ユーザー、競合、市場、製品などを理解するために、様々な形の UX 調査からデザインプロジェクトを始めて、ユーザーの視点から問題を理解するために、ユーザー中心のデザイン（UCD）プロセスを用いる。
• UIデザイナーは、デザインプロセスの早い段階で UIデベロッパーとミーティングを行い、技術的な制限、デザインハンドオフの手順、ドキュメントの要件について話し合う。
• UIデザイナーは、他の UX デザイナーと協力して、UI、レイアウト、コンポーネントのデザイン、プロトタイプ作成、テストを行い、UI デベロッパーは、場合によってはデザインチームと協力して、複雑な UI コンポーネントをテストするための基本的なコードプロトタイプを構築することもある。
• デザインプロセスが完了すると、UI デザイナーはデザインのハンドオフのためにプロトタイプとドキュメントを準備する。
• UIデザイナーと UI デベロッパーは、デザインについて話し合い、デザインのハンドオフプロセスでエンジニアがすべてを正しく理解していることを確認するために会う場合もある。
• UIデベロッパーは、他のエンジニアリングチームと協力して、デザインを機能するコードに変換する。
• UIデザイナーは、デザインチームやプロダクトチームと協力し、最終リリースがデザイン仕様を満たしていることを確認する QA（品質保証）プロセスを完了する。

UIデザイナーと UIデベロッパーの連携の重要性

現代のソフトウェア開発は、卓越したUIデザインと開発に依存しています。

デザイナーは、製品がユーザーのニーズを満たしていることを確認し、UIとUIコンポーネントを徹底的にテストして、ユーザビリティとアクセシビリティの基準を満たしていることを確認します。

このプロトタイプとテストの段階がないと、ユーザビリティの問題が製品に影響を及ぼし、その結果、UXが落ち、顧客サービスや手直し、顧客喪失など、回避できるはずのコストがさまざまな面で発生してしまいます。

UIデベロッパーは、ソフトウェアのリリースを成功させるためにも重要な役割を果たします。最終的な UI がデザイン仕様を満たしていることを確認し、バグやパフォーマンスがないかコードをテストしないといけませんし、製品が長期にわたって完全性と一貫性を維持できるように、パッケージ、API、セキュリティなどのアップデートを含むコードの管理も担当します。

これを実現するには、デザイナーとエンジニアがソフトウェア開発プロセスを通じて協力し合うことが理想ですが、一般的な大規模組織ではサイロ化やコミュニケーション不足が問題になるかもしれません。

その際、多くの場合ではUIデザイナーと UIデベロッパーはDesignOpsやDevOpsを取り組むことで、部門間のギャップを埋めて、運用プロセスと連携を改善します。

UXPin Mergeでデザイナーとデベロッパーの連携を改善

ドリフト（摩擦）の課題

デザイナーとエンジニアが直面する課題のひとつに、以下のように「話す言語が違う」という点があります。

• デザイナー = 画像ベースの静的モックアップとプロトタイプ
• エンジニア = コード、ブラウザ、OS、データベースなど

お互いの専門分野について深い知識と経験がなければ、デザイナーとプログラマーが相手の限界や制約、その他の課題を理解するのは難しく、そのギャップを埋めるのは、組織が製品を時間通りで予算通りに成功裏に納品するために極めて重要です。

コードベースのソリューション

UXPin Mergeは、コードベースのデザインソリューションにより従来の UXワークフローに革命をもたらします。組織はレポジトリからコンポーネントライブラリをUXPinエディタに同期できるようになるので、デザイナーは完全に機能する UI要素とコンポーネントを使ってプロトタイプを構築できます。

Merge コンポーネントは、インタラクティブ性などのレポジトリ内のコンポーネントとまったく同じプロパティを保持するため、デザイナーはドラッグ＆ドロップするだけで UI を構築できます。

また、デザイナーが JSX や UXPin のプロパティパネルでコンポーネントをカスタマイズできるように、エンジニアはReact や Storybook の Args などのさまざまなプロップを設定できます。プロップに変更を加えるとJSX がレンダリングされ、エンジニアはコピー＆ペーストして開発を開始することができます。

そしてこのMergeを活用したワークフローは、UIデザイナーとUI ベロッパーが同じ言語を同じ制約で話しているため、連携と理解がより高まります。組織のコンポーネントライブラリにとって本当の「信頼できる唯一の情報源」ということです。

UXPinはまた、コード化されたコンポーネントのインポートと管理におけるデベロッパーの関与を軽減するツールである Merge Component Managerを提供しています。エンジニアへの依存が軽減されるということは、デザイナーがMergeをより速く立ち上げて実行できるということです。

「以前はデザインだけで２～３ヶ月かかっていましたが、今では、UXPin Mergeを使うことで、チームは同じ時間枠で製品をデザイン、テスト、納品することができます。「市場投入までの時間の短縮」は、UXPin Mergeを使って経験した最も大きな変化の一つです。」 エリカ ライダー（Paypal 社）‐ UX リード EPX 

UXPin Mergeのテクノロジーがデザインプロセスにどのような革命をもたらすかをぜひご覧ください。アクセスのリクエストはコチラから。

The post UI デザインと UI開発 の違い appeared first on Studio by UXPin.

アプリのランディングページは、特定のアプリを紹介し、プロモーション向けにデザインされた専用ページです。その主な目的は、アプリに関する情報を提供し、重要な機能や利点を明らかにし、ターゲットオーディエンスにアプリのダウンロードとインストールを促すことです。

アプリのランディングページはマーケティング戦略の非常に重要な部分であり、潜在的なユーザーがアプリについて詳しく知り、ダウンロードするかを決めるための中心となる役割をします。

UXPin Mergeのドラッグ＆ドロップ機能を使って、美しくインタラクティブなアプリのランディングページデザインを作成しませんか。

Reactコンポーネントを使ってそれをコピー＆ペーストして、Reactベースのアプリのランディングページを構築しましょう。こちらからUXPin Mergeをぜひ無料でお試しください。

アプリのランディングページとは

アプリのランディングページは、特定のアプリの紹介や宣伝のために作られた特別な Web ページです。そのアプリの目的、イチオシ機能、そのアプリを使うべき理由など、アプリのすべてを伝えるバーチャルなパンフレットのようなものであり、アプリのダウンロードとインストールの促進を主な目的としています。

ランディングページは、モバイルアプリのマーケティングにとって非常に重要であり、潜在顧客がアプリをスマホやPCにダウンロードするかを決める前に、必要な詳細をすべて得ることができる中心的な場所としての役割をします。

要するに、アプリがどのように動作するかを学び、情報に基づいた選択をするための「窓口」のようなものです。

アプリのランディングページについてさらに簡単に言うと、アプリを紹介して、そのアプリでできることを説明し、ダウンロードしてもらうように促す簡単なガイドのようなものです。

アプリのランディングページの主な要素

アプリのランディングページの例では、ほとんど似たような要素が使われています。使用される要素は、ポジティブなUX（ユーザーエクスペリエンス）に貢献し、対象とする人たちがランディングページの目的を理解できるようになることから重要です。

様々なWebサイトやアプリでみる一般的なUI要素が使われているため、馴染みのある要素を見ると、ユーザーは安心感を覚え、コンテンツとのインタラクション方法を簡単に把握することができます。

業界標準となっている特定のUI要素の例として、CTA（Call to Action）ボタンがあります。CTAはユーザーが想定するものに沿ったものであり、このような想定に応えることで、対象ユーザーは混乱になることなく、探しているものをすぐに見つけることができます。

では、アプリのランディングページとは何でしょう。

以下で、アプリのランディング ページの主な要素を簡単な言葉で見てみましょう。

• アプリのロゴ： ランディングページの左上にロゴを配置するのは、一般的で効果的な方法。多くの Webサイトの標準的なレイアウトに沿ったものである。
• ヘッダーのヒーロー画像または動画： ページ上部の目を引くビジュアルで、アプリの紹介や、ユーザーがスクロールダウンして詳細情報を得ることができる。
• アプリの説明文： アプリの価値提案、主な機能、コンバージョン率の高いメリットなど、簡潔で説得力のあるアプリの概要。
• 機能のハイライト： アプリの主要な機能とアプリの機能を紹介するセクション。多くの場合、テキストの読み取り性を上げ、メッセージングを強化するためのアプリまたはアイコンのスクリーンショットが表示される。
• CTAボタン： アプリのダウンロードリンクや特定のアクションをユーザーに促す目立つボタン。
• ユーザーの声： ユーザーのレビューや、典型的なユースケースや意見を記述したその他の社会的証明。信じ難いかもしれないが、「お客様の声」でコンバージョン目標はかなり上がり、アプリのダウンロード数を示すだけで素晴らしい社会的証明になることもある。
• SNS との統合： アプリの SNSプロフィールへのリンクやフィードにより、訪問者にアップデートのフォローやアプリコミュニティへの参加を促す。
• 互換性情報： iOS、Android、スマートフォン、タブレットなど、アプリが対応するプラットフォームやデバイスに関する情報。
• 問い合わせ先またはサポート情報： ユーザーがアプリの開発者やサポートチームに問い合わせや支援を得るための方法を提供する。

このような要素を取り入れることで、アプリのランディングページは、ユーザーの期待に沿ったユーザーに優しい環境を作り出し、使いやすさを強化し、訪問者がコンテンツに関与して最終的にアプリの入手につながります。

アプリのランディングページの良い例

Google Play StoreやApple App Store、あるいは人気のSaaS企業が販売するWebアプリで見られる、コンバージョンの高いモバイルアプリのランディングページのリストを作ってみました。

これらのランディングページの何が効果的なのかを詳しく見てみましょう。

Headspace

Headspace は瞑想アプリで、素晴らしいモバイルアプリのランディングページの例です。

左上にロゴがあり、カラフルなアプリのスクリーンショットがあり、見出し１としてバリュープロポジションがあります。

そして CTA ボタンと料金体系は、コンバージョン率に間違いなく影響するフォールドの上にあります。

ちなみにフォールドの上に置くメリットは、ユーザーがスクロールダウンすることなく、Web ページ上ですぐに目に入るコンテンツのことです。

おすすめポイント

• 大胆な色使いを恐れない – ミニマルデザインは今もトレンドだが、Webサイトは白と黒で統一されるべきというわけではないので、サイトを楽しいUX（ユーザーエクスペリエンス）にするために色んな色を試す。
• 料金体系がコンバージョンにつながるかどうかをテストする – SaaSのWebサイトでは、通常は専用のランディングページで料金体系が強調されるが、フォールドの上にそれを試してみるのはどうだろう。ターゲットオーディエンスに効果があるかどうかを確認すべく、A/Bテストを実施する。
• ユーザーが想定できることのサンプルを提供する – 数回スクロールダウンすると、実際に瞑想の録音を聞くことができる。これは、人々を引き込む素晴らしいフックである。

MonopolyGo

MonopolyGoは最も売れているモバイルアプリの一つであり、このアプリのランディングページはシンプルで要点を押さえたものになっています。何百万人もの人がダウンロードしているにもかかわらず、ランディングページの制作者は、「お客様の声」を３件だけ掲載することにしました。

少ないように見えますが、それぞれのレビューには、気さくな笑顔の写真と元気いっぱいの説明があります。いいですよね。

おすすめポイント

• 元気いっぱいのアニメーションで盛り上げる – ヘッダーがなくても、それは必要ないので問題ない。「モノポリー」というゲームの存在を知っていても、その楽しさは知らない人がほとんどであるというように、エネルギッシュなアニメーションで商品への興味を上げていくべき。
• SNS へのリンクを貼る – SNS マーケティングが自身や潜在顧客にとって重要であるなら、そのリンクを目につく場所に掲せる。ちなみにそれは MonopolyGo の場合だと、フッターではなく、サイトの左側にあることに注意が必要。
• 右隅のチャットオプション – 対象とするユーザーがカスタマーサービスに問い合わせをできるようにしておく。そうすることで、彼らがどのような問題を抱えているのか、このサイトから何を得ることを想定しているのかを知ることができる。フィードバックは重要。

WhatsApp

WhatsAppは、売れるWeb サイトデザインのいい例です。素晴らしいコピーと心温まるビジュアルの組み合わせによって、ユーザーは「ダウンロード」の CTA をクリックしてしまいます。だからこそ、優れた UI デザインとは別に、コンバージョン率の高いコピーの作り方を熟知したコピーライターと仕事をする必要があるのです。

おすすめポイント

• 価値提案に焦点を当てる – WhatsAppは、自分たちが安全なアプリであることを潜在顧客に伝えることで、他のコミュニケーターとの差別化を図っている。価値提案は何か、なぜそれがユーザーにとって重要なのか？
• ネガティブスペースを使ってコピーを浸透させる — WhatsApp はネガティブスペースをうまく利用しているが、それはテキストとビジュアルを目立たせたいからだと考えられる。 コピーに息を吹き込むことで、自分が望むインパクトを生み出すことができる。
• 落書き – Headspace は大胆な色、MonopolyGo はビデオ、WhatsApp は落書きを使って、ランディングページをよりユニークなものにしている。

Vinted

Vinted は、衣料品売買のプラットフォームであり、eコマースの世界に旋風を巻き起こしました。プラットフォームを使うときに衣服に新しい命を吹き込むという前提で機能し、２０２４年に非常に広く知れ渡っている「サステナビリティ」のトレンドとうまく調和します。

おすすめポイント

• 気さくな写真 – プラットフォームにある写真をランディングページに使う。ただし、これにはユーザーの同意がいるので注意が必要。
• カテゴリーによるナビゲーション – Vinted は eコマースのカテゴリーにあり、プラットフォームから何を想定できるかを伝えるナビゲーションを備えている。
• 検索バー ‐  探しているものを入力して検索をクリックするとどうなるか? 検索結果が表示され、その時点から商品を購入してユーザーになるまであと一歩となる。 また、アイテムにはインデックスが付けられるため、Vinted の SEO ランキングが上がる。

UXPin Mergeでアプリのランディングページデザインを作成しよう

コンバージョンの高いアプリのランディングページを作るまであと一歩という方は、ぜひ本記事で挙げたヒントを使って、UXPinで実践してみてください。

アプリのランディングページの美しいレイアウトをデザインしませんか。すぐに最適化されたランディングページのテンプレートが 当社のアプリ内にありますよ。

UXPin Mergeは、ランディングページ、アプリ、Webサイトなどを通常の１０倍の速さで作成できるドラッグ＆ドロップの UIビルダーです。 気になった方は、ぜひこちらから UXPin Mergeをお試しください。

The post 【おすすめ】アプリのランディングページ制作例とその理由 appeared first on Studio by UXPin.

デバイス、OS（オペレーティングシステム）、テクノロジーの数が増え続ける中、クロスプラットフォーム・エクスペリエンスのデザインは、製品開発プロセスにおいて不可欠な要素となっています。

多くの企業では、iOS、Android、Windows などの専門チームがあり、製品がプラットフォーム固有の要件とユーザーの期待に確実に応えるようにしています。

世界最先端のUXデザインツールであるUXPinで、クロスプラットフォームのシームレスな CX（カスタマーエクスペリエンス）を実現しましょう。無料トライアルにサインアップして、インタラクティブなプロトタイプをぜひご体験ください。

クロスプラットフォーム ・エクスペリエンスとは

クロスプラットフォーム ・エクスペリエンス（プラットフォーム非依存的デザインとも呼ばれる）とは、iOS、Android、Windows、Macなどの OS に加え、Web、モバイル、タブレット、ウェアラブルなど、複数のデバイス間でのUX（ユーザーエクスペリエンス）の比較を表すものです。

製品開発者は、全ユーザーに製品を確実に提供するために、異なるプラットフォームや OS で同等のシームレスな UX を実現することを目標にしています。

またデザイナーは、例えば、自分の銀行口座から銀行のウェブポータルでもモバイルアプリでも支払いできる機能のように、エンドユーザーがデバイスや OS に関係なく、同じ機能にアクセスし、タスクを完了できるようにしたいとも考えています。

レスポンシブデザインと クロスプラットフォーム デザイン

クロスプラットフォーム・エクスペリエンスをデザインする際に、製品チームが考慮しなければならない要素のひとつに『レスポンシブデザイン』があります。レスポンシブデザインは、ウェブブラウザに特化し、デスクトップ、タブレット、モバイルの各ビューポートで UI がどのように見えるかを示すものです。

クロスプラットフォームデザインとは、ウェブ、タブレット、iOS、Android、Windowsなどのモバイルアプリでの製品の UX に加え、ウェブブラウザ、デバイス、OS を考慮しなければならないという、より広範な概念であり、たとえば、シンプルなアラートコンポーネントは、iOS、Android、Windows、macOS、Safari、Chrome、Edgeでまったく異なる見え方になります。

 クロスプラットフォーム ・エクスペリエンスのデザインが重要な理由

ビジネスとしての価値

ビジネスの観点からも、クロスプラットフォームデザインは非常に重要です。米国では iPhone のシェアが６５％ですが、世界には２０億人の Android ユーザーがおり、シェアは７１.３５％です。iPhone が買えない国では、Androidが９０%以上のシェアを占めており、このどちらにも対応していないということは、多くのチャンスを無駄にしているという事になります。

また、企業はレスポンシブデザインを考慮し、ウェブサイトやウェブアプリケーションがデスクトップ、タブレット、モバイルでどのようにレンダリングされるかも考慮しないといけません。多くの人はインターネットの閲覧のためだけにスマートフォンを使い、このようなモバイル端末で効率的に商品やサービスを購入できなければ、企業は貴重な収益を失うことになるのです。

競争力

誰もが製品が複数のデバイスで同じように動作することを期待しており、もしユーザーがウェブアプリケーションとモバイルアプリケーションで同じタスクを実行できなければ、同じタスクを実行できる競合他社を探すでしょう。

これに関しては、FinTechほど顕著なものはないでしょう。モバイル主導／専用のバンキングや投資アプリケーションは、従来の金融機関が残したギャップを埋めようとするスタートアップ企業によって、過去１０年間で爆発的に普及しました。このような旧式の金融機関の多くはモバイルソリューションの提供に遅れをとっており、それによって Robinhood、Monzo、Chime、RevolutなどのFinTechのスタートアップが大きな市場シェアを獲得できるようになっています。

インクルーシブ

万人受けの製品を作りたいなら、クロスプラットフォームデザインは不可欠です。例えば iPhone や Mac などのアップル製品は、家電製品の中でも高級品ですが、多くの人はこうした贅沢品を買うことができません。

もし、あなたの製品がアップル社のデバイスにしか対応していなかったり、Android、Windows、Web で同等の体験が提供されないのであれば、アップル製品を買う余裕のない疎外されたコミュニティを含む、世界の人口の大部分を排除していることになるのです。

クロスプラットフォーム・エクスペリエンスをデザインするための６大原則

１．一貫性

クロスプラットフォームデザインの最初のルールは、ウェブ、モバイルアプリケーション、OS で一貫した UX の維持です。この一貫性には、UIデザイン、機能性、機能、インタラクションデザイン、ブランディングなど、重要な要素がいくつか含まれます。

複数のプラットフォームやデバイスでの UIの正確な一貫性を得るのは不可能ですが、デザイナーはメッセージング、インタラクション、パフォーマンス、タイミングをコントロールすることができ、これらは常に一貫していなければいけません。

２．シームレスなエクスペリエンス

シームレスなクロスプラットフォームの UX とは、複数のデバイスで同じタスクを完了できるということであり、さらに、あるプラットフォームでタスクを開始し、別のプラットフォームで完了させることも可能です。

例えば、Gmailにおいて、 モバイルアプリでメールを作成し、下書きに保存して、別の時にデスクトップパソコンでそのメールを完了させることができます。このようなシームレスな UX により、ユーザーは、デスクトップでメールを送信するまで待つというようなテクノロジー中心の生活ではなく、自分のスケジュールに合わせて仕事をし、タスクを完了する柔軟性を手に入れることができるのです。

３．クロスプラットフォームでのユーザビリティ（インターユーザビリティ）

クロスプラットフォーム・ユーザビリティ（またはインターユーザビリティ）は、IoT（Internet of Things）のエコシステムにおける複数のデバイス間での UX と一貫性を説明するものです。

例えば Netflix は、携帯電話、タブレット、ノートパソコン、スマートテレビで視聴できる身近な例であり、各カテゴリーには、複数のデバイス、OS、スクリーンサイズがあります。

チャールズ・デニス氏とローラン・カーセンティ氏は、２００３年に発表した「Inter-Usability of Multi-Device Systems – A Conceptual Framework」で「インターユーザビリティ」という言葉を作り、一貫したクロスプラットフォーム体験をデザインするための３つの重要な要素について以下のように説明しています：

• 継続性：製品、ツール、デバイス間でのコンテンツとインタラクションのシームレスなフローの促進
• 構成：製品・デバイス間の機能整理
• 適切な一貫性：デザイナーは、UI デザインの一貫性とネイティブのレイアウトやパターンとのバランスをとる必要がある

４．優先順位付けと視覚的ヒエラルキー

クロスプラットフォームの UX をデザインするには、コンテンツとレイアウトへの優先順位付けが重要であり、デスクトップやスマートテレビでは、ユーザーはより多くのコンテンツや機能を見ることができる一方、モバイルアプリやその他の小さな画面では、デザイナーはコンテンツを優先し、多くの場合個別化を採り入れる必要があります。

例えば、Netflix や YouTube のアカウントは、２つとして同じものはありません。製品開発者は、各ユーザーのニーズや好みに合わせてコンテンツや機能の優先順位を決めるべく、個別化されたアルゴリズムを使っているのです。

優先順位付けには、視覚的な階層も含まれます。大きな画面では、より多くのコンテンツや機能を配置するスペースがあり、モバイル端末では、アコーディオン、ナビゲーションドロワー、ドロップダウンなど、スペースをとらない UI パターンを使って、【常に表示するコンテンツ】と【隠すべきコンテンツ】を決める必要があります。

５．アクセシビリティ

クロスプラットフォームのアクセシビリティは、コンプライアンスや製品が確実にインクルーシブであるようにするのに不可欠であり、デザイナーは、ユーザーが音声コマンド、スクリーンリーダー、フォント調整などの組み込みのサポート的技術を確実に使えるようにする必要があります。

また、視覚にハンディキャップがあるユーザーにも対応できるよう、【ダークモード】と【ライトモード】の用意が必要です。デバイスによって色の表現が異なることから、コントラストや読みやすさに影響が出ますからね。

６．適応性

すべてのデバイスに対応する製品を作ることは不可能です。例えば、企業の倉庫管理システムは、UI やアーキテクチャが複雑すぎるため、スマートウォッチでは動作しません。ただし、重要な通知を受け取るスマートウォッチ用アプリを作成し、ユーザーができるだけ早くモバイルアプリやデスクトップにアクセスできるようにすることは可能です。

適応性のある体験は、必ずしも製品の目標や機能に沿ったものではありませんが、価値を提供し、新しい顧客を獲得することも可能です。

 クロスプラットフォーム な体験をデザインするためのヒント３つ

１．親しみやすさを追求したデザイン

たとえば カスタムセットの代わりにiOSとAndroidのアイコンを使うといったように、多くのアプリは、プラットフォームに親しみを持たせるために、ネイティブのスタイリングやコンポーネントが使われています。このような機能は、ブランドに適合していませんが、製品がユーザーのデバイス専用に構築されているように感じられるため、クロスプラットフォームの UX を上げることができます。

２．デザインシステムの作成

デザインシステムは、凝集性と一貫性を最大化するための制約とソリューションを生み出し、製品チームへの、プラットフォーム固有のルールやガイドラインを満たすためのパターンやコンポーネントの提供もします。

マテリアルデザインのドキュメントでは、AndroidとiOSでコンポーネントがどのように見えるかをデザイナーに伝えています。たとえば、マテリアルデザインのTop App Barでは、各 OS でコンポーネントがどのようにレンダリングされるかの例が示されており、iOSとAndroidでは、アイコン、配置、間隔、アプリバーの高さが異なります。

このようなクロスプラットフォームのコンポーネントを作成することで、デザイナーは、製品がサポートするOS のデザインプロセスにおいて、正確なテストを行うことができるのです。

３．デザインライブラリの使用

UXPin には、Webや、iPhone、Apple Watch、Apple TVを含む iOS、Android用のキャンバスが用意されており、各デバイスに合わせたレイアウトを作成することができ、プラットフォームの画面幅に合わせて、カスタムキャンバスサイズを使うこともできます。

UXPinの内蔵デザインライブラリには、iOSおよびマテリアルデザインのコンポーネントが含まれているため、プラグインや拡張機能をインストールすることなく、クロスプラットフォーム・エクスペリエンスを構築することができます。プラットフォーム固有の UI 要素をドラッグ＆ドロップすることで、両方の OS で製品のプロトタイプを作成できるのです。

クロスプラットフォームなアプリを複数のデバイスでテストするには、iOSとAndroidで利用可能な UXPin Mirrorを使うことができます。また、ブラウザでプロトタイプをプレビューして、スマートフォン、タブレット、デスクトップ、スマート TV などでテストするのもいいでしょう。

UXPinによるクロスプラットフォームプロトタイプの構築

UXPin には、Webや、iPhone、Apple Watch、Apple TVを含む iOS、Android用のキャンバスが用意されており、各デバイスに合わせたレイアウトを作成することができ、プラットフォームの画面幅に合わせて、カスタムキャンバスサイズを使うこともできます。

UXPin のデザインシステムがあれば、チームの連携とUIの一貫性を保つために、クロスプラットフォームのコンポーネントライブラリを作成したり組織全体で共有したりできます。説明文を使って各プラットフォームのドキュメントを含め、権限を設定して、デザインシステムへの不正な変更を防ぎましょう。

世界最先端のUXデザインツールで、より良いクロスプラットフォームの UX をデザインしませんか。無料トライアルに登録して UXPin の高度な機能をぜひお試しください。

The post クロスプラットフォーム ・ エクスペリエンス【徹底ガイド】 appeared first on Studio by UXPin.

Webサイトやアプリケーションを作成する際、デザイナーやエンジニアがWebアクセシビリティに関して遵守すべきガイドラインは数多くあります。しかし、これらをすべて把握したり、さまざまなレベルを使い分けたりするのは非常に大変になることでしょう。

そこで本記事では、公式のWebコンテンツアクセシビリティガイドラインを、デザイナー向けにWebアクセシビリティチェックリストを用いてわかりやすく説明していきます。また、WCAG（Web Content Accessibility Guidelines：Webコンテンツのアクセシビリティに関するガイドライン） 1.0と2.0の違いや、各レベル（A、AA、AAA）についても見ていきます。

UXPinが提供するアクセシビリティ機能によって、デザイナーは UXPinから離れることなく、UIのコントラストや色覚異特性のテストを行うことができます。無料トライアルにサインアップし、UXPinでWebサイトやアプリの使いやすさをぜひご体験ください。

アクセシビリティチェックリストの目的

Webアクセシビリティのチェックリストで、デザイナーやエンジニアは、障がいがある人や支援技術を要する人のためにWebサイトをデザインするうえでの考慮事項を確認することができます。

また、チームメンバーは、チェックリストをデザインやコードと照らし合わせて参照し、WCAGに適合していることを確認することができます。

WCAG2.0とWCAG1.0の違い

WCAGは、技術とともに更新され、進化していかなければならず、更新のたびに新しいデバイスに沿った最新のガイドラインが追加されます。

また、ガイドラインとは別に、WCAGシステムには２つのイテレーション（反復）があり、最初のイテレーションである WCAG 1.0 では、優先度 1、2、3のガイドラインとチェックポイントが用いられています。

WCAG 2.0 では、２００８年にチェックポイントからレベルの成功基準に変更されました。現在使用されているシステムでは、以下が含まれます：

• ４つのデザイン原則
• 各原則に複数のガイドライン
• 各ガイドラインのテスト可能な成功基準レベル（A、AA、AAA）

公式文書によると、WCAG 2.0は主に以下のように改善されました：

• より多くの技術やデバイスに適用可能
• 将来の技術に合わせて進化するようにデザインされている
• 自動化されたテスト手法と人的評価により、要件のテストがしやすくなる。
• 国際社会からのインプットと連携
• ガイドラインの遵守と実施をしやすくするのに、サポート資料と文書を改善した。

詳しくは こちらのWCAG 2.0の公式発表資料をご覧ください。

アクセシビリティ準拠の成功基準における３つのレベル

WCAG 2.0 では、製品の意図された目的とターゲットオーディエンスに基づいて各ガイドラインを評価するのに、以下の３つの成功基準レベル（または適合レベル）が導入されています。

• レベル A – シングルエー
• レベル AA – ダブルエー
• レベル AAA – トリプルエー

レベル A

レベルA は、Webサイトが最低限のアクセシビリティ基準を満たしていることを保証するものであり、レスポンシブデザイン、（アイコンなど）文字以外の代替要素、キーボードナビゲーション、ビデオキャプションなど、Webサイトをよりアクセシブルにするための中核的な問題や要素に対応しています。

レベル AA

レベルAA では、誰もが Webサイトを利用できるよう、より広範なUI要素とベストプラクティスがおさえられており、世界中のほとんどの政府Webサイトは、国民の誰もが公共のコンテンツやサービスにアクセスできるよう、WCAGのレベルAAを要求しています。

このレベルでは、健常者と障がい者が同等のユーザー体験、機能性、効率でコンテンツを消化し、タスクを完了できるようになっています。

レベルAA の要件には以下のようなものがあります：

• 「4.5：1」 などのカラーコントラスト比
• 画像とアイコンの Alt（代替）テキスト
• 全テクノロジーに対応したナビゲーション
• 正確なフォームフィールドラベル
• 適切な構造の見出しタグ
• テキストサイズの変更
• 特定支援技術に関する要件

レベル AAA

レベル AAA は最も高い適合性レベルであり、 Webサイトのナビゲートや、コンテンツの消化をできるユーザーが最大数であることを保証するものです。ただし、レベルAAAはW3C（Web Accessibility Initiative）のサイトにあるように、以下に気をつける必要があります。

“It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.”

（日本語訳：コンテンツによってはレベルAAA成功基準を全て満たすことは不可能であるため、サイト全体の一般的な方針として レベル AAA 準拠を要求することは推奨されない。）

Webサイトやコンテンツが特定の読者を対象としている場合、デザイナーはレベルAAAを使用する必要があります。レベルAAAのガイドラインは、スタイリングに大きな影響を与え（カラーコントラスト7：1）、音声や映像の手話通訳を必要とします。

デザイナー向け Webサイトのアクセシビリティのためのチェックリスト

次に、私たちはデザイナーにとって最も重要なWACGガイドラインを選びました。このガイドラインは視覚的要素に適用されますが、HTML要素に関連することも多いため、アクセシビリティについてはデザイナーとエンジニアの連携が必須となります。ちなみに、WCAG 2.0 の全リストは、W3Cの公式サイトでご覧いただけます。

コンテンツ

• 説明的なリンクラベルを使う（レベル A） – ボタンやリンクは、ユーザーにコンテクストが提供されないといけない。例えば、「ここをクリック」というボタンは意味がなく、誤解を招く可能性がある。Info & Relationships SC 1.3.1を参照。
• 中級以下の読解レベル（レベル AAA） – 専門用語、慣用句、俗語、比喩、皮肉、その他の複雑な用語を含まない「平文（プレーンテキスト）」であること。中学2年生相当のレベルが理想的。Reading Level SC 3.1.5を参照。
• テキスト・フォーマット（レベル AAA） – テキストは両端揃えであってはならず、右揃えか左揃えであり（言語による）、支援技術なしで最大２００％までサイズ変更できること。また、ユーザーは「ダーク/ライトモード」切り替えのように前景色と背景色をコントロールできないといけない。Visual Presentation SC 1.4.8を参照。
• 特殊なスクリーンとデバイスでデザインをテストする（レベル A） – 視覚に障がいがあるユーザーは、高コントラストまたは反転カラーモードを使用する。その条件下でコンテンツがどのように機能するかをテストすることが重要。Color SC 1.4.1を参照。

ページタイトル、見出し、ラベル

以下のガイドラインは、レベルAA に適合しています。Headings and Labels SC 2.4.6 を参照。

• １ページに H1（見出し１） タグは１つ – H1（見出し１）ヘッダタグは、Webページや記事全体の内容が記述されてないといけない。
• 論理的な順序で見出しを構成する – 入れ子になった見出しは、H1、H2、H3、H4、H5、H6という従来の順序に従わないといけない。例えば、H2 の次に H4、そして H3 というようなことは絶対しない。また、H2、H3、H4の順ではなく、H2 から H4 へというような、ヘッダーのタグを飛ばすべきではない。
• 見出しやラベルは、トピックや目的を説明するものでないといけない – 見出しやラベルで、ユーザーや、スクリーン・リーダーのような支援技術は、コンテンツを見つけたり消化しやすくなる。

画像

以下のガイドラインは レベルA に適合しています。Non-text Content SC 1.1.1 参照。

• 非テキストコンテンツには Alt（代替）テキストが必要：画像、アイコンなどには、説明的なAlt（代替）テキストが必要であり、画像にテキスト（文字）がある場合は、alt テキストが含まれていないといけない。
• CAPTCHA：Webサイトは、CAPTCHA （完全に自動化された、コンピューターと人間を区別する公開 チューリングテスト）を使用する場合、人間による認証やテキストベースの認証など、代替の確認方法が提供されないといけない。
• 装飾的な非テキスト・コンテンツ：支援技術がこのコンテンツを無視できるように、純粋に装飾的な画像やメディアの Alt テキストは、”null ” が使われないといけない。
• グラフィック表示の代替テキスト：グラフ、チャート、その他のグラフィックには、支援技術がそれを読み取れるように、代替テキストが含まれないといけない。

リスト

以下のガイドラインはレベルAに適合しています。Info and Relationships 1.3.1参照。

• 適切なHTMLマークアップを選択する – リストには、コンテンツに関連する ol、ul、または dl 構文が使われ、ユーザーが混乱しないようにリストの外観（または構造）が備わってないといけない。

コントロール

コントロール（制御）には、リンクやボタンなどのナビゲート可能なUI要素が全て含まれます。

• 新しいタブまたはウィンドウを開く警告（レベル A） – 例えば新しいタブやウィンドウが予告なしに開くと、認知能力に障がいのある人は混乱することがよくあることから、ユーザーは、ボタンまたはリンクがテキストまたはアイコンを使って新しいウィンドウまたはタブを開くかどうかを知る必要がある。On Focus SC 3.2.1 を参照。
• フォーカス状態（レベル A） – コントロールはフォーカス（またはホバー）状態がないといけない。これにより、支援技術を要するユーザーを含むユーザーは、アクティブにするリンクやボタンをいつ選択したかを把握できる。Focus Visible SC 2.4.7 を参照。
• リンクを識別できるようにする(レベル A) – デザイナーは、ユーザがすぐにリンクを識別できるように、色と下線の組合せを使わないといけない。Use of Color  SC 1.4.1」を参照。
• スキップリンク」を使う（レベル A） – スキップリンクを使うことで、支援技術やキーボードのユーザーは、ナビゲーショナルメニューやその他のブロックを迂回して、Web ページのコンテンツに直接行くことができる。Bypass Blocks SC 2.4.1 を参照。

フォーム

• フォームラベル (レベル A) – デザイナーは、視覚的に参照できるように入力全てにラベルを付け、支援技術のために HTM Lの ‘label’ タグを使わないといけない。Input SC 3.2.2を参照。
• エラーメッセージ（レベル A） – エラーメッセージを対応する入力フィールドの上に配置し、問題を解決するための明確な指示をユーザーに与える。Error Identification SC 3.3.1を参照。
• メッセージの状態（レベル A） – 「エラー」、「警告」、「完了」のメッセージの状態を色だけに頼らない。例えば、アイコンやテキストを追加することで、視覚に障がいがある人がエラー状態の種類を識別しやすくなる。Use of Color SC 1.4.1を参照。

マルチメディア

• 自動再生をデフォルトで無効にする（レベル A） – 自動再生は、認知能力にハンデがあるユーザーや発作性障害のあるユーザーにとって問題となる可能性がある。Audio Control SC 1.4.2 を参照。
• ビデオキャプション（レベル A） – ビデオにはキャプション（字幕）が必要で、キャプションがあることを確認する表示が必要。Caption (Prerecorded) SC 1.2.2 を参照。
• 発作を引き起こす要因を取り除く（レベル A） – ストロボや点滅するビデオは発作を誘発する可能性があることから、W3Cのドキュメントでは、Web ページやビデオの点滅は３回までと推奨されている。Three Flashes or Below Threshold SC 2.3.1 を参照 。
• 音声のトランスクリプト（レベル A） – 音声記述にトランスクリプトを含めることで、聴覚にハンデのある人が音声コンテンツを理解できるようになる。Non-text Content SC 1.1.1 を参照。

カラーコントラスト

• テキストのカラーコントラストをテストする（レベル AA） – コントラストチェッカーと色覚特性テスターを使って、視覚にハンデのある人が確実に本文とUI要素を読めるようにする。Contrast (Minimum) SC 1.4.3 を参照,。
• 非テキストのコントラスト（レベル AA） – アイコンやフォーム入力などの非テキスト要素は、視覚にハンデがある人が区別できるものでないといけない。Non-text Contrast 1.4.11 を参照。

モバイルおよびタッチ

• モバイルでは水平スクロールを避ける（レベル AA） – 水平スクロールは、手や指にハンデのあるユーザーにとってやりにくい（または不可能）な場合がある。なお、W3Cでは「水平スクロールと垂直スクロールのガイドライン」が提供されている。 Reflow SC 1.4.10 を参照。
• Webサイトの向き（レベル AA） – Webサイトは、モバイルやタブレット端末のどの向きでも表示できないといけない。Orientation 1.3.4 を参照。
• 適切なターゲットサイズの確保（レベル AA） – リンクが近すぎてアクティブにできなかったり、間違ったリンクに当たってしまわないようにする。Target Size SC 2.5.5 を参照。

Webアクセシビリティに関するその他のリソース

Webアクセシビリティは、最初は難しく感じるかもしれませんが、以下のようにUI（ユーザーインターフェース）を見つけたりテストするのに役立つリソースは多数あります。

• Official Web Content Accessibility Guidelines Website（WCAG 公式ウェブサイト）
• The A11Y Project（A11Y プロジェクト）
• Essential Accessibility（主なアクセシビリティ）
• 覚えておきたい Webアクセシビリティ 完全ガイド

コントラストチェッカーや色覚特性シミュレータなどの UXPinに内蔵されたアクセシビリティツールで、Webアクセシビリティテストを効率化しませんか。無料トライアルにサインアップして、コードベースのデザインでプロトタイプとテストがどのように強化され、ユーザーにインクルーシブなユーザー体験がもたらされるかをぜひご確認ください。

The post Webアクセシビリティ チェックリスト：遵守すべき２８点 appeared first on Studio by UXPin.

見た目の良いサイトや機能性の高いサイトもありますが、その両方を兼ね備えた魔法のようなインタラクティブなサイトもあります。

これらのサイトは、より深いレベルで私たちを惹きつけ、私たちの注意を引きつけ、私たちの想像力を定着させてくれます。私たちをその世界に引き込み、一瞬でも自分の世界を忘れさせてくれるのです。

この記事では、優れたデザインを持つ16のインタラクティブなウェブサイトを分析します。よりよいデザイナーになるために、これらのサイトからどのように学べばよいかを説明します。

インタラクティブ性と楽しさは、互いに影響しあっています。心理学者のEliot Aronson氏は、著書『The Social Animal』の中で、人は何かの作業を行う際に、その行為を頭の中で正当化する傾向があると説明しています。このことは、ユーザーが少しでも時間をかけてサイトを楽しむという自己実現の予言につながりやすいです。

これは必ずしもインタラクションに限ったものではありません。ビデオや心に響く映像など、感情を揺さぶるコンテンツでも同じ効果を得ることができます。この場合、コンテンツを見たり振り返ったりすることが、インタラクションでのユーザーの役割となります。このような体験は、映画を見たことがある人なら誰でも体験したことがあるように、没入感があり、同じようなつながりを形成することができます。

今年の新たなデザイントレンドにも注目していきましょう。

1. Nike Reactor

出典: Nike

まずはおなじみのNikeからご紹介します。このインタラクティブなウェブサイトでは、楽しくてシームレスなアニメーションと人目を引くビジュアルを使って、自分のReactランニングシューズを作ることができます。しかし、厳密な意味での靴作りではありません。ステッチや生地を選ぶ代わりに、シャボン玉、ストレスボール、スプリングなどを使うことができます。このような楽しいビジュアルを使用することで、ユーザーのエンゲージメントを高め、NikeのReactフットウェアが特別に快適であることをアピールしています。

出典: Nike

2. AirBnB Online Experiences

出典: AirBnB Online Experiences

人気の旅行サイトは、多くのリアルなインタラクションを伴わないインタラクティビティの完璧な例と言えるでしょう。AirBnBは、旅先で体験する日常の瞬間に潜む魔法を、注目を集めるさまざまな写真を通して描き出しています。 しかし、AirBnBのインタラクティブなウェブサイトは、従来の旅行サイトを超えて、他の人が主催するユニークなオンライン・インタラクションを提供しています。エキゾチックな場所へのツアーに参加したり、他のシェフから料理を習ったり、あるいはエスケープルームを解決したりと、これらのオンライン体験ができます。

3.  An Interesting Day

出典: An Interesting Day

このインタラクティブなウェブサイトは、最先端のグラフィックでなくても魅力的なデザインを作ることができることを示しています。「An Interesting Day」は、デジタルプロダクトスタジオ「Bakken & Bæck」がアムステルダムで開催した2018年のカンファレンスを記録したものです。すべてのアニメーションは手描きでシンプルに作られており、手作り感のあるサイトに仕上がっています。

出典: An Interesting Day

Webサイト全体が1つのページで構成されているため、ユーザーが必要とする情報をナビゲーションなしで得ることができます。

4. Chanel: Spring-Summer 2021 Haute Couture Show

出典: Chanel: Spring-Summer 2021 Haute Couture Show

シャネルは、雰囲気を作り出す方法をよく知っています。このサイトでは、動画、静止画、詩的な文章で書かれた商品説明が、インタラクティブなスクロールナビゲーションと一体となって、ブランドが誇るエレガンスとファッション性に満ちた環境にユーザーを没入させています。

5. Space Needle

出典: Space Needle

一般的にスクロールは、没入感のあるインタラクションのための優れた戦略です。シアトルを中心としたスペースニードルのサイトでは、美しいビジュアルと、スクロールで動くアニメーションのボックスでコンテンツを表示しています。ユーザーは通常、サイトを上方向にスクロールして詳細を確認することに慣れていませんが、このナビゲーションパターンは、画面上の旅にマッチしているため、この特殊な状況でも機能しています。

6. APPS

出典: APPS

APPSは、このリストの中で最もインタラクティブなサイトのひとつです。まず、サイダーの製造工程をガイドツアーで紹介します。数回ボタンを押すと、旅の続きをするように促されます。生き生きとした楽しいアニメーションと、ユーザーを飽きさせないインタラクティブな要素が特徴です。

7. Aquatic Macroinvertebrate Collection

出典: Aquatic Macroinvertebrate Collection

また、教育施設では、学習者の記憶に残りやすく、楽しみながら学習できるという価値を理解しています。「Aquatic Macroinvertebrate Collection」では、あまり知られていない生物を、体の各部分を拡大・縮小して説明文を読みながら観察することができます。それ自体は画期的なものではありませんが、何か新しいものを探求しているような不思議な気持ちにさせてくれます。インタラクティブなウェブサイトを作る際には、最高のデザインではなく、適切なデザインであることを忘れないでください。

8. The Happy Forecast

 出典: The Happy Forecast

私たちが好きなインタラクティブなウェブサイトの要素は、色の変化につながるホバーの状態や、インタラクティブ性を示すいくつかの動きです。美しい音楽とアニメーションは、感情的に没入し、魅力的な体験を生み出します。

9. Make Your Money Matter

 出典: Make Your Money Matter

私たちが好きなインタラクティブなウェブサイトの要素は、ストーリーを語り、ユーザーを教育的な旅へと誘うスクロール型のインタラクションです。スクロールするたびに、ストーリーの新しい部分が見えてきます。見事なイラストとアニメーションは、落ち着いたアースカラーのパレットで表現されています。

10. Mammut

 出典: Mammut 

山に登らずに山を登る。私たちが気に入っているインタラクティブなウェブサイトの要素は、ホームページ上で回転する360度のエベレスト山のアニメーションです。これは、奥行きを出すことでユーザーを引きつけます。また、スクロールすることで、インタラクティブでカスタマイズ可能な登山体験をユーザーに提供しています。

11. Hello Monday

 出典: Hello Monday

私たちのお気に入りのインタラクティブ要素は、ユーザーがメニューバーをクリックしたときに起こる水平方向のパララックス効果です。カーソルを置くとメニュー項目に動きが出るものや、2Dイラストのアニメーションなど、意外性のある要素が注目を集めています。

12. Ocean School

 出典: Ocean School

私たちが気に入っているインタラクティブなウェブサイトの要素には、ユーザーを海の奥深くへと誘うスクロール・インタラクションがあります。青と白のカラーパレットと3Dアニメーションは、アニメーションと色が変化するホバーの状態とともに、没入感のある体験を生み出しています。

13. Cyclemon

 出典: Cyclemon

私たちが気に入っているインタラクティブなウェブサイトの要素には、スクロールするインタラクションに垂直方向のパララックス効果があり、自転車のタイプによってユーザーが誰であるかを教えてくれます。大胆で楽しいカラーパレットは、それぞれのバイクタイプに合わせてカスタマイズされています。

14. Fontsmith

 出典: Fontsmith

私たちが気に入っているインタラクティブなウェブサイトの要素には、色や文字の大きさが変わる楽しいホバー状態があります。大胆でファンキーなカラーパレットは、最初からユーザーの注意を引きつけます。

15. Akita

 出典: Akita

イケアのお気に入りのインタラクティブなウェブサイト要素には、従来のトップダウンの方向性を覆すスクロールインタラクションがあり、インターネット上のデータの動きをグラフ化しています。また、ホバーするとポップアップで詳細情報が表示されます。

16. Pete Nottage

 出典: Pete Nottage

この声優さんのインタラクティブなウェブサイトは、ホバー・ステートや楽しいアニメーションを駆使して、印象に残るものになっています。

これらのインタラクティブなウェブサイトから学んだこと

私たちがこれらのインタラクティブなウェブサイトから見た最も一般的なインタラクティブ機能は、ホバー・ステートです。その理由は？幅広い業界で簡単に導入でき、気が散ることもありません。Ocean Schoolのようにシンプルなホバーやステートを試すこともできますし、Pete Nottageのようにアニメーションを使ったものにすることもできます。

スクロールインタラクションも、実装が簡単で、アニメーションを使わずに動きを表現できるため、人気のある要素です。Cyclemonのようにパララックス効果を利用したり、Akitaのようにストーリー性を持たせることもできます。ユーザーエクスペリエンスを向上させるために、これらのインタラクティブなウェブサイトでは、インタラクティブな機能やマイクロインタラクション以外にも様々な工夫がなされています。「Make Your Money Matter」のように楽しい配色を使ったり、「Fontsmith」のように感情を呼び起こして没入感を演出したりしている。また、MammutやHappy Forecastで使われているビデオやアニメーションは、ユーザーの注意を引く非常に深い映画のような体験を作り出すことができる。

インタラクションを促進し、エンゲージメントを高めるために、優れたインタラクティブサイトでは、一貫したデザインと、ストーリーテリングと優れたコピーライティングの組み合わせを用いて、好奇心を刺激し、エンゲージメントを獲得していました。インタラクティブな要素は、ただ目的のために使うべきではなく、その役割はユーザーの体験を高め、メッセージを伝えることにあります。

UXPinは、世界中の優秀なデザイナーが使用しているプラットフォームです。UX/UIプロジェクト全体をひとつのツールで管理することができます。デザインプロセスをシンプルにすることができます。UXPinを今すぐ完全なリスクフリーでお試しください。

The post 魅力的でインタラクティブなウェブサイト appeared first on Studio by UXPin.

パララックス・スクロールは、デザイナーが2次元の画面に3次元の体験を作り出すためのクリエイティブ・ツールです。パララックス・スクロール効果は、深みと奥行きを与え、ユーザーに没入感と魅力的な体験を与えることができます。これは、ブランドが常に目指していることです。

パララックス・スクロールとは何ですか？

パララックス・スクロールとは、要素が異なる速度で動いているように見えることで、3Dスクロール効果を生み出すウェブデザインの手法です。

車を運転しているときに、近くのものは早く通り過ぎ、遠くのものはゆっくりと通り過ぎるという奥行きの感覚に似ています。

パララックススクロールのパターンにはいくつかの種類がありますが、いずれもコンテンツのレイヤーを分けて使用することで、目的の効果を得ることができます。それぞれのレイヤーに異なるスクロールスピードを設定することで、ユーザーがスクロールするたびに画面内をオブジェクトが移動しているように見せることができます。

パララックス・スクロールを作ってみませんか？UXPinでは簡単に作成可能です。14日間のトライアルですぐにお試しいただけます。

パララックス・スクロールの歴史

パララックス・スクロールは、1930年代にディズニーの「白雪姫と7人の小人たち」などのアニメーション映画の手法として登場しました。1980年代初頭、ゲームデザイナーは、1981年に発売された「Jump Bug」をはじめとする2Dゲームに3D効果を持たせるためにパララックス・スクロールを使用しました。

しかし、2007年になって、Internet Explorer 6のJavascriptとCSS 2を使って、パララックス・スクロールがウェブデザインに登場しました。2011年にHTML5とCSS 3が導入されると、パララックス・スクロール効果の制作が容易になり、人気が高まりました。

現在、パララックススクロールは非常に複雑で、ウェブデザイナーは没入感のあるビジュアル体験を作り出すことができます。

パララックス・スクロールを使うタイミング

亜麻色のスクロールは、ユニークなユーザー体験を生み出す非常に効果的なツールですが、デザイナーは亜麻色のスクロールの欠点を考慮しなければなりません。悪影響を及ぼす可能性があるのです！

ページスピード

パララックス・スクロールは、特に共有ホスティングプランのウェブサイトでは、ページスピードを低下させます。Googleによると、Eコマースサイトでは2秒が限界とされています。しかし、その他のほとんどのウェブサイトでは、平均して3～6秒となっています。

では、Eコマースに関しては、どのような目標があるのでしょうか？ユーザーにウェブデザインのスキルを印象づけることでしょうか、それとも商品を売ることでしょうか？ページスピードを最適化できない限り、Eコマースやスピードが重視されるウェブサイトでは、パララックススクロールは避けた方がよいでしょう。

おすすめの記事： how to improve page speed for parallax scrolling（英語記事）

コンテンツへの影響は？

亜麻色のスクロール効果を追加する前のもう一つの疑問は、それがコンテンツにどのような影響を与えるかということです。

例えば、Collage Craftingのウェブサイトでは、デザイナーは販売店に視差効果を加えることにしました。

しかし、スクロールすると上下に切れてしまうため、一部のコンテンツが読みづらい。これでは、ユーザーはすべてのコンテンツを適切に消費することができず、良いユーザーエクスペリエンスとは言えません。

ユーザーにコンテンツを読んでもらう必要があるなら、シンプルにしましょう デザイナーがユーザーにコンテンツを提供し、かつ読みやすさを維持する方法は他にもあります。

 パララックス・スクロール 効果は、ユーザーの注意をそらしたり、迷惑をかけることはないのか？

パララックス・スクロールには、それなりの効果があります。クリエイティブエージェンシーにとっては、潜在的なクライアントにウェブデザインのスキルを印象づけるためにも意味があります。

しかし、もし私が自動車保険の見積もりを探しているとしたら、見積もりフォームにたどり着くまでに、派手なパララックス効果の中をスクロールして時間を無駄にしたいと思うでしょうか？おそらくそうではないでしょう。

ユーザーが素早く情報を求めている競争の激しい業界では、パララックス・スクロールは直帰率やコンバージョンに悪影響を及ぼす可能性があります。

常にコンテンツ、コンテクスト、そしてウェブサイトがユーザーにどのようなサービスを提供しようとしているのかを考えましょう。

優れたパララックス・スクロール　9つの例

これらのWebサイトの多くは、デザイナーがストーリーを伝えるためにパララックスをどのように使用しているかというテーマが際立っています。

紹介している例からわかるように、パララックスは強力なストーリーテリングツールになりますが、そのためには多くにおいての考慮や計画が必要です。

NIIKA

NIIKA は、オーストラリアを拠点とするクリエイティブ・エージェンシーです。主人公のイメージは、美しい抽象的なデザインに微妙な動きを加えたものです。スクロールすると、抽象的なオブジェクトがページ内を移動し、大きな動くヘッドラインがエージェンシーのサービスを表示します。

さらにその下には、背景に固定されたカスタムマップを使用したパララックス・スクロール効果があり、エージェンシーの連絡先詳細が上部にスクロールします。

NIIKA は、フッター付近にある「私たちと一緒に働きませんか」というCTAにもパララックス効果を使用しています。

NIIKA は、パララックス・スクロールに多くのコピーを使用していますが、重要な情報やメッセージを見失うことはありません。

CANN

CANN は、アメリカの大麻入りトニック飲料メーカーです。このウェブサイトでは、没入感のあるシームレスなパララックス・スクロール効果を用いて、ブランドストーリーを伝えています。 開発者は、このような複雑なパララックス・スクロール効果に対応できるように、CANNのウェブサイトを最適化するという素晴らしい仕事をしました。

コピーやコンテンツは読みやすく、パララックス効果でブランドが持つストーリーを伝えることができ、泡でトニックを表現しています。また、色を効果的に使い、CANNの3つのフレーバーを表現しています。

ウェブデザイナーは、CANNのストアにおいても素晴らしい仕事をしており、派手な効果を捨てて、コンバージョンのためにデザインを最適化しています。

Toy Fight

Toy Fightは、イギリスに拠点を置くクリエイティブエージェンシーです。このウェブサイトでは、トップページにシンプルかつエレガントなパララックス・スクロール効果を採用し、ページの中央には明確な行動喚起が表示されています。

Toy Fightでは、各ページにパララックス効果を用いて、ヒーローからページのコンテンツへと移行しています。このパララックス効果は、アニメーションがどこかおどけている一方で、コンテンツは会社のサービスや過去の仕事について説明しているという、まるでカーテンを開けるような巧みな演出です。

Toy Fightのウェブサイトは、パララックス・スクロールがどのようにストーリーを伝えることができるかを示す素晴らしい例です。

Garden

Garden は、数々の賞を受賞したポルトガルのデザインスタジオです。このサイトでは、美しいパララックス効果を利用して、庭の夕日を描いたヒーロー画像をスクロールしていくと日が暮れていきます。

さらにその下には、スクロールしながらスケッチしているかのような線やアイコンが現れます。繊細な効果により、Gardenのサービスやヘッドラインなどの重要な情報に目がいきます。

Smart Move

Smart Move は、スウェーデンのグレーター・オレブロ地域に専門家を誘致し、維持するための取り組みです。このサイトのトップページには、エーレブローの特徴や文化を紹介する印象的な水平方向のパララックス・スクロール効果があり、それぞれに関連するリンクが貼られています。

このパララックス効果は、自然、商業、家庭生活、娯楽、ナイトライフなど、スウェーデンの様々なシーンを巧みに表現しています。

Bertani Wines

Bertani は、イタリアのワインメーカーです。このウェブサイトでは、水平方向のパララックス効果を利用して、画像、ビデオ、コピーでブランドのストーリーを表現しています。

この効果は、水平方向と垂直方向の動きを組み合わせて、ブランド、ブドウ畑、ワインを巡る旅へと誘います。Bertani社のデザイナーは、複雑な水平視差効果と説得力のあるストーリーテリングのバランスをうまくとっています。すべてが理にかなっており、メッセージ性も際立っています。

Quentin Goupille

Quentin Goupille は、パリ出身のフリーランスのアートディレクター、イラストレーター、映像制作者です。彼のポートフォリオは、パララックス・スクロール効果を用いて、各プロジェクトの背景にあるストーリーを伝えています。

各ページはそれぞれ異なっており、Quentinはパララックス効果を使って、ユーザーを各作品の旅へと誘います。その結果、Quentin氏のストーリーテリングと創造性が印象的に表現されています。

Quentin Goupille氏のウェブサイトは、クリエイターが視差効果を利用して、自分の作品をユニークで魅力的な方法で紹介できることを示す素晴らしい例です。

Crazy About Eggs

Crazy About Eggsは、放し飼いにこだわり、鶏に健康的な農場生活を送らせることに情熱を注ぐオランダの養鶏業者です。

このウェブサイトでは、小さな要素や小見出しを紹介するために、微妙なパララックス・スクロール効果を使用しています。この会社の卵の箱は、半分までスクロールしても静止したままで、製品の利点が左右にスクロールします。

これは、ブランドを前面に押し出し、ユーザーが製品に親しみを持てるようにする、非常にクリエイティブな方法です。ユーザーは次にスーパーに行ったとき、Crazy About Eggsのパッケージに気づくことでしょう。

Kibana

Kibana は、宿泊施設、イベントスペース、庭園、マーケットなどのアウトドア体験ができるフランスのリゾート地です。

ヒーロー画像には、テキストによる紹介文を掲載しています。スクロールすると、Kibanaの美しい庭園の中に入り込み、すぐにその場にいたいと思うでしょう。

さらにスクロールすると、微妙な動きでKibanaの主要な機能や美しい画像にユーザーの注意が向けられるようになっています。フッター付近では、デザイナーが巧みなパララックス効果を使ってKibanaのチームを紹介しています。

まとめ

いかがだったでしょうか？スクロールは強力なツールですが、デザイナーはユーザーを感動させ、ストーリーを伝えるために使用する必要があります。上で紹介した例のようにパララックスを効果的に使用するには、多くの時間、コラボレーション、そして計画が必要です。

ユーザーのニーズを常に念頭に置き、ユーザーエクスペリエンスに悪影響を与えるようなパララックス効果は使用しないようにしましょう。

UXPinを使った素晴らしいUXデザイン

UXPinは強力なコラボレーションデザインツールで、プロジェクトの成功に向けてチーム全体を招待することができます。UXデザイナーはUXPinを使って、没入感のあるビジュアル体験やUIをデザインすることができます。

UXPinの14日間の無料トライアルで、美しいUXの創造を始めましょう。

The post パララックス・スクローリング を使ったデザイン appeared first on Studio by UXPin.

Webデザインの基本をおさえておけば、UX（ユーザーエクスペリエンス）にどのような影響を与えるかがわかります。そこで本記事では「 Webデザイン 」について簡潔にご紹介します。

UXPinのインタラクティブなプロトタイプで、Webデザインの旅を始めてクライアントや雇用者に好印象を与えませんか。無料トライアルにサインアップして、UXPinの高機能がデザインプロジェクトをどのように充実させるか、ぜひご覧ください。

 Webデザイン とは

Webデザインは、視覚的に魅力的で、直感的で、機能的なデジタル環境を構築するための複合的な技術ですが、それは「見た目」に限ったことではありません。デザイナーはユーザーが簡単に操作できるインターフェースを作る必要があり、それが満足度の高い効率的なインタラクションに繋がるのです。

また、Webデザインは、ニュースや eコマース、オンラインコミュニティなど、Webサイトの目的を達成するために、色やタイポグラフィ、画像などの要素を熟考して配置し、UX を上げることを目的としています。

Webデザイン と Web開発

Web 開発 のプロセスには、明確に異なる分野が２つあります。よくWeb 開発とは、Web サイトを構築するエンド・ツー・エンドのプロセスを包括したものとして使われますが、Web 開発プロセスは以下のように２つの段階に分かれます：

• Web デザインの段階では、リサーチ、ユーザーインタビュー、アイデア出し、プロトタイプ、テストなどが行われる。
• Web 開発の段階では、デザインチームのデザイン、プロトタイプ、ドキュメントに基づいて、そのソリューションを、機能する Web サイトや Web  アプリケーションに開発しないといけない。

デザインプロセスでは、サイトの LnF（ルック＆フィール）、ナビゲーション構造、情報アーキテクチャ、インタラクションデザインなど、デベロッパーのためのプランとロードマップを作成します。しっかりとしたデザインがないと、デベロッパーは方向性を見失って、デザイナーとデベロッパーの摩擦を招くことになりますからね。

レストランに例えるなら、デザインチームはユーザーやステークホルダーのニーズに基づいてレシピを作成して食材を調達する担当で、エンジニアリングチームは最終的な料理を作って出す人です。

UIとUXデザイン

 Webデザイン には２つの役割があり、それぞれ少し違うところに重点を置いています：

• UI（ユーザーインターフェースデザイン）：ボタン、色、アイコン、タイポグラフィ、画像、フォーム、その他の要素やコンポーネントなど、デジタル製品やWeb サイトを利用する際にユーザーが接するビジュアルデザイン要素の作成に重点が置かれる。
• UX（ユーザーエクスペリエンスデザイン）：UI を含む、製品に触れたときに感じるユーザー体験の総称。UX デザイナーは、製品の体験を最適化し、より楽しく、より使いやすいものにするために、ナビゲーションやユーザーフローにも重点を置く。

ちなみに、大きな組織では、他にも以下のようなデザインの役割を担うことがあります：

• インタラクションデザイン
• コンテンツデザイン
• UXリサーチ
• DesignOps

さらに読む：UXチームの構成 – プロダクトデザインでキャリアプランを立てるには？

 Webデザイン の基礎知識

ここでは、 Webデザインの基本的な要素をざっくりご説明します。

• レイアウト：Webページ上の要素の配置や構成。ユーザーの視線の場所から別の場所に誘導し、サイトとの関わり方に影響を与える。効果的なレイアウトだと、ユーザーは確実にスムーズに移動でき、それによってポジティブなユーザー体験が促される。
• タイポグラフィ：サイト上で使用される書体やスタイルは、ブランドの個性を伝え、読みやすさを促進する。いいタイポグラフィというのは、デザイン全体を補完し、読みやすさを高め、視覚的な調和を保つフォント、サイズ、配置が使われている。
• 色：色は感情を動かすことができ、ユーザーの行動を促すことができる。効果的な配色だと、ブランドのアイデンティティとターゲットユーザーの好みに合致しており、対照的な色を使うと、CTA（Call To Action：行動喚起）ボタンなどの重要な要素が強調される。
• 画像とグラフィック：写真、イラスト、アイコンなどのビジュアルコンテンツで、Web サイトの魅力が上がり、ブランドのメッセージがより強く出る。また、画像は高品質かつ適切で、すぐに読み込めるように最適化されてないといけない。
• ナビゲーション：Web サイトのロードマップ。明確で直感的なナビゲーションだと、ユーザーはサイト内を移動しやすくなり、ユーザーの満足度とエンゲージメント向上につながる。また、ユーザーに優しいナビゲーションシステムには、論理的なページ階層やクリック可能なボタンが含まれる。
• コンテンツ：コンテンツデザインは、テキスト、画像、地図、動画などを組み込み、情報を提供し、ブランドのストーリーを伝え、ユーザーの行動を促すものでないといけない。また、よく構成されたコンテンツは SEO（検索エンジン最適化） ランキングとユーザーエンゲージメントを高めることができることから、コンテンツは関連性が高く、価値があり、ユーザーにとって魅力的でないといけない。

 Webデザイン の原理

• バランス：Webデザインにおけるバランスとは、レイアウト全体における視覚的要素の配分のことを指し、バランスのとれたデザインによって安定と調和が保たれる。また、デザイナーは大きさ、色、質感などを適切な比率で配置することで、バランスを取ることができる。
• コントラスト：形や大きさ、色を使って要素を際立たせるものであり、コントラストで重要なポイントが強調され、CTA ボタンやキーメッセージなど、ユーザーの注意を必要な部分に誘導できる。
• 強調：特定の要素や特徴を他よりも際立たせる手法。デザイナーは、色、サイズ、アニメーションなどを使って強調を実現でき、特定の要素を強調することで、ユーザーの注意をサイトの最も重要な部分に誘導できる。
• 一貫性：デザインに一貫性を持たせることで、統一性のある予測可能な UX が実現する。Web サイト全体で一貫したフォント、色、スタイルを使用することで、よりスムーズなユーザージャーニーが実現し、ブランドの認知度が高まる。
• 統一感： デザインの全パーツがいかにうまく調和しているかということ。ページ上の要素が全て調和して表示され、まとまりのある UX を実現することを保証するものであり、それによってデザイン全体のテーマと目的が強化される。

レスポンシブ  Webデザイン 

レスポンシブ Web デザインは、さまざまなデバイスやビューポートで、最適な閲覧体験を提供し、その UI（ユーザーインターフェース）は、デスクトップパソコンやタブレット端末、携帯電話など、どれでアクセスしても、見た目も機能も一貫してシームレスでないといけません。

レスポンシブ  Webデザイン の重要性

レスポンシブ Webデザインは、世界中で使われているあらゆるデバイスで一貫した UX を提供するのに不可欠です。 例えば Webサイトがレスポンシブでないと、モバイルデバイス上では表示がぎゅうぎゅう詰めになったり、読みにくかったり歪んだりするため、そこでUXに不満が生じ、ユーザー離脱の可能性が高くなります。

UX（ユーザーエクスペリエンス）への影響

レスポンシブデザインが、ユーザーが画面サイズや向きに関係なく、最小限のサイズ変更、パニング、スクロールで簡単にサイトを読んで操作できるように保証することで、UX は大幅に上がります。

また、レスポンシブデザインは、単に画面に合わせるだけでなく、ユーザー中心の思考を応用して、ユーザーの好みや状況に応じたクロスプラットフォーム環境を構築することが重要です。レスポンシブ Web デザインは、もはやオプションではなく、包括的でユーザーに優しい Web サイトの構築には欠かせないものなのです。

Webアクセシビリティを理解する

Web アクセシビリティは、Web デザインがハンディキャップがあるユーザーにどのような影響を与えるかを考慮するものです。これはインクルーシブデザインの重要な側面であり、国によっては Web アクセシビリティが法的要件となっているところもあります。

また、Web コンテンツをよりアクセシブルにするためにデザイナーが従うべき一連の推奨事項として、WCAG（Web コンテンツ アクセシビリティ ガイドライン）があります。このガイドラインは、視覚、聴覚、認知、物理的なアクセシビリティがカバーされており、能力やハンディキャップの有無にかかわらず、全ユーザーがWeb と対話し、恩恵を受けられることを保証するものです。

 Webデザイン を始めるための3つのステップ

１．学習リソースを入手する

Coursera、Udemy、Khan Academy などのプラットフォームには、オンラインコースが豊富にあり、その中には、UX デザインの第一人者が講師を務めるコースもあります。例えば、Coursera では、元 Google 社員や現 Google 社員が教える UX デザインコースがあり、YouTube でも多くの無料チュートリアルやコースが公開されています。

また、スティーブ・クルーグ著「Don’t Make Me Think」やジェシー・ジェームス・ギャレット著「The Elements of User Experience」などの書籍では、UCD（ユーザー中心のデザイン）に関する貴重なインサイトが得られます。

こちらにもおすすめの本をご紹介しています。

２．ポートフォリオを作成する

大抵のUXデザインやWebデザインのコースでは、ポートフォリオの作り方を学びます。ポートフォリオは、デザイン思考、UX、リサーチ、ワイヤーフレーム、プロトタイプなど、作品とデザイン原則に対する自身の理解を紹介するものであり、それには進化が求められるので、定期的な最新作品の更新は、デザイナーとしての成長と多才さを示すのに不可欠です。

３．ネットワーキングとメンターシップを求める

Web デザインのキャリア、特にデザインリーダーへの登竜門やスタートアップの立ち上げを目指すなら、人脈づくりとメンターシップは欠かせません。このような関係を築くことで、デザイナーとして、またプロフェッショナルとして成長し、より多くのチャンスや収入を得る可能性が広がります。

Webデザイナーのスキル

ハードスキル

• デザイン原則の理解： バランス、コントラスト、タイポグラフィなどのデザイン原則に習熟することは、美的感覚と実用性を兼ね備えた Webデザイン を実現するための基本である。
• デザインソフトの熟練度： Web デザイナーにとって、さまざまなデザインツールの使いこなしは不可欠であり、そのようなツールで、ビジュアルの作成や編集、プロトタイプの開発、UI のデザインができるようになる。
• HTML/CSSの知識：常に必要というわけではないが、HTMLとCSSを理解していると、Web デザイナーにとっては知ってて損はない。それでデベロッパーがデザインをどのように実装するかがわかり、それによってエンジニアリングチームとのより良い連携が促進される。
• レスポンシブデザイン： さまざまなデバイスや画面サイズに対応するデザイン方法の理解は不可欠であり、メディアクエリやフルードグリッドを使いこなすことが、レスポンシブデザインの作成には非常に重要である。
• UX（ユーザーエクスペリエンス）デザインと UI（ユーザーインターフェース）デザイン： UX デザインは、スムーズで楽しいユーザージャーニーの実現に焦点を当て、UI デザインは、Web サイトのLnF（ルック＆フィール）に焦点を当てており、どちらもユーザーに優しいデザインの実現には非常に重要である。
• SEOの知識：SEOは コンテンツ制作のイメージが強いが、Web デザインにおいても重要であり、SEOのベストプラクティスを知ることで、デザイナーはより効果的で発見しやすいサイトを作ることができる。

ソフトスキル

• コミュニケーション： クライアントやステークホルダーに自分のアイデアを明確に伝え、要件を理解し、他のチームメンバーと効率的に連携することがよく求められる。
• 問題解決：Web デザインには、ユーザビリティの問題やクライアント／ステークホルダーからの要望など、複雑な課題が数多くあることから、問題の特定や、創造的な解決策を見出すことができる能力が不可欠である。
• 汎用性の高さ： Web デザインのトレンドやテクノロジーは常に進化しており、常に変化し続けるこの分野では、それに順応し、新しいスキルを身につけることが重要である。
• 時間の管理：Web デザイナーは、複数のプロジェクトを同時にこなすことがよくあることから、時間管理能力が高ければ、納期を守り、仕事量を効率的に管理することができる。
• 共感力：ユーザーのニーズを理解し、いい UX を提供するデザインを生み出すには、共感力が基本である。
• 細部へのこだわり：Web デザインでは、些細なディテールでも全体の UX に影響を与えることがあることから、細部にまでこだわることで、デザイナーは洗練された効率的なデザインを生み出すことができる。
• フィードバックへの受容性： デザインは主観的なものであり、批評も仕事の一部であることから、フィードバックや批評を受け入れ、それを建設的に活用することは、デザイナーとしての成長につながる。

UXPinによるインタラクティブなプロトタイプ

従来の画像ベースのデザインツールでデザイナーが遭遇する最大の問題は、忠実性と機能性の欠如であり、そのせいで最終製品に近い外観と感触のプロトタイプを作成するのはほぼ不可能になります。

UXPin が他と一番大きく違うところは、他の一般的なデザインツールのようにキャンバス上にオブジェクトを配置したりする際に、ベクターグラフィックスを生成するのではなく、裏で HTML、CSS、Javascriptをレンダリングする点です。

このコードベースのデザインアプローチにより、デザイナーはプロトタイプの忠実性と最終製品と見分けがつかないほどの機能性の再現が可能です。さらに、プロトタイプの品質が高まれば、テストもしやすくなり、デザイナーは有意義で実用的なフィードバックを得て、反復して改良することができます。

世界最先端の UXデザインツールで、デザインスキルを高めませんか。無料トライアルにサインアップして、UXPin でインタラクティブなプロトタイプ第１号をぜひ作成してください。

The post Webデザイン でキャリアを始めるための基礎 appeared first on Studio by UXPin.

ユーザーフローは、UX のデザインプロセスにおいて不可欠なものです。この貴重な UX のアーティファクトによって、プロダクトチームはユーザーの視点からフローやプロセスを視覚化し、エラーを減らし、UXを向上させることができます。

そこで本記事では、 ユーザーフロー について深く掘り下げ、その重要性、ユーザーフローを導く原則、視覚的表現、そして様々な種類のフローについて見ていきます。

アイデア出しからデザインハンドオフまで、デザインプロセスのあらゆる解決策となるオールインワンデザインツールである UXPin で、ユーザーフローの作成と高忠実度なプロトタイプのデザインをしませんか。今日からプロトタイプ第１合を作りましょう。無料トライアルのお申し込みはコチラ。

UXにおける ユーザーフロー とは？

ユーザーフローとは、デジタル製品、アプリ、Webサイトをナビゲートする際に、ユーザーが行う一連のステップ、決定、アクションを表すグラフィックビジュアライゼーションです。

プロダクトチームは通常、オンボーディングやECサイトで商品購入時など、一度に１つのタスクやゴールに焦点を当てます。デザイナーは、これらの場面でのユーザーフローにおけるプロトタイプを作成し、担当者やステークホルダーと UX（ユーザーエクスペリエンス）をテストし、フィードバックを繰り返しながら、開発可能な製品を完成させていきます。

UXデザインでの ユーザーフロー の重要性

ユーザーフロー は、ユーザーが特定のタスクやゴールを達成するために、アプリケーションやWebサイトを通過する経路を可視化するものであり、その可視化によって、チームはユーザーフロー内の摩擦点や機会を特定し、それを解決するためのソリューションを設デザインすることができます。

さらに、デザイナーは、より効率的で満足度の高いユーザー体験を実現するために、フローの最適化も視野に入れることができます。

よくデザインされた ユーザーフロー がもたらすメリット

ユーザーと組織にとって、以下のような多くのメリットにつながります：

• ユーザビリティの向上：最適化されたユーザーフローは直感的で、意思決定がシンプルであり、認知負荷を軽減するため、ユーザーが迷ったりイライラしたりすることのない、ユーザーに寄り添った体験がもたらされる。
• 顧客維持の向上：デジタル製品がユーザーのニーズを満たし、タスクの遂行や目標の達成を実現すれば、ユーザーはその製品を使い続け、そのポジティブな体験を共有する可能性が高くなる。
• コンバージョンの向上：ユーザーフローを効率化することで、サインアップ、購入、サブスクリプションなど、ビジネスの収益を生み出すタスクの障害となるものが取り除かれる。
• コスト削減：ユーザーフローの最適化によって冗長な画面や機能が削除されるため、デザイン、開発、メンテナンス、サーバーリクエスト、API 使用など、多くのコスト削減につながる。
• アクセシビリティの向上：デザインチームは、アクセシビリティ要件を満たすのにユーザーフローを視覚化して最適化することができ、それによって UI がより包括的なものになり、製品のユーザーベースが増える。
• データに基づいたデザインの決定：ユーザーフローを分析することで、ユーザーの行動や嗜好に関する貴重なインサイトが得られ、それによってデザイナーは、思い込みではなく実際のデータに基づいて意思決定を行うことができる。また、データに基づいたデザイン決定により、ユーザーのニーズを満たす製品や体験が実現し、より直感的で楽しく、ユーザーに寄り添ったものになる。

効果的な ユーザーフロー の UX の原則

うまくいくユーザーフローには、デザインコンセプトや意思決定の指針となる UX の原則が組み込まれています。ここでは、ユーザーフローをデザインする際に考慮すべき基本的な UXの原則 をいくつかご紹介します：

わかりやすさ と シンプルさ

ユーザーフローは、わかりやすく、ナビゲートしやすいものでないといけません。なので複雑なデザインや、使う前に学ばないといけないような機能は避けないといけません。また、ナビゲーションとインタラクションの要素は、一貫性があって予測可能で、わかりやすいものでないといけません。プロセスやインタラクションが、頭を使いすぎるのを強いられるようなものだと、それをやめるのが痛い出費になったとしても、より簡単な選択肢の方に行ってしまうでしょう。

一貫性

製品やユーザーフロー全体を通して、一貫したデザイン言語、レイアウト、パターン、インタラクションデザインを維持しましょう。デザインの一貫性で親しみやすさが高まり、より直感的でユーザーに優しい体験をもたらしますからね。

柔軟性

代替経路やショートカット、入力方法など、タスク完了のための方法を複数提供することで、さまざまなニーズや好み、能力に対応したフローをデザインしましょう。

フィードバックとコミュニケーション

UIフィードバックは、ユーザーをガイドし、ユーザーフローをナビゲートする際の期待値を管理するものであり、例えば、進捗インジケーター、視覚的ヒント、ステータス情報、「完了」や「エラー」などのメッセージ、警告などがあります。このようなコミュニケーションによって、ユーザーはシステムの状態、操作が完了したかどうか、次に何をすればいいかがわかります。

ユーザーニーズの予測

デザイナーは、ユーザーリサーチを活用してユーザーのニーズの予測や対処をすることで、障害や行き詰まりを防ぐことができます。役立つヒントやエラーを防ぐ機能が追加されれば、ユーザーはより早く問題を解決し、より効率的で効率的なフローを実現できます。

最小限の工程

デザイナーは、不必要な工程やアクション、意思決定ポイントを排除することで、ユーザーフローを効率化することができます。このような摩擦を最小限に抑えることで、効率性が上がり、エラーやドロップオフを減らすことができます。

ユーザーの目的を重視

あなたは、目的を効率的に達成できる製品を使いたいですか、それともビジネス価値の提案やその他の無関係なコンテンツで溢れかえっている製品を使いたいですか？ユーザーの目標や望む結果を優先し、効率と成功を高める機能を備えたユーザーフローをデザインしましょう。

アクセシビリティとインクルーシブ

多様な能力、嗜好、デバイスを持つユーザーが製品を使い、フローをナビゲートし、タスクを完了できるようにしましょう。デザイナーは、フォントサイズ、色のコントラスト、キーボードナビゲーション、言語、スクリーンリーダーとの互換性などの要素が、UX にどのような影響を与えるかを考慮しないといけません。アクセシビリティについての詳細は、こちら（英語のブログとなります）をご覧ください。

 ユーザーフロー の可視化するための方法

ユーザーフローの種類を調べる前に、デザインチームがジャーニーのマッピングを可視化するのに使う方法について説明することが重要です。

フローチャート

ユーザーフローチャート（ユーザーフロー図）は、情報の流れ、意思決定ポイント、ユーザーの行動を表現するために、多くの業界で使用されている図解技法であり、記号、矢印、その他の図形を使って、要素、プロセス、決定、データの入出力を表現します。

ワイヤーフロー

ワイヤーフローは、ワイヤーフレームとフローチャートを組み合わせて、ユーザーがインターフェースを通過するまでの道のりを詳細に表現しており、各画面のレイアウトや、ユーザーや情報が画面間をどのように流れるかが表現されています。

ワイヤーフローで、ユーザーと特定の要素とのインタラクションの視覚化や、そのインタラクションのコンテキストを理解することができ、デザイナーやエンジニアは、ワイヤーフローを使って情報アーキテクチャやナビゲーションをより詳細に視覚化することができます。

スクリーンフロー

スクリーンフローとは、ユーザーが製品を操作する際の経路を示す、注釈付きのスクリーンショットやモックアップのことです。ワイヤーフローを忠実に再現したもので、デザイナーやステークホルダーは、最終製品を正確に表現した画面を使って、ユーザーフローをより詳細に視覚化することができます。

ストーリーボード

デザイナーは、映画業界のようにストーリーボードを使い、一連のイラスト、画像、またはスクリーンを使ってユーザーのジャーニーを表示します。ストーリーボードで、デザインチームはユーザーフローからズームアウトして、ユーザーの環境や状況を視覚化することができます。

例えば、食品配達のドライバー向けのアプリをデザインする場合、ユーザーフローを以下のように多角的に可視化する必要があるでしょう：

• 徒歩
• 自転車
• 原付き／バイク
• 車
• バン

ストーリーボードとユーザーフローを組み合わせることで、デザインチームがユーザーとより深く共感し、より適切なソリューションを提供することができるのです。

ユーザーフローの種類

ここでは、一般的なユーザーフローのカテゴリーを７つご紹介します。デザインチームは、このユーザーフローを視覚化するために、上記のテクニックとメディアを使うといいでしょう。

タスクフロー

タスクフローは、特定のタスクを完了するためにユーザーが実行しなければならない手順を表しており、ユーザーの行動と意思決定の順序に焦点が当てられ、多くの場合フローチャートを使って視覚化されます。特にペインポイントを特定し、ユーザージャーニーを最適化するのに有効です。

オンボーディングフロー

オンボーディングフローで、プロダクトチームは製品の初期設定と導入を可視化し、デザインできるようになります。このフローは、アカウント作成、チュートリアル、ハイライト、カスタマイズされたオプションを組み込んでユーザーに慣れ親しんでもらい、すぐに使い始めてもらうことを目的としています。

コンバージョンフロー

コンバージョンフローは、収益と成長を生み出すのに非常に重要であり、ニュースレターの登録、購入、プランのアップグレードなど、目的の行動や結果に至るまでのステップを表すものです。デザイナーは通常、コンバージョン率やアップセルなどの収益を生み出す活動を最大化するために、このフローにおける摩擦や注意力を最小限に抑えることを目指します。

ナビゲーションフロー

ナビゲーションフローは、デジタル製品の構造とアーキテクチャを概説するものです。デザインチームは、ユーザーが画面、セクション、機能の間をどのように移動するのかを、この可視化によって理解するすることができます。ユーザーがより速く探し、より効率的にタスクをこなせるように、彼らはこのようなインサイトを使って機能やコンテンツの優先順位を決めていきます。

アカウント管理フロー

ユーザーは、住所、パスワード、請求書の詳細、アプリの設定、定期購読など、アカウント情報を更新する必要があることがよくあります。アカウント管理フローは、このような管理業務をシンプルにし、ユーザーがより重要な業務に専念できるようにするためのものです。

エラーフロー

エラーフローによって、デザインチームは問題をシミュレーションし、それを解決するためのソリューションをデザインすることができます。このようなインサイトは、ユーザーフローを改善し、エラーの発生をなくしたり、ユーザーが問題を修正するための適切なフィードバックを作成するのに使われます。

オフボーディングフロー

オフボーディングフローは、定期購入の解約やアカウントの削除など、製品やサービスの利用を中止する際にユーザーを誘導するフローです。このフローは、オンボーディングと同様に効率的でなければならず、それによってフラストレーションが最小限に抑えられ、顧客を取り戻す可能性が上がります。

 ユーザーフロー の作り方８つのステップ

ここでは、ユーザーフローを作成するためのフレームワークを順番にご紹介します。

１．目標とエントリーポイントを明確にする

分析したいタスクや目標を特定します。− これは、上記のユーザーフローや製品にとって固有のものである可能性があります。この目標で、ユーザーフローの範囲と焦点、およびどの視覚化が最も適切かを決めることができます。

また、Webサイトの UX をデザインする場合、フロー作成の前に、ユーザーがどこからやってくるのかを判断してマップ化するのもいい習慣です。モーガン・ブラウン氏の『Stop Designing Pages and Start Designing Flows （ページのデザインをやめてフローのデザインを始めなさい）』でのアドバイスに基づき、Webやモバイルのプロトタイプでは、以下のソースを検討することをお勧めします：

• ダイレクトトラフィック
• オーガニック検索
• 有料広告
• SNS
• 紹介サイト
• メール

２．ペルソナを特定する

あなたの製品には、多くのユーザーペルソナがあるかもしれません。その中から、ユーザーフローに最も関連性の高いものを決めましょう。また、複数のペルソナに対してユーザーフローを評価し、全員のニーズと期待を満たすようにするのもいいかもしれません。

ペルソナのテンプレートや作成に役立つヒントについては、無料のeブック『The Guide to UX Design Process & Documentation （UXデザインプロセス＆ドキュメンテーションの手引き）』の「Analyzing Users Before Diving Into Design（デザインに入る前にユーザーを分析する）」の章をご参照ください。

３．ユーザーのアクションと意思決定ポイントをリストにする

ユーザージャーニーを個々の行動と意思決定ポイントのリストにして噛み砕き、目標達成のためにユーザーが取るべき各ステップとその選択肢を考えましょう。例えば、サインアップ画面には、メールでのサインアップや複数のソーシャルログインなど、いくつかのオプションがあるとします。サインアッププロセスを完了するための工程はオプションごとに違いますよね。

４．フローをマップ化する

まずは、紙やデジタルツールでフローをスケッチし、多くのアイデアを速やかに反復することから始めましょう。そしてこれは、チームメンバーがアイデアや提案を共有する共同作業であるべきです。

基本的な概要が決まったら、デザインツールでユーザーフローを作成するといいでしょう。UXPin にはデザインライブラリが５つ内蔵されており、そのうちの１つが「ユーザーフロー」という名前にふさわしいものです。UXPin のユーザーフローライブラリには、チームがユーザージャーニーを作成・共有するために必要な、以下のようなものがすべて含まれています：

• あらゆる方向に対応するフローライン
• アクションブロック
• アイコンブロック
• ラベル
• デバイス（モバイル、タブレット、デスクトップ）
• ジェスチャー

ここでは、フローアウトライン化するためのテクニックをいくつかご紹介します。

ライティング優先のアプローチによるフローのアウトライン化

ジェシカ・ダウニー氏がJumpstarting Your App Conception Without Sketching UI （UI をスケッチすることなく、アプリの構想をスタートさせる）という記事で書いている、「ライティング優先」のアプローチを使うといいでしょう。このアウトライン化手法で、アイデアを具体化し、アプリやサイトの各ページの「共通理解」を構築することができます。

例えば、銀行アプリを作ってみましょう。シナリオは、「自動入金をオンにしたい人がいる」です。以下のアウトラインで、[ 括弧 ]内のコンテンツはアクションボタン/リンクを表していることに注意してください。

ステップ1：自動入金の設定を希望しますか？

[自動入金の設定]

ステップ2: 入金頻度の選択

[月１回]　[月２回]

[一週間おき]　[毎週]

ステップ3：毎月１回入金する

[カレンダーの日付の選択]

ステップ4：金額の設定

金額表示欄

[自動入金の設定]

フローをアウトライン化するための速記法

また、Basecamp のライアン・シンガー氏が使っている速記法のアプローチも試してみてください。彼のアプローチは、フローを継続的な会話として扱います。

上記の銀行アプリの例では、ステップ２とステップ３の略記を作成すると、次のようになります：

シンガー が Basecamp でどのように速記を行い、このアウトライン化プロセスでどのように複雑なフローを描けるかは、「A Shorthand for Designing UI Flows （UIフローのデザインのための速記法）」でご確認ください。

５．スクリーンを追加する

ワイヤーフローやスクリーンフローをデザインしている場合、ユーザーフローに必要な忠実度のレベルに応じて、関連するワイヤーフレーム、モックアップ、スクリーンショットを追加するといいでしょう。

６．システムのフィードバックを含める

エラーメッセージ、完了通知、ロードインジケータなど、システムのフィードバックとレスポンスを追加しましょう。このような詳しい情報によって、デザイナーやエンジニアは、ユーザーを案内するための適切な UI コンポーネントやコンテンツを作成することができます。

７．レビューとイテレーション（反復）

ユーザーフローを分析し、潜在的な改善点、ペインポイント、または摩擦を確認しましょう。また、可視化したものをチームメンバーやステークホルダーと共有してフィードバックをもらい、プロトタイプに適したフローができるまで反復しましょう。

８．プロトタイプとテスト

デザインツールでユーザーフローのプロトタイプを作成しましょう。UXPin に内蔵されているデザインライブラリ（iOS、Material Design、Bootstrap、Foundation）は、Webおよびネイティブアプリケーション用の UI コンポーネントとパターンをデザイナーに提供しており、デザインライブラリパネルから UI 要素をドラッグ＆ドロップして、ブラウザでテストできる忠実度の高いモックアップの作成や、UXPinミラーを使ったモバイルアプリのテストを行うことができます。

以下のような高度な UXPin 機能を使って完全にインタラクティブなプロトタイプを作成し、最終製品を正確に複製する結果を達成しましょう：

ステート：UI 要素１つに対して複数のステートを作成し、アコーディオン、カルーセル、ステッパー などの複雑なインタラクティブコンポーネントをデザインすることができます。

変数：ユーザーの入力データを取得し、例えば、登録フォームの名前フィールドのデータを使ったウェルカムメッセージの作成など、個別化された動的なユーザー体験を実現します。

エクスプレッション： Javascriptのような関数で、複雑なコンポーネントや高度な機能をコードなしで作成できます。

条件付きインタラクション：ユーザーインタラクションに基づいて【if-then】や【if-else】の条件を作成し、最終製品の体験を正確に再現すべく、複数の結果を持つダイナミックなプロトタイプを作成します。

UXPinの高品質なプロトタイプとテストでユーザーフローを強化しませんか。世界最先端のデザインツールで、顧客に合った UX デザインを始めましょう。無料トライアルのお申込みはコチラ。

The post スムーズなUXをかなえるための ユーザーフロー とは？ appeared first on Studio by UXPin.

では、どちらを選ぶべきでしょうか？このページでは、それぞれの長所と短所をご紹介します。

ユーザーの自然な行動が最も正確なユーザビリティデータを生み出すのであれば、もちろんテストはモデレートされない方がいいでしょう。しかし、そのデータが焦点の定まっていない、誤った方向に向かっているものであれば、テストをモデレートしたくなるのではないでしょうか？その場合、部屋にいる誰かと一緒に結果を偏らせることになりませんか？

「観察者効果」という言葉は、聞いたことがあるのではないでしょうか。観察されている人は、一人でいるときとは違う行動をするという考え方です。これは非常によく知られた現象ですが、モデレーターを使用するかどうかの唯一の影響であってはなりません。

予算、スケジュール、人員、テストの種類、必要なデータなど、これらは「ユーザビリティテストの手引き」で述べたより重要な検討事項です。

ここでは、さらに深く掘り下げてみましょう。

モデレートされた ユーザビリティテスト

確かに、モデレートされたテストでは、よりコントロールしやすくなります。司会者は、ユーザーから寄せられた即時の質問に答え、テストが研究の目標を満たすように導くことができます。

もちろん、モデレートされたテストでは、円滑な運営を維持するために、人間的なスキルと製品の知識を持ったモデレーターが必要です。これは、ユーザーとのスケジュール調整や、テストを受ける場所の制限が難しくなることを意味します。また、会場でテストを実施する場合は、さらに多くのリソースが必要となり、わざわざ足を運んでくれる参加者を募ることも難しくなります。

その点、リモートテストであれば、これらの問題の多くが解決されます。この方法では、ユーザーは好きな場所でテストを受けることができ、スケジュールにもある程度の余裕がある一方で、あなたがコントロールできる部分もあります。

モデレートされたテストは、より多くの労力を必要とするため、デザインの初期段階で行うことを強く推奨します。コンセプトやプロトタイプを作成している段階では、ユーザーにフォローアップの質問をすることができるようにしておきたいものです。

UserTesting社のこのアドバイスに賛同します:

1. 不完全でバグの多いインターフェース – 言い換えれば、初期段階のプロトタイプ。ユーザーを混乱させる危険性のある製品をテストしている場合、質問に答えたり、誘導したりするモデレーターが必要です。一般的ではないと思われるかもしれませんが、ユーザビリティテストをできるだけ早い段階で開始することは、常に良いアイデアです。
2. 複雑なインターフェイス – 製品の学習曲線が高い場合、モデレーターがいれば、有益な結果が得られないかもしれないテストを救うことができます。例えば、タスクを達成するための手順が必ずしも直線的ではない製品の場合、モデレーターによるテストは理にかなっています。
3. セキュリティが懸念される製品 – まれなケースではありますが、公開したくないデータにアクセスする製品をテストする場合、モデレーターはユーザーを適切な場所に留めておくことができます。

モデレートされたテストとモデレートされていないテストは、競合するものではなく、補完するものであることを忘れないでください。例えば、試作品に対してモデレートテストを行い、ユーザビリティに関する大きな問題を解決することができます。製品を完成させた後、モデレートされていないテストを実施して、「野生」でのパフォーマンスを測ることができます。

始める準備ができたら、Jeff Sauro氏の「モデレートされたユーザビリティテストのための20のヒント」に従うようにしましょう。

無節操なユーザビリティテスト

モデレートされていないテストは、コストが安く、より多くのユーザーをすぐに集めることができます。長所と短所を実際に見てみましょう。

提供: UserZoom

メリット

• 時間短縮 – スケジューリングの問題や限られた人員から解放された無修正テストでは、時間を問わず、ユーザーを同時にテストすることができます。つまり、より多くのデータを短時間で得ることができるのです。ユーザビリティガイドで説明したとおりです。
• 偏りの可能性が少ない – 観察者効果だけが要因ではありませんが、観察者効果やその他の社会的・技術的な偏りも関係する要因です。モデレーターがいないことで、これらの多くが緩和され、より自然で信頼性の高い結果を得ることができます。
• 安価 – 外部のユーザーリサーチ会社に依頼する必要がある場合、そのコストは確実にモデレーターなしのテストを上回ります。モデレートされていないテストでは、場所を確保する必要はありませんし、すべての設備はユーザビリティツール（以下を参照）で用意することができます。実際、これらのツールのコストはスケーラブルなので、適切と思われる金額を支払うことができます。
• 採用が容易になる – モデレートされていないテストのリラックスした環境は、意欲的な候補者のより大きなプールを作り出します。無秩序なテストは、いつでもどこでも、基準を満たす人なら誰でも行うことができます。

もちろん、コントロールの度合いが低い無調整テストには、欠点もあります。

デメリット

• フォローアップの質問がない – ユーザーに自由形式の質問をするためのフォームを用意することはできますが、モデレーターとユーザーの間で交わされる会話に勝るものはありません。モデレートされたテストでは、ユーザーがなぜそのような行動をとるのか、その理由を垣間見ることができます。時間とスケジュールが許せば、テスト後のディスカッションのために、メールまたはSkypeでユーザーをフォローアップすることをお勧めします。
• タスクの許容範囲が狭い – タスクが完了したかどうかは、モデレーターではなくユーザーが判断するため、ユーザーは早々に次のタスクに移ってしまうことがあります。そのため、成功または失敗の状態が簡単に定義された明確なタスクを書く必要があります。
• 質の高いフィルタリングに費やす時間が増える – モデレートされたテストには多少の偏りがあるかもしれませんが、モデレートされていないテストでは、ユーザーが純粋に報酬だけを目的とするリスクがあります。人を募集する時間は減りますが、回答の質を高めるためのフィルタリングにはより多くの時間を費やす必要があります。

もしあなたが無節操テストに興味があるなら、以下のツールをお勧めします。

Lookback – 無料のベータ版。Mac、Android、iOSに対応したこのツールは、これまで見てきた中で最も有望なツールの一つです。顔の反応、モバイル画面、ジェスチャーなどを60fpsで同時に記録します。録画した映像は、この実際の録画でもわかるように、洗練されたストーリー仕立てで再生されます。

UserTesting – 1ユーザー、1テストにつき39ドル。素早いフィードバックで知られるUserTestingでは、ウェブサイト（自社または競合他社）、アプリ、プロトタイプ、Facebookゲーム、Google広告など、あらゆるものをテストすることができます。

Userlytics – 1ユーザー、1テストにつき49ドル。パラメータを設定した後、Userlyticsは参加者を募集し、UserTestingと同様のスペクトルでテストを実施します。

Solidify – 月額19ドル（ベーシック）、月額49ドル（プラス）。Solidifyは、デスクトップやモバイルデバイス向けのインターフェースを、開発のどの段階でも、スケッチやワイヤーフレームでもテストすることができます。プラス会員になると、デモグラフィック、ロゴのカスタマイズ、レポートのカスタマイズが可能になります。

UserZoom – 月々1,000ドル。UserZoomは、月額料金で一連のユーティリティを提供するという、少し変わった運営をしています。メンバーは、クリックテスト、カードソート、ツリーテスト、アンケートなど、さまざまなテストを行うことができる。

結論

モデレートされていないテストは、統計的に有意なユーザビリティの結果を短時間で得ることができます。しかし、テストが始まってしまうと、タスクや質問を修正することができないため、エラーの余地がはるかに少なくなります（せっかく費やした費用が無駄になっても構わない場合は別ですが）。

モデレートされたセッションでの対話から得られるインサイトがないため、完全な分析のためにはデータを精査する必要があることも忘れないでください。しかし、洗練された製品であれば、ユーザビリティ調査の規模を拡大するためには、モデレートされていないテストが大きな力を発揮します。

どちらが優れているかという答えは、ほとんどのデザインに関する質問と同じで、場合によります。テストはプロセスの初期に行うのか、それとも後期に行うのか。時間とお金が足りないのか？

それぞれのテストには適した場所と目的がありますが、私たちが提供できる最善のアドバイスは、ユーザビリティテストを反復的な作業として扱うことです。デザインのさまざまな段階で、モデレートされたテストとモデレートされていないテストの利点がありますので、恐れずに混ぜてみてください。

ユーザビリティテストに関する実践的なアドバイスをご希望の方は、無料の「ユーザビリティテスト・ガイド」をダウンロードしてご利用ください。このガイドでは、30種類以上のユーザビリティテストを取り上げ、それぞれのテストについてヒントや例を紹介しています。

The post モデレートありとなしの ユーザビリティテスト – どっちが良いのか？ appeared first on Studio by UXPin.

 ウェブサイト にあるのは、目に見えるものだけではありません。レイアウト、色、フォントの他に、サイトスピード、インデックス、メトリクスなど、UX （ユーザーエクスペリエンス）デザイナーが ウェブサイト 体験に取り組む際に考慮しなければならない技術的要素もあるのです。

コンテンツ戦略、作成、最適化をスムーズに統合するプラットフォーム「Surfer」のマーケティング責任者であるトマシュ・ニエツゴダ氏を招き、UXデザイナーのためのSEO（検索エンジン最適化）ガイドを執筆しました。コンテンツマーケティングをサポートするツールが必要な場合は、ぜひ Surfer をお試しください。 ウェブサイト 、アプリ、その他のデジタル製品のデザインには、デザインプロセスを最初から最後まで改善する、エンドツーエンドのデザインソリューションである UXPin をぜひお試しください。UXPinを無料でやってみる。

 SEO の理解が重要な理由

一般に認識されているのとは違って、SEO はキーワードやコンテンツだけではありません。検索エンジンはユーザーのニーズを理解し、それをページのランキングに考慮するようになりました。つまり、それほどハッキリわかるものではないかもしれませんが、SEO と UX は相互に影響し合っており、そこに議論の余地はありません。

ページスピードやモバイルフレンドリーなどのUX メトリクスが Googleの主要なランキング要因となっていることから、検索エンジンはユーザーがどのように ウェブサイト を操作するかに基づいて ウェブサイト をランク付けするので、 SEO の観点からの UX の考慮は極めて重要です。

そこで本記事では、SEO と UX がどのように影響し合っているのか、そして検索エンジンで上位に表示されるように ウェブサイト を改善するには何ができるのかを見ていきます。

 SEO とUXの相互関係

SEO（検索エンジン最適化）は、オーガニック検索結果における ウェブサイト の認知度を上げ、その結果オーガニックトラフィックを増加させることを目的としています。SEO 戦略が強力だと、SERPs（検索エンジン結果ページ）でのウェブサイトの可視性が上がり、関連する検索クエリでのランキングが上がります。ちなみに、Googleでのサイトの可視性を上げるのに、専用のSEO ツール（Surfer などのSEOツール）が多く使われています。

検索エンジンのアルゴリズムは、ユーザーが探している情報にたどり着くために、トピックや関連するキーワードを分析することで、ページのコンテンツがユーザーの検索クエリに適しているかどうかを評価しますが、コンテンツを詰め込みすぎず、できるだけ多くのキーワードを実装するために、パラフレーズ（言い換え）ツールの使用が有効な場合もあります。

また、検索エンジンのアルゴリズムは、サイトの信頼性を示すバックリンクやその他のオフページの要因を分析することで、ページオーソリティを測っています。最後に、検索エンジンのアルゴリズムは、ユーザーがウェブページにどのように接するかを測り、そのページが提供する UX の質を決定します。そこで、SEOの UX が活きてくるのです。

検索エンジンは、豊かな UX の提供、つまりそれを提供できるウェブページへのユーザーの誘導を目的としています。Googleのアルゴリズムは、クリック数や滞在時間などの UX シグナルを評価することで、ユーザーとサイトとのインタラクションを評価し、これが、ウェブサイトに高いレベルのユーザーエンゲージメントと優れた UX デザインがあることを Google に示すサインとなります。

結論を言えば、効果的な SEO 戦略を行うには、ユーザーに優しい Webサイトにしなければならず、それには UX デザインの考慮が必要であるということです。

UX メトリクスが SEO に与える影響

ご覧の通り、UX は影響力のあるランキング要因であるため、検索エンジンでの順位を左右する UX メトリクスに注目しておくのは重要です。

SEO に関して言えば、行動メトリクスはユーザーエンゲージメントとコンテンツが検索意図にどのように合致しているかを測定します。なので、ユーザーに優しいリソースとなり、検索エンジンのランキングで上位に表示されたいのであれば、このようなメトリクスに対応したウェブサイトの最適化が必要です。

SEOに重要なユーザーエンゲージメントのメトリクスには、以下のようなものがあります：

• 滞留時間：SERPに戻るまでのページ滞在時間
• 直帰率：何人が１ページ見ただけでウェブサイトを終了したか
• ユーザーエンゲージメント：ウェブサイトに移動した後はどこへ行くのか
• セッションごとのページ数：１回のセッションで何ページ閲覧されたか

このようなメトリクスに注目すれば、コンテンツやウェブサイトのデザインを調整することで、情報が見つかりやすくなり、ウェブサイトに長く滞在してもらえるようになります。以下では、サイトの UX SEOの改善のためにできる具体的なステップをご紹介します。

UX SEO のベストプラクティス４選

UXとSEO の重要性がお分かりいただけたと思いますので、ここでは、実際に Webサイトに導入できる実践的なヒントをご紹介します。

ページの読み込み時間を改善する

ページの読み込み時間の改善は、SEOのランキング向上のために最初にすべきことであり、最も重要なことです。サイトスピードが遅いと直帰率が高くなるだけでなく、検索順位にも響いてしまいます。

大抵の人は情報をサクッと見つけたいので、ページの読み込みに時間がかかると、そのサイトから去ってしまうでしょう。さらに、Google はページスピードをランキング要因のひとつとみなしています。

また、さまざまなページ要素を押し上げることも重要です。これは UX の向上だけでなく、レイアウトのずれを防止するためにも不可欠です。ページのコンテンツが不意に移動することで、レイアウトが崩れることがありますが、リソースの読み込みが非同期であることが最もよくある原因なのです。

コンテンツを全て含むページを高速かつ同時に読み込むためにできることはいくつかありますが、ここではそのいくつかをご紹介します：

• 使用する画像の寸法を確実に決める
• 画像は適切なフォーマットで使用する（Googleは WebP を推奨している）
• Google の PageSpeed Insights（ページスピードインサイト）を使って問題点を特定する
• Core Web Vitals（コアウェブバイタル）評価を行う

ページの読み込みが確実に速くなれば、コンテンツは検索エンジンとユーザーの両方に間違いなく支持されるでしょう。

サイトナビゲーションをシンプルにする

直感的なサイトのアーキテクチャと簡単なナビゲーションで、必要なものがサッと見つかるようになり、ウェブサイトの他の部分とのエンゲージメントも高まります。

多くの場合、ユーザーはスタートページからあなたのサイトに入ることはありません。つまりあなたのサイトは、ユーザーや検索エンジンのクローラーがどこに行き着いても、行きやすいものでないといけないということです。

さらに、ウェブサイトのコンテンツをどのように構成して整えるかによって、Google はどのページが最も重要であるかを理解することができます。このように、各ページが他のページとどのように関連しているのか、あなたのウェブサイトの「話題的ドメインオーソリティ」は何であるかをGoogleに示すこともできます。

その上、サイトのナビゲーションと構造がきれいだと、Google の検索結果にサイトリンクが表示されるようになります。サイトリンクで、検索エンジンの結果ページでより多くの領域がカバーされるようになり、競合他社が入る余地が少なくなるということになります。

ウェブサイト構造のタイプを決めるなら、「フラット階層」が SEO の UX にピッタリです。このタイプのウェブサイト階層では、各ページはトップページから３～４クリックで先にあり、内部リンクから発見することができます。

なので、各ページには、そのページを指す内部リンクが必要です。フラットアーキテクチャで、ユーザーや Google がウェブサイトの関連性を識別できるようになるだけでなく、あるページから別のページへのリンクオーソリティの受け渡しもできるようになります。

ウェブサイトをモバイル向けに最適化する

毎日さまざまな場面でモバイルデバイスから Google へのアクセスがあるため、モバイルで簡単にアクセスできるようにウェブサイトを最適化することが非常に重要です。また、現在ではユーザーの大半がモバイル端末を使って情報を検索しているため、Google はモバイル向けに最適化されたページを優先的にクロールしてインデックスするようになりました。

モバイルユーザーがアクセスしやすいウェブサイトにするには、レスポンシブウェブデザインを活用しましょう。携帯電話やタブレットなどのデバイスに合わせてウェブサイトのサイズの変更や調整が可能になり、レンダリングの問題を防ぎます。

モバイルレイアウトでは、強調すべきは「シンプルさ」と「わかりやすさ」であるため、コンテンツは読みやすく、不要なポップアップは排除し、行動喚起は明確でタップしやすいものにすることが大切です。

また、モバイルフレンドリーなウェブサイトには、以下のようなものがあるべきです：

• 適度な大きさのボタン
• 二本指でズームできる
• シンプルなメニュー
• 可視化された検索ボックス

文字コンテンツに関しては、フォントは１６より小さくしないこと、文字ブロックは小さくすることを忘れずに、コンテンツをより多くの段落に分割します。

上の画像は、あるウェブサイトのひどいモバイル版の例です。ご覧のように、ウィンドウのサイズに合わせなかった見出しの部分があります。これでは、UX が下がりますね。

ユーザーに優しいWebページレイアウトの作成

前述したように、明確なナビゲーションパスを作成することで、コンテンツへのアクセスが簡単になります。ウェブサイトのわかりやすいナビゲーションのためには、レイアウトもそれが反映されたものである必要があり、そうなると、シンプルで見やすいほどいいということになりますね。

あまり多くの要素を使わないようにし、ユーザーの目を引くような対照的な色を２、３色だけ選びましょう。

もうひとつは、ウェブサイトの最も重要な要素を身近な場所に配置し、目につきやすいようにしましょう。そしてそういった要素は、明らかにインタラクティブで、操作しやすいものであるべきです。

ブログなどのコンテンツが充実しているWebサイトでは、ドロップダウンのナビゲーションメニューで下位のコンテンツを表示します。

さらに、CTAボタンなどのビジュアルコミュニケーションを活用することで、ユーザーの理解度やWebサイトのエンゲージメントを上げましょう。

 ウェブサイト をデザインするときに SEO を考える

SEO は年々変化しており、もはや、キーワードの詰め込み云々の話ではなくなっています。ウェブサイトにトラフィックを集めたいのであれば、ポジティブな UX の提供にも焦点を当てる必要があります。

ユーザーと Google に優しいウェブサイトを作りたいなら、非の打ち所のないSEOの UX を実現するために、以下のヒントを参考にしてください：

• ページの読み込み時間を改善する
• サイトのナビゲーションをシンプルにする
• モバイル向けにウェブサイトを最適化する
• ユーザーに優しいウェブページのレイアウトを作成する

さらに、レスポンシブデザイン採用や、シンプルさの重視、そして最も重要なウェブサイト要素を見えやすくするのも大事です。その他にも、色のコントラストやビジュアルコミュニケーションなどのレイアウトの工夫で、ユーザーの理解度やエンゲージメントを上げましょう。

このようなステップに従うことで、SEO UX のためにウェブサイトが最適化され、検索エンジンの結果ページで上位に表示される可能性が高まるでしょう。

基本的なワイヤーフレームから、簡単に開発できる完全にインタラクティブなプロトタイピングまで、デザイン プロセスを改善するための万能ツールである UXPin で、ウェブデザインのプロトタイプを作りませんか。ぜひ今すぐUXPinをお試しください。

The post UXデザイナーのためのSEOガイド【 ウェブサイト を改善】 appeared first on Studio by UXPin.

今回は、皆さんに喜んでいただき、インスピレーションを与えるために、最高の Webサイトデザイン の アイデア をいくつかまとめました。また、ターゲットオーディエンスのニーズとビジネスの目標に基づいた アイデア を生み出すための７ステップをご用意しました。

本記事では、デザイン会社、スタートアップ、中小企業、または個人事業主など、インスピレーションを求めている方に向けて、最高のWebデザインのトレンドと、それがどのようにユーザーの問題を解決しているかをご案内します。

世界で最も洗練されたデザインツールであるUXPinを使って、Webサイトのデザイン アイデア をプロトタイプ化し、テストしませんか。無料トライアルにサインアップしてUXPinの高度な機能を試し、Webサイト訪問者のためにより良い UX を作りましょう。

 Webサイトデザイン の アイデア の作り方

多くの企業は、Webサイトを利用した顧客獲得を目標としています。いい Webサイトデザイン には、美観やビジュアルデザインが不可欠ですが、Webサイトを成功させるには、ユーザー中心の考え方が重要です。

そこで、以下の７のステップを踏むことで、ターゲットに最適なWebサイトの アイデア や機能を見極めることができます。

ステップ１．徹底したユーザー調査の実施

まずは、ターゲットとするユーザー、そのニーズ、目標、動機などに関するデータの収集などのユーザー調査です。UXデザイナーは、インタビュー、調査、ユーザビリティテスト、フォーカスグループなど、さまざまな方法でこのデータを収集し、ユーザーペルソナを作成します。

ステップ２．Webサイトの主な目的の特定

調査によって、Webサイトの主な目的とユーザーへのサービスを決定します。また、調査でメッセージや言語の作成もできます。例えば、１０代のユーザーをターゲットにしたWebサイトと、定年退職者をターゲットにしたWebサイトとでは、外観が大きく異なります。このように、ユーザーによってニーズや優先順位が異なるため、ステップ１が非常に重要になります。

ステップ３．ユーザージャーニーマップの作成

ユーザージャーニーマップは、ユーザーがWebサイトで目標を達成するまでのステップを視覚的に表現したものであり、これによってユーザーの視点を理解し、潜在的なペインポイントや改善すべき部分の特定ができます。

ステップ４．デザインの アイデア 出し

ユーザーリサーチとジャーニーマップ（ユーザーフローが複数ある場合もあります）を使って、ユーザーの目標達成や、特定されたペインポイントの解決を支援するようなデザインアイデアをブレインストーミングします。ちなみに、UXデザイナーは、多くのアイデアを素早く生み出すために、スケッチやペーパープロトタイプをよく使用します。

ステップ５．アイデアの絞り込みと優先順位付け

アイデアを検討して、Webサイトの目的に合致し、ユーザーにとって最も価値のあるものを選びます。重要性と実現可能性に基づいて、アイデアの優先順位を決めましょう。

ステップ６．ワイヤーフレームとプロトタイプの作成

最善案を用いて、Webサイトのワイヤーフレームとプロトタイプを作成します。ワイヤーフレームによって、Webサイトの構造の視覚化や、情報アーキテクチャの確定ができます。

ワイヤーフレームを土台に、忠実度の高いプロトタイプを作成してアイデアを検証し、ターゲットユーザーや他のデザイナー、ステークホルダーからのフィードバックを収集するといいでしょう。

ステップ７．イテレーションと改良

フィードバックをもとに、デザインを変更し、改良します。このプロセスを繰り返すことで、サインアップ数、売上、ブログ閲覧数の増加などのビジネス目標を達成しつつ、ユーザーのニーズを満たす最終的なWebサイトが完成します。

ECサイトのデザイン アイデア ５選

１．クリエイティブなホバー効果

ウクライナを拠点とするブランドの Mr.Popsは、商品画像に巧みな絵文字のホバー効果が使われており、この小さなデザインの選択は、ユーザーをあっと言わせると同時に、- アイスクリームショップにぴったりの – 楽しくてポジティブなブランド印象を創り出しています。

キーポイント：細部にこだわり、クリエイティブでユーザーを魅了する繊細な方法を見つけること。こうした小さな工夫がブランドの認知度を高め、オンラインショップでの購入を後押しするのです。

２．「ブランドらしい」カラーパレット

ポップコーンのECブランドであるPopcornopolisは、明るい色を使ってブランドの認知度を上げ、各ページの最も重要な機能を強調しています。また、デザイナーは、最も重要なコンテンツとCTA（Call to Action: 行動喚起）を商品ページの上部に配置し、ユーザーがチェックアウトまでたどり着き、素早く購入を完了できるよう、素晴らしい仕事をしています。

キーポイント：カラースキームは最も重要なブランド要素のひとつですが、同時に、ユーザーの目的達成をサポートするものでないといけません。また、コンテンツに優先順位をつけ、スクロールを減らすために、最も重要なデザイン要素をフォールドの上に表示することも重要です。- それによって、ユーザーの購買がもっと速く完了するでしょう。

３．大胆なミニマリスト・タイポグラフィ

Wukiyoでは、文字を読みやすくするのに大胆なミニマル・タイポグラフィが使われています。また、最も重要なCTAである 『ADD TO CART （カートに入れる）』には、鮮やかなブルーの特大ボタンが使われており、落ち着いた色調のWebサイトの中でこのブルーが際立っています。

キーポイント：読みやすいフォントを選びましょう。また、コンテンツに優先順位をつけ、ユーザーが判断するのに十分な量だけ表示するようにします。そして最後に、最も重要なCTAを必ずサイズと色で目立つようにしましょう。

４．ショッピングカートの引出し

プレミアムソーダブランドのPerfyは、大胆な色使いと UI 要素で、ブランドと製品群を強化しています。カートに商品を入れると引き出しが開き、買い物カゴとチェックアウトへの CTA が表示されます。

また、引き出しには、Perfy の配送や返金に関するポリシーなど、迷いを解消するための重要なメッセージが表示されており、その下には、ビジネスの価値を上げるためのオススメ商品が並んでいます。

キーポイント：ユーザーが迷うことなくチェックアウトできるようなデザインをしましょう。ユーザーがメッセージを速やかに理解し、決断できるように、必ず明確で簡潔な言葉を使うようにしましょう。

５．製品ページの上部に表示

Popcornopolisと同じく、Verve Coffee Roastersも３カラムの商品ページレイアウトを採用しています。主要なCTAは十分な空白で囲まれ、価格と数量を選択することで、いちばん重要なCTAを目立たせており、商品詳細では、ユーザーが素早く決断できるように、長い説明文ではなくキーワードが使われています。

Verveのカートの引出しでは、買い物客に送料無料を知らせると同時に、取引額を増やすべく関連商品が「Customers Also Love（こちらもオススメ）」で出てきます。

キーポイント：読みやすさのために製品ページを最大限に活かし、文字と画を組み合わせることで、できるだけ色々と読まないでいいようにしましょう。 重要なコンテンツを目立たせるために遠慮なく空白を使いましょう。 さらに、eコマースのWebデザインには、アップセルやクロスセルによって取引額を増やすような仕組みが入っていないといけません。

SaaS/デジタル製品のWebデザインの アイデア ５選

１．価格設定ページのミニマムデザイン

11Sight の価格ページでは、白黒のデザインに明るいグリーンのアクセントが加わり、重要なコンテンツとアクションが強調されています。また、ユーザーと企業にとって最も価値のあるプレミアムプランに注目が集まるよう、コントラストを効かせたレイアウトが採用されています。

キーポイント：サイトの訪問者にわかりやすいように、文字や余計な注意を引くものを最小限に抑え、CTAを目立たせた価格ページをデザインしましょう。

２．空白スペースで注目を集める

Agorapulseのトップページは、余白を多くとった１カラムのデザインで、タイトルとCTAに瞬時に目がいくようになっており、ユーザー目線からの製品の主な利点もうまくまとめられています。CTAは２つありますが、明るい背景と軽い文字で、どちらが重要かが一目瞭然です。

Agorapulse は固定ヘッダーの案内バーを使って、ユーザーがスクロールしてもこれらのCTAが見えるようにし、それによってユーザーはいつでもアクションを起こせるようになっています。

キーポイント：CTAが複数ある場合は、必ずメインのアクションが他のアクションよりも目立つようにします。製品のメリットや特徴をできるだけページの上の方で強調し、サイト訪問者があなたのビジネスで何ができるかがきちんと分かるようにしましょう。

３．ストーリーを語る

ベンチャーキャピタルのNordic Eye は、ホームページのヒーローにビデオを使ってブランドストーリーを伝え、サイトの訪問者とすぐにつながることができるようにしています。ビデオやビジュアルは、あなたが何者で何をしているのかをユーザーに伝えるとてもいい方法です。ちょっとした製品デモやウォークスルーなどで、ユーザーは製品について学べ、その製品が問題を解決してくれるかを判断することができますからね。

キーポイント：ビデオは、瞬時につながりを生み出し、製品/会社の強みを示すことができる強力なメディアです。UX（ユーザーエクスペリエンス）のためのビデオ最適化のヒントについてしっかり調べておきましょう。

４．ターゲットに語りかける

投資アプリの「Alinea」は、ターゲットであるZ世代に、親しみやすく共感できる言葉を使って直接語りかけます。デザイナーは、目立つCTA、ソーシャルプルーフを示すアプリストアのレビューウィジェット、製品を取り上げた主要なメディア出版物を備えた巧妙なホームページのヒーローデザインを使っています。

キーポイント：うまくいくWebデザインには、ターゲットとするユーザーと彼らがいちばん重視するものの把握が重要です。ホームページのヒーローは、訪問者が行動を起こす前に、なぜ製品が存在するのかを説明し、疑念を解消するものでないといけません。

５．機能横断的なアプリサイト

デジタル製品の多くは、Webのアプリケーションとモバイルのアプリケーションを提供していますが、Weera のホームページでは、家族向けのアプリを利用するために、Web、iOS、Androidの３つの選択肢が用意されています。このように、ユーザーが自分の好きな媒体で製品を試せるようにすることで、申し込みの可能性を高めています。

キーポイント：クロスプラットフォームのアプリケーションの場合、ユーザーがデジタル製品をどのように体験するかを選べるようにしましょう。その選択肢をページのできるだけ上部に配置することで、スクロールを減らし、コンバージョンを増やすことができます。

 Webサイトデザイン の アイデア を得るためのリソース

Webデザインのインスピレーションをお探しの方に、オススメのリソースをいくつかご紹介します。

• Awwwards：世界の優れたWebデザインを集めた膨大なコレクション
• Themeforest：WordPress のテーマ、Webサイトテンプレート、プラグイン、デジタルツールの世界最大市場
• Behance：UI デザインの アイデア を共有するデザイナーのためのソーシャルネットワーク
• Dribbble：Behanceの類似サイト

UXPinで人を魅了するWebサイトを構築してみませんか

UXPinの高度なデザイン技術により、デザイナーは最終製品に匹敵する機能性と忠実性を備えたWebデザインの アイデア をプロトタイプ化してテストすることができます。

UXPinがあれば、デザイナーはエンドユーザーやステークホルダーから有意義なフィードバックを得ることで、より精度の高いイテレーションを行い、高品質な結果を出すことができます。

Webサイト、ランディングページ、ECストア、クロスプラットフォームアプリケーションを新たに構築する場合でも、UXPinは最終製品と同じ外観と感触のインタラクティブなプロトタイプを作成するためのツールと機能を提供します。

世界最先端のデザインツールで、Web開発をレベルアップしませんか。UXPin の無料トライアルにサインアップして、UXPinの高度な機能をぜひお試しください。

The post Webサイトデザイン 参考 アイデア・事例のご紹介 appeared first on Studio by UXPin.