Webアプリは、ブラウザ上で動作するソフトウェアアプリケーションのことです。Webアプリはモバイルアプリ同様、タスクの実行、情報へのアクセス、他のユーザーとのコミュニケーションを行うことができます。

Webアプリを作成するのは大変な作業に思えるかもしれませんが、このガイドを介して独自のWebアプリケーションを作成するために必要なノウハウを身につけることができます。

ユーザーに気に入られるWeb体験をデザインしてみませんか？UXPin Mergeを使って、デザイナーの力を借りずにWebアプリケーション UI（ユーザーインターフェース）をデザインし、簡単にコードに変換させましょう。詳しくはUXPin Merge のページをご覧ください。

Webアプリ とは

Webアプリケーションは、Webブラウザ内で動作するようにデザインされたソフトウェアプログラムの一種です。OS（オペレーティングシステム）から起動する従来のデスクトップアプリケーションとは違い、ブラウザからのアクセスする必要があります。

通常、HTML、CSS、JavaScript などの組み合わせに基づき、ユーザーにUIまたは機能性を提供します。

Webアプリには以下のような利点があります。

• クロスプラットフォームの互換性：さまざまなデバイスや OS 上で実行できる
• 自動更新： ユーザーは Web を通じて最新バージョンにアクセスするため、手動で更新をインストールする必要がない。
• アクセスしやすい：ユーザーはインターネット接続があれば、どのデバイスからでもアプリにアクセスできる。

 Webアプリ の種類

Webアプリには様々な種類があり、構造によって種類を分けることができます。その１つとして、SPA（シングルページアプリケーション）と MPA（マルチページアプリケーション）があります。また、Webアプリでは動作によっても区別できることから、静的アプリ、動的アプリ、PWA（プログレッシブ ウェブアプリ）でも分類されます。

そして Webアプリケーションは、それぞれの特性を兼ね備え、アプリケーションの特定の要件と目標によって決まります。最新ウェブ開発の多くでは最適なユーザー体験を提供するためにこれらのアプローチを組み合わせます。

SPA（シングルページアプリケーション）と MPA（マルチページアプリケーション）

Webアプリのアーキテクチャを考えるとき、以下のように「SPA（シングルページアプリ）」と「MPA（マルチページアプリ）」に分けることができます。

• マルチページアプリ：複数のページがある従来のWebアプリケーション。サーバーとやりとりするたびにページ全体を再読み込みが必要。
• シングルページアプリ：単一のHTMLページを読み込む。ユーザーがアプリとやりとりすると動的にコンテンツが更新されるタイプのWebアプリ。

シングルページアプリでは、ナビゲーションの処理をサーバーに依存する代わりに、クライアント側のルーティングを実装することがよくあります。これは、ナビゲーションとページレンダリングがクライアント側のJavaScriptによって処理されることでサーバーリクエストの必要性が下がることを意味します。

対するマルチページアプリでは、それぞれのページに独自の HTML ドキュメントがあり、ナビゲーションは通常、全ページの再読み込みを伴います。ユーザーによるリンクのクリックや URL の入力があると、サーバーは対応する HTML ドキュメントをブラウザに送信し、ページが完全に更新されます。

静的、動的、 PWA（プログレッシブ ウェブアプリ）

Webアプリのもう一つの分類に、「静的アプリ」、「動的アプリ」、「PWA（プログレッシブ ウェブアプリ）」があります。以下で説明します。

• 静的 Webアプリ：静的なコンテンツで構成されてサーバサイドの処理を伴わない Webサイト。情報提供目的で使用されることが多い。
• 動的 Webアプリ：サーバサイドでコンテンツを生成し、多くの場合サーバサイドの処理を伴う。リアルタイムでデータの取得や更新が可能。
• プログレッシブウェブアプリ：動的アプリと静的アプリの両方の特徴を兼ね備えているが、オフライン機能、スムーズなインタラクション、自動アップデートなど、ダイナミックでアプリのような体験を提供する。

シングルページアプリにもマルチページアプリにも、静的な要素があります。シングルページアプリでは、静的コンテンツは最初に読み込まれ、その後動的に更新されます。また、マルチページアプリでは、一部のページがほとんど静的コンテンツで構成されることがあります。

同様に、これらが動的である場合もあります。シングルページアプリは、デザイン上で多くの場合、動的なコンテンツの読み込みと更新を伴います。一方、マルチページアプリでの動的な動作は、各ページ内またはページ間のナビゲーション中に実装できます。

プログレッシブウェブアプリは、シングルページアプリでもマルチページアプリでも実装することができます。この「プログレッシブウェブアプリ」という用語は、具体的な構造というよりも一連の特徴や性能を指します。

また、シングルページアプリもマルチページアプリも、オフライン機能、高速読み込み、アプリのような体験など、プログレッシブウェブアプリの原則を採用することができます。

Webアプリの例３選

Webアプリの例としては、Gmail などのオンラインメールサービス、Facebookなどの SNSプラットフォーム、Google ドキュメントなどの生産性向上ツールなどがあります。

デバイスにインストールするのではなくWebブラウザからアクセスする様々なアプリケーションが挙げられます。

以下で、有名企業の例を３つ見てみましょう。

Spotify

Spotifyは、膨大な楽曲、プレイリスト、ポッドキャストのライブラリへのアクセスをユーザーに提供する音楽ストリーミングサービスです。

Spotifyのインターフェースは、［Home（ホーム）］、［Search（検索）］、［Your Library（マイライブラリ）］などのセクションを含む左側のナビゲーションパネルを中心に構成されています。

中央のエリアには、個別化された［Playlists（プレイリスト）］、［Recommended Music（おすすめの音楽）］、［Current Listening Activity（現在のリスニングアクティビティ）］が表示され、それでユーザーは、特定の曲やアーティストの検索、プレイリストの作成と管理、キュレーションされたコンテンツの検索ができます。

そして［再生］、［一時停止］、［スキップ］、［ボリューム］などの再生のコントロールはアクセスしやすい下部にあり、アルバムの画像・映像が目立つように表示されています。

全体的に音楽の発見と再生向けの視覚的に楽しくユーザーに優しい体験になるように設計されています。

Googleドライブ

Googleドライブは、クラウドベースのストレージおよびコラボレーションプラットフォームでです。

インターフェースはすっきりと直感的で、左側のナビゲーションパネルからフォルダ、ドキュメント、共有ドライブに簡単にアクセスできます。

メインエリアには［File（ファイル）］と［Folder（フォルダ）］の構造が表示され、アイテムをクリックすると、ファイルのプレビューや編集画面が表示されます。

また、上部バーには、ドキュメントの作成、検索、設定などのオプションが用意されています。

コラボレーション機能がわかりやすく表示されていることにより、ユーザーはリアルタイムでファイルの共有やコメントができます。

Amazon

Amazonは、電子機器、書籍、衣料品など多様な商品を提供する、今では誰もが知るECプラットフォームと言えるのではないでしょうか？そんなAmazonのインターフェースは、直感的なナビゲーションと効率的なショッピングを目的にデザインされています。

ホームページは通常、個別化された「おすすめ商品」や「本日のタイムセール」など、さまざまな商品カテゴリーにアクセスしやすいように設計されています。上部のナビゲーションバーには、[アカウント＆リスト]、ショッピングカートなどがあります。検索バーは目立つ位置にあり、ユーザーは特定の商品をサッと見つけることができます。

このように、膨大な品揃え、ユーザーに優しいインターフェース、個別化、そして付加的なメリットという組み合わせを提供していることから、オンラインショッピングにピッタリなWebアプリケーションの例と言えるでしょう。

Webアプリ開発の基本

Webアプリ開発の世界に飛び込む前に、Web開発の基本を理解することが重要です。そして Web開発には、主に「フロントエンド開発」と「バックエンド開発」という２つの要素があります。

フロントエンド開発

フロントエンド開発は、WebアプリのUIとUXに重点を置いています。これにはWebデザインの構成要素である HTML、CSS、JavaScript が含まれます。HTMLは構造を提供し、CSSは視覚的な魅力を強化し、JavaScriptは Webアプリにインタラクティブ性を加えます。

バックエンド開発

一方、バックエンド開発はWebアプリのサーバーサイドを扱います。Python、Ruby、PHPなどのプログラミング言語や、MySQL、MongoDBなどのデータベースが使われます。また、バックエンドは Webアプリのロジックと機能を処理することでデータの処理と安全な維持を保証します。

Webアプリの作り方の手引き

Webアプリのアイデアを調査する

プロジェクトは、ターゲット市場、テクノロジースタック、既存のソリューションについて広範な調査を行うことから始め、ここで「目標」、「対象ユーザー」、および「望ましい機能」を確定しましょう。（「デザイン思考 における「有用性、持続可能性、実現可能性」とは」の記事をご参照ください）

そして、市場調査を実施することで競合他社を特定し、SWOT （Strength ‐ 強み、Weakness ‐ 弱み、Opportunity ‐ 機会、Threat ‐ 脅威）分析を行ってその長所と短所を分析しましょう。

既存のWebアプリの真似をしようと思うかもしれませんが、それは絶対に良い結果につながりません。市場に向けて独自の価値を見出し、Webアプリを競合と差別化する必要があります。そのためには基本的に既存のアプリよりも複雑またはシンプルな製品を作ることで達成することができます。これらについての詳細はBenedict Evans氏のプレゼンテーションをぜひご覧ください。（英語）

Webアプリのプロジェクトを計画する

効果的な計画は、Webアプリ開発のプロセスがうまくいくための基盤であり、デザインやソフトウェア開発を始める前には、ワークフローの計画が重要です。

ロードマップを作成し、それに基づいたリソースを割り当て、現実的な期限とマイルストーンを設定しましょう。

MVP（最小利用可能製品）を定める

最初から本格的なWebアプリを作るのではなく、MVP（最小利用可能製品）を作成して、ソリューションの対象となる顧客を見つけられるかどうかをテストしましょう。

MVP とは、コア機能をユーザーに早く届けることに焦点を当てた、製品の縮小版です。これは、ソフトウェア開発に対するアジャイルで反復的なアプローチであることから、主にスタートアップ企業に好まれる手法です。

MVP の範囲を定めるには、少なくとも以下のタスクがあります：

• 核となる問題の確定：調査に基づいて、Webアプリがユーザーのために解決しようとしている主な問題を明確にし、MVPが解決すべき重要な問題に焦点を当てる。
• 主要機能のリストの作成：構築する機能を特定してそれをリストにし、ユーザーにとっての重要性とアプリの全体的な機能に基づいて、その機能に優先順位を付ける。
• ユーザーストーリー作成：機能ごとにユーザーストーリーを作成し、ユーザーがどのように操作するかを記述する。ユーザーの視点を把握し、機能がユーザーのニーズに合致していることを確認できるようになる。

UI デザイン

UIとフローを視覚化するために、Webアプリのワイヤーフレームかプロトタイプを作成しましょう。そうすることで、さまざまなコンポーネントがどのように相互作用するかをがはっきりわかってきます。

Web アプリの UIをデザインする際に覚えておくべき重要な原則を以下にいくつか挙げてみましょう：

• ナビゲーション：ユーザーにとって使いやすく次のアクションをわかりやすくするためにも、ごちゃごちゃしたインターフェースは避ける。シンプルさを優先することで、明確なラベル、アイコン、メニューを使ってユーザーを誘導する。
• 一貫性：Webアプリ全体で一貫したデザインを維持する。ページ間で同じ配色、レイアウト、タイポグラフィを用いることにより、統一感のあるUXにつながる。
• レスポンシブ：Webアプリが確実にレスポンシブで、さまざまな画面サイズに対応できるようにする。モバイルでの使用が増加していることから、どんなデバイスでもシームレスなエクスペリエンスを提供することが非常に重要になる。
• フィードバックと確認：ユーザーのアクションに即座にフィードバックを提供する。視覚的または聴覚的な合図送ることでアクションが正常に完了したことを確認できる。ユーザーの不確実性が軽減され、ユーザー自身が「コントロール」しているという感覚がもたらされる。
• 視覚的な階層：サイズ、色、コントラストなどの視覚的なヒントを使って、重要な要素に優先順位を付ける。ユーザーはコンテンツを見て把握できるようになる。
• ユーザーペルソナの調整：UIデザインが、ターゲットとするユーザーペルソナの嗜好や期待に確実に沿ったものにする。ユーザーの習慣や嗜好を理解することで、よりユーザー中心のデザインを作成できるようになる。
• ユーザー向けオンボーディング：新規ユーザーのためのスムーズなオンボーディングプロセスを作成する。ガイダンスやチュートリアルを提供し、ユーザーが主要な機能を理解できるようにする。オンボーディングの段階では、シンプルさと有益な要素のバランスが不可欠。
• エラー処理：明確でユーザーにわかりやすいエラーメッセージをデザインし、ユーザーがエラーに遭遇した場合に、問題を解決するためのガイダンスを提供する。曖昧な表現のエラーメッセージは避け、具体的に何が問題なのかをユーザーが理解できるようにする。
• ホワイトスペースの活用：ホワイトスペースを効果的に使って読みやすさを向上させる。視覚的にごちゃごちゃするのを避ける。ホワイトスペースをうまく使うことで、すっきりとまとまったレイアウトになり、ユーザーは必要なコンテンツに集中しやすくなる。

