UIデザインツール は、デザイナーが Webサイトやモバイルアプリ、Webアプリなどのデジタル製品のUI（ユーザーインターフェース）デザインを作成、プロトタイプ化、改良するのに使用するツール（アプリ）のことです。これらは、ワイヤーフレームやプロトタイピングから、忠実度の高いモックアップやインタラクティブデザインの作成まで、デザインプロセスのさまざまな側面を促します。

ユーザーに優しく視覚的に魅力的なインターフェースを作成するのに必要な機能があるため、UI デザイナーにとって非常に重要です。そしてツールの選択は、多くの場合はプロジェクトの特定のニーズやチームの好み、ワークフローの統合によって変わってきます。そこで本記事で、最もよく使われいる UIデザインツールについて見ていきましょう。

エンドツーエンドの UIデザインツール である UXPin を使って、インタラクティブなプロトタイプを作成し、デザインのハンドオフを効率化しませんか。デザインシステムからドラッグ＆ドロップで作成できるビルディングブロックを使って、デザイン作業を効率化しましょう。UXPin をぜひ無料でお試しください。

UXPin

UXPinは強力なリアルタイムコラボレーション機能で知られる総合デザインツールであり、複数のユーザーが同じプロジェクトで同時に作業することができます。

UXPinはデザインシステムのサポートに優れていることから、デザイナーは再利用可能なコンポーネントやスタイルの効率的な作成や管理ができます。また、UXPin の高度なインタラクティブ機能により、条件ロジックや変数を使って忠実度の高いプロトタイプを作成できます。

UXPinには強力な機能が備わっている反面、ユーザーが使い始めるのに役立つ豊富なリソースとテンプレートが用意されていますが、習得はちょっと頑張らないといけません。

また、このツールでは、HTMLとCSSコードをコピーした詳細な仕様書によって、デザインのハンドオフプロセスがしやすくなり、ユーザビリティテストを通じてユーザーフィードバックを集めるための機能や、（テストツールである Fullstory との統合のような）統合機能が備わっています。

さらにこのツールには、MacアプリとWindowsアプリがありますが、クラウドでも動作します。

UXPin Merge

「信頼できる唯一の情報源（Single source of truth）」が要る場合、UXPinにはもう一つのソリューションである UXPin Mergeがあります。

UXPin Mergeは デザイナーとデベロッパーが同じコンポーネントで作業できるため、デザインプロセス全体の一貫性と正確性が保証されます。また、この機能は、連携やレスポンシブデザインに特に有効です。

また、ReactなどのGitレポジトリから直接コンポーネントを同期できるため、デザインシステムのサポートに優れています。これにより、UXPinで使われるデザインコンポーネントが最終製品で使われるものと完全に同じであることが保証されることから、一貫性が維持されて不一致のリスクが軽減されます。

Figma

Figmaは、リアルタイムで複数のユーザーが編集とコメントをできる優れたコラボレーション機能が高く評価されている、Webベースの製品デザインツールです。

プロジェクト間で簡単に更新できる共有ライブラリ、UIキット、デザイントークンを備えた強力なデザインシステムサポートがあります。

インタラクティブ機能においては、大抵のUI/UXデザインのニーズには十分ですが、他のツールほど高度ではありません。Figmaは、直感的で初心者にも使いやすく、ユーザーに優しいインターフェースや、レイアウトやユーザージャーニーなどのさまざまなテンプレートが提供されています。

Figmaは、デベロッパーがアクセスできる詳細な仕様とコードスニペットを通じてデザインのハンドオフをサポートし、デザインに対するユーザーフィードバックの直接収集を促します。実際のデータに対するネイティブサポートは限られていますが、このためのさまざまなプラグインはすぐに見つかります。

さらに、Figmaには「FigJam」と呼ばれるデジタルホワイトボードツールもあり、これはブレインストーミングに最適で、それでプロジェクトが始まる前に、チームメンバーやステークホルダーがお互いのデザインビジョンを共有することができます。

Axure

Axureは、高度なプロトタイピング機能で知られる強力なプロトタイピングツールであり、詳細なインタラクションと条件ロジックに対応しています。Figmaのようなツールほどシームレスではないかもしれませんが、共同作業が可能です。

Axureは再利用可能なウィジェットとスタイルでデザインシステムをサポートしますが、１番の強みはその詳細なプロトタイピング機能にあります。このツールにはデータ駆動型プロトタイプのための機能が含まれており、それで変数とデータセットを使って、包括的なデザインハンドオフのドキュメントを提供します。

Axureは習得が大変ですが、複雑でインタラクティブなプロトタイプを作成するための強力な機能があります。また、共有されたプロトタイプや注釈を通じたユーザーフィードバックの収集にも対応しており、非常にインタラクティブなデザインワークのための多用途な UI/UXツールとなっています。

Sketch

SketchはMacユーザーの間で人気のUIデザインソフトウェアで、UI/UX デザインに特化した強力なベクター編集ツール群があります。また、macOSユーザーに限定されますが、Sketch for Teams を通じてリアルタイムでの連携に対応しています。

Sketchはデザインシステムに秀でており、再利用可能なUIキットや更新が簡単な共有ライブラリを提供しています。プロトタイピング機能は基本的なものですが、プラグインでの強化が可能です。そして Sketch は、詳細なデザインハンドオフプロセスのための Zeplinのようなツールとうまく統合できます。

このツールはユーザーに優しく、多くのテンプレートやリソースがあるため、サッと気軽にデザインを始めることができます。また、Sketchは、様々なプラグインを通じて実データの追加に対応し、サードパーティツールを使ったユーザーフィードバックの収集を促します。

ちなみに 、Sketchは最も費用対効果の高い選択肢の一つで、価格は月額１０ドルからあります。

UIzard

UIzardは、低忠実度デザインおよび高忠実度デザインのデザインプロセスを効率化する、AI主導のデザイン機能で際立っています。

UIzardはAI主導のデザインシステムに重点を置いています。そのため、迅速なプロトタイピングには便利で、コラボレーション機能もありますが、Figmaのような定評のあるツールに見られるような高度な機能性や他の先進的なUIデザインツールでできるような豊富なカスタマイズ性はないかもしれません。

UIzardの再利用性機能は主にAIによって駆動され、デザインプロセスを効率化することができますが、より複雑な UI/UXデザインプロジェクトではさらなる改良が必要になるでしょう。

UIzardは本記事で紹介した他のツールと同じレベルの手動コントロールは提供されないかもしれませんが、基本的なフィードバック機能があり、AIを統合してインタラクティブな要素を作成してくれます。

Marvel

Marvelはシンプルで使いやすいことで知られており、デザインの反復をサッとするのに理想的な選択肢となっています。また、リアルタイムでの連携とコメントの機能があることから、チームはシームレスに共同作業を行うことができます。

Marvelは、再利用可能なコンポーネントとスタイルガイドを備えた基本的なデザインシステムに対応しており、簡単なプロジェクトに適しています。このツールには、シンプルなインタラクションには適しているインタラクティブなプロトタイピング機能がありますが、より複雑なデザインに必要な深みはないかもしれない。

Marvelは、仕様書とのデザインのハンドオフを促し、開発ツールと統合します。また、実データの基本的な統合に対応し、ユーザーテストとフィードバック収集機能を備えているため、速やかなデザインとプロトタイプのための充実したツールとなっています。

Justinmind

Justinmind は、条件やイベントによる高度なインタラクティブ性に対応する多機能なプロトタイピングツールであり、バージョン管理やコメントによる共同作業ができることから、アプリや Web デザインのプロジェクトに適しています。また、Justinmind には、再利用可能な UI 要素とテンプレートを備えたデザインシステム機能があり、それでデザインプロセスの効率が上がります。

このツールはデザインハンドオフのための詳細な仕様を提供し、JIRAのようなツールと統合します。また、動的なインタラクションのための実際のデータ統合に対応することから、より現実的な UX（ユーザーエクスペリエンス）デザインが実現します。

さらに、共有されたプロトタイプや注釈を通じてユーザーからのフィードバック収集も促すことから、詳細かつインタラクティブなデザイン作業のための包括的なツールとなっています。

InVision と Adobe XD について

InVision と Adobe XD は、どちらも UI/UXデザインコミュニティで広く使われているツールですが、より高度な機能と最新のデザインワークフローとの優れた統合を提供する他のツールとの激しい競争に直面していました。

InVisionはデザインコラボレーション分野で重要な役割を果たし、多くのデザインワークフローに不可欠なツールを提供してきましたが、２０２４年をもって、プロトタイプと DSM（デザインシステムマネージャー）などのデザインコラボレーションサービスが年内に終了することが発表されました。

InVisionはかつてデザイナーとデベロッパーの間の溝を埋めるツールを提供する先駆者の存在だったため、この決定は業界にとって大きな転換点となります。サービス終了の理由は、機能とユーザー普及率の面で InVision を上回った Figma などの他のツールとの競争が激化したためであり、その結果、InVision ではこれらのサービスに重点が置かれなくなり、本記事における２０２４年のおすすめツールのリストから外されることになります。

UI/UXデザイン分野のもう一つの主要ツールである Adobe XDも、２０２４年に終了します。Adobe は、Creative Cloud Suiteの他の製品に重点を置くため、Adobe XDを段階的に廃止することを決定しました。

Adobe XDは、他の Adobe 製品との強力な統合や包括的な機能セットにもかかわらず、競合他社で提供される革新的な機能やリアルタイムコラボレーション機能に追いつくのに悪戦苦闘してきました。その結果、Adobe XD は提供されなくなり、デザイナーはサポートと開発が継続されている他のツールに移行することになります。

どの UIデザインツール を試すか

本記事で見てきたツールの中では、価格的に言うとMarvel と Sketch が２０２４年の最も安価な選択肢であり、特にMarvel は無料価格帯のため利用しやすくなっています。また、Sketch は、手頃な価格でプロ仕様のツールを探している macOS ユーザーにとって今でも強力な候補となっているのではないでしょうか？Adobe XDとInVisionは似たような価格ではありますが、廃止の危機に直面しており、今後の利用に影響を与えるかもしれません。

企業チームにとって、UXPinとFigmaは、その強固なコラボレーション、デザインシステムのサポート、実際のデータやフィードバックの仕組みとの統合のしやすさから、最強の候補です。Axure は、高度なインタラクティブ性と詳細なプロトタイピングに優れていますが、上記２つのUIデザインツール と比べると、習得が難しく、シームレスなコラボレーションが少ないかもしれません。

見た目だけでなく、完全にコード化された UIデザインを構築しませんか。デザイナーとデベロッパーの連携がしやすくなるコードベースのエンドツーエンドのデザインツールである UXPin をぜひお試しください。

The post ２０２４年のおすすめ UIデザインツール appeared first on Studio by UXPin.

モバイルアプリの競争は熾烈で、何百万ものデジタル製品が世間の限りある注目を集めようと競い合っています。そして多くの製品開発チームにとって、アプリのエンゲージメントを上げるのは最優先事項であり、ユーザーを維持し楽しませる革新的な方法を常に模索しています。

UX デザイナーは、様々なデザインと心理テクニックを駆使して、アプリのユーザーを惹きつけるのに非常に重要な役割を担っています。また、プロトタイプとテストは、デザイナーがユーザビリティの問題や、より高いエンゲージメントにつながるビジネスチャンスを修正するのに不可欠です。

世界最先端のデザインツールで、デザインアイデアをテストしませんか。最終製品のような外観と機能を持つ没入型プロトタイプを作成しましょう。無料トライアルにサインアップして、UXPin の機能をぜひお試しください。

アプリの エンゲージメント が重要な理由

アプリのエンゲージメントは、収益、ブランドロイヤルティ、リテンション（維持）、そして最も重要な企業の評価など、他の多くの要素に影響を与えるため、ビジネス価値の指標として極めて重要です。

アプリのエンゲージメントが非常に重要な理由として、以下の４つが挙げられます：

• 収益：アプリが広告モデルであれ有料モデルであれ、大体はエンゲージメントが高ければ収益も高くなる。
• リテンション（維持）：エンゲージメントが高いということは、その製品がユーザーから日常生活において信頼されていることを示す良い兆候であることから、リテンションとCLV（顧客生涯価値）の向上につながる。
• ブランドとの相性：エンゲージメントの向上はブランドとの相性の向上につながり、NPS（ネットプロモータースコア）や CSAT（顧客満足度）といった主要なビジネス指標に影響を与える。このようなスコアが上がるということは、顧客が製品経験を（口コミのように）共有して、それが無料の宣伝になってくれるということになる。
• データと調査：エンゲージメントを上げることでデータ分析が充実し、それで製品チームはユーザーの行動をよりよく理解し、成長のためにそれを最適化することができる。

アプリのいいエンゲージメント率とは

いいアプリのエンゲージメント率は、製品、業界、ニッチ、市場、ユーザーなどの多くの要因によって決まり、リサーチャーは、UXベンチマークを使って、正しいアプリのエンゲージメント業界標準を計算して、製品のパフォーマンスに対してこれを測定します。

アプリのエンゲージメント率の計算式は単純です：

月間アクティブユーザー数 ➗ 総ユーザー数 ✖ １００

また、MAU（月次アクティブユーザー数）を DAU（日次アクティブユーザー）に置き換えることで、日次エンゲージメントについても同じ式を使うことができます。

アプリのエンゲージメント向上における UX チームの役割

UX デザイナーは、アプリのエンゲージメントとユーザーリテンションにおいて重要な役割を果たします。そして直感的な UI と、ユーザーがタスクを完了して効率的に問題を解決できるように設計された機能だと、楽しい体験が生み出され、エンゲージメントが上がります。

また、プロトタイプとテスト中に、デザイナーは障害物を特定し、ユーザーフローを効率化して、製品をより直感的で使いやすくすることができます。

UXデザイナーのためのアプリエンゲージメント指標

ここでは、UX デザイナーがパフォーマンスを測るのに使える KPI（主要業績評価指標）をいくつか挙げてみましょう：

• 維持率：アプリケーションを使い続けるユーザーの割合
• チャーン率：アプリケーションの使用を停止したユーザー数
• 平均セッション時間：ユーザーが１回のセッションでアプリを使用する平均時間 
• DAU（日次アクティブユーザー）：１暦日にアプリを開いたユーザー数
• MAU（月間アクティブユーザー数）：３０日間にアプリを開いたユーザー数
• スティッキネス：ユーザーがアプリに戻る頻度を示すラジオまたはパーセンテージ
• ユーザーエンゲージメント率：アプリ内で特定のアクションを完了したアクティブユーザーの数
• プッシュ通知の開封率：通知を開いたアプリユーザーの割合（全体および通知タイプ別）
• アプリレビュー：アプリストアや Trustpilot のようなプラットフォームでレビューを残すユーザーの割合

デザインチームは、デザインの決定がどのようにビジネス価値を生み出して ROI（投資対効果）をもたらすかを実証すべく、デザインプロジェクトの前後でこのようなアプリのエンゲージメント指標を測らないといけません。

UX デザイナーはアプリのエンゲージメント向上にどう貢献できるか？

段階的開示

段階的開示とは、１つのタスクやアクションを完了するのに最も重要な機能やオプションのみをユーザーに見せるデザインテクニックです。例えば、多くの ECストアでは、認知的な過負荷を最小限に抑えるために、商品説明やその他の情報がアコーディオンの後ろに隠されていることが多く、それでユーザーはその情報を見るか見ないかを選択することができます。

段階的開示によって、以下のようになることでアプリのエンゲージメントが上がります：

• 製品についての情報取得やナビゲーションがしやすくなる
• 重要度の低い機能がセカンドスクリーンに配置されることで、ユーザーがより早くタスクを完了できるようになる。
• ミスが減り、より楽しいユーザー体験が生み出される。

アプリのオンボーディングプロセスを効率化

ユーザーがオンボーディングプロセスで行き詰まっているようでは、アプリのエンゲージメントを見ても意味がありません。なのでデザイナーは、新しいユーザーができるだけ早く製品を使い始め、その利点を体験できるように、障害物を取り除くことを目指さないといけません。

デザイナーがアプリのオンボーディングを効率化する方法としては、以下が挙げれられます：

• Facebook、Google、LinkedIn などの広く使われている SNS のアカウントを使って、ユーザーがサインアップできるようにする。
• ユーザーが初めてログインする際に、簡単な製品紹介で機能を説明し、ドキュメントの確認作業を減らす。

• ユーザーが問題をサッと解決できるように、フォームフィールドに実用的なヘルパーテキストとエラーメッセージを用意する。

ゲーミフィケーションの導入

ゲーミフィケーションは、顧客エンゲージメントを上げるために実証された方法であり、多くの製品でバッジやポイントが使われていますが、エンゲージメントに対してユーザーが報酬を得られる微妙な方法もあります。

例えば Grammarly では、ユーザーの生産性、習得度、語彙力の他のユーザーとの比較が表示されている「週間ライティングアップデート（Your Weekly Writing Update）」というニュースレターが毎週送られます。

このニュースレターの素晴らしい点は、シンプルで、製品分析が使われているため、低コストで実装も簡単なことです。また、このアップデートはプレミアムユーザー向けのメールにのみ存在するため、Grammarly のUIに不要なデータが追加されることはありません。

個別化されたユーザー体験を作る

アプリのパーソナライゼーションで、ユーザーはデザイナーが自分のために特別に製品を作ってくれたように感じます。パーソナライゼーションは、UI に名前を追加するだけではありません。例えばブラウザのシークレット モードを使って YouTube にアクセスしたことがあれば、さまざまなおすすめが表示されるはずですが、そのほとんどは視聴する気のないものです。

YouTube やその他のSNSプラットフォームでは、パーソナライゼーションを使って、閲覧履歴に基づいたコンテンツがオススメされるので、同じ外観のホームページはありません。それでユーザーが興味を持つコンテンツや機能が提示されると、必要なものがすべて目の前に表示されるため、エンゲージメントが上がります。

パーソナライズされたアプリ体験を生み出すためのヒントを以下に３つ挙げましょう：

1. ユーザーが最近訪れた機能やコンテンツをホーム画面に表示すると、ユーザーは未完了のタスクを続けたり、作業中のプロジェクトを戻したりできる。
2. 閲覧履歴を使って、ユーザーが何をしたいかを予測する。たとえば、予算管理アプリでは、ユーザーが夜にアプリを開いたときに、その日の支出を追加するように促すといいかもしれない。
3. たとえば、ユーザーは新しいプロジェクトやタスクに合わせてプロジェクト管理ダッシュボードを定期的に再編成したいなどがあるかもしれないことから、ユーザーが UI のレイアウトとウィジェットをカスタマイズして、コンテンツの優先順位を付けたり整理したりできるようにする。

マイクロインタラクションを使って没入感のあるユーザー体験を作る

デザイナーはマイクロインタラクションやアニメーションを使って、ユーザーを惹きつけて楽しませます。たとえば、Instagram の投稿をダブルタップすると赤いハートが表示されるのですが、これは本当にやみつきになります!

マイクロインタラクションがアプリのエンゲージメントを上げる例には、以下のようなものが挙げられます：

• プログレスバーで進捗状況を表示し、ユーザーのタスク完了を促す。
• 未完了のタスク、アプリ内のメッセージ、またはユーザーの注意が必要なアイテムをユーザーに思い出させる便利なプッシュ通知。
• コンテンツを閲覧しながらユーザーの興味を維持する無限スクロールやスワイプ アニメーション。
• 短いお祝いアニメーションで、タスクを完了したユーザーに達成感がもたらされ、それでアプリの継続使用や次のタスクへの移行が促される。

希少性とFOMOを利用してユーザーを惹きつける

２０１９年にサービス開始されたソーシャルオーディオアプリ「Clubhouse」は、招待制のアプリでした。その際、各ユーザーが送信できる招待の数には限りがあり、参加希望者に希少性と FOMO（取り残される不安）がもたらされました。

この希少性により、ユーザーは他のソーシャル プラットフォーム上の友人やフォロワーに直接体験を語れるように最も人気のある会話に「参加」したいと思っていたことから、エンゲージメントを維持できました。

また、多くの出会い系アプリは、無料プランでユーザーが完了できる「いいね！」の数を制限しています。この希少性には以下の２つの効果があります：

1. 無料プランに留まりたいユーザーは、スワイプ回数を節約することに気を配るため、より積極的に利用し、それでセッションの長さと広告表示の機会が増える。
2. 「いいね！」アクションを制限することで、ユーザーが有料プランに登録する可能性が上がる。無料の「いいね！」がなくなった後に次のプロフィールで理想の相手を見たことがあるか。これは偶然ではない。

アプリのパフォーマンスを上げる

アプリケーションの読み込み待ちほどイライラするものはありません。ユーザーはすぐに興味をなくして製品を使うのをやめ、もっといいアプリパフォーマンスがある競合他社を探しに行きます。

通常、アプリのパフォーマンスを最適化するのに最もコントロールできるのはエンジニアですが、UX デザイナーが手助けできる方法が４つあります：

1. ファイルサイズと寸法を縮小してアセットファイルを最適化する
2. 読み込み時間を短縮するために、画面ごとのコンテンツを最小限にする。
3. 大きなシステムタスクのために、ユーザーの注意を一時的にそらすローディングインタラクションを作成する。
4. アニメーションは短くし、ユーザーのサポートだけに使用する。

UXPinでアプリのエンゲージメントを上げよう

UXPin は、デザイナーが最終製品のような忠実性と機能性を備えたプロトタイプを作成できるエンドツーエンドのデザインツールです。

このような完全インタラクティブなプロトタイプで、デザインチームは有意義で実用的なインサイトを得られ、アイデアの改善と反復、より多くの問題の解決、アプリのエンゲージメントのような貴重なビジネス機会の特定ができるようになります。また、デザイナーはブラウザでプロトタイプをテストしたり、UXPin Mirror（iOS & Android）を使ってモバイルアプリのエンゲージメントを最適化することができます。

UXPinの以下の４つの機能を使って、アプリのエンゲージメントをテストして改善するためのプロトタイプを作成しましょう：

• ステート：１つのコンポーネントに対して複数のステートを作成し、ドロップダウンメニュー、ステッパー、カルーセル、アコーディオンなどの複雑な UI パターンを構築する。
• インタラクション：トリガー、アクション、アニメーションを使って、没入感のあるプロトタイプ体験をデザインする。また、条件付きインタラクションを使って、ユーザーのアクションに反応する動的なインタラクションを作成することもできる。
• Variables（変数）：ユーザー入力からデータを集め、それをアプリケーションの別の場所で使う。デザイナーはその変数を使って、UI をパーソナライズして、実際のアプリ体験を提供することができる。
• Expression：フォーム検証、計算コンポーネント、動的エラー メッセージなどをデザインする。また、ステート、インタラクション、変数と組み合わせると、デザイナーはコードに匹敵する機能を作成できる。

UXPinでデザインプロセス中に多くの問題を解決してより多くの機会を特定することで、アプリの保持率を上げてより多くのユーザーを引き付けましょう。

無料トライアルにサインアップして、UXPin の高度なプロトタイピング機能をぜひご体験ください。

The post UXデザインでエンゲージメントを向上させる７つの方法 appeared first on Studio by UXPin.

” デザイン ”というのは面白い言葉です。会話の中でそれを口にすれば、正確な意味を付加することなく、付加価値を与えてくれます。

もしあなたが「あれが素晴らしいデザインだ」と聞いたら、その相手が何を言いたかったのか正確に分かるでしょうか？美しさについてでしょうか？機能性についてでしょうか？それとも両方でしょうか。

数ヶ月前、私はシリコンバレーで経験豊富な起業家を前にプレゼンをしていました。そのプレゼン中に私は「“I’m a designer”」と言いました。プレゼン後、60代後半のある男性が、「“I’m a designer as well. I used to design circuits”.（私もデザイナーです。以前は回路設計をしていました。）」と言ってきたのです。しかし、私はそのようなタイプのデザインに関しては専門では無かったため、共通の話題は見つかりませんでした。

デザインという言葉は、危険なほど曖昧な言葉です。また、「良いデザイン」はどんな製品にとっても「良いデザイン」かもしれないですし、一方で「悪いデザイン」はどんな製品にとっても「悪いデザイン」かも知れません。

それでは、本ブログの目的である”デザイン”を一般的に定義してみましょう！

UXPin Mergeを使って、共有のビジョンでチームを調整し、デザイン業務を拡張しませんか。詳細とアクセスリクエスト方法については、こちらのページをぜひご覧ください。

 デザイン とは ？

1. デザインの辞書的な定義

デザインとは、物体やシステムを構築するための計画や慣習の創作物の事です。（建築の設計図、エンジニアリングの図面、ビジネスプロセス、回路図、縫製パターンなど）

つまり、デザインは分野によって意味合いが異なるのです。

(出典：Cambridge Dictionary of American English)

2. デザインの語源

・デザイン(動詞での意味)：①＋②＋③の組み合わせ（ラテン語由来）

Design=「マークアウト、考案、選択、指定、任命」=de-「アウト」＋signature「印をつける」＋signum「印、記号」

※現在はdesignateに意味が付けられている。

・デザイン（名詞での意味）：①＋②＋③をミックス
①中フランス語のdesseign「目的、プロジェクト、設計」

②イタリア語のdisegno、disegnare「印をつける」

③ラテン語のdesignare「印をつける」

(出典: Etymology Dictionary)

3. デザイン の本質

• 目的を持った行動であり、特定の問題を解決するための計画の事。
• 受け手に価値を提供することを意図した一連の意図的な行動の事。
• 単なる企画機能ではなく、何かに意味を与えること。だからこそ、デザインのコンセプトは単一の分野を超え、ウェブ、モバイル、ソフトウェア、ファッション、インダストリアル、インテリアなどに多用・適用できるのです。

4. デザイン の意味をより深く理解するために

すべての定義に共通するのは、デザインとは目的のある行動、つまり特定の問題を解決するための計画であるということです。デザインとは、特定の実用的な分野にかかわらず、「デザインされたもの」の受け手に価値を提供することを意図した一連の意図的な行動なのです。

デザインという言葉は、このように考えることで、より深い意味を持つようになります。デザインは美学以上のものである。デザインとは、単なる企画機能ではない。何かに意味を与えることなのです。それは、経験についてです。だからこそ、デザインのコンセプトは単一の分野を超え、ウェブ、モバイル、ソフトウェア、ファッション、インダストリアル、インテリアなどに応用できるのです。

これって、すごいことだと思いませんか？
ここで、デザインの定義を少しグラフィックで表現してみましょう。私たち一人ひとりにとってのデザインの意味と、それをどう理解するかについて、これからも考えてみましょう。

読んでくださりありがとうございます。

The post 「 デザイン 」の本当の意味とは？ appeared first on Studio by UXPin.

プロトタイプとは、最終的なデザインのシミュレーションを作ることであり、最終製品がどのように見え、どのように感じるかのサンプルです。これでその機能を評価できるようになり、さらにこれで欠点も明るみになることから、デザインチームは具体的なものがわかるようになります。

また、チームは、時間や資金や労力ををつぎ込む前にプロトタイプをテストでき、ステークホルダーはフィードバックを出して、次の段階を承認することができます。

なぜプロトタイピングなのか

プロトタイプで以下のようなことができることから、製品の目標とプロジェクトの各段階への移行方法が明確になります。

• ステークホルダーにデザインを最初に見てもらうことができる。
• UXチームは製品の感触をテストできる。
• デザインの状態を製品のコンテクストの中で示すことができる。
• 無意味なものを出力する厄介なアルゴリズムが明らかになる。

プロトタイプは終わりから始まる

デザインに施されたあらゆる装飾に夢中になると、いい UX（ユーザーエクスペリエンス）が目標であることが置いてけぼりになりがちです。

UXデザイナーとして重要なのは、ユーザーの頭の中に入り込むことです。彼らのペインポイントを把握しましょう。何が不満で、どんな目標や願望があるのでしょうか。

対象とするユーザーについての「ストーリーがわかる」UXマーケティングツールが以下のようにあります。

• ユーザーペルソナ：エンドユーザーを代表する架空の人物であり、製品ごとに１～３人設定可能。
• ユーザーストーリー：デザインを使うユーザー ペルソナの簡単なストーリーであり、役に立たない機能の追加の回避につながる。
• ユーザーシナリオ：UXデザインをペルソナやその目標と結びつけることができる。
• カスタマージャーニーマップ：カスタマージャーニーの前後におけるユーザーの行動や感情をマッピングすることで、ユーザーが意識する前にニーズを予測することができる。

これらは架空の描写ではありますが、実在の人物や出来事が表されているはずです。言い換えれば、ユーザーリサーチからわかることを元に構築されています。

静的なプロトタイプ

プロトタイプは、ほとんど何でもあり得ます。紙ナプキンやノート、ホワイトボードにもざっと書いてもいいですし、Photoshopや Illustratorで作るのもいいでしょう。このような静的なプロトタイプで、製品がどのように見えるかや、ユーザーがどのように操作するかが見えてきます。

例えば、顧客が持ち帰りを注文できるレストランのモバイル Web サイトをデザインしているとすると、プロトタイプをデザインして、注文中のユーザーのインタラクションと画面の状態を以下のように示す必要があります。

• アカウントの作成：プロトタイプは、アカウント設定のプロセスが模倣されているべきである。例えば、「ユーザーがチェックアウト時にアカウントを作成すると、レストランはより多くの注文を得る」という調査結果があるとすると、プロトタイプではチェックアウト時のユーザー入力がシミュレーションされるべきである。
• ログインする：ここで、プロトタイプでは入力フィールドが表示される。また、ユーザーが間違った情報を入力した場合の応答も表示される必要があり、ユーザーがまだアカウントを作成していないのにログインしようとした場合の画面の状態も表示されるべき。
• 注文：プロトタイプには、メイン、副菜、ドリンクなどのメニューのカテゴリーがあり、ユーザーがカテゴリーを選択したときにサイトがどのように動作するかが示され、カテゴリーから製品が選択されたときに画面に製品がどのように表示されるかも表示されるべき。
• 会計：ユーザーがどのように支払い情報を入力し、次回以降の注文のために保存するかなどが示される。
• 商品受取に到着：レストランへの到着をどのように知らせるかがシミュレーションされる。例えば、レストランが店外受け渡しの場合、ユーザーは駐車場番号を入力することができる。

ただし、このレストランが、客にダイニングルームのテーブルを予約させたいとすると、プロトタイプでは、持ち帰り注文やテーブル予約のオプションがどのように表示されるのかが示されます。

静的なプロトタイプだと、製品は以下のように表示されるかもしれません：

• ホーム：この例では、持ち帰りの注文やテーブルの予約ができる。プロトタイプでは、ボタンで持ち帰りのページと予約のページに移動できることがわかり、矢印や線はこのようなページの図面に結合させることができる。

• 持ち帰り注文：ここでは、以下のようなカテゴリーのレイアウトがわかる。
  • メイン料理
  • サイドメニュー
  • ドリンク
• 予約状況：予約可能なテーブルが以下のようにわかる。
  • テーブル
  • ブース
  • テラス席
  • バー
• お会計：ユーザが以下でどのように持ち帰り注文を完了するかがわかる。
  • （必要な場合）ログイン/ユーザー名とパスワードの作成
  • 支払い情報
  • 注文の確認
• 到着：レストランスタッフへの以下のような注意喚起の方法がわかる。
  • 駐車場番号
  • 予約受取の到着

これらをフローチャートのように並べることで、プロトタイプのパーツがそれぞれ何をして、製品がどのように見えるのかがわかります。

ただし、これでユーザーと対話はできません。

インタラクティブなフロントエンドプロトタイプ

インタラクティブなプロトタイプだと、UX チームがデザインの感触をつかむことができることから、より優れており、製品テスターからのフィードバックがあれば、次のフェーズに進む前にプロトタイプを以下のように改善することができます。

• ホーム：インタラクティブなプロトタイプだと、お持ち帰りか予約を選んでそのホームページを試すことができる。
• お持ち帰り：ここでは、ボタンやその他の画像がどのように見えるかがわかり、ボタンをタップして、デザインに改善が必要かどうかの判断ができる。
• 予約：テーブルを予約する際の UX を評価でき、空いてるテーブルやブース席、テラス席やバーのテーブル、予約可能な時間帯などを確認できる。
• お会計：支払い情報の入力や保存、お気に入り注文の保存などが簡単にできるかどうかがわかる。
• 到着：レストランスタッフにどのように到着を知らせるかがわかる。

コードによるプロトタイピング

プロトタイプでコードを使うと、静的なベクターベースのデザインに関連する問題はすべて解決します。これが「本当の」フロントエンドプロトタイプだとしましょう。Mergeのテクノロジーが搭載された UXPinだと、プロトタイプ用にコード化されたコンポーネントを UXPinのライブラリにインポートできることから、プロジェクトを進めるときに、以下のことからそれがもっとシンプルになります。

• デザイナーにコーディングの専門知識は必要ない。
• エンジニアは、すでにコーディングされたデザイン要素で作業できる。
• DesignOpsチームは、単一のソースからデザイナーとエンジニアの両方に役立つプロトタイプを構築できる。

コードを直接扱うので、後で変換する必要はありません。なので、エディタで修正が大変だったり、デザイン開発プロセス全体が台無しになる可能性がある複雑なコードの作成の回避になります。

Mergeでプロトタイプが機能的になるだけでなく、コンポーネントをキャンバス上にドラッグ＆ドロップするだけで、自分でサッと簡単に機能させることができます。また、希望しない限り、インタラクションの追加は不要です。Mergeのテクノロジーは、UIだけに焦点を当てた究極のプロトタイプであることから、実稼働可能なコンポーネントを備えたバックエンドのことは考える必要がありません。

実際に体験してみましょう

ゼロからまた作り出す必要はありません。コード化された React.jsコンポーネントを Github や Bitbucket などのGitレポジトリから UXPinデザインツールにインポートして、すでに持っているものを最大限に活かせます。

Mergeテクノロジーが搭載された UXPin をお試しになり、コードコンポーネントによるデザインを開始して、製品の市場投入までの時間を短縮しましょう。

The post フロントエンド開発 – プロトタイプ入門 appeared first on Studio by UXPin.

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

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

モバイルアプリ とは

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

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

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

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

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

モバイルアプリ の利点

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

モバイルアプリの欠点

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

Webアプリ とは

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

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

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

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

Webアプリの利点

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

Webアプリの欠点

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ハイテクなデジタル製品におけるUXデザインの世界でも、ペンと紙は、Lo-Fi（低忠実度）のプロトタイプをサクッと作る選択肢として今でも好まれています。皆さんの思い込みとは裏腹に、UXチームはコンピューターから離れ、付箋やホワイトボード、メモ帳に書き込んだり、紙のプロトタイプに注釈を加えたりすることに多くの時間を費やしています。

デザイナーがコンピュータに向かう前に計画や準備をすればするほど、ワイヤーフレーム、モックアップ、プロトタイプをサッとデザインすることができます。そしてペーパープロトタイプは連携を促すことから、初期の UX デザイン思考プロセスの重要な部分であり、それでデザイナーは最小限のコストで多くのアイデアを検討できるようになるのです。

UXPin を使うことで、デザインチームと開発チームは、ペーパープロトタイプから忠実度の高いプロトタイプ作成にすぐに移行でき、それでデザインプロセスは大幅に加速されます。一貫性のある高品質なデジタル体験を構築しませんか。無料トライアルにサインアップして、UXPin のプロトタイピング機能をぜひお試しください！

ペーパープロトタイプとは

ペーパープロトタイプとは、デジタル製品を表す手描きの「スクリーン」を使ってアイデアを開発し、ユーザーフローをデザインするプロセスであり、ここではインタラクションデザインよりも、ハイレベルな UX（ユーザーエクスペリエンス）のテストを行います。

ペーパープロトタイプには機能がないことから、忠実度が低いため、ペーパープロトタイプのデザイナーがペーパープロトタイプを部門外で共有することはほとんどありません。

ペーパープロトタイプは、情報アーキテクチャをマッピングしてユーザーフローを可視化することを主な目的としています。

デザインチームは、よく机の上やフローの上に紙画面を並べて、実際のユーザーがどのようにナビゲートして最終的なゴールに到達するかを想像します。そのデザインは初歩的なもので、たいていは白黒でスケッチされ、コンテンツは見出しと行動喚起のリンクだけが読みやすいテキストで表示された限定的なものです。

また、スワイプやスクロールなどの基本的な機能をシミュレートするために、チームが厚紙を使って iPhone や Android のモックデバイスを作ることもあります。このようなモックデバイスを使うことで、デザイナーは自分のデザインが携帯電話の枠内でどのように見えるかを確認することもできます。‐ これはモバイルアプリのデザインの際には特に便利です。

紙のプロトタイプの主な利点はスピードですが、UI Stencils などのツールを使って、正確で見た目に美しい画面レイアウトをデザインするデザイナーもいます。これは、紙のプロトタイプをステークホルダーやテスト参加者に提示する予定がある場合に極めて重要です。

UXPinの旅は、Web Kitという同様のペーパープロトタイピング製品から始まりました。ペーパープロトタイプを自動的にワイヤーフレームに変換するデザインツールとペアになったペーパーパッドです。そして UXPin は、エンドツーエンドのプロトタイピングソリューションへと進化し、最初から制作可能なプロトタイプを作成できるようになりました。UXPinをぜひ無料でお試しください。

ペーパープロトタイプのデジタル化

reMarkable や Apple Pencil のようなツールを使えば、チームはアナログな紙の体験のようなスピードと多様性を楽しみながら、リモートで共同作業を行うことができます。

デジタルスケッチツールを使うことで、ペーパープロトタイプのプロセスは加速されます。デザイナーは、（画面を再描画することなく）より速やかに変更を加え、詳細なメモを添付し、完成したプロトタイプを UXPin のようなデザインツールにすぐにアップロードして、忠実度の高いプロトタイプを作成したり、ワイヤーフレームを作成したりすることができます。

ペーパープロトタイプがデジタル化されることで、紙やプラスチックのゴミも減って環境にも優しいですよね 。

ペーパープロトタイプのメリット・デメリット

スピードと柔軟性は別として、ペーパープロトタイプにはメリットもデメリットもあります。

以下の無料のeBook に載っているメリット・デメリットからいくつか挙げてみましょう（英語）

メリット：

• 速やかなイテレーション：１時間以上かけて完成させたデジタルモックアップよりも、５分で完成した紙のデザインを破棄する方が簡単。
• 低コスト：紙は安く、ツールやキットが追加されても破綻しない。
• 創造性の向上：鉛筆と紙の自由さで、実験と新しいアイデアが育まれる。デザインツールはデザインプロセスにおいて重要な役割を果たすが、デザインの初期段階では創造性を阻害する可能性がある。
• チーム構築：ペーパープロトプは、クリエイティブな環境でチームが一丸となれる貴重な機会となる。ペンと紙を使って作業することで、子供のようなエネルギーが引き出され、そこから絆が生まれ、同僚との関係が強くなる。
• 習得が一番ラク：誰もがアイデアをスケッチできるため、ペーパープロトタイプはマーケティング、開発、ステークホルダーなどの他部門を巻き込むのに最適な方法となる。
• ドキュメンテーション ：ペーパープロトタイプは優秀なドキュメンテーションとなる。例えばデザイナーは、プロジェクト全体を通して参照できるように、メモやアイデアのアウトラインを作ることができる。ペーパープロトタイプは優れた UX成果物である。

デメリット：

• ユーザーの反応がない：ユーザーからのフィードバックがないため、アイデアがうまくいくかどうかを知るのは難しく、ペーパープロトタイプを参加者とテストしたとしても、フィードバックは限られたものになると思われる。
• 不正確なフィードバック：UXチーム以外では、ペーパープロトタイプの解釈が大変である可能性があり、それで正確で意味のあるフィードバックが制限されてしまう。
• 潜在的に不要：UXPinのようなラピッドプロトタイピングツールでは、ペーパープロトタイプでデザインプロセスに不必要なステップが追加される可能性がある。UXPin にはあらかじめデザインシステムが用意されているため、デザイナーは忠実度の高い要素をドラッグ＆ドロップでサッとデザインして、作業用のプロトタイプを編集することができる。

１４日間のトライアルにサインアップして、UXPin を使って紙のデザインコンセプトを最終製品のように機能する高忠実度のプロトタイプにどれだけ早く変換できるかをぜひご覧ください。

ペーパープロトタイプを作るタイミング

Google のジェイク・ナップ氏は「ペーパープロトタイプは時間の無駄だ」と言っていますが、初期段階のコンセプト作りにはペーパープロトタイプが有効だと認めています。

一度紙からデジタルに移行したら、戻る理由はありません。新機能や製品の再デザインのために、紙のプロトタイプに戻るデザイナーもいるかもしれませんが、その場合でも、紙のプロトタイプまで戻る必要はないかもしれません。

とはいえ、紙のプロトタイプは初期段階の概念化に最適です。そのスピード、簡単さ、シンプルさにより、デザイナー以外の人も含むすべてのチームが利用でき、実験と創造性を育むことができます。‐ これはデジタルキャンバスでは実現できないことですですね。

また、ペーパープロトタイプは以下には理想的です：

• ブレーンストーミングのミーティングとセッション
• 初期段階での基本的な社内ユーザーテスト

ペーパープロトタイプの作り方

ペーパープロトタイプは、製品デザインの楽しみどころです。チームメンバーがブレインストーミングを行い、アイデアをスケッチする機会ですからね。

スケッチの綺麗さを気にする必要はありません。最高の UX デザイナーでも、別に素晴らしいスケッチアーティストというわけではないですし、そもそもこれは、自身のアイデアを視覚化して創造力を引き出すことが目標です。

ペーパープロトタイプの作成には、主に以下の３ステップがあります：

１．材料を準備する

紙、ペン、マーカー、付箋、はさみなどの材料を集めます。UI（ユーザーインターフェース）のスケッチに、ホワイトボードや大きな紙を使うのもいいかもしれません。

２．インターフェースをスケッチする

基本的な画面、UI、デザインの主要な構成要素を別々の紙に描き、そのスケッチを順番に並べることで、ユーザーの流れを表現します。

３．インタラクションのシミュレーションをする

ユーザーとのインタラクションの順序でスケッチをレイアウトします。ユーザーのアクションに基づいてスケッチを手動で切り替えてユーザー体験をシミュレーションし、フィードバックを集めてデザインを直していきます。

詳しいガイドについては、UXPinのプロトタイプに関する記事をご覧ください。

ペーパープロトタイプを作るための６つのヒント

1. プリンター用紙と安い鉛筆やペンを使う。罫線やラインが引いてあるノートは、多くの場合はデザイナーがたくさんのアイデアを練るよりも、線の間に描くことに気を取られて創造性が抑制されてしまう。
2. ウォーミングアップから始める！リラックスして流れに乗るには、数枚のスケッチが必要なこともある。クレイジーエイトは、同じ画面の多くのバージョンを素早くデザインするための素晴らしいペーパープロトタイプの手法であり、これを２，３ラウンド行うと、さらに発展させるアイデアがたくさん出てくるだろう。
3. モバイル優先型またはプログレッシブエンハンスメントのプロトタイプを作成する。最小のスクリーンから始めて、ビューポートを拡大縮小しながらレイアウトを調整する（これはモバイルと Web デザインに当てはまる）。拡大は、コンテンツを優先して、モバイルに変換されない複雑なデスクトップ用のレイアウトになるのが回避されることから、縮小よりもはるかに簡単である。補足: UXPinのオートレイアウトを使うと、自動的にデザインのサイズ、フィット、塗りつぶしがされることからモバイル優先型のデザインに便利な機能である。
4. １画面（１枚の紙）につき１枚のスケッチにこだわる。ペーパープロトタイプでは、紙片を順番に配置してユーザーフローを作成する必要があり、その入れ替えや、新しい画面の追加をしたりすることから、１枚の紙の上に複数の画面があると、このスピードと柔軟性が失われてしまう。
5. アイデアが浮かんだら反復する。目標は質ではなく量であり、紙でプロトタイプのアイデアをたくさん作ると、多くの場合、最終結果を得るために各アイデアから少しずつ取り出すことになる。これは、紙を使ったレゴ セットのようなものである。
6. ペーパープロトタイプがうまくいくには、計画を立てることが重要。十分な数のペン（黒の細いマーカーが最適）、紙、はさみ、のり、付箋、インデックスカード、テープ、厚紙、その他にもプロジェクトに必要と思われるものを用意する。ホワイトボードとマーカーも、ユーザーフローの概要を共同で描くのに最適。プロのアドバイス：ペーパープロトタイプを準備する仕事は、アート＆クラフト愛好家に割り当てる。どのチームにも少なくとも１人はいて、必要なものを十分すぎるほど揃えてくれるはず。

ペーパープロトタイプのテストと発表

UX部門外でペーパープロトタイプをテストして発表することは、常に厄介です。ステークホルダーやユーザビリティの参加者は、何が起こるかを「想像」しなければならないため、訳がわからなくなったり、提示しようとしている内容から焦点がそれる可能性があります。とはいえ、Jakob Nielsen の調査によると、ユーザビリティの問題の７５%は、ペーパープロトタイプのようなシンプルで忠実度の低いプロトタイプで特定できることが分かっています。

ペーパープロトタイプを発表してテストするためのヒントを以下に挙げてみましょう：

• 発表者以外の１人を「人間コンピュータ」または製品シミュレータ役に指名する：人間コンピュータ役の人は、スクロール、スワイプ、さまざまな画面への移動、その他の機能のシミュレーションをする。
• リハーサル：プレゼンターとシミュレーターが同期できるように、リハーサルは非常に重要。発表者は、シミュレータがプレゼンテーションに追いつくための適切なリズムを考案するといいかもしれない。
• 標準的なユーザビリティテストのベストプラクティスに従う – 「最低５人のユーザーを使ってテストを記録する」などの標準は、現在も適用されている。ユーザビリティの標準と実践方法に関する詳細については、当社のユーザビリティ・テスト・ガイド（無料）をこちらからダウンロード可能（英語）。
• ユーザーに紙のプロトタイプを渡して検査させる場合は、どこに注目して何をテストすべきかがわかるように、ガイダンスと注釈を必ず提供する。

UXPin でのプロトタイプ

モバイル アプリケーションを構築する場合でも、新しい Web サイトを構築する場合でも、UXPin でデザイナーは高度なプロトタイプを構築するためのツールを得られます。‐ 大抵の主要なデザインツールではこれができません。

でも本記事を鵜呑みにせず、１４日間の無料トライアルにサインアップして、次のプロジェクトでは UXPin の強力なプロトタイピング機能をぜひ実際にお試しください。

The post ペーパープロトタイプ： １０分でわかる実践ガイド appeared first on Studio by UXPin.

いい UX（ユーザーエクスペリエンス）には、いい UI（ユーザーインターフェース）が不可欠です。 Webサイトやアプリがインターフェースが原因で使いづらい場合、その製品は使われることない上に、テクニカルサポートを圧迫させて、コストが膨れ上がってしまいます。

UI はビジネスに大きな影響を与えるため、ビジネスの成功には不可欠なのです。

そしてこの原則の多くは、「ユーザーの生活を楽にする」ことに集約されます。

UI デザインの１４原則で、ユーザーの使いやすさが改善されます。この原則を実践してみませんか。UXPinを使えば、高度なプロトタイプが可能になり、美しく完全にインタラクティブなプロトタイプを数分で作成できます。UXPin をぜひ無料でお試しください。

１．ユーザーを中心に据える

いつものように、最初の UI デザインの原則は、人（あるいは、所謂「ユーザー」）に焦点を当てるということです。いい UI は、使いやすく自然で、混乱を招くようなことはなく、ユーザーが求めていることを実現してくれますからね。

ユーザーを理解して、彼らが何をしたいのかを理解する必要があります。そして例えば「ユーザーは専門家なのか」など、ユーザーについて知る最善の方法は、彼らと話すことです。

インタビューの作成と構成は本記事の範疇を超えていますが、対象者にインタビューして彼らがどのような人なのかを知り、彼らのための UI デザインを開発しましょう。HCD（人間中心設計）について学ぶことで、最高のインターフェイスのための正しい考え方に行き着き、人をまず第一に考えてデザインは第二に考えるということができるようになるでしょう。

２．明瞭さを追求する

 UI の目的は、ユーザーが Web サイトやアプリケーション（または、より一般的に言うと、より広いデザインでは、あらゆる製品）と対話できるようにすることです。なので、混乱を招いたり、インタラクションの助けにならないものは避けましょう。

３．画面ごとのアクションとステップの最小化

タスクとアクションを効率化し、できるだけ少ないステップで実行できるようにしましょう。各画面には、主要なフォーカスが１つあるべきです。例えば、このブログの目的は、みなさんがこれを読み、できれば楽しんでいただき、そこから学ぶことであり、SNS でシェアしたり、同僚にメールしたりするためではありません（シェアするほど価値があると判断した場合はシェアしてほしいですが）。

主要なアクションを常に前面中央に配置し、二次的なアクションをページの奥深くに移動するか、視覚的に軽い重みと適切なタイポグラフィを取り入れましょう。

４．シンプルさを目指す

クラシックなものが存在するのには理由があります。クラシックは時代を越え、流行遅れになることはありませんが、現代的なタッチが加わることでさらに魅力が増します。黒いカクテルドレスやタキシードを考えてみてください。どちらもファッションスタイルの定番です。シンプルでエレガントで、着る人に高級感を添えます。

UI はシンプルでエレガントであるべきです。シンプルさについて、詳しくはこちらの記事（英語）をご覧ください。

５．一貫性を保つ 

一貫性があることで「馴染み」が生まれ、馴染みのあるインターフェースは当然使いやすくなります。車のハンドルを握ったとき、ブレーキとアクセルが左右逆だったらどんなにイライラするでしょうか。あるいは、Webフォームへの入力で、赤が「送信」ボタンで、緑が「削除」ボタンだったらどうでしょう。

一貫したデザインだと、ユーザーが感じる摩擦が減ります。一貫したデザインは予測可能ですからね。予測可能なデザインとは、指示がなくても機能の使い方が理解しやすいということです。UI デザインは内部だけでなく、外部的でも一貫しているべきなのです。

Web サイトやアプリ間で同じように、あるいはほぼ同じように機能する一般的な規約だと、サイトのナビゲートや使用がしやすくなります。例えば Apple のヒューマンインターフェースガイドラインは、アプリ間の一貫性の素晴らしい例として挙げられます。このガイドラインは、どの Apple 製品のユーザーでも、他のどのアプリでも簡単に使えるように、アプリ間やすべてのApple 製デバイスでどのように機能が動作すべきかが詳しく説明されています。

これはまた、一般的なパターンを新たに発明したり一から作り直したりしないということでもあります。デザインの問題に対するパターンはすでに数多く存在しています （パターンがあると、ユーザーがすでにその仕組みを知っていることから認知負荷も軽減されます。これは８番目の原則で挙げています。)。なので例えば「検索バー」をページの一番下に置くと、それは「革命的なデザイン」になるのではなく、混乱を招くだけになるでしょうね。

デザインシステムは、UI デザインの一貫性を確保するための素晴らしい方法なのです。

６．UI デザインは見えなくていい

UI が注目されるようなものであってはいけません。素晴らしい UI だと、摩擦なく製品を使うことができ、インターフェースとのインタラクションの方法を考えることに時間が費やされることはありません。

７．有益なフィードバックを提供する

フィードバックには、視覚的なもの、音声的なもの（新着メッセージを受信したときの「チーン」という音）、触覚的なもの（ゲームや電話が「消音」に設定されているときの新着メールや電話の「バイブレーション」で通知する機能で有用）があり、どのアクションにも、そのアクションが成功したか否かを示すフィードバックがあるべきです。

フィードバックで、以下の４つの分野の質問に答えることができます： 

1. ロケーション：現在地
2. ステータス：今どうなっているのか、この状況はまだ続いているのか
3. 今後の状況： 次は何か
4. 成果と結果： それでどうなったのか

ナビゲーションアイテムの上にカーソルを置くと色が変わり、そのアイテムがクリック可能であることが示されます。また、ボタンはボタンのように見えるべきです。フィードバックは、ユーザーが正しいことをしているかどうか（または間違ったことをしているかどうか）を知らせてくれるものでであるべきです。 

８．認知的負荷を軽減する

この UI デザインの原則の多くは、ユーザーの認知的負荷を軽減する役割を果たすものです。つまり、基本的には、ユーザーに考えさせないということです（同様に UX デザインの原則としても有用です）。

認知負荷を減らし、Web サイトやアプリを使いやすくするための一般的な方法としていかが挙げられます：

• アクションと情報をチャンク（細切れ）にする ：ほとんどの人は、情報を処理するときに「７±２」の塊を処理できる。たとえば、電話番号を 「１２３４５６７８９０」のような１０桁のシーケンスではなく、「１２３−４５６−７８９０」のような通常の３-３-４ の方法で分割すると、エラーが少なくなる。
• ３クリックルールを適用する：情報を探すのに３回以上クリックされるべきではない。
• 認識を優先して想起を最小限に抑える：例えば「ゴミ箱」や「（通知によく使われる）ベル」のアイコン など、既存の記憶を呼び起こす一般的なアイコンを考えてみると、コンテクスト内の一般的な画像やアイコンで、ユーザーは機能を識別することができる。これは、大抵の人が理解できる一般的なアイコンを別のものを表すのに使わないということでもある。そういうことをすると、混乱を招くだけである。

９．アクセスしやすくする

UI デザインは、アクセシビリティの問題を考慮する必要があります。これは、オンラインにおいては、多くの場合は「視覚に障害がある人が製品にアクセスして使えるようにする」ということになります。あと、色覚に障害がある人のことについても忘れてはいけません。

男性のおよそ１２人に１人（約８％）、女性の２００人に１人（約０.５％）が、色覚に何かしらのハンデがあります。色は強調のために使いますが、情報伝達を色だけに頼らないようにしましょう。

１０．UI にユーザーのフィードバックを含める

デザインが独り歩きしてはいけません。ユーザーからのフィードバックを集めることで、デザインの選択をテストして検証しましょう。ユーザーがあなたのデザインを使おうとするのを（指導せずに）観察してください。彼らは混乱していませんか？望む結果を簡単に得られますか？

これをデザインプロセスで実行し、リリース後に継続的に評価しましょう （ヒートマップは UI の有効性を追跡する１つの方法であり、もう１つの方法として A/B テストがあります)。

１１．柔軟性

複数のプラットフォームで動作し、見栄えのする UI を作成しましょう。もちろん、デバイスのフォームファクターや 、Android や iOS などの OS（オペレーティングシステム）によって微調整が必要な場合もありますが、何にでも対応できる柔軟性が必要です。

１２．視覚的構造

一貫したビジュアル構造を保つことで、慣れ親しんだ感じを演出し、ユーザーの不安を取り除いて、リラックスしてもらえるようにしましょう。最も重要なものが明白になっている視覚的階層、配色、一貫したナビゲーション、要素の再利用、グリッドを使った視覚的順序の作成など、注目すべき要素がいくつかあります。

１３．ダイアログは終了につながるべきである

アクションには、（各ステップでフィードバックがある）始まり、中間、終わりがあるべきです。例えば、オンラインで購入する場合、ブラウジングや商品選択からチェックアウトに移り、最後に購入が完了したことを確認します。

１４．明確な次のステップを提示する

インタラクションの後にユーザーが取れる明確な次のステップを含めましょう。それは、例えば長いブログ記事の最後にある「トップに戻る」のクリックや、より詳しい情報へのポインタのようなシンプルなものかもしれません。ユーザーが次のステップで目標を達成できるようにサポートしましょう。

UI デザインの際に最後に覚えておくべきことは、すべての人にアピールすることは決してできないということです。ただ、大多数の人にアピールできるように最善を尽くすことはできますし、ペルソナと明確に定められたユーザーに基づいて、個別化するために最善を尽くすこともできます。

それでも、それですべての人が満足することはできませんが、UI デザインに何を盛り込んで何を除外するかを決める際に、本記事で挙げた１４の UI デザインの原則をすべて念頭に置いておくと、意思決定においてユーザーが常に前面に出され、中心に置かれるでしょう。

UXPinではUIの作成を簡単に行うことができます。ブラウザ上で作業し、リアルタイムのフィードバックを得て、チーム全員とオンラインで連携できます。UXPinを使えば、UI デザインの作成、テスト、反復がこれまで以上に速くなるでしょう。UXPin のUI デザインのパワーをご覧になりませんか。UXPin をぜひ無料でお試しください。

The post UI デザインの基本原則 appeared first on Studio by UXPin.

Next.js とReactは関連していますが、その目的や機能は異なります。例えば Next.js でいうReactは、UI（ユーザーインターフェース）コンポーネントを構築するための基盤となるライブラリであり、Next.js は React ベースのWebアプリケーションを構築するための機能と規約が追加されたフレームワークを提供します。

ピクセルを押し込むことなく、インタラクティブなインターフェースをデザインしませんか。Reactライブラリや Storybookからコード化されたコンポーネントを取り込めば、ベクターベースのツールよりも８.６倍速く、制作可能なプロトタイプを組み立てることができます。プロトタイプからコードをコピーして、アプリで使ってみてください。こちらからUXPin Mergeをぜひ無料でお試しください。

Next.js とは

Next.js はオープンソースの Reactフレームワークで、最近の Web アプリケーションの構築に使われています。そして SSR（サーバーサイドレンダリング）、SSG（静的サイト生成）、自動コード分割、ルーティングなどの組み込み機能を提供することで、Reactアプリケーションの開発プロセスをしやすくするように設計されています。

Next.js は React 上に構築されており、パフォーマンスと SEO（検索エンジン最適化）が改善された、本番環境に対応した Web アプリケーションの構築に特に適しています。また、Next.js のコンテキストでは、React は UI（ユーザーインターフェース）を構築するための基盤となるライブラリとして機能します。

Next.jsの機能

Next.jsの主な機能として次のようなものがあります：

• SSR（サーバーサイドレンダリング） – Next.js では、React コンポーネントをクライアントに送信する前にサーバー側でレンダリングすることができ、クライアント側のレンダリングは、レンダリングプロセスの多くをクライアントのブラウザに移行する。
• SSG（静的サイト生成）‐  Next.js は構築時に静的 HTML ファイルを生成でき、サーバーを必要とせずにクライアントに提供できる。 これは、動的に生成する必要のないコンテンツの多い Web サイトやページに有効。
• コードの自動分割 ‐ Next.js はコードを小さなバンドルに自動的に分割し、必要に応じて読み込む。これにより、アプリケーションの初期の読み込み時間が短縮される。
• ルーティング – Next.js は、各 React コンポーネントがルートに対応するファイルベースのルーティング システムを提供する。 これにより、複雑なルーティング構成の作成と管理がしやすくなる。
• APIルート – Next.js で、API ルートをサーバーレス関数として作成でき、それをデータのフェッチやサーバー側の操作の実行に使うことができる。
• 内蔵CSS およびSassサポート – Next.js は、CSS または Sass を使ってアプリケーションをスタイリングするためのサポートが内蔵されていることから、一般的なスタイリング ソリューションと簡単に統合することができる。

NextJS を使うべきタイミング

特定の場合では、プレーンな React ではなく Next.js を選択した方が有利になる可能性があります。

例えば パフォーマンス、SEO、または初期ページ読み込み時間の短縮のために、アプリケーションがサーバー側でコンテンツをレンダリングする必要がある場合、Next.js はサーバー側レンダリングと静的サイト ジェネレーターの組み込みサポートを提供します。 これは、SEOが重要なコンテンツの多いWebサイトやブログ、または ECプラットフォームで特に有効です。

Next.js は、構築時やサーバー側でページを事前レンダリングし、クライアントがダウンロードして実行する必要がある JavaScript の量を削減することで、アプリケーションのパフォーマンスを上げることができます。 そしてそれによって、特に低速のデバイスやネットワーク上で、読み込み時間が短縮され、ユーザー エクスペリエンスが上がります。

また、Next.js には、自動コード分割、CSS と Sass のサポート、API ルートなど、多くの組み込み機能が付属しており、アプリケーションでこのような機能が必要だけど手動で設定したくない場合は、Next.js でその時間と労力を節約できます。

Next.js が適していない場合

Web アプリケーションのサーバー側のレンダリング、静的サイト生成、ルーティングの簡略化、パフォーマンスの向上、または内蔵機能が必要な場合は、プレーンな React よりも Next.js を検討した方がいいでしょう。 ただし、アプリケーションに高度なカスタマイズが求められる場合は、React のみを使った方が適切な場合があります。

以下のプロジェクトを構築する場合は、他のフレームワークを検討してください：

• マイクロサービスまたはバックエンドの負荷が高いアプリケーション – Next.js は主にフロントエンド アプリケーションの構築に重点を置いているため、プロジェクトに負荷の高いバックエンド ロジック、マイクロサービス アーキテクチャ、または複雑なサーバー側の処理が含まれる場合は、Express.js、Nest.js、Spring Boot など、バックエンド開発専用に設計されたフレームワークやライブラリを使った方がいい場合がある。
• リアルタイム アプリケーション – チャット アプリケーションやマルチプレイヤー ゲームなど、アプリケーションがリアルタイム更新に大きく依存している場合、Next.js は最善策ではない可能性がある。 Next.js はクライアント側の JavaScript を使ってリアルタイム更新を処理できるが、リアルタイム接続の管理や大量の同時リクエストの処理には最適化されていない。
• 高度にカスタマイズされたUI – プロジェクトで複雑なアニメーション、インタラクション、または複雑なレイアウトが求められる場合、Next.js では制限が出てくる可能性がある。 React はカスタムUIコンポーネントを構築するための柔軟な基盤を提供するが、Next.js は、高度にカスタマイズされたデザインを実装する際に、特定の規約や抽象化でその能力が制限される可能性がある。 このような場合、WebpackやUIライブラリなどとReactを併用する方が適切な場合がある。

React とは

Reactは、UIコンポーネントの作成や、アプリケーションの状態と動作の管理に使用されるコア ライブラリです。 UI構築のために Facebookによって開発され、２０１３年に初めてリリースされて以来、Webアプリケーションを構築するために最も広く使用されているライブラリの１つになっています。

Reactは、独自のロジックとステートをカプセル化する再利用可能な UI コンポーネントを作成する方法を提供します。 そしてそれによって、デベロッパーはより小さく、より管理しやすいコンポーネントを構成して複雑なUIを構築できます。

Next.js は、SSR（サーバーサイド レンダリング）や SSG（静的サイト生成 ）、ルーティングなど、Webアプリケーションを構築するための追加機能と規約を提供することにより、Reactに基づいて構築されています。

Reactの機能

React は、シンプルさ、パフォーマンス、再利用性に重点を置き、最新のUIを構築するための強力で柔軟な基盤を提供します。また、コンポーネントベースのアーキテクチャ、仮想 DOM、宣言構文により、あらゆる規模と複雑さのWebアプリケーションを構築するデベロッパーにとって人気の選択肢となっています。

そして、Reactには以下のような機能があります：

• コンポーネントベースのアーキテクチャ：Reactは、UIが再利用可能なコンポーネントに分割されるところであるコンポーネントベースのアーキテクチャに従っており、コンポーネントは独自のロジック、ステート、UIをカプセル化するため、複雑な UI の構築や保全がよりしやすくなる。
• 宣言型構文：Reactは宣言型プログラミング パラダイムを使用しており、デベロッパーは DOM を命令的に操作するのではなく、任意の時点で UI がどのように見えるかを記述することができる。 これにより、コードの理解と保全がよりしやすくなる。
• 仮想 DOM：React は仮想 DOMを利用して UIを効率的に更新する。 また、ブラウザの DOMを直接操作するのではなく、メモリ内に DOMの仮想表現を作成し、それを実際の DOM と比較する。 これにより、Reactは DOM 操作を最小限に抑え、パフォーマンスを上げることができる。
• 単方向データ フロー：Reactは、データがpropsを介して親コンポーネントから子コンポーネントに流れるところである単方向データフローに従う。 これにより、動作が確実に予測可能になり、データの変更がアプリケーションを通じてどのように伝播するかがわかりやすくなる。
• JSX：React は JSX (JavaScript XML) 構文を使うため、デベロッパーは JavaScript 内で HTML のようなコードを直接記述することができる。 JSX を使うと、UI コンポーネントの作成と視覚化がしやすくなるだけでなく、JavaScript  ロジックをマークアップに直接組み込むのもしやすくなる。
• フック：Reactではバージョン 16.8 でフックが導入され、それでクラスコンポーネントを作成せずにステートやその他の React 機能を使用する方法を提供できる。フックを使うと、デベロッパーはコンポーネント間でのロジックの再利用や、より簡潔で読みやすいコードの作成ができる。
• コミュニティとエコシステム：React には大規模で活発なデベロッパーコミュニティがあり、その機能を拡張するライブラリ、ツール、フレームワークの広大なエコシステムがある。 これには、Redux や MobX などの状態管理や、React Router などのルーティング 、マテリアル UI や Ant Design などの UI コンポーネントなどのツールが含まれる。
• クロスプラットフォーム：Reactは主に Webアプリケーションの構築に使用されるが、React Native を使ってモバイル アプリケーションを構築することもできる。 また、React Native を使うと、デベロッパーは React と JavaScript を使ってモバイル アプリを作成でき、これを iOS および Android プラットフォーム用のネイティブ コードにコンパイルできる。

React のおすすめユースケース

Reactを習得すると、動的でインタラクティブな Web アプリケーションを構築するための幅広い可能性が開かれます。

React で構築できる一般的なユースケースとプロジェクトには、以下のようなものがあります：

• SPA（シングルページアプリケーション）
• PWA（プログレッシブ Web アプリ）
• CMS（コンテンツ管理システム）
• データ可視化ダッシュボード（例）
• リアルタイムのコラボレーションツール
• インタラクティブな地図と地理空間アプリケーション
• Eラーニングプラットフォーム
• ソーシャル ネットワーキング プラットフォーム
• ECサイト
• 社内ポータルサイト
• タスク管理アプリ

ここにアクセスして、Netflix などの React.js Web サイトの例をご覧ください。

Reactを使うべきでない場合

React は、レンダリングと対話性に関して JavaScript に大きく依存しています。なので、対象ユーザーに、スクリーンリーダーを使うハンディキャップのあるユーザーや JavaScript の実行が制限されている環境など、JavaScript サポートが制限されているユーザーが含まれている場合は、アクセシビリティやグレースフル デグラデーションのための代替アプローチまたはフォールバックのソリューションを検討する必要があるかもしれません。

また、Reactは静的な Web サイトに適しており、チャット アプリケーションやマルチプレイヤー ゲームなどのリアルタイム アプリケーションは、React 単独には適さない場合があります。 React はクライアント側 JavaScript を使ってリアルタイム更新を処理できますが、リアルタイム接続の管理や大量の同時リクエストの処理には最適化されていない可能性があります。 このような場合、Socket.io などのフレームワークや Firebase などのプラットフォームが、より適切なソリューションを提供できるかもしれません。

詳しくは、React の使用方法 に関するこちらの記事をお読みください。

Next.js と React の比較

Next.js はファイルベースのルーティング システムを提供するため、React Router などの追加ライブラリを使う必要がある React に比べてルーティング構成の管理がしやすくなります。 また、アプリケーションに複雑なルーティング要件がある場合、Next.js を使うとプロセスがシンプルになり、定型コードの量が削減されます。

React の機能が Next.js の機能とどのように連携するかを以下で見てみましょう：

• SSR（サーバーサイド レンダリング）：
  • React 自体には、サーバー側のレンダリング機能は内蔵されいないが、React コンポーネントはクライアント側とサーバー側の両方でレンダリングされる。 また、React の仮想 DOM では、ReactDOMServer などのライブラリを使ってコンポーネントをサーバー側でレンダリングできる。
  • React を使うと、サーバー側でコンポーネントをレンダリングできるが、サーバー側のレンダリングを手動で設定するか、SSR の複雑さを抽象化する Next.js などのライブラリを使う必要がある。

• SSG（静的サイト生成）
  • React 自体には、静的サイト生成のネイティブ サポートはないが、React 上に構築される Gatsby.js などのツールを使って、React コンポーネントから静的サイトを生成できる。
  • Next.js は React を拡張して静的サイト生成のためのサポートが内蔵されていることから、デベロッパーは構築時に静的 HTML ファイルを生成でき、サーバーを必要とせずにそれらを提供できる。

• 自動コード分割：
  • React 自体には、すぐに使える自動コード分割は含まれていないが、Webpack や動的 import() ステートメントなどのツールを使ってコード分割を実現できる。
  • Next.js は自動コード分割をシームレスに統合し、コードを必要に応じて読み込まれる小さなバンドルに分割することで、アプリケーションの初期読み込み時間を短縮する。

• ルーティング：
  • React にはルーティング機能が内蔵されておらず、デベロッパーは通常、React Router などのサードパーティ ライブラリを使って、React アプリケーションでルーティングを処理する。
  • Next.js は、各 React コンポーネントがルートに対応するファイルベースのルーティングシステムを提供し、これにより、ルーティングの構成と管理がシンプルになり、アプリケーション内でのルートの作成と整理がしやすくなる。

• API ルート
  • React 自体は、API ルートまたはサーバーレス関数を作成するためのサポートは内蔵されていない。
  • Next.js は、デベロッパーが API ルートをサーバーレス関数として作成できるようにすることで React を拡張し、それによって Next.js アプリケーション内でデータのフェッチや、サーバー側の操作のシームレスな実行ができるようになる。

• 内臓の CSS および Sass サポート：
  • React には、CSS または Sass を使ったアプリケーションのスタイリングに対すサポートは内蔵されておらず、デベロッパーは通常、CSS モジュール、スタイル付きコンポーネント、またはその他のスタイル ソリューションを React とともに使う。
  • Next.js には、CSS や Sass を使ったアプリケーションのスタイリングのサポートが内蔵されているため、一般的なスタイリング ソリューションとの統合がしやすくなり、より一貫した開発エクスペリエンスがもたらされる。

つまり、React は UI を構築するための基盤を提供しますが、Next.js はサーバー側レンダリング、静的サイト生成、自動コード分割、ルーティング、API ルート、内蔵 CSS および Sass サポートなどの機能を提供することで React の機能を拡張します。 

そしてこの機能が React 開発を強化し、それによって、高パフォーマンスで SEO に配慮した保全可能な Web アプリケーションをより構築しやすくなります。

Next.js は Reactjs よりもいいのか

Next.js は、サーバー側レンダリング、静的サイト生成、ファイルベースのルーティング、API ルート、内蔵の CSS および Sass サポートなどの追加機能で React を拡張します。 そしてこれらの機能により、高性能で SEO に配慮した Web アプリケーションを簡単に構築できます。

ただし、Next.js と React.js は、一方が他方より「優れている」かどうかを直接比較することはできません。 それはすべてプロジェクトとその目標によって違いますからね。

Next.js をReactで使えるか

もちろん Next.js は React で使えます。 React で Next.js を使うには、React アプリケーションの作成と同様のプロセスに従いますが、SSR（サーバー側レンダリング）、SSG（静的サイト生成）、ルーティングなどに Next.js 固有の機能を使えます。

React と Next.js のどちらをまず学ぶべきか

React と Next.js のどちらを最初に学ぶかは、目標、背景、学習の好みによって変わってきます。 まず React を学習すると、コンポーネント、状態管理、JSX 構文などの中心的な概念を理解できるようになります。 さらに、フロントエンド開発で使われる抽象化と規約を理解できるようになり、後で Next.js を学習する際に貴重なコンテキストを得られます。

ただし、サーバー側のレンダリング、静的サイトの生成、または実稼働対応のアプリケーションの構築に興味がある場合は、まず Next.jsを学習することが、これらの目標を達成するためのより直接的な方法となる場合があります。

コードに裏付けられたインタラクティブなプロトタイプを設計するためのドラッグ＆ドロップ UI ビルダーである UXPin Merge を使うと、製品の作成が ８.６ 倍速くなります。 社内ポータルサイトやECサイトなどを真にアジャイルな方法で作成しませんか。 UXPin Merge をぜひ無料でお試しください。

The post Next.js と React – Web開発にいいのは？ appeared first on Studio by UXPin.

UXデザイン と UIデザイン がUXの世界で最もよく議論されることの一つです。その違いと共通点はどこにあるのでしょうか？UXデザイナーとUIデザイナーはどちらが必要なのでしょうか？誰が何をするのか？両者は分離すべきなのか？両者はどのように連携するのでしょうか？

このような混乱が生じるのは、ほとんどの教育機関がユーザーインターフェースデザインをUXデザインカリキュラムの一部として教えているからです。UIはユーザーエクスペリエンスの一部であり、なぜ両者を分けるのでしょうか？

中小企業やスタートアップ企業では、UIはUXの傘下に入ります。しかし、組織や製品の規模が大きくなると、ユーザーエクスペリエンス部門は、UXデザイナー、UIデザイナー、リサーチャー、ライター、UXアーキテクト、ResearchOps、DesignOps、その他UXスペシャリストに分かれます。

これらの役割は分かれていますが、いずれも素晴らしいカスタマーエクスペリエンスを実現するために、ユーザー中心のデザインを重視しています。そのためにUXチームは予算、製品、技術的な制約の中で、ユーザーの問題を解決するために協力し合わなければなりません。

UXPinは、UXチーム、プロダクトデザイナー、エンジニア、その他のステークホルダーを含む組織全体の強力なコミュニケーションを促進するコラボレーションデザインツールです。

チームはUXPinのコメント機能を使って、プライベートまたはパブリックなコメントを作成したり、人にタグを付けたり、タスクを割り当てたりして、UXPinを通じてコミュニケーションをとることができます。UXPinを14日間お試しいただき、ユーザーエクスペリエンスデザインを強化するために作られたコラボレーションデザインツールをご確認ください。

ユーザー中心のデザインとは？

ユーザー中心設計とは、UXとUIを結びつける接着剤のようなものです。UXデザイナーとUIデザイナーが効果的に仕事をするためには、ユーザー中心設計のアプローチを用いなければなりません。

ユーザー中心設計とは、お客様を中心にしてデジタル製品を設計するプロセスのことです。この言葉は、アップル社の元社員でニールセン・ノーマン・グループの創設者であるドン・ノーマンが1986年に発表した著書”User-Centered System Design: New Perspectives on Human-computer Interaction “の中で、この言葉を使っています。

その中で彼はこう書いています。「人間は適応能力が高いので、人工物への適応という負担をすべて背負うことができるが、熟練したデザイナーは、人工物をユーザーに適応させることで、この負担の大部分を消滅させることができる」。

ドンが言いたいのは、ユーザーエクスペリエンスデザイナー（UX＆UI）の仕事は、A）人間の問題を解決し、B）ユーザーの制限をなくすように製品を適応させることだということです。

UX デザイン とは？

UXデザインとはユーザーインターフェースを含む、より広範なユーザー体験と、製品に触れたときのユーザーの感じ方を包含するものです。UXデザイナーは製品の体験を最適化し、より楽しく使いやすいものにするために、ナビゲーションやユーザーフローにも重点を置きます。

UXデザイナーの責務

• 製品構造：ナビゲーション、ユーザージャーニー、フロー

• リサーチ：ユーザー、競合他社、市場の分析

• テスト：ローフィデリティおよびハイフィデリティ・プロトタイピング

• デザイン：ワイヤーフレーム、ヒエラルキー、コンテンツレイアウト

UXデザイナーの資質とスキルセット

• クリティカルシンカー
• 問題解決能力
• データや分析に興味がある
• 構造に興味がある
• 機能的なデザイン
• プロジェクトマネジメント

UIデザイン とは？

ユーザーインターフェースデザイナーは、デジタル製品やWebサイトでユーザーが操作するボタン、色、アイコン、タイポグラフィー、画像、フォーム、その他の要素やコンポーネントなどの視覚的要素を作成します。

また、アニメーションやマイクロインタラクションなどのインタラクティビティにも関心があります。

基本的に、UIデザインはユーザーエクスペリエンスデザインの中の専門的なポジションです。

UIデザイナーの責任

• 製品の美学：ブランディング、ビジュアルデザイン

• リサーチ：デザインリサーチ、ユーザー分析

• テスト: UIプロトタイピング（ハイフィデリティ・プロトタイピング）

• デザイン：モックアップ、インタラクションデザイン、アニメーション、ビューポートレイアウト(レスポンシブデザイン)

UIデザイナーの資質とスキルセット

• ビジュアル・クリエイティブ
• グラフィックデザイン
• ビジュアルデザインに興味がある
• 美意識が高い
• 形と機能のバランスをとる
• ユーザーのインタラクションや行動を考慮する
• タスクオリエンテッド

UXデザインと UIデザイン の違い

責任の所在からわかるように、UIデザイナーは美的感覚とインタラクティビティを重視し、UXデザイナーは全体的な体験、構造、ナビゲーションを重視します。

UXデザイナーは製品の体験を幅広く見ますが、UIデザイナーは各画面で何が起こっているかに注目します。

UXデザイナーは通常、リサーチを深く掘り下げ、ユーザーを超えて競合他社や市場分析にまで目を向けます。UIデザイナーは、ビジュアルデザインのトレンドを研究しながら、ユーザーの研究も行います。

ここでは、デザイン思考プロセスにおけるUXデザインとUIデザインの主な違いをご紹介します。

共感する

• UXデザイナー：ユーザーのペインポイント、ニーズ、エモーションに焦点を当てる。
• UIデザイナー：ユーザーの環境や動き、行動に着目する

定義

• UXデザイナー：ユーザーの問題と達成しようとする目標を定義する
• UIデザイナー：ユーザーが目標を達成するために必要な各ステップに焦点を当てる

アイデアを出す

• UXデザイナー：ユーザーの問題を解決するための情報アーキテクチャとナビゲーションを検討します。
• UIデザイナー：ユーザーが製品を操作する際に必要となる要素やコンポーネントを検討します。

プロトタイプ

• UXデザイナー：ワイヤーフレーム、ローフィデリティ、ハイフィデリティのプロトタイピングを用いて、ページの階層やユーザーフローを設計します。
• UIデザイナー：忠実度の高いプロトタイプのためのモックアップとインタラクティビティをデザインする

テスト

• UXデザイナー：全体的なユーザーエクスペリエンスをテストし、ユーザーが製品を使用する際にどのように考え、どのように感じるかを知りたいと考えます。
• UIデザイナー：ユーザーが製品をどのように操作するかをテストし、実用的な質問を投げかける

UXデザインと UIデザイン の共通点

UXデザイナーとUIデザイナーは、どちらもユーザー中心のデザインを重視し、UXデザイン思考の原則に従っています。UXデザイナーはユーザーの目標を定義し、UIデザイナーはユーザーがその目標を達成するのを支援します。UXデザイナーはユーザーのゴールを定義し、UIデザイナーはそのゴールを達成するための手助けをします。

UIとUXを2つの独立した部門ではなく、1つの組織として捉えることが重要です。どちらもユーザーエクスペリエンスデザイナーであり、UXデザインの中で異なるタスクに焦点を当てているだけなのです。

もしデザイナーがどちらかのタスクをうまく実行できなければ、他方のタスクがどんなに優れていても、ユーザーエクスペリエンスと製品全体が失敗してしまいます。

UXデザイナーとUIデザイナーは、どちらもアクセシビリティを考慮しなければなりません。UXデザイナーは、レイアウト、階層、配置など、製品の使いやすさを重視し、UIデザイナーは、色、フォント、サイズ、インタラクションなど、ユーザーインターフェースのアクセシビリティを重視します。

プロダクトデザインのプロセスにおけるUXとUI

ここでは、典型的なプロダクトデザインのシナリオと、UXとUIの役割分担をご紹介します。

1. UXデザイナー／UXリサーチャーは、ユーザー、市場、競合他社の調査を行います。
2. UXデザイナーは、プロダクトマネージャーやステークホルダーと協力して、製品や予算の制約の中でアイデアを開発する。
3. UXデザイナーは、情報アーキテクチャ、初期スケッチ、ワイヤーフレーム、ローフィデリティ・プロトタイプを作成します。
4. UXデザイナー/リサーチャーは、ナビゲーションやユーザーフローを改善するための初期テストを行います。
5. UIデザイナーは、色、アイコン、ボタン、タイポグラフィを使ってワイヤーフレームをモックアップに変換します。
6. UIデザイナーは、インタラクティブな機能を追加して、忠実度の高いプロトタイプを作成します。
7. UXリサーチャーはハイフィデリティプロトタイプをテストし、UX/UIデザイナーに変更を依頼し、反復作業を行います。

デザインチームは、デザインハンドオフの際にエンジニアと協力し、開発プロセスを開始します。

この例は、決して「業界標準」のアプローチではありません。UXデザイナーとUIデザイナーは、デザインプロセスを通じて密接に連携します。

UXデザインは常にユーザーインターフェースデザインに先行します。製品のインターフェイスをデザインするには、それを支える構造やアーキテクチャが必要です。

UXデザイナーは基礎を作り、UIデザイナーはインタラクションと美観を重視します。これらの作業を行うためには、どちらのデザイナーもユーザーのニーズを意識して、楽しいユーザー体験を生み出す必要があります。

UXと UIデザイン ツール

UXデザイナーとUIデザイナーは通常、同じデザインツールを使用しますが、タスクや目的は異なります。

UXデザイナーは、ワイヤーフレームを作成し、各画面を基本的なクリック／タップ操作でリンクさせ、ローフィデリティのプロトタイプを作成します。UXデザイナーは、グリッドシステムを使って各ページの構造を構築し、ナビゲーションを組み込みます。

ワイヤーフレームが完成したら、UIデザイナーは色、インタラクティブ性、ページトランジション、アニメーション、タイポグラフィなどを追加し、忠実度の高いプロトタイプを作成します。

UXPinがUX/UIデザイナーのスピードと一貫性を高める方法

UXPinは、UXデザイナーとUIデザイナーが協力して、ワイヤーフレームからプロトタイプ、そして最終的なデザインに至るまで、お客様に素晴らしい製品を提供するためのエンドツーエンドのユーザーエクスペリエンスデザインツールです。

1. UXデザイナーは、内蔵のデザインライブラリを使用して忠実度の高いワイヤーフレームを設計することができ、UIデザイナーや関係者は画面のレイアウトやフローをより深く理解することができます。
2. UXデザイナーは、試行錯誤されたビルトインのデザインライブラリを使用することで、初期のテストにおいてユーザビリティスタディや関係者から有意義なフィードバックを得ることができます。
3. ほとんどの作業が完了しているため、UIデザイナーはブランディングや製品の要件に合わせてデザイン要素を洗練させ、すぐにテストを開始することができます。
4. UXPinのコードベースのデザインツールを使えば、UIデザイナーは高度なインタラクションやアニメーションで製品に命を吹き込むことができます。また、条件付きインタラクションを使用して最終製品の機能を模倣することで、ユーザビリティテストでより良い結果とフィードバックを得ることができます。

コミュニケーションとコラボレーションの向上

製品チーム、開発者、その他の関係者を招待し、ブラウザ上でプロトタイプをプレビューしてもらうことができます。UXPinのコメント機能を使ってフィードバックを残したり、UXデザイナーやUIデザイナーにタスクを割り当てたりすることができます。

UXPinを実際に試してみませんか？14日間の無料トライアルにお申し込みいただくと、ユーザーエクスペリエンスを向上させるために構築された、コードベースのコラボレーションデザインツールをご覧いただけます。

The post UXデザイン vs UIデザイン その違いを把握しよう appeared first on Studio by UXPin.

Reactは、ダイナミックでインタラクティブな UI（ユーザーインターフェース）開発のために設計された強力なフロントエンドライブラリであり、Web開発において人気の高い選択肢となっています。Webアプリケーションのビューレイヤーの管理、コンポーネントのレンダリング、ユーザー入力の処理、リアルタイムでのUIのアップデートに優れています。

ただし、Reactの可能性を最大限に引き出すには、強固なバックエンド技術との組み合わせが必要です。このバックエンドは、サーバー側ロジックの処理、データ処理、認証、API エンドポイントの提供において極めて重要であり、Reactアプリケーションのデータとビジネスロジックを裏で効果的に管理することから、シームレスなユーザー体験が保証されます。

Reactアプリに適した バックエンド の選択には、開発速度、プロジェクト要件、パフォーマンス、セキュリティ、スケーラビリティ、人気などの要素を慎重に考慮する必要があります。

そこで本記事では、Reactを補完する最適なバックエンド技術を見ていき、プロジェクトの要件に最適なバックエンドを選択できるようにお手伝いします。迅速な開発、スケーラビリティ、高性能のいずれを目指す場合でも、本記事で覚えておくべきポイントをご紹介します。第一線で活躍する バックエンド サービスについて知り、次の React.js プロジェクトに最適なものを見つけましょう。

React UIをサクッと構築しませんか。UXPin Mergeを使うと、完全にカスタマイズ可能な Reactコンポーネントでインタラクティブなインターフェースを作成できます。MUI、Ant Design、または独自の javascriptライブラリを使って、完全にコーディングされた Webアプリ、モバイルアプリ、デスクトップアプリのUIをデザインしましょう。UXPin Merge をぜひ無料でお試しください。

Laravel

Laravel はオープンソースのPHPフレームワークで、Webアプリケーション開発のシンプル化および高速化のために設計されたものであり、強固でスケーラブル、かつ保守性の高いアプリケーションの構築を支援するさまざまなツールや機能を提供しています。

Laravel がReactに最適な理由

• 洗練された構文： Laravel の表現力豊かでエレガントな構文は、ルーティング、認証、キャッシュなどの一般的なタスクをシンプルにし、それで React のアプリケーションのバックエンドのセットアップがしやすくなる。
• MVC アーキテクチャ： MVC（Model-View-Controller）アーキテクチャによって明確な懸念事項の分離に対応し、それで React のコンポーネントベースのアプローチを補完する。
• 強固なAPI開発： RESTful API の組み込みサポートと、Lighthouse などのパッケージを介した GraphQL との簡単な統合がある。
• 認証とセキュリティ： Laravel には、認証、認可、セキュリティのためのソリューションが内蔵されており、それでデベロッパーのオーバーヘッドが軽減される。
• コミュニティとエコシステム：リアルタイムイベント用の Laravel Echo など、Reactのフロントエンドの機能を強化するツールやパッケージの豊富なエコシステムがある。

Reactで Laravel を使う場合

LaravelとReactの組み合わせは、複雑なデータ関係、広範なバックエンドロジック、強固なセキュリティが必要なアプリケーションに最適です。

また、Laravel を バックエンド とするReactは、コンテンツ管理システムや ECプラットフォーム、ソーシャルネットワークなど、ダイナミックでデータ駆動型の Web アプリケーションの構築にも適しています。

そして PHPに精通しているデベロッパーや、Laravelのビルトイン機能を活用して迅速な開発を行いたいデベロッパーに適しています。

Ruby on Rails

Ruby on Rails は、Ruby のプログラミング言語で書かれたオープンソースの Web アプリケーションフレームワークであり、構造化された効率的で使いやすい環境を提供することで、Web 開発がより速くて簡単になるように設計されています。

Ruby on Rails が React と相性が良い理由

• 設定よりも規約： Rails は設定よりも規約を重視しているため、開発のスピードが上がり、それで迅速なプロトタイプとデプロイが’できるようになる。
• スキャフォールディング： Rails のスキャフォールディングは、RESTful API やリソースをサッと生成し、React フロントエンドで簡単に利用できる。
• スケーラビリティ： Rails はスケーラブルなアプリケーションに適しており、特にモジュラーアーキテクチャとマイクロサービスをサポートしている。
• アセットパイプライン： 最新の JavaScript ツールとうまく統合できるため、Rails のビュー内で直接 React を使ったり、独立したフロントエンドとして使うことができる。
• エコシステム：Bundler によって管理される、膨大な数の gem (ライブラリ) とツールを備えた充実した Ruby エコシステムがある。
• ホスティングとデプロイ：Ruby アプリケーションは、Heroku やクラウドサービスのようなプラットフォーム上にデプロイされることが多く、最新のデプロイ手法に重点が置されている。
• 人気：Ruby on Rails は多くの支持を集めており、エレガントで読みやすいコードで知られている。これは長期的なメンテナンスにとって大きな利点となり得る。
• 成熟したコミュニティ： 大規模で活発なコミュニティでは、React を使った開発を強化する豊富なプラグイン、gem、リソースが提供されている。

React で Ruby on Railsを使う場合

Ruby on Rails は、Rails の迅速な開発機能の恩恵を受け、強力な規約と成熟したエコシステムが必要なプロジェクトに最適です。

Laravel と同様に、バックエンドに強固なデータ管理とビジネスロジックが必要な Web アプリケーションで使われており、Ruby on Rails のようなバックエンドを使えば、コミュニティフォーラム、レンタルサービス、金融アプリケーション、医療記録システムなどを構築できます。

Node.js

Node.js は、サーバー上で JavaScript を実行するための最小限の環境を提供し、それによって高い並行性とリアルタイムのアプリケーションが可能になります。Node.js には、Rails や Laravel のような構造化された MVC パターンや、豊富な組み込み機能はなく、その代わりに Express.js のようなフレームワークに依存して Web アプリケーションを構築します。

Express.js は、Node.js の上に抽象化レイヤーを追加し、それでルーティング、ミドルウェアのサポート、より簡単な HTTP 処理などの機能を備えた、Webアプリケーションや API を構築するための合理化されたフレームワークを提供します。

Node.js が React に最適な理由

• フルスタックJavaScript： フロントエンド（React）とバックエンドの両方で一貫した JavaScript コードベースが可能になることから、開発とナレッジ共有がシンプルになる。
• ノンブロッキングI/O： 非同期のイベント駆動型アーキテクチャにより、チャットアプリやライブフィードなどのリアルタイムアプリケーションに最適。
• 豊富なエコシステム： npm（Node Package Manager）には、膨大なライブラリとモジュールのコレクションがあることから、開発と統合が速くなる。
• マイクロサービスアーキテクチャ： React アプリケーションによって消費されるスケーラブルなマイクロサービスの構築に適している。
• Express との 互換性： Node.js は Express.js のようなフレームワークとシームレスに動作し、それで API 開発のための強固で柔軟な環境がもたらされる。

React で Node.js を使う場合

Node.js は、HTTP リクエストの処理、ファイルシステムとのやりとり、データベースの管理など、サーバーサイドの操作に重点が置かれています。

リアルタイムアプリケーション、マイクロサービスアーキテクチャ、統一されたJavaScript スタックが有利な場合に最適であり、広範な JavaScript エコシステムと ノンブロッキングI/O を活用してハイパフォーマンスなアプリケーションを実現したい方にも最適です。

知名度の高いアプリケーションの多くは、そのパフォーマンスとスケーラビリティにより、バックエンドに Node.js を使っており、アプリ開発に Node.js と React を組み合わせているので知られるのが、Netflix、Uber、LinkedIn、Walmart、Mediumなどが挙げられます。

Django

Django は Python で書かれた高水準のオープンソース Webフレームワークで、主にバックエンド開発に使われます。MVCアーキテクチャパターン（Django では Model-View-Template と呼ばれることが多い）に従っており、複雑なWebアプリケーションの開発をシンプルにするためのツールや機能を提供します。

Django が React に最適な理由

• 包括的なフレームワーク： Django の 「Batteries included（バッテリー同梱）」のアプローチには、ORM（オブジェクト関係マッピング）、認証、管理インターフェースのような機能が内蔵されており、それでバックエンド開発がシンプルになる。
• REST と GraphQL に対応： Django REST Framework や Graphene-Django を使えば、React フロントエンドに強固な RESTful API や GraphQL API を簡単にセットアップできる。
• セキュリティ：一般的な脆弱性に対する保護や強力なユーザー認証など、強固なセキュリティ機能をすぐに利用できる。
• Django シェル： コードのテストや、アプリケーション環境と対話するための対話型シェルがある。
• ホスティング： 従来のサーバー、クラウドプラットフォーム、Heroku のようなPaaS（サービスとしてのプラットフォーム）プロバイダーなど、さまざまなホスティングソリューションに対応している。
• スケーラビリティ： データベースのマイグレーション、キャッシュ、デプロイメントを管理するツールを備えており、大規模なアプリケーションの構築に適している。
• 他の Python ライブラリとの統合： Django は他の Python ライブラリやフレームワークとシームレスに統合でき、 それでデータ処理、科学計算、ML（機械学習）に関連する機能の追加がしやすくなる。
• コミュニティによるサポート： 大規模で活発なコミュニティには、開発を強化するための広範なドキュメント、プラグイン、サードパーティパッケージがある。

React で Django を使う場合

Django は、React と組み合わせるとバックエンドとして強力な選択肢であり、特に、Python を好み、広範な組み込み機能が必要であり、セキュリティとデータ管理機能を重視する場合に最適です。 Django には、すぐに使用できる包括的なツールセットを提供するという点で優れており、迅速な開発のサポートも行い、最新のフロントエンド フレームワークともうまく統合できます。

Django はいいバックエンドフレームワークでしょうか？Mozilla の Firefox Accounts システムは Django を使ってユーザ認証、アカウントデータ、セキュリティを管理しており、React で構築されたフロントエンドで、ログイン、アカウント設定の管理、ブラウザデータの同期のための動的でレスポンシブな UI を得られます。

もう一つの例として Udemy が挙げられます。この主要なオンライン学習プラットフォームでは、コース管理、ユーザー認証、支払い処理などのバックエンドサービスに Django が使われており、React は、コースの閲覧、登録、動画再生などのインタラクティブな UI を提供すべくフロントエンドで使われています。

Go

Go は Google によって開発されたオープンソースのプログラミング言語であり、シンプルさ、並行性、パフォーマンスに重点を置いたシステムプログラミング用に設計されています。

Go が React に適している理由

• リアルタイムアプリケーション： チャットアプリケーション、ライブフィード、マルチプレイヤーゲームなど、多数の同時接続やリアルタイムデータの処理が必要なアプリケーションに最適
• RESTful API： Go の標準ライブラリとフレームワーク（Gin、Echoなど）により、React アプリケーションにデータを提供する RESTful API を簡単に構築できる。
• 並行性： Go は goroutine による並行処理に対応しているため、高負荷や複数の接続を効率的に処理することができ、これは React フロントエンドで使われるスケーラブルな Web アプリケーションやAPIにとって有益である。
• サービス指向のデザイン： マイクロサービスアーキテクチャを採用する場合、Go はフロントエンドを処理する React で、パフォーマンスとスケーラビリティが必要な個々のサービスを開発するのに最適。

React で Goを使う場合

チャットアプリやライブコラボレーションツールのようなリアルタイムアプリケーションを構築している場合だと、Go が便利かもしれません。Go は複数のリアルタイム更新や通知の処理に対応しており、React でページのフルリロードなしにクライアント側でのリアルタイム更新ができるようになります。

同様に、Twitch のようなストリーミングプラットフォームでは、動画処理やリアルタイム分析などのバックエンドサービスに Go が使われ、フロントエンドインターフェースに React が使われています。この場合、Go のパフォーマンス能力が大量のストリーミングデータと並行する ユーザーインタラクションを処理し、React でシームレスな視聴体験がもたらされます。

UXPin Mergeで React フロントエンドを構築しよう

言語によって得意分野は異なります。例えば、Django はデータ量の多いソフトウェア開発に優れ、Goは高性能なネットワークタスクに最適で、Node.js やGo はマイクロサービス アーキテクチャに投資するスタートアップで使用される可能性があります。

いよいよアプリのフロントエンドを構築する時が来ました。Git統合や、MUIのような事前構築済みのライブラリを使ってReactコンポーネントを取り込んでみましょう。

UXPin Mergeを使って、開発に備えた完全に機能するインターフェースを作成しませんか。UXPin Mergeをぜひ無料でお試しください。

The post 【デベロッパー向け】React に最適な バックエンド appeared first on Studio by UXPin.

ReactJSとReact Nativeの違いを理解すると、デザイナーはエンジニアとのコミュニケーションは円滑になり、コストのかかる技術的な問題は回避され、デザイン引き継ぎ時の摩擦を最小限に抑えることができます。

デザイナーは、JavascriptやReactの基本的な違いを理解するのに、コードを学んだり技術的な詳細に踏み込む必要はありません。デザイナーに関係する最も大きな違いは、ウェブベースの製品とネイティブのモバイルアプリケーションをデザインする際のコンポーネントライブラリとその選び方です。

UXPin Mergeを使用すると、React UIコンポーネントをGitリポジトリからUXPinのデザインエディタに同期させることができるので、デザインチームは問題なく機能するコードベースのプロトタイプを作成できます。この信頼できる唯一の情報源（Single source of truth）により、デザインのズレがなくなり、市場投入までの時間が短縮され、デザイナーとデベロッパー間の結束が高まります。この画期的なテクノロジーへのアクセスに関する詳細およびリクエスト方法については、Mergeについてのページをご覧ください。

ReactJS とは

ReactJS（一般にReactと呼ばれる）は、Webベースのユーザーインターフェース構築のためのオープンソースのJavascriptライブラリです。コンポーネントベースのフロントエンドフレームワークで、バニラHTML、CSS、Javascriptを記述するよりも早く簡単にWebサイトやWebアプリケーションの開発・拡張ができます。

ReactJSでは、基本的なボタンから複雑なチャートやデータグリッドまで、再利用可能なタグやコンポーネントを作成でき、デベロッパーはコード一行でそれを呼び出すことができます。デザイナーがマスターコンポーネントを作成し、それをユーザーインターフェースの他の部分にコピー＆ペーストするのとよく似ていますね。

ReactJS の例

Facebookは、2011年に自社のWebベースの全製品のためにReactを開発し、現在もWhatsApp、Messenger、Facebook、InstagramのWeb版でこのフロントエンドフレームワークを使用しています。

Facebook以外にも、以下のような多くのグローバル企業やFortune 500社が、WebサイトやWebアプリケーションにReactを使用しています。

• Netflix
• Salesforce
• New York Times
• Reddit
• Cloudflare
• Tesla
• PayPal(PayPalがUXPin Mergeを使ってデザイン拡張させ、Reactリポジトリに同期した方法はこちら)

React Nativeとは

 React Nativeは、プラットフォームを超えたモバイルAndroidおよびiOSアプリ、ならびにWebベースのアプリケーションに使用されるReactJSのモバイル版です。ReactJSと同様に、 React Nativeは、モバイルアプリの開発・拡張のための再利用可能なコンポーネントをデベロッパーにもたらします。

技術的な大きな違いとしては、Reactは仮想DOM（Document Object Model）を使ってWebブラウザ上でコードをレンダリングするのに対し、React NativeはネイティブAPIを使ってモバイルデバイス上でUIをレンダリングする点が挙げられます。

Facebookが React Native を作った理由

 React Native 以前は、デベロッパーはApple XCodeまたはAndroid Studioを使用して、iOSとAndroid用の2つの別々のネイティブアプリケーションをそれぞれ作成しなければいけませんでしたが、今は React Native により、デベロッパーは、iOSとAndroid用のネイティブコードを自動的にレンダリングする単一のアプリケーションを開発することができます。

React Nativeの例

Facebookは、Instagram、Facebook、Facebook Ads Manager、Oculusなど、ネイティブモバイルアプリケーションに React Native を使用しています。 また、以下のように多くのグローバル企業がReact Nativeを使用しています。

• Coinbase
• Shopify
• Discord
• Skype
• Bloomberg
• Pinterest
• Baiduモバイル

 React NativeとReactJS の違い

２つの最大の違いは、ReactがJavascriptのライブラリであるのに対して、React NativeはJavascriptのフレームワークであることです。

• ライブラリとは、エンジニアがWebサイトやアプリケーションを開発しやすくするために、あらかじめ用意されたコードのことです。
• フレームワークはより複雑で、Webサイトやアプリケーションを構築するためのライブラリ、テンプレートフレームワーク、API、セッション管理などで構成されています。

その他にも、ReactJSとReact Nativeの決定的な違いは以下のようにあります；

• ReactJSはJavascriptとCSSでアニメーションを行い、React Nativeはアニメーション用のAPIを使用します。
• ReactJSはUIでHTMLをレンダリングし、React NativeはJSXをレンダリングします。
• デベロッパーは主に、Web開発にはReactJSを、モバイルアプリケーション開発にはReact Nativeを使用しています。
• ReactJSではWebページのナビゲーションにReact-routerが使われ、React NativeではNavigationライブラリが組み込まれています。

プロトタイプデザインのためのReact

ここでは、デザイナーがReactのプロジェクトに取り組む方法をいくつかご紹介します。

コンポーネントベースのデザイン手法

ReactJSやReact Nativeでは、コンポーネントベースのフレームワークを用いてUIを構築していました。デザイナーも同様に、コンポーネントベースのデザインマインドセットを使わなければいけません。自身がデザインするUIについてそれぞれ、「デベロッパーはこれをどのようにして核となるコンポーネントに分解できるのか」と自問してみましょう。

React製品をデザインする場合、コンポーネントを作成し、製品デザイン全体で一貫してこれらを再利用します。コンポーネント内でフォントサイズやスペーシングの変更は、エンジニアが新しいコンポーネントを構築したり、追加のスタイリングを記述する必要があるためなるべく避けましょう。

コンポーネントライブラリの採用

ReactJS やReact Nativeのデザインシステムをゼロから構築すると、デザインと開発の間で常に課題が発生し、ズレが生じてしまいます。そこで企業は、カスタマイズ可能なReactコンポーネントライブラリを採用することで、この課題を克服しています。

Reactコンポーネントライブラリを用いたデザインにより、デザイナーは、デザインを最終製品に変換する際にエンジニアが直面する制限や制約がわかってきます。

GoogleのMaterial Design UIをベースにしたMUIは、最もわかりやすく広く使われているコンポーネントライブラリの1つであり、デザイナーは、MUIを基盤として、ウェブサイト、ウェブアプリ、ネイティブアプリケーションのデザインシステムを構築することができます。

UXPinのMUI統合により、デザイナーはReactコンポーネントを使用してUIの構築ができます。UXPinのプロパティパネルでMUIコンポーネントをカスタマイズして、ブランドや製品の要件に対応させることができます。無料トライアルにサインアップし、UXPinでReactコンポーネントを使ったデザインを始めてください。

モーションとアニメーション

モーションとアニメーションは、特にネイティブアプリケーションの場合、デザイナーとデベロッパーの間でしばしば摩擦を起こします。ReactJSでは、エンジニアは比較的簡単にデザインアニメーションを再現できますが、 React Nativeで同じ結果を得るのは、追加のツールやパッケージがなければ困難または不可能です。このような追加には時間とコストがかかり、プロジェクトの制約を超えてしまう可能性があります。 モーションとアニメーションについては、プロジェクト開始時に必ずエンジニアと話し合い、デザインの引き継ぎ時に摩擦が生じないよう、何ができるかを判断しましょう。

ReactとUXPin Mergeでデザインする

UXPin Mergeで、デザイナーはReactコンポーネントを使用してきちんと機能するプロトタイプを構築できます。デザイナーは、他のデザインツールと同様にReactコンポーネントを使用しますが、最終製品に含まれるコンポーネントと同じであるため、忠実度と機能性が大幅に向上します。

UXPin MergeでのデザインのためにReactを理解する必要はありませんが、理解していたら、エンジニアリングチームとのコミュニケーションと連携が改善されつつ、より忠実で機能的なプロトタイプを作成できる可能性があります。

Reactのプロップ

Reactコンポーネントは、色、文字デザイン、ボーダー、シャドウなどのプロパティを確定するのにプロップを使用します。Merge はプロップを自動的に認識し、デザイナーが編集できるようにプロパティパネルが表示され、デザイナーは JSX に切り替えて、コードで表示および編集もできます。

プロップでデザイナーが変更を加えることができますが、同時にプロップは、ブランドの色や書体など、デザインシステムで確定された制約を設定するものでもあります。この制約により、一貫性が維持され、チームメンバーが不正に変更するのを防ぐことができます。

UXPinはベクターグラフィックスではなくコードをレンダリングするため、デベロッパーはデザイナーがコンポーネントのプロップに加えた変更をコピー＆ペーストするだけで、さっとUIを開発できます。

より忠実に、より機能的に

Reactコンポーネントを使ったデザインでは、デザイナーは最終製品の正確なレプリカを作ることができます。たとえば、機能する日付ピッカーを従来の画像ベースのデザインツールで作成することはできませんが、UXPin Merge を使用すると、日付ピッカー、チャート、データ テーブル、グラフなど、エンジニアがレポジトリに追加したあらゆる React コンポーネントでプロトタイプを作成できます。

定義されたインタラクション

インタラクションやアニメーションは、デザインプロジェクトに多大な時間を要し、デザイナーはプロジェクトごとにこれらのインタラクションを作り直さなければならず、エラーや矛盾が生じる可能性があります。

Mergeでは、プロダクションコードから生成された機能的およびインタラクティブな要素を使用してプロトタイプを作成でき、デザイナーは、プロップを使用して新しいインターフェースやコンポーネントに合わせてアニメーション設定の変更ができます。

デザインシステムにアニメーションを組み込むことで、デザイナーはインタラクションの矛盾をなくしつつ、プロトタイピングの時間を短縮できます。

Storybookを使ったその他のフロントエンドフレームワーク

Mergeを使うと、React でのデザインだけにとどまらず、当社の Storybook 統合により、Vue、Ember、AngularJS、Web Components などの他の一般的なフロントエンドフレームワークを同期することができます。

Reactコンポーネントと全く同じようにStorybookコンポーネントを使用して、忠実度の高いプロトタイプのデザインができます。プロップの代わりにStorybook Argsを使用して、UXPinのプロパティ、スロット、スタイル、入力などを変更します。

コードを使ったデザイン

プロトタイピングとテストの強化に向けて、きちんと機能するReactやStorybookコンポーネントを使ったデザインを始める準備はできましたか？ここでは、開始法を2つご紹介します。

1. 14日間の無料トライアルにサインアップすると、MUIのReactコンポーネントライブラリを使用してUIをデザインするためのMUI統合にアクセスできるようになります。
2. または、Mergeページで、ReactのGit統合、またはその他の一般的な技術用の Storybookへのアクセスをリクエストすることもできます。サポートチームのメンバーが、オンボーディングプロセスのお手伝いのご連絡を差し上げます。

The post React Native と ReactJS – それぞれの違い appeared first on Studio by UXPin.

ここ１０年のデザインシステム革命は、製品開発のワークフローを強化するためのさまざまなツールや戦略をもたらしました。

デザイントークンは、UI 要素の実装、管理、更新をしやすくするために Google の Material Design 3 や MUI などの多くのデザインシステムが採用しているツールの１つです。

お知らせ：UXPinのカラー用デザイントークンはベータ版です！サインアップすると、デザイントークンの正式なリリース時に通知します。

組織全体でデザイン業務を最適化しませんか。デザインと開発で React コンポーネントを使うチームを支援する画期的なデザインテクノロジーである UXPin Merge をぜひご利用下さい。Merge の詳細はこちら。

デザイントークンとは

デザイン トークンには、クロスプラットフォーム の UI（ユーザー インターフェース）のスタイル設定と構築に使われる色、フォント、スペース、アニメーション、アセットなどの UI データが含まれています。各 OS（オペレーティングシステム）用に静的な値をハードコーディングする代わりに、デザイントークンには複数のフォーマットが含まれているため、フロントエンドデベロッパーは iOS や Android、さらには Web アプリケーションを構築する場合でも、同じ変数を使うことができます。

クロスプラットフォームの製品開発における課題の１つに、OS で異なるスタイルプロパティとフォーマットが使われる点が挙げられます。例えば、UXPin のWeb サイトでは CTA（Call to Action）に黄色が使われますが、この黄色の16進コードは#FCC821であり、以下のような方法で表すことができます：

• RGB (CSS): rgb(252, 200, 33)
• RGBA: rgba(252, 200, 33, 1)
• Octal (Android/Flutter): 77144041

このような静的プロパティを使う代わりに、デザイナーやエンジニアは、この４つのカラーコードすべてを表す「uxpin.cta.primary」のようなトークンを参照します。これでプラットフォームやプログラミング言語に関係なく、色は常に同じになります。

デザイントークンの種類

組織は、カラーパレット、サイズ、スペース、アセット、ドロップシャドウなど、多くのスタイルプロパティにこのようなデザイントークンを使います。デザイン トークンの主な種類には以下があります：

• カラートークン： デザインシステムで使われるカラーパレットを定める。例えば以下のように、原色、二次色、背景色、文字色、枠色などがある。
  • 例：
    • color-primary: #007bff
    • color-background: #f8f9fa
      
      
• タイポグラフィトークン： テキスト関連のプロパティを指定する。フォントファミリ、フォントサイズ、行の高さ、文字間隔、フォントの太さなどがある。
  • 例：
    • font-family-body: ‘Roboto’, sans-serif
    • font-size-heading: 24px
      
      
• スペーストークン： マージン、パディング、ギャップなどのスペーシング・システムを管理する。デザイン全体を通して一貫したスペーシングを保証する。
  • 例：
    • spacing-small: 4px
    • spacing-large: 16px
      
      
• サイズトークン： コンポーネントや要素のサイズを定める。これには、幅、高さ、最大サイズと最小サイズなどがある。
  • 例：
    • size-button-height: 48px
    • size-avatar-small: 32px
      
      
• ボーダートークン： 幅、スタイル、半径などのボーダーラインのプロパティを指定する。
  • 例：
    • border-width-thin: 1px
    • border-radius-medium: 8px
      
      
• シャドートークン：色、オフセット、ぼかし、広がりなど、デザイン システムで使われる影の効果について説明する。
  • 例：
    • shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1)
    • shadow-large: 0 4px 8px rgba(0, 0, 0, 0.2)
      
      
• 不透明度トークン： 要素の不透明度を定める。
  • 例：
    • opacity-low: 0.3
    • opacity-high: 0.9
      
      
• ブレークポイントトークン： レスポンシブデザインのブレークポイントを指定し、デザインがさまざまなスクリーンサイズにどのように適応するかを指示する。
  • 例：
    • breakpoint-mobile: 480px
    • breakpoint-desktop: 1024px
      
      
• デュレーショントークン： アニメーションとトランジションのタイミングを管理する。
  • 例：
    • duration-short: 200ms
    • duration-long: 600ms
      
      
• イージングトークン：アニメーションとトランジションのイージング関数を定める。
  • 例：
    • easing-in-out: cubic-bezier(0.4, 0, 0.2, 1)
    • easing-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55)

デザイントークンの起源

デザイントークンの先駆者は Salesforce だと言われており、Salesforce Designer に掲載された２０１４年の記事で、Salesforce UX VP の ゾンケ・ローデ氏によって、同社が複数のプラットフォームやソフトウェアに同じデザイン原則を適用するのにデザイントークンを使っていることが説明されています。

「Salesforce では、まさにこの課題に直面し、不可知論的な解決策を考え出しました。我々は、デザインを一箇所に定めて、それをシステムを使って全プラットフォームにカスケードダウンします。これは「信頼できる唯一の情報源（Single Source of Truth）」と言って、基本的に、我々のデザイントークンを記述する名前と値のペアを含む JSON ファイルのセットとなります」ゾンケ・ローデ氏による Living Design System からの抜粋。

エンジニアは、静的なスタイル プロパティを使う代わりに、デザイントークンを参照し、プラットフォームに応じて正しい値を JSON ファイルから取得します。そして Salesforce はこのプロセスを自動化すべく、「デザイントークンを変換してフォーマットするための抽象化機能」である Theo を開発しました。

アトミックデザインとトークンの違い

「アトミックデザイン」と「デザイントークン」は、どちらもデザインシステムで使われる概念ですが、「デザインの一貫性」と「スケーラビリティ」という異なる側面に対処しています。

アトミックデザインは、ブラッド・フロスト氏によって開発されたデザインシステム構築のための方法論であり、UI を、「原子」、「分子」、「有機体」、「テンプレート」、「ページ」（複雑さの昇順）と呼ばれる、より小さく再利用可能なコンポーネントに分解します。例えば原子は、ボタン、入力フィールド、アイコンなどの基本的な構成要素で、分子は原子の組み合わせ、有機体は分子の組み合わせ、といった具合です。

対するデザイントークンは、デザインシステムにおける色、タイポグラフィ、スペースなどのデザインプロパティを定める変数のセットであり、ビジュアルデザインの決定を抽象的に表現するものです。デザイントークンは、色の16進コードのような「特定の値」を UI コンポーネントに直接ハードコーディングするのではなく、デザインシステム全体でデザインプロパティを一元的に管理や更新をする方法を提供します。

デザイントークンは、デザインプロパティの抽象化と管理を行い、デザイン上の決定を変数に抽象化することから、メンテナンス、拡張性、一貫性がしやすくなります。また、デザイントークンで、デザインに関連する値の「信頼できる唯一の情報源（Single source of truth）」がもたらされます。

デザイントークン３例

タイポグラフィのデザイントークンの例を３つ挙げてみましょう。このトークンで、さまざまなコンポーネントやプラットフォーム間でのタイポグラフィのスタイルの一貫性が保証されます。

例１：フォントファミリー

</p>
{
  "font-family": {
    "base": "Roboto, Arial, sans-serif",
    "heading": "Montserrat, Arial, sans-serif",
    "monospace": "'Courier New', Courier, monospace"
  }
}
<p>

例２：フォントサイズ

</p>
{
  "font-size": {
    "base": "16px",
    "small": "14px",
    "large": "24px",
    "heading": {
      "h1": "32px",
      "h2": "28px",
      "h3": "24px"
    }
  }
}
<p>

例３：行の高さ

</p>
{
  "line-height": {
    "base": "1.5",
    "tight": "1.25",
    "loose": "1.75",
    "heading": {
      "h1": "1.2",
      "h2": "1.3",
      "h3": "1.4"
    }
  }
}
<p>

デザイントークンは適しているか

Google の Material Design 3 のドキュメントには、デザイントークンが最も役立つ場面のリストが以下のように掲載されています：

• 複数のプラットフォームや製品でデザインシステムを使っている。
• 製品のスタイルを簡単に維持・更新したい。
• 製品デザインの更新や、新しい製品や機能の構築を予定している。

Material Design は、デザイントークンが「あまり有効でない」例も２つ挙げています。

• 数年以内に製品を変更する予定がない。
• 製品にデザインシステムがない

デザイントークンを使うメリット

デザイントークンを使う主な利点を３つ挙げてみました。

１．「信頼できる唯一の情報源（Single source of truth）」がある

デザイントークンは、「信頼できる唯一の情報源（Single source of truth）」を作るのに最も有益であり、これが、Salesforce がデザイントークンを使い始めた理由です。例えば複数の製品チームやエンジニア、UX デザイナーが同じ製品に取り組む場合は、みんなそれぞれ同じデザイン言語を話さないといけません。

それがデザイントークンによって、チームは、役割、プラットフォーム、プログラミング言語、責任に関係なく、同じ言語で話すことができるようになります。

２．UI の一貫性の維持

UI の一貫性は、大規模なデザインを行う際の重要な課題です。１つの製品に対して、デザイナーが誤って微妙に違うサイズやブランドカラー、スペースを使ってしまうことは珍しいことではなく、このような不一致でユーザビリティの問題が起こり、リリースのたびにエンジニアリングと UX の負債が増えていきます。

そこでデザイントークンが、デザイナーがみんな同じスタイルとプロパティを使えるように、このような矛盾を解消してくれます。「信頼できる唯一の情報源（Single source of truth）」のもう一つのメリットですね！

３．スケーリングの柔軟性を得る

デザイントークンで、製品やデザインシステムに変更や拡張の柔軟性ができます。なので、チームがプラットフォーム固有のプロパティを追加する必要がある場合は、デザイントークンを更新するだけです。

例えば、Android は HEX や RGB の代わりに 8進数 のカラーコードを使いますが、その際デザインシステムを Android に適応させるのに、DSチームは各デザイントークンに8進コードを追加して「信頼できる唯一の情報源（Single source of truth）」を維持することができます。

このトークンによって、エンジニアはエラーや不整合を減らしながら、新しいプロジェクトをずっと速やかに提供できるようになります。

この柔軟性で、変更もできるようになります。例えば、ある製品がモンセラットからロボトに書体を変更した場合、チームはタイポグラフィートークンを更新するだけで、製品全体の変更を実施できます。

デザイントークン構造の確定方法

デザイントークンの構造を定めるルールはありませんが、Amazon のStyle Dictionary にあるこの例が最もわかりやすく、多くの組織で同じようなフォーマットがデザイントークンに使われています。

Amazon の Style Dictionary は、以下のような階層的なデザイントークン構造を採用しています：

• カテゴリ （色、時間、行の高さ、サイズ、アセット、コンテンツなど）
• 種類
• 項目
• サブ項目
• ステート

例えばこの構造を使って、主要な有効ボタンのためのデザイントークンを作成する場合、color_background_button_primary_active のようになるか、color-bg-btn-primary-active のような短縮形になるかもしれません。そしてこのトークンには、クロスプラットフォームの実装に必要なあらゆる種類のカラーコードが含まれます。

デザイントークン構造は一貫性が鍵なので、ユーザーがトークンを簡単に見つけてシステムを拡張できるように、予測可能な命名規則を使わないといけません。

オプションと決定によるトークンの設計

UX の専門家であり、eightshapes の創設者であるネイサン・カーティス氏は、トークンのアーキテクチャについて素晴らしい記事を書いています。彼は、最初のステップは、デザイントークンを以下のようにオプション（または選択肢）と決定に区分することだと言います。

• オプション： 基本トークン値を作成する。トークンは、色、時間、アセット、コンテンツなど、上記の Style Dictionary で説明されているカテゴリを定める。
• 決定：オプションを使って、例えばインタラクティブカラー、背景色、テキストカラーなどのコンポーネントのプロパティを作る。

このシステムには、白を別の色合いに変更したい場合は、カラー オプションの下の HEX コードを置き換えると、各デザイントークンと関連する UI 要素に自動的に同期されるという利点があります。

ネイサン の方法論だと、オプションを使ってより多くの決定を作成するだけなので、拡張もしやすくなります。トークンの設計に関する詳しい手順については、彼の記事全文をお読みください。

デザイントークンの実際の仕組み

「Design Tokens for Dummies」というお役立ち記事で、ルイ・シェネ氏 は、デザイントークンを使う場合と使わない場合の一般的なデザイン変更ワークフローについて以下のように概説しています。

従来のワークフロー – デザイントークンなし

• デザイナーがデザインツールでスタイルを更新する
• デザイナーがデザインハンドオフのために変更をドキュメント化する
• エンジニアが CSS、LESS、SASS などのコンポーネントのプロパティを更新する
• デザインチームが QA（品質保証）中に変更を確認する

このワークフローには以下のような問題があります：

• デザインハンドオフ中に、より多くの作業と細部への注意が必要。
• エラーや誤解が生じやすくなる。
• チケットが増えるので技術的負債が増える。
• 変更を加えて関連するエラーを修正するのに、不要な時間と費用がかかる。

デザイントークン方式

• デザイナーはデザインツールでスタイルを更新する。
• デザイントークンジェネレーターで、プラットフォーム固有のファイル (JSON／YAML) を作成する集中レポジトリが更新される。
• エンジニアは新しいレポジトリをプルし、新しいトークンを追加して、プロジェクトのスタイルを自動更新する。

デザイントークンを使うと、デザインハンドオフに関するドキュメントが少なくなって、エンジニアのプログラミング時間が節約されます。そしてこの自動化されたシステムによって、人的エラーが大幅に減ることから、開発と QA プロセスが効率化されます。

UXPin Merge による「信頼できる唯一の情報源」

デジタル製品が複雑になっていくと、デザイナーとエンジニアはワークフローを統合するソリューションを見つけないといけません。ちなみに UXPin は、革新的な Merge の技術でこの問題を解決しました。

Merge を使うと、レポジトリからコンポーネントライブラリを UXPin のデザイン エディタにインポートできるため、デザイナーはエンジニアが最終製品の開発に使うのと同じ UI 要素を使うことができます。

Merge のコンポーネントには、レポジトリ内のコンポーネントと同じ忠実度と機能があり、デザイン システム チームは、React のプロップ (または Storybook 統合の場合は Args) を使って変更を制限したり、デザイナーにデザイン上の決定を柔軟に行えるようにしたりできます。

また、エンジニアがレポジトリに変更を加えると、それは自動的に UXPin に同期され、デザイナーに更新が通知されます。Merge にはバージョン管理機能が備わっているため、デザイナーは以前のバージョンに切り替えることができ、それで古いプロジェクトの更新をすることができます。

UXPin Merge で製品開発を新たなレベルに引き上げ、「信頼できる唯一の情報源（Single source of truth）」を作りませんか。アクセスリクエストの詳細については、Merge のページをぜひご覧ください。

The post デザイントークンとは？ appeared first on Studio by UXPin.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

複数のデバイスでテスト

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

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

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

タイポグラフィの調整

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

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

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

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

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

パフォーマンスの最適化

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

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

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

コーディング規約の遵守

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

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

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

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

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

画像とメディアの最適化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一貫性のないUI

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

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

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

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

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

使い勝手の悪さ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

甘いセキュリティ対策

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

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

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

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

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

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

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

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

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

ユーザーフレンドリーなデザインは、UIおよびUXデザインの基本的な側面であり、テクノロジーをよりアクセスしやすく、誰にとっても使いやすいものにしたいという願望によって推進されています。

長年にわたって、デザイナーは、ユーザーのニーズを優先してユーザビリティを上げるインターフェースを作成するための方法論やベストプラクティス、デザイン原則を開発してきました。

テクノロジーが進化し続ける中、ユーザーフレンドリーなデザインは、世間に受けりれられるデジタル体験を生み出す上で重要な検討事項であり続けています。

インターフェースがユーザーフレンドリーかどうかを見分けるにはテストが必要ですが、静的なプロトタイプをテストすることはできません。そこで UXPinの出番です。UXPinはユーザーテストの質とインパクトを上げる機能プロトタイプに向けた使いやすいツールです。UXPin でインターフェースをいかに速く構築できるかをぜひご覧ください。UXPin の無料お試しはこちら。

 ユーザーフレンドリー の定義

「ユーザーフレンドリー」とは、ユーザーの使いやすさや利便性を考慮してデザインされた製品、インターフェース、システムを表す言葉です。それはそのアイテムが直感的でわかりやすく、ナビゲートしやすいということであり、それによってユーザーは、労力とイライラは最小限で自分のタスクを達成できるようになります。

ちなみに英語の辞書では、「ユーザーフレンドリー」は大体「（製品、システム、インターフェースなど）特にエンドユーザーにとって使いやすい、あるいは理解しやすいもの」を表す形容詞として定義されており、これは、そのアイテムやシステムがユーザーの利便性やインタラクションのしやすさを考慮してデザインされていることが示されています。

「ユーザーフレンドリー」という言葉は、HCI（ヒューマンコンピュータインタラクション）や UI（ユーザーインターフェース）デザインの分野で生まれたもので、ユーザーにとってわかりやすくて操作しやすいシステムやインターフェースのことを指します。

歴史を振り返ると、使いやすさには以下のような 「時代 」があります。

• 初期のコンピューティング（１９６０年代～７０年代）： インターフェースは主にテキストベースで、技術的なユーザー向けにデザインされていた。「ユーザー」のベースがコンピュータシステムに詳しい専門家や研究者に限られていたため、ユーザーフレンドリーかどうかは重要な考慮事項ではなかった。
• グラフィカルユーザーインターフェース（１９８０年代〜９０年代）： Xerox Star、Apple Macintosh、Microsoft Windows などのシステムによって普及した GUI（グラフィカルユーザーインターフェース）の導入は、UI デザインに大きな変化をもたらした。GUI は、アイコン、ウィンドウ、メニュー、（マウスなど）ポインティングデバイスを利用して、技術者でないユーザーにもコンピューティングをより身近なものにした。
• HCI（ヒューマンコンピュータインタラクション）研究（１９８０年代〜現在）：HCI は、人間とコンピュータの相互作用に焦点を当てた研究分野として登場した。研究者たちは、インターフェースの使いやすさを上げるために、認知心理学、ユーザビリティ工学、ユーザー中心デザインの手法を研究した。
• Web およびモバイルのインターフェース（１９９０年代～現在）： インターネットとモバイルデバイスの普及は、UI デザインにおける新たな挑戦と機会をもたらした。デザイナーはインターフェースを様々なスクリーンサイズ、入力方法、ブラウジングコンテキストに適応させなければならず、それがレスポンシブデザインの原則とモバイルフレンドリーなプラクティスの開発につながった。
• UCD（ユーザー中心デザイン）とユーザビリティテスト（１９９０年代～現在）： UCD（ユーザー中心デザイン）は、UI デザインにおいて支配的なアプローチとなり、それによってデザインプロセス全体を通してユーザーを関与させることの重要性が強調されるようになった。また、インタビュー、調査、ユーザビリティ調査などのユーザビリティテストの手法で、デザイナーはユーザビリティの問題の特定やデザインの反復をしてユーザーの利便性を上げることができるようになった。
• アクセシビリティとインクルーシブデザイン（２０００年代～現在）： アクセシビリティの問題に対する認識が高まるにつれて、デザイナーは、インターフェースがハンディキャップがある人にも使用可能であることを保証するために、スクリーンリーダーの互換性やキーボードナビゲーション、色のコントラストなどの考慮事項が含まれるインクルーシブデザインの原則を取り入れ始めた。
• UX（ユーザーエクスペリエンス）デザインの登場（２０００年代〜現在）： UX デザインで、ユーザビリティだけでなく、製品やサービスを使用する際の総合的な体験にまで焦点が広がった。UX デザイナーは、ユーザビリティの原則に加え、感情移入、ブランド認知、ユーザー満足度を考慮し、ユーザーフレンドリーな体験を作り上げる。

 ユーザーフレンドリー なシステムとは

ユーザーフレンドリーなシステムとは、直感的で効率的でアクセスしやいものであり、それでユーザーは、労力やイライラは最小限にタスクや目標を達成できるようになります。

ユーザーの利便性には、多くの場合は明確なコミュニケーションや直感的なデザイン、論理的なワークフロー、ユーザーの多様なニーズや能力への配慮が含まれます。また、ユーザビリティと使いやすさを優先することで、ポジティブで満足のいくユーザー体験を提供することを目的としています。

つまり、ソフトウェア、Web サイト、家電製品、その他あらゆる製品において、ユーザーフレンドリーなデザインはユーザーのニーズと期待を最優先し、ポジティブで効率的なインタラクション体験を提供することを目的としているのです。

 ユーザーフレンドリー の特徴

デザインの観点からは、使いやすさとアクセシビリティを優先するだけでなく、直感的で効率的、かつ楽しく使えるインターフェースを作成することを目的とした、以下のような原則と考慮事項が「ユーザーフレンドリー」に含まれます。

• 直感的： ユーザーは、豊富な説明や予備知識を必要とせずにインターフェースの操作方法を簡単に理解することができる。
• 明快さ： インターフェースは、対象者にわかりやすい言語と視覚的要素を用いて、情報を明確かつ簡潔に伝える。
• 一貫性： レイアウト、カラースキーム、タイポグラフィ、ナビゲーションパターンなどの要素は、インターフェース全体で一貫性が保たれ、それによってまとまりのある親しみやすい体験がもたらされる。
• フィードバック： インターフェースは、ユーザーのアクションに対して明確なフィードバックを提供して、エラーや進行状況や状態の変化を知らせる。
• 効率性： 論理的なワークフロー、よくまとめられたコンテンツ、効率化されたインタラクションにより、ユーザーは最小限の労力で効率的にタスクを遂行できる。
• アクセシビリティ：インターフェースは、さまざまなハンデやニーズがあるユーザーに対応するようにデザインされており、それで誰でもシステムにアクセスして効果的に使えるようになっている。
• 柔軟性： インターフェースで、ユーザーは自分の体験をある程度カスタマイズすることができ、個人の好みや要求が適応される。
• エラー処理： エラーメッセージは、ユーザーがイライラしたり訳がわからなくなったりすることなく、問題解決へと誘導してくれるような、親切で不安を煽ることのない方法で表示される。
• 視覚的な魅力： 機能性が最優先される一方で、視覚的に魅力的なアプリや Web デザインでユーザー体験が上がり、それでインターフェースはよりユーザーを引き付けてくれるようなものになる。
• レスポンシブデザイン： さまざまなデバイスや画面サイズにシームレスに適応するインターフェースだと、ユーザビリティを無駄にすることなく、さまざまなプラットフォームからシステムにアクセスして使えることが保証される。

ユーザーフレンドリーなインターフェースの例

Spotify

Spotify のユーザーフレンドリーなデザインは、シンプルさ、個別化、利便性を優先していることから、ユーザーはシームレスで楽しい音楽ストリーミング体験を得られます。

Spotify のインターフェースがユーザーフレンドリーだと言われる理由にいかが挙げられます：

• 直感的なナビゲーション：ユーザーがアプリ内を簡単にナビゲートできるシンプルで直感的なインターフェースが特徴となっており、画面下部にあるメインのナビゲーションメニューから、ホーム、検索、ライブラリ、自身のライブラリなどの重要なセクションにサッとアクセスできる。
• 「あなたへの」おすすめ： 洗練されたアルゴリズムを活用して、ユーザーのリスニング履歴や好み、行動に基づいた「おすすめ」の音楽が提供される。また、「Discover Weekly」のプレイリストと個別化されたデイリーミックスで、ユーザーの好みに合わせた新鮮な音楽が提供され、それによってリスニング体験全体が上がる。
• 検索機能： Spotify の強力な検索機能で、ユーザーは、アーティストやアルバム、曲、プレイリスト、ポッドキャストをサッと見つけることができる。また、検索結果はわかりやすくまとめられて表示されるため、ユーザーが探しているコンテンツは難なく見つかる。
• プレイリストの作成と整理：ユーザーは好みに合わせてプレイリストを簡単に作成および整理ができる。プレイリストへの曲の追加、曲順の変更、プレイリスト名の変更も簡単にできることから、シームレスな音楽キュレーション体験がもたらされる。
• オフラインリスニング： 曲、アルバム、プレイリスト、ポッドキャストをダウンロードしてオフラインで聴くことができる。この機能は、旅行中や接続が制限されている地域など、インターネット接続なしで音楽を聴きたいユーザーにとって特に便利。
• クロスプラットフォーム同期： スマートフォン、タブレット、コンピューター、スマートスピーカー、ゲーム機など、複数のデバイス間でシームレスな同期ができ、ユーザーは、あるデバイスで音楽を聴き始めても、中断されることなく別のデバイスでシームレスに聴き続けることができる。
• アクセシビリティ機能： Spotify のインターフェースは、ハンディキャップのあるユーザーにも利用しやすいようにデザインされている。音声コマンド、テキスト読み上げサポート、カスタマイズ可能なフォントサイズや配色などの機能があり、それによって能力に関係なくどんなユーザーでもプラットフォームを堪能できるようになっている。

Gmail

Google のメールサービスは、そのユーザーフレンドリーなデザインで有名で、シンプルに効率よくまとめることを優先して長年進化してきました。Gmail がどのようにしてユーザーフレンドリーなインターフェースを実現しているのかを以下で見てみましょう：

• クリーンで直感的なレイアウト： Gmailのインターフェイスは、クリーンでミニマルなデザインが特徴で、直感的なナビゲーション要素により、ユーザーはメールへのアクセス、メッセージの新規作成、受信トレイの管理が簡単にできる。
• タブ付き受信トレイ： Gmail のタブ付き受信トレイで、受信メールは「プライマリ」、「ソーシャル」、「プロモーション」、「アップデート」、「フォーラム」などのタブに自動的に分類される。これによってユーザーは、メールの優先順位をつけて、より効果的に管理することができ、ゴチャゴチャ感が減って受信トレイがよりスッキリする。
• 強力な検索機能： Gmail の強力な検索機能で、キーワード、差出人名、件名、その他の条件を使ってメールをサッと見つけることができる。高度な検索オペレータで、検索の体験はさらに上がり、ユーザーは検索結果を正確に絞り込むことができまるようになる。
• 会話ビュー： Gmail の会話ビューは、関連するメールをスレッド化された会話にグループ化し、それでユーザーはコミュニケーションの流れを追いやすくなる。また、この機能により、受信トレイがゴチャゴチャになりにくくなり、特に長いメールのやりとりの場合に、メール閲覧が効率化される。
• カスタマイズ可能な設定： Gmail ではカスタマイズ可能な設定やプリファレンス（好み）が幅広く提供されており、ユーザーのニーズや好みに合わせてメール体験をカスタマイズすることができる。ユーザーは例えば受信トレイのレイアウト、メール転送、フィルター、署名などの設定を調整できる。
• Google サービスとの統合： Gmail は、Googleドライブ、Googleカレンダー、Google Meet などの他の Google サービスとシームレスに統合されており。この統合で、ユーザーは受信トレイから直接ファイルにアクセスして共有したり、イベントの設定やビデオミーティングへの参加ができることから、生産性や連携が上がる。
• レスポンシブデザイン： Gmail の iOS および Android 端末向けモバイルアプリは、小さな画面向けに最適化されたレスポンシブデザインを採用している。例えばモバイルアプリには、デスクトップ版の主要機能を維持したユーザーフレンドリーなインターフェースがあり、それでユーザーは外出先からメールにアクセスすることができる。
• セキュリティセンター： Gmail には、スパムフィルタリング、フィッシング対策、二要素認証、機密モードなどの機能が内蔵されており、ユーザーのセキュリティを最優先している。このような機能により、ユーザーのメールアカウントや機密情報は不正アクセスや悪意のある攻撃から守られる。

Amazon

Amazon のインターフェースは万人受けするものではないかもしれませんが、その使い勝手の良さは、以下のように機能的なデザイン、直感的なナビゲーション、個別化された「オススメ」、多様なユーザー層のニーズや好みを優先した便利な機能から来るものです。

• わかりやすいナビゲーション： 賑やかな外観とは裏腹に、Amazon のインターフェースは論理的にきちんとまとめられており、明確なナビゲーションメニューと検索機能が目立つように表示されている。それでユーザーはゴチャゴチャした情報で訳がわからなくなるということもなく、探しているものを簡単に見つけることができる。
• 包括的な検索： Amazon の強力な検索エンジンにより、ユーザーは商品名、カテゴリー、ブランド、あるいは特定の機能から商品をサッと見つけることができる。また、オートコンプリート機能と高度なフィルタリングオプションにより、ユーザーは検索結果を効率的に絞り込むことができる。
• 詳細な製品情報： Amazon の各製品リストには、包括的な詳細、仕様、画像、カスタマーレビューが含まれており、この豊富な情報によって、ユーザーはあっちにこっちに情報源にアクセスすることなく、十分な情報に基づいた購買決定を行うことができる。
• パーソナライゼーション： ユーザー体験の個別化に高度なアルゴリズムが採用されており、過去の購入履歴、閲覧履歴、好みに基づいて商品が「おすすめ」されることから、ユーザーは関連商品を見つけやすくなる。
• 便利なお会計プロセス： 様々な支払い方法、配送先の保存、ワンクリック購入などを提供することで、お会計プロセスが効率化されている。これにより摩擦が減り、全体的なユーザー体験が上がる。
• プライム特典： Amazon プライム会員になると、２日以内の無料配送、限定商品、ストリーミングサービスなどの特典が追加される。この特典が、ユーザーが定期的にこのプラットフォームに参加する動機付けとなり、ユーザーフレンドリーな評判の貢献になっている。
• カスタマーサービス： Amazon のカスタマーサービスへの取り組みは、その使いやすさの重要な要素である。チャット、メール、電話サポートなどの強固なカスタマーサポートチャンネルを提供し、手間のかからない返品ポリシーも用意することで、ユーザーに信頼と自信を与えている。

TikTok

広く普及している SNS プラットフォームである TikTok も、モバイルデバイスに合わせたユーザーフレンドリーなインターフェースを誇っている。TikTok のユーザーフレンドリーなインターフェースの主なポイントを以下で見てみましょう：

• フィード： TikTok のメインフィードでは、アプリとのインタラクションに基づいてユーザーの興味に合わせた短いビデオクリップの連続ストリームが表示される。このアルゴリズムによるフィードにより、ユーザーは手動でコンテンツを探すことなく、常に魅力的なコンテンツを見ることができる。
• 見つけやすさ： TikTok のインターフェースで、ユーザーは新しいコンテンツやクリエイターを簡単に見つけられるようになっている。「あなた向け」のページでは「あなたへの」オススメがが提供され、「トレンド」タブではトレンドの課題、ハッシュタグ、カテゴリーを検索することができる。
• ビデオ作成ツール： フィルター、エフェクト、サウンドトラック、編集機能などの直感的なビデオ作成ツールが幅広く提供されている。インターフェースはユーザーに使いやすくデザインされており、それでユーザーは、スマートフォンから直接、クリエイティブなビデオをサッと録画、編集、共有できる。
• エンゲージメント機能： TikTokは、「いいね！」、コメント、シェア、デュエット（他のユーザーと分割スクリーンの動画を作成できる）などの機能を通じて、ユーザーの関与を促している。このインタラクションオプションは、インターフェース内で簡単にアクセスできるため、ユーザー間のコミュニティ感覚やコラボレーションが育まれる。
• アクセシビリティ：TikTok のインターフェースは、あらゆる年齢や背景のユーザーがアクセスしやすく、ナビゲートしやすいようにデザインされている。レイアウトはすっきりとしていて直感的で、目立つボタンとアイコンがユーザーをアプリのさまざまな機能に誘導してくれる。

結論として、TikTok のユーザーフレンドリーなインターフェースは、Tiktok が世界中のユーザーに広く取り入れられて人気を博していることへの重要な役割を果たしており、プラットフォーム内でのシームレスなコンテンツ消費、作成、エンゲージメントが実現しています。

 ユーザーフレンドリー なインターフェースの作り方

ここでは、ユーザーフレンドリーなインターフェースを作る方法を見ていきましょう：

• シンプルであること： インターフェースをすっきりとさせ、必要な要素を優先して、注意が散漫になるようなものを最小限に抑える。
• 直感的であること： 詳しい説明を必要とせずに、ユーザーが操作方法や操作方法を簡単に理解できるようにインターフェースをデザインする。
• 組織化： 関連する要素を論理的にグループ化し、明確な視覚的手がかりを提供することで、ユーザーはインターフェースの構造を理解できるようになる。
• 個別化： 個別化された「オススメ」やカスタマイズオプションを提供し、ユーザーの好みやニーズに応える。
• 効率化： ワークフローとインタラクションを効率化し、ユーザーが最小限の労力でサッとタスクを達成できるようにする。
• フィードバック： 確認メッセージ、エラー通知、進行状況インジケータなど、ユーザーのアクションに対する明確なフィードバックを提供する。
• アクセシビリティ： キーボードショートカット、スクリーンリーダーとの互換性、調整可能なフォントサイズなどの機能により、能力に偏りのあるユーザーでもアクセスできるようなインターフェースであることが保証される。
• 一貫性： インターフェース全体のデザイン要素、レイアウト、用語、インタラクションパターンの一貫性を維持し、まとまりのある親しみやすい体験を提供する。
• 統合： 他の関連サービスやプラットフォームと統合し、さまざまなツールやデバイスでシームレスな体験をユーザーに提供する。
• セキュリティ：暗号化、安全な認証方法、プロアクティブな脅威検出など、ユーザーのデータとプライバシーを保護するセキュリティ機能を実装する。

つまり ユーザーフレンドリー とは

「ユーザーフレンドリー 」という意味の別の言葉として「直感的 」があります。どちらの言葉も、ユーザーにわかりやすく、ナビゲートしやすく、操作しやすいインターフェースデザインを表す同義語とみなすことができ、多くの場合は最小限の指示や予備知識しか必要ありません。

逆に、不親切なユーザーインターフェースは、直感的でない、分かりにくい、イライラする、または面倒くさいとも言えるかもしれません。このような用語は、ナビゲートしにくく、きちんとまとまっていなくて、フィードバックは少なく、全体的にユーザーがタスクを効率的に達成する能力を発揮できないインターフェースのことを表します。

このようなインターフェースは、ユーザーのニーズや好みを優先することができないため、直感的でない、何に重点が置かれているのかわからない、圧倒される、またはアクセスしにくいと表現されることもあります。結局のところ、不親切なユーザーインターフェースでユーザー体験は下がり、それがフラストレーションや不満につながるということです。

また、複雑すぎたり操作が難しかったり、効果的な使用には専門的な知識が求められるようなソフトウェアアプリケーションで、ユーザーはイライラして生産性が阻害される可能性があるため、ユーザーフレンドリーではないと考えられます。

「 ユーザーフレンドリー 」と「使いやすさ」は同じ意味なのか

「ユーザーフレンドリー」と「使いやすさ」は関連する概念ではありますが、まったく同じというわけではありません。

「ユーザーフレンドリー」とは、一般に、ユーザーの使いやすさや利便性を念頭に置いてデザインされた製品、インターフェース、またはシステムを指します。ユーザーフレンドリーな製品やインターフェースとは、直感的で効率的、かつアクセスしやすく、ユーザーは労力とイライラは最小限に、タスクや目標を達成できるものです。また、直感性、わかりやすさ、効率性、フィードバック、アクセシビリティ、柔軟性など、さまざまな側面が含まれ、そのすべてが肯定的で満足のいくユーザー体験を提供することを目的としています。

対する「使いやすさ」とは、特に製品やインターフェースとのインタラクションの単純さやわかりやすさを強調するものであり、「使いやすい」製品とは、ユーザーが不要な複雑さや混乱に遭遇することなく、ナビゲート、操作、タスクの達成方法をサッと理解できるものです。

つまり、ユーザーフレンドリーというのは「使いやすさ」に貢献しますが、アクセシビリティ、フィードバックの仕組み、柔軟性など、全体的なユーザー体験を上げる付加的な要素も含まれます。したがって、ユーザーフレンドリーな製品は多くの場合「使いやすい」ですが、「使いやすい」製品がすべて必ずしも完全に「ユーザーフレンドリー」であるとは限りません。

UXPin で ユーザーフレンドリー なインターフェースを作成しよう

ユーザーフレンドリーなインターフェースを作るには、ユーザーを圧倒しないよう、シンプルさとわかりやすさを優先しましょう。また、直感的なナビゲーションやきちんと理論的にまとまった機能を確保し、ユーザーのカスタマイズのための個別化オプションを提供しましょう。

そしてワークフローを効率化し、明確なフィードバックを提供することで、ユーザーの理解を深めましょう。アクセシビリティを考慮したデザインを行い、インターフェース全体の一貫性を維持して、関連サービスとのシームレスな統合を行い、セキュリティとプライバシーへのアプローチに重点を置きます。このような原則に従うことで、ユーザーの満足度とエンゲージメントを上げるインターフェースを作成することができるのです。

デザインを高度にインタラクティブかつコラボレーティブなものにするプロトタイピングツールである UXPin でユーザーフレンドリーなインターフェースを構築しませんか。UI デザイン、デザインハンドオフを効率化し、デザインと開発間の一貫性を保ちましょう。UXPin をぜひ無料でお試しください。

The post ユーザーフレンドリーって具体的になに？【徹底解説】 appeared first on Studio by UXPin.

開発フローで思い浮かぶのは、デザインからコードにするという形ではないでしょうか？デザイナーはデザインツールを使って、プロトタイプを作成し、デベロッパーはそれをコードに変換するという、標準的な製品開発プロセスでしょう。

UXPin Mergeでは、画期的な「Code-to-Design（コードからデザインへ）」ワークフローによって、このプロセスをひっくり返します。そこで本記事では、「Code-to-Design（コードからデザインへ）」と、それが製品開発プロセスをどのように強化するかを、４つのケーススタディとともに見ていきます。UXPin Merge の詳細はこちら。

「Code-to-Design（コードからデザイン）」とは

「Code-to-Design（コードからデザイン）」は、UXPinがMergeの技術を使って開発した UX ワークフローです。UXPin Mergeを使うと、コード化されたUIコンポーネントを使って完全にインタラクティブなインターフェースを構築し、デザインが完了したら製品コードをエクスポートできます。ちなみにコンポーネントはデザインからコードに変換されるのではなく、そもそもがコードです。

「Code-to-Design（コードからデザイン）」のワークフローで、デザイナーやステークホルダー、エンジニアは以下のようなメリットが得られます：

• デザイナーは完全にインタラクティブなプロトタイプを作成し、それでデザインプロセスにおけるテストの範囲が広がる。
• デザイナーはゼロからデザインしないため、市場投入までの時間が短縮される。
• プロトタイプが最終製品のように動作するため、ステークホルダーはデザインのビジョンを把握することができる。
• デザイナーとエンジニアが同じ「信頼できる情報源（Source of truth）」を使うため、デザインのハンドオフがスムーズになる。
• チームがデザインシステムを共有することで、その導入が問題にならなくなる。
• ドラッグ＆ドロップのワークフローにより、デザイナーでなくても製品デザインをより身近に感じられるようになり、デベロッパー、ステークホルダー、リサーチャーなどが自分ででプロトタイプを作成できるようになる。

「Design to Code（デザインからコード）」と「Code-to-Design（コードからデザイン）」

コードに合わせてデザインすると不整合が生じる

デザインからコードへの変換は、従来の UX ワークフローです。デザインチームは標準的な画像ベースのデザインツールを使ってモックアップやプロトタイプを作成し、それをデベロッパーがコードに変換します。

「デザインからコードへ」のワークフローは、デザイナーとエンジニアの間にギャップが生じるところに最大の課題があります。そしてデザイナーは、そのギャップを埋めるのに、外部ツールを使い、詳細なドキュメントを書き、デベロッパーと会ってプロトタイプやインタラクションがどのように機能しないといけないかを説明しないといけません。

このような余分な作業や説明をしても、最終製品がデザイナーの仕様や期待を満たさないことはよくあります。デザイナーとエンジニアはどちらに原因があるかをめぐって言い合いになりますが、本当の問題は「言葉の壁」です。デザイナーはベクターグラフィックツールで仕事をし、エンジニアはコードで仕事をしますからね。

「Code-to Design（コードからデザインへ）」で連携を促す

「Code-to Design（コードからデザインへ）」のワークフローによって、デザイナーとエンジニアの間のギャップを埋めることができます。両者は異なる言語を話しますが、Mergeのようなテクノロジーにより、デザインと開発の間のコミュニケーションがしやすくなります。

デザインチームは視覚的なUI要素を扱い、エンジニアはそれらを動かすコードを扱います。つまり、同じコンポーネントを２つの視点から扱うことになります。

そしてデザイン システムで作業するチームは、この「コードからデザイン」のワークフローから最大のメリットを得られます。

「デザインからコード」のワークフローでは、チームは以下の２つのバージョンのデザインシステムで作業します：

• デザインツール用画像ベースUIキット
• プログラミング用 UI コンポーネントライブラリ

「コードからデザイン」の場合では、デザインチームとエンジニアが同じレポジトリから同じコンポーネントライブラリを使うことができるので、この断絶がなくなり、「信頼できる唯一の情報源（Single source of truth）」ができます。

「Code-to Design（コードからデザインへ）」のユースケース

「”コードからデザイン” というのは聞こえはいいけど、実際の製品開発にはどう反映されるのか」と思っていることでしょう。ここでは、企業が製品開発に「コードからデザイン」を使っているユースケースを４つ見てみましょう。

１．PayPal

２０１９年、PayPal は UXPin Merge を使って社内の製品開発プロセスを完全にデザインし直しました。PayPal の社内 UX チームには、６０以上の製品を管理するエンジニアが１０００人以上いるのに対してデザイナーは５人という独特な課題がありました。そしてどの製品も同じようには見えず、それぞれにユーザビリティやデザインの一貫性の問題がありました。

PayPal の UXリード EPX であるエリカ・ライダー氏は、この問題の解決を任されました。さらに複雑なことに、彼女は PayPal の製品チームが製品をデザイン、テスト、提供できるようなワークフローも作らないといけませんでしたが、彼らにはデザインスキルがなく、デザインツールの経験もほとんどありませんでした。

そこで、従来の画像ベースのツールを使ってソリューションをいくつか試した後、エリカは Merge を発見しました。そして PayPal の UX チームは Merge を使って、カスタマイズされた Fluent UI デザインシステムを UXPin と同期させました。

PayPal のステークホルダーは、この新しい「コードからデザイン」への投資の効果をテストしたいと考えていました。そこでエリカは試し単一ページのプロトタイプを２バージョン作成しました。１つは画像ベースのツールを使い、もう１つは UXPin Merge を使ったところ、結果は予想以上のものでした：

• 画像ベースのツール：１時間以上
• UXPin Merge：８分

Merge のプロトタイプには、はるかに優れた忠実度と機能があり、Paypal の製品チームもコーチングを受けることで、同じ結果を得ることができました。

PayPal のケーススタディ全文はこちら。

２．Iress

ソフトウェア開発会社の Iress は、システムの成熟度をデザインするのに以下の４つプロセスを踏んでいました。

1. PDF スタイルガイド
2. CSS 付き HTML パターンライブラリ
3. UI キットとコンポーネントライブラリ
4. リリースにデザインやコードが要らない、完全に統合された「信頼できる唯一の情報源（Single source of truth）」

Iress は、チームが「コードからデザイン」のアプローチを発見する以前は、デザインと開発のギャップをどのように埋めて最終目標に到達すればいいか分からず、３番目で行き詰まっていました。

そしてこのワークフローは、その時点で Iress にとっての要件をすべて満たしていました：

• 製品の構築とリリースに必要なコンポーネントをデザイナーとエンジニアに提供する単一のレポジトリ。
• シームレスなデザインハンドオフにより、デザイナーとエンジニアの連携がよくなる。
• ゼロからのデザインやフロントエンドのプログラミングが不要。
• デザインの劣化や組織間の不整合が発生しない。
• リアルでインタラクティブなプロトタイプで、ユーザビリティテスト参加者やステークホルダーは最終製品の正確な表現を得られる。
• ダークモードやマルチブランドのデザインシステムで、テーマの切り替えを試すことができる。

Iress についての記事はこちら。

３．TeamPassword

先述の２つのユースケースは企業向け製品でしたが、「コードからデザイン」手法はスタートアップ企業や小規模チームにはどうでしょう？ TeamPassword は、競争の激しいパスワード管理市場で事業を展開していますが、このスタートアップは、UX デザイナーがいないことがの最大の課題です。

パスワードや機密データを預かるスタートアップ企業にとって、ユーザビリティの問題やデザインの不整合は信頼を損ない、それで TeamPassword の評判が落ち、チャーンにつながってしまいます。

そこで TeamPassword のエンジニアは、コードプロトタイプを使ってデザインとユーザーテストをすべて行いました。ただそのプロトタイプは、製品の機能と UX（ユーザーエクスペリエンス）を正確に表現していましたが、アイデアを構築して反復するのには時間がかかりました。

２０２２年、TeamPassword は MUI デザインシステムに切り替えて、Merge を使って UXPin と同期させました。その際、エンジニアはプロトタイプを開発するのではなく、UXPin でカスタム MUI React ライブラリを使いました。そしてこの「コードからデザイン」のワークフローで、ユーザビリティの問題やデザインの劣化がなくなり、市場投入までの時間が大幅に短縮されました。

TeamPassword のデザイナーがデザインシステムレポジトリを更新すると、変更が自動的に UXPin に同期されるため、常に最新バージョンを使うことができます。また、Merge のバージョン管理により、チームは変更を追跡し、テスト中にバージョンを切り替えることができます。

TeamPassword のケーススタディはこちら。

４．dotSource

dotSource は、ドイツを拠点とするデジタル製品のコンサルティングおよび開発エージェンシーであり、複数のデザインシステムを駆使して、クライアントに製品やソリューションを提供しています。

dotSource が製品を提供する上で最も大きな問題となったのは、デザイン用の UI キットと開発用のコンポーネントライブラリという２つのデザインシステムによる冗長なプロセスと重複作業でした。そこでデザインシステムのドキュメントにより、チームが維持する必要のある３番目の部分が作成されました。

dotSource の「信頼できる唯一の情報源（Single source of truth）」は、実際には ”唯一” ではなく３つでした。これは、多くの組織がデザインシステムで遭遇する問題です。

同社は、「信頼できる唯一の情報源（Single source of truth）」をコードベースにしないといけないのはわかっていましたが、従来の画像ベースのデザインツールを使ってこのワークフローを実現する方法がわかりませんでした。

dotSource は Merge の Storybook 統合を使ってデザインシステムを UXPin と同期しました。そして Storybook により、リリースごとにデザイン システムのレポジトリ、ドキュメント、UXPin のコンポーネントの更新ができます。

dotSource の記事はこちら（英語）。

UXPin での「Code-to Design（コードからデザインへ）」の仕組み

コードコンポーネントを UXPin にインポートする際、製品チームには以下の選択肢があります：

• 製品のデザインシステムを読み込む
• オープンソースの UI ライブラリを読み込む
• 無料トライアル版で利用可能な内臓のライブラリを使う

そのライブラリを UXPin に導入する方法は以下の３つがあります。

• Git 統合： React コンポーネントライブラリをレポジトリから UXPin に同期する。
• Storybook 統合：React、Vue、Angular、Web Components、Ember など、多くのフロントエンドフレームワークを同期できる（全リストは Storybook のドキュメントを参照）。
• npm 統合：デザイナーは、MCM（Merge コンポーネントマネージャ）を使って、npmレジストリからオープンソースライブラリからUIコンポーネントをインポートできる。

npm 統合およびコンポーネントマネージャーの使用に関するチュートリアルが 以下のように３つあります。

• React-Bootstrap
• Ant Design
• MUI

Git と Storybook の統合は少し複雑なので、UXPin のテクニカルサポートチームと協力してMerge のセットアップを完了するには、技術的なスキルが必要です。

「Code-to-Design（コードからデザイン）」を始めてみませんか？無料トライアルにサインアップして、製品開発プロセスのスピードを上げてチームが同じ方向を進める方法をぜひご覧ください。UXPin Merge の無料お試しはこちら。

The post Code-to-Design（コードからデザイン）２０２４年版完全ガイド appeared first on Studio by UXPin.

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.

２０２２年、世界のインターネットユーザー数は４９億５０００万人と推定されました。これは世界人口の６０％以上にあたります。

スマートフォン、タブレット端末、ノートパソコン、デスクトップパソコン、そしてウェブサイトやアプリケーションを多くの人が利用するには、使いやすい、効率的、そして楽しく使えることが重要になってきます。

その中心となるのが、UI（ ユーザーインターフェイス ）の存在です。

本記事では、UIの基礎と重要性を解説し、ウェブサイトやアプリでのデザインにおける覚えておくべきヒントをご紹介します。

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

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

UI（ ユーザーインターフェース ）とは、私たちがスマートフォンやノートパソコンなどのデバイスとやりとりする方法のことであり、ディスプレイ画面、キーボード、マウスなどが含まれることがあります。

私たちが遭遇するアプリケーションやウェブサイトにもそれぞれ UI があり、直感的で満足のいくデザインであることが求められます。Forester の調査によると、優れた UI はウェブサイトのコンバージョン率を最大２００％上げると言われています。

UI は、UX（ユーザーエクスペリエンス）と並んで語られることが多く、これには、ウェブページやデスクトップ、モバイルアプリの画面の視覚的なデザインや体験、ロード時間や応答性などの動作、ユーザーの生活における役割の理解度などが含まれます。

UI とUX は、どちらもHCI（ヒューマン・コンピュータ・インタラクション）の分野です。インタラクションデザインについては、「UXデザイン vs UIデザイン 覚えておくべき違い」をお読みください。

GUI（グラフィカル・ユーザーインターフェイス）とは、UI との違い

  UI には、さまざまな種類があります。

コンピュータの黎明期には、画面上に文字列を並べたCLI（コマンドラインインタフェース）で情報を提供することが多く、これは、UI の比較的基本的な例でした。

技術やデザインの進歩に伴い、画像、アイコン、ダイアログボックスなどが追加され、インタラクションがより身近なものになりました。これがGUI（グラフィカル ユーザーインターフェース ）であり、その名の通り、グラフィックが追加された UI です。GUI は、UIのサブセットとして考えるのが最も適切です。

もうひとつの UI は、VUI（音声 ユーザーインターフェース ）であり、例えばAmazon の Alexa や Apple の Siri などが挙げられます。

UIの構成要素

  UI は、要素で構成されています。アプリやウェブサイトの構成要素であり、一貫性を保つようにデザインされているため、ユーザーはデジタル製品を操作する際に何を予測すべきかがわかります。

何百もの例がありますが、一般的なデザインパターンは以下の通りです：

• 入力コントロール – チェックボックス、ドロップダウンリスト、ボタンなど
• ナビゲーションコンポーネント – パンくずリスト、スライダー、検索フィールドなど
• 情報提供コンポーネント – 進捗バー、通知、メッセージボックスなど
• コンテナ – アコーディオンなどの、コンテンツをグループ化するのに役立つ要素

  UIの要素について詳しく知りたい方は、「デザイナーが知っておきたいUI要素」をご覧ください。

優れたUIが製品の成功の鍵を握る理由

  調査によると、ユーザーがウェブサイトについての意見を持つのにかかる時間は、わずか０.０１７秒です。この瞬時の判断で最も重要なのは、見た目と使い勝手であり、さらに、ウェブサイトの離脱率の９４％は、デザインに関連していると言われています。

ウェブデザインやアプリの成功において、UIが重要であることは明らかであり、UIはビジネスをも左右する可能性もあるのです。次は、UIが重要である理由をさらに詳しくみていきましょう。

ユーザー獲得率の向上

  アプリやウェブサイトに良いデザインがあれば、新しい顧客を獲得することができ、競争力が上がります。以下に例を挙げましょう。

商品を買おうと思っているとして、同じ商品が異なる２社のサイトで同じ値段で売られています。このうち１社のウェブサイトは、ナビゲーションが明確でシンプルであり、多くのビジュアル要素を用いて製品をうまく紹介し、ユーザーが目標に到達するのに役立つ情報が提示されているといたとします。

一方、もう片方のサイトは、読み込みに時間がかかり、ナビゲーションが難しく、やっと目的の商品を見つけたと思ったら、情報はページの下の方に埋もれてしまい、購入ボタンが見つかりづらいデザイン…となるとどちらで商品を購入するかは一目瞭然ですね。

顧客維持率の向上 

  魅力的なUIデザインは、新規顧客の獲得に役立つだけではありません。サイトやアプリの使い方がシンプルであれば、ユーザーは定期的にサイトを訪れるようになるはずです。優れたUIは閲覧を促し、エンドユーザーがサイトに滞在する時間を長くしてくれます。

コンバージョンの可能性も高まるので、売上も増え、また、ユーザーがサイト訪問を途中で切り上げたり、競合他社のプラットフォームに移行する確率も低くなります。

ブランドロイヤリティの向上 

  もちろん、優れたUIによってエンドユーザーが何度もサイトを訪れるようになれば、ブランドへの愛着が生まれてきます。そして、ロイヤル顧客は、口コミで広めてくれたりするなど、非常に貴重な存在になります。

スケーラビリティ（拡張性）

  最も効果的なUIとは、「シンプルなデザイン」であり、必要なものだけがデザインされ、ウェブサイトやアプリに一貫性があり、ユーザーに優しいということです。つまり、使い・見やすくすることでユーザーの混乱を避けることができるのです。

デザインのシンプルさを実現すると、新しい機能の追加や、ウェブサイトやアプリのインフラの整備がしやすくなります。つまり、スケーラブル（より多くの人々に使ってもらえる）になるのです。

エラーの減少

 ユーザーテストは、UIデザインの重要なプロセスのひとつです。  

ユーザーテストには、段階がいくつかあります。プロセスを進めるにつれ、UX デザイナーはユーザー要件についてより深く理解し、ユーザージャーニーに関するあらゆる問題を解決していきます。そして、ブラッシュアップされたデザインは、より完成品に近いプロトタイプへと仕上がっていきます。

デベロッパーにデザインを渡すとき、UXデザイナーは、ウェブサイトやアプリのプロトタイプを操作で「ユーザーが直面する問題」を解決しておかなければいけません。それによって時間とリソースが節約され、デベロッパーは、最終製品がユーザーのために機能することを理解しながら、デザインに操作性や機能性をつけることができます。

UXデザイナーは、開発プロセスにおける問題解決に役立つインサイトを提供する立場にあります。たとえば、ページの読み込みが遅い場合、それがユーザーに与える影響を速やかに評価し、最終製品の成功に不可欠かどうかをデベロッパーが判断できるようにします。

アクセシビリティ

  優れたUIとは、ウェブサイトやアプリが誰にとってもアクセスしやすいものであることです。５人に１人には障がいがあり、オンラインでの情報アクセスが困難であると言われています。つまり、アクセシビリティのガイドラインに準拠することが必要になります。

詳しくは、「Webアクセシビリティ チェックリスト：遵守すべき２８点 」をご覧ください。

いいUIを作るためのアプローチ方法 

  いいUIは、プロトタイプから始まります。

プロトタイプが、実際に動作するウェブサイトやアプリの見た目や機能を反映していれば、UXに関するより具体的なフィードバックを得やすくなります。一方、プロトタイプが静止画像をつなげただけのような基本的なものである場合、デザインが実際に機能するかどうかをイメージ・判断するのは難しいでしょう。これでは、最終製品のユーザビリティが損なわれてしまう可能性があるのです。

UXPinは、完全な機能を持つプロトタイプが作成できるデザインツールです。コンポーネント駆動型であり、プロトタイプの構築はゼロから始めるのではなく、デザインチームがインタラクティブなコンポーネントをドラッグ＆ドロップします。これにより、デザインと構築のプロセスをスピードアップすることができます。

UXPinで作られたプロトタイプを操作する人は、データ入力、リンクのクリック、ページのスクロールなどができるため誰でも簡単に本物のインターフェースを使っていると思うでしょう。

ユーザーがプロトタイプを操作すると、UXPinはデータを取得し、何がうまくいっていて、何が改善されなければならないかをデザイナーに知らせます。

最終デザインをデベロッパーに渡すとき、UXPinのプロトタイプがあれば、デベロッパーは最終製品がどのように機能するかを明確に把握することができ、それによって、デザインチームと開発チームの連携がより円滑になります。

UIデザインの準備はいいですか？

UI は、単に美しさだけの問題ではなく、ユーザーがウェブサイトやアプリとどのように関わって、最終的にあなたのブランドをどのように認識するかを決定するものです。

上手くUIをデザインすることで、新規顧客やロイヤル顧客を獲得し、競合他社に対する優位性を高めることができます。

UIにシンプルなデザインの原則が取り入れられていれば、ビジネスの成長に合わせて製品を拡張しやすくなるはずです。あと、誰もがアクセスできるUIにすることの重要性にも理解を深める必要がありますね。

優れたUIの中心にあるのは、ユーザーテストです。UXPinのような強力なUXデザインツールは、確実にその助けとなります。

UXPinには、完全に機能するUI プロトタイプのデザインに必要な機能がすべて含まれており、コードに変換してデベロッパーと共有する前に、ユーザーとテストすることができます。UI デザインに携わっているのであれば、その機能性は必ずや役に立つはずです。

UIデザインを学ぼうとされている方にも、本記事がお役に立てたら幸いです。

14日間の無料トライアルはこちらより

The post UI – ユーザーインターフェース とは？【初心者向けガイド】 appeared first on Studio by UXPin.

Figmaでつくるプロトタイプは最終製品がどのように見えるかを視覚化し、デザインについての説明や、ユーザーフローを計画するには最適ですが、プロトタイプテストには不向きかもしれません。そこでUXPinの出番です。デザイナーはUXPinを使うことで、質の高いテスト結果をもたらすインタラクティブなプロトタイプを作成することができます。本記事ではこれら２つのツールについて詳しくみてみましょう。

主なポイント：

• Figmaはベクターベースのデザイン環境でリアルタイムでの連携を提供し、UXPinはコードベースのアプローチで高度なインタラクティブなプロトタイプを提供する。
• UXPinで提供するMergeなどの高機能により、複雑なインターフェースをFigmaよりも大幅に速く構築できる。
• プロトタイピングにおいて２つを比較した結果、UXPinでのプロトタイプは、Figmaで作成したときよりも８倍速く、よりインタラクティブであることがわかった。
• Figmaは、静的なモックアップ、低忠実度プロトタイプ、共同デザインの作成に優れているが、インタラクティブなプロトタイプ機能が欠けている。

UXPinが提供するMergeテクノロジーによって、デザインチームでもコードベースのプロトタイプの作成を可能します。これによって、デザインから開発への移行を効率化し、コストと時間を大幅に節約することができます。

デザインと開発のギャップを解消させ、UXPinのMergeテクノロジーで高忠実でインタラクティブ性のあるプロトタイプを作成してみませんか？詳しくはこちらのページをご覧ください。

Figmaとは

Figmaは、リアルタイムの連携を実現するベクターベースのデザインツールです。ワイヤーフレーム、モックアップ、プロトタイプ、情報アーキテクチャまで、様々なデザインアセットを作成することができます。

２０１６年にブラウザベースのベクターグラフィックス編集ツールとして誕生し、当時デザインツールの市場を独占していたAdobe製品に代わる人気ツールとなりました。多くのUX/UIデザイナーはFigmaのその使いやすさに惚れ込み、UIデザイン業務においてもFigmaが使われ始めました。

Figmaのプロトタイプは、他のチームにデザインについて説明するのに最適です。また、クリエイティブなプロトタイプ、デザインの探求、パワフルなドローイングを作成するのに優れています。一方、Figmaのプロトタイプでは開発環境の制約沿った高度なインタラクティブ性が欠けていますが、そこはUXPinでかなえることができます。

UXPinとは

UXPinは、部門横断的な連携向けのコードベースのフルスタックデザインツールです。インタラクティブ性のあるプロトタイピング機能はUXPinを使う上で最大の魅力であり、デザイナーは、最終製品のようなビジュアルと完全な機能性を持つプロトタイプを作成することができます。ライブラリやフォームを使うことで、ワイヤーフレーム、モックアップ、ユーザーフローマップ、情報アーキテクチャの作成も簡単に行うことができます。

UXPinのプロトタイプは、デザイナーがプロトタイプにインタラクションを追加して動きを加えることができます。テスト中でもユーザーの入力情報の保存や、ライブデータも使うことができるため、まさに “実物” のような操作性があります。

これらによって、デザイナーは次のようなことが可能となります：

• 堅牢でインタラクティブ性のあるプロトタイプの構築
• ユーザーやステークホルダーから高品質で有意義なフィードバックの獲得
• デザインハンドオフの効率化

FigmaとUXPin – プロトタイピングでの違い

Figmaは、コラボレーション機能とコンポーネントベースのアプローチによって、プロトタイプのための信頼性の高いソリューションを提供します。一方、UXPinではさらに高度なインタラクション機能と、Mergeテクノロジーによるデザインから開発へのシームレスなハンドオフを実現します。

UXPinとFigmaのプロトタイピング機能を簡単に比較してみましょう。

Figma:

• 基本的なインタラクションとトランジション： Figmaでは、デザイナーはクリック可能な基本的なトランジションを追加し、モックアップをより魅力的なものにすることができる。
• コンポーネントの作成とデザインシステム： デザイナーは、共有・再利用可能なコンポーネントを作成し、UIの一貫性を保つことができる。
• 協働デザイン機能： 複数のデザイナーが同時に同じデザインに取り組むことができ、それによってデザインプロセスが効率化され、集団での創造性が促進される。

UXPin:

• 高度でインタラクティブなプロトタイプ： 洗練されたプロトタイピング機能でステート、インタラクション、変数、式などの機能により、実物に近いプロトタイプを作成できる。
• Mergeの「Code-to-Design」手法： デザイナーは Reactコンポーネントをインポートして、最終製品と区別できないほどの「リアルな」プロトタイプを作成できる。また、Mergeはデザインと開発のギャップを埋め、シームレスな製品開発フローを提供する。
• リアルタイムの連携とユーザーフィードバック： UXPinのコメント機能は、チームメンバーやステークホルダーとの部門横断的な連携を促進する。また、ユーザーからのフィードバックをプロトタイプに直接取り込み、実際のユーザーのインサイトやステークホルダーからのフィードバックに基づいて、繰り返しデザインを改良できる。

FigmaとUXPinの比較 – 実際の使用例

シニアUXデザイナーのAnthony Hand氏は、UXPinとFigmaのプロトタイピング機能についての比較記事をMediumに書きました。チームは、関連するブランドカラーとサードパーティのアイコンを含む、カスタムのMicrosoft FluentのWebライブラリを作成しました。

彼はFigmaのFluent UIキットを使い、React UIライブラリのGitHubレポジトリをMergeを使ってUXPinにインポートしました。Reactコンポーネントには、レポジトリで定義されたスタイリングとインタラクティブなプロパティ、必要なコントロールとAPIを含みます。

対するFigma UIキットではFluent Design Systemの静的バージョンであり、デザイナーは関連の変数とインタラクションの設定が必要です。UXPinのReactコンポーネントと比べると、忠実度も機能もかなり劣ります。

実験

Anthony氏は、UXPinとFigmaのプロトタイピングの効率性を比較するために、両方のプラットフォームで同じ単一ページのプロトタイプを作成しました。Figmaではページのデザインで１時間かかったところが、UXPinではわずか８分で作成できました。

「UXPinのプロトタイプには、ライブドロップダウン、カレンダーボタン、ソート可能なデータテーブル、そしてインタラクティブな Highchartsの円グラフまでありました。」 – シニアUXデザイナー, Anthony Hand

Anthony氏がUXPinで作成したプロトタイプは、高品質で、エラーが少なく、Microsoft Fluentのライブコントロールを使用したインタラクティブな要素を備えていました。一方、Figmaのプロトタイプは８倍以上の時間を掛けてつくったにも関わらず、そのようなインタラクティブ性がなく、リアルタイムのインタラクションを減らすラスタライズされた画像に頼っていました。

Anthony Hand氏の見解

Figmaは、馴染みのあるグラフィックデザインのプラットフォームをWeb ベースで進化させたものであり、旧来のツールよりも進歩していますが、まだ限界があります。UXPinでは、コードベースのデザインアプローチで 「インタラクティブなプロトタイプ 」に重点を置いているため、デザイナーはライブコード要素を使ったデザインを作成でき、インタラクティブ性とリアル感がでます。さらに、UXPinでは、最小限の学習要件で単一のページに複雑なインタラクションを実装することができる機能があります。

「Figmaはもちろんすごくいいツールですが、UXPinの便利なスクリプティング機能を活用し、エンジニアが完成品で使用するのと同じライブHTML UIコントロールを使ったインタラクティブなUIをデザインできる方法を学んだ今、Figmaに戻れなくなりました。」シニアUXデザイナー, Anthony Hand

Figmaはプロトタイプ向きか

Figmaは素晴らしいUIデザインツールですが、最終製品のイメージをするためのインタラクティブなプロトタイプを作成するためには必要な機能が欠けています。ここでは、デザインプロセスにおいてFigmaを上手く使うための用途とその理由をいくつか見てみましょう：

• 静的なUIモックアップ： Figmaの直感的なUIと機能で、モックアップのデザインが難なくできる。
• 低忠実度（Lo-Fi）プロトタイプ： Figma は、画面間の基本的な遷移のみが必要なため、低忠実度のワイヤーフレームのプロトタイプに最適。
• 情報アーキテクチャ： デザイナーは、単一のアートボード上に画面を整理して、製品のアーキテクチャとユーザーフローのマッピングや視覚化をできる。
• 協働デザイン： Figmaでリアルタイムの連携がしやすくなり、それによってチームはコメント投稿やデザイン批評の実行、バージョン履歴へのアクセスができる。

Figmaでのプロトタイプの限界

以下を見ると、UXPinを検討したくなるかもしれません：

• インタラクティブ性のあるプロトタイピング： Figmaは、シンプルなクリック/タップのインタラクションを提供するものであり、ユーザーデータの取得や、ドロップダウンメニュー、カルーセル、アコーディオン、日付ピッカーなどの複雑なコンポーネントの作成は、Figmaではできない。
• ライブデータとAPI： UXPinと違い、Figmaでは ライブデータの読み込みができず、そのような複雑な統合には、エンジニアリングの入力が必要。そうなると、時間とリソースが増大してしまい、ほとんどのプロジェクトでは実現不可能になる。
• コードからデザインへ： Figmaはデザインからコードへの手法で動作する。つまり、デベロッパーはデザインをコードに変換する必要があり、時間のかかる複雑な作業である。Mergeがあれば、UXPinのコードからデザインへのワークフローによって、デザイナーはデベロッパーが使うのと同じ構成要素を使ってコードベースのプロトタイプを構築でき、製品開発ワークフローがシームレスになることで開発時間が大幅に短縮される。

UXPinでのプロトタイプ作成がいい理由

本記事に共通するテーマは「インタラクティブ性」であり、デザイナーは、現代のデジタル製品をインタラクティブなプロトタイプを使ってアイデアをテストすることを求められます。なぜでしょうか？

• 開発には時間とコストがかかる。デザインプロセスで問題を解決することで、組織は膨大な時間とリソースを節約し、それによって無駄な支出が減る。
• UXは、製品の採用、エンゲージメント、リテンションにとって極めて重要。インタラクティブなプロトタイプにより、デザイナーはデザインプロセスでユーザビリティの問題を解決し、製品の UXを向上させることができる。

デザイナーはプロトタイプやユーザーテストにおいてイメージベースのツールを使うと、デザインプロセスでのユーザビリティの問題やビジネスチャンスを見逃してしまいます。これによって、製品が提供するUXとバックログに変更を加えなければならず、負債や、回避できるはずのコスト増加に繋がってしまいます。

インタラクティブなプロトタイプがUXの負債を減らすには

Merge は、より良いテストとスムーズなデザインオフにより、無駄で回避可能なユーザー体験と技術的負債を減らすことができます。デザインチームは、プロトタイプ構築のためにデザインシステムのレポジトリからインタラクティブコンポーネントをインポートし、Figmaのようなイメージベースのツールではつくることができない 最終製品の正確なレプリカを作成することができます。

また、ユーザーとステークホルダーは、Mergeのプロトタイプを最終製品と同じように操作することができ、デザインチームは反復と改善のための正確で有意義なインサイトを得ることができます。

さらに、デザイナーとエンジニアがまったく同じコンポーネントを使うため、デザインハンドオフに必要なドキュメントや説明が少なくて済みます。デベロッパーは、同じレポジトリから同じUIライブラリをインポートし、UXPinからJSXの変更を適用して、最終製品を納品できます。

「UXPin Mergeによって、当社のエンジニアリング時間は約５０%短縮されました。数十人のデザイナーと数百人のエンジニアを抱える企業レベルの組織全体で、これがどれだけのコスト削減になるか想像してみてください。」  – UXリードデザイナー, Larry Page

より速い プロトタイプとイテレーション

Mergeは、ノーコード、ドラッグ＆ドロップのプロトタイピング環境をデザイナーのために効果的に作成します。Anthony氏のケーススタディからわかるように、Mergeに切り替えることで、同じUIライブラリを使って、Figmaよりも 8 倍速くUXPinでプロトタイプを作成することができました。

UXPinのプロパティパネルを使って、コンポーネントやプロトタイプの変更は早く効率的になります。それでも、デザイナーは単一の UI 要素に対して複数のバリエーションやステートを作成し、それを UXPinのパターンに保存することで効率を上げることができます。そしてデザイナーは、プロパティパネルで調整する代わりにコンポーネントを入れ替えるだけで、テスト中に即座にフィードバックを得ることができます。

「UXPinを使って、忠実度の高いプロトタイプを作成することができ、とても助かっています。忠実度の高いプロトタイプをより速く作成し、セッション後にすぐにフィードバックを得ることができます。修正箇所があれば、次のユーザビリティテスト参加者にはその変更を適用させ、今までよりもずっと早くフィードバックを獲得することができます。」プロダクト、UX、DesignOpsソートリーダー,  Erica Rider

UXPinのMergeテクノロジーを使ったインタラクティブコンポーネントで、プロトタイプレベルアップしませんか。詳細およびアクセスリクエスト方法については、こちらのページをぜひご覧ください。

The post 【 プロトタイプ 】FigmaとUXPin – できること、できないこと appeared first on Studio by UXPin.

プロジェクトに色を加えるのはいいですが、微妙な変化を区別できない人は多くいることを念頭に置いておきましょう。トーンの違いがよりはっきりしているのがベストです。

グレースケールでアプリを見ることで、弱視の人に何が見えるかがもっとよくわかります。また、色だけで提供される情報にはバックアップを追加すべきです。例えば、赤のハイライトやアウトラインだけでエラーフィールドをマークしている場合（名前が追加されていないなど）、どのセクションにエラーがあるかはシンボルやテキストで示されるべきです。これは、色を使って伝える可能性のあるものすべてに当てはまります。ページ上で何が起こっているのかを誰でも理解できるように、テキストや視覚的な説明文を入れましょう。

ホバー操作をさせない

マウス操作が苦手な人にとって、情報を得るために画面上の特定のポイントに長くカーソルを合わせようとすると、イライラすることもあるでしょう。ドロップダウンメニューはその良い例です。なので、マウスオーバーしたときにテキストがポップダウンするようにするか、クリックするとテキストが開くようにしましょう。そうすれば、キーボードでリストを移動できるはずです。

元のラベルの下に他のオプションを追加した場合、アクセシビリティのソフトウェアはそこに何があるのかを説明できない可能性があることに留意してください。デザインはシンプルにし、余分な情報や要素はページ自体に置くようにしましょう。

よりコントラストの高いテキストを作る

画面上で小さすぎたり明るすぎる文字を読もうとしたことがありますか。それはとても大変で、目を酷使します。コントラストが十分でない「普通のテキスト（文字）」がこのケースに当てはまるユーザーもいます。なのでテキストとその背景のコントラストは常に十分にしておくべきです。最低でも４.５対１を目指しましょう。また、テキストを読みやすくするもう一つの方法に、フォントサイズを大きくするか、太字を使うという方法があります。

フォームフィールドの境界を明確にする

検索の開始やフォームへのデータの入力をするのに、マウスでのクリックが必要な場所を正確に確認するのが常に簡単というわけではありません。多くのフォームには明らかなテキストボックスがありますが、背景に溶け込んだ空白が表示されているだけのものも少なからずあります。また、どこをクリックすればいいのかわからないようなテキストもあります。入力ボックスの周りに四角を追加するのは比較的簡単で、これによって入力ボックスがより利用しやすくなります。また、「ここをクリック 」や 「ここに名前を入力」といったテキストを追加するのもいいかもしれません。

フォームはまた、フィラーテキストではなくラベルを含むべきです。そうすることで、どこに何が求められているかがより明確になります。フォームフィールドにコントラストの高いラベルを付けるだけで、ユーザーにとってより簡単なものになります。

キーボードのフォーカスがどこにあるかがわかる方法を追加する

リセットスタイルシートを使うことで、デザイナーの仕事はシンプルになりましたが、キーボードだけで Web サイトを操作するのは難しくなります。なので独自のフォーカスボックスを作ることで、エンドユーザーの使いやすさを向上させたいものです。

フォーカスインジケータは、色がなくても一目瞭然である必要があります。ページやアプリのフォーカスインジケータを作成し、グレースケールでもわかるようにしましょう。また、ツールチップを追加することで、よりわかりやすくなり、キーボードのフォーカスがどこにあるのかを誰もが正確に把握できるようになります。

サイトやアプリをテストしてもらう

自身のプロジェクトに誰でも使えるアクセシビリティが備わってていることを確認するには、ユーザーテストに勝るものはありません。見た目のきれいなアプリを作ることにとらわれがちですが、機能的である必要もあります。デザイナーとして、仲間うちのデザイナーではなく、一般の人々のために何かをデザインするのは大変なことかもしれませんが、テスターは、潜在的な問題を知らせてくれるでしょう。

また、 アクセシビリティ の技術を使って、すべてが想定した通りに動作することを確認することも有用です。  アクセシブルなプロジェクトを始めませんか？ こちらから 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. 開発者が開発フェーズを終えると、デザイナーは品質保証プロセスを実施し、デジタル製品の外観と機能が正しく保たれていることを確認します。

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

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

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

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

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

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

UXPinでMUIを使ったデザイン

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

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

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

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

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