10年以上の研究開発の末、UXPinは Figma、Sketch、Adobe XDなどのデザインツールを超える、従来デザイナーがエンジニアのバックグラウンドがなければ実現できなかった、高度なプロトタイピングによるエンドツーエンドのデザインソリューションを実現しました。  

こういった画像ベースのツールは、デザインチームへのより良いUX（ユーザーエクスペリエンス）を提供すべく進化してきましたが、エンドユーザーにとってのプロトタイピングやテストの改善にはほとんど何もされていません。デザイナーは、1つのツールですべてをまかなうのではなく、複数のプラットフォームを切り替えるか、フロントエンドエンジニアと連携して、最終的な製品体験を正確に再現するプロトタイプを構築しなければいけないのです。  

AdobeがFigmaを200億ドルで買収する意向を表明したことで、多くのデザイナーや組織は、このソフトウェア大手の製品エコシステムの一部になりたいかと疑問を抱いていますが、この件に関する考えがどうであれ、デザインツールの切り替えというのは、よりユーザー中心で、画像ベースのデザインによる制約を超えるものであるべきです。  

 UXPinでは、情報アーキテクチャやワイヤーフレーム、モックアップ、および忠実度の高いプロトタイプをデザインできます。また、FigmaからデザインをインポートしてUXPinでプロトタイプの作成といった、ニーズに合わせた柔軟なワークフローが可能です。

ブラウザまたはUXPinのミラーアプリ（iOSおよびAndroid）を使ってテストを行い、ステークホルダーやエンドユーザーから有意義なフィードバックを頂きましょう。

無料トライアルにサインアップして、ぜひ今すぐUXPinプロトタイプを作成してみよう！  

Figma のデザイン、UXPinでプロトタイプを作る

…わかります。Figmaでのデザインがいいんですよね。でもUXPinでのプロトタイピングで得ることができる、より高い忠実度と機能性も捨てがたい。

もしあなたがこのように感じたら、UXPinのFigmaプラグインには両方の長所がありますよ。

Figmaでモックアップをデザインして、プロトタイピングのために画面をUXPinにコピーすればいんです。  

このワークフローには両方の長所が備わっており、製品や状況に応じた最適なソリューションの導入を推奨していますが、UXPinですべてまかなえる場合、デザイナーは2つのツールの使用が必要です。

UXPinはデザインおよびプロトタイピングツールとして有効であり、画像ベースのツールでは不可能なUXを拡張する機能が満載です。  

Figma とUXPinでプロトタイプを作る意義

Figma、Adobe XD、Sketchなどは静的なベクターグラフィックスをレンダリングするため、デザイナーがコードを再現することはできませんし、再現するにしても多くの労力とワークアラウンド、そして追加ツールが必要です。

UXPinはコードベースのデザインツールですが、デザイナーがコードを操作するという意味ではなく、UXPinがHTMLやCSS、Javascriptを裏でレンダリングし、コードと同じ忠実度と機能性をデザイナーに提供します。

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

ステート

UXPinの【ステート】では、デザイナーは1つのコンポーネントに対して複数のステートを作成することができます。たとえば、ユーザーのインタラクションによって引き起こされる異なるプロパティを含んだ「ステート」を、ボタンにいくつか付けることができます。

また、ステートによって、ドロップダウン・メニュー、ステッパー、カルーセル、アコーディオンなどの複雑なコンポーネントの作成もできます。

インタラクション

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

【if-then】と【if-else】の条件付きインタラクションにより、デザインチームはユーザーの入力やトリガーに反応するダイナミックなプロトタイプを作成することができ、このJavascriptのようなインタラクティブ機能により、デザイナーはデザイン上の決定がユーザー体験にどのような影響を与えるかがわかり、改善すべき領域をピンポイントで特定することができます。

このようなリアルなやり取りを行うことで、ステークホルダーとエンジニアはほとんど説明を必要とせず、フィードバックプロセスやデザインがハンドオフがより生産的に行われるようになります。

変数

Figmaを含むほとんどのデザインツールでは、フォームをテストすることができません。なぜか？フィールドが「入力」ではなく、「画像」になっているからです。UXPinでは、フォームフィールドはまるでエンジニアが開発したかのように機能し、デザイナーが【テキスト入力】や【チェックボックス】、【ラジオ】、【選択/ドロップダウン】、【複数選択】および【ボタン】をすぐに使えるようになっています。

【変数】があれば、例えば「サインアップ時にユーザーの情報を取得し、名前フィールドを使って個別化されたウェルカムメッセージを作成することができる」というように、デザイナーはプロトタイプからユーザーの入力を取得し、そのデータをアプリケーションの別の場所で使用することができます。

エクスプレッション

 UXPinの【エクスプレッション】で、デザイナーは他のデザインツールの可能性をはるかに超えてプロトタイピングを行うことができるようになり、パスワードやその他のフォームフィールドの検証、ユーザーインタラクションに基づいて更新されるショッピングカートのデザイン、動的なエラーメッセージの作成など、さまざまな機能を利用できます。  

ステート、インタラクション、変数などのUXPinの他の機能と組み合わせることで、デザイナーは、エクスプレッションによってコードと区別のつかないプロトタイプやユーザーフローの構築ができるのです。  

このような機能やその他の高度なUXPin機能については、UXデザイン界のインフルエンサーであるジェシー・シャウォルター氏によるチュートリアルのYouTubeビデオで詳しく説明されています。

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

1. 高忠実度プロトタイピング

Figma：美しいベクターモックアップだが、あいにく実際の機能性や忠実度が再現されていないため、デベロッパーやステークホルダーがプロトタイプの解釈をしにくいものになっている。

UXPin：コードのような忠実度と機能性により、デザイナーは最終製品と見分けがつかないほど没入感のあるダイナミックなプロトタイプ体験を作成することができ、より少ないドキュメント、よりスムースなデザインハンドオフ、市場投入までの時間の短縮が実現される。

Figma、Sketch、Adobe XDなどが作り出すような高忠実度モックアップと、最終製品のような外観と感触を持つ高忠実度プロトタイプには大きな違いがありますが、UXPinは、プロトタイプがコードのようにユーザーのインタラクションに反応するため、ほとんど説明が必要ない、本物の高忠実度の結果をもたらします。

2. UIデザイン とリアルなプロトタイプのギャップを埋める

Figma：FigmaでのUIデザインのアイデアをデザイン・開発

UXPin：Figmaの限界を超え、UXPinで高度なプロトタイプを作成

Figmaは美しいデザインとモックアップを作成するための機能を備えていますが、デザイナーはプロトタイピングの段階で壁にぶつかります。UXPinのFigmaプラグインだと、デザインチームがUXPinで忠実度の高いプロトタイプを作成するために、両方のツールの優れた資質を活かせます。

UXPinでUIデザインの変更とイテレーションを行うか、Figmaでデザインと編集を行いプロトタイピング・ツールとしてのみ使用するかは、あなた次第なのです！  

3.  ユーザーテスト の強化

  Figma：基本的なクリック／タップ操作、ユーザーフロー、ナビゲーションに限定したテストの実施。  

UXPin：最終製品を正確に再現する没入型プロトタイプ  

Figmaのベクターベースの制約と制限は、正確なテストの妨げになります。デザイナーは、基本的なインタラクティブ性を実現するために複数のフレームを使用しなければならず、多くのコンポーネントの再現は不可能です。  

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

また、デザイナーはUXPinプロトタイプでテストする際に、重要なユーザビリティとアクセシビリティの問題をピンポイントで把握することができ、その結果、UX負債の減少や、より高品質なデザインプロジェクト成果につながります。  

4.  イテレーション の高速化

Figma：最終製品の動作を模倣するための複数のフレームとコンポーネント – 変更と再デザインには時間がかかる。

UXPin：レイヤーとステートを1つの画面で使用し、数回のクリックで変更可能 。

Figmaでプロトタイプを作成する際の課題の1つとして、コードのインタラクティビティの模倣のために、デザイナーは複数のフレームやコンポーネントの作成が必要という点があります。このようなインタラクションは、厄介で直感的でないように感じられ、デザインや変更に時間がかかります。  

UXPinでは、デザイナーは「ページ」と「レイヤー」で作業します。複数のフレームやページを切り替えるのではなく、1つのキャンバス上で作業を行い、プロパティパネルで変更を加えます。このワークフローは、より直感的で、イテレーションの高速化を促進し、デザイナーがより早く問題を解決できるようにします。

5. よりスムーズな デザインハンドオフ

Figma：多くのドキュメント、デベロッパーとのやり取り、インタラクションを模倣するビデオ/GIF、他のツールへのリンク

UXPin: プロトタイプが最終製品のエクスペリエンスとインタラクティブ性を再現し、長いドキュメントと追加ツールの必要性は削減される。

動きやインタラクションの再現に、デザイナーはAfter Effectsなどのツールをよく使います。

なぜか？デザインツールには忠実度や機能性が欠けているからです。技術的な制約からエンジニアが再現できないトランジションやインタラクションをデザイナーが作成することもあるし、複数のツールやファイル間での切り替えは、混乱を招き、時間がかかり、エラーを増加させます。

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

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

リアルなプロトタイプやサポートドキュメント、コラボレーションが一箇所に集められていることで、UXPinではより少ない摩擦でよりスムーズなデザインハンドオフが実現します。

End – to – EndのデザインソリューションであるUXPin

Figmaのデザイン してUXPinでプロトタイプを作成するというのもできますが、そうなると1つで済むところを2つのツールを使ってしなければいけないことになります。

UXPinだと、コラボレーション、ワイヤーフレーム、情報アーキテクチャのデザイン、モックアップ、ゼロからのコンポーネントデザインなど、Figmaと同等のデザイン体験があります。

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

ツールが減ることによって、UXワークフローの効率化だけでなく、コスト削減や、デザインリーダーによる貴重なリソースの他への再配分が可能になります。

ステークホルダーには、画像ベースのプロトタイプとそれに付随するドキュメントを読み解くほどの時間や忍耐力はありません。その点UXPinのプロトタイプは説明が少なくて済むので、ステークホルダーは最終的な製品体験を楽しむことができ、この没入型体験は、ステークホルダーから有意義なフィードバックを引き出すとともに、デザインソリューションへの賛同を高めることができます。

画像ベースのデザインの限界は卒業して、UXPin を使って強化されたプロトタイピング、コラボレーション、デザインの成果を手に入れましょう。 無料トライアルにサインアップして、UXPin が製品デザインのワークフローに革命をもたらし、顧客に優れたUXを提供する方法をぜひご覧ください。

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

多くのプログラミング言語では、ウェブサイト、ソフトウェア、その他のデジタル製品の構築、拡張のためにパッケージが使われ、こういったパッケージにより、エンジニアは追加のコードを書いたり維持したりすることなく、プロジェクトの機能を拡張できます。

もしあなたの会社で Node.js が使われていたら、エンジニアが NPM、Node.js パッケージ、またはパッケージマネージャについて話しているのを聞いたことがあるかもしれません。本記事では、パッケージがどのように機能し、なぜエンジニアがそれを使用するのかについての基本理解のために、デザイナーの視点でこれらの用語について説明します。

UXPin Mergeは、デザイナーが完全に機能するコードコンポーネントでUIデザインができる画期的なツールを提供しています。UXPin Mergeのトライアルはこちらより。

NPM(Node Package Manager)とは

NPM（Node Package Manager）は、エンジニアがアプリケーションやWebサイトの開発に使うツールのオープンソースレポジトリです。

NPMは2種類あります：

1. オープンソースプロジェクトを公開するためのレポジトリ。簡略版：デジタル記録及び検索機能
2. レポジトリとインタラクトするためのCLI（コマンドラインインターフェース）。簡略版：ストレージ機能と通信するためのツール

パッケージマネージャ とは？

NPMを説明する前に、パッケージマネージャの基本を理解しておきましょう。パッケージマネージャはデベロッパーのためのツールキットだと考えてください。

例えば、支払いにStripeを使用するアプリケーションを構築するとします。パッケージマネージャは、あなたの製品がStripeと通信して支払い処理をするのに必要なコードをすべてインストールします。

エンジニアは、コードを書いたりStripeのドキュメントからのコピー＆ペーストの代わりに、コマンドの入力だけで、パッケージマネージャがStripeから必要なコードの依存関係をインストールします。

検索機能、API、決済、認証ツール、地図、アイコン、ホスティングなど、アプリケーション開発のためにに思いつくあらゆる機能を備えたパッケージが何百万と存在します。

NPMなどの、誰でもパッケージをアップロードしてインストールできるオープンソースのレポジトリと、アクセスが制限されたプライベートなパッケージレポジトリがあります。

コマンドラインインターフェースとは？

CLI（コマンドラインインターフェース）とは、デベロッパーがコンピュータープログラムの操作に使うテキストインターフェースのことです。このCLIを使用すると、コマンドを実行して、ソフトウェア開発に必要なバックグラウンド操作を実行できます。

NPMの場合、例えば、エンジニアはnpm installのようなコマンドにパッケージ名を続けて指定したパッケージをインストールすることができるように、CLIによってパッケージレジストリの対話ができます。

NPMレジストリ

NPMのウェブサイトは、エンジニアがパッケージについて検索したり学んだりする場所ですが、このウェブサイトは単なるレジストリであり、パッケージをホストしているわけではありません。代わりに、エンジニアはGitHub、Packagecloud、AWS CodeArtifactなどのプラットフォームを使って、パッケージをホストし配布しています。

例えば、NPM上のUXPin Merge CLIを見ると、レポジトリと関連リンクとしてGitHubが表示されています。その上に、UXPin Merge CLIとその依存関係を【 npm i @uxpin/merge-cli】とインストールするコマンドがあります。 NPM の後の “i” は “install” の省略形なので、【npm install @uxpin/merge-cli 】と入力しても、同じ結果になります。

依存関係とは？

パッケージは、エンジニアが【依存関係】と呼ぶ他のパッケージで構成されています。ちょっとわかりにくいですよね。この「依存関係」とは、プロジェクト内で異なるタスクを実行するコードのパッケージのことです。

例えば、UXPin Merge CLI は Typescript を使用しており、Typescript は UXPin Merge CLI が必要とする 41 の依存関係のうちの 1 つに過ぎませんが、依存関係として typescript パッケージが必要です。

開発依存とは？

UXPin Merge CLI の依存関係を見ると、41の依存関係と41の開発依存 (devDependenciesとも呼ばれる) があります。

• 依存関係：あるソフトウェア実行（本番）に必要なパッケージ
• 開発依存：開発段階で必要なパッケージのみ

依存関係と開発依存はnode_modulesという別のフォルダに存在するので、packages.jsonファイルとプロジェクトのコードはそれらがどこにあるのかがわかります。

package.jsonファイルとは？

そのメタデータと依存関係を提供する package.json ファイルがあります。コンピュータにプロジェクトをインストールするとき、NPM は 、依存関係と 開発依存 をインストールするのにpackage.json ファイルを参照します。

それぞれの依存関係を個別にインストールする代わりに、コマンドラインでnpm installと入力するだけです。

ホスティングプロバイダーもpackage.jsonファイルを使用して、そのサーバー上でプロジェクトの実行に必要な依存関係（開発依存を除く）をインストールします。

package-lock.jsonとは？

package-lock.jsonは、プロジェクトのビルドに使用されたパッケージの正確なバージョンを特定します。このファイルによって依存関係がロックされ、プロジェクトがインストールされるときに、最新のリリースではなく、開発中に使用されたバージョンが参照されるようになります。

エンジニアは定期的にパッケージを更新しますが、多くの場合、パッケージの動作方法が変更されます。それにより、依存関係のロックによって、プロジェクトが意図したとおりに確実に動作するようになります。

NPMの使用方法

ここでは、一般的なNPMのコマンドとその機能について説明します。

• npm init：プロジェクト用のpackage.jsonファイルが作成されます。アプリケーションを一から構築する場合、npm initはプロジェクトの重要な情報を含めるために使用する最初のコマンドの1つになり、NPMは、パッケージをインストールまたは削除するたびに、package.jsonファイルを自動更新します。
• npminstall：プロジェクトの依存関係をすべてpackage.json ファイルにインストールします。
• npminstall <package-name>：たとえば、npminstall @uxpin/merge-cli とすると、Merge CLI がインストールされるように、 NPMレジストリから特定のパッケージをインストールし、node_modules フォルダに保存します。
• npminstall <package-name> –save：NPMパッケージをインストールし、package.jsonファイルの依存関係に追加します。
• npminstall <package-name> –save-dev：NPMパッケージをインストールし、開発依存に追加します。
• npmuninstall <package-name>：プロジェクトから特定のパッケージをアンインストールします。
• npmdoctor：npmのインストールを診断し、パッケージの管理に必要なものがすべて揃っているかどうかを確認します
• npmupdate <package-name>：特定のパッケージを最新バージョンに更新します。

これらは、最も一般的なNPMコマンドのほんの一部であり、すべてのリストはNPMのドキュメントでご覧になれます。

デザイナーとしてのNPMの理解

NPMは、デザインツールのプラグインやアプリの拡張機能に匹敵する、ツールキットです。パッケージがどのように作られるのか、その裏側を知る必要はありませんが、一つや二つ知っておくと便利かもしれません。

まず、MUIやAnt Designなど、コードコンポーネントライブラリの一部は、NPMパッケージとして共有されています。

NPMパッケージとして配布されているコンポーネントライブラリはどのように探すのでしょうか。UXPinが公開しているデザインシステムのライブラリAdeleから、UXPinに取り込めるコンポーネントライブラリを探したとします。そこでShopifyのPolarisを選び、それがNPMで配布されていることがわかります。 そこで、NPMのサイトに行って、ShopifyのPolarisを探し、見つけるのです。

UXPinはMerge技術により、NPMパッケージを介してコンポーネントライブラリからUI要素をインポートすることができ、それらの要素を使って、完全に機能するプロトタイプを組み立てることができます。

UXPin Mergeは通常、デベロッパーによってセットアップされますが、開発サポートが不足している場合はMerge Component Managerを使って、コンポーネントを自分で管理することができます。

もし、デベロッパーとの連携を強化するためにプログラミングの知識を高めたいのであれば、HTML、CSS、Javascriptなどの基本的なコードの原則やコンポーネントライブラリについて学ぶ方が、デザイナーにとってはるかに有益だと思います。

UXPin Mergeで連携の強化

Mergeは、デザイナーとエンジニアが同じコンポーネントライブラリを使用することで、デザインと開発の連携を促します。

Mergeは、デザイナー用のUIキットとデベロッパー用のコードを用意する代わりに、レポジトリをUXPinのエディタに同期させ、デザインチームがコードコンポーネントを使用して完全に機能するプロトタイプを構築できるようにしています。

自社デザインシステムやMUIなどのコンポーネントライブラリを同期させることで、デザイナーはUI要素をドラッグ＆ドロップするだけでインターフェースやプロトタイプの構築ができます。UXPin Mergeをトライアルしてみたい方はこちらまで。

The post NPMと言うのは？把握しよう！ 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.

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

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

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. 開発者が開発フェーズを終えると、デザイナーは品質保証プロセスを実施し、デジタル製品の外観と機能が正しく保たれていることを確認します。

成功するウェブサイトの10の特徴を含むウェブ開発チェックリストをご覧ください。

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

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

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

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

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

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

UXPinでMUIを使ったデザイン

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

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

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

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

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.

 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.

見た目の良いサイトや機能性の高いサイトもありますが、その両方を兼ね備えた魔法のようなインタラクティブなサイトもあります。

これらのサイトは、より深いレベルで私たちを惹きつけ、私たちの注意を引きつけ、私たちの想像力を定着させてくれます。私たちをその世界に引き込み、一瞬でも自分の世界を忘れさせてくれるのです。

この記事では、優れたデザインを持つ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.

ノーコードやローコードのアプリケーションプラットフォーム（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のインタラクティブなプロトタイプで、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.

モバイルアプリと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サイトと比べて、よりインタラクティブな UX を実現できることであり、これはすべて、AngularJS や ReactJSといった強力なフロントエンドフレームワークのおかげです。このフレームワークによって、アプリ開発者はダイナミックなシングルページアプリケーションをサッと構築することができ、それによって別々のビュー間のスムーズな遷移が実現され、ユーザーからの入力を受けたときに素早く反応することができるのです。

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

Webアプリの利点

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

Webアプリの欠点

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

 ウェブサイト にあるのは、目に見えるものだけではありません。レイアウト、色、フォントの他に、サイトスピード、インデックス、メトリクスなど、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.

Googleは常に レスポンシブデザイン （RWD）を推奨しており、特に2015/年4月21日にモバイルフレンドリーなサイトを上位表示させる大型アップデートを展開した後は、その傾向が強くなっています。  

しかし、このアップデートでは、レスポンシブデザインの使用が必須だとは明記されておらず、ただ、モバイルでアクセス可能で、よくできたUXとパフォーマンスを備えたサイトであることとだけあります。  

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

モバイルの台頭以来、「レスポンシブでアダプティブなウェブデザイン（AWD）」か、独自のモバイルURLを持つ「独立したモバイルサイト」のどちらを開発すべきかというのが、最も大きな論争のひとつとしてあります。ただし、この議論では、「独立したモバイルサイト」は、別途作成する必要があることからデザイナーや企業にとって最も好ましくないソリューションであると思われることから、今回は除外します（これにより、初期費用とメンテナンス費用がより多く発生します）。　　  

  ウェブデザイン用のプロトタイプツールをお探しですか？UXPinがお手伝いします。様々なブレイクポイントを利用することができますよ。ぜひ無料トライアルをお試し下さい。

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

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

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

  簡単に言うと、レスポンシブは流動的で、ターゲットとなるxdeviceが何であれ、画面のサイズに適応します。また、CSSメディアクエリを用いて、ターゲットデバイスのディスプレイの種類、幅、高さなどに応じてスタイルを変更し、そのうちの1つだけで、異なる画面サイズに適応することができます。  

一方、アダプティブデザインは、最初に読み込んだら反応しないブレイクポイントに基づく静的なレイアウトを使います。

アダプティブは、画面サイズを検知して、それに適したレイアウトを読み込む仕組みです。通常は、以下の６種類の一般的な画面幅に合わせてアダプティブサイトをデザインすることになるでしょう：

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

アダプティブは、最低でも６つの幅に対応したレイアウトをデザインしなければならないため、表面的にはより多くの作業を必要とするように見えます。しかし、メディアクエリの不適切な使用（あるいは全くの不使用）により、表示やパフォーマンスの問題が発生するため、レスポンシブ対応の方がより複雑なものとなります。  

特に後者については、ここ数年、多くのサイトがデスクトップ用のフルモデルを配信しており、モバイル端末で読み込んでいない場合でも、サイトの表示速度が大幅に低下していることから、多くの議論がなされています。これを回避するにはメディア クエリを使えますが、レスポンシブ サイトは専用のモバイル サイトほど高速ではないため、トレードオフがいくつか出るでしょう。

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

  アダプティブは、既存のサイトを携帯電話に適したものに改修する際に有効であり、これによって、特定の複数のビューポートに対応したデザインとウェブ開発をコントロールすることができます。どのようなビューポートに対応させるかは、あなた自身や会社、そして予算次第ですが、アダプティブだと、レスポンシブデザインでは必ずしも実現できない、コンテンツやレイアウトのコントロールが可能になります。

通常は、低解像度のビューポートからデザインを始め、確実にUIデザインがコンテンツの制約を受けないように、またユーザビリティが損なわれないように、順次デザインを進めていくことになります。  

前述したように、６つの解像度に対応したデザインをするのが標準的な方法ですが、最もよく使われるデバイスのウェブ解析を行い、そのビューポートに合わせたデザインを行うことで、より適切な判断ができるようになります。  

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

複数のビューポートに対応したサイトのデザインや開発には余分な手間がかかるため、通常は後付けで利用されることが多いです。  

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

  アダプティブWebデザインを採用しているサイトの例を探すと、おそらく大企業や会社のウェブサイトで見かけることが多いでしょう。その企業の多くは、モバイルが登場する以前から存在していたため、巨大なウェブサイトを、より複雑なレスポンシブWebデザインのオプションではなく、アダプティブWebデザインで改修する方がはるかに簡単（かつ安価）なのだそうです。  

ここでは、世界的な大企業がアダプティブWebデザインのソリューションを採用し、Googleのモバイルフレンドリーのランキング要素を満たすのに必要な現代的なデザイン要素を、自社のウェブサイトにどのように取り入れたかをご紹介します。  

Amazon

  eコマースの大手であるAmazonは、自社のWebサイトにアダプティブデザインの見直しが必要であることにすぐに気づきました。それによって、世界中の顧客がどのデバイスからアクセスしても、ページの読み込み速度が速くなり（Googleの重要なランキング要因）、一貫したUXを享受できるようになったのです。  

AmazonのアダプティブWebデザインのアプローチは、フルサイトのエクスペリエンスとそのブランドアプリを整合させ、ユーザーが２つのアプリを切り替えても、ウェブとアプリのデザインの違いにかかわらず、同じ機能性とワークフローの配置を難なく使えるようにするものです。すべてのデバイスで一貫性を保つアダプティブデザインのテンプレートを採用し、ユーザーはさまざまなナビゲーションの方法を学ぶことなく、ブラウズ、ショッピング、チェックアウトができるようになりました。  

このアプローチにより、Amazonはページの読み込み速度を最適化し、ユーザーがデスクトップとモバイルの両方のウェブサイトからECプラットフォームにアクセスする可能性を保証することができるのです。モバイル向けに最適化されたさまざまな機能にもかかわらず、重要な検索バーなどの要素は、すべてのフォーマットにおいてデザインレイアウトの中心であり続け、Amazonのアダプティブデザインアプローチは、効率性と一貫性を保つ方法の成功例と言えます。  

USA Today

アメリカで人気の日刊紙「USA Today」は、オンラインニュースのソースを目立たせるためにウェブサイトのリニューアルを行いましたが、その際、技術に精通したアダプティブWebデザインのアプローチを取りました。

同紙は、ウェブサイトやアプリケーションで使われているデバイス、OS、スクリーンサイズを識別し、それに応じてコンテンツを適応させる技術を採用しました。この革新的なアプローチにより、デベロッパーは通常の6つの画面幅に制限されない体験を実現し、ユーザーにユニークな体験を提供することができました。  

IHG

  アダプティブWebデザインのアプローチを考えるとき、ホスピタリティ企業が最重要視されることは普通はないでしょう。  

ところが、IHG（インターコンチネンタルホテルズグループ）は、顧客がモバイルとPCの区別なく、ウェブやアプリでより速く予約できる体験を望んでいることに気づくと、ホテルチェーンはそれに応じて対応したのです。

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

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

  現在、新規サイトの大半にレスポンシブが採用されていますが、WordPress、Joomla、DrupalなどのCMS（コンテンツ管理システム）からアクセスできるテーマがあるおかげで、経験の少ないデザイナーやデベロッパーでも簡単に利用できるようになっています。  

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

写真提供: Smashing Magazine

レスポンシブでは、レイアウトをすべて考慮してデザインすることになりますが、それによって、プロセスはもちろん混乱して、かなり複雑になってしまいます。つまり、まずは中間解像度用のビューポートを作成することに集中して、後でメディアクエリを使って低解像度や高解像度用に調整すればいいということです。  

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

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

レスポンシブWEBデザイン の例

  レスポンシブWebデザインは、ユーザーによりスムーズな操作性を求め、またGoogleが注目するような新しいサイトのために採用されています。また、デベロッパーやデザイナーが難なくレスポンシブ・サイトを作成・維持できることから、世界中の多くの大手テクノロジー企業やデザイン企業が採用しているデザイン手法でもあります。  

次に、レスポンシブWebデザインを採用したサイトの良例と、そのサイトのパフォーマンスとUXに与える影響について見ていきましょう。eコマースやメッセージングの分野で活躍するビッグブランドの要求に応えつつ、その全貌をご紹介します。

Slack

Slackが企業で急成長している最大の理由の1つは、ユーザーが通信アプリを簡単に導入して使用できる点です。シンプルなインターフェースと豊富な統合・最適化機能を誇るSlackのシンプルさと「人間味」は、レスポンシブWebデザインの印象にも反映されています。  

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

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

Shopify

Shopifyは、レスポンシブWebデザインに違った路線を取りました。ウェブサイトとアプリを別々の方向に持っていき、「1つで全部が事足りる」のアプローチではなく、デバイス選択型の最適化を選んたのです。

Shopifyのデザイナーは、どのようなスクリーンサイズであっても、ユーザーが使っているスクリーンに合わせてデザイン要素を変えるべきだと考えていました。そこでShopifyは、たとえ変更したとしても、すべてのユーザーが一貫したUXを受けられるように、デバイスの画面サイズに応じて反応するようサイトをデザインし、また、異なるサイズのCTA（Call To Action）やイラストを、ページ内のさまざまな位置に配信しました。

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

Dribbble

クリエイティブデザインのハブであるDribbbleを利用している人なら、この自己PRとSNSのプラットフォームが、優秀なレスポンシブWebデザインであるということにおそらく頷くでしょう。このプラットフォームのウェブサイトは、閲覧するデバイスに積極的に対応することで、ブラウジング体験を充実させる柔軟な空間の良例だと言えます。

Dribbbleのウェブサイトは、スクリーンサイズと連動した柔軟なグリッドレイアウトを採用しており、デバイスに応じてレイアウトをグリッドカラムに適応させることで、ユーザーのインタラクションに積極的に対応します。つまり、デザイナーはグリッドに表示されるアイテムを調整し、視認性とアイテム数を最適化することができるのです。その結果、ユーザーは雑然とした印象を受けることなく、バランスの取れた体験を堪能できます。

13インチのノートパソコンやPCの画面では4×3のグリッド構成で、より小さな画面では同じポートフォリオを1カラムで見ることができます。

出典: Dribbble

アダプティブとレスポンシブ：サイトのスピード、コンテンツ、UXを考える

先に述べたように、レスポンシブ・サイトは、（適切に実装されていない場合）サイト・スピードの面で手こずることがあります。

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

もちろん、UX（ユーザーエクスペリエンス）も考慮が必要です。レスポンシブでは基本的に、デバイスのウィンドウに合わせてコンテンツを流動的に移動させるため、移動に伴うデザインの視覚的階層に特に注意が必要です。

Nielsen Norman Groupによると、「レスポンシブデザインは、大きなページにある要素を、より細く長いページに合わせてどのように再編成するか、あるいはその逆をするかというパズルを解くことになりがちであるが、ページ内に確実に収まるようにするだけでは不十分である。レスポンシブデザインの成功には、あらゆる画面解像度やサイズで使用できるデザインであることも必要」とのことです。

したがって、どちらの手法を使うにしても近道はありません。どちらも、基本的に万能型のサイトの作成には必要な作業ですが、 サイトのメンテナンスにとんでんもなく多くの時間を費やす必要がないことから、レスポンシブにはわずかな優位性があります。

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

どちらがいいかについて考える時、どのようなデザイン手法であっても、まずオーディエンスを意識することがポイントです。彼らがどのような人たちなのか、どのようなデバイスでサイトにアクセスする傾向があるのかが分かれば、レイアウトやコンテンツなど、彼らを意識したデザインもしやすくなります。

また、既存のサイトがあるか、何もないところから始めるかによっても大きく変わってきます。レスポンシブデザインは、現在では全Webサイトの約１/８がレスポンシブデザインを採用していると言われています（アダプティブデザインを採用しているWebサイトの数については、ほとんどデータがないようです）。レスポンシブの採用率も急速に伸びており、単体のモバイルサイトとほぼ同じ水準に達しています。

このように、アダプティブデザインには継続的な作業が必要なため、通常はレスポンシブデザインが望ましいと言えるでしょう。  

しかし、Catchpoint社が行ったテストによると、クライアントや会社に予算がある場合は、アダプティブの方が良い選択かもしれません。彼らは一つは標準のレスポンシブテーマである WordPress の「TwentyFourteen」を使い、もう一つは「Wiziapp」というプラグインを使って、WordPressで二つのウェブページを作成したそうです。  

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

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

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

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

それで、結論は？

レスポンシブデザインは今後も人気を保ち続けるでしょうが、それは、アダプティブが要求する重いメンテナンスに対する適切な解決策がまだ見つかっていないからかもしれません。しかし、アダプティブWebデザインは、ウェブとレスポンシブデザインの相性がいいように見えるにもかかわらず、消滅していません。なので、少なくとも理論的には、レスポンシブウェブデザインを吹き飛ばすような改良がまだ現れていない可能性があります。  

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

  デザインは繰り返し行うものであり、何がうまくいき、何がうまくいかないかを見極めるには、ある程度の試行錯誤が必要ですが、それはレスポンシブWebデザインとアダプティブWebデザインを使いこなすために、デザイナーが失敗を重ねなければならないということではありません。

プロセスを遅らせる傾向がある最もよくある間違いのうち、以下のようにいくつかはまだ回避できそうです。  

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

  モバイルデザインは、PCやノートPCのデザインに勝るとも劣らない最適化されたUXを小型のデバイス上で実現し、デスクトップ版の対抗馬として急成長しています。しかし、オンライン上のほとんどのものは、デスクトップベースのサイトとして始まり、モバイルバージョンは後から登場したものです。そのため、多くのプラットフォームやツール、サイトがデスクトップ型に傾き、モバイルは補助的な位置づけにとどまっています。

デザイナーは、デスクトップ中心の考え方から脱却し、デザインがモバイルで機能する可能性と、それがデザイン思考の進化にどれだけ大きな影響を与えるかに注目し、モバイル主導型の仕事のやり方に適応し始めないといけません。  

つまり、従来の６つのスクリーンサイズに特化したデザインから、複数のスクリーンサイズに対応するデザインへの移行ということです。これは、デスクトップデザインを完全に否定するのではなく、モバイルとのバランスをとるという意味です。  

ジェスチャーを意識しない

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

ズーム、スワイプ、スクロール、リターンなどのジェスチャー操作から、指示の伝達や複雑なコマンドの実行まで、レスポンシブデザインはこのような動きを次のレベルに引き上げるための肥沃な土壌となりますが、デザイナーは、この革命的ともいえるデザインに手を出さないままです。その主な理由として、すべてのデバイスで一貫したナビゲーションを可能にするジェスチャーアーキテクチャの開発が複雑である点が挙げられます。

解決策の１つして、ウェブサイトが他のデバイスでも再現されるような統一された構造に従うことで、使いやすさと正確さを確実に提供することが考えられます。

ボタンが小さすぎる

  ボタンが小さすぎて正確に打てないアプリを扱ったことがある人なら誰でも、これがモバイルにおいて最もイライラするデザイン問題の1つであることに大きく頷くことでしょう。デスクトップでは正確なマウスカーソルが利用できますが、小さな画面やモバイルデバイスでは親指や指では正確に操作できないことがよくあるのです。  

レスポンシブデザインでは、レイアウトや使えるスペースを最適化するために、クリックできる要素をまとめたり、画面サイズに合わせて縮小したりする傾向がありますが、これは、ユーザーの不満の原因となり、サイトの正確性、ナビゲーション性、UXを低下させる原因になることすらあります。   

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

機能性よりデザイン性を重視  

  デスクトップとモバイルの両方で見栄えのするウェブサイトは重要ですが、ウェブサイトは何よりもまず、機能することが大切です。魅力的なサイトにアクセスしたユーザーは、当然、その実用性にも相応の努力が払われていると考えるでしょう。なので、見た目と同じように機能しないWebサイトに対する怒りは手に取るようにわかりますよね。「怒り」は、トラフィックや評判の大幅な低下を招きかねません。

デスクトップとモバイルの機能性の違いも同様です。デザイン性や操作性を重視したデスクトップ向けサイトが、モバイル向けでは散々な結果に終わるのであれば、モバイル向けには一切手を出さないほうがよいでしょう。

デザインと機能性を確実に一致させるべく、さまざまなニッチでのテストや、効果的なプロトタイプの使用で、デベロッパーの認識を超えていきましょう。  

モバイル用に別のURLを用意する 

  「デスクトップ版」と「モバイル版」で別々のURLを使うのは、貴重な時間を無駄にし、検索順位にダメージを与える「デザイン殺し」です。各バージョンを行き来することでユーザーをイライラさせるのはもちろんのこと、複数のURLの使用はSEOのベストプラクティスに反しており、多くの場合必要ありません。

ただ場合によっては、複数のURLを使うことで、デベロッパーはモバイルデバイス上でより良いパフォーマンスを発揮する軽量なモバイル版ウェブサイトを作成することができますが、デスクトップ版が非常に反モバイル的である場合に限ります。  

将来の維持・開発コストを考慮していない

  開発にはお金がかかりますが、往々にして、将来のことを考えずに目先のお金だけでデザインを決めてしまうことがあります。

アダプティブWebデザインは、開発に手間がかかるため初期投資が高くなりますが、メンテナンス費用は通常は安定的に推移しています。  

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

UXPinでUIをデザインしよう

  アダプティブ UI デザインのモックアップの作成には、UXPinを使うといいでしょう。このコラボレーティブ・プラットフォームには、予め設定されたブレークポイントやカスタムのブレークポイントが用意されています。完成したら、Specモードを有効にして、デベロッパーへのデザインハンドオフを自動化しましょう。  

UXPin を使って、モバイル、デスクトップ、およびその間のすべてのプロトタイプを構築しませんか。さまざまなインタラクティブ プロトタイプ機能を試し、ステークホルダーやエンジニアに理解しやすいデザインを実現しましょう。無料トライアルを開始する。

The post レスポンシブデザイン vs. アダプティブ ：デザイナーにとっては？ appeared first on Studio by UXPin.

ウェブサイトのフッターは、必要不可欠なUIパターンであり、訪問者を重要なコンテンツに導くと同時に、ビジネス価値を高め、新規顧客とつながる絶好の機会をもたらします。  

本記事では、みなさんの今後のプロジェクトにインスピレーションを与えるようなウェブサイトのフッターデザイン、「やるべきこと」と「やってはいけないこと」、専門家の例、ベストプラクティスについてお話します。  

  UXPinでより高い忠実度と高度な機能性でUIデザインをプロトタイプ化しませんか。無料トライアルにサインアップして、コードベースのデザインの無限の可能性をぜひご覧ください。  

ウェブサイトフッターとは

  ウェブサイトフッターとは、ウェブサイトやアプリケーションの下部（またはフッター）にあるUIパターンのことです。フッターには、ナビゲーションのリンク、連絡先、ポリシー、著作権情報、SNSへのリンクなどのお役立ち情報が表示され、ユーザーがビジネスについてより詳しく知ることができるため、重要なウェブサイトの構成要素となっています。

メインのヘッダーナビゲーションをリンクしましょう；フッターは、ユーザーがいつでもリンクやコンテンツにアクセスできるように、すべてのページに表示されます。フッターはウェブページの最下部に位置しますが、ユーザーとビジネス目標にとって重要なコンポーネントです。  

フッターの目的

  デザイナーがWebサイトのフッターをどのように使うかは、ビジネスやコンテンツによって異なり、ウェブサイトでは大抵、セカンダリーナビゲーション、つまり、会社概要、製品資料、リソースなど、ウェブサイトのヘッダーに収まりきらない重要なリンクにフッターが使われています。  

GDP（EU一般データ保護規則）やCCPA（カリフォルニア州消費者プライバシー法）、その他の法的情報により、ウェブサイトにはプライバシー、利用規約など、特定のポリシーが含まれなければいけません。なのでデザイナーは通常、このようなリンクをフッターに設置し、ユーザーが常にそれがどこにあるのか分かるようにしています。  

販売面のメリット

  また、多くのUI/UXデザイナーは、製品のCTA（Call To Action）、お問い合わせページやニュースレターのサインアップフォームによる見込み客の獲得など、ビジネス目的でウェブサイトのフッターを使っており、フッターで、ユーザーを特集ページや売れ筋の製品カテゴリー、サービスに関する詳細情報へナビゲートできるようになります。  

マーケティング効果

  また、多くのマーケティング担当者は、SEO（検索エンジン最適化）目的でウェブサイトのフッターを使っており、フッターには、以下のようにSEO効果がいくつかあります：  

• 検索結果の上位に表示させたいページの押し上げをサポートする。
• ホームページのリンクには重みがある。つまり、検索エンジンはそのような内部リンクを重要と見なし、それに応じて優先順位を付ける。
• クリックの可能性を高め、それによって直帰率が下がり、ドメインオーソリティとランキングが上がる。

フッターに含むもの

  繰り返しになりますが、何を含むかはウェブサイトによって変わってきます。例えばECサイトは、ブログとはフッターの優先順位が異なるでしょう。以下は、フッターに含めるとよい項目です：  

• ナビゲーションリンク
• ブランドエンゲージメントとメッセージ発信
• お客様の声
• 著作権

ナビゲーションリンク

  フッターに表示されるナビゲーションリンクには種類がいくつかあり、以下のようなものがあります：  

• お役立ちリンク：お問い合わせ先、電話番号、メールアドレス、会社所在地、カスタマーサービスのお問い合わせ先、プライバシーポリシー、使用条件
• 便利なナビゲーション：利便性のためのメインナビゲーションのコピー（固定ヘッダーの場合は不要な場合がある。）
• 二次的タスクリンク：求人応募、投資家情報、ドキュメント/仕様書、プレス情報、アフィリエイト登録、FAQ
• サイトマップ：複数のトピック/製品カテゴリへのリンク

ブランドエンゲージメントとメッセージ発信

ウェブサイトフッターのもう一つの一般的な用途は、人と会社がつながることを奨励するようなリンクとフッターコンテンツである、「ブランドエンゲージメントとメッセージ発信」であり、以下のようなものがあります：  

• SNSのアイコン
• InstagramまたはTwitterなど、複数の最新投稿があるソーシャルフィード
• ブランドロゴ
• 1〜3文程度のブランドのスローガンやビジョン
• メール配信登録

お客様の声

  ブランドによっては、お客様の声やレビューのためにフッターが使われ、また、GoogleビジネスやTrustPilotのウィジェットで星評価が表示されることもあります。このようなUIパターンは、社会的証明や製品・サービスへの興味を喚起するのに適しています。

著作権

  フッターの一番下にある著作権マークと告知は、あなたが当該ウェブサイトのコンテンツの所有者であることを訪問者に伝えるものです。法的な義務ではありませんが、コンテンツに対する権利を保護する予定であることを知らせるのは、一般的な方法です。  

フッターデザインの事例6選

  様々な業界からフッターデザインの例を６つ選び、デザイナーがどのようにビジネス目標やユーザーのニーズに沿ったレイアウトを作るかご紹介します。  

このような例から得られる重要なポイントは、業界によってリンクとコンテンツの優先順位が異なるということです。また、どの例でも、訪問者が素早く情報を見つけられるよう、クリーンでミニマルなレイアウトが取り入れられています。

1. UXPin – Saasのフッターデザイン

筆者達は、UXPinのウェブサイトをSaaSのフッターの例として使うことにしました。固定ヘッダーが使われているため、主要なナビゲーションがデスクトップユーザーから常に見えるようになっているのがわかるでしょう。  

UXPinのフッターには、会社、製品情報およびマーケティングの主要情報が記載されています。また、高度なツールであるUXPinと、一般的な画像ベースの競合製品との比較を希望されるお客様が多いため、製品比較リンクがいくつか掲載されています。  

その他、SaaS製品に欠かせないフッターリンクとして、ドキュメント、チュートリアル、教育コンテンツ、その他のお役立ちリソースがあります。ちなみにUXPinには、言語選択、SNSのリンクやポリシー情報も含まれています。

2. BBC – ニュースのフッターデザイン

BBC（英国放送協会）は、世界最大級の報道・メディア機関です。  

この巨大メディアには、30以上の言語版のウェブサイトが主にフッターを使って表示され、人気のあるニュースのトピックには別のセクションが設けられています。また、ページの一番下には、法的情報、ポリシー、お問い合わせ先、BBCの広告へのリンクが掲載されています。  

すっきりとしたレイアウトで読みやすく、ユーザーはコンテンツやリンクをサッと見つけることができます。  

3. Asos – eコマースのフッターデザイン

世界的なECブランドであるAsosは、SNSのボタン、支払い方法、お役立ちリンクなどを備えたシンプルなフッターデザインが使用されています。eコマースで最も重要なのは、「配送/返品ポリシー」、「注文追跡」、「スペシャルキャンペーン」へのリンクですが、Asosの場合、学生割引やギフトカード、ブラックフライデーのプロモーションが行われています。  

そして、上場企業（ASOMY）であるAsosは、投資家情報や企業責任に関する情報提供がが求められています。  

さらに、世界的ECブランドであるAsosには、顧客が閲覧中のストアや、他の地域や通貨に変更するためのリンクが表示されます。

4. Zorro Design – 代理店のフッターデザイン

代理店は通常、以下の２つの目的でウェブサイトを利用します：  

• 自身の作品紹介
• 新規リードの創出

  米国のZorro Designは、白と黒のフッターデザインに、ユーザーをコンタクトフォームに誘導する明るい黄色のCTAが使われています。Zorroのデザイナーはフッターを完璧にデザインしており、画面の中央にCTAがあり、周囲には「クリックして!」と訴えかけるような空白がたくさんあります。  

最後に、ロゴとスローガンを左側に配置し、最近の仕事、お問い合わせ先、会社概要、SNSのボタンなど、重要なリンクがいくつか付いています。  

Zorroのフッターデザインは、ユーザーがサッとコンテンツを理解し、見つけることができるように、すっきりとしたデザインになっています。  

5. アレックス・ラカス氏 – フリーランサーのフッターデザイン

代理店と同様に、フリーランサーも自身の仕事を紹介して顧客を獲得するためのポートフォリオのウェブサイトが必要です。プロダクトデザイナーのアレックス・ラカス氏は、潜在的な顧客や雇用者、デザイナーとソーシャルチャンネルを通じて主につながるために、ウェブサイトのフッターを使用しています。  

また、リモートワーカーであるアレックスは、文字を点滅させることで、自身の現在地（この場合はロサンゼルス）を訪問者に伝えています。  

このダーク/ライトモードの切り替えは、UXデザインのポートフォリオとして、彼がウェブアクセシビリティに配慮していることを示すいいタッチであり、過去の作品やお問い合わせページにつながるリンクも用意されています。

6. Booking.com – 旅行会社のフッターデザイン

Booking.comは世界最大級のオンライン旅行会社で、70カ国以上、2800万件以上の宿泊施設が掲載されています。Booking.comの目的は宿泊施設の販売ですが、新しい物件を取り込みたいため、 「物件を掲載する 」ことが主要なフッターのCTAになっています。  

また、フッターには重要な5つのリンクが大きく太字で表示されて目立つようになっており、さらに、顧客が理想の旅行先をより早く見つけられるよう、地域や宿泊施設など、複数の検索カテゴリーが設けられています。  

そして、Booking.comは上場企業（NASDAQ: BKNG）として、必要なすべての投資家および企業情報へのリンクを掲載しています。  

ページ下部には、Booking.comの持株グループであるBooking Holdings Inc.のロゴがいくつか掲載されています。  

フッターのデザイン法

1. リンクの優先順位付け

  いいフッターをデザインするための第一歩は、リンクに優先順位をつけることです。デザイナーは、ユーザーのニーズとビジネスの目標を考慮し、訪問者にとって有意義で役立つものを作成しなければいけません。  

2. シンプルイズベスト

  ごちゃごちゃしたUIは、常にお粗末なパフォーマンスになり、わかりにくく、ユーザーを混乱させる可能性があります。UI要素、リンク、テキストを減らすことで、最も重要なコンテンツにトラフィックを誘導することができるのです（ここで、最初のポイントに戻りますが、リンクの優先順位を適切に設定しましょう）  

3. 単一のCTAを使用

CTAが単一であれば、訪問者を最も重要なタスクやビジネスゴールに導くことができます。フッターのデザインは通常、白と黒のツートンカラーで、鮮やかな色のCTAがポップで人々の注意を引くのに最適な背景となっています。  

4. モバイルからでも使いやすいフッター

  モバイル優先のデザインは、ウェブサイトのフッターに非常に重要です。デスクトップでは3～4カラムあるでしょうが、スマートフォンでは1カラムです。カラムやリンクの数が増えると、ユーザーはコンテンツを探すためにスクロールしなければならなくなります。最も重要なリンクやコンテンツは最初のカラムに配置し、ユーザーが最初に目にするようにしましょう。  

5. 階層構造で重要度を表示

  Booking.com、Zorro Design、BBC、アレックス・ラカス氏の例では、ユーザーに最も重要なリンクを示すために視覚的階層構造が使われています。サイズ、色、重みの違いは、重要性を表示するための効果的なテクニックです  

6. コンプライアンスの遵守

  ポリシーや免責事項などの法的情報は、現代のウェブデザインにおいて非常に重要です。デザイナーは、こういったリンク先の表示方法について、自社の義務を調査する必要があります。  

例えば、一部の国の金融・投資商品では、免責事項の情報をフッターに表示し、常に顧客の目に触れるようにすることが義務付けられています。Chase Bankのフッターの例をご覧ください。

7. ブランディングのチャンス

ウェブサイトのフッターは、SNS、ニュースレターの登録、会社のリンクなど、ユーザーとブランドの接点をつなぐ素晴らしい機会です。

8. お役立ち情報の提供

ユーザーは、ドキュメント、チュートリアル、ブログ、その他のリソースのようなヘルプを探して、ウェブサイトのフッターにスクロールすることがよくあり、UXPinのフッターデザインは、製品について顧客に啓蒙するための複数のリソースを提供する完璧な例になります。

UXPinでフッターをデザインしよう

UXPinで美しく、インタラクティブで、レスポンシブなWebサイトのフッターを作成しませんか。UXPinがあれば、デザイナーはコードのような機能を持つプロトタイプの構築やユーザーテストの改善、さらにステークホルダーからのより良いフィードバックの獲得が実現します。

UXPinには、コントラストチェッカーや色覚異常シミュレーターなどのアクセシビリティツールも組み込まれており、キャンバスを離れずにサッとデザインをテストすることができます。

世界で最先端のコードベースのデザインツールであるUXPin を使って、より良い製品をより早く提供しませんか。無料トライアルにサインアップして、UXPin でより良いユーザー体験を顧客に提供しましょう。

The post フッターデザイン – 6つの事例とベストプラクティス appeared first on Studio by UXPin.

アクセシビリティのためのデザインは、現代のWebやアプリのデザインにおいて非常に重要な部分であり、デザイナーは、UXとアクセシビリティのベストプラクティスを組み合わせて、インクルーシブなUX（ユーザーエクスペリエンス）を構築しなければいけません。   そこで本記事では、 ウェブアクセシビリティ について、その重要性と、デザイナーがワークフローに適用できる8つの重要なベストプラクティスについてお話します。  

 UXPinのアクセシビリティ機能内蔵とは、色覚異常やコントラストのテストを行うための追加ツールがデザイナーには必要ないということです。A、AA、AAAなどのWC3ガイドラインに準拠しながら、UXPinを離れることなく生産性を上げましょう。ぜひ今すぐ無料トライアルにお申し込みください。  

ウェブアクセシビリティ とは

ウェブアクセシビリティと は、デザイナーやエンジニアが、弱視、色盲、視覚障がい、認知障がい、聴覚障がい、移動障がいなどのハンディキャップを持つユーザーに対応した体験を構築するための、一連のガイドラインのことです。

W3C（ワールドワイド・ウェブ・コンソーシアム）は、世界中の政府機関と協力して、ウェブアクセシビリティ方針をまとめており、これらをガイドラインとして扱う国もあれば、アメリカ、イスラエル、カナダ、イギリスなどのように、法律によって特定のアクセシビリティポリシーを要求する国もあります。  

アクセシビリティ に関する課題の種類

ここでは、ユーザビリティとアクセシビリティを両立させるためにデザイナーが考慮すべきアクセシビリティの課題の一覧を挙げますが、アクセシビリティは、必ずしも身体的または精神的な課題を指すわけではありません。

W3Cのガイドラインでは、インターネットの速度が遅い、片手しか空いてない親など、特定のユーザーやグループを排除する状況や環境も考慮されています。

• 視覚
• 聴覚障がい
• 環境問題
• 移動性障がい
• てんかんのリスク
• 認知・学習障がい
• 偶発的または状況的な状況

アクセシビリティ が重要な理由

アクセシビリティについて考えるとき、我々はハンディキャップについて考えがちですが、必ずしもそうとは限りません。現に上記のリストは、デザイナーやエンジニアがアクセシビリティを十分に考慮しないと、世界人口の大部分が取り残されることを概説しています。  

アクセシビリティを考慮したデザインを行うことで、ウェブサイトやデジタル製品を誰もが使いやすいものにすることができます。例えば、ビデオにキャプションを付けると、耳の不自由なユーザーは物語を追いやすくなり、同時に、音声のないビデオコンテンツをユーザーが吸収することもできます。  

アクセシブルなデザインは、誰もが「自分が受け入れられている」と感じる点で最も重要です。そのためにデザイナーは、さまざまなタイプのユーザーに共感し、ウェブサイトや製品がどのように彼らを疎外しているかの理解が必要です。  

例えば、視力障がい者の学生が学校の課題について調べようとしたとき、ウィキペディアを含むほぼすべてのウェブサイトが支援機器に対応しておらず、ウェブページの移動を妨げる複数の「壁」があるとします。  

みんなと同じように情報にアクセスできないもどかしさを想像してください。あなたの人生を変えるかもしれない情報にですよ！  

ユーザビリティと アクセシビリティ – すべてのユーザーに向けた体験を作る

  我々は、ユーザビリティとアクセシビリティがどのように交差し、”すべてのユーザーにとってより優れたユーザー体験 “を生み出すかを示す、システムソフト社のこのベン図をオススメします。

このバランスを実現するために、デザイナーはUXの原則を超えて、以下のようなよりインクルーシブなUXの実現が必要です：

• W3C標準の適用：アクセシビリティチェックリストを使って、製品やWebサイトに応じて、デザインがレベルA、AA、AAAに関連するガイドラインを満たしていることを確認する。
• 支援技術のためのデザイン：Webサイトや製品は、キーボード操作や支援技術に対して、同等のUXを提供しているか。
• コンテンツへのアクセス：支援技術を含め、誰でもコンテンツにアクセスし、消化することがでるか？また、UXは同等か？

  この3つの原則をプロジェクトに適用することで、デザイナーはユーザビリティを超えた発想で、より幅広いユーザー層に対応することができるのです。  

UXを改善する8つのウェブサイトアクセシビリティのベストプラクティス

以下で、109ページに及ぶ無料のeBook『The Essential Elements of Successful UX Design』から、8つのベストプラクティスをご紹介します。  

1. 基本的なことを完璧に実行する

  アクセシビリティの実践の多くは、UXの原則とUIデザインの基本を実行しており、明確で論理的なデザインやナビゲーション、およびアーキテクチャは、誰にとっても有益です。

このような基本を無視したデザインは、ユーザビリティやアクセシビリティの問題を引き起こし、ハンディキャップがあるユーザーにとって大きな障害となります。

2. ウェブデザインにおけるキーボードナビゲーションを可能にする

  ハンディキャップある方を含め、多くのユーザーはキーボードによる操作を好むことから、ショートカットや論理的なキーボードナビゲーションが提供されれば、より多くのユーザーがウェブサイトを体験できるようになります。  

キーボードナビゲーションは、ユーザーがウェブページを「タブ」で操作できるようにするだけのものではありません。ウィキペディアの「キーボードショートカットの表」には、ウェブサイトをキーボードで操作できるようにするための包括的なリストが掲載されています。  

3. テキストの明瞭性を優先する

  読みやすさは、ハンディキャップのあるユーザーやスクリーンリーダーにとって最大の課題の1つです。コンテンツを吸収できない人は、他のユーザーに対して、特に重要なコミュニティやサポート、政府関連の情報では不利になります。  

そこでデザイナーは、誰もがテキストコンテンツを読んで理解できるように、読みやすさ（文字の明瞭さ）と可読性（テキストブロックの明瞭さ）を確実に上げなければいけません。以下は、文字を明瞭にするための簡単な4つのデザインテクニックになります：  

1. W3Cでは、テキストと背景の最小コントラスト比を「４：５：１」としており、大きなフォントや太いフォントの場合は、「３：１」の比率が許容される。
2. 本文のテキストは最低でも１６ピクセルを使う。
3. 行間はフォントサイズの１．５倍または１５０％以上とする。
4. CSSで固定ピクセルではなく、em、rem、%などのアダプティブ/レスポンシブ・フォント・サイジングを使う。

4. 色だけに頼らない

  世界人口の約4.5％（3億5千万人）に色覚異常があり、そのうち男性の方が圧倒的に多く、12人に1人（8％）の割合でいると言われています。  

デザイナーが色を使う場合、色覚異常のユーザーがコンテンツを区別できるように、2つ目のインジケータを含める必要があります。例えば、多くのメッセージの状態では、【エラー】、【警告】、【完了】など、異なるタイプのアイコンと色を使っています。

コントラストも、ユーザーに影響を与える色の問題です。特に高齢者や視覚障がい者は、色のコントラストが苦手な人が多く、それで文字を読むのが難しく、例えば青地に黒文字の場合はほとんど読めません。  

デザイナーは、常にアクセシビリティツールを使ってこのような色の問題をチェックする必要があります。UXPinには、色覚異常シミュレーターやコントラストチェッカーなどのアクセシビリティ機能を内蔵されているので、デザイナーはキャンバスを離れることなくその場で作品をチェックすることができます。ぜひ無料トライアルにごサインアップしてUXPinに組み込まれたアクセシビリティやその他の高度な機能をお試しください。  

5. HTMLコンテンツは適切に配置する

  大抵のユーザーは、ウェブページを見渡して必要なものを見つけることができますが、スクリーン・リーダーはすべての要素を読み取る必要があります。不適切なHTMLの使用、ラベル付けの欠如などは、スクリーン・リーダーの使用感を悪くすることにつながります。  

デザイナーは、エンジニアと協力してコンテンツを適切に構成し、”障害物 “に対する迂回路を提供する必要があります。たとえば、ヘッダーナビゲーションなどの繰り返されるリンクやコンテンツをスキップする仕組みを提供したり、コンテンツをヘッダータグで区切ったり、目次を含めたりすると、スクリーンリーダーがウェブページをより速く読み、ナビゲートできるようになります。  

6. リンクテキストを明示する

  スクリーンリーダーのユーザーは、ページ上のすべてのリンクをリストアップして、次に移動する場所を決めることができます。しかし、この機能は、テキストに「ここをクリック」や「もっと詳しく」としか書かれていない場合、そのリンクがどこに行くのかを文脈から知ることは不可能であることから、意味がありません。  

また、スクリーン・リーダーが文字列全体を読んだり綴ったりしなければならないため、デザイナーはURL全体をリンクとして使用することを避けなければならず、これは文字や数字を含む長く曖昧なURLの場合に特に問題となる可能性があります。  

たとえば、Mediumの記事では、重複を避けるためにURLの末尾にランダムに生成された文字や数字が使用されていますが、このUXPinの記事のURLを貼り付けると以下のようになり、スクリーンリーダーにとって悪夢となります: https://medium.com/@uxpin/have-you-tried-designing-with-code-introducing-mui-5-kit-in-uxpin-3a6d7f928dd4.   

記事のタイトルを以下のようにハイパーリンクすればもっとよくなりますね：Have You Tried Designing with Code? Introducing MUI 5 kit in UXPin  

PluralSightのこの記事では、ウェブリンクを画面読み上げソフトに対応させる方法について、より多くの例が紹介されています。  

7. タッチ操作の対象領域は４０×４０ピクセルにする

親指でリンクをタップしようとして、間違えて一番近いリンクに当たってしまったことはありませんか？どうしようもないほど腹立たしく、イライラしますよね。タッチ操作で４０×４０ピクセルのターゲットエリアを使うのは、すべてのユーザーにとって理にかなっていますが、ハンディキャップのあるユーザーにとっては特に便利です。  

8. メディアコンテンツにアクセスできるようにする

  画像、動画、音声などのメディアは、ユーザーが好みのメディアでコンテンツを消化できるため、Webページに異次元の世界をもたらします。

しかし、メディアで多くのユーザーが疎外されかねません。例えば、耳の不自由な人は音声や映像コンテンツを聴くことができませんし、目の不自由なユーザーは、画像や動画を見ることができません。そこで、メディアコンテンツをよりアクセシブルにするために重要なヒントをご紹介します：  

• 画像、アイコン、その他の静止メディアには、常に説明的で適切な「altテキスト」を使用する。
• 音声の場合は「トランスクリプト」を、動画の場合は「キャプション」を含める。
• カルーセル内のすべての画像にキャプションを付ける（キーボードナビゲーションを可能にすることも忘れずに）。
• 認知障がい、てんかん障がいのあるユーザーに害を及ぼす可能性のある自動再生を無効にする。
• ストロボや点滅効果のあるメディアは、発作を誘発する可能性があるので使用しない。

ボーナスヒント：アクセシビリティ・チェックリストを使う

  デザイナーやエンジニアがアクセシブルなWebサイトやデジタル製品を構築するのに役立つリソースがたくさんあり、UXPinにはデザイナー向けのウェブアクセシビリティチェックリストがありますが、W3Cの公式文書に従うこともお勧めします。  

UXPinによるアクセシビリティのためのインタラクティブなプロトタイピング

 デザイナーは、アクセシビリティテストのために正確なプロトタイプ・モデルを使わなければならず、プロトタイプは、テスト中に最終製品のように見え、機能し、反応しなければなりません。これにより、デザイナーは、自身のソリューションがW3Cの要件を正しく満たしているかどうかを知ることができるのです。  

UXPinのコードベースデザインがあれば、デザイナーは、コードのような忠実度と機能性を持つ、完全にインタラクティブなWebサイトや製品を構築することができます。  

例えば、このUXPinのサインアップフォームでは、入力フィールドが完全に機能するため、デザイナーは条件付きロジック、エラーメッセージ、コンポーネントのステートなどをテストし、典型的なサインアップフローの再現ができます。  

この登録フォームのようなインタラクティブなプロトタイプは、ユーザビリティの参加者に本物のユーザー体験を提供するため、デザイナーはすべてのユーザーを対象としたテストから有意義で実用的な結果を得ることができます。

無料トライアルにサインアップして、プロトタイプ作成、テスト、イテレーションをより迅速かつ正確に行い、お客様に優れたUXを提供しましょう。

The post ウェブアクセシビリティ – 8つの重要なベストプラクティス appeared first on Studio by UXPin.

シングルページかマルチページかは、デザイナーが新しいWebサイトのプロジェクトで最初に決めることのひとつですが、例えば、ブログが必要な場合や、複数の商品を扱うECストアが必要な場合など、答えが明らかな場合もあります。  

しかし、多くのプロジェクトでは、その決断はそれほど単純ではなく、デザイナーはビジネスゴールとユーザーのニーズを見極め、シングルページとマルチページのどちらがより効果的かを判断しなければなりません。

世界最先端のコードベースのデザインツールであるUXPinを使って、Webデザインのアイデアをデザイン、プロトタイプ、およびテストしませんか？無料トライアルにサインアップし、UXPin がデザインワークフローをどのように変革し、顧客により良いUX（ユーザーエクスペリエンス）を提供できるかをぜひご確認ください。

シングルページウェブサイト

シングルページウェブサイトとは

シングルページのウェブサイトは、ワンページウェブサイトとも呼ばれ、フォームを含むすべてのコンテンツが1つのページ（トップページ）にあります。ナビゲーションリンクがある場合は、新しいページを読み込むのではなく、別のホームページのセクションにジャンプします。

オーストラリアのフリーランスUXデザイナーであるペタル・チェクリッチ氏によるUXポートフォリオサイトでは、ナビゲーションとフッターのコンタクトフォームを備えた典型的なシングルページのデザインが見られます。彼は、自身のポートフォリオを表示するのに大きな画像カルーセルを使用しており、それにはWebサイトやアプリのプロジェクトも含まれています。

シングルページウェブサイトの一般的な使用例

デザイナーは、ランディングページにシングルページデザインを用いるのが一般的であり、ユーザーを1つのページに留めることで、気が散ることなく、見込み客とセールスを増やすことができます。

シングルページのデザインは、ポートフォリオ、中小企業、単一商品のECサイト、実店舗など、最小限のコンテンツしかないウェブサイトにも最適な選択肢です。

シングルページウェブサイトの利点

• シングルページのデザインは、ユーザーがスクロールするだけでウェブサイト全体を消化でき、主要なナビゲーションが隠されていることが多いモバイルユーザーにとって有益な機能である。
• シングルページウェブサイトは、デザイナーが複数ページのサイトの情報アーキテクチャやその他の特性を気にする必要がないため、デザインしやすいことが多い。
• フロントエンドフレームワークなどの開発ツールを使わずに、シングルページのWebサイトをプログラミングする方が、エンジニアにとって楽であり、基本的なHTML、CSS、Javascriptを使用することができるため、Webサイトのサイズ縮小と、パフォーマンスの向上が実現する。
• シングルページのウェブサイトは、ビジネスへの問い合わせ、ニュースレターの登録、製品/サービスの購入など、ユーザーに特定のアクションを起こさせるのに最適。
• デザイナーやマーケティング担当者は、単一の入り口である「ホームページ」を通じて、ユーザー体験をコントロールし、訪問者に一貫した説明を提示できる。

シングルページウェブサイトの欠点

• シングルページのウェブサイトは簡単ではない：ユーザーとビジネスゴールへの貢献のために、コンテンツに優先順位をつけて構成するのはデザイナーにとって容易なことではない。
• パフォーマンスが上がる反面、デザイナーが画像や動画などのメディアを多数使用すると、ページの読み込み時間が長くなる可能性がある（エンジニアは、遅延ロードやその他のパフォーマンス向上技術によって、この問題解決が可能）。
• シングルページウェブサイトでは、SEO（検索エンジン最適化）とキーワード戦略が制限され、よく最適化されたシングルページのサイトは、複数ページの競合サイトと同等かそれ以上の順位を獲得できるが、主要キーワードと関連用語に制限される。
• シングルページのデザインにより、デザイン変更なしのウェブサイトの拡張や、ブランドを拡大する能力が制限される。

マルチページウェブサイト

マルチページウェブサイトとは

マルチページウェブサイトには、ユーザーがサイト内を移動できるようにナビゲーション付きのページが複数あり、コンテンツ、製品、トピックなどを分けることができるため、ほとんどの企業でマルチページデザインが使われています。

ページが複数あるということは、ユーザーの検索エンジンやSNS、他のウェブサイトで、自身のウェブサイト知る「入り口」が多数あるということです。例えば、BBCのようなニュース出版社では、ユーザーがサイトに入ることができるページが何万、何十万とあります。

マルチページウェブサイトの使用例

特に、複数の商品を扱うECショップやブログ、ニュースサイトなどでは、カテゴリーやコンテンツを分けるのに別のページを使うなど、大抵のWebサイトで複数ページのレイアウトが採用されています。

ニューヨークタイムズは、マルチページレイアウトのいい例です。ヘッダーのナビゲーションでは、ユーザーが話題のニューストピックにサッとアクセスできるようになっており、トップページではその日の世界最大の話題に特化しています。そしてフッターには、ニュースのカテゴリー、ポリシー、連絡先、その他の役立つ情報への追加リンクがあります。

マルチページウェブサイトの利点

• マルチページのサイトでは、ユーザーは必要なものを見つけるために1つのページをスクロールするのではなく、自分が最も価値を置くコンテンツに行ける。
• マルチページウェブサイトには、特にウェブサイトがブログを備えている場合は、マーケティング担当者がさまざまなキーワードやトピックをターゲットにするための多くの SEO の利点と機会がある。
• デザイナーは、マルチページウェブサイトの拡張に新しいページの追加ができる。

マルチページウェブサイトの欠点

• 大規模なウェブサイトでは、情報アーキテクチャやコンテンツが見つかりやすくなるための慎重な配慮が必要であり、このプロセスは、コストと市場投入までの時間の増加につながる。
• マルチページウェブサイトはファイルのサイズが大きく、サーバーへのリクエスト処理も多くなるため、ホスティングのコストが上がる。
• 特にレスポンシブデザインの場合、マルチページウェブサイトでは、デザインやコンテンツの更新に時間がかかる。
• 複数のページからウェブサイトに入ることができるため、デザイナーやマーケティング担当者は、ユーザーを製品やサービスに導くために、サイト全体でCTA（Call to Action）の作成が必要。例えば、UXPinでは、UXPinを試すよう訪問者に促すCTAがすべてのブログ記事に付いている。

ここで重要なのは、デザイナーやエンジニアには、こうしたマルチページウェブサイトの課題の克服に使えるツールやテクニックがあるということですが、ユーザビリティの問題を引き起こさないためには、このような問題に対処しなければいけません。

シングルページとマルチページウェブサイトを使い分けるタイミング

プロジェクトにシングルページとマルチページのどちらのウェブサイトが必要かを決める要因はいくつかありますが、多くのプロジェクトに影響を与える主要因を以下に3つ特定しました：  

• ビジネス目標：何を達成したいのか
• コンテンツ：どの程度のコンテンツを表示したいのか
• SEO（検索エンジン最適化）：コンテンツデジタルマーケティングの目標

ビジネス目標

人や企業というのは、大抵意図や目的を持ってウェブサイトを作成します。シングルページのウェブデザインは、見込み客の獲得、アプリのダウンロード促進、単一の製品の販売など、ビジネス上の目標が絞られている場合に最適です。  

複数のCTAがある場合や、複数の製品/サービスを宣伝する場合は、別々のページ作成が最適です。このように分けることで、ターゲットとするオーディエンスに対して別々のキャンペーンを行い、1つのCTAに誘導することができますが、これが1つのページで複数のアクションを行うとなると、混乱を招き、コンバージョンに影響を与える可能性があります。  

コンテンツ

  表示するコンテンツの量や種類によって、判断に大きな影響を与えることがあります。例えば、複数の動画を表示すると、ページのファイルサイズが大きくなり、パフォーマンスに悪影響を及ぼします。ちなみにYouTubeの動画ですらページを読み込む際に追加のリクエストが発生するんです。  

画像もまた、特にモバイル端末やインターネット接続が不十分なユーザーにとって、ページのパフォーマンスを低下させることから、デザイナーは、コンテンツがUXとアクセシビリティにどのような影響を与えるかの考慮が必要になります。  

SEO（検索エンジン最適化）

SEO対策も、シングルページとマルチページのウェブデザインを決定する重要な要素のひとつです。1つのキーワードをターゲットにするのであれば、シングルページのデザインで十分ですが、多様なSEO戦略をとるのであれば、マルチページのデザインが適しています。  

シングルページとマルチページのデザインを決める7つのヒント

1. コンテンツ優先のアプローチを取る：ユーザーが注目するコンテンツは何かを考え、それに合わせてインターフェースをデザインする。必要な数のページ（とコンテンツ）だけを入れる。
2. 自身のサイトがシングルページでの体験に適していることを確認する：1ページにすべてを収めるのが難しい場合は、代わりにマルチページのデザインを検討する。
3. マーケティング戦略上、SEOを優先するのであれば、マルチページデザインを取る方がいい場合が多い。
4. シングルページのサイトやランディングページは、有料広告キャンペーンでよりいいパフォーマンスが発揮される：気が散るようなものを排除し、ナビゲーションを行うことで、ユーザーのページ離脱を防ぎ、コンバージョンの向上につながる。
5. ナビゲートや消化しやすいウェブサイトにする：各ウェブページで明確な視覚的階層を作成し、マルチページウェブサイトのユーザーニーズを解決する情報アーキテクチャを計画する。
6. 確実にすべてのユーザーにとって消化しやすく、操作しやすいウェブサイトを実現するために、ウェブアクセシビリティガイドラインに従う。
7. 混乱をなくし、ユーザーに明確な目標を提供するために、1ページにつき1つのCTAを使う。複数のCTAが必要な場合は、シングルページよりもマルチページウェブサイトを検討する。

UXPinによるWebデザイン

UXPinのコードベースのデザインツールで、デザイナーは、ユーザーテストやステークホルダーからのフィードバック、デザインハンドオフを改善すべく、完全に機能するレスポンシブWebサイトのプロトタイプを作成できます。  

デザイナーは、UXPinのモバイル、タブレット、デスクトップの各フレームを使った、ビューポートごとの複数のレイアウト作成から始めることができます。さらにUXPinには、アプリデザイン用にウェアラブルフレームとTVフレームもあります。

コンテンツとデータがあれば、デザイナーは、JSON、CSV、または Google Sheets を使用して実際のデータを UI 要素に入力することができます。レイヤー名でコンテンツを一致させると、数回のクリックでフィールドにダミーデータを入力でき、また、UXPinのデザインキャンバスを離れることなく、メディア要素にUnsplashの画像を埋め込むことができます。

その結果、最小限の労力で実データを取り込んだ美しいユーザーインターフェースが実現しました！  

画像ベースのデザインツールとは違い、UXPinではデザイナーは1つのフレームを使ってインタラクティブなプロトタイプを作成でき、また、条件付きインタラクション、フォームバリデーション、ユーザー入力バリデーション、コンポーネントステートなどの優れた機能を享受することができます。

UXPinの高度なプロトタイピング機能を使用して作成したウェブサイトのサンプルプロジェクトをご覧になりませんか？このプロジェクトをダウンロードし、UXPinで検査することで、このインタラクティブなプロトタイプをどのように構築したかをぜひご確認ください。

世界最先端のコードベースのデザインツールで、ウェブデザインプロジェクトを強化しませんか？UXPinがどのようにUXワークフローを革新し、顧客により良いユーザー体験を提供するか、無料トライアルにサインアップしてぜひご覧ください。

The post シングルページとマルチページの最適なウェブデザイン appeared first on Studio by UXPin.

  マテリアルデザインは、最も人気のあるデザインシステムの一つです。Android端末をお持ちの方は、毎日Material Designを使用していることでしょう。多くの企業が、モバイルおよびウェブアプリケーションを構築するための基盤として、マテリアルデザインシステムを使用しています。

このシステムの包括的なコンポーネントライブラリと、マテリアルアイコン（現在はマテリアルシンボル）を含むリソースには、組織やスタートアップ企業がゼロからデザインすることなく製品を無限に拡張するための構成要素があります。

本記事では、次の製品開発プロジェクトで使用できるマテリアルシンボルやその他のマテリアルリソースについて見ていきます。

UXPinの各プランには、マテリアルデザインのUIとアイコンが標準装備されています。無料トライアルにサインアップして、今日からUXPinとマテリアルデザインで美しいアプリを構築しましょう。

マテリアルデザインとは

マテリアルデザインは、Googleが開発したデザインライブラリで、UIコンポーネント、アイコン、タイポグラフィなどが含まれます。すべてのマテリアルコンポーネントには、実装、使用方法、構造、動作などのガイドラインが含まれており、デザイナーやエンジニアが高品質なユーザー体験を提供しながら最高の成果をあげられるようサポートします。

Googleは、2014年のGoogle I/O会議でマテリアルデザインの最初のバージョンを発表しました。2021年5月、GoogleはDynamic Color、折りたたみ可能なデバイスコンポーネント、デザイントークンなどの注目すべき機能を含むMateri Design 3（M3）を発表しました。

マテリアルシンボルの発表

マテリアルデザインの最もワクワクするアップデートの1つは、5つのスタイルで2,000以上のオープンソースのアイコンを含む、カスタマイズ可能なアイコンセットである「マテリアルシンボル」の発表でした。お気に入りのマテリアルアイコンをすべて見つけることができますが、製品やブランドの要件に合わせて、より柔軟にカスタマイズできるようになりました。

マテリアルアイコンはまだ利用可能ですが、シンボルのようなカスタマイズはできません。そしてシンボルでは4つの可変オプションがありますが、サイズと密度しか調整できません。

マテリアルアイコンセット

Googleは、シンボルのカタログより少ないとはいえ、旧マテリアルアイコンを残しており、アイコンは、【Outlined】、【Filled】、【Founded】、【Sharp】、【Two-tone】の5つのスタイルで利用できます。

マテリアルシンボル：最新情報

マテリアルアイコンは、Google Fontsの下に移され、【Outlined】、【Rounded】、【Sharp】の3つのスタイルで可変のアイコンセットがあります。また、デザイナーは、以下の4つの変数または軸でアイコンセットをカスタマイズすることができます：

• 塗り：塗りつぶしまたは塗りつぶしなしの外観
• 太さ：シンボルの線を100から700のウェイトで確定
• グレード：強調を伝えるのにシンボルの太さを細かく調整
• 光学サイズ：アイコンのサイズを20、24、40、48ピクセルに設定可能

可変方式では、エンジニアは複数のバリエーションを複数のファイルではなく、1つのフォント（またはアイコン）に保存することができます。ファイルサイズとファイル数を減らすことで、エンジニアにパフォーマンスの向上と管理すべきアセットの削減がもたらされるのです。

3種のスタイル

Googleは、ブランドのアイデンティティやUIデザインに合わせた3つの新しいスタイルの導入もしました。

• 輪郭：クリーンで軽やか。デザイナーは、製品のフォントを補完するのにアイコンの重さを調整することができる。
• 丸み： 曲線の美しさは、丸みを帯びたロゴと重厚なフォントと相性がいい。
• 鋭さ：直線的なエッジと90度のコーナーのスタイリングを持つUIにマッチするようにデザインされている。

マテリアルアイコンを作成する

マテリアルシンボルの膨大なカタログの中から必要なアイコンを見つけられない場合、Googleは下記のようなカスタムアイコンをデザインするためのガイドラインを用意しています：

• デザイン原則：ユーザーにとって意味があり、役に立つ明確な図像を作成するためのベストプラクティス
• アイコンのサイズとレイアウト：デザインツールを使ってアイコンをデザインする際のグリッドサイズとレイアウトの設定方法
• グリッドとキーライン図：一貫したアイコンセットを作成するためのテクニック
• アイコンメトリクス：コーナー、ウェイト、ストローク、複雑さなど、アイコンのデザイン構造

このようなガイドラインに従うことで、マテリアルの包括的なアイコンセットを活かしながら、自身のブランドに関連するアイコンをいくつか追加することができます。

Googleのマテリアルアイコン＆シンボルの使用方法

デザイナーやエンジニアがマテリアルアイコンやシンボルを使用する方法はいくつかあります。

SVGまたはPNGをダウンロードする

アイコンとシンボルは、SVGまたはPNG形式でダウンロードすることができますが、パフォーマンスとカスタマイズの利点を考慮し、SVGを使用することをお勧めします。PNGファイルはサイズが大きく、デザイナーやエンジニアが編集したりサイズを変更するのがより複雑になります。

Googleでは、ダウンロード前にアイコンやシンボルをカスタマイズできるため、プロジェクトで使用する最終的なアセットが得られます。

CSS/CDN

マテリアルシンボルには、Google Fontsに使用するものと同様のウェブサイト設置用のCSSファイルがありますが、この方法は、ウェブサイトに追加のリクエストを行う必要があり、パフォーマンスに深刻な影響を与える可能性があるという問題があります。

なので、複数のマテリアルシンボルを使用する場合は、別の方法で設置した方がよいでしょう。

運営システムとフレームワーク

マテリアルアイコンとシンボルには、プロジェクトのアセットとしてインストールするためのAndroidとiOS用のダウンロードがあり、実装のためのコードスニペットも用意されています。マテリアルデザインには、Flutter（Googleが開発したプログラミング言語）とAngularの説明書があり、Reactの説明は、MUIのドキュメントに掲載されています。

デザイナーの使用方法

大抵のデザインツールには、マテリアルアイコン用のプラグインやエクステンションがありますが、UXPinをご利用の場合、すべてのプランにマテリアル アイコン セットが標準装備されています。

また、自分で作成したSVGアイコンをインポートしてUXPinで編集し、デザインシステムに保存して他のチームメンバーと共有することも可能です。

マテリアルアイコンやシンボルをタイポグラフィと一緒に使う

GoogleのMaterial 3（M3）ドキュメントには、アイコンとタイポグラフィの組み合わせに関するヒントとベストプラクティスが紹介されています。

ウェイト

アイコンとテキストに別々のウェイトを絶対に使わないでください。 Googleは、こういったアセットをマテリアルシンボルのウェイトカスタマイズ変数と簡単に組み合わせられるようにしています。クリーンで一貫した美しさを実現させるべく、確実にフォントのウェイトとアイコンのウェイトを常に一致させましょう。

（正）フォントのウェイト

（誤）フォントのウェイト

サイズと配置

アイコンのサイズと配置は、常にテキストと一致させましょう。ユーザーは両方を読んで、それらが関連していると認識できなければいけません。Googleは、デザイナーに「シンボルのベースラインを、文字サイズの約11.5%にシフトダウンする」ことを推奨しており、このやり方でアイコンやテキストが統一され、整列した状態に保たれます。

マテリアルアイコンのアクセシビリティ

Googleは、アイコンのアクセシビリティについて、デザイナーに簡潔ながら有益なアドバイスを提供しています。デザイナーは、特にナビゲーションのために、常にアイコンに有意義でよく説明されたラベルを使わなければいけません。テキストラベルのないアイコンは、ユーザーにとってあいまいで混乱を招く可能性がありますからね。また、スクリーンリーダーやその他の補助的な技術のための「代替（Alt）テキスト」も含めなければいけません。

アイコンは、対象サイズも重要な要素です。指の大きな人や手の不自由な人は、間違ってアイコンのボタンを押してしまい、混乱やフラストレーションの原因になりかねません。

Googleは、デザイナーに最小ターゲットサイズ48ピクセルの使用を推奨しています。20ピクセルのアイコンを使用する場合は、ターゲット領域の合計が48ピクセルになるよう、十分なパディングを設けましょう。

UXPinでマテリアルデザインのアイコンを使ってデザインする

マテリアルアイコンを含め、UXPinで予めインストールされた複数のアイコンセットがあれば、デザイナーはプラグインのインストールや、外部ファイルのアップロードが必要ありません。以下のように、プロジェクトへのアイコン追加は簡単です。

ステップ1：アイコン要素をクリック

キャンバスの左側にあるクイックツールパネルで、アイコン要素をクリックします。または、キーボードショートカットの【OPTION】+【I】（Macの場合）や【ALT】+【I】（PCの場合）でもできます。

ステップ2：キャンバスにアイコンを描く

アイコンを表示させたい場所をクリックして、四角くドラッグします。【SHIFT】キーを押しながらドラッグすると、幅と高さが等しくなります。

ステップ3：アイコンのプロパティパネル

アイコンを描画すると、右側のプロパティパネルにアイコンプロパティパネルが表示され、マテリアルアイコンや、Fonts Awesome、Retina Icons、UXPinセットなど、他のセットのいずれかを選択することができます。

ステップ4：アイコンの選択

利用可能なマテリアルアイコンをスクロールして、必要なものを探します。プロパティパネルで（キャンバス上でアイコンを選択した状態で）任意のアイコンをクリックし、選択状態にします。

ステップ5：アイコンのプロパティを調整

アイコンを選択したら、【アイコン】セクションの上にあるプロパティパネルを使用してスタイルを設定することができます。カラーピッカーの下には、マテリアルデザインを含む利用可能なデザインシステムのドロップダウンがあるので、デザイナーが他の場所からHEXコードをコピー＆ペーストする必要はありません。

ステップ6：インタラクションの追加

プロパティパネルの上部には、「インタラクション」があり、【インタラクション】、【アニメーション】、【トランジション】などを追加して、アイコンをインタラクティブにすることができます。例えば、このユーザーアイコンを使って、パーソナライズされたプロフィールページを開くとします。

UXPinのインタラクティブなUIパターンとアプリの例で、UXPinの機能の仕組みやコードベースのデザインでできることをご覧ください。

UXPinでプロトタイピングとテストを改善しよう

マテリアルアイコンは、UXPinで作業する際の1つの利便性に過ぎませんが、デザイナーが画像ベースのデザインツールとして、より機能的で忠実なプロトタイプをより早く構築できるようにすることが我々の目標です。

UXPinの内蔵デザインライブラリのいずれかを使えば、デザイナーは要素をドラッグ＆ドロップして、インタラクティブなプロトタイプを数分で構築できます。ウェブサイトから企業やB2C製品のウェブおよびモバイルアプリケーションまで、あらゆるタイプのプロジェクトに対応できるよう、人気の高い5つのデザインライブラリを収録しました

UXPinのすべてのプランには、マテリアルデザイン、iOS、Bootstrap、Foundation、ユーザーフローが含まれており、それぞれのライブラリのインタラクティブな要素、カラー、テキストスタイル、アイコンが用意されています。

UXPinのデザインシステム機能では、デザイナーがゼロからデザインシステムを構築し、ライブラリをカラー、アセット、タイポグラフィ、コンポーネントに自動的に分類することができます。また、権限の設定や、デザイナーやエンジニアが従うべきドキュメントを含めることができます。

UXPinのコードベースのデザインツールを使用して、最終的な製品エクスペリエンスを正確に再現する、より優れたプロトタイプを構築しませんか？無料トライアルにサインアップして、UXPinを使用したデザインの可能性を是非ご覧ください。

The post マテリアルデザインのアイコン： Webとアプリデザインの構成要素 appeared first on Studio by UXPin.