ユーザーからのフィードバックを継続的に集め、UIデザインを改善し続けることを忘れないでください。

そしてユーザーテストとユーザビリティ調査で、ユーザーが Webアプリをどのように使うのかについての貴重なインサイトが得ることができます。

Webアプリのフロントエンドを開発する

UIデザインが決まったら、いよいよWebアプリのフロントエンド開発に取り掛かります。前述したように、フロントエンド開発にはHTML、CSS、JavaScriptを含みます。

また、上記で説明したようにHTMLはWebアプリの基礎となります。セマンティックHTML タグを使ってコンテンツを構造化し、Webアプリのさまざまなセクションを定めましょう。

一方、JavaScriptは、ユーザーとのやり取り、入力の検証、バックエンドからのデータ取得といったインタラクティブ性および動的な機能を追加することで、実際に動きをつけることができます。

フロントエンドの開発プロセスを効率化するために、ぜひReact、Angular、Vue.js のようなフロントエンドフレームワークの使用を検討しましょう。

このようなフレームワークには、開発プロセスを大幅にスピードアップできる、事前構築済みコンポーネントやライブラリがあります。

Webアプリのバックエンドを作成する

フロントエンドの準備ができたら、次は Webアプリケーションのバックエンドを構築します。そしてバックエンドは、サーバサイドのロジックとデータベースとの通信を処理します。ここでは、Web アプリのバックエンドを構築する手順を見ていきましょう：

• サーバーのセットアップ：Webアプリをホストするサーバーをセットアップする。これは、AWS、Google Cloud、Microsoft Azureのようなクラウドプラットフォームを使って行うことができ、入ってくるリクエストを処理し、Webアプリの適切な部分にルーティングするようにサーバーを設定する。
• ビジネスロジックを実装する：デザインからコピーするか、Web アプリのコア機能を処理するコードを記述する。これには、ユーザー入力の処理、計算の実行、データベースとのやり取りなどが含まれる。
• ​​データベースへの接続 ：Web アプリに適したデータベースを選択し、接続を確立する。これにより、効率的にデータの保存および取得ができるようになる。一般的な選択肢としては、MySQL や PostgreSQL のような SQLデータベース、MongoDB、Firebaseのような NoSQLデータベースがある。

強固な認証および認可メカニズムを実装することで、バックエンドの安全性が保証されます。機密性の高いユーザーデータを保護し、Webアプリへの不正アクセスを防ぎましょう

Webアプリのテストとデバッグ

テストとデバッグは、Webアプリの開発プロセスにおいて重要なステップです。Webアプリが想定通りに機能し、バグやエラーがないことを確認するために、徹底的にテストを行いましょう。ここでは、テストにおいていくつかのテクニックを見てみましょう：

• ユニットテスト：Webアプリの各コンポーネントやモジュールを個別にテストして正しく動作することを確認し、Jest や Mocha のようなテストフレームワークを使ってテストプロセスを自動化する。
• 統合テスト：Webアプリのさまざまコンポーネントがどのように相互作用するかをテストし、フロントエンドとバックエンドの間でデータが正しく流れることを確認する。
• ユーザー受け入れテスト：ユーザーグループを招待して、Web アプリをテストしてもらいそのフィードバックをもらう。これで、ユーザビリティの問題や改善の可能性を特定できるようになる。

デバッグとは、Webアプリのエラーや問題を特定し、修正するプロセスです。デバッグツールやテクニックを使って、エラーの原因を突き止め、解決しましょう。そしてテストとデバッグを継続的に行うことで、Webアプリの安定性と信頼性を確保することができます。

Webアプリのデプロイと起動

テストとデバッグの段階で合格点に達したら、いよいよWebアプリをデプロイして起動します。Webアプリのデプロイには、ユーザーがインターネット経由でアクセスできるようにする必要があります。以下は、Webアプリをデプロイする手順です：

• ホスティングプロバイダを選ぶ：ニーズと予算に合ったホスティング・プロバイダを選ぶ。よく使用されるものとして、AWS、Google Cloud、Heroku、Netlify などがある。
• ドメインの設定：Web アプリ用のドメイン名を登録し、ホスティングプロバイダを指すように設定する。それによって、ユーザーは覚えやすい URL を使ってウェブアプリにアクセスできる。
• Webアプリのデプロイ：ホスティングプロバイダの指示に従って Webアプリをデプロイする。これには通常、Webアプリのファイルのアップロード、サーバーの設定、安全な通信のための SSL証明書の設定が含まれる。
• パフォーマンスの監視と最適化：Webアプリのパフォーマンスを定期的に監視し、スピードと効率のために最適化する。Google Analytics のようなツールを使ってユーザーの行動を追跡し、ボトルネックを特定する。

Webアプリのメンテナンスとアップデート

Webアプリの開発は始まりに過ぎませんが、これがうまくいくには、定期的にメンテナンスとアップデートを行う必要があります。ここでは、Webアプリのメンテナンスに関わる主なタスクを見てみましょう：

• パフォーマンスとセキュリティの監視：Webアプリのパフォーマンスの問題やセキュリティの脆弱性を継続的に監視し、ソフトウェアライブラリとフレームワークを定期的に更新して、Webアプリのセキュリティを維持する。
• ユーザーフィードバックの収集：ユーザーに Web アプリに関するフィードバックを提供するよう促す。これにより、改善点が特定され、将来のアップデートの優先順位を決めることができる。
• バグや問題の修正 ：報告されたバグや問題に速やかに対応する。定期的にバグフィックスとアップデートをリリースし、Webアプリのスムーズな動作を維持する。
• 新機能の追加：新機能を追加することで、Webアプリを常に新鮮で魅力的なものに保ち、ユーザーの行動や市場動向を分析して、機能強化の可能性を見極める。

Webアプリを作ろう

ゼロからWebアプリを作るのは難しいと思うかもしれませんが、正しいアプローチと知識があれば、誰にでもできます。Web開発の基本を理解してプロジェクトを計画し、直感的なUI をデザイン、フロントエンドとバックエンド開発、テストとデバッグを厳密に行ってデプロイと起動を行い、Webアプリのメンテナンスとアップデートをすることで、希望するアイデアの実現が可能です。

そして Webアプリを作る過程では、継続的な学習と改善が必要であることを忘れないでください。新しい技術を受け入れ、業界のトレンドを常に把握し、テストを続けましょう。献身性と忍耐があれば、対象とする人のニーズを満たす、優れたWebアプリを作ることができます。

早速 Webアプリ開発を始めて、自分のアイデアがユーザーに実際にどのように届くのかをみてみませんか？UXPin Merge でインタラクティブなプロトタイプを１０倍速くデザインしましょう。詳しくはこちらをご覧ください。

The post 【初心者向け】Webアプリ をゼロから作るには？ appeared first on Studio by UXPin.

CRUD アプリとは、データに対して「作成（Create）」、「読み取り（Read）」、「更新（Update）、「削除（Delete）」の基本操作を行うアプリのことです。この４つの操作は、ほとんどのデータベース管理システムで実行できる基本的な操作であり、アプリケーション内でのデータの管理には欠かせません。

CRUD 機能は、データを管理および操作する必要がある場合に最もよく使われ、 その使用は、タスク管理ツール、予約および予約システム、CMS（コンテンツ管理システム）プラットフォームなど、さまざまな業界に及びます。

デザイナーなしで、管理パネル、内部ツール、その他の UI（ユーザーインターフェース）のインタラクティブなプロトタイプを構築しませんか？

事前構築済みのコンポーネントをキャンバスにドラッグ＆ドロップして、すぐに開発できる美しいインターフェースを作成しましょう。

こちらから UXPin Mergeをぜひご覧ください。

Design UI with code-backed components.

Use the same components in design as in development. Keep UI consistency at scale.

Try UXPin Merge

CRUD アプリとは

CRUD アプリケーションは、さまざまなプラットフォームでのデータ管理の基礎を形成するデータに対する基本的な操作を実行するようにデザインされた基本的なソフトウェア アプリであり、それでエンドユーザーはデータを効率的に操作、整理、保守できるようになります。

CRUD とは、「Create（作成）」、「Read（読み取り）」、「Update（更新）」、「Delete（削除）」の頭文字をとったもので、データに対して行われる中核的な操作を４つのアクションで表しています。そしてこの頭字語では、C は「新しいデータの追加」、R は「既存のデータの取得と表示」、U は「既存のデータの変更」、D は「不要なデータや古いデータの削除」という意味になります。

コンテンツ管理システムから ECウェブサイトに至るまで、CRUDアプリでエンドユーザーは効率的にデータのやり取りや整理および維持ができるようになり、ダイナミックでレスポンシブな UX（ユーザーエクスペリエンス）のバックボーンが作られます。

つまり、CRUDアプリはデータのインタラクションを推進するエンジンであり、それでユーザーは体系的かつ直感的に情報を作成、取得、更新、削除できるようになります。そしてこの基本的な操作の理解は、デジタル領域におけるデータ管理の本質を把握するための鍵となります。

CRUD の４つの機能

以下で、CRUDの各操作を見てみましょう：

• 作成（C）： システムに新しいデータや記録を追加する。CRUD アプリでは、例えば新しいユーザーアカウントの作成や、在庫への新しい商品の追加、ブログプラットフォームでの記事の新規作成などが挙げられる。
• 読み取り（R）： ２番目の操作は、データベースからのデータ読み込みおよび取得であり、これには、情報の取得および表示が含まれる。CRUD アプリでは、全ユーザーアカウントのリストや特定の商品の詳細、投稿のフィードなどの表示が挙げられる。
• 更新（U）： システム内の既存のデータを変更し、それを最新の状態に保つことであり、ユーザー情報の編集、商品の詳細の変更、投稿内容の更新などが含まれる。
• 削除（D）： システムから不要または古くなったデータを削除することであり、ユーザーアカウントの削除、在庫からの商品の削除、投稿の削除などが挙げられる。

CRUDの機能を個別のカテゴリに分類すると、明確さ、モジュール性、再利用性、保守性が促進され、フロントエンドとバックエンドの開発実践が強化されます。これはソフトウェア エンジニアリングのベスト プラクティスと一致しており、ソフトウェア アプリケーションの全体的な効率と堅牢性に貢献するものです。

各操作には明確で具体的な目的があるため、フルスタックのデベロッパーやステークホルダーはシステムの機能を理解しやすくなります。また、この操作はすべて独立して実装できるため、メンテナンスやアップデート、スケーラビリティがよりしやすくなります。

さらに、デベロッパーは CRUD 機能ごとに標準化された関数やコンポーネントを作成することができ、それでアプリケーションのさまざまな部分や将来のプロジェクトでこの要素を再利用できるようになります。

また、CRUD を個別の操作に分けるのは、エンドユーザーの視点からも理にかなっています。ユーザーのパーミッションのきめ細かいコントロールができるようになり、さまざまな役割やユーザーは、それぞれの責任や要件に基づいて、特定の CRUD 機能へのアクセスを許可または制限することができるようになります。

さらに、CRUD機能で、ユーザーは実行できる明確なアクション（作成、読み取り、更新、削除）を簡単に把握できるようになります。そしてこれは、明確で直感的なインターフェースがある、よりユーザーに優しいアプリケーションの作成に貢献するものです。

CRUD アプリの例

CRUD アプリケーションで、多くの人が耳にしたことのある一般的な例を、以下で見てみましょう。

WordPress

• アプリケーションの種類：CMS（コンテンツ管理システム）
• CRUD 機能：
  
  • 作成： 作者は新しいブログ記事、ページ、メディアコンテンツを作成できる。
  • 読み取り：ユーザーは Web サイト上で公開されたコンテンツを読める。
  • 更新：作者は既存の投稿やページの編集や更新ができる。
  • 削除：不要なコンテンツや古いコンテンツを削除できる。

Salesforce

• アプリケーションの種類：CRM（顧客関係管理）システム
• CRUD 機能：
  
  • 作成：営業担当者は新しい顧客の記録を作成できる。
  • 読み取り：顧客プロフィールや顧客とのやり取りを閲覧できる。
  • 更新：営業チームは新しい情報に基づいて顧客の詳細を更新できる。
  • 削除：関連性のなくなった顧客のレコードを削除できる。

Shopify

• アプリケーションの種類:：ECプラットフォーム
• CRUD 機能：
  
  • 作成：店側は在庫に新しい商品を追加することができる。
  • 読み取り：買い手は商品リストを閲覧できる。
  • 更新：商品詳細、価格、在庫状況を更新できる。
  • 削除：販売終了や在庫切れの商品を削除できる。

Facebook

• アプリケーションの種類：SNS プラットフォーム
• CRUD操作：
  
  • 作成：ユーザーは投稿の新規作成や、写真のアップロード、コメントの追加ができる。
  • 読み取り：友だちの投稿、写真、コメントを閲覧できる。
  • 更新：自分の投稿やプロフィール情報の編集や更新ができる。
  • 削除：投稿、コメント、またはアカウント全体を削除できる。

Trello

• アプリケーションの種類：タスク管理アプリケーション
• CRUD 機能：
  
  • 作成：ユーザーは新しいタスク、ボード、カードを作成できる。
  • 読み取り：チームメンバーはタスク、ボード、プロジェクトの進捗状況を閲覧できる。
  • 更新：ユーザーはタスクの詳細、期限、割り当ての編集や更新ができる。
  • 削除：完了したタスクや関連性のないタスクはアーカイブまたは削除できる。

CRUD 機能に相当するもの

Web 開発の世界では、関数名や操作に若干の違いがあるものの、CRUD に相当するものが存在します。例えば、データベースとやりとりするために広く使われている言語である SQL では、その関数を「Insert（挿入）」、「Select（選択）」、「Update（更新）」、「Delete（削除）」と呼びます。

ただし、NoSQL データベース（MongoDB、Cassandra、CouchDB）では、CRUD機能に対応する式は、特定のデータベースとそのクエリ言語に基づいています。例えば、MongoDB では、insertOne、find、updateOne、deleteOneなどがあります。

また、Cassandra は、INSERT INTO、SELECT、UPDATE、および DELETE FROM で CQL（Cassandra Query Language）を使い、CouchDB は、POST、GET、PUT、および DELETE のような HTTP メソッドを採用しています。

具体的な名前や構文はデータベースやプログラミング言語によって異なる場合がありますが、実行される基本的な CRUD アクション (データの作成、読み取り、更新、削除) は基本的に同じか類似しています。

CRUD アプリの構築手順

ここでは、CRUD アプリの開発概要を見ていきましょう。このプロセスには、非常に重要なステップである「プロトタイプ」の段階が含まれます。その理由は、プロトタイピングによってアプリがユーザー中心で信頼性が高く、時代に対応可能な拡張性のあるソリューションであることが保証されるからです。

要件の収集

まず CRUD アプリを構築する前に、チームと腰を据えて、アプリが何をする必要があるかを決めます。ここでCRUDの各操作を通して扱う予定の具体的な情報を概説します。

この最初のステップは、データのやり取りをシームレスに管理する、強固で効率的なアプリケーションの基礎を築くので重要です。

要件を集める最も簡単な方法に、ユーザー ジャーニーとユーザー要件、技術的制約とビジネス目標を想定しながら、何をどのように構築する必要があるかを決める「デザイン思考ワークショップ」があります。ここでは、ユーザー、ビジネス、技術的な要件は、有用性、持続可能性、実現可能性に変換されます。

デザイン思考ワークショップについてはこちら（英語）

CRUD アプリのプロトタイプをデザインする

見た目がよくてユーザーに優しいインターフェースは、うまくいくCRUD アプリの象徴になります。UXPin Merge を活用して、最終製品のように機能するプロトタイプを構築しませんか？

CRUD の各操作である データの作成、読み取り、更新、削除に対応する画面を作成しましょう。

なぜデザインから始めるのでしょうか？デザイン中心のアプローチでは、デザインにリソースを投入する前に、そのデザインをテストすることができるからです。

デザインしたいものがエンドユーザーにとって直感的かどうかをチェックすることができる上に、それで実際に必要なアプリを作成しているかどうかを確認することができます。

さらに、UXPin Mergeはアプリの構成要素となる実際のReact コンポーネントを使ってデザインするためのデザインツールなので、デザインが実現可能であることが保証されます。

データベースの設定

デザインは良くなりましたか？それでは、次のステップでは、データモデルに基づいたデータベースのインストールと設定です。

例えば、MongoDBを選んだとしましょう。いよいよそちらをインストールして設定してみましょう。

APIのエンドポイントの構築とUIとの接続

専用のルートとコントローラを開発し、UI（ユーザーインターフェース）とデータベース間のスムーズな通信を促進します。

適切なバリデーションとエラー処理メカニズムを組み込み、CRUD の各操作を通じてデータを処理するアプリの信頼性とセキュリティを確保します。

そして、デザインに基づいてフロントエンドを構築し、API のエンドポイントとインターフェースを接続します。

CRUD アプリのテスト

CRUD の各操作を広範囲に検証し、それが想定通りに機能することを確認します。

このテスト段階では、データの整合性の確保や、潜在的なエッジケースへの対処も含まれます。厳密なテストなので、アプリがユーザーにとって使いやすいかわかるだけでなく、強固でレジリエンスであり、さまざまなシナリオに対応できることが保証されます。

アプリのデプロイ

CRUD アプリ構築での最後のステップは、デプロイです。アプリをサーバーやクラウドプラットフォームにデプロイすることで、一般ユーザーがアプリにアクセスできるようにします。

これによって、その綿密にデザインされた機能を世界中のユーザーが利用できるようになります。

デプロイは努力の集大成であり、アプリをローカルの開発環境からデジタル領域における価値ある資産へと変えてくれるのです。

UXPin Mergeで CRUD アプリのインターフェースを構築しよう

いかがだったでしょうか？今度は自分でCRUD アプリを構築する番です。 まずはインターフェースの計画から始めましょう。

UXPin Merge を使えば、テストしたり他のチーム メンバーに見せることができる、インタラクティブで完全に機能する CRUD アプリのプロトタイプを簡単に組み立ててることができます。

デベロッパーを念頭に置いて作られたこのデザインツールをぜひお試しください。 UXPin Merge を見る。

The post CRUD アプリとは？ appeared first on Studio by UXPin.

 オペレーション自動化 とは、様々なビジネスプロセスを効率化および最適化するためにテクノロジーを戦略的に取り入れるということであり、従来の手作業による方法とは一線を画すものです。

企業における自動化の取り組みで最もホットな話題のひとつに、AI（人工知能）があります。AI はソフトウェア開発、非効率の特定、データ分析、テンプレートの考案など、プロセスの自動化の分野で役立っているところもありますが、それでも人間の介入は必要です。

しかし、AI は オペレーション自動化 の広大なランドスケープの一面に過ぎません。

そこで本記事では、反復的なタスクの自動化の世界を掘り下げ、AI サービスにとどまらない革新的なアプローチを探ります。企業における独創的なソリューションから、他の場所での最先端のアプリケーションまで、オペレーション自動化の最も一般的なユースケースについて見ていきましょう。

オペレーション自動化ツールの UI を１０倍速く構築しませんか？完全にコード化されたコンポーネントを使用できる、ドラッグ＆ドロップの簡単なデザインエディタをぜひお試しください。

デザイナーの手を借りずにインタラクティブなプロトタイプを組み立て、数秒でコードにプッシュできますよ。UXPin Merge を見てみる。

 オペレーション自動化 とは

オペレーション自動化とは、テクノロジーを使って組織内のさまざまな操作のタスクを効率化および最適化するプロセスを指します。そして企業では、反復的で時間のかかるプロセスが自動化されることで、効率の向上、ミスの減少、全体的な生産性の向上が実現します。

また、自動化の力を上手く使うことで、企業は貴重なリソースの解放や、手作業に費やされる時間の軽減、そして、より戦略的な取り組みへの集中ができるようになります。

 オペレーション自動化 が必要な理由

目まぐるしく変化する今日のビジネス環境において、組織は常に、より少ない労力でより多くのことをこなそうと努力しており、業務が複雑になって、大量のデータ処理が必要になれば、それが手作業による処理だと流れが滞ってしまう可能性があります。

そこでオペレーション自動化で定型業務が自動化されると、従業員はより戦略的な業務に集中できるようになり、オペレーションのコストは削減されます。また、ヒューマンエラーが減って精度が上がることで、アウトプットの質も上がります。

オペレーション自動化のメリットは、効率化だけにとどまりません。繰り返しの多い業務が自動化されることで、従業員はより有意義な業務に時間を充てることができ、仕事の充実度が上がります。また、手作業に時間を取られることが少なくなることで、従業員には自分のスキル磨きや、新しい革新的なアイデアを生み出すためのゆとりが生まれます。

そして、組織はリソースを直線的に増やすことなく業務を拡張できるため、増大する需要に効率的に対応できるようになり、さらに、業務の自動化によってワークフローがリアルタイムで可視化されるため、より適切な意思決定と迅速な対応ができるようになります。

ビジネスプロセスの自動化は、社内のワークフローの効率化だけでなく、全体的な CX（カスタマーエクスペリエンス）を上げる上で極めて重要な役割を果たします。

反復的なタスクやプロセスが自動化されることで、企業は応答時間、正確性、顧客満足度を上げることができるのです。

自動化すべき業務を特定する方法

自動化の成功には、まずは自動化に適した業務の特定が重要です。以下で、自動化に最適なプロセスを特定するための手順を見てみましょう：

• 反復作業を評価する： 繰り返し実行され、かなりの時間とリソースを消費しているタスクを特定する。このようなタスクは、貴重なリソースを解放し得るため、自動化の有力な候補となる。
• エラーの起こりやすいプロセスを評価する： ヒューマンエラーが発生しやすいプロセスを探す。このようなプロセスが自動化されることで、エラーが大幅に減り、全体的な精度が上がる。
• 拡張性を考慮する： ビジネスの成長に合わせて拡張可能なプロセスを検討する。そのプロセスを自動化することで、リソースを追加することなく、ボリュームの増加に効率的に対応することができる。
• プロセスの依存関係を分析する： 他のプロセスやシステムに依存しているプロセスを特定する。そのような相互依存プロセスを自動化することで、全体的なワークフローの効率化や、連携の向上が実現する。
• ROI の可能性を評価する： 特定のプロセスを自動化することによる潜在的な ROI（投資収益率）を評価し、自動化が大幅なコスト削減や収益拡大につながるビジネスプロセスを探す。

例１：プロジェクト管理における自動化

プロジェクト管理は、どのような組織にとっても重要な機能であり、その特定の側面が自動化されることで、大きな利益を得ることができます。ここでは、プロジェクト管理における業務自動化の実例をいくつか見ていきましょう：

• タスクの割り当ておよび追跡： チームメンバーへのタスク割り当てと進捗管理を自動化することで時間と労力が大幅に削減され、ワークフローの自動化を活用することで、組織は効率的なリソースを確実に活用できる。
• レポート作成および分析： プロジェクトのレポートの作成やデータ分析は、手作業では時間がかかり、ミスが発生しやすいプロセスである。このような作業を自動化することで、リアルタイムのインサイトとメトリクスの把握ができるようになり、それによってより良い意思決定とタイムリーな介入が実現する。
• 連絡および連携：連絡と連携のプロセスが自動化されることで、プロジェクトチームの連携が上がる。プロジェクト管理ソフトウェアやインスタントメッセージングプラットフォームなどのツールで、通知、リマインダー、ドキュメント共有が自動化され、それによってシームレスな連絡および連携が実現する。

この自動化のための UI の例については、UXPin Merge でレスポンシブダッシュボードを構築する方法のチュートリアルをこちらからご覧ください。

例２：ヘルプデスクにおける自動化

カスタマーサポートやヘルプデスク業務は、自動化によって大きなメリットを得ることができます。オペレーション自動化によってヘルプデスク業務がどのように変わるか、以下の例で見てみましょう：

• チケット管理： チケットの作成、ルーティング、エスカレーションを自動化することで、応答時間と顧客満足度が大幅に上がる。また、ヘルプデスクの自動化ツールを活用することで、事前に定められた基準に基づいてチケットが適切なエージェントに割り当てられ、それによって手作業による介入が軽減される。
• KB（知識ベース）管理：最新の KB の維持は、効率的なカスタマーサポートと迅速な顧客導入に不可欠であり、記事の更新や関連するソリューションの検索など、KB の管理を自動化することで、時間が節約され、顧客に提供する情報の精度が上がる。
• セルフサービス・オプション： チャットボットなどのセルフサービス・オプションを自動化することで、顧客にすぐにサポートを提供することができる。この自動化されたシステムで、一般的な問い合わせの対応や、適切な情報の提供ができ、それによって、サポート担当者はより複雑な問題にもっと対応できるようになる。

例３：IT 運営

IT サービスはビジネスの運営をサポートする上で重要な役割を担っており、自動化は ITプロセスに革命をもたらします。以下で、IT サービスにおけるオペレーション自動化の例を見てみましょう：

• インシデント管理： インシデント管理のプロセスが自動化されることで、レスポンスタイムの改善や、ダウンタイムの最小化が実現できる。IT サービス管理ツールを活用することで、運用チームはインシデントチケットの作成、ルーティング、解決を自動化し、それによって効率的なインシデント解決ができるようになる。
• 変更管理：変更管理プロセスが自動化されることで、エラーのリスク低減およびコンプライアンスの確保ができる。変更管理ツールを使用することで、組織は変更承認、通知、文書化の自動化ができ、それによって変更管理プロセス全体が効率化される。
• アセット管理：アセット（資産）管理プロセスが自動化されることで、IT アセットの可視性と管理性が強化される。アセット管理ツールを活用することで、運用チームはアセットの発見、追跡、ライフサイクル管理を自動化でき、それによってリソースの割り当ての改善や、在庫の不一致の最小化を実現できる。
• IT インフラストラクチャ：IT 運営の自動化により、DevOps 管理者は手動による介入を最小限に抑えながら、複雑なネットワークとシステムを効率的に管理できるようになる。

 オペレーション自動化 の導入の際に考慮すべきこと

オペレーション自動化の導入には、慎重な計画と検討が求められます。以下に、留意すべき主な検討事項を挙げましょう：

• プロセスの最適化： プロセスを自動化する前に、効率性を最大限確保するためにプロセスを最適化することが非常に重要であり、改善点の特定、冗長性の排除、ワークフローの効率化をすべきである。
• 変更管理： 自動化ソリューションの導入には、ワークフロー、役割、責任の変更が求められる場合があることから、自動化のメリットを伝え、従業員へのオンボーディングを実施すべきである。
• データのセキュリティとプライバシー：自動化には機密データの取り扱いが伴うため、データの暗号化、アクセス制御、定期的な監査など、機密情報を保護するための強固なセキュリティ対策を確実に実施することが重要である。
• 継続的な改善： 自動化は１回こっきりの取り組みではなく、継続的なプロセスであり、自動化されたプロセスの定期的な見直や、分析によって、改善点の特定やパフォーマンスの最適化をすべきである。

 オペレーション自動化 のベストプラクティス

オペレーション自動化の導入を成功させるために、以下のベストプラクティスを考えてみましょう：

• 小規模で始める：明確に定められた小規模なプロセスを自動化することから始めて自信を付け、自動化の利点を示す。小規模から始めることで、規模を拡大する前のトラブルシューティングや調整がしやすくなる。
• ステークホルダーと協力する： 従業員、マネージャー、IT チームなど、関係するすべてのステークホルダーを自動化の初期段階に参加させる。彼らの意見やフィードバックで、貴重なインサイトが得られ、スムーズな導入が保証される。
• 導入前にテストする： 新しいソリューションを導入する前に、構築するものが理にかなっているかどうかをテストする。提案されたソリューションをテストし、従業員が直感的でユーザーにとって使いやすいものであることを確認する。また、ソリューションが正しいかどうかを確認するには、UXPin Merge のようなツールを使って機能的なプロトタイプを作成する。
• 成功度を測って追跡する： 自動化の成功具合を測るための KPI（主要業績評価指標）を確立する。自動化が効率性、生産性、顧客満足度に与える影響を定期的に監視して分析する。そしてそのインサイトを活用して、データ主導の意思決定を行い、自動化されたプロセスをさらに最適化する。
• 常に最新情報を把握する： 最新の自動化技術とトレンドを常に把握する。新しいツールやソリューションを定期的に評価し、自動化イニシアチブを最新の状態に保ち、業界のベストプラクティスに沿うようにしておく。

 オペレーション自動化 を導入しよう

自動化を導入することで、組織は業務の効率化や、効率性の改善、顧客満足度の向上ができるようになり、プロジェクト管理、ヘルプデスク、ITサービスにおけるオペレーション自動化の実例は、自動化の変革力を実証しています。

業務のどの分野を自動化したいですか？UXPin Mergeを使ってツール・製品のプロトタイプを作成してみませんか？

ドラッグ＆ドロップの UI ビルダーである UXPin Mergeで、デベロッパーはデザイナーの手を借りずに直感的で美しいUI を難なくデザインできます。UXPin Mergeをぜひお試しください。

The post 【事例付き】 オペレーション自動化 とは appeared first on Studio by UXPin.

 国際化は、スタートアップ企業やグローバルな展開を目指す企業にとって非常に重要です。

 国際化と地域化は、翻訳されたテキストや通貨の変更にとどまりません。ユーザー、その文化、環境に適した体験をデザインすることで、グローバル市場での普及と成長に必要な信頼が生まれるのです。

加速とテストは、グローバル市場に向けたポジティブなUX（ユーザー体験）の提供に必須です。

 国際化 とは

 国際化（またはGoogleの言う グローバリゼーション ）とは、言語、地域、文化の適応を可能にするデジタル製品のデザインと開発のことです。この柔軟性によって、企業は製品の統合性とUXを維持しながら、製品を適合させ、新しい市場に参入することができます。

 国際化の簡単な例としては、言語や通貨の選択項目があります ー特定の言語や通貨ではなく、それを可能にするUIデザインやプログラミングのことです。

たとえばCuber Shopify Themeは、ストアの国際化デザインにドロップダウンを使っており、Shopifyのストアオーナーはこのような国際化機能を使って、たとえば、米国ベースのストアがメキシコベースの国境オーディエンスに「メキシコ通貨に」 （ペソ）」と「スペイン語」を提供するというように、さまざまな国のためにECストアを 地域化することができます。

このeコマースの例から、地域化の話に移りましょう。  

地域化 とは

  地域化 とは、翻訳、通貨、文化的な変化など、特定の市場ニーズに合わせて製品を適合させるプロセスのことです。

地域化 は、ただ言語や通貨を変えるだけでなく、適切で親近感のあるUXの提供を目的としています。  

例えば、ニュージーランドで１２月は夏なので、クリスマスに雪が降ることはありません。そうなると、ニュージーランド人にとって「１２月に雪が降って暖をとる」というのは、カナダ人みたいに意味をなさないでしょう。

また、デザイナーは、英語のような「左から右への言語（LTR）」と、アラビア語やヘブライ語のような「右から左への言語（RTL）」など、ネイティブ言語のマークアップや構造に合わせてUI（ユーザーインターフェース）を適合させるのも必要です。

方法要件および相続

  製品チームは、さまざまな地域のトラフィックや、コンテンツやユーザー データに対する法律の影響も考慮しなければいけません。のデータプライバシー法は、製品やウェブサイトがユーザー情報を収集、保存、共有する方法を規定するものです。  

デザイナーは、このような地域の顧客に「Cookie ポリシー」を通知し、Stack Overflowのこの例のようにパラメータをオプトアウトできるようにしなければいけません。

国際化とアクセシビリティ対応

国際化は、アクセシビリティやインクルーシブデザイン、地域化可能な製品作りには不可欠であり、W3Cは、 i18n （「国際化」の業界標準の略語）の概要と、グローバルなオーディエンスのために製品をより含むする方法を提供しています。

一般的なソースのコードベース

製品開発者は、国際化とプログラミングのためにUnicodeを使わないといけません。ちなみにUnicodeは、デジタル製品に、あらゆる言語でコンテンツを翻訳し提供するための基盤を提供するものです。

また、さまざまな言語構造やマークアップに対応するために、エンジニアは適切なメタデータの考慮が必要です。

文字の向き

右から左への言語は、１行のテキストの中で方向が浮かぶことが多いため、デジタル製品のデザインにとっては複雑です。表示しています。

デザイナーはエンジニアと協力して、このような方向性のニュアンスを正しく表現しなければいけません。

名前と住所

  世界のさまざまな地域から来たユーザーにとって、書式はしばしば混乱を引き起こす。 たとえば、ヨーロッパの一部の国では、住所を書くときに「通りの名前」から「番地」とが、アメリカでは、番地になります先です。

また、国によっては郵便番号がないため、この項目を必須項目にしてしまうと、そのようなユーザーにとってイライラが募るものとなってしまいます。

デザイナーは、名前の長さと構造にも考慮が必要です。文化によっては、名字が先で名前が後になる場合もありますからね。また、人の名前にはいくつかの単語がある場合があります、このようなデータはどのように入力しますか？

タイムゾーン、通貨、日付

  日付の書式は、多くの混乱とフラストレーションを引き起こす可能性があります。 例えば、ユーザーは『10/02/2022』を次のように解釈することができます：

• アメリカでは『２０２２年１０月２日』
• ヨーロッパでは『２０２２年２月１０日』

  このような混乱をもたらすには、「2022年10月2日」のように「月」を数字にしないで「日と年」だけを数字にして、誰もが読めるようにするといいでしょう。がフォーム上でこういったフィールドを収集することもできるので、ユーザーは正しい日付を入力し、データベースがそれを正しく読み込んで保存できるようになります。

また、製品に「時間」が使われる場合、タイムゾーンやサマータイムを考慮し、正しい時間形式をユーザーに提示することが重要です。

「通貨」は、デザイン上のもう一つです。記号が来ます。

文化的な規範と期待

  新しい市場に参入する際、UXチームは、下調べが必要であり、おそらく現地のUXデザイナーを雇うことになるでしょう。

例えば、エジプトでは親指を立てることはいい意味で使われますが、中東やバングラデシュでは軽蔑的な表現になります。使うと、このような地域のユーザーからはややこしい評価を受けるかもしれません。

ユーザーと文化の調査は、特にUXチームがその言語を話さない場合、優先事項でないといけませんん。

さらに詳しく読む：W3Cは、アメリカ、ヨーロッパ、アフリカ、中東、極東、東南アジアなど、地域の国際化に関するグループのリストを提供しています。

 国際化 と 地域化 のベストプラクティス

1. 比喩や文化的な引用を引用する

  どの国や文化にも比喩や引用がありますが、世界規模のオーディエンスには通じないと多くの場合、場合によってはバングラデシュの親指立てのように不快感を与えてしまうこともあります。

また、デザイナーは「インテリジェンス」文化的引用ではなく、説明的な名称を使わないといけません。なるでしょう。

2. 国際的に通用するフォームをデザインする

  フォームのフィールドラベル、特にアドレスは、混乱を引き起こす可能性があります。デザイナーには、国際的な利用者に対応したフォームのデザインが必須です。

例、貨物の国では『郵便番号』の代わりに『郵便番号』を使用しています。フォームのラベルやフィールドのサイズに国際的なアプローチをすることで、よりグローバルに対応できるフォームになるのです。

さらに読む  

• Web フォーム設計のベスト プラクティス
• フォームの国際化テクニック
• Web フォームの国際住所フィールド

3.翻訳に対応したUIをデザインする

  デザイナーは、単一言語に対応したUIデザインを避けないといけません。 デザイナーのジョン・サイトウ氏は「例えば『New！』というラベルを思い浮かべてみてください。』と、国際化に関するMediumの記事で指摘しています。

そこで彼は、Googleシートを作成し、Googleの機能を使って多言語を翻訳し、文字数を計算することを勧めています。

標準的なCTA（Call To Action）である「サインアップ」を、１０種類の言語で比較しました。『サインアップ』はスペースを含めて７文字ですが、ほとんどの言語は１０文字以上あるため、デザイナーが十分なスペースを確保しないと、問題が発生する可能性があります。

4.実際のコピーでダウンロードを作成する

製品を新しい言語に対応させる場合、すべてのUI上のコンテンツを最終製品に表示されるように翻訳しましょう。

翻訳で見られたように、英語版よりも長い単語がある場合、UIの幅がそもそもに必要になります。

UI要素に十分なスペースがない場合、テキストは変更されます。そうなるとプロの仕事に見えず、他の要件を押してしまい、ユーザービリティの問題を引き起こす可能性があります。

5. 画像にテキストを添付しない

ジョン・サイトウ氏が推奨するもう一つの方法は、『画像にテキストをアップロードしない』です。

また、画像にテキストを入力してしまうと、視覚障害者やスクリーンリーダーを使うユーザーには使えなくなってしまいます。

テキストの省略は良い方法ですが、CSSとJavascriptが追加されるため、デザイナーはこの方法の控えめな使用が必須です。

6. 親近感のあるコンテンツを使う

特に画像や動画のコンテンツを使う場合は、文化的な親近感を持てるようにしましょう。 ユーザーは、自分の国や地域の誰かが、自分たちのために特別に製品をデザインしてくれたように感じるはずです。

例、GoogleニュースやAppleニュースのアプリには、位置情報を利用して、関連性の高い地域化されたストーリーが表示されており、この地域化は、アメリカ人向けのニューヨークの写真を、ケニアのユーザー向けのナイロビに変更するような場合もあります。

7. タイポグラフィを国際化する

UsabilityGeekに、言語がタイポグラフィに与えられた影響について考察したヨナ・ギダレッツ氏の対応記事があります。北京語、韓国語、日本語などのアジアの言語には複雑な文字があり、太字の書体ではうまく表現できません。

また、このような言語は複数文字の英単語を1文字で表現するため、読みやすさのために大きなフォントが必要となり、最終的にUI要素や画面全体が変わってしまいます。  

8. 数値フォーマットと削除

数字のフォーマットやキーボード文字は、言語や地域によって異なり、マイクロソフトのグローバル化に対応した数値フォーマットでは、「マイナス５２０７」を以下の４種類の方法で表示するようなことが実証されています：

• • -527

• • 527-

• • (527)

• • [527]

また、日付と数字のキーボード文字も人によって使い方が異なります。

• • 2022 年 10 月 2 日

• • 10.02.2022

• • 2022 年 10 月 2 日

アメリカではコンマ（,）で数千を使いますが、ドイツではピリオド（.）を使います。

これらは細かいことには思えないかもしれませんが、ユーザービリティに重大な影響を及ぼす可能性があります。このようなニュアンスを理解することで、製品チームは潜在的な問題を回避することができるのです。

UXPinによる 国際化 された製品デザイン

  デジタル製品のデザインは難しいものです。

UXPinのデザインシステムを使えば、製品チームは言語ごとに複数のデザインシステムを作成し、アプリケーションとテストを効率化することができます。に合うように順序を編集しましょう。

各デザインシステムには、ローカルに特化したコンポーネント、セット、タイポグラフィー、ドキュメントが用意されていており、デザイナーは地域化されたファイルを作成してテストすることができます。

世界最先端のUXデザインツールにより、複数の市場に対する対抗とテストという時間のかかるプロセスを回避することができ、UXPinを使えば、国際的な競争力を持つ対応製品をより迅速に構築するぜひ今すぐ無料トライアルにお申し込みください。

The post 国際化と地域化とは？ アプリデザインにおける主な違い appeared first on Studio by UXPin.

80%のユーザーが、アプリの使い方がわからなかったら削除していることをご存知ですか？  

カスタマーサポートへの連絡も、説明書を調べることもありません。  

シンプルにそのアプリを削除して「次」に行くのです。  

これは厳しい統計ですが、ユーザーのオンボーディング体験がいかに重要であるかが浮き彫りになっています。もし、製品やサービスを最大限にいかす方法をユーザーにきちんと伝えることができなければ、ユーザーは他に行ってしまということです。  

では、どのように対策すればいいのでしょうか？本記事では、UXオンボーディングとは何か、そしてそれを正しく行うことが重要な理由を見ていきましょう。また、製品の優れたユーザーオンボーディング体験を実現するための6つのヒントについてもご紹介します。  

  オンボーディング・ユーザー・ジャーニーのデザインのアイデアがうまくいくか見てみませんか？UXPinを使って、UXオンボーディングのインタラクティブなプロトタイプを作成し、それに対するユーザーの反応を確認することができます。アイデアを繰り返し、デベロッパーに伝え、より良いオンボーディングフローを堪能しましょう。作業を高速化するプロトタイピングツールをぜひお試しください。  

オンボーディングUXとは

  オンボーディングUXは、新しいユーザーに取説など色々と教えて、彼らが製品に対していい印象を持つような方法で製品を紹介し、最初のインタラクションからうまくいくようにお手伝いするプロセスです。  

技術的には、サインアッププロセスの後の一連の流れで、通常はアプリ内の画面やコンテクスト上のきっかけとして、ユーザーを最も重要な製品機能へと導きます。このような製品に関する案内で、製品の価値が強調され、可能な限り最も魅力的で迅速な方法で行われます。  

新しいアプリをダウンロードしたとしましょう。  

UXに焦点を当てた「いいオンボーディングフロー」は、アプリの各主要機能を案内するものであり、すべてがどのように機能し、その機能をどのように使ったら生活や作業が楽になるかが一通り説明されています。

一方、特に複雑な製品の場合、オンボーディングがうまくいかなければ、深みにはまってしまいます。結局自分で何でもしないといけなくなり、そのようなアプリの体験でイライラして、すぐに投げ出してしまうことになるでしょう。  

このことを頭に入れて、全ては「派手なビデオチュートリアルやポップアップの取扱説明書」よりも「効果的なオンボーディングプロセス」であることを理解することが重要です。つまり、製品に悪いイメージを与える可能性のあるミスを減らし、導入プロセス全体を円滑にしましょうということなのです。  

ユーザーへのオンボーディングフローの構築が重要な理由

  それに答えるには、ユーザーの立場に立って考えてみる必要があります。初めて製品を使う人は、以下のような一部あるいは全部を感じているかもしれません：  

• 不安
• 恐怖
• 圧倒
• 興奮
• 好奇心

  あなたの仕事は、彼らが自信を持って製品を使いこなし、理解し、各ステップでサポートされていると感じられるようなオンボーディング体験をデザインすることです。  

初使用で確実にこれがあるようにしましょう。さらに、このプロセスが不可欠である理由を、いくつか挙げてみましょう。  

第一印象は一度きり

Ipsosの調査によると、我々が「第一印象」と呼ぶものの背景には、「関連性」「差別化」「支払い価格」の3つの要素があることがわかりました。

そのため、オンボーディングフローは、まず「ユーザーのニーズ」、「目標」、「課題」に関連していることの証明に重点を置く必要があります。2つ目は、自社の独自性を示すこと、つまり、競合他社よりも優れている点の説明です。3つ目は、主観的な側面です。自分の目で見てもらった上で、その製品が支払った価格に見合ったものであるかどうかを判断するのは、ユーザーなのです。  

ユーザーがアプリを使いこなすためのナビゲーション

  ユーザーが確実にアプリを使いこなせるようにするのが、プロダクトデザイナーの役割です。情報アーキテクチャが複雑で、機能が多ければ多いほど、効果的なオンボーディングシークエンスの構築が重要になります。  

ここで、ユーザビリティテストを参照してみましょう。ユーザーテストでは、【「ホームページ」から「アカウント設定」に移動し、請求書の詳細を変更する」】や【原材料を「アメリカ式軽量カップ」から「グラム」に変更するオプションを探す】といったタスクがあることに注目してください。デザイナーは、新しいユーザーが簡単にプラットフォームに馴染めるようにしたいので、このような質問は重要です。そこで、ユーザーがA地点からB地点までどのように移動できるかを示すオンボーディングフローを作成することが重要であり、そうすることで、混乱やユーザーのイライラを防ぐことができるのです。  

アプリの価値を明確に伝える

  逆説のように思えるかもしれませんが、アプリやプラットフォームでできることが多ければ多いほど、圧倒されるユーザーが一定数出るリスクは上がります。これは、アプリが「シンプルかつ提供するコア機能は一つしかしてはいけない」ということではなく、オンボーディングプロセスによって、ユーザーが必要なものを簡単に見つけて目的を達成できるようにすることが重要だということです。  

例えば、生産性が上がるツールを10種類以上提供しているとして、新規ユーザーがタイム追跡機能だけを目的にサインアップしたとします。ログインすればそれをすぐに使えるはずなのに、目的の機能以外の、（少なくとも今は）不要なモジュールにばかり気を取られてしまうかもしれません。  

効果的なUXオンボーディングにより、ユーザーを適切なモジュールに素早く誘導すると同時に、提供されているもの全てからより多くの価値を得られるように優しく教えてあげましょう。  

ユーザーのライフサイクルを延ばす

  Salesforceの調査によると、ユーザーのライフサイクルを突然終了させる要因が2つあることがわかりました。回答者の50％が、次のようなビジネスからは離れると認めています：  

• ニーズを先取りしていない
• 使い勝手の悪いアプリが提供されている

  この2つのリスクは、オンボーディング体験によって最小限に抑えることができます。いいオンボーディングフローは、まずアプリがユーザーにもたらす利益が紹介されており、次にアカウント作成後すぐに製品の案内が行われ、素晴らしい製品体験が提供されているのです。  

この2点以外にも、アプリのオンボーディングは、「定着率」と「解約の防止」という、製品チームが気にする2つのメトリクスを改善できます。  

ユーザーのエンゲージメントを全面的に高める

  先述のポイントをすべて考慮すると、いいオンボーディング体験で、ユーザーのエンゲージメントはよくなります。それによってターゲットユーザーへの価値提供やコンバージョン率の向上から、アプリの定着率向上やさらにはカスタマーサポートコストの削減まで、さまざまな利点が生まれます。オンボーディングプロセスに時間を費やすことは、あなたのお金の節約や儲けにつながるのです。  

要するに、これが製品の成功には必要なのです。  

オンボーディングエクスペリエンスのデザイン法

 オンボーディングUXの重要性は記憶に新しいところですが、次はオンボーディングフローそのものについて見ていきましょう。どのような媒体であれ、この6つのヒントは覚えておく必要があります。  

1. オンボーディング対象者の把握

  これはあらゆるビジネス上の意思決定において重要ですが、特にオンボーディングUXに関しては重要です。自身に以下のような質問を投げかけてみてください：

• 誰がターゲットユーザーか
• 彼らのニーズ、欲求、ペインポイントは何か
• 製品について彼らはどれくらい知っているか

その答えが、今後のデザインの判断材料になります。  

どこから答えを得たらいいのかわからない場合は、リサーチしましょう。  

すでに既存の製品がある場合は、売上や既存のユーザー層を調べてみましょう。顧客満足度調査やNPS調査をするといいですね。新製品を発売していて、まだユーザーデータがない場合は、市場調査を行いましょう。類似のビジネスやニッチな分野を調べるといいでしょう。  

このように、ターゲットユーザーをより深く知るための方法がたくさんありますよ！  

結局、一歩一歩進むしかないのです。ユーザーが何を求めているかを想定したオンボーディングフローを構築する前に、まずはどんな人がユーザーなのかを理解することから始めましょう。

オンボーディングのテンプレートは万能ではなく、ターゲット市場に合わせた調整が必要です。これについては、次で説明します。  

2. フローの個別化と最適化

  オンボーディングUXの個別化とは、メールやバーチャル案内にユーザーの名前を追加することではなく（それはそれでいいのですが）、集めたデータを使って、ユーザーにとって最も重要な機能にオンボーディングを集中させるということです。

「この体験は自分のためにデザインされたのだ」とユーザーに感じてもらうことが目標です。

しかも、それほど難しいことではありません。  

例えばSaaSビジネスであれば、新しいユーザーに対して、役割に応じて製品のさまざまな機能を見せることができます。例えば、営業、製品、マーケティングの専門家向けのCRM（顧客関係管理）ソフトウェアを作成したとして、新規ユーザーがマーケティングの専門家だったら、彼らの役割に最も関連する機能を案内しましょう。  

3. 画面の数を増やしすぎない

  最大の間違いの一つとして、多くの画面や情報でユーザーを圧倒してしまう点があります。  

UXオンボーディングの体験は、短く、かっこよくあるべきです。ユーザが使い始めるのに十分な情報を提供し、それ以上にはならないようにしましょう。  

ツールチップやカスタマーサポートの形で、後からいつでも詳しい情報を提供することができます。実際、オンボーディングフローは、ユーザーからのフィードバックに基づき、常に新しいコンテンツのテストや追加が必要です。  

「オンボーディング」という言葉からイメージすることはあるかもしれませんが、ユーザーオンボーディングは必ずしも新規ユーザーだけが対象ではなく、既存のユーザーも、新機能やアップデートについて簡単な説明を必要としています。なので、この2つのユーザーグループを常に念頭に置いて、UXオンボーディングフローをデザインしましょう。  

4. オンボーディングは製品に沿ったものでなければならない

  製品が「洗練された、最小限の、プロフェッショナルな」ものであるならば、オンボーディングもまた、「洗練された、最小限の、プロフェッショナルな」ものでなければならないのです。  

オンボーディングUXは、製品の延長であると考えましょう。使う色から声のトーンまで、すべてが製品の内容を反映したものでなければなりません。

オンボーディングプロセスは、初めて利用するユーザーに製品を使ってもらうことを目的とし、製品の価値を実感してもらい、ブランドを感じてもらい、最終的にはロイヤリティを高めてもらうものです。  

意味のない色や内容で気を散らしていては、実現は難しいでしょう。オンボーディングUXは、クリエイティブになるための時間ではなく、一貫性を保つための時間なのです。

オンボーディングフローは、確実に製品およびそのUXデザインに沿ったものにするようにしましょう。そうすることで、ユーザーはオンボーディングフローの早い段階で、アプリやサービスに慣れることができ、最小限の摩擦で製品の使用へ移行できます。  

このプロセスを正しく行うには、UXPinが理想的です。  

プロダクトデザイナーは、UXPinを使ってオンボーディングのアイデアをサッと実現し、オンボーディングシーケンスのプロトタイプを作り上げることができます。そのプロトタイプをチームで共有し、オンボーディングプロセスのどの段階でもフィードバックを集めることができます。  

複数のデザインイテレーションによって、各ステップや画面を簡単にテスト・評価でき、ユーザーにとって完璧なUXオンボーディング体験をデザインすることができます。

5. オンボーディングフローをとばすオプションをユーザーに与える

  アプリ内のオンボーディング体験を高く評価するユーザーがいる一方で、オンボーディング体験を完全にとばして、製品について自分なりの方法を見つけることを好むユーザーもいます。特に、デスクトップやモバイルのアプリがシンプルな情報アーキテクチャである場合や、一部のユーザーが技術に精通している場合は、このような傾向があります。
  例えば、Trelloのようなシンプルなプロジェクト管理ボードを考えてみましょう。ユーザーは過去に同じようなプラットフォームを使ったことがあり、Kanbanボードがどのように機能するかがわかっている可能性が高いです。また、そうでない場合でも、「ドラッグ＆ドロップ」の機能を使えば、一目瞭然です。  

そこで、オンボーディングシーケンスのどのステップにおいても、新規ユーザーがすぐに製品を使えるように、明確な「スキップ」ボタンを追加しましょう。  

6. 外部のオンボーディングシーケンスを作成する

  UXオンボーディング体験は、製品内だけで完結するものではありません。  

実際、アプリ内のフローと外部のチュートリアルをバランスよく組み合わせることで、例えば章ごとのの自動配信メールを何日かに分けて配信するとか、より効果的になることが多いのです。特にB2B業界の方であれば、実生活で使っている製品でこのような経験をされたことがあるのではないでしょうか。  

繰り返しになりますが、ユーザーに過剰な情報を与えるのではなく、正しい方向へ少し誘導することが大切です。

外部のオンボーディングUXシーケンスの素晴らしいところは、コンテンツやデザインにもっと柔軟性を持たせることができる点です。また、製品内では不可能な、ブランドの個性を表現する機会にもなります  

しかし、メールだけに限定されるとは思わないでください。  

また、新しいユーザーが製品についてより深く知ることができるよう、SNSへの投稿や、ブログ記事のシリーズの作成もいいかもしれません。  

ターゲットに最も近づける場所を考え、そこにターゲットを絞りましょう。

7. テキストを少なく、代わりに画像にする

  オンボーディングUXは、可能な限り視覚的であるべきです。言葉は確かに強力なツールですが、画面のスペースは限られていますし、ユーザーの注意力は低下しています。そこで、画像を活用してできるだけ多くの情報を伝えましょう。  

オンボーディングUXでは、画像、動画、アニメーションなどを駆使してユーザーを確実に誘導しましょう。たとえば、文章による説明の代わりに、ユーザーが請求書をダウンロードする方法を紹介する10秒間のビデオを録画するとかいいですね。

動画や画像をうまく使うことで、オンボーディングプロセスをがシンプルになり、結果として、より効果的なものになるのです。  

UXPinでオンボーディングフローをデザインしよう

  効果的なUXオンボーディング体験は、製品の成功に欠かせません。このガイドを読んで、何かひとつでも得るものがあれば、それは以下であってほしいと思います：  

オンボーディングプロセスは、価値を提供するものでなければならない。  

製品が夏の日のビーチだとしたら、オンボーディングはそこへ行くためのGPSの道案内です。シンプルにして最高の結果を得ましょう。  

UXPinがあればそれは簡単ですよ。

UXPinは、プロトタイプを作成し、それをチームの他のメンバーと簡単に共有することができる最先端のプロトタイピングツールです。ユーザーを魅了し、教育するようなオンボーディング体験を本気で作りたいなら、ぜひ今すぐUXPinをチェックしましょう。

The post 効果的なオンボーディングのための7つのヒント 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.

UXデザインは、ブランドの一貫性に大きな影響を与えます。製品の視覚的な美しさと使いやすさは、多くの場合、最初に気付かれるものであるため、ブランドに関連し、且つ強い第一印象を与えるものでなければなりません。

UXデザインにおけるブランドの一貫性は、ブランドロゴ、正しい色、フォントの使用にとどまらず、デザイナーは、企業イメージを反映し、製品に意味を持たせ、ターゲットにアピールするような体験を作り出すことを求められます。本記事では、UXデザインにおけるブランドの一貫性の重要性と、デザイナーがブランド価値の高い製品体験をどのように生み出すことができるかを探ります。

 UXPin の革新的な Mergeの技術で、一貫したUXをデザインしませんか？信頼できる唯一の情報源（Single source of truth）によって、どのようにリリースごとに一貫性のある、ブランド価値の高い製品体験が確実に提供されるかを、アクセス権をリクエストしてぜひご覧ください。

ブランドの一貫性とは

ブランドの一貫性とは、企業があらゆるタッチポイントにおいて、いかに一貫したメッセージを発信し、そのブランドの核となる価値に忠実であり続けるかということであり、その一貫性は、ビジュアルデザインやコピーライティングから、従業員の顧客対応や問題解決の方法まで、あらゆることに関連しています。

UXデザインにおけるブランドの一貫性

デザインやUXは、顧客が製品やサービスを利用する際に目にし、体験する要素であるため、ブランドの一貫性に不可欠です。優れたネーミング、スローガン、ロゴ、ブランドメッセージなどを持つ企業でも、ユーザー体験が悪ければ、そのブランドはダメになってしまいます。

ブランドの一貫性が重要な理由

ブランドで企業に人間のような特徴ができ、それにより顧客はより簡単に関係を築き、関われるようになります。ここでは、デザインの主導者とステークホルダーが、UXにおいてブランドの一貫性を優先させなければならない理由をいくつかご紹介します。

理由１：信頼関係の構築

もしあなたが誰かと出会い、あることを支持すると言われたとしても、彼らの行動がそれに矛盾していれば、あなたは彼らに疑いの目を向けるでしょう。このような矛盾が多くなると、その人を信じられなくなり、信頼を失うことになるのです。

ブランドについても同様、おそらくそれ以上でしょう。誰でも製品のタイポグラフィ、色、マイクロインタラクションに至るまで、一貫したものを見たいと思うものです。

TeamPasswordにおけるパスワードマネージャーの事例で、オペレーションディレクターのトニー・カッチョボ氏は、「この市場ではブランド が不可欠です。顧客は、我々に”ログイン記録”という機密情報を託しています。それが矛盾や時代遅れのデザインだと、我々がその情報を安全に保つのに十分な最新の技術を持っているかどうか、一部の顧客に疑問を抱かせる可能性があります。フロントエンドの開発は、バックエンドの性能に対する信頼と信用を築くのです。」と言っています。

理由2：ブランド認知の強化

ブランドの一貫性により、顧客はアプリストアやSNS、物理的な場所で、ビジネスやその他の製品を目にすることができます。そのいい例が、世界的なメガブランドであるVirginです。

Virginは、サービス、体験、物理的およびデジタル製品など、世界中のさまざまな産業で成功を収めており、Virginの忠実な顧客は、質の高いサービスの提供、遊び心、フレンドリーなカスタマーサービスを連想させるその特徴的な赤と白のブランドにいち早く目が行きます。

理由3：営業・マーケティング活動の活性化

Lucidpress（ルシドプレス）の調査によると、強力なブランドの一貫性は、収益に大きな影響を与える可能性があることがわかりました。最新のブランド一貫性の現状報告によると、一貫したブランディングで収益が33%増加することが分かったのです。これは、Lucidpressの2016年のレポートから10%増加していることが示すように、この傾向は拡大しているようです。

理由4：デザイン・開発の効率化

ブランディングやデザインの不整合は、デザインドリフト、バグ、手直し、技術的負債、プロジェクトの遅延などを引き起こします。このような不整合は、お粗末な顧客体験を招くだけでなく、ワークフローやデリバリーの非効率性を生み出し、組織の貴重なリソースを犠牲にすることになります。

こうしたデザイン・開発の非効率性を解消するため、企業はすべてのタッチポイントで一貫したユーザー体験を確実に提供できるようにすべく、ブランドのガイドラインを含むデザインシステムを構築するのです。

UXデザインでブランドの一貫性を高める方法

ブランドの一貫性の多くは、信頼を築くことにあり、企業の行動がメッセージと矛盾していれば、ブランドに対する信頼は失われます。ここでは、製品に一貫したブランドメッセージを伝えるための6つのヒントをご紹介します。

ブランドのスタイルガイドでデザインシステムを構築する

デザインシステムは、特に製品やワークフローの凝集性と一貫性の、導入する企業にとっての大きな問題をいくつか解決します。

包括的なデザインシステムには、組織のメッセージングとブランドアイデンティティを強化するためのブランドガイドラインが含まれているものです。デザインシステムは、すべてのプロジェクトが同じ原則とコンポーネントライブラリを使って同じデザイン言語を提供し、ユーザーに一貫したブランド体験を確実にもたらします。

ありきたりなデザインパターン

デザインパターンは、親しみやすさを生み出し、製品の学習曲線と人間の認知負荷を軽減します。こういったありきたりで認識可能なパターンは、製品に基礎的な一貫性を与え、ブランドを強化します。

さらに、製品が使いやすいと、顧客がその製品を使用したり、オススメしたりする可能性が高くなり、ブランドの信頼性や親和性が高まります。

デザインでブランドの声とトーンを表現する

製品のメッセージやコピーと同様に、カラーパレットやビジュアル要素も、ブランドの声やトーンを表現するものでなければなりませんが、このようなUI要素を定める一番いい方法は、潜在顧客でデザインをテストすることです。

UXデザインの会社であるDivamiは、UXリサーチに基づいてブランドの個性を開発することで、これを実現しています。「女性による女性のためのヘルスケアプラットフォーム」であるCeles Careをデザインしたとき、彼らはステレオタイプな「全部ピンク」とせずに女性らしいUIを作りたいと考えました。配色をテストすることで、同社は「ソフトでまろやかな」パレットを見つけ、最も重要なこととして、エンドユーザーがブランドのパーソナリティを連想するようにしました。

内外のブランド一貫性

内部的な一貫性とは、製品内のユーザーエクスペリエンスを指し、外部的な一貫性とは、一連の製品群を指します。製品ごとに多少の違いはあっても、デザイナーは製品間の一貫性を高いレベルで満たさなければなりません。

Appleはハードウェアとソフトウェアを幅広く展開していますが、このブランドは、物理的にもデジタル的にも、誰が作ったかわからないようなデザインになっています。Appleの製品間でのデザインの一貫性で、ブランドと顧客ロイヤルティは強化されるのです。

この一貫性は、組織がすべての製品をデザイン、開発、および製造する場合に管理しやすくなりますが、サードパーティの市場ではどうなるでしょうか?

Shopify、Salesforce、Atlassian などの製品は、コア製品を補完するためにサードパーティアプリに依存しています。アプリにはそれぞれ異なる特徴や機能がありますが、製品のデザインシステムにより、それぞれが確実にコア製品に適合しています。

例えば、アプリの開発者は、マーケットプレイス内のすべてのアプリがコンテンツ、デザイン、コンポーネント、パターンに関するShopifyのガイドライン（ブランディングを含む）を確実に満たすようにShopify Polarisに従わないといけません。これにより、たとえ誰かが異なるサプライヤーから複数のアプリを使用したとしても、それはShopifyの一製品のように感じられます。

Virginのデザイン一貫性

間隔、サイズ、レイアウト、色などの細かいUIデザインは、ブランドの一貫性に影響を及ぼすことがありますが、これらのUI要素がすべてのUIで一貫していれば、ユーザーはコンテンツや機能について考えたり検索したりすることなく、タスクの完了に集中することができます。

さらにデザイナーは、ブランドの声やトーンに沿った一貫したマイクロインタラクション、ページ遷移、通知を使用しなければなりません。このような課題の多くも、デザインシステムによって解決できるため、ユーザーインターフェースは常にブランドと一貫性を保つことができるのです。

透明性を確保する

透明性は、信頼とブランドの親和性を構築する上で重要な要素です。デザイナーは、ユーザーがどんなタスクでも完了できるように、たとえそれが配信停止や有料プランの解約などのビジネスに悪影響を与えるものであっても、機能をシンプルで透明性の高いものにしなければなりません。

製品は、アフィリエイトの紹介やスポンサー、第三者によるデータ共有など、金銭的なインセンティブがあることを必ずユーザーに知らせなければならず、デザイナーは、最終的に信頼とブランドを損なうクリックベイトや欺瞞的なリンクも避けなければなりません。

UXPin Mergeでブランドの一貫性を高めよう

Mergeを使用すると、コンポーネントライブラリをレポジトリからUXPinのデザインエディタに同期できるため、デザイナーはエンジニアと同じUI要素を使用することができ、レポジトリへの変更は自動的にUXPinに同期され、組織全体で信頼できる唯一の情報源（Single source of truth）を作成できます。

デザインシステムチームは、React props（またはStorybook統合のためのArgs）経由でコンポーネントを変更する自由をデザイナーに与えることができます。また、ブランドアセット、カラー、タイポグラフィー、マイクロインタラクションなど、チームが変更できない特定のプロパティをハードコードして制限することも可能です。

ブランド要素やコアバリューをデザインシステムに組み込むことで、製品チームは、小さいけれど重要なデザイン判断に悩まされることなく、新製品の開発に集中することができます。

また、エンジニアがすでにコンポーネントのコピーをレポジトリで持っているため、Mergeはデザインのハンドオフプロセスの効率化も実現します。さらに、UXPinは各コンポーネントのプロップに対してJSXコードをレンダリングします。それにより、エンジニアはライブラリからコンポーネントをコピー＆ペーストし、UXPinから変更を加えるだけで、フロントエンドの開発を始められるのです。

The post ブランドの一貫性：高める方法をデザインでチェック appeared first on Studio by UXPin.

なぜTwitterはユーザーの心をつかむのでしょうか。Amazonの何が私たちを魅了し続けるのでしょうか。

モバイルアプリの素晴らしいデザインは、突然生まれるものではありません。最初のワクワクするようなひらめきだったら突然パーンと生まれるかもしれませんが、それをユーザーに愛される具体的な製品にするには、強力なモバイルアプリのデザイン戦略が必要なのです。 アプリを流行らせたいのであれば、既存の戦略に加えるべき「ベストプラクティス」があります。

もしそのベストプラクティスをすでにいくつか実践しているのであれば、どこに改善点があるか検討してみるのもいいかもしれません。

本記事でご紹介する7つのベストプラクティスはデザインプロセスの中核であり、後付けでもなければ、あればいいというものでもないので、アプリのデザイン戦略に最初から確実に組み込みましょう。そうすることで、最もうまくいくアプリを構築できるのです。

アプリのデザイン戦略を立てる – ベストプラクティス7選

1. ターゲット層を徹底的に知る

いいモバイルアプリのデザインは、ユーザーを中心に展開されるものです。もし、デザインプロセスのどの要素も、「ユーザーにとって何が良いのか」と答えることができないのであれば、それは手直しや見直しが必要でしょう。 そして、ターゲットとなるユーザーを深く理解することが、ユーザー中心のアプリを作る唯一の方法です。彼らは誰なのか？彼らは何を望んでいるのか？なぜあなたの競合他社が好きなのか？どこが嫌なのか？プロファイリングするかのように全て調べましょう。 潜在的なユーザーについて知るには、以下の方法が使えます：

• 競合の分析：競合するアプリを特定し、調査に基づいた大量のメモと実用的なインサイト作りましょう。競争の激しい市場なので、上位3～5社の競合他社に限定するのが簡単かもしれません。ソフトウェアや製品のレビューサイトを利用して、ユーザーの好みを把握しましょう。 的確なアプリデザインのアイデアが生まれるはずです。
• SNS： SNSのプラットフォームには、競合がどのようにブランドを位置づけているかを知るための良いインサイトがあり、オーディエンスの好みや、彼らにとって何が本当に重要なのかが見えてきます。そして何より、ユーザーがライバルにどのように関わっているかがわかります。このようなインサイトで、自身のアプリデザイン戦略が完全に見直されるのです。
• アンケート、インタビュー、フォーカスグループ：ユーザーの口から直接きましょう。潜在的なユーザーの思考や感情を理解するには、直接話を聞く以外に方法はありません。アンケート、対面・電話インタビュー、フォーカス・グループなどの方法がありますが、例えば座談会では、人によっては回答に困り、自分の本心ではないけど尋ねる側が期待しているであろう回答を出す人もいるかもしれないので、色々な方法組み合わせることで、より多くの情報を得ることができます。

2. アプリのデザインアイデアを明確にする

あなたのアプリは何をするものですか？その回答は当たり障りのないものではなく、ぼやっとしたものでもなく、一言で済ませるようなものでもありません。アプリの目的は具体的でなければいけません。そうでなければ、アプリの開発はリソースを浪費することになるからです。 アプリのデザインアイデアを明確にすることで、関わる人全員が同じ方向に進むことができます。デザインチームと開発チームの各メンバーは、自分たちが何を作っているのか、そしてそのコンセプトの実現のために自分の役割はどうあるべきかがわかるのです。 基本的な要件として、以下を知っておく必要があります：

• このアプリのデザイン案の目的
• 誰に向けて作るのか
• どのように使われるのか
• 他のアプリではなくこのアプリを選ぶべき理由
• 必要なリソース
• 成功度の測定方法

3. 予算の把握

開発プロセスの初期段階で、モバイルアプリの開発予算を設定しましょう。これにより、製品にどんどん機能を追加していくことによる開発コストの急騰で、多くの場合失敗に終わる”技術”となる「ミッションクリープ」を避けることができます。また、予算があれば、追加する機能や、後日削除したり元に戻したりできる機能を決めることができます。

目標に基づいたマイルストーンで、プロジェクトのタイムラインと予算を整合させ、そうすることで予算が計画通りに進むようになります。 予算を立てると、開発する「もの」だけでなく、開発する「方法」も決定します。たとえば、スタートアップ企業であれば、まったく新しいチームをゼロから立ち上げるのがベストかもしれません。でなければ既存のチームを成長させましょう。それか、専門の技術パートナーを利用することもできます。このような企業は、経験豊富な外部の社内チームとして機能し、アプリデザインのアイデアを全面的にアウトソーシングすることで生じるリスクはありません。

4. ユーザーを活性化する（確実に定着させる）方法を学ぶ

ユーザーがアプリをダウンロードするずっと前に、あなたにはユーザーの維持についてのかなり良いアイディアが必要です。ユーザーを「活性化」して、毎日アプリを開き、他のアプリではなく、このアプリで時間を過ごすようにさせるためには、アプリの何が必要でしょうか。 その一端は、ターゲットとなるユーザーの理解と、モバイルアプリのデザインアイデアの確定に戻ります。

例えば、ユーザーが、出先でちょっと10分くらいのセッションで気軽にできるようなアプリを探しているとします。その場合、何時間もかけて商品を閲覧するユーザー向けに作られたアプリとはまったく違うデザイン、コンテンツ、体験になります。そうでなければ、ユーザーはおそらく二度と使わなくなるからです。

Amazonは、ユーザーを活性化するためのマスタークラスを提供しています。Amazonのアプリが常に人気を博しているのは、モバイルでの使用を前提に作られているからです。そして、まさにユーザーが望んでいること、つまり、さまざまな商品の購入が簡単にできるのです。

一方Twitterには、バスを待つような短時間で（あるいは、ドゥームスクロールに夢中になれば数時間でも）気軽にできるような、ちょっとしたコンテンツがあります。最近では、ゲームアプリの分野でWordleが同じようなことをしましたが、ユーザーはこのアプリでは足りなかったのです。

ユーザーを活性化させるその一点に集中しましょう。

5. KPIの合意

販売促進会議では、「成功とはどういうものか」という言葉をよく耳にすることでしょう。まぁいいですけど、この言葉は、現実の世界では誰も使おうと思わないような、ビジネスライクで格好悪い言葉です。しかし、それでも重要な会話であることに変わりはありません。アプリが目的を達成しているかどうかは、目的を設定しなければわかりませんよね。

このため、KPI（重要業績評価指標）の設定が必要です。KPIは、アプリデザインのアイデアを評価するメトリクスです。使用できるメトリクスはたくさんあり、解析すべきデータは山ほどあります。 すべてを見直すのではなく、ビジョンや目標に最も合致したメトリクスを、以下のような中からいくつか選びましょう：

• ダウンロード数：ユーザーは自身の製品をインストールするほど気に入っているか？ダウンロード数を押し上げるには何を変えるべきか。
• 月間アクティブユーザー数：あなたのユーザーベースは、定期的にチェックインしているか？そうでない場合、なぜそうなのか？
• 一日のアクティブユーザー：最も熱心なユーザーが毎日ログインする理由は何か？
• チャーン：何人のユーザーがアプリから離れたりアンインストールしたり放置しているか？何がユーザーを遠ざけているのか？
• セッション数と時間：何人のユーザーが、どれくらいの時間アプリを開き、アクティブにしているか？それはなぜか？

6. 適切なモバイルアプリデザインツールスタックの選択

コンセプトの実現は、大抵「言うは易く行うは難し」であり、多くの人にとって、これはデザインプロセスの中で非常にフラストレーションのたまる部分ですが、頭の中に浮かんでいる絵をを何とかしてチームに伝え、実行に移さなければなりません。 そのビジョンの実現には、適切なツールを適切なチームに配備することが重要です。

したがって、適切なツールスタックの選択が、アプリ設計戦略の鍵の部分となります。 デザイナーやデベロッパーには好みがあり、それは考慮されなければいけません（おそらく彼らはその使い道の達人であり、より良い製品を作るための自信、経験、知識を与えてくれるはずです）。

しかし、そのようなツールが他のソフトウェアとどの程度うまく連携できるかの考慮が必要です。例えば既存のソフトウェアとうまく統合できない場合、またはソフトウェア同士を連携させるのに時間がかかり、不便な回避策が必要な場合は、正しい選択とはいえないかもしれません。

  UXPinは、シームレスなワークフローを実現するツールのひとつで、デザイナーがLo-Fiのワイヤーフレームの作成からHi-Fiでピクセルパーフェクトなモバイルアプリケーションのプロトタイプの作成まで、最初から最後まで一貫してクリエイティブな作業を行えるようにするツールです。 この「コンセプト術」は、デベロッパーが実際に最終製品を構築する際に使用するものと同じ実在のコードコンポーネントを使用しています。

そのため、専門的なコーディングスキルがなくても、意図したとおりに動作するデザインを作成することができ、チーム間で延々と行き来するハンドオフなしで、発売後も作業を続けることができます。また、チームが安心してUXPinを使いこなせるように、Sketch、Slack、Jiraなどの人気の高いデザイン・開発ツールとも統合されています。

7. フィードバック＆改善のデザインプロセスの実施

モバイルアプリのデザインアイデアを開発する上で、「継続的な改善」はまさに流行語です。これは、プロセス全体の一部であると同時に、考え方の一部でもあります。「どうすればユーザーにとってより良いものになるのか」と常に問い続ける考え方です。 実際に重要な改善を継続的に行うには、フィードバックループを導入しましょう。

これは、「ユーザーはアプリをどのように使用し、何をし、何をしないのか？」等を見るための、ユーザーからのコメントやレビューと行動データ分析を組み合わせたものであるべきです。

インタビュー、フォーカスグループ、リサーチなど、原点に立ち返り、アプリのインターフェースと体験に対するユーザーの反応をよりよく理解することです。だからといって、ユーザーのコメントをすべて反映させる必要はありません。そもそもそんな時間はないでしょう？

その代わりに、実用的で貴重なデータを使って、ビジネス目標に沿った機能やアップデートを指示できるようなシステムを構築しましょう。これにより、デザインや開発プロセスが簡素化されるだけでなく、社内の主要なステークホルダーからの支持を得ることができるのです。

フィードバックループがしっかりしていれば、改良すべき点の継続的な確認ができます。 つまり、ユーザーを中心に据え、彼らのニーズを汲み取り、彼らの欲求や愛情を自社のビジネス目標に合致させ、それを現在進行中のアプリ開発の決定に使うのです。

UXPinでのアプリデザイン戦略の実行

成功する戦略は、このようなベストプラクティスをすべて活用し、モバイルアプリデザインのアイデアをすべてユーザーの元に届けます。そして、このコンセプトの素晴らしいところは、それぞれのコンセプトがいかにうまく連動しているかということです（ちょうど、あなたのツールスタックのようなものですね）。

アプリの戦略を具体的に定めるには、オーディエンスを熟知することが必要であり、予算によって、どこに焦点をあてて改良を加えるかが決まります。それによってそれぞれがうまく交わり、直感的で採用しやすいプロセスが作り出されるのです。 デザイナー、デベロッパー、ユーザーのために有意義な体験を生み出すツールであるUXPin をぜひお試しください。

The post アプリデザイン戦略に取り入れるべき – ベストプラクティス７選 – appeared first on Studio by UXPin.

ボタンは、最も一般的なUI要素の一つです。ボタンを介して、ユーザーはシステムと対話し、選択することによって行動を起こすことができます。ボタンは、フォーム、Webサイトのホームページ、ダイアログボックス、ツールバーなどで使用されます。

ボタンとリンクを区別することが重要です。
・ボタンは、ユーザーに行動してもらいたいとき（送信、キャンセル、削除）に使用します。
・リンクは、ユーザーを他のページ（会社概要、もっと読む）へ誘導するために使用します。

優れたボタンデザインは、ユーザーに取って欲しい行動を容易にさせ、コンバージョンを増加させることができます。この記事では、サイト訪問者がクリックしたくなるような魅力的なボタンを作成する方法について、完全なガイドを提供します。

ボタンの骨格（構造）

魅力的なボタンをデザインする方法を説明する前に、完璧なボタンの構造を調べる必要があります。
ボタンには、次のような要素があります。

• テキストラベル
• 背景
• ボーダー
• アイコン
  （テキストラベル以外の要素はすべて任意です。）

ボタンをデザインする際の注意点

ボタンらしくないボタン

ユーザーがボタンをクリックする前に、それがクリック可能なエレメントであることを知らせなければなりません。そのため、ユーザーにボタンであることがわかるようにしましょう。ユーザーは、UIエレメントがインタラクティブかどうかを判断するのに、これまでの経験や視覚的な手がかりを頼りにしています。

クールなボタンデザインを使いたくなるかもしれませんが、ユーザビリティを犠牲にしないようにしましょう。使い慣れたボタンデザインを使用し、ユーザーを混乱させたり、摩擦を生じさせたりしないようにしましょう。一般的なボタンデザインの例としては、以下のようなものがあります。

• 四角ボタン（塗りつぶし）
• 丸ボタン（塗りつぶし）
• 丸ボタン（塗りつぶし・影付き）
• アウトライン/ゴーストボタン

塗りつぶしや影をつけると、ボタンが押せるように見えるので、ユーザーが識別しやすくなります。また、ボタンの周りに十分な余白を設けることで、より目立たせることができます。

曖昧な、あるいは誤解を招くようなボタン

ボタンのラベルが曖昧で分かりにくいと、ユーザーが行動を起こすのを妨げたり、間違った行動を取らせたりする可能性があります。

ボタンが何をするものかを明確に説明し、ユーザーが行おうとしている行動を肯定するラベルを使用しましょう。また、ボタンの文脈を考慮し、それに応じてラベルを適応させることも重要です。
「はい」「いいえ」のラベルは避け、代わりに「削除」「キャンセル」のような説明的なラベルを使用しましょう。

ステートを視覚的に確認することができないボタン 

“システムは、合理的な時間内に適切なフィードバックを行うことで、常にユーザーに状況を知らせるべきである。”— Jakob Nielsen

優れたボタンは、ユーザーが操作するとその状態を変化させる必要があります。ユーザーは、自分のアクションがうまく登録されたかどうかを知るために、フィードバックを必要としています。フィードバックがないと、ユーザーは何度も行動してしまうかもしれません。フィードバックには、視覚的なものと音声によるものがあります。

ステートを持つボタン（以下参照）

• Primary state；インタラクティブですぐに使用できるもの
• Active ；ユーザーがボタンを押した
• Hoover；カーソルがインタラクティブなエレメントの上に置かれている
• Focused；キーボード仕様中にハイライトされる
• In progress；アクションの処理中
• Disabled；インタタクティブではない

統一性の無いボタン

“一貫性 “は最も強力なユーザビリティ原則の一つです。物事が常に同じように動作するとき、ユーザーは何が起こるか心配する必要はありません。”— Jakob Nielsen

サイト全体で同じサイズ、形、色のボタンを作成しましょう。デザインライブラリーとスタイルガイドを用意すると効果的です。一貫性のあるボタンデザインは、ユーザーが素早くアクションを起こし、エラーを回避するのに役立ちます。さらに、サイト全体の見た目と感覚も向上します。一貫性がないと、ユーザーは混乱し、ミスを犯す可能性が高くなります。

多すぎるボタン

“UXの経験則：選択肢が増えれば問題が増える”— Scott Belsky, Chief Product Officer

ボタンが多すぎると、ユーザーは行動しづらくなります。これは「選択のパラドックス」と呼ばれるものです。デザインにボタンを詰め込むのではなく、ユーザーに取って欲しい最も重要なアクションを考え、それに優先順位を付けましょう。

ボタンのヒエラルキーとアクション

ボタンの階層構造は、ユーザーがシステム上で最も重要なタスクを判断するのに有効なシグナルを提供します。ここでは、最も一般的なWebサイトのボタンデザインの階層とそれを使ってユーザーを誘導する方法を紹介します。

CTAs（Call To Actions)

CTAボタンは、ユーザーに取ってもらいたい最も重要なアクションを指示するものです。効果的なCTAボタンは、ユーザーの注意を引き、クリックさせることができます。CTAボタンは、大きく、コントラストが高く、ユーザーの視線に入る位置に配置する必要があります。

一般的なCTAには、UXPinのようなWebサイトのボタンがあり、「無料で参加する」というCTAボタンは、色のコントラストが強く、非常に目立ちます。

CTAボタン上の効果的なフレーズ 

CTAボタンが効果的であるためには、優れたデザインだけでなく、行動を促すようなフレーズ（ワードチョイス）も必要です。CTAボタン上のフレーズが悪いと、混乱を招き、エラーを引き起こし、ユーザーを離反させてしまいます。
ここでは、CTAを強化するため心理学に裏打ちされたフレーズのヒントをいくつか紹介します。

アクションワードを使用する；一般的なフレーズではなく動詞を使い、ユーザーの行動を促します。例えば、「はい、いいえ」ではなく、「保存、または破棄」と表示します。

正確な言葉を使う；解釈や誤解の余地を残してはいけません。例えば、”Delete “のほうがよいのに”Remove “を使うなど。

ユーザーの行動を肯定する言葉を使う；「投稿」ではなく「公開」のように、ユーザーがこれから行おうとしている行動を明示する言葉を使う。こうすることで不確実性を排除し、ユーザーに行動への確信を与えることができます。

命令形を使用する；ボタンの文字数を減らし、読みやすくします。
例えば、「Yes, create your account」ではなく、「Create your account」とするのです。

1次アクション

1次アクションは、「次のページに進む」、「アクションを完了する」、「ユーザージャーニーを開始する」など、ユーザーを次のポジティブなアクションに導くためのものです。このようなウェブボタンは、ユーザーにポジティブなアクションを促すために、より視覚的な重みを持たせ、より優位性を持たせる必要があります。

2次アクション

2次アクションは、1次アクションの代替となるアクションです。「戻る」ボタンや「キャンセル」ボタンなどがこれにあたります。これらのボタンは、エラーのリスクを低減し、積極的な1次アクションを促すために、視覚的に目立つようにする必要があります。

3次アクション

3次アクションは、ユーザーが行う必要のない重要なアクションです。このアクションには、「編集」、「新しい情報の追加」、「削除」が含まれます。一次アクションと三次アクションの違いは、そのアクションが実行される状況によって決まります。

3次アクションには、あまり目立たない小さなボタンを使用するのがよいでしょう。

ボタンのスタイル、色、デザインに関するベストプラクティス

ボタン形状

ウェブボタンの形状は、四角いボタンか、角が丸い四角いボタンを使用するのがベストプラクティスです。これらのボタンの形状は、ユーザーがボタンとして認識しやすいため推奨されています。

他にもボタンの形状はありますが、ユーザーによっては認識できない場合があるので、慎重に使用する必要があります。

• 丸いボタン；ボタンの縁を丸くしたものです。
• アウトライン/ゴーストボタン；塗りつぶしのないボタンです。2次アクションに最適です。
• フローティング・アクション・ボタン(FAB)；主要なアクションに使用されるボタンです。
• アイコンとラベルのボタン；アイコンとラベルの両方を持つボタンです。
• アイコンボタン；ラベルがないため、積み重ねやすいボタンです。ボタンの視認性を高めるために、パディングやサイジングを使用することができます。モバイルユーザーがタップできるように、ボタンが十分な大きさであることを確認しましょう。

カラーパレット

Webサイトのボタンデザインのカラーパレットを選ぶ際に、まず考慮すべきなのは色彩言語です。赤いボタンは停止、Webサイト用の緑のボタンは移動、青いボタンは詳細な情報を意味します。

また、ボタンの色を選ぶ際には、ブランドカラーやスタイルガイドも考慮しましょう。一貫したユーザーエクスペリエンスを実現するために、必ず統一性を保つようにしましょう。ボタンには十分なコントラストを持たせ、ウェブアクセシビリティガイドラインに適合していることを確認します。

ボタンの位置とページレイアウト

ボタンを配置する場所とページのレイアウトを決めるとき、コンテキストはとても重要です。CTAの場合、Webサイトボタンを中央に配置し、ユーザーの注意を引くためにページの高い位置に配置するのがベストです。

Webサイトの1次アクションボタンについては、最適な配置がまだわかっていません。オプションAは、1次アクションボタンが最初に来る場合であり、オプションBでは最後に来る場合です。これらは、ユーザーが何を最初に見ることを期待しているのかによって決まってくるでしょう。

最適なUIツールでボタンをデザイン

クリックされるボタンをデザインするためには、モックアップを美しく仕上げるツールが必要です。UXPinは、デザイン、プロトタイプ作成、チームとのコラボレーションを行うためのオールインワンプラットフォームを提供しています。デザインパターンライブラリで一貫したボタンデザインを維持し、コントラストチェッカーでボタンのアクセシビリティをチェックします。

興味のある方はぜひ14日間無料体験を！（クレジットカードの登録不要）

The post 基礎： ボタン作成ガイド – UIエレメント – appeared first on Studio by UXPin.