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デザイン と 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.

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（ ユーザーインターフェイス ）の存在です。

本記事では、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.

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

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

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

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

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

Design UI with code-backed components.

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

Try UXPin Merge

CRUD アプリとは

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

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

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

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

CRUD の４つの機能

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

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

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

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

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

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

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

CRUD アプリの例

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

WordPress

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

Salesforce

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

Shopify

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

Facebook

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

Trello

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

CRUD 機能に相当するもの

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

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

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

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

CRUD アプリの構築手順

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

要件の収集

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

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

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

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

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

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

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

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

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

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

データベースの設定

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

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

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

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

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

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

CRUD アプリのテスト

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

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

アプリのデプロイ

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

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

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

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

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

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

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

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

Webデザインは必ずしも安価ではありませんが、デザイナーにかかるWebデザインコストの中でも、まずはユーザーのコストを考慮するべきです。

モバイルユーザーは、Wi-Fiから離れた場所で多くの場合、ダウンロード（およびアップロード）するたびに、バイト（Byte）単位で料金を支払います。HTMLやCSSのファイルサイズは年々大きくなっていますが、JPGやPNG、アニメーションGIFのような大容量ではありません。細心の注意を払っているデザイナーは、できるだけ早くダウンロードできるWebサイトやアプリを作ることがベストプラクティスであるとわかっています。つまりそれは、マークアップから余分なdiv要素を削ったりするようなものです。

ユーザーにピクセルが必要ない場合は、ピクセルを送信しないようにしましょう。

「 レス ポン シブ 」を考えるというのは、単にメディアクエリをコードに叩き込むだけではなく、デザイナーが克服しなければならない独自の課題があります。さまざまなスクリーンでうまく機能して見栄えのするサイトを作るには、最初から画像に関するスマートな戦略が必要なのです。

難しいかもしれませんが、努力する価値は必ずあります。写真は千の言葉に匹敵するかもしれませんが、その重さが百万バイトでは、ユーザーは写真がダウンロードされる前に諦めてしまうかもしれませんからね。

デザインだけでなく全チーム間で一貫性が保たれやすくなるコード優先型のプロトタイピングソリューションであるUXPinを使ってプロトタイプを速やかに構築しませんか。コードベースのデザインシステムを共有できるようにしましょう。UXPinをぜひ無料でお試しください。

UIに適したフォーマットの選択

JPG、SVG、GIF、PNG（およびPNG-24）‐ Webデザイン初心者だと、この ３つを混同してしまうかもしれません。熟練したベテランでさえ、SVG で十分なのにJPGを選んだり、PNG-8 ではなく PNG-24 をデフォルトにしたりするのは珍しくないですからね。

JPG

JPEG は「Joint Photographic Experts Group」の略で、インターネットで転送される画像を標準化する手段として１９９１年に開発されて１９９２年に発表されました。当時は帯域幅が限られていたため、ユーザーはより少ないバイト数でより多くの画像を表示できるファイルを好んでいました。

JPG 形式は非可逆圧縮を採用しています。つまり、一度圧縮すると、画像を完全に元の品質に戻すことはできません。0～100 の尺度で品質が落ちる代わりに、ファイルが小さくなりますが、奇妙なことに、100% JPG 圧縮のファイルは、品質は最高でもファイルサイズは最悪であり、0% 圧縮では、ファイルは最小になりますが品質は最悪です。

アーティファクトとは、JPG 圧縮によってファイル サイズを小さくするために変更される画像の一部であり、目に見えるときは、約２０ピクセル四方の領域に色を集めたかのように、均一な色のブロックのように見えます。JPG画像は複雑な画像でも自然に見えるため、この形式は写真に最適です。

結論：JPG画像は、写真のようなディテールの多い複雑な画像に適している。

PNG (8-bit)

JPGとは異なり、PNG（Portable Network Graphics）ファイルは、ファイルを開いて再保存しても圧縮が進行しないロスレス圧縮を使います。代わりに、PNG-8ファイルには、使われているすべての固有の色のリストが含まれます。

ここで言う「固有」とは、肉眼では区別がつきませんが、「#FFFFFF」が 「#FFFFFE」ではないということです。各ピクセルにはファイルリスト内の色が割り当てられているため、同一のピクセルが貴重なバイトを浪費して既に述べたことを再現する必要がなくなります。

例えば最初の１００ピクセルが RGB（255,255,255）を使っている場合、それを述べる必要はなく、ピクセル 1〜500 がカラー #1 に属すると述べるだけです。なので、PNG 形式は完全にフラットな色の画像を圧縮するのに最適です。

結論：PNG-8 形式は、カラーテーブルと呼ばれるリストに最大２５６の固有の色を保持でき、ピクセルを完全に透明にすることもできる。このような事実により、PNG-8 は今日流行している「フラットカラー」の外観に最適。

PNG (24-bit)

PNG の他の種類である PNG-24 を使ったファイルは、圧縮が使われていないため、とてもきれいに見えます。また、カラーテーブルも使いません。PNG-24ファイルを保存するときは、ディテールが逐一保存されます…そして、それが問題なのです。

不透明度もまた問題です。PNG-8 の画像のピクセルは透明にすることができますが、０か１００かです。見えるか見えないかです。

結論：PNG-24 ファイルのピクセルは部分的に不透明になる可能性があり、その背後にある要素に色を付けることができる。この場合も、ファイルサイズは大きくなる。

GIF

GIF（Graphical Interchange Format）は、多くの点で PNG-8 に似ています。

GIF はあらゆるブラウザで広く受け入れられています。１９８７年から存在して定着しています（PNG はそれより少し新しく、１９９６年に登場しました）。GIF はカラーテーブルを使い、圧縮効率は PNG より平均して若干劣ります。また、ピクセルを完全に透明にすることができます。

GIFの特筆すべきは、１つのファイルに複数の「画像」を保持し、それを連続して表示できる点です。つまり、GIF はアニメーションに対応しているということです。アニメーション GIF ファイルは、アニメーションの開始や停止ができないため、実際にはインタラクティブではないことから、通常はデザインよりもコンテンツに使われます。また、ファイルサイズがやや大きいため、デザイナーはフラットカラー画像には GIF よりも PNG を好むことが多いようです。

結論：シンプルなアニメーションが必要な場合は、GIF が最適。それ以外の場合は、単色のイラストなどのシンプルな画像には PNG-8の少し効率的な圧縮方式、写真などの複雑な画像には JPEGを使うのがおすすめ。

各バイトを圧縮

画像ファイルの圧縮（冗長なデータの削除や、ダウンロードしやすいように画像を変更したりしてファイルサイズを小さくすること）は、Webサイトをサクッと読み込むのに極めて重要です。高速なWebサイトの結果、より多くのユーザーを獲得できますからね。

Photoshop、Sketch、Pixelmator などのほとんどの画像エディタは、Webに適した圧縮ファイルを難なくエクスポートしますが、それが必ずしも理想的というわけではありません。他のツールで、画像をさらに圧縮できるかもしれません。

圧縮サービス

1. Compress JPEG

名前の通り、この無料サービスでは、品質を犠牲にすることなく、あらゆる JPG ファイルから余分なバイトを取ってくれます。

Compress JPG により、フォトショップで ７０% で保存された上記の画像が ２１７ KB から １６０ KB にスリム化されました。ちなみに品質はそのままです。

2. TinyPNG

この無料サービスでは、８ビットおよび ２４ビットの PNG ファイルを圧縮して読み込み時間を短縮します。

TinyPNG は、カラー テーブル内のほぼ重複した色を削除することで、品質に影響を与えることなく、上記の画像を１６KB から１２KB に縮小しました。

バイト数の「多すぎる」「少なすぎる」はどのくらい？

画像によって異なりますが、できるだけ少ないバイト数で最高品質の画像を取得することが目標です。ただ、トリミングのしすぎになってしまう時があります。

JPG の場合

検証するために、上の写真をJPGの圧縮率を段階的に変えて保存してみました。結果は、圧縮率０％の４５KBから１００％の４７９KBまで幅がありました。ただこの言葉とは裏腹に、最も圧縮率の高いJPGが最も高品質（そしてファイルサイズが最も大きい）であることを覚えておいてください。

このグラフで、高圧縮領域での劇的な減少がわかります。画質を１００％から７０％に落としただけで、ファイルサイズはほぼ半分になりましたが、より低い圧縮率では、それほど大きな違いは見られませんでした。バイト数は０～２０%に下がったものの、品質が急速に落ちたため、節約に見合うほどではありませんでした。

画像は０％圧縮で４５KB（左）、３０％圧縮で９４KB（右）でした。ファイルサイズは半分になりましたが、アーチファクト、つまりJPG圧縮が効果を発揮するブロック状の部分の増加は、節約に見合いませんでした。

ベストプラクティス：「JPGファイルを７０% より高く、または ２０% より低く圧縮しない」これは厳格なルールではなくガイドラインですが、ほとんどの場合、２０～７０の範囲で対応できることがわかりました。

PNG の場合

PNG ファイルを見ると、話はより複雑になります。このグラフィックでも同じ実験を実行しました。

色が厳密にフラットではないことに注目してください。構図全体に細かいグラデーションがかかっていますね。これを考慮するには、微妙なグラデーションをシミュレートするドットのパターンである「ディザリング」が必要です。

JPG とは異なり、PNG フォーマットはパーセンテージを使いません。カラー テーブル内の色の数によって品質が決まり、ある程度はファイル サイズも決まります。８８% のディザリングでは、結果はまあ…

一般的に、色数とファイルサイズには関係がありますが、それほど多くはありません。フォトショップだと、限られたカラーテーブルで最適なパターンを見つけるのが大変でした。実際、４０色は２５色とほぼ同じバイト数で、ファイルサイズは同じですが、品質ははるかによかったです。

ベストプラクティス：「PNG からバイトをすべて絞り出す際に最良の結果を得るには、さまざまなカラーテーブルを試してみるのが最善である。」。残念ながら、適切な量は画像ごとに異なる主観的な問題であり、いつ 「適切」に見えるかはあなた次第です。

SVG

SVG（Scalable Vector Graphics）は、ピクセルの代わりに線（ラスター画像の代わりにベクター）を使って線画を表示します。SVG は実際には XML の一種で、Inkscape や Adob​​e Illustrator などのプログラムで簡単に作成できます。

SVG ファイルは、ディザリングなしでグラデーションを生成でき、古いスマートフォンからワイドスクリーンTVまで、あらゆるサイズのコンテナに合わせて拡大縮小できます。また、SVG ファイルは、ベクターとしてブラウザがその場で点と点を結ぶため、解像度が落ちることはありません。そして JavaScript でアニメーションさせることもでき、 HTML 文書にそのまま埋め込むこともできます。

上: ベクター アート (左) は適切に拡大されます。一方、ラスターアート (右) はブロック状でピクセル化されて見えます。

ただし、PNG や GIF と同様に、SVG も画像が複雑になるにつれて悪くなります。写真には不向きで、点や曲線が増えるにつれてファイルサイズが急速に大きくなります。

ベストプラクティス：「シャープな線と緩やかなグラデーションを備えたフラット 2.0 の外観を求めており、最新のブラウザ（IE8は残念ながら対象外）を対象としている場合は、SVG を使う」のがおすすめです。

コードに関する考慮事項

画像ファイル自体以外にも、コードを使ってさまざまな状況にピクセルが適切に応答するようにすることができます。

必須の CSSのプロパティ

最も一般的で、最も信頼性の高いソリューションの１つは、CSS のちょっとした設定です：

img { max-width: 100%; }

このセレクタとプロパティで、ほとんどの画像がコンテナに収まるようになります。例えば、メディアクエリでラッパーを幅３００ピクセルに設定すると、そのラッパー内の画像は３００ピクセルを超えることはありません。このテクニックには、モダンブラウザ全体で優れたサポートがあるため、今日、多くのレスポンシブWebサイトで見かけることができます。

将来の HTML画像要素

今日、私たちは CSS と <img>要素 による背景画像に制限されていますが、新しい技術が実装されると（されれば）、レスポンシブWebデザインのページレイアウトと同じように画像もレスポンシブ化されることになるでしょう。

実験的な <picture> 要素には、メディア クエリを使っていつ読み込むかを宣言する <source> 子要素が１つ以上含まれており、ブラウザは、<picture> 内の <img> 要素の src 属性を、（存在する場合は）関連するソースに置き換えます。

例えば：

<picture alt=”Descriptive text fallback”>

 <img src=”sample-default.png”>

 <source srcset=”sample-large.png” media=”(min-width: 640px)”>

 <source srcset=”sample-small.png” media=”(max-width: 639px)”>

</picture>

上記のコードは、画像コンテナの幅に応じて、sample-default.png を大きいバリエーションまたは小さいバリエーションに置き換えます。

おまけに、<picture> に対応していないブラウザでも、デフォルトの <img> 要素は普通に読み込まれます。これは、本記事の執筆時点（2024年4月時点）では、この要素は広く受け入れられているわけではないので朗報です。実際、現在これらの要素に対応している最新のブラウザはほとんどありませんが、<picture> と <source> のサポートは拡大しつつあるので、今後どうなるのか注目しましょう。

ブラウザレンダリング

最高の画像は何もない状態であることもあります。最近のブラウザは、グラデーション、アニメーション、ベジェベクター、影、幾何学図形など、独自のグラフィックをレンダリングできます。ちょっとした工夫で、ストライプを作ることもできるんです。

ブラウザで画像を作成すると、ユーザー側に視覚的な負担がかかります。画像ファイルをダウンロードする必要がないため、帯域幅と時間を節約できますが、ブラウザに特定の機能が必要です。

ベストプラクティス：「ブラウザレンダリングは、背景色や派手なボーダーなどの美観のために使うが、コンテンツのために依存せず、派手な CSS3 のトリックを使わずに、あるいは CSS をまったく使わずに、デザインの可読性を常にテストする」ことがおすすめです。

UIデザインへの影響

アイコンから背景、コンテンツに至るまで、画像がいい UI（ユーザーインターフェース）にとって重要であることは間違いありませんが、レスポンシブ画像は、帯域幅の問題やサイズの問題などの多くの課題に直面しています。

完璧な世界であれば、小さなビューポート用に画像をトリミングし、最も重要な部分に焦点を当てるか、さまざまなブレイクポイント用に異なる画像をアップロードする機能があるはずです。それは可能です。回避策はありますし、 <picture> と srcsetに期待しましょう。ただそれまでは、様々なデバイスやブラウザで読めることを確認するために、様々なサイズで画像をテストすることがベストプラクティスと言えるでしょう。

レスポンシブWebデザインに携わるデザイナーは、画像を考慮しないといけません。適切なファイル形式の使用や圧縮の最適化（やりすぎは禁物）、将来のテクノロジーへの注視は、Webサイトサイトをサクッと読み込み、あらゆるサイズ、解像度、向きの画面で美しく表示するための大きな助けになります。

結局は、ユーザーにとって何が最も役立つかという疑問に行き着きます。

デザインライブラリからインポートした画像、ビデオ、GIFを使ってUIを作成しませんか。

コード優先型のUIデザインのためのオールインワンデザインソリューションであるUXPinをぜひお試しください。UIを８.６倍速く構築して、ベクターをコードに変換せずに本番環境対応のコードをコピーしましょう。UXPin の無料お試しはこちら。

The post レスポンシブ画像 – 決定版ガイド appeared first on Studio by UXPin.

ダブルダイヤモンドのデザインプロセスは、問題の特定や、ソリューションの開発のために広く使われている方法論であり、この成果ベースのフレームワークは、核となる問題とエンドユーザーへの影響に焦点を当てながら、創造性と革新性を促します。

世界最先端のプロトタイピングツールで、より良い製品をユーザーに届けませんか。無料トライアルにサインアップして、UXPin によるインタラクティブなプロトタイピングをぜひお試しください。

ダブルダイアモンドとは

ダブルダイアモンドモデルは、２００３年にブリティッシュデザインカウンシルによって開発されたイノベーションとデザインのためのフレームワークです。デザインカウンシルは、どのような手法やツールを用いても、プロジェクトを実現するためのシンプルなデザインプロセスを求めていました。

デザインのフレームワークには２つのダイヤモンドが以下のようにあしらわれています：

• 問題を表すダイヤモンド
• ソリューションを示すダイヤモンド

デザイナーはこのダイヤモンドの中で仕事をし、このダイアモンドで彼らは問題を真に理解し、ソリューションを徹底的にテストすることができます。

デザイナーは、最初のダイヤモンドで核となる問題を特定すると、２番目のダイヤモンドの基礎となるデザインブリーフを作成します。２つ目のダイヤモンドでは、プロトタイプを作成し、リリース準備が整うまでソリューションをテストすることに重点が置かれます。

ダブルダイヤモンドデザインプロセスの起源

私たちがデザインフレームワークとして知っているダブルダイヤモンドは、ブリティッシュデザインカウンシルから生まれたものですが、このプロセスは、ハンガリー系アメリカ人の言語学者であるベーラ・H・バーナシー氏の「発散-収束モデル」から影響を受けています。

ベラのモデルは、最初のダイヤモンドを使って問題を広く深く探求し（発散的思考）、次に適切な集中的な行動をとる（収束的思考）というデザインフレームワークと非常によく似ています。

ダブルダイヤモンドデザインプロセスにおける４つのフェーズ

ダブルダイヤモンドのデザインプロセスは、２つのダイヤモンドと「４D」とも呼ばれる以下の４つのフェーズで構成されます：

1. 発見（Discover）
2. 確定（Define）
3. 開発（Develop）
4. 提供（Deliver）

ダイヤモンド１ – 問題の発見と定義

最初のダイヤモンドは、UXリサーチと探索に関するもので、多くの場合「問題空間」と呼ばれます。 ‐ デザイン思考プロセスの共感と確定のステージに似ていますね。

デザイナーはまず、問題とユーザーのニーズを調べることから始めますが、このフェーズには、アナリティクスや UX成果物のレビュー、エンドユーザーへのインタビュー、サービスサファリの実施、その他の初期段階のリサーチ方法が含まれる可能性があります。

第２フェーズでは、デザイナーは「発見」フェーズでのリサーチを用いて、問題とそれがユーザーに与える影響を確定しますが、デザインチームは、核となる問題にたどり着くまで、第１フェーズと第２フェーズを何度か繰り返すことがあります。そしてデザイナーが作成する UX 成果物には、以下のようなものがあります：

• ユーザーペルソナ：対象とするユーザーの架空の人物像で、その特徴やニーズを概説する。
• カスタマージャーニーマップ： タッチポイント間のユーザー体験を可視化した成果物。
• 問題ステートメント：取り組むべき具体的な問題を簡潔に表現したもの。
• 共感マップ：理解と共感を促進するために、ユーザーの思考、感情、行動を図示したもの。

第２フェーズの最後では、デザイナーはデザインブリーフを作成して、それをデザインプロセスの後半で適切なソリューションを見つけるための指針とします。

ダイヤモンド２- ソリューションの開発と提供

 ２つ目のダイヤモンドでは、適切なソリューションを見つけるためのアイデア出し、プロトタイプおよびテストを行います

開発のフェーズでは、ダブルダイヤモンドのフレームワークの中でも、チームが以下のようなさまざまなツールや手法を用いる忙しいフェーズです：

• ワークショップとブレーンストーミング：チームとして集まって、アイデア出しや仮説立て、実験の実行、可能性のあるソリューションについての話し合いを行う。
• 低忠実度（Lo-Fi）デザイン：スケッチ、ワイヤーフレーム、ペーパープロトタイプなど、デザイナーが多くのアイデアをサッと開発してテストするのに使われる、忠実度の低い（Lo-Fi）メソッド。
• 部門横断での連携：デザイナーは、エンジニア、プロダクトオーナー、その他のステークホルダーとミーティングを行い、可能性のある課題や制約に関するフィードバックを得るためにアイデアを話し合う。

開発のフェーズは、デザイナーが以下の点において最も可能性の高いソリューションを１つ特定するまで、アイデア出しやプロトタイプ、さまざまなアイデアのテストを繰り返すプロセスです：

• 問題を解決する
• ユーザーのニーズに合わせる
• 予算と技術的制約を満たす

状況によっては、デザイナーはソリューションを１つ選ぶか、いいと思うアイデアを２つ３つ選んで、提供のフェーズで忠実度の高いプロトタイプとテストを行います。まずは、１つのソリューションにたどり着くまで、うまくいかないものを排除することを目標にします。

それでデザイナーは、１つのソリューションにたどり着くと、最終的なプロトタイプを改良すべくさらにテストを行います。この一連のテストにおいて、デザイナーは、最終的な結果でデザインブリーフとステークホルダーが確実に満足できるように、ユーザビリティと UX（ユーザーエクスペリエンス）に焦点を当てます。

また、デザイナーは問題に遭遇すると、ソリューションを見つけるために開発のフェーズに戻り、ソリューションが見つかるまで反復とテストを繰り返します。

プロトタイプとテストが完了すると、デザインチームは、ドキュメント、注釈、アセット、他にもエンジニアがリリースのために最終製品を開発するのに使う指示など、デザインハンドオフに備えます。

あとは、デザインチームは UX監査と QA（品質保証）を実施し、最終リリースが確実にプロジェクトの要件、ビジネス目標、ユーザーニーズを満たしているようにする必要があります。

ダブルダイヤモンドデザインプロセスの使い方

ダブルダイアモンデザインプロセスをワークフローに活用する実践例を見ていきましょう。

第１フェーズ：発見

• ユーザーリサーチ：ターゲットユーザーへのインタビューやアンケートを実施する。
• 市場調査：競合他社や業界動向の調査
• ステークホルダーへのインタビュー：ステークホルダーからインサイトを得る。
• 共感マップ作成：共感マップを作成して、ユーザーの感情や動機を理解する。

第２フェーズ：確定

• データの統合：親和図を使ってパターンを特定する。
• 問題提起：明確で簡潔な問題ステートメントを作成する。
• ユーザージャーニーマップ：ユーザージャーニーをマッピングして、ペインポイントを特定する。
• デザインブリーフ：プロジェクトの目標と制約をまとめたブリーフを作成する。

第３フェーズ３：開発

• アイデア出し：共同ワークショップを通じてソリューションをブレインストーミングする。
• プロトタイプ：ワイヤーフレームやスケッチを作成する。
• ユーザーテスト：実際のユーザーとプロトタイプをテストする。
• イテレーション（反復）：フィードバックに基づいてデザインを改良する。

第４フェーズ：提供

• 高忠実度（Hi-Fi）プロトタイプ： 忠実度の高いモックアップでデザインの詳細を最終決定する。
• 開発：デザイナーとデベロッパーの密接な連携により、サイトを構築する。
• 品質保証：広範なテストを実施する。
• 立ち上げと監視：サイトを立ち上げ、継続的にパフォーマンスを監視し、さらなる改善を図る。

ダブルダイヤモンドデザインプロセスに従うことで、徹底したユーザー中心のアプローチで新しいサイトをきちんとデザインできることから、ユーザーのニーズを深く理解し、ソリューションを探って改良を重ね、最終製品を効果的に実装して立ち上げることによる、成功の可能性の最大化につながるのです。

UXPin でエンドツーエンドのUXデザインを試してみよう

プロトタイプとテストは、ダブルダイアモンドフレームワークなどのエンドツーエンドのデザインプロセスにおいて重要な意味があります。デザイナーは、潜在的なソリューションの徹底的なテストや正確な結果の獲得のために、高品質のプロトタイプの使わないといけません。

残念ながら、高忠実度のプロトタイプは、特定のツールでは時間がかかることがあり、ダブルダイヤモンドのデザインプロセスで多くのアイデアをテストするには理想的ではありません。

UXPin の完全インタラクティブデザインなら、デザイナーはスピードのために品質を妥協する必要はなく、最終製品のような外観と機能を備えた、忠実度の高いプロトタイプを作成できます。そしてより良いプロトタイプだと、テスト時に正確な結果がもたらされることで、デザイナーは画像ベースのデザインツールでもっと色々できるようになります。

UXPin には組み込みのデザインライブラリも標準装備されていることから、デザインチームはコンポーネントをドラッグ＆ドロップして、忠実度の高いモックアップを数分で作ることができます。数回クリックすれば、インタラクションを追加して、以下のコードのような機能を持つプロトタイプを作成できます：

• ステート：任意の要素に対して複数のステートを作成し、それぞれに個別のプロパティとインタラクションを設定できる。
• 変数：ユーザーの入力を捉えてデータに基づいたアクションを実行することで、ダイナミックで個別化された UX（ユーザーエクスペリエンス）をテスト中に作成する。
• 条件付きインタラクション: 「if-then 」と「if-else 」のルールを作成し、ユーザーのアクションや入力に対してさまざまな反応を実行する。
• Expression：フォームのバリデーション、計算コンポーネント、パスワード認証のシミュレーションなど、従来はコードでしか実行できなかった複雑な操作を実行する関数をデザインする。

どんなフレームワークでも、UXPin だとデザインプロセスを強化して、顧客により良いユーザー体験をお届けできます。無料トライアルにサインアップして、UXPin によるコードベースのデザインの可能性をぜひご体験ください。

The post ダブルダイヤモンドのデザインプロセス – 製品デザインを成功に導くおすすめのフレームワーク appeared first on Studio by UXPin.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

１．Amazon

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

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

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

２．USA Today

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

出典：USA Today

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

３．IHG

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

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

出典：IHG

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

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

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

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

写真提供： Smashing Magazine

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

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

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

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

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

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

１．Slack

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

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

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

出典：Slack

２．Shopify

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

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

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

３．Dribbble

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

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

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

出典：Dribbble

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結論ですか？

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

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

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

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

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

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

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

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

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

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

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

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

ボタンが小さすぎる 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UXPinでUIをデザインしよう

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

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

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

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

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

主なポイント：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

視覚的階層を構成する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

２．拡張可能な行と列

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

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

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

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

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

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

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

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

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

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

５．列の並べ替え

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

現代のWeb サイトやアプリは、UI（ユーザーインターフェース）の開発、保全、拡張のためにフロントエンドフレームワークに依存しています。

ReactのJavascriptライブラリは、デジタル製品を構築するための多くのコンポーネントライブラリを備えた、間違いなく最もよく使われているフロントエンドフレームワークです。

そこで本記事では、Reactのおすすめライブラリと、次のプロジェクトに適したライブラリの選び方を見ていきます。

UXPin Mergeで Reactコンポーネントライブラリ を同期できるので、すぐにリリース可能なレイアウトを超高速で構築することができます。こちらからUXPin Mergeをぜひご覧ください。

 Reactコンポーネントライブラリ を選ぶ際に考慮すべき６点

以下は、次のプロジェクトで Reactコンポーネントライブラリ を選択する際に考慮すべきポイント６つです。

※これらは完全版のリストではないので、この中には皆さんが構築中の製品に当てはまらない場合もあります。

１．人気

GitHubの星評価では各Reactライブラリの人気をサクッと比較でき、npmの週間ダウンロード数でも、そのコンポーネントライブラリの利用者数を見ることができます。

一般的に言うと、Reactライブラリの人気は、「React」というものの存在が十分に確立され、その目的を果たしているということになります。

２．問題

星評価と同じように、GitHubにあるライブラリの問題を見れば、そのライブラリの人気やメンテナンスの程度がわかります。

そのライブラリに最小限の問題が見つかったとして、それが今作ろうとしている製品に影響を与えるでしょうか？

３．ドキュメントおよびサポート

Reactライブラリを選択する際、ドキュメントは重要な検討事項となります。トラブルに遭遇したり、特定のコンポーネントの使い方を知りたくなったりするたびに Stack Overflowに走るのは避けたいですからね。

そしていいドキュメントというのは定期的に更新されており、ライブラリを包括的に理解することができるものです。

また、Reactライブラリがクリエイターから直接サポートを受けられるのか、専用のコミュニティフォーラムを経由してサポートが受けられるのかも知っておきたいところです。

課題を克服するために専門家のアドバイスが必要な場合もありますからね。

問題を速やかに解決してプロジェクトを進めるには、（たとえお金を払うことになっても）助けを求めることができるのが極めて重要です。

４．カスタマイズ

コンポーネントライブラリを使うことの欠点の１つに、その制約とカスタマイズの欠如があります。

プロジェクトによってはカスタマイズは関係ありませんが、ユニークなUIを開発したいのであれば、独自のデザインシステムを構築できるというのは不可欠です。

ライブラリのドキュメントを調べて、コンポーネントをカスタマイズする手順や、希望する結果を簡単に実現できるかどうかを確認しましょう。

５．ブラウザやデバイスの互換性

デザインするアプリによっては、コンポーネントライブラリのブラウザとモバイルの互換性を知りたいでしょう。ブラウザやデバイスの互換性を調べるには、GitHub の 「issues」 や Stack Overflowで検索するのが一番手っ取り早いです。

６．アクセシビリティ

アクセシビリティは、時間がかかりますがデジタル製品のデザインに欠かせない考慮事項です。

Reactライブラリがコンポーネントのデザインの際にアクセシビリティを考慮していない場合は、それを自分で行う必要があり、ポイント３番目と４番目、つまり「ドキュメント」と「カスタマイズ」に戻ります。

結局、どの Reactコンポーネントライブラリ が一番いいのか

プロジェクトに最適な Reactコンポーネントライブラリ は、特定のニーズや好みによって異なりますので、決定する前に、ドキュメントの質、コミュニティのサポート、活発な開発、プロジェクトの要件との整合性などの要素に基づいて各ライブラリを評価することをお勧めします。

ライブラリを比較するには、デザイン思想、提供されるコンポーネント、テーマ設定機能、ドキュメント、コミュニティサポート、エコシステムなど、さまざまな面の評価が含まれます。

Material-UI (MUI) と Ant Designを例にとってみましょう。

Material-UIは、Material Designのシステムに従った Reactコンポーネントの包括的なセットを提供します。これには、ボタン、カード、フォーム、ナビゲーションなどのコンポーネントと、幅広いカスタマイズ オプションががあります。

Ant Designには、レイアウト、フォーム、ナビゲーション、データ表示など、エンタープライズアプリケーション用に調整された豊富なコンポーネントコレクションがあり、データの可視化やビジネスロジックに特化したコンポーネントを提供します。

 Reactコンポーネントライブラリ ５選

２０２４年の React ライブラリ５選を以下で見てみましょう。

注：GitHub の星評価とNPMのダウンロードに関する情報は、２０２４年３月時点のものです。

１．MUI (Material-UI)

• GitHub のスター数：９１３,０００
• 週間 NPM ダウンロード数：３４０万
• 公式サイト：mui.com

MUI は、最も包括的で広く使用されている Reactコンポーネントライブラリ の１つであり、世界で最も広範なUIキットの１つである GoogleのマテリアルデザインUIに基づいて構築されています。

コンポーネント

MUIには、モバイルや Web アプリケーション、Web サイト、ウェアラブルアプリまで、あらゆるものを構築するデザイナーのための膨大なコンポーネントライブラリがあります。

また MUI Core は、日々のデジタル製品で目にする基本的なUIコンポーネントを提供します。

MUI X には、データテーブル、データピッカー、チャートなどの複雑なUI を構築するための高度な Reactコンポーネントのリストがあります。

MUI コードコンポーネントを使ったデザインを試してみたい方は、UXPin のトライアルに申し込むと１４日間UXPinにアクセスできます。UXPinのMUI 5 キットについてさらに読む。

テーマ設定とカスタマイズ

MUI の最大の魅力の１つに、コンポーネントをテーマ設定してカスタマイズできる点があります。デザイナーは、MUI を基盤としてデザインを速やかに拡張することができますが、ライブラリを適応させて、製品や組織のためのカスタムデザインシステムを構築することもできます。

また、デザイナーは、コンポーネントをカスタマイズする際にユーザビリティの問題を回避するために、Material DesignとMUIの包括的なガイドラインを活用することもできます。

さらに、MUI には、ダッシュボード、EC サイト、ランディングページなどの React のテーマテンプレートを購入できるテンプレートのマーケットプレイスもあります。

ドキュメント

MUIのドキュメントは、コンポーネントライブラリと同様に詳細かつ包括的だと言えるでしょう。

MUI のキュレーターは、インストール、使用方法、カスタマイズ、アクセシビリティなど、デザイナーやデベロッパーにステップバイステップの手順やガイドラインを提供すべく、細心の注意を払っています。

また YouTubeには、MUIのユーザーやコントリビューターの大規模なコミュニティから、ベストプラクティス、チュートリアル、ヒントやコツ、ハウツーガイドなどを提供するビデオが大量にアップされています。

２．React-Bootstrap

• GitHub スター数：２２２,０００
• 週間 NPM ダウンロード数：１３０万
• 公式サイト：react-bootstrap.github.io

２０１１年に設立された Bootstrap は、Webサイトやアプリケーション向けの最も古くて広く使われているオープンソースの CSS フレームワークの１つです。

また、Bootstrapは、モバイル優先型の Web 開発を優先した最初の CSS フレームワークの１つで、デザイナーはレスポンシブな Web サイトをサッと構築したり拡張することができます。

React-Bootstrapは、Bootstrap の Javascript を置き換えると同時に、JQuery のようなリソースの重い依存関係を排除して、包括的かつシンプルな Reactコンポーネントライブラリ を構築します。

コンポーネント

Bootstrapに馴染みがあれば、React-Bootstrap の一般的な外観のコンポーネントライブラリがすぐにわかるでしょう。

CSS の前身と同様に、React-Bootstrapは、モバイル アプリケーションよりも Webデザインを優先するUIコンポーネントを特徴としています。

テーマ設定とカスタマイズ

React-Bootstrapは、最小限のスタイリングで非常に汎用的なので、デザイナーにとって微調整やカスタマイズがしやすくなっています。

Bootstrap では、クラスとバリアントが定められているため、CSS を使ってコンポーネントを選択してカスタマイズするのは簡単です。

また、Bootstrap の長い歴史と幅広い用途のため、管理ダッシュボードから多目的な Web サイト、Eコマース、ランディングページなど、あらゆるもののための無料およびプレミアムの React-Bootstrap テーマやテンプレートが大量に見つかります。

ドキュメント

React-Bootstrapには、MUI ほど詳細で包括的ではないものの、優れたドキュメントがあります。React-Bootstrap はそのシンプルさと命名規則により、理解、使用、カスタマイズが最も簡単な React ライブラリの 1 つとなっています。

Bootstrap は、Stack Overflow でも幅広く紹介されているので、ほとんどの問題の答えが見つかるでしょう。また、アドバイス、チュートリアル、デザインプロジェクトなどを提供するブログやYouTubeビデオも多数あります。

３．Semantic UI React

• GitHub スター数：１３２,０００
• 週間 NPM ダウンロード数：２５３,０００
• 公式サイト： react.semantic-ui.com

Semantic UI React は、React-Bootstrap に代わるものとして人気があります。

React-Bootstrap と同様に、Semantic UIは、そのコントリビューターが Reactコンポーネントを構築するために使うオープンソースの CSS フレームワークとして始まりました。

コンポーネント

Semantic UI React には、Web サイトや Web アプリケーションのための幅広い UIコンポーネントがあり、そのコンポーネントは、ミニマルでシンプルでありながら、Bootstrap よりもクリーンでモダンなスタイリングを提供します。

また、Semantic UI React は、１,６００以上の無料アイコンと７,８６４以上のPro（有料）などの FontAwesome のアイコンセットを使用しています。

テーマ設定とカスタマイズ

Semantic UI は直感的でわかりやすい命名規則を使っているので、コンポーネントのカスタマイズが簡単であり、ドキュメントには、Semantic UI React を使ったテーマ設定のステップバイステップガイドもあります。

ちなみに、MUI やReact-Bootstrapとは異なり、Semanticにはテンプレートオプションがほとんどありません。

ドキュメント

Semantic UI Reactのインタラクティブなドキュメントでは、CodeSandbox のサンプルが提供され、コードを検査したりコンポーネントで色々と試すことができます。

また、ドキュメントでは、コンポーネントを多角的に視覚化するために、例、コード、プロップを切り替えることができます。

４．Ant Design (AntD)

• GitHub スター数：８９９,０００
• 週間 NPM ダウンロード数：１２０万
• 公式サイト：ant.design/docs/react/introduce

Ant Design (AntD) も、中国最大のオンライン マーケットプレイスである Alibaba の親会社である Ant Group によって開発された、広く使用されている人気の Reactコンポーネントライブラリ です。

MUI と同様に、Webアプリケーションとモバイルアプリケーションの両方に膨大なコンポーネント ライブラリを提供します。

ちなみに AntD は、本記事で紹介されている、JavaScript の一種である TypeScript を使う唯一の React ライブラリです。

コンポーネント

AntDには、モバイルデバイス用の無限スクロールや Pull-to-Refresh のような UI パターンなどの、デスクトップとモバイル用の膨大なコンポーネントライブラリがあります。

また、Ant Design ProComponents には、複雑なインターフェースを構築するための高度な React UI 要素（MUI Xに類似）があります。

また、プロジェクトをスタートさせ、UI をより速く構築するための既成のテンプレートやスキャフォールドの膨大なライブラリーもあります。

テーマ設定とカスタマイズ

AntD は、デベロッパーがコンポーネントをカスタマイズしたりテーマ設定したりするために、デザイントークンや変数を使います。また、UI ライブラリは Less を使っており、全 AntD 変数の完全なリストを GitHub で提供しています。

ドキュメンテーション

AntD の包括的なドキュメントで、使用とカスタマイズのための指示をステップバイステップでしてもらえます。また、CodeSandBox や CodePen、StackBlitz で各コンポーネントを検査することもできます。

５．Chakra UI

• GitHub スター数：３６４,０００
• 週間 NPM ダウンロード数：５２３,０００
• 公式サイト：chakra-ui.com

Chakra UI は、Segun Adebayo によって設立されたナイジェリアベースの Reactコンポーネントライブラリ であり、Chakra の無料コンポーネントライブラリか、インターフェースをより速く構築するための既成の複雑な UI コンポーネントを提供する Chakra UI Pro のどちらかを選ぶことができます。

コンポーネント

Chakra UI のコンポーネントライブラリは、Web ベースのアプリケーションやWeb サイトに対応しており、好みに応じて TypeScript か Javascript React コンポーネントを選べます。

そして Chakra のデザイナーはWAI-ARIA標準に従っているため、すべての要素がアクセシブルです。

また、スタイリッシュな UI コンポーネントは Semantic UI に似ており、「ダーク」と「ライト」のオプションが用意されています。

テーマ設定とカスタマイズ

Chakraのデザイナーは、製品とブランドの要件を満たす変数を使って完全にカスタマイズできる UIライブラリを作成しました。

また、Charka は、Create React App、Framer Motion、React Hook Form、および React Table とも統合して、ライブラリの使用法とカスタマイズを拡張します。

ドキュメント

Chakra UIには、ガイド、ビデオチュートリアル、サンプル、FAQ、主要なチームメンバーとつながるためのリンク、活発な Discord コミュニティなどの優れたドキュメントがあります。

Chakra のユーザーは React ライブラリに対して非常に一生懸命で熱意があり、質問の際は常に誰かしらいます。

UXPin Merge を使った React コンポーネントによるデザイン

React ライブラリを使う際の課題の１つに、実際のコンポーネントを使って UIをデザインできるツールが限られている点が挙げられますが、UXPin Mergeを使うと、Gitレポジトリ、Storybook、または npm から Reactコンポーネントを使ってレイアウトを構築することができます。

その仕組みをご覧になりませんか。こちらからUXPin Mergeをぜひご覧ください。

The post おすすめの Reactコンポーネントライブラリ appeared first on Studio by UXPin.

ChatGPT は  OpenAIによって開発された言語モデルであり、深層学習（ディープラーニング）技術を利用してテキストを理解して生成する生成 AI ツールの一部です

このモデルは、質問したりプロンプトを表示したりするためのチャットボットのように機能し、コンテクストに応じた適切な応答を生成します。

また、この OpenAIツールは、さまざまな自然言語の理解および生成タスクを処理するように設計されており、プロンプトに基づいてオープンソースライブラリから UI コンポーネントを生成するなど、さまざまなアプリケーションに多用途に使うことができます。

UXPin の AI Component Creator を試してみて、ChatGPT でカスタム UI コンポーネントを生成しませんか。

生成されたコンポーネントはPattrens（パターン）として保存され、将来再利用できます。他のツールよりも８.６倍速くデザインできるその他の機能もぜひお試しください。UXPin Mergeを無料でお試し

ChatGPT とは

ChatGPT は OpenAI によって開発された言語モデルであり、受け取った入力に基づいてテキストを理解し、生成するように設計されています。

また、様々なインターネットテキストで訓練されており、質問への回答、会話への参加、テキストの要約、言語の翻訳など、様々な自然言語処理タスクを実行することができます。

ChatGPTは、さまざまな自然言語処理の課題に対処できる、強力で多用途かつユーザーに優しい言語モデルを提供するために作成されました。

そしてその幅広い適用性と、トレーニングに使用されたデータの規模を組み合わせることで、会話型AIと言語理解の分野で大きな進歩をもたらしています。

ChatGPTは最も強力な言語モデルのひとつですが、唯一無二というわけではなく、Googleの Bert、T5、BaiduのERNIE、Facebook の Blender Bot や XLNet というモデルもあります。

そして ChatGPT 3.5 は、リリース時点でこれまでに作成された最大の言語モデルの1つであり、1,750億という驚異的なパラメータを備えていました。

そしてそのトレーニング データにより、小規模なモデルと比較して、よりコンテクストに関連した一貫性のある多用途の応答を生成する能力が得られたのです。

多くのユーザーはワークフローにChatGPTを実装し、APIキーを使ってAIツールを構築できるようになりました。UXPinの新機能「AI Component Creator」では、OpenAIが提供するAPIを使うと、デベロッパーはモデルをアプリケーション、製品、またはサービスに統合することが可能です。

ChatGPT の仕組み

ChatGPT は、ユーザーから受け取ったプロンプトに応答して人間のようなテキストを生成することで機能し、テキストのブロックから実際の会話、さらにはビジュアルまで、あらゆるタイプのレスポンスを生成することができます。

そしてユーザーは、ChatGPT UI に「プロンプト」と呼ばれるものを入力することで、ChatGPTと対話します。

プロンプトは、応答を生成するためにモデルに提供される入力クエリまたはステートメントです。そのプロンプトというのは、希望する出力を引き出すためにユーザーがモデルに与えるコマンドまたは質問であり、ユーザーがプロンプトをどのように表現するかによって、返される結果の質と関連性が変わってきます。

では、ChatGPT のような言語モデルのプロンプトの例を以下で見てみましょう：

• 会話：「好きなプログラミング言語とその理由を教えてください。」
• 指示：「Webサイトのパフォーマンスとスピード上げるためのヒントを下さい。」
• クリエイティブライティング：「未来都市での思いがけない冒険についての短編小説を書いて下さい。」
• 問題解決：「コードのデバッグで困っています。こ のJavaScrip t関数の問題を特定するのを手伝ってくれませんか？」
• 教育：「機械学習の概念をわかりやすく説明してください。」
• 意見：「AIの最新の進歩についてどう思いますか？」
• ロールプレイのシナリオ：「旅行アシスタントだとして、アウトドアアクティビティが好きな人のために、週末旅行の旅程を計画してください。」
• 比較：「Web 開発に Python と JavaScriptを使うことの長所と短所を比較検討して下さい。」
• タスク：「与えられた数の階乗を求める Python 関数を書いてください。」
• 説明：「ブロックチェーン技術の機能とその応用について説明して下さい。」

これらのプロンプトは動作動詞で始まっていることがわかります。これはユーザーが ChatGPT に何を求めているかを示すもので、説明、計画、比較、回答、間違いの発見などがあり、ChatGPT はそれに対して最適な答えを導き出します。

その際、会話ごとに 1 つのプロンプトを尋ねることも、満足するまでディスカッションを続けることもできます。

そしてプロンプトを使う際は、直面している課題や改善したい点を具体的に伝えると効果的です。

コンテクストを提供し、実践的なアドバイスを求めることで、ChatGPT からよりカスタマイズされた実用的な回答が得られます。

UI デザインに ChatGPT を使うメリット

ChatGPT は生産性の向上、スキル磨き、質問に対する答えをもたらします。もちろん、これは単なる言語モデルであるため、その推奨事項を無条件に信用するのではなく、得られた答えが正しいかどうかわからない場合は、微調整して再試行してください。

UI デザインで ChatGPT を使うメリットには以下のようなものがあります：

• トレーニング不要：特定のデータセットで大規模なトレーニングを必要とする従来の ML（機械学習）モデルとは異なり、ChatGPT は UI デザインなどの様々なトピックについて事前にトレーニングされている。なので、ユーザー自身がモデルをトレーニングする必要がない。
• インスタントデザインアシスタンス：ChatGPT は、クエリに対する迅速な応答を提供し、それによってインスタントガイダンスが提供されることから、インターネットで答えを探したり、仲間に尋ねたりする必要がなくなる。
• 効率的な問題解決：ChatGPT の早くて有益な応答により、デザイナーは高い生産性を維持できる。また、このモデルの効率性で、デザインプロセス全体の生産性が上がる。

UX デザイナーは、ChatGPT を使って事前のユーザー調査やペルソナの作成、ユーザーフローの完成度を高める一方で、ChatGPT にレイアウトや配色、タイポグラフィの組み合わせを考案するよう依頼します。

AI Component Creator に関しては、それでシンプルまたは複雑なUI コンポーネントを生成することができるので、MVP（実用最小限の製品）や高度なアプリをより速く構築することができます。では、どんな機能が期待できるか見てみましょう。

ChatGPT で UI コンポーネントを生成する方法

ChatGPT を使って UI コンポーネントを生成するには、必要なコンポーネントを受け取るための明確で詳細なプロンプトを提供する必要があります。

UXPin Mergeを使えば、OpenAI の Webサイトに行かなくても、UIデザインのヘルプを得られます。このツールは UXPin のエディタに組み込まれており、［Quick Tools（クイックツール）］バーで利用でき、必要なときにいつでもすぐに起動できます。

そしてこのツールは、デザインに直接表示されるプロンプトに基づいて UIコンポーネントを生成します。

ChatGPT 統合で生成される UI コンポーネントは Tailwind UI コンポーネントです。これは UXPin Merge で利用可能な数少ないビルトインオープンソースコンポーネントライブラリの１つであり、ランディングページ、ドキュメントハブ、タスク管理アプリ、従業員ポータルなど、コンテンツ優先型の Web デザインを構築するための素晴らしいリソースです。

また、生成されたコンポーネントは、プロジェクト内で他の UXPin Merge のコンポーネントとして使用でき、サイズの変更や位置の変更などが可能です。

UXPin での ChatGPT 統合の使い方

UXPin Mergeアカウントがある場合は、今すぐログインしてください。まだアカウントをお持ちでない方は、こちらで UXPin をぜひ無料でお試しください。

また、統合には OpenAI API が必要ですので、お持ちでない場合は、弊社のサポートまでご連絡いただければ喜んでお手伝い致します。（salesjp@uxpin.com）

その１：コンポーネントのプロンプトを書く

UIデザインを作成しているのに、デザインに合うコンポーネントが見つからないですか？

ではそれを作ってみましょう。UXPinでエディタを開き、［Quick Tools（クイックツール）］バーにある ChatGPT のプラグインに移動して、「AI」と書かれたアイコンをクリックしてください。

そうすると、次のようなモーダルが表示されます：

ここにプロンプトを入力します。プロンプトの例を見た「ChatGPT の仕組み」のセクションに戻ってご確認下さい。

（書く、提供する、識別するなどの）動作動詞 、チャットボットが必要なものを把握するためのコンテキスト、および「応答性」、「グラデーション」、「カスタマイズ可能」などの具体的な詳細がありましたよね。

さらに、要件や制限事項があれば必ず明記してください。

要件は、背景色の特定のHEXコードなど、配色に関するものであったり、アクセシビリティに関する制限であったりします。

Tailwind UI は素晴らしいコンポーネントリソースであり、コンポーネントのインスピレーションでもあります。

Tailwindの Webサイトにアクセスして、 どのようなコンポーネントを作成できるかを見つけてください。

そこには以下のような提案があります：

• 価格表：「以下の３列の価格表を作成してください。カラム1：フリーランサーの価格は19ドル、カラム2：スタートアップの価格は39ドル、カラム3：会社の価格は59ドルです。会社の列は、強調表示されて最も人気のある列としてラベル付けされるべきです。」
• 「お客様の声」のカード：「５つ星評価の ”お客様の声のカード” を作ってください。証言は引用符で囲んで、コピーは ”今まで使った中で最高のツール ” とし、５つ星のうち５つ全部をアクティブにします。色は、星には #FFD700、テキストには#636363 を使います。あとは、ラベルに “長年の顧客”を追加してください。」
• CTA（Call to Action）セクション：「画像で分割された CTA セクションを作成してください。画像は左の列にあり、ホワイトボードの前に人がいます。もう一方の列は ”一緒に働きましょう” という CTA で、オレンジ色の ”お問い合わせ” というボタンがあります。」

その２：UIコンポーネントの生成

このチュートリアルで使うコンポーネントのプロンプトは以下のようになります：

「Leave your message（メッセージを残す）」というヘッダー、メールフィールド、「I accept privacy policy（プライバシーポリシーに同意します）」というテキストを含むチェックボックス、およびユーザーがメッセージを入力できるフィールドを備えたお問い合わせフォームを作成してください。

背景の色には #0000FF を使ってください。

そして、以下のコンポーネントができました（下のスクリーンショットをご覧ください）。

青い背景、メールアドレスとユーザー入力用のインタラクティブな入力フィールド、送信ボタン、クリック可能なチェックボックスがあります。

結果はなかなかいい感じですが、改善できる所もあるので、自由に別の具体的なプロンプトを書いてみてください。

ページとレイヤーパネルでコンポーネントの場所を確認してください。

その際、他のレイヤーの一部ではなく、独立したコンポーネントであることを確認してください。

その３：再利用のためにコンポーネントを保存する

気に入ったコンポーネントができたら、他の場所でも使えるようにライブラリに保存したり、デザイン資料の一部として保管しておきましょう。

コンポーネントはコードでバックアップされ、ワンクリックで開発環境にエクスポートできます。

詳しくは AI Component Creatorのドキュメントをご覧ください。

より良いプロンプトを書くためのリソース

より良いプロンプトを書くのに参考になるリソースを以下にいくつか挙げましょう：

• Prompt Engineering Course by OpenAI — Prompting Guidelines （OpenAI によるプロンプト エンジニアリング コース — プロンプト ガイドライン）‐ アンドレア・バレンズエラ
• How To Write ChatGPT Prompts (150+ Awesome Prompts Inside) （ChatGPTプロンプトの書き方（150以上の素晴らしいプロンプトを収録））‐ エミリー・ゲルテンバッハ
• Writing Effective Prompts in ChatGPT （ChatGPTで効果的なプロンプトを書く）‐ Uxcel

UXPin Mergeで簡単デザイン

AI Component Creator は UXPin に新しく追加された機能で、コードに裏付けされた Tailwind UI ライブラリと完全に整合性のあるコンポーネントを作成するのに適しています。これは、指示に基づいて UI 要素を生成する AI デザインアシスタントだと考えてください。

そして、デザイン全体で簡単に再利用できるカスタム ナビゲーション バー、ペルソナ カード、画像ギャラリー、またはサイドバーが得られます。

Tailwind UI コンポーネントで何が作成できるのか想像できない場合は、TailwindのWebサイトを参考にして下さい。

UXPin Merge を使えば、デザイナーでなくてもデザインのスキルがなくても、インタラクティブで美しい UI を簡単に構築できます。

ドラッグ＆ドロップのような方法で動作するので、ライブラリからコンポーネントを取り出し、それを使ってインターフェースを構築することができます。

また、Tailwind UI 以外にも、MUIv5、React Bootstrap、Ant Design といったReactをベースとしたオープンソースのライブラリがあります。

利用可能なテンプレートから１つを選び、カスタマイズするか、まったく新しいデザインを始めませんか。

そして、デザインからコードをコピーして、そのまま開発ツールに持っていきましょう。UXPin Merge をぜひ無料でお試しください。

The post ChatGPT 統合 – UXPinでUIコンポーネントを生成する方法 appeared first on Studio by UXPin.

UI（ユーザーインターフェース）の要素は、Web デザイン、モバイル、デスクトップ、AR （拡張現実）または VR（仮想現実）のアプリを問わず、製品デザインに最も不可欠な部分であり、すべての製品の核となる構成要素です。

UI 要素やユーザーがどのように UI 要素と相互作用するかを深く理解することは、UI デザイナーや Web デベロッパーとして非常に重要であり、それによって、より良いアプリケーションや Web サイトの構造を作成できるようになります。

また、デザイナーは通常、Web ページやモバイルアプリを作るときに UI 要素を新たに描くことはなく、UI 要素が準備されているレポジトリから始め、コードでバックアップされている場合は、インタラクティブな UI コンポーネントを作成します。

UXPin Merge を使うと、そのコンポーネントを UXPin のデザインエディタに取り込むことができ、数時間ではなく数分で完全に機能する UI を構築できるため、製品チーム全体のワークフローを最適化できます。UXPin Merge の詳細はこちら。

要素とは

簡単に言うと、『UI 要素』はアプリや Web サイトの構成要素です。ユーザーが製品を使う際に相互作用するものであり、ボタンをクリックしてサインアップしたり、ナビゲーション・コンポーネントを使ってページを切り替えたりしてくれます。

また、UI 要素は、優れた UX（ユーザーエクスペリエンス）とデザインされた機能性を実現するものです。

例えば UX デザインは、ユーザーが慣れ親しんでいるデザインパターンの上に成り立っており、デザインパターンを壊してしまうと、ユーザーは訳がわからなくなったり、少なくとも混乱したりするかもしれません。そこでデザイナーは、よく知られた UI 要素を使ってそれを防ぎます。

UI 要素とは何かを学ぶだけでは十分ではなく、使われるコンテクストも知る必要があるのです。

UI 要素３種

理想的には、UI 要素を以下のように大きく３つに分類することができます。

• 入力要素：ユーザーは、入力要素とのインタラクションによって情報入力や、次のステップに進んだりする。
• 出力要素：この要素によって、以前のユーザーアクションの結果が示される。
• ヘルパー要素：さらに「ナビゲーション」、「インフォメーション」、「コンテナ」に分けられ、それによってデジタル製品内を移動したり、情報を得たり、ユーザーの注意をある要素に向けさせたりすることができる。

入力要素

入力要素は、ユーザーによるさまざまな入力を処理する役割を担っており、時には、入力検証プロセスの一部となることもあります。

最もよく使われる入力要素には、以下のようなものがあります：

• ドロップダウン
• コンボボックス
• ボタン
• トグル
• 文字/パスワードフィールド
• 日付ピッカー
• チェックボックス
• ラジオボタン
• 確認ダイアログ

出力要素

出力要素は、ユーザーのさまざまな入力に対する結果を表示する役割を担っており、アラート、警告、成功、エラーメッセージをユーザーに表示します。また、出力要素はもともとニュートラルではなく、入力と様々な操作に依存しています。

ヘルパー要素

その他の要素はすべてこのカテゴリーに入ります。

最も広く使われているヘルパー要素は以下になります：

• お知らせ
• パンくずリスト
• アイコン
• スライダー
• プログレスバー
• ツールチップ

また、ヘルパー要素を以下のように３つのカテゴリーに分類することもできます。

ナビゲーション

ナビゲーションのコンポーネントで、サイト、デスクトップアプリ、モバイルアプリ、その他のデジタル製品内の移動がシンプルになります。また、ナビゲーションを補助する UI 要素には、ナビゲーションメニュー、リンクのリスト、パンくずなどがあります。

インフォメーション

インフォメーションは、例えば、ツールチップ、アイコン、プログレスバーなど、情報の表現を担当します。

グループまたはコンテナ

これは、さまざまなコンポーネントをまとめる役割を担い、ウィジェット、コンテナ、サイドバーなどがこのカテゴリーに含まれます。UXPin ブログのニュースレター購読ウィジェットもコンテナの良い例です。

一般的な 入力 UI 要素９選

ここでは、全デザイナーが知っておくべき、最も一般的な入力要素を９つご紹介します。このリストには、ボタン、チェックボックス、テキストフィールドが含まれ、UI コンポーネントの下に記載されている最もよく使われているデザインシステムに必ずあります。

１．チェックボックス

チェックボックスで、ユーザーはオプションセットから１つ以上のオプションを選択できるようになります。チェックボックスは縦に表示するのがベストプラクティスですが、利用可能なスペースやその他の要素を考慮すれば、複数列でも大丈夫です。

２．ドロップダウン

ドロップダウンで、ユーザーは長いオプションリストから一度に１つの項目を選択できるようになります。また、ラジオボタンよりもコンパクトで、スペースの節約もできます。より良い UX のためには、「一つ選択」」などのラベルとプレースホルダーとしてのヘルパーテキストの追加が必要です。

３．コンボボックス

コンボボックスでは、ユーザーがカスタム値を直接入力するか、リストから値を選択することができます。これは、ドロップダウンリストまたはリストボックスと１行入力フィールドの組み合わせです。

４．ボタン

ボタンで、ユーザーはタッチやクリックでアクションを実行できるようになります。そしてそのアクションは通常、テキスト、アイコン、またはその両方で表示されます。ボタンはUIの中で最も重要なパーツの１つであるため、ユーザーが実際にクリックするようなボタンをデザインすることが重要です。

５．トグル

トグルで、ユーザーは２つの状態の間で ビュー / 値 / 設定 を変更でき、オンとオフの切り替えや、リストビューとグリッドビューの切り替えに便利です。

６．テキストフィールド と パスワードフィールド

「テキストフィールド」と「パスワードフィールド」で、それぞれユーザーはテキスト（文字）とパスワードを入力できるようになります。テキストフィールドでは、単一行入力と複数行入力の両方が可能であり、複数行入力フィールドは「textarea」とも呼ばれます。また、パスワードフィールドでは通常、１行でパスワードを入力することができます。

７．日付ピッカー

日付ピッカーで、ユーザーは日付や時刻を選択することようになり、プラットフォームからネイティブの日付ピッカーを使用することで、一貫した日付値がシステムに送信されます。

８．ラジオボタン

ラジオボタンで、ユーザーは相互に排他的なオプションの事前確定されたセットのうちの１つだけを選択できるようになります。ラジオボタンの一般的なユースケースとして、サインアップフォームでの性別のオプションの選択が挙げられます。

９．確認ダイアログ

確認ダイアログは、たとえば「削除アクションに対するユーザーの同意の収集」など、特定のアクションに対するユーザーの同意を収集する役割を果たします。

一般的な出力要素４つ

１．アラート

アラートは、ユーザーの注意を引く簡潔な重要メッセージを表示し、以下のようなステータスや出力をユーザーに通知します。

２．トースト

これは、ユーザー入力やサーバー応答、計算など、あるイベントがトリガーとなって、小さなテキストボックスが画面に表示される UI 機能を指し、モバイルでは「下部」に、デスクトップでは「左下または右側」に表示されるのが理想的です。

「アラート」と 「トースト」の違いは、前者は勝手に解除されず、後者は一定時間後に解除される点です。

３．バッジ

この機能は、子（達）の右上に小さなバッジを生成し、一般的には、小さなカウンターやインジケータを表します。これは、カートアイコン上のアイテム数や、ユーザーアバター上のオンラインインジケーターのようなものがあります。

４．チャート

チャートは、さまざまなデータの種類とデータの比較を描くことから、複雑なデータセットを表現する一般的な方法です。

また、UI で使用されるチャートの種類は、主に「伝えたいデータ」と、「そのデータについて伝えたいこと」の２つによって決まります。

一般的なヘルパーUI 要素

ナビゲーション

以下の要素はナビゲーションを支援します：

• ナビゲーションメニュー
• リンク一覧
• パンくずリスト
• 検索フィールド
• ページネーション

ナビゲーションメニュー

これは、ユーザーが選択できる値がいくつかあるナビゲーションの UI 要素であり、そこから Web サイト/アプリの別のエリアに移動します。

リンク一覧

その名の通り、リンク一覧はリンクで構成されており、カテゴリーリストのあるサイドバーがこの良い例です。尚、リンクには内部リンクと外部リンクがあります。

パンくずリスト

パンくずリストで、ユーザーはシステム内の現在位置を確認できるようになり、それによって、ナビゲートするための進行中のページをクリックできる軌跡を得られます。

検索フィールド

検索バーは通常、「入力フィールド」と「ボタン」の２つの UI 要素で構成され、これによって、ユーザーはキーワードを入力し、最も関連性の高い結果を期待してシステムに送信することができます。

ページネーション

この機能で、ページ間のコンテンツは分割され、ユーザーはページ間を移動できるようになります。

インフォメーション

UI 要素のこのカテゴリーは、情報を転送します。

それは次のようなものから構成されます：

• ツールチップ
• アイコン
• プログレス（進捗）バー
• 通知
• メッセージボックス
• モーダルウィンドウ

ツールチップ

ツールチップで、ユーザーが要素の上にカーソルを置いたときに、アイテムの名前や目的を示すヒントが表示されます。

アイコン

これは簡略化されたシンボルで、ユーザーのシステムのナビゲート、情報の提示、法令の表示ために使用されます。

プログレスバー

プログレス（進捗）バーはプロセスの進行状況を示すものであり、通常このバーにはクリックできません。

通知

ユーザーがチェックすべき新しい何かを知らせる更新インジケータであり、通常は「タスクの完了」や「新しいチェック項目」などを示します。

メッセージボックス

ユーザーに情報を提供する小さなウィンドウですが、通常は、ユーザーがタスクを続行する際の妨げになることはありません。また、メッセージボックスは、警告や提案などのタスクを実行します。

モーダルウィンドウ

オーバーレイの上にコンテンツを表示するのに使われ、オーバーレイがクリックされるか、閉じるアクションがトリガーされるまで、ページとのインタラクションをブロックします。

グループおよびコンテナ

特定の要素とそれ以外をどのように分けるか？そのためにあるのがグループとコンテナです。

ウィジェット

ウィジェットは、チャットウィンドウ、ダッシュボードのコンポーネント、他のサービスのエンベッドのようなインタラクションの要素です。

コンテナ

コンテナは、さまざまなコンポーネントを一緒に保持します。これには、テキスト、画像、リッチメディアなどが含まれ、コンテナの最良の例の一つとして、モダンな UI デザインにおけるカードが挙げられます。

サイドバー

サイドバーには、他の要素グループやコンポーネントも含まれていますが、それは折りたたみ状態と可視状態の間で切り替えることができます。

検索バー

検索バーには、「検索フィールド」と「検索オプション」があり、通常、検索バーには検索フィールドとフィルタリングオプションがあります。検索バーのいい例としては、X（旧Twitter）の高度な検索が挙げられます。

UXPinでインタラクティブな UI 要素をデザインしよう

一般的な UI 要素がどのようなもので、どのように機能するのかがわかったところで、その知識を実践してみましょう。UXPin には、UI 要素のデザインと整理に必要な機能が全て揃っているので、デザインプロセスがシンプルになります。

デベロッパーのコンポーネントライブラリから入手した既製の UI 要素がある場合はどうなるでしょう？UXPin Merge のテクノロジーを使って、それを UXPin エディタに取り込み、製品チームと共有する UI コンポーネントを使って、完全にインタラクティブで一貫性のあるプロトタイプをデザインしましょう。UXPin Merge の詳細はこちら。

The post デザイナーが押さえておくべき UIエレメント appeared first on Studio by UXPin.

Tailwind は、HTML マークアップに直接適用できる、あらかじめデザインされたスタイルのセットを提供します。

また、定義済みのコンポーネントやスタイルが付属していることが多い従来のCSSフレームワークとは異なり、カスタムUIデザインを作成するために組み合わせることができるローレベルのユーティリティクラスを提供することに重点が置かれています。

プロジェクトを開始するのに、フロントエンドのデベロッパーは大体npmやyarn経由でTailwindをインストールし、生成されたCSSファイルをHTMLに埋め込みます。

インストールが完了すれば、ユーティリティクラスを HTML要素に適用して、UIデザイン要件に従ってスタイルを整えます。

Tailwind CSSは、ランディングページ、ダッシュボード、管理画面、EC サイト、そしてもちろんラピッドプロトタイプなど、幅広いWebアプリケーションおよびサイトの構築によく使われます。

Tailwind UI コンポーネントを使ってインタラクティブなプロトタイプを作成しませんか？

UXPin Merge には、公式の Tailwind UI コンポーネントが豊富のライブラリを用意しているので、使いたいコンポーネントをキャンバス上にドラッグ＆ドロップするだけです。

その後は、コードをコピーしてプロジェクトに貼り付けるだけで、簡単に製品開発を行うことができます。気になった方は、ぜひUXPin Mergeを無料でお試しください。

Tailwind CSS とは

Tailwind CSS は、従来の CSS フレームワークとは違う方法で Webサイトをスタイリングします。

これは、Webサイトのスタイルに合わせて、あらかじめ定められた構成要素 (またはレゴのピース) のセットと考えてください。

大量の CSS ルールを記述する代わりに、事前に作成されたクラスを HTML コード内で直接使うことができます。

Webサイトをスタイリングしたいと思ったときに、見栄えを良くするために CSS コードをたくさん書かないといけないとします。

従来の CSS だと、要素ごとにルールを作成し、マージン、パディング、色などを定める必要がありますが、それだと時間がかかって、少し反復的な作業になる場合もあります。

Tailwindを使用する場合では、HTML要素に直接適用できるあらかじめ用意されたクラスのセットを得られることで、スタイリングがシンプルになり、このプロセスがより効率的かつ柔軟になります。

例えば、以下のように書く代わりに：

cssCopy code

.button { background-color: #3490dc; color: #ffffff; padding: 10px 20px; border-radius: 5px; }

このようなスタイルを、以下のように Tailwindのクラスを使って HTML に直接適用することができます：

htmlCopy code

<button class="bg-blue-500 text-white p-2 rounded-md">Click me</button>

ここでは、それぞれのクラス（bg-blue-500、text-white、p-2、rounded-md）が特定のスタイルを表しています。

つまり、bg-blue-500 はボタンの背景を青くし、text-white はテキストを白くし、p-2 はパディングを追加し、rounded-md は角を丸くします。

Tailwind は非常にカスタマイズしやすく、特定のスタイルが必要ないと判断した場合や独自のスタイルを追加したい場合は、このフレームワークをニーズに合わせて簡単に調整することができます。

また、Tailwind にはプラグインシステムがあり、機能を拡張することができるので、サードパーティのプラグインを追加したり、独自のプラグインを作成したりして、フレームワークを具体的なニーズに合わせることができます。

Tailwind は Web デベロッパーの間で「ユーティリティ優先型の CSS フレームワーク」と呼ばれています。

Tailwind CSS のコンテクストでは、「ユーティリティ」とは、要素に直接スタイリングを適用する小さな、単一目的のクラスを指し、そのユーティリティクラスは目的に応じて名前がつけられ、それによってクラスがそれぞれ何をするのかがわかりやすくなります。

また、これはフレームワークの構成要素であり、組み合わせて複雑なスタイルを作成することができます。

Tailwind CSS で作れるもの

レスポンシブ対応Webサイト

Tailwind のレスポンシブ・ユーティリティクラスは、さまざまなスクリーンサイズに適応するWeb サイトを簡単に作成し、デバイス間でシームレスな体験を提供する。

Webアプリケーション

Tailwind は、Webアプリケーションの UI（ユーザーインターフェース）の構築に使用できる。また、モジュール化されたユーティリティクラスにより、アプリケーションコンポーネントのスタイリングを迅速かつ効率的に行うことができる。

ランディングページ

Tailwind はランディングページのデザインとスタイリングに適しており、そのシンプルさと使いやすさから、マーケティングページをサッとプロトタイプ化して構築するための人気な選択肢となっている。

ブログとコンテンツのサイト

個人のブログでも、コンテンツの多い Web サイトでも、Tailwind のユーティリティクラスを使えば、テキスト、画像、その他のコンテンツ要素を簡単にスタイル設定できる。

ECサイト

Tailwind は、EC サイトの商品リスト、ショッピングカート、チェックアウトページのデザインに適用でき、その柔軟性により、特定のブランド要件に合わせたカスタマイズができる。

ダッシュボードと管理パネル

ダッシュボードと管理パネルを備えた Web アプリケーションは、多くの場合、Tailwind CSS のモジュール式でカスタマイズ可能な性質の恩恵を受ける。また、Tailwind CSS で、クリーンで機能的な UI を作成するためのツールが得られる。

プロトタイプと迅速な開発

Tailwind は、アイデアをサッとプロトタイプ化したり、速やかな開発が求められるプロジェクトによく使われている。そして、そのユーティリティ優先型のアプローチにより、デベロッパーはスタイルいちいちカスタム CSS を記述する必要もなく、速やかな反復（イテレーション）ができる。

ポートフォリオサイト

Tailwind を使うと、個人や専門的なプロジェクトを紹介するためのスタイリッシュでレスポンシブ対応のポートフォリオを構築でき、ユーティリティクラスにより、視覚的に魅力的なレイアウトを作成できる。

ドキュメントサイト

Tailwindは、ドキュメンテーションやヘルプセンターのWeb サイトのスタイリングに使うことができ、シンプルなので、クリーンで読みやすいレイアウトを簡単に作成できる。

カスタム UI コンポーネント

Tailwind はカスタム UI コンポーネントのスタイリングに使うことができ、それによってデベロッパーは、ユニークで視覚的に魅力的なインターフェースとレスポンシブデザインを作成できる。

Tailwind のコンポーネントの入手法

Tailwind CSS コンポーネントとリソースを見つけることができるソースは色々とあり、注目すべきリソースの１つに、Tailwind UI で専門的にデザインされたコンポーネントとテンプレートの素晴らしいセットがあります。

Tailwind UI は、Tailwind CSS の創設者であるAdam Wathan氏と Steve Schoger氏によって作られました。

Tailwind CSS とシームレスに統合された、プロのデザインによるすぐに使える UI コンポーネントとテンプレートのセットを提供することが、Tailwind UI を開発した主な動機であり、その目的は、フロントエンドのデベロッパーに、美しく一貫性のある UI を簡単に構築できるプレミアムなリソースを提供することでした。

Tailwind UI のセールスポイントの一つは、そのデザインの質の高さです。コンポーネントとテンプレートは、デザインの専門家として知られる Steve Schoger氏によってプロフェッショナルに作られており、それによって、Webアプリケーションの洗練された、魅力的な外観が保証されます。

Tailwind UI に期待できるコンポーネントやテンプレートの例を、以下で見てみましょう：

• ナビゲーションコンポーネント – ナビゲーションバー、ドロップダウン、メガメニューがある。
• フォームコンポーネント – 入力フィールド、チェックボックス、ラジオボタン、セレクトドロップダウン、ボタン、グループなどのフォームを作成するためのコンポーネント。
• コンテンツ表示コンポーネント – カード、モーダル、ポップオーバー、アラート、バッジ、ツールチップなどがある。
• 組版とテキストコンポーネント – 見出し、ブロッククォート、リスト、テキストスタイルを追加する。
• グリッドとレイアウトのコンポーネント – コンテナ、グリッドシステム、フレックスボックスのユーティリティがある。
• メディアコンポーネント – イメージカード、ギャラリー、レスポンシブビデオコンポーネントが含まれる。
• ユーティリティコンポーネント – スペーシング、マージン、フレックスボックス、アライメント、可視性ユーティリティ。
• テンプレート – ライブラリには、ランディングページ、ダッシュボード、EC 商品、価格設定、ブログレイアウトのテンプレートがある。

これらはほんの一例に過ぎず、Tailwind UI には、Web 開発における様々なユースケースに対応するコンポーネントとテンプレートの包括的なセットがあります。

また、各コンポーネントは柔軟でカスタマイズできるように設計されており、プロジェクトの特定のニーズやブランディングに合わせて簡単に適合させることができます。

Tailwind UI のコンポーネントは、デザインと UI の美学で知られる Steve Schoger氏が優れたデザインとユーザビリティの原則を念頭に構築しました。

そして全体的に、Tailwind UI は、Tailwind CSS のフレームワークに沿った高品質ですぐに使えるコンポーネントを提供することで、デベロッパーの時間を節約することを目指しています。

Material UI や Bootstrap との違い

Tailwind CSS、Material UI、Bootstrap はいずれも Web 開発でよく使われているライブラリですが、スタイリングと UI に対するアプローチは大きく異なります。

すでに説明したように、Tailwind はユーティリティ優先型のアプローチに従っており、HTML のマークアップに直接適用してスタイルを構築できる、ローレベルのユーティリティクラスのセットを提供します。

そしてこのアプローチは柔軟性が高く、スタイルをより細かく制御でき、多くの場合、ラピッドプロトタイプやカスタマイズに好まれます。

Bootstrap と Material UI は、レスポンシブな Web サイトをサッと構築するのに広く使われています。

Bootstrap には、事前に設計されたコンポーネントとスタイルのセットが付属されており、これは、よりコンポーネント中心のアプローチに従っていることから、デベロッパーは、テーマシステムを通じて簡単にカスタマイズできる既製の UI コンポーネントのセットを得られます。

また、デベロッパーは、自分たちのブランドに合わせて色やフォントなどの変数を変更することができます。

一方 MUI は、Google の マテリアルデザインガイドラインを実装したReact コンポーネントライブラリです。

MUI は Bootstrap のようにコンポーネント中心で、あらかじめデザインされた Reactコンポーネントのセットを提供します。

また、カスタマイズが簡単で、大規模で活発なコミュニティがあり、サポートやドキュメントも充実しています。

Tailwind でレスポンシブ UI デザインを作成する方法

ここからは、UXPin Mergeを使ってTailwindのUIデザインを作成できる簡単な方法をご紹介します。

UXPin Merge は、デザイナーとデベロッパーがインタラクティブな UI デザインをシームレスに作成して、連携できるプロトタイピングツールであり、コラボレーティブデザインを重視しています。

また、その中でも、「デザイン」と「開発」のワークフローを統合することに重点を置いており、それによって、より迅速なデザインと開発プロセスを実現します。

以下で、Tailwind UI と UXPin を使って UI デザインを作成する方法を見てみましよう。

その次に、Tailwind CSS のインストールに関する簡単なヒントをご紹介します。 記事に沿って進めるには、UXPin にサインアップしてトライアルを開始してください。

ステップ１：Tailwind UI コンポーネントをライブラリから取り出す

UXPin Merge には、Tailwind UI コンポーネントのライブラリが組み込まれており、このライブラリには、Tailwind CSSスタイリング原則に従ったボタン、カード、フォームなどのデザイン済み UI 要素のコレクションが含まれています。

デザインを開始するには、UXPin のデザインシステムライブラリです。

ボトムバーの［Design System Libraries］のアイコンをクリックするか、［Option］ +［２］のキーボードショートカットでアクセスします。

次に、Mergeのライブラリにスクロールすると、MUIv5（MUIv5を使ったデザイン方法を参照）や Ant design、React Bootstrap などの React ライブラリの中にTailwind UIが表示されます。

Tailwind のライブラリは今のところ Reactベースではなく、Tailwindライブラリを使用している間は、デザインから HTMLのみをコピーすることができます。

そしてキャンバスに好きなコンポーネントを配置します。ボタンでもカードでも、インターフェースを作るのに必要なものなら何でもいいです。

ステップ２： ChatGPT で複雑なコンポーネントを生成する

この時点まで、私たちは「子」を使っていました。アトミックデザインの原則に基づけば、「子」は分子や有機物を構成する最小の構成要素です。ちなみにブラッド・フロスト氏によって考案されたアトミック デザインは、Web デザインをその基本的な構成要素に分解する方法論であり、それによって一貫性のあるスケーラブルな UI の作成がしやすくなります。

アトミックデザインについてもっと知りたい方は、アトミックデザイン における５つの UI コンポーネントの記事やブラッド・フロスト氏の記事をぜひご覧ください

いわゆる「分子」を持ち込むには、コンポーネントの生成を支援する UXPin Merge の AI Component Creator を使います。 これは、プロジェクトに必要な動的コンポーネントやカスタム コンポーネントを作成する場合に特に便利です。

そして AI Component Creator は機械学習を利用してデザインパターンを理解し、デザインに基づいてコード スニペットやコンポーネントを生成します。

AI Component Creator と ChatGPT を使ったデザインのスピードアップに関するガイドをぜひお読みください。（英語版）

ステップ３：カスタムコンポーネントを使ってレイアウト全体を取り込む

インターフェースのさまざまなセクションやコンポーネントを形成する分子の組み合わせである「有機物」を UXPin にインポートする方法があるので、まだアトミックデザインの方法から離れるわけではありません。

ビルトインの Tailwind UIライブラリには、Tailwind UIのWebサイトから UIコンポーネント、パターン、フルレイアウトを UXPin のプロジェクトに直接コピーするための「New Custom Component」のオプションがあります。

また、コンポーネントは、UXPin でカスタマイズやテーマ設定ができます。

エディタ内の Tailwindライブラリの上部に、プラス記号のついたシースルーのコンポーネントが見えます。これがカスタムコンポーネントです。

Tailwind UIのWeb サイトにアクセスし、サンプルやコンポーネントのページからコードをコピーして、UXPinのカスタムコンポーネントに貼り付けます。

その後は、今後も再利用できるようにコンポーネントを［Pattrens］に保存します。

実際にどのように使っているかを、下の動画のプロダクトツアーをぜひご覧ください。

ステップ４：コンポーネントのプロパティを編集する

インターフェースの構成要素が揃ったところで、UI コンポーネントのプロパティを調整し、一貫性のあるプロフェッショナルなデザインに仕上げます。

調整したいコンポーネントをクリックすると、右側にプロパティパネルが表示され、色やテキストを変更したり、ステートを追加したり、特別なスタイリングを考えることができます。

そして、ここはテーマを切り替える場所でもあり、それには以下のように２種類あります。

• グローバルテーマ ：全ページの「ライト」または「ダーク」のテーマを選択する。

• ローカルテーマ ：各コンポーネントの「ライト」または「ダーク」のテーマを選択する。

また、ここではインタラクションの追加もできます。

ユーザがボタンをクリックした時に、次のページに移動するのか、モーダルを表示したり消したりするのかなどの動作を決定でき、コード化されたコンポーネントのプロパティを設定することもできます。

ステップ５：デベロッパーの環境にコードをコピーする

レイアウトが完成したら、いよいよ構築です。

「プレビューモード」から「スペックモード 」に進み、コードをコピーしたいコンポーネントをクリックするか、エクスポート機能を使ってプロトタイプ全体をワンクリックでエクスポートします。これで、アプリの構築開始はバッチリです。

まだの場合は、Tailwind UI ライブラリを使う新しいプロジェクトをセットアップしてください。

新しい HTML ファイルを作成し、<head> のセクションに Tailwind CSS と Tailwind UI スタイルシートをリンクします。

または、Stackblitz統合を使って、プロジェクトを事前に設定してください。

Tailwind UI でレイアウトの作成が８.６倍速くなる

Tailwind CSS は、スタイリングへのユニークなアプローチで注目されています。

従来の CSS フレームワークとは違って、Tailwind にはローレベルのユーティリティクラスを通して、あらかじめデザインされたスタイルのコレクションがあります。

そしてインストールは、npm や yarn による簡単なセットアップの後、ユーティリティクラスを HTML 要素に直接適用することで、特定の UI デザイン要件を満たすことができます。

また、Tailwind CSS は、ランディングページやダッシュボードから、管理画面、EC サイト、ラピッドプロトタイプまで、さまざまな Webプロジェクトで活用されています。

Tailwind UI のコンポーネントを使ったインタラクティブなプロトタイプをお探しの方にとって、UXPin Merge は理想的なソリューションとなります。

UXPin Mergeでは、公式のTailwind UI コンポーネントで溢れるライブラリが提供されることから、キャンバス上でのシームレスなドラッグ＆ドロップ体験が促されます。

また、生成されたコードをコピーしてプロジェクトに統合すれば、効率的な製品開発が実現します。

この記事が少しでもご参考になれば幸いです。ぜひUXPin Mergeを無料でお試しください。

The post Tailwind CSSを使ってレスポンシブデザインを構築する方法 appeared first on Studio by UXPin.

Admin UIは、管理者がシステム、アプリケーション、またはWeb サイトを管理および制御するために設計された GUI（グラフィカルユーザーインターフェース）のことをいいます。

通常のユーザーインターフェイスと異なり、システムの様々な管理や設定で必須の高度な機能とコントロールを提供します。

また、ユーザー管理、アクセス制御、システム構成、監視、レポートツールなどの機能が含まれていることが多く、管理者が直感的に操作できるように設計されており、大体はセキュリティを確保するためにアクセス時は認証が求められます。

 Admin UIの具体的な機能やデザインについては、Webアプリケーション、サーバー、データベース、または管理者の監視が必要なその他のシステムなど、コンテクストによって違います。

Admin UIは、複雑な管理タスクをシンプルにし、管理者が基盤となるシステムやアプリケーションを効率的かつ安全に管理できるようにするのに欠かせません。

UXPin Merge を使って React アプリのAdmin UIを構築しませんか。ドラッグ＆ドロップのUIビルダーで、Reactコンポーネントを使ってインターフェースを作成し、ワンクリックでコードをエクスポートしましょう。UXPin Mergeをぜひ無料でお試しください。

Admin UI とは

Admin UI（Administrative User Interface）は、管理者がシステム設定、ユーザー権限、その他の高度な設定をシンプルにされた直感的な方法で管理および制御するために設計されたグラフィカルインターフェース（GUI）です。

これは、アプリプロバイダー、Webサイト所有者、システム管理者が、アプリケーションやシステムを効果的に設定、管理、セキュリティ保護、監視するのに非常に重要なツールであり、彼らが提供するデジタルサービスの円滑な運用と成功に貢献するものです。

そしてデータへの不正アクセスに対するセキュリティ、アプリや Web サイト、システムのバックエンドの処理、その他管理者に課せられたタスクを提供します。

Admin UI の例

実例として、WordPressを見てみましょう。

WordPress の管理画面は、ユーザーに優しいUXデザインや多機能性、そしてWordpress自体が広く普及していることから、高品質な管理画面のUIデザインの好例となっています。

ユーザーに優しいナビゲーションに重点を置いてデザインされており、メニュー構造は直感的であるため、技術的な専門知識が乏しいユーザーを含め、様々な機能を簡単に見つけて管理することができます。

WordPressのAdminダッシュボードのデザインは、サイトの主要なメトリクス、最近のアクティビティ、重要なタスクへの迅速なアクセスの総合的な概要を提供します。

これによって、管理者はサイトの状況を一目で把握することができます。

また、この管理パネルはモジュール式なので、ユーザーはダッシュボード上のウィジェットを並べ替えたりカスタマイズしたりすることができます。

この柔軟性によって、管理者は特定のニーズや好みに応じてインターフェースをカスタマイズすることができます。

パスワード強度インジケーター、ユーザーロール管理、プラグインによる2FA（二要素認証）の実施機能などのセキュリティ機能も組み込まれています。

Adminダッシュボードにあるべきもの

アプリプロバイダー、Webサイト所有者、システム管理者は、以下のタスクを処理するために Admin UI を構築します：

• システムの構成と管理：Admin UIは、システム、アプリケーション、またはWebサイトのさまざまな側面を構成および管理するための専用スペースを提供する。
  これには、機能、ユーザーの役割、権限、システム設定に関連する設定が含まれる。
• ユーザー管理：Admin UI により、管理者はユーザーを効率的に管理することができる。
  これには、ユーザ登録、認証、役割割り当て、ユーザプロファイル管理などのタスクが含まれる。
  また、管理者はユーザーのアクティビティを監視して、適切な行動を取ることができる。
• コンテンツとデータの管理： Admin UIで、アプリケーションや Webサイト内のコンテンツやデータの管理ができるようになる。
  コンテンツの作成、編集、削除のようなタスクや、構造化された方法でのデータの整理などが含まれる。
• アクセス制御とセキュリティ： Admin UI は、アクセス制御とセキュリティ管理において重要な役割を果たす。
  システム管理者は、機密情報の保護や、許可された個人のみによる特定の機能やデータへのアクセスのために、ユーザーの役割や許可、制限を定めることができる。
• リアルタイムの監視と分析：このようなUIには、多くの場合でモバイルや Webアプリ (またはサイト) のパフォーマンスと使用状況を監視するための管理ダッシュボードが含まれている。
  ユーザー アクティビティの追跡、システム ログの分析、システムの使用状況を把握するためのレポートの生成などが含まれる場合がある。
• デバッグとトラブルシューティング： システム管理者にとって、Admin UI は問題のデバッグとトラブルシューティングのための貴重なツールと言える。
  管理者は、インフラストラクチャの技術的な詳細に立ち入ることなく、エラーログを表示し、問題を診断し、是正措置を講じることができる。
• 更新とメンテナンス： Admin UI で、アプリケーションや Web サイトの更新と保守のプロセスが促される。
  パッチの適用、アップデートのインストール、システムの安全性と最新性を維持するためのバージョン管理などが含まれる。
• カスタマイズと設定：Admin UI では、多くの場合、UI自体のカスタマイズと構成ができる。
  管理者の好みに合わせたテーマ、レイアウト、その他の視覚要素が含まれる場合がある。
• ワークフローの自動化： Admin UI には、管理者が特定のワークフローやタスクを自動化できる機能が含まれる場合がある。
  それによって反復的なプロセスが合理化され、全体的な効率が上がる。
• 管理者のUX強化：Admin UIは、管理者向けに専用のユーザーに優しいUIを提供することで、システムの管理責任者は効率的かつ最小限の労力で管理を行えるようになり、管理者の全体的なUXが向上する。

管理画面のUIデザインは、管理画面が必要なタスクによって異なります。

例えば、CRM（顧客関係管理）アプリではリアルタイムのモニタリングや分析ダッシュボードの UIが必要ですし、CMS（Contents Management System）ではコンテンツやデータの管理だけでなく、幅広いカスタマイズが必要です。

React アプリの Admin UI をデザインする方法

Material Design や Bootstrap のチームが作成したような、オープンソースの React ライブラリに由来する UI コンポーネントを使えば、Admin UI はかなり速くデザインできます。

そしてこのようなコンポーネントは、デザインシステムの基礎となり、Admin UI デザインの一貫性と品質が保証されるでしょう。

このチュートリアルでは、MUIコンポーネントを使ってインタラクティブなAdminダッシュボードをさっと組み立てる方法をご紹介します。

UXPinでは、Adminダッシュボードのテンプレートがあり、React UI デザインがとても簡単かつスピードアップするUIキットもあります。

では早速本題に入りましょう。

ステップ1：コンポーネントを選ぶ

Material Designには、Admin UI の基盤として機能し、事前に設計されたコンポーネントの豊富なセットがあります。

また、ナビゲーションバーからデータテーブルに至るまで、コンポーネントの包括的なスイートが提供されています。

Admin ダッシュボードの要件に適合するコンポーネントを特定することで、一貫性のあるプロフェッショナルな外観を確保しましょう。

MUIのドキュメントでコンポーネントをプレビューしたり、UXPin に直接ジャンプして、Merge ライブラリの一部として提供されているコンポーネントを確認できます。

それを行うには、新しいプロジェクトを開始して新しいプロトタイプの作成し、左下隅にある ［Design System Library］のアイコンを選択します。

そして次に、MUIv5を検索してコンポーネントを全てプレビューします。コンポーネントをグループ化したい場合は、応答性の高いフレックスボックスを使うといいでしょう。

管理画面の UI構築には、以下の UIコンポーネントをお勧めします：

• テーブル：基本テーブル、データテーブル、密テーブルを構築し、並べ替えと選択を管理するためのデータ表示コンポーネント。詳細については公式ドキュメントを参照。
• 棒グラフ – 数量を表現するための MUI-Xチャートコンポーネントの１つ。
• ラインチャート：トレンドを表示するための MUI-X チャートコンポーネント。
• 円グラフ：ここで強調したい最後の MUI-X チャート コンポーネント。
• リスト：完全にインタラクティブなさまざまなタイプのリストのデータ表示コンポーネント。
• タイポグラフィ：入力用の便利なデータ表示コンポーネントの１つ。
• 選択：ユーザーがドロップダウンリストから項目を選択できるようにする入力コンポーネント。 スタイルの設定方法については、公式ドキュメントを参照。
• メニュー ：複雑なナビゲーションコンポーネント。
• パンくず：ユーザーに優しい Web サイトのために追加する便利なナビゲーションコンポーネント。

これらはすべて内蔵の Merge ライブラリに属しているので、UXPin で簡単に見つけることができます。また、テーマ設定のためのものだけでなく、より多くの入力、ナビゲーションコンポーネントもあります。

ステップ2：コンポーネントを配置してプロパティを変更する

選択したコンポーネントを組み合わせて、Admin ダッシュボードのレイアウトを作成します。

MUI はモジュール構造になっているため、配置やカスタマイズが簡単です。アプリのブランディングやビジュアルアイデンティティに合わせて、色、タイポグラフィ、スペーシングなどのプロパティを調整しましょう。

このステップにより、ユーザーに響くまとまりのあるデザインが実現します。

UXPin で MUIコンポーネントを使用方法についてもっと知りたい方は、UXPin のライブラリの使い方に関するこちらの動画をご覧ください。

ステップ3：インタラクションの設定

インタラクティブな要素を追加して、UX を強化しましょう。

UXPin の MUI コンポーネントにはインタラクティブ機能が組み込まれていますが、特定の要件を満たすために、さらにカスタマイズしたり、イベントハンドラを追加したりすることができます。

折りたたみ可能なパネル、レスポンシブナビゲーション、ツールチップなどの機能を取り入れて、管理画面の UI を直感的でユーザーに使いやすいものにしましょう。

UXPin のエディタはコードベースなので、完全にコード化されたコンポーネントを扱うことになりますが、別のページに誘導するクリック可能なメニュー、ユーザーの前にポップアップするアラート、入力バリデーションなどのインタラクションを追加するオプションもあります。

このようなインタラクション（Interactions）は変数、インタラクション、式を使って追加できます。

詳しくはドキュメントをご覧ください。

ステップ4：Admin ダッシュボードをステークホルダーと共有してレビューしてもらう

先に進む前に、Admin ダッシュボードのプロトタイプをステークホルダーと共有してフィードバックをもらいましょう。Material-UI のコンポーネントで、デザインの一貫性を上がるだけでなく、迅速なレビュープロセスが促進されます。

レイアウト、ユーザビリティ、全体的な美しさについて意見を集め、プロジェクトの目標との整合性を確認しましょう。

UXPinには、まるで実物のようにデザインを見ることができ、ステークホルダーと共有してフィードバックをもらうことができるプレビューモードがあります。

ちなみに、プレビューにアクセスするショートカットは［Command］ +［P］です。

そして、プレビューにはサイトマップも含まれています。また、モバイルデザインについては、当社のミラーアプリを使って携帯端末でアプリを実行することができます。

ステップ5：アプリ開発のために React コードをエクスポートする

管理画面ダッシュボードのデザインが承認されると、UXPinはMUIベースのデザインから React コードをエクスポートするプロセスをシンプルにします。

また、このコードは Reactアプリにシームレスに統合できるため、開発時間の節約になり、デザインから実装へのスムーズな移行が実現します。

先ほど説明したプレビューモードからSpecモードに移動して、コードをエクスポートするだけです。

そしてそのコードは Stackblitzで直接開くこともできますし、他の開発環境にコピーすることもできます。

UXPinで Admin UI 以上のものをデザインしよう

パワフルでデザイン性の高いUIコンポーネントを利用すれば、React アプリのAdmin UI のデザインはシームレスなプロセスになります。

また、広範なライブラリと柔軟性を備えた MUI により、デベロッパーは一貫性があって視覚的に魅力的でインタラクティブな Admin ダッシュボードを作成できます。

このステップに従うことで、ユーザーとステークホルダー両方の期待に応える Admin UI を効率的にデザインして実装することができるのです。

UXPin でデザインを学ぶ準備はできましたか？UXPinのテンプレート、トライアルキット、Reactコンポーネントを使えば、すぐに効率的なデザインプロセスを実現することができます。

コンポーネントをキャンバスにドラッグ＆ドロップし、プロップを調整すれば製品開発の準備はバッチリです。UXPin をぜひ無料でお試しください。

The post Admin UI – Reactアプリ向けの効率的なデザイン方法 appeared first on Studio by UXPin.

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

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

主なポイント：

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

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

UIデザインとは

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

UIデザインで行うこと

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

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

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

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

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

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

UIデザインプロセスとは

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

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

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

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

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

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

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

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

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

 UI開発 とは

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

UI デベロッパーとは

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

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

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

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

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

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

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

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

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

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

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

UIデザインと UI開発 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ドリフト（摩擦）の課題

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

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

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

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

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

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

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

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

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

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

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

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

Web開発者またはデータベース管理者は、SQLデータベースを使用することで作業を効率化することができます。データベースへの問い合わせ、SQL コードの実行、レポートの作成、バックアップの取得、データベースに関連するアプリケーションの問題の診断などの作業を効率化することができます。

そして、データベース向けのGUI（グラフィカル・ユーザー・インターフェース）を構築することで、データベースの管理がしやすくなります。

本記事では、Reactコンポーネントを使って開発・デザインできる ユーザーフレンドリーなデータベースの GUI を作成する方法についてお話します。

ここで紹介するヒントを活用することで、初心者や管理者でない人でも、データベースを直感的に操作できるようになります。

アプリのGUI をインタラクティブなプロトタイプで作成してみませんか。Web版、モバイル版、デスクトップ問わず、GUIを構築するために欠かせないReact.js要素の完全なライブラリを使用できます。

最高のセキュリティと独立性のために、UXPin Mergeでインターフェースを構築しましょう。こちらからぜひお試しください。

データベース GUI とは

データベース GUI とは、データベースのグラフィカル・ユーザー・インターフェース（Graphical User Interface）であり、データの視覚化とデータベースの管理を容易にします。また、テキストベースのコマンドやSQLクエリを使う代わりに、ウィンドウ、アイコン、ボタン、メニューなどのグラフィカルな要素を操作できるので、データベースの操作に自信がない人でも大丈夫です。

もしユーザーが CLI（コマンドラインインターフェイス）やクエリを使ったことがない場合、代わりにデータベース GUI を作成することで、ユーザーに操作してもらう方法もあります。また、データベース GUI ツールを使うというのもあります。

MySQL、PostgreSQL、Microsoft SQL Server、MongoDB、Redshift、Oracle といった一般的なデータベース管理システムには、独自の GUI ツールが付属していることがよくあります。

さらには、複数のデータベースシステムとやりとりするためのSQL GUIを提供するコード不要のツールもあります。そのようなツールには、DBeaver、Navicat、DbVisualizerなどがありますが、シンタックスハイライト、デバッグなど、価格や機能はさまざまです。

UXPin Mergeのようなドラッグ＆ドロップの UIデザインツール を使えば、いつでも独自のデータベース GUI を作ることができます。

SQLの GUI は、モバイルアプリからWebベースのアプリ、さらにはデスクトップアプリケーションまで、さまざまな形をとることができます。

これによって、自分のコードを完全に管理でき、それを安全なサーバーに保存することができます。

気になった方はぜひこちらからUXPin Mergeをぜひお試しください。

データベース GUI にある機能

典型的なデータベース GUI は、ユーザーのタスク管理において使いやすい環境を提供します。

その機能については以下のようなものがあります：

• データ入力： ユーザーは、フォームや入力フィールドを使って、データベース内のデータを入力、修正、削除することができる。
• クエリ： ユーザーはデータベースから特定の情報を取得するためのクエリを作成および実行することができ、SQLコードを直接書くよりも、ビジュアルクエリビルダを使って行われることが多い。
• レポート作成： ユーザーはデータベースに保存されたデータに基づいてレポートを作成しおよび示することができる。
• ダッシュボード・ナビゲーション： ユーザはデータベース構造を移動し、テーブル、リレーションシップ、その他のコンポーネントを視覚的に探索することができる。
• 管理： データベース管理者（DBA）は、ユーザー管理、バックアップ、リカバリなどのタスクを含め、データベースの管理と監視に GUI を使用することが多い。
• リアルタイムのパフォーマンス監視： データベースのパフォーマンスを監視および分析でき、さらに、リソースの使用状況、クエリの実行時間、その他のパフォーマンス指標を追跡できる。
• クロスプラットフォームの互換性： Windows、macOS、Linux などの様々な OS（オペレーティングシステム）に対応する。

このような機能性は、データベースを効率的に操作するための包括的なツールセットをユーザーにまとめて提供することから、さまざまな技術レベルのユーザーにとってデータベース管理がより身近なものとなります。

独自のデータベース GUI をデザインする際に覚えておくべきこと

データベース GUIをデザインするには、ユーザーに優しく効率的なエクスペリエンスを確保するために、さまざまな要素を慎重に検討する必要があります。

ここでは、独自のデータベース GUI をデザインする際に覚えておくべき主な考慮事項を見てみましょう：

要求事項をリストにまとめる

docファイルまたはMiroボードを開き、SQLデータベースに必要なものをブレインストーミングします。

そして、ジョブ理論（Jobs-To-Be-Done）の観点から機能を書き出します。これで、「あったらいいな」の機能を列挙するのではなく、データベース GUI を使うという観点から考えることができます。

ジョブ理論とは、製品で解決しようとしている現実的なタスクや問題を理解することに焦点を当てたものであり、『［状況／文脈］のときに、［機能的な仕事］をしたいので、［望ましい結果］を得たい 』という形で表します。

SQL開発の場合、例えば『SQLエディタにいるとき、構文とコード補完をチェックして、正確で効率的なデータベースクエリをエラーなく書けるようにしたい。』というJTBD ステートメントを書くといいかもしれません。

このフレームワークは、ハーバード・ビジネス・スクールのクレイトン・クリステンセン教授らによって広められましたが、デザインスプリント、デザイン思考のワークショップ、ユーザーへのインタビューなど、要件のリストを作成する際に役立つ方法は他にもあります。

ちなみに CRUDアプリに関するこちらの記事で、より多くのJTBDステートメントについてのヒントを紹介しています。

レイアウトを試す

リストが完成したところで、データベース GUI のUIを考えましょう。ここでUXPin Mergeの出番です。UXPinには事前構築済みのReactコンポーネントが備えられており、ドラッグ＆ドロップで簡単に完璧なレイアウトを見つけることができます。

視覚探索では、列と行があるダッシュボードで強調が必要な機能や、管理画面では中心ページを取る必要がない機能、データベースプロジェクトに必要なページ数を理解することができます。

UXPin Mergeでは、既存のツールに制限されずにデータソースを統合でき、UI構築や、バックエンドを後から処理することができます。

また、オープンソースのローコードプラットフォームで、アプリ構築のワークフローのスピードが上がりますが、UXPin Mergeで完全にカスタマイズ可能なツールを作成することができます。

UXPinでのデザインについては、「【React向け】 ダッシュボード デザインのチュートリアル」の記事をぜひご覧ください。

デザイン原則に従う

デザイン原則とは、システムや製品内の要素の作成および構成を決めるための基本的なガイドラインです。

これはデザイン段階における意思決定プロセスを導く一連のルールやベストプラクティスとして機能します。これに従うことで以下の問題の解決や特定の目標達成に向けた思慮深く目的意識の高いアプローチが保証されます。

• 一貫性： インターフェース全体を通して一貫したデザイン言語を維持し、まとまりのある予測可能なユーザー体験を提供する。これは、タイポグラフィ、配色、イメージだけでなく、UXコピーやコンポーネントにも関連する。
• シンプルさ： デザインの世界では「Less is more（少ない方がいい）」。ユーザーが今必要でない機能をUIに詰め込むよりも、ページ数を増やす方が理にかなっており、JTBDフレームワークで、サイトの情報アーキテクチャを決めることができる。
• 明瞭さと読みやすさ： ボタン、フィールド、メニュー項目には明確で簡潔なラベルを使う。適切なフォントとそのサイズを選び、読みやすくするための適切なコントラストを確保する。
• エラー処理： 可能な限りエラーを防止するメカニズムを実装し、エラーが発生した場合はガイダンスとともに有益なエラーメッセージを提供する。
• 効率： （UIというよりUX的なことだが）タスクの効率に注意を払い、ワークフローを最適化してタスクの実行に必要なステップ数を減らす。よく使う機能へのショートカットやクイックアクセスの提供を検討する。

レスポンシブデザイン

レスポンシブデザインにより、ユーザーはデスクトップ、ノートパソコン、タブレット、スマートフォンなど、さまざまなデバイスからデータベース GUI にシームレスにアクセスし、操作することができます。

そしてこの適応性により、アクセシビリティが上がり、多様なユーザーの好みに対応できるようになります。

ユーザーは、外出先やさまざまなデバイスからデータベースの管理や、クエリの実行が必要になるかもしれません。

しかし、レスポンシブデザインは、使うデバイスに関係なく一貫したユーザーに優しいエクスペリエンスを保証することから、全体的な使いやすさが向上します。

また、レスポンシブ GUI は、画面サイズに応じてレイアウトと機能を適応させることで、最適なユーザー体験をもたらします。

この適応により、レスポンシブでないインターフェースで起こりうる、スクロールのしづらさ、レイアウトの歪み、要素の切断といった問題を防ぐことができます。

拡張性（スケーラビリティ）を考慮する

データソースやフォーマット、アプリなども進化していくでしょう。将来のことを考え、大規模なデータセットや複雑なクエリを扱えるためにも GUI をデザインし、データベースの成長に合わせて最適なパフォーマンスを確保しましょう。

機能を追加する場合も同じです。フィーチャークリープ（機能だらけ）になるよりは、MVP（最小利用可能製品）から始めて、複雑なソリューションに取り組むと良いでしょう。

連携を再考する

デザインにはフィードバックが必要です。他の人からのフィードバックで、盲点を特定でき、考慮されなかったかもしれない問題にも対処することができるようになります。

自分だけがデータベースGUI を使うのではありません。自分がデザインしたインターフェースが理解されるかどうかをチェックし、フィードバックを集めましょう。

また、フィードバックは、品質管理のメカニズムとしても機能します。フィードバックを集めることで、デザイナーは、デザインプロセス中に見落とされた可能性のあるエラー、矛盾、またはユーザビリティの問題を発見することができ、それがより洗練された最終製品に繋がります。

ユーザーによるテスト

ユーザーによるデータベースGUI のプロトタイプのテストは、多くの利点が得られる、製品の全体的な成功に繋がる重要なステップです。

以下に、ユーザーテストを実施すべき説得力のある理由を挙げてみましょう：

• デザインの選択に対するフィードバック： ユーザーは、特定のデザイン要素、レイアウト、機能について貴重なフィードバックを提供できる。どの部分がうまく機能しているのか、どこを改善すればよいのかがわかり、さらなるデザインの反復につながる。
• 問題の早期発見： ユーザーテストにより、製品発売前に潜在的な問題を早期に発見することができる。プロトタイプの段階で問題に対処することは、発売後に変更を加えるよりも費用対効果が高く、時間とリソースの節約になる。
• ワークフローの最適化： ユーザーがどのように GUI を操作するかを理解することで、ワークフローの最適化や、タスクの効率化が実現する。これによって、データベースを操作するユーザーの効率と生産性が上がる。

プロトタイプをテストするには、いくつか方法があります。 UXPin Mergeでプロトタイプを作成するなら、こちらの記事がオススメです。

デザインを絞り込む

ユーザビリティテストの結果を分析し、ユーザーが改善を実感した部分および、予期しない問題や課題を特定します。そして、受け取ったフィードバックに基づいて、デザインをさらに改良します。変更を繰り返し、残っている問題に対処したり、ユーザーから提案された追加の改善点を取り入れたりしましょう。

また、デザインの変更を体系的に文書化することを忘れないでください。ワイヤーフレーム、ユーザーフロー、修正された仕様など、更新されたデザインドキュメントを作成しましょう。このドキュメントは、デベロッパーやその他のステークホルダーの参考資料となります。

データベース GUI のプロトタイプを構築しよう

本記事では、効率的なデータベース管理のためのデータベース GUI のデザインについて深掘りしていきました。

デベロッパーと管理者にとってのメリットから始まり、ReactコンポーネントとUXPin Mergeのインタラクティブなプロトタイピングツールを使ったユーザーに優しいアプローチに焦点を当てました。

データベース GUI はグラフィカルなインターフェースであり、データ入力、クエリ、管理などのタスクはシンプルになり、さまざまな技術的背景を持つユーザーに対応します。

UXPin Mergeでカスタマイズされた GUI をデザインし、完全な管理とセキュリティを実現するオプションに着目し、一般的なデータベース管理システムと GUI ツールを紹介しました。

UXPin Merge でデータベース GUI デザインを試してみたいと思った方は、ぜひこちらから無料でお試しください。

The post データベース GUI – 覚えておきたいUIデザイン８ステップ appeared first on Studio by UXPin.

 電卓 は、複雑な数値問題をユーザーにわかりやすいように置き換えることができます。

このガイドでは、 電卓のUIデザインについて深く掘り下げていきます。種類や基本原則、モバイルとデスクトップでのデザインの違いまで、多面的に見ていきます。

また、電卓の機能をテストする上で、デザインプロセスでReactコンポーネントをどのように活用できるのかをご紹介します。

主なポイント：

• 効果的な 電卓 のUXデザインは、実用性 ＋ UX（ユーザーエクスペリエンス）をシームレスに融合させることでユーザーエンゲージメントを向上させる。
• 電卓の種類（一般、関数、金融、グラフ）に分けて、その用途と対象となるユーザーを決める。
• シンプルさ、一貫性、直感的なレイアウトといったデザインの基本原則で、電卓のインターフェースがうまくいくかが左右される。
• モバイルからデスクトップまで、デバイス問わずにデザインを適応させるために、タッチ入力やクロスプラットフォームの一貫性など、独自の配慮が必要である。
• UXPin Mergeを使い、デザインプロセスでReactコンポーネントの活用する。ダイナミック感のあるインタラクティブ性を持たせることができ、デザインと開発のギャップが埋めることができます。

UXPin Mergeのテクノロジーを使うと、コードを一行も書かなくてもReactコンポーネントを使うことでインタラクティブな電卓プロトタイプをデザインすることができます。

さっそく始めてみましょう！無料トライアルはこちら。

UIデザインにおける電卓の機能とは

電卓の目的はすぐにその場で計算を行うことができることですよね。その主な機能として、データ入力、演算の実行、ユーザーが主要なアプリケーションやプラットフォームを離れることなく結果の確認ができるための合理化されたインターフェースです。

デジタル製品は、エンゲージメントや完了率などのUXメトリクスに依存しています。必要に応じてユーザーに電卓 UIを表示させることで、このようなメトリクスを向上させ、ニーズに応えながら同時に製品としてのビジネス価値も向上させます。

UIデザインにおける電卓の種類

デザイナーが使える電卓は以下の４種類です：

• 一般
• 関数
• 金融
• グラフ

一般電卓

一般的な使用例：

• 食事計画アプリ（総材料の計算）
• ECプラットフォーム（価格の加減算をサッとする）
• メモツール（書かれた内容をサッと計算する）

一般電卓は、足し算、引き算、掛け算、割り算といった標準的な算術演算を処理し、デザイナーは、メモツールや基本的な金融アプリのようなアプリケーションにクイック計算機能を組み込む場合に、このタイプを使います。

関数電卓

一般的な使用例：

• 高校生・大学生向け教育アプリ
• エンジニアリングアプリケーション（公式の計算や方程式の解法）
• 物理や化学のシミュレーター（反応や力の計算）

関数電卓は、三角法から微積分まで、複雑な計算に対応し、科学的なタスクを扱う学生、エンジニア、専門家をターゲットにしたアプリケーションには欠かせません。

金融電卓

一般的な使用例：

• 不動産プラットフォームでの住宅ローン計算
• 求人ポータルサイトの給与計算
• 株式取引アプリでの投資計算
• 銀行アプリのローン利息と返済計算

金融電卓は、利息計算、年金、ROI 評価などの操作に対応し、デザイナーは、銀行アプリ、投資プラットフォーム、ECサイトにこれを組み込み、ユーザーが十分な情報に基づいた財務上の意思決定を行えるよう支援します。

グラフ電卓

一般的な使用例：

• 代数学、微積分学、統計学を教える教育プラットフォーム
• 株式や外国為替取引プラットフォームにおける市場動向分析ツール
• 複雑なデータセットを可視化するデータサイエンティスト向け研究ツール

グラフ電卓は、数式を視覚化し、グラフやプロットを表示します。主に教育ツールや高度な分析プラットフォームで使われ、ユーザーは視覚的な表現を通じて傾向、交点、またはデータの関係を把握することができます。

“いい電卓アプリ” の UIデザインの原則とは

シンプルさとわかりやすさ：

インターフェースは、ユーザーにとって要らないオプションや邪魔なビジュアルがなく、データを入力しやすく結果が簡単に得られるようなわかりやすいものが求められます。

例：Appleに備わっている電卓アプリは、必要な機能のみ提供される。ユーザーは余計な機能を考えることなく、クリーンでミニマルなレイアウトを瞬時に理解して使うことができる。

デザインにおける一貫性

統一されたボタンの形、色、タイポグラフィで、迅速なナビゲーションがしやすくなり、認知的負荷が軽減されます。

例：Apple の電卓iOSアプリは、算術演算子（足し算、引き算、掛け算、割り算）を色別にグループ化し、ユーザーが直感的に演算子を識別して適用できるようになっている。

直感的なレイアウト

直感的なレイアウトは、使い慣れた電卓のデザインを採り入れて機能を論理的に配置することで、迅速なデータ入力と機能適用が促されます。

例：金融電卓では、複利や年金の機能が目立つように配置されていることがよくあるが、これは金銭的な文脈で頻繁に使われていることが反映されている。

電卓のレイアウトと構造のデザイン方法

グリッドレイアウトとキーの配置

グリッド レイアウトを確立して、ボタンを論理的に配置しましょう。 この基本的なデザイン面ではボタンが系統的に配置され、ほとんどの電卓では認識可能な 4 列×5行のグリッドに文字が表示されます。 ユーザーは、馴染みのある形式なので、使用方法について試行錯誤する必要はありません。

オペレーションと機能の階層

使用頻度に基づいて操作の優先順位を付けましょう。算術演算子などの一般的な操作をアクセスしやすい場所に配置させることでUXが最適化されます。このアプローチにより、主要な機能が際立ち、ユーザーのタスクがシームレスにガイドされます。

間隔とグループ分けの重要性

キーとキーの間隔を正確にすることで、誤って押してしまうことが最小限に抑えられます。関数を類似性によってグループ化し、速やかな検索や使用が促されます。また、全三角関数のように、関連するボタンをグループ化すると、ユーザーは直感的にナビゲートされ、必要な操作を選択することができます。

さまざまな画面サイズとデバイスに対応するデザイン

電卓のデザインを多用途に対応させましょう。レスポンシブデザインは、スマートフォン、タブレット、デスクトップなど、デバイスに応じてレイアウトを調整および最適化します。画面の大きさに問わず、確実に電卓の「使いやすさ」と「機能性」が維持されるようにしましょう。

電卓の UX を向上させるビジュアルデザインとは？

電卓デザインにおける色彩心理

ブルーやグレーなど、正確さ、信頼性、明瞭さを連想させる色合いを選びましょう。補色は機能を区別し、落ち着いた色調は気が散るのが最小限に抑えられます。そして、常にユーザーの快適さと集中力を優先させましょう。

タイポグラフィと読みやすさ

読みやすさが上がるタイポグラフィを選びましょう。きれいな線と十分なスペーシングがあるフォントだと、ユーザーは数字や機能をすぐに識別できます。また、主要なアクションと二次的な情報を区別するために、太さやスタイルのバリエーションを考慮しましょう。

機能のアイコン化

目的がすぐに伝わるアイコンを作りましょう。複雑なアイデアをわかりやすいシンボルにシンプル化し、ユーザーが一目で機能を識別できるようにしましょう。アイコンのスタイルとサイズを統一することで、まとまりのある外観になり、誤解を避けることができます。

高度な機能と特徴で電卓の UI を強化する方法

メモリー機能と履歴ログ

メモリ機能と履歴ログは、後で使うために計算を保存することでユーザーの時間が節約され、素早い参照や変更が実現します。 例えば、金融アナリストが年次予測に取り組む場合、メモリ機能を使って重要な数値を保存し、簡単に参照してワークフローを効率化できます。

テーマのカスタマイズと個別化

テーマのカスタマイズと個別化のオプションにより、長時間使用した場合の快適さに違いが出ます。 例えば、ユーザーは目の疲れを軽減するために「ダークテーマ」を使うなど。

AI と音声認識の統合

AI と音声認識の統合により、入力のスピードが上がってアクセシビリティを向上させます。 例えば、両手がふさがっている状態で、複雑な数式を声に出しても、AIによって瞬時に結果とシナリオを受け取ることができると、生産性が大きく向上します。

電卓の UIデザインはモバイルとデスクトップでどう違うのか

タッチ入力とマウス/キーボード入力のデザイン

タッチの場合は、大きくてわかりやすいボタンを優先し、タップしやすいようにしましょう。 逆に、マウスやキーボード駆動のインターフェースの精度はコンパクトなレイアウトやキーボードのショートカット機能を使って最適化するといいでしょう。

モバイル機能の活用

触覚フィードバックを統合して入力または信号エラーを確認し、モバイル アプリのユーザーに触覚的な応答を提供しましょう。 また、スワイプしてエントリをクリアしたり、ピンチして基本モードと科学モードを切り替えなどのジェスチャーを利用して、ユーザー操作を効率化しましょう。

クロスプラットフォームの UX の最適化

ユーザーにインターフェースを再学習させることなく、モバイル、デスクトップ、または （iOS、Windows、Android など）ウェアラブルデバイス間をシームレスに移行できるようにしましょう。 統一されたネイティブおよびWebデザインの原則を利用して一貫した機能を維持し、複数のデバイスを使うユーザーのデータ同期を優先しましょう。

電卓 UI デザインのインスピレーション

ここでは、Dribbble にあった電卓デザインを５つご紹介します。

例 1: Hikmet Atceken による一般電卓のデザイン

この一般電卓の例で、Hikmet が全画面を使っている方法がいいですね。 ボタン間には適切な間隔があり、Hikmet は機能と階層を区別するために微妙な色を使っています。

例 2: Mariana Konstantynovaによるニューロモーフィック デザイン

Mariana の貯蓄計算ツールは、流行のネオモーフィズム スタイルを使っており、若い視聴者をターゲットにするのにピッタリです。 この美しいUIが目を引き、エンゲージメントが促されますね。

例 3: Paramveer による住宅ローン電卓のデザイン

Paramveer の住宅ローン計算ツールは、多くの機能がコンパクトなビューポートに組み込まれた良例であり、モバイルエクスペリエンスを最適化するために、大きなタッチ ターゲットを備えたスライダーやボタンなど、モバイルフレンドリーなコンポーネントを組み合わせて使われています。

例 4: Ramona Tăbuşcă による 色の使用における良例

Ramona は、明るいモードと暗いモードで一貫性を持たせるために、色を上手く使っています。 電卓の機能は ３つの色のグループに分けられているので、どのボタンを押すべきかがわかりやすいですね。

例 5: LLTグループによる住宅ローン計算機のデザイン

LLT グループの住宅ローン計算ツールは、大画面のユーザーにとって良例です。 空白、階層、フォント サイズ、色を使うと、ユーザーはキーの値を簡単に識別でき、データを瞬時に理解できます。

デザインプロセスで Reactコンポーネントを使って電卓プロトタイプを改善する方法

Figma や Sketch などの画像ベースのデザイン ツールは強力な UI デザイン ツールですが、デザインは基本的に静的です。このようなツールは、電卓の美しさを視覚化できますが、その複雑な対話性を実際に試すには至っておらず、効果的な対話型電卓の作成には、準備とセットアップに何時間もかかり、実際のプロトタイプとテストから貴重なリソースが費やされてしまいます。

UXPin はコードベースのツールであり、ベクター グラフィックスを生成する代わりに、舞台裏で HTML、CSS、JavaScript をレンダリングします。 そしてデザイナーは、Storybook を介して、React、Vue、Ember、およびその他の JavaScript ベースのライブラリから、基本要素、パターン、インタラクティブ ウィジェット、UI テンプレートなどのライブ コンポーネントをインポートすることもできます。

UXPin Merge を介してデザインプロセスで React コンポーネントを使うのは、電卓などの複雑なインタラクティブなアプリケーションにとって極めて重要であることがわかります。

Reactコンポーネントベースの構造は、UI要素が全てモジュール式で再利用可能であるということであり、コードを書かなくても UXPin内で実際の操作が可能となります。

この動的な対話性は、静的なデザインツールよりもはるかに最終製品に近いものを模倣し、電卓にはユーザー入力に対する即時かつ正確なフィードバックが求められます。

このようなデザインと機能がシームレスに連携を保証するためにもリアルタイムの機能テストが不可欠です。

Mergeを使ってUXPinで Reactのライブコンポーネントを使うと、デザインと開発の間のギャップが解消され、デザイナーは実際の機能をテストできるようになります。 この違いにより、デザイン検証のループが速くなり、見落としの可能性が減り、強固でユーザーに優しい電卓アプリのデザインが保証されるのです。

UXPinとMerge テクノロジーを使って、イメージベースの時間がかかる作業から、完全にインタラクティブで高速かつ簡単な作業に変えてみませんか？ 詳細とアクセスのリクエスト方法については、Merge のページをぜひご覧ください。

The post 電卓のデザイン – デザインツールで機能するプロトタイプを作る appeared first on Studio by UXPin.

アプリ開発会社が行う最も重要な選択の１つに、アプリのアイコンデザインがあります。

良いアイコンはユーザーを惹きつけ、インタラクションを増やしますが、そうでないデザインだとアプリの普及は遅くなり、ユーザーはあまり使わなくなってしまいます。

ユーザーの第一印象はアプリのアイコンにあり、新しくリリースされた製品を最初にダウンロードする際に、どのストアからでも最初に目にするものであり、起動するたびに見るものなのです。

アプリをうまくいかせたいのであれば、適切な描写を得るのは、単に「あったらいいな」なというものでなく「必要不可欠」なものです。

幸いなことに、アイコンの作成に関しては、インスピレーションを得られる場所や企業がたくさんあります。

そこで本記事では、第一線を行くテック企業５社がアプリのアイコンデザインで行っていること、そしてそれらを実際に作ったデザイナーから学べることについて見ていきます。

主なポイント：

• アプリアイコンのデザインは、美しさ、機能性、ブランド表現、プラットフォーム固有の考慮事項など、さまざまな基準を満たす必要がある。
• 独自のアイコンのデザインを検討する際には、シンプルさを重視するAppleや、革新性とレガシーのバランスをとるMicrosoftのFluent Design Systemなど、第一線で活躍する企業のヒントを参考にすべきである。

アプリのアイコンデザインとは

  アプリのアイコンデザインは、アプリに最適なアイコンの作成であり、多くの場合、アプリのブランド、目的、主な機能を集約し、その要素をシンプルで印象的な画像に凝縮します。アプリのアイコンをデザインする際は、色の選択、形状、拡張性の要素を考慮しましょう。

さらに、デザイナーはプラットフォーム固有のガイドラインを念頭に置かないといけません。iOS、Android、その他の OS（オペレーティングシステム）には、一貫した UX（ユーザーエクスペリエンス）を保証するための独自のデザイン基準があります。その詳細について、人気のハイテク企業が自社のアプリアイコンに何を採り入れているかを見ていきましょう。

本質的に、アプリのアイコンデザインは、美学、機能性、ブランド表現の融合であり、そのすべてが小さなビジュアルスペースに収まっています。ユーザーに与える印象と限られたピクセルスペースを考えると、最高のアプリアイコンデザインを得ることは非常に重要です。

トップ企業が語るアプリのアイコンデザインとは

 デザインに関しては、市場で最も才能のあるデザイナーはトップクラスのハイテク企業で雇用されていることが多いため、そこから学ぶことはたくさんあります。また、市場を牽引する者としてのポジションにいるというのは、通常は彼らがトレンドを作ることができるということです。そこで、Apple、Microsoft、IBM、Atlassian、Google がアプリのデザインで行っていることを見ていきましょう。

１．Apple

 多くの人が Apple をデザイン界のリーダーだと考えており、象徴的なデバイスから素晴らしいアプリまで、数え切れないほどの企業がインスピレーションを求めて Apple に注目しています。

多くのプラットフォームデベロッパーがそうであるように、Appleもベストプラクティスをオンラインで公開しているので、アイコンデザインの観点から、このブランドから得た重要なポイントを３つ見ていきましょう。

その１ ‐ シンプルなほどいい

これまで見てきた印象的なアイコンを思い浮かべてみてください。例えば Facebook や X（旧 Twitter）の古いロゴはそれぞれ、シンプルに「F」と「 X」が描かれています。では、Apple のデザインを考えてみましょう。

例えば、Apple Musicは2つの音符だけですね。このようなアイコンはいずれもシンプルさを求めたものです。そしてそのグラフィカルな描写は、ユーザーのデバイス上ではかなり小さくなりがちだということを覚えておきましょう。複雑なディテールを作り込むと、すぐに埋もれて見失われてしまいます。

いいアプリのアイコンデザインは、大胆で認識しやすいものです。アイコンデザインのプロセスをシンプルなものにするにはどうすればいいか、考えてみましょう！

その２ ‐ 可能であれば文字を取り除く

それか、少なくとも最小限に抑えましょう。文字を入れるのは、それがブランドの重要な部分である場合だけにしてください。

多くの人が会社名やキャッチフレーズを入れたがりますが、特に小さなデバイスではそれが読みにくいことがよくあります。可能であれば、アプリアイコンはグラフィカルなものにしましょう。

その３ ‐ プラットフォームを考慮：そして必要に応じて別々のアプリアイコンを作成しましょう。アイコンの角が丸い iOS ではよく見えても、丸いデザインの Android ではあまりよく見えないかもしれませんからね。プラットフォームを考慮する（そしてアプリアイコンも調整する）ことで、どのデバイスでアプリが使われても、ユニークでありながら統一感のあるエクスペリエンスを生み出すことができるのです。

２． Microsoft

 Microsoft の Fluent Design Systemは、UI（ユーザーインターフェース）とエクスペリエンスデザインの未来を表現すると同時に、同社の歴史的ルーツとの深いつながりを保証しています。

Fluent によるアプリ アイコンのデザインに関しては、過去、現在、未来が明らかに統合されており、これは最新のアプリのデザイナーが考慮すべき点です。

Fluent ベースのアイコンは、単なる美しさを超えたものです。モダンでインタラクティブな UX のために、奥行き、光、動き、物質性を取り入れる一方で、Microsoft の伝統に対する基本的な敬意があります。

そして「以前の世代のソフトウェアの象徴的なイメージを尊重し、想起させながら、どのように革新していくか」などのバランスを取るという課題があり、Microsoft は、そのような歴史の多くを維持しながら、製品の一新を図りたいと考えていました。

以下で、彼らが適用したルールをいくつか見てみましょう：

モノクロを超える

Microsoft は「過去をなぞったレイヤーとダイナミックなアイコン」という答えを出しました。これらのアイコンは親しみやすさは維持され、長年のユーザーには安心感を与えながら、現代的な外観で新しいユーザーを引き付けるものです。

また、カラーパレットは、従来のテーマとモダンなデザインのパラダイムの両方に共鳴しており、テクスチャーと素材は、最新かつモダンでありながら、手触りのよい実世界の体験を彷彿とさせるものです。

レガシーとイノベーションのバランス

あなたの会社が全く新しい会社でないなら、Microsoft が Fluent で行ったことから学ぶことはたくさんあります。

アプリのアイコンのデザインプロセスでは、会社の歴史に敬意を表しながら、同時に会社の斬新で新しいアプリを伝えることが重要です。 Microsoft が Fluent で行ったことを見れば、アプリと会社に望む大胆な未来を伝えながら、その豊かな歴史のバランスをとる方法がわかります。

３．IBM

アプリと聞いてIBMを思い浮かべる人は少ないかもしれませんが、IBM は 「IBMデザイン言語」と呼ばれる説得力のあるデザインシステムを開発しています。

このような概念はアプリアイコンのガイドラインとして機能するため、デザイナーは IBM が指摘した以下のような点を考慮すべきです。

アイコンのデザイン哲学の中心は、4つの異なるグループに分類される： 「ストローク」と「フィル」のアイコン、ヒーローブランド、サードパーティのロゴ、そしてユニークな IBM Plex アプリのアイコンです。

このコンセプトは、アプリのアイコンデザインにとって非常に重要なもの、つまりスペースを示唆しています。アイコンはストロークアイコンか、塗りつぶしか、アプリアイコンの利用可能なスペースをどのように使っているのか、それともネガティブスペースを使っているのか、などは重要な検討事項になります。

全アイコンに同じグリッドを適用する

デザイナーは、IBM のアイコンを全て32px x 32pxのピクセルベースのグリッドで作成し、統一性を図っています。これは基礎的なガイドラインとして機能し、それによって各アートワークが完璧に配置されることが保証されます。

ただし、デザイナーは、希望する形状を実現するために、制作中に微調整を行うことが推奨されます。

アイコングループを作成することで、アイコンの一貫性を維持する

これは、複数のアプリがある場合、そのアプリ全ての背後にその会社あることをさりげなく知らせることができるため、非常に重要です。もちろん、これは IBM だけでなく、Apple や Microsoft も同様です。アイコンを見るだけで、どの会社がアプリを開発しているかがわかることも多いですからね。

もしあなたがデザイナーなら、IBM のデザイン言語には完璧なデザインを実現するための素晴らしい指南書がたくさんあるので目を通すべきです。

４．Atlassian

どんな視覚芸術でもよくあるように、様々なデザイナーや企業にはさまざまな視点がありますが、Atlassian は、アクセシビリティとユーザーを氾濫させないという、以前の企業が言及しなかったことを以下のように強調しています。

アプリのアイコンが確実にアクセシブルであるようにする

現代の世界では、アクセシビリティは「あったらいいな」というものではなく「必須事項」です。つまり、WCAG のコントラスト比を遵守し、見慣れないアイコンやテキストは添えられるべきではありません。

アイコンとそのアプリが何であるかを、その人の能力に関係なく、すぐに理解してもらうものであるべきです。

さらに Atlassian は、アイコンの使いすぎを避けることも奨励しています。「アイコン疲れ」 を最小限に抑えるために、シンプルでクリーンなアイコンにしましょう。

人は毎日何十ものアプリのアイコンを見ていますが、アイコンがあまりに視覚的にごちゃごちゃしていたり、入り組んでいたりすると、そのアプリに傾倒するどころか、遠ざかってしまうでしょう。

５．Google

上記の企業と同様に、Google もまた、Google のアプリアイコンデザインシステムである Material を通じてアイコンを大幅に強調しています。Material には数多くのパラダイムがありますが、デザイナーが考慮すべき以下の３点が際立っています。

その１ ‐ 色について考える

Material のガイドラインでは、「有効」と「無効」のアイコンに使う色を指定しており、さらに「有効」と「フォーカス」を区別する必要があります。また、デザイナーは、特にタッチ機能があるアプリの場合、「フォーカス」の状態を省くことがよくあります。

その２ ‐ 複雑なアイコンを読みやすくする

上記の企業が指摘しているように、アイコンは読みやすくないといけません。なので、読みやすくするためにアイコンを調整する必要がある場合は、たとえそれがシステムアイコンであっても、調整しましょう。

その３ ‐ Material を使った Google のシステムアイコンは、大胆で、対称的で、最小限にする

アイコンの背後にあるアクションが何をするものなのか、ユーザーが判断するのに必要な情報量だけを伝えます。このデザイン原則は、アプリのアイコンデザインで考慮されるべきです。

例えば、下のアイコンは、複雑になりすぎず、意味を伝えるのに十分な情報を示しています。

UXPinを使ってアプリのアイコンをプロトタイプ化しよう

UXPin は、UIを構築し、アプリをプロトタイプにするための１つのソリューションです。また、最終決定する前にアプリのアイコンをプロトタイプ化し、複数のプラットフォームで細部まで、ユーザーがどのように反応するかを確認するベストな方法の１つでもあります。

上記の例からわかるように、アプリのアイコンは、アプリの適切なメッセージとフィーリングを確実に伝えるために、各企業が大きな注意を払っています。

アプリのデザイン段階でしたら、UXPinを無料でお試しになり、完璧なアプリアイコンをぜひプロトタイプ化してみましょう！

The post アプリの アイコンデザイン – テック企業の素晴らしいアイデア５選 appeared first on Studio by UXPin.

地図はアプリのデザインに欠かせないものであり、ユーザーが位置情報サービスとどのように接するかを形作ります。ライドシェアからローカルな発見まで、このような体験は直感的な 地図UI でシームレスでユーザー中心なものになり、地理データ、UI の地図デザイン、デジタルの進化が交差する中、地図UI の技術を習得するというのは、現代の製品にとって不可欠なものとなっています。

主なポイント：

• 効果的な 地図UI のデザインは、複雑な地理データと直感的な UX（ユーザーエクスペリエンス）の橋渡しになる。
• 見た目と機能性のバランスは、ユーザーのエンゲージメントと満足度にとって極めて重要である。
• さまざまなスクリーンサイズに対応し、アクセシビリティを確保することは、幅広いユーザビリティのために非常に重要である。
• Mapbox や Leaflet のようなツールのカスタマイズオプションで、ブランド固有の地図体験が実現する。
• パニング（位置を変わらずに、画面が上下左右に移動すること）、ズーム、レイヤートグリングなどのインタラクティブ機能により、ユーザーのナビゲーションや探索が強化される。

UXPin の高度なインタラクティブプロトタイピング機能を使って、直感的な 地図UI をデザインしませんか。無料トライアルにサインアップして、UXPin で顧客に喜ばれる体験をデザインしましょう。

地図UI とは

地図UI（地図ユーザーインターフェース）は、地理情報を表示するビジュアルコンポーネントです。位置情報サービスは、乗り物の手配から近くのレストランの検索まで、現代のデジタル製品において極めて重要であるため、アクセスしやすく、インタラクティブで、ユーザー中心のサービスであることが不可欠となります。

デジタル製品が進化するにつれ、視覚的に魅力的で機能的に強固なマップに対する需要も高まっています。見た目と機能性のバランスがよくてきちんとデザインされた 地図UI だと、ユーザーは環境をシームレスに移動、探索、操作できるようになり、それで複雑な地理データと直感的なユーザーエクスペリエンスとのギャップが埋まることから、最新のデジタル製品に欠かせないものとなっています。

人気の 地図UI レイアウトとは

フルマップ

フルマップは、デバイスやスクリーンのビューポート全体をカバーします。没入感があって地理的な範囲を完全に見渡すことができ、例えば、Waze や Googleマップ のようなナビゲーションアプリでは、ドライバーにルートや周囲の状況を確実に把握させるためにフルマップを使われています。

部分マップ

部分マップは、UI の一部のみを占め、通常はテキスト、画像、フィルターなどの他の UI要素 と組み合わされます。例えば旅行ブログでは、地図と一緒にコンテンツやインサイトを出しながら、このレイアウトを使って特定の場所が表示されるかもしれません。

参照マップ

参照マップは、特定のデータが強調されずに、自然や人間が作り出したランドマークが表示されます。例えば、都市の観光アプリでは、各スポットについての詳細な分析に入ることなく、観光スポットの一般的な位置を示すために参照マップが採用されることがあります。

埋め込みマップ

デザイナーは、埋め込みマップをより大きなコンテンツ構造の中に組み込みます。例えば、ニューヨークのおすすめコーヒーショップを紹介するオンライン記事では、読者が記事の文脈の中で場所を視覚化できるように、埋め込みマップを使って場所をピンポイントで示すことがあります。

地図UI のデザインの基本

地図UI の要素

• ラベル： 地図上の文字による注釈で、場所や特徴を識別できるようになる。例えば、都市名、道路標識、ランドマークで、ユーザーは簡単に地域を認識し、ナビゲートできるようになる。
• POI（ポイント・オブ・インタレスト）： 観光名所、レストラン、史跡など、ユーザーにとって有益な、あるいは興味をそそられる特定の場所やランドマーク。
• ルート（経路）： ある場所から別の場所への経路や道順を視覚的に表現したものであり、ナビゲーションアプリでは、目的地までの行き方を示すのに欠かせない。
• オーバーレイ： 追加的な状況や情報を提供するためにベースマップの上に配置されるデータの層。例えば、天気図ではオーバーレイを使って地域間の降雨量や気温の変化が示される。

地図の縮尺とズームレベル

正しい縮尺とズームレベルを確保することは、地図の実用性にとって極めて重要です。縮尺で現実世界のどの程度を地図上に表現するかが決まり、それが詳細さと明瞭さに影響を与えますからね。

また、ズームにより、ユーザーは通り名などの詳しい情報にアクセスしたり、ズームアウトして都市概要などの広い視野を得ることができます。そしてズームに関係なく、一貫した読みやすさがあれば、ナビゲートとマップの活用におけるユーザーの信頼が保証されます。

地図UI におけるクロスプラットフォームへの配慮

プラットフォームの垣根を超えて 地図UI をデザインする場合、それぞれのニュアンスを把握するのは、モバイルアプリとデスクトップで一貫している最適化された UX を確保する上で欠かせません。

• iOS： Apple のヒューマンインターフェースガイドラインには、クリーンでミニマルなアプローチがある。ネイティブ コンポーネント、一貫したアイコンの維持、マップ インタラクションのための Force Touch などの機能の活用に重点を置くべきである。
• Android： マテリアルデザインの原則を遵守し、Google の広範なツールとリソースを活用する。デバイスの断片化を考慮し、マップ要素が画面サイズや解像度に応じて効果的に拡大縮小されるようにすべきである。
• Web： モバイルとデスクトップ両方の表示に対応するレスポンシブデザインを優先する。ブラウザやデバイスの多様性を考えると、マップの機能がシームレスかつ一貫して動作することを確認するためのテストは非常に重要である。

さまざまなユースケースに対応するマップのデザイン方法

ナビゲーションアプリ

ナビゲーションツールでは、ルートとユーザーの現在位置に重点が置かれます。明確でわかりやすい経路を提供することが非常に重要であり、それによって注意散漫になるのが最小限に抑えられます。また、交通アラートや代替ルートの提案など、動的な更新で UX が上がります。そしてデザイナーは、確実にユーザーの現在位置が目立つように表示されるようにして、リアルタイムのナビゲーションをしやすくします。

地元のビジネスディレクトリ

ビジネスディレクトリのデザインでは、ビジネスと関連するレビューにスポットライトを当てることが極めて重要です。地図には、明確なアイコンを使ってビジネスの場所が明確に示されるべきであり、レビューのスコアや人気のタグを直接マップ上に統合することで、ユーザーは UI を切り替えることなく、どの店舗に行くかをサッと決めることができます。

イベント情報アプリ

イベント関連の場合、地図は参加者の誘導や、健康と安全の支援に不可欠であり、ステージ、施設、トイレ、非常口がピンポイントで示されていないといけません。色分けやアイコンを使って視覚的に階層化することで、参加者は必要なものをすぐに見つけることができ、楽しさと安全が確保されます。

不動産プラットフォーム

物件を表示するには、価格帯、物件タイプ、近接性、アメニティなどのフィルターが必要であり、デザイナーは、検索プロセスを効率化するために、明確なロケーションマーカーを強調し、ユーザーのフィルターに基づいた物件のみ表示されるようにします。

旅行アプリ

旅行マップは、ランドマークや人気の観光スポット、お勧めのツアールートなどを散策者向けに紹介するものであり、そのデザインには、さまざまなアトラクションにカスタムアイコンを使った、豊かなビジュアルがあるべきです。さらに、地図上にクイックアクセス情報やオーディオガイドを直接組み込むことで、観光客の散策体験が上がります。

地図UI のレイアウトと構成への取り組み法

スクリーンサイズへの対応

• モバイル： 必要な機能に優先順位をつけ、必要に応じてウィジェットを使い、タッチ操作のためのコントロールを効率化する。
• タブレット： より大きな画面領域を利用しながらも、タッチ操作に最適化されている。
• デスクトップ： 詳細なコントロールを備えた広大なビューを提供し、ホバー操作を活用する。

地図コントロールの位置決め

• ズーム：アクセスしやすい場所に置く。通常は右下か左下。
• 地図の種類： 衛星ビュー、地形ビュー、標準ビューをわかりやすいアイコンで切り替えることができる。
• オリエンテーション： 特にモバイル ユーザーにとって重要な、直観的な回転ツールやコンパス ツールを提供する。

情報密度のバランス：

• 主要情報の優先順位付け： ユーザーの現在のタスクに最も関連性の高いデータを表示する。
• レイヤーの使用： ユーザーがさまざまなレイヤー間を切り替えられるようにする。
• ビジュアルの効率化： 明確なマーカーやアイコンを使って、文字の過多を避ける。

レスポンシブな地図レイアウト：

• ポートレート： コントロールを積み重ね、主要なマップ領域が確実に見えているようにする。
• ランドスケープ： 幅を活かしてより広いマップ ビューを実現し、コントロールの位置を変更してアクセスしやすくする。

地図のインタラクションをデザインする方法

ここでは、典型的な 地図UIのインタラクションと、デザイナーがモバイルアプリとデスクトップ／Web デザインにアプローチすべき方法を見ていきましょう。

パニングとスクロール

パンニングで、ユーザーは地図上のさまざまな地域を探索することができるようになり、スクロールで、デジタル製品内の流動的なナビゲーションが保証されます。

• モバイル：スムーズなパンニングのためにタッチドラッグを実装する；意図しないスクロールを防ぐために、ロックされたマップ モードを検討する。
• デスクトップ： クリック＆ドラッグでパンし、スクロールホイールがページスクロールの邪魔にならないようにする。

ズームイン/アウト（拡大/縮小）

ズーム機能により、ユーザーは特定の場所に近づいたり遠ざかったりすることができます。

• モバイル： ズーム用にピンチジェスチャを実装し、タッチ機能用に「+」と「-」ボタンを表示する。
• デスクトップ： ズームイン/アウトにはスクロールホイールを使用し、代替として「+」と「-」のコントロールを入れておく。

クリック/タップ のインタラクション

ダイレクトなインタラクションで、ユーザーは地図上でより多くの情報にアクセスしたり、特定のタスクを実行したりできるようになります。

• モバイル： タッチターゲットを十分に大きくし、タップしたときにすぐに視覚的なフィードバックが得られるようにする。
• デスクトップ： ホバー効果でクリック可能なエリアを強調し、カーソルの変化でインタラクティブ性を表現する。

ルーティングとウェイポイントの設定：

ユーザーは多くの場合、特にナビゲーション アプリで、地図上の位置マーカーを使ってルートを視覚化したり、特定のポイントを設定したりする必要があります。

• モバイル：タッチアンドホールドを有効にしてウェイポイントを設定し、ルート表示に明確なアイコンと視覚的なパスを使う。
• デスクトップ： クリックでウェイポイントを設定し、ドラッグ＆ドロップで柔軟にルートを調整できるようにする。

レイヤートグル

レイヤーで、ユーザーはマップビューをカスタマイズし、関連する情報のみを表示することができるようになります。

• モバイル： レイヤーには直感的なアイコンを使用し、UI を乱すことなく、トグルに簡単にアクセスできるようにする。
• デスクトップ： レイヤーコントロールをマップの周辺に配置し、ツールチップを使って各レイヤーの内容を説明する。

アクセシビリティのための 地図UI デザインのテクニック

色のコントラストと読みやすさ

効果的な地図デザインだと、ユーザーは誰でも情報を消化し、タスクを完了できるようになり、最適な色のコントラストにより、ラベル、ルート、および関心のあるポイントが背景から見やすくなります。コントラスト度の高い配色を優先したり、さまざまなデバイスや照明条件で読みやすさを定期的にテストしましょう。

VUI とスクリーンリーダーの互換性

全ユーザーが地図アプリを視覚的に、または常にインターネットを使って操作するわけではなく、例えば視覚にハンデのあるユーザーは、音声UI とスクリーンリーダーの互換性を統合することで、地図データへのアクセスや理解ができるようになります。このようなツール向けに最適化するには、セマンティックマークアップを使い、説明的な alt テキストを提供して、主要なスクリーンリーダー技術で定期的にテストしましょう。

キーボードナビゲーション

ナビゲーションをキーボードだけに頼るユーザーもおり、パン、ズーム、ウェイポイントの選択など、地図機能がすべてキーボードで操作できることを保証することは極めて重要です。フォーカス可能な要素を使い、キーボード選択に対する明確な視覚的フィードバックを提供して、キーボードショートカットのベストプラクティスに従いましょう。

地図UI をデザインするためのツールやプラットフォーム

Mapbox

どこで使われているか：

• Instacart の宅配サービス
• General Motors のカーナビゲーション（英語）
• Rivian の電気自動車
• AllTrails のハイキングアプリ
• AccuWeather の天気予報アプリ

Mapbox は、その柔軟性とカスタマイズオプションで際立っており、デザイナーは特定のブランドアイデンティティやユーザーのニーズに合わせたユニークな地図体験を作ることができます。また、Mapbox にはデザインツールのスイートと強固な API があり、標準的な地図の外観以上のものが必要で、深い統合機能を求めるユーザーに適しています。

Google マップ API

どこで使われているか：

宅配、ライドシェア、自動車アプリケーションはほとんどであり、挙げきれないほどたくさんあります！ 

多くの人にとって馴染み深い Google マップ API で、Google の膨大な地図のデータベースをアプリや Web サイトにシームレスに統合することができます。豊富なドキュメント、幅広いユーザーへの親しみやすさ、豊富な機能セットにより、多くの場合は Google マップ API がデザイナーに選ばれており、Google の膨大な POI データベースやストリートビュー機能を活用するプロジェクトに最適です。

Leaflet

どこで使われているか：

• Foursquare クラウドベース の位置情報技術プラットフォーム
• Pinterest の SNS アプリケーション
• Facebook の SNS アプリケーション
• Evernote 生産性アプリ

Leaflet は、軽量でオープンソースのオプションをお探しのデザイナーにピッタリな Web サービスであり、特に、カスタムレイヤーがあるインタラクティブマップを Web プロジェクトに埋め込むのに適しています。また、プラグインが豊富な環境と様々な地図サービスとの互換性で、オーバーヘッドなしでのパフォーマンスを求めるプロジェクトに好まれます。

UXPinでより良い 地図UI をデザインする方法

地図は非常にインタラクティブで、多くのマイクロインタラクションやアニメーションがありますが、UXPin の高度な機能により、デザイナーはモバイルデバイスやデスクトップなどのトリガーやユーザーアクションを使って、リアルなマップUIプロトタイプを作成することができます。

また、UXPin のインタラクティブなプロトタイプにより、デザインチームは複雑なUIパターンやマップなどのコンポーネントをテストし、デザインプロセスでより多くのユーザビリティの問題を解決することができるようになります。

静的な UI キットを超えて、世界最先端のデジタル製品デザインツールでデザインプロセスを強化しませんか。UXPin でインタラクティブなマッププロトタイプを作成しましょう。無料トライアルへのお申し込みはこちら。

The post 最もよく使われている「 地図UI 」レイアウトとデザインのヒント appeared first on Studio by UXPin.

 デザイン制約 は、どんな企業規模であろうとプロジェクトとその成果に少なからず影響を与えます。経験が豊富なデザイナーは、仕事を形作る「制約」について向き合い、うまく活かすことで真の創造性がもたらされることを認識しています。

このブログでは、シニアデザイナーにとって身近な課題であるデザイン制約について掘り下げます。

主なポイント

• デザイン制約とは、デザインプロセスで行われる創造的で技術的な決定に影響を与える制約のことをいう。
• 最初のステップは、制約を認めることであり、これらの制約がUXデザイナーに素晴らしいデザインの成果をもたらすことを制約していることを認めること。
• デザイン制約を理解することで、悪影響を最小限に抑える、または問題を完全に取り除くことができる。

UXPin Mergeでプロトタイピングの制約をなくし、デザイナーとエンジニアのギャップを埋め、優れたユーザー体験を提供しましょう。

UXPin Mergeに関する詳細およびアクセスリクエスト方法については、こちらのページをご覧ください。

 デザイン制約 とは

デザイン制約とは、デザインプロセスにおいて、内的要因や外的要因によって課される制限や制約のことです。この「制約」は最終製品に影響を与えるため、組織の全員が制約について認識し、毎回各プロジェクトの開始前にその制約についてしっかりと考えることが非常に重要です。

デザイン制約は大きく分けると以下のようなものがあります：

• 技術的制約：製品の技術スタックとエンジニアリングのチームによるもの
• 金銭的制約：部門予算やプロジェクト予算
• 法規制の制約：従う必要がある法律
• 組織の制約：文化、構造、方針、官僚主義
• 自主規制：各デザイナーのワークフローとクリエイティブな意思決定
• 才能の制約：デザイナーのスキルや経験、プロとしての欠点
• プロジェクト独自の制約：時間、予算、利用可能なチームメンバーなど、プロジェクトに関連する制約

これらをさらに詳しく調べ、チームメンバーやステークホルダーのデザイン制約への対処法について見ていきましょう。

１．技術的制約

技術的な制約は、デザイナーが創造的で革新的な限界をどこまで押し広げられるかを左右するため、デザインプロジェクトに大きな影響を与えます。

以下に技術的制約の例を挙げてみましょう：

• デバイスとOS（オペレーティングシステム）の制限：iOSとAndroidの制約、画面サイズ、処理能力など
• アクセシビリティの制約：音声コントロールとスクリーンリーダーがデザイン決定に与える影響
• 性能の制約：ユーザー帯域幅/インターネット接続、製品サーバー、および技術スタックの影響
• 統合とAPI：外部サービスからの制限とAPI要件
• 技術スタックの制約：フロントエンドとバックエンドの技術によるデザインプロセスへの影響

２．金銭的制約

金銭的制約は、人材、ツール、ユーザーリサーチ、プロジェクトスコープ、テクノロジーなど、デザインプロセスの多くの分野に影響を与えます。多くの人は金銭的制約を「障害」と見なす一方で、ブートストラッピングや回避策を通して創造的思考やデザインイノベーションが促されることがよくあります。

金銭的制約がデザインプロセスに与える影響には、以下のようなものがあります：

• 各分野（リサーチ、ワイヤーフレーム、プロトタイピング、インタビュー、テストなど）の範囲が制限される
• イテレーションとテストの回数が制限される
• デザイナーが使うツールが限定される
• デザインチームの規模とスキルレベルが決まる

３．法的および規制上の制約

法的制約は、UXプロジェクトに関してコンテンツとユーザーデータに最も影響を与えます。法律は国によって変わるため、デザイナーは法律顧問やステークホルダーからのアドバイスに頼ることになります。

法的制約がデザインに与える影響は以下のようなものがあります：

• プライバシー法：デザイナーが収集するデータ、収集方法、ユーザーへの法的通知、許可を得る方法などを規定する法律で、特に欧州連合（EU）の一般データ保護規則（GDPR）やカリフォルニア州消費者プライバシー法（CCPA）などがある。
• アクセシビリティに関する法律: デザイナーは、さまざまな障がいがあるユーザーのために法的に利用しやすいUI（ユーザーインターフェース）にする。（例：米国のADA（Americans with Disabilities Act ：障がいを持つアメリカ人法））
• 知的財産法：文字、画像、動画などのオリジナル作品の著作権。さらに、デザイナーは競合他社やブランドの知的財産、商標、その他の法的保護を侵していないかを考慮しないといけない。
• 業界独自の規制：金融や医療など、プライバシーやセキュリティに関する法律があり、ログインや認証の手順など、デザインに大きな影響を与える業界もある。

４．組織的制約

組織的制約とは、会社の他の部分によってデザインに課される制約を指します。多くは組織の価値観、文化、会社のビジョン、他部門との利害の競合に関係します。

組織的制約の例としては、以下のようなものがあります：

• 時間的制約：ステークホルダーが設定する締め切りは、デザイナーのデザインアイデアの調査やプロトタイプの作成、テストの実施法に影響を与えることがある。
• ブランドガイドライン：組織のブランドは、スタイルやメッセージの決定に影響を与える。
• マーケティングとビジネス目標：デザイナーは、「顧客のニーズ」と「組織の目標」とのバランスをとらないといけないことがよくある。
• デザインシステムの制約：利用可能なコンポーネント、デザイン原則、スタイルガイド、ガイドライン、デザインシステムガバナンスは、デザイナーが製品を作成する方法に影響を与える。
• 組織のサイロ化：連絡や連携がきちんとなされないと、進捗を妨げるサイロ化につながり、これによって重複作業、遅延、デザインドリフト、不整合、その他の摩擦につながることがよくある。
• デザインの価値：組織がUX部門をどのように認識しているかがリソースの配分や賛同に影響を与えてしまい、デザイナーができることが制限される可能性がある。

５．自主制約

デザイナー自身の制約としては、使用するデザインツール、タスクを完了するためにかかる時間、製品のデザインシステム使用の有無など、デザインプロセス中の選択肢やオプションに関連して生じます。

６．人材的制約

人材的制約とは、デザインチームが利用できる「スキル」と「スペシャリスト」に関するものです。管理者はお互いを補い合う人材を配置できるように、各デザイナーのスキルセットと専門知識を把握しておくことが重要です。人材的制約を理解することで、管理者は適切な人材を置いたり、特定のデザインプロジェクトのために専門業者を雇うタイミングを計ることができます。

７．プロジェクト特有の制約

プロジェクトの制約が、他の場合は存在しない、あるいは組織にとって稀なデザイン上の問題を引き起こします。例えば、デザイナーは慣れた時間枠よりも短い時間枠でプロジェクトを完了しないといけない可能性があると、望ましい結果を達成するのにワークフローを適応させたり、ツールを切り替えたりすることになります。

 デザイン制約  – その解決方法

多くの組織では、制約の克服はDesignOpsの仕事です。DesignOpsチームは、部門のアウトプットと組織の価値を最大化するために、このような制約や障害を軽減しないといけません。

この問題ベースのフレームワークで、組織が抱える最大の課題からデザイン制約を克服することができるでしょう。問題ベースのアプローチでは、具体的な問題とそれに関連する制約を解決することができるため、そのインパクトが大きくなります。

• 問題の定義：市場投入までの時間短縮や、デザイナーの生産性向上など、どのような課題を解決しようとしているか。
• 制約の特定：この問題に関連する制約、つまり予算、資源、時間、技術的な制約などをリストアップする。
• 制約の優先順位付け：どの制約が最も重大かを判断し、それに従って優先順位をつける。
• ソリューションのブレーンストーミング：適切な専門家、チームメンバー、ステークホルダーと会ってソリューションのブレーンストーミングを行い、可能性があるもののリストを作る。
• ソリューションの評価：各アイデアの長所と短所を検討し、実現可能性が最も高く、潜在的な影響が最も大きいものを決定する。
• ソリューションの選択：最良の結果をもたらすと思われるソリューションを選択し、実施するための計画を立てる。
• テストと反復：ソリューションの効果を測る KPI （重要業績評価指標）を作成し、結果を最適化するために時間をかけて微調整する。遠慮はせずに、パフォーマンスの悪いアイデアは放棄して新しいアイデアは反復する。

問題の特定：有効性 と 効率性

UXPinが主催したこちらのウェビナーでは、DesignOpsのエキスパートであるPatrizia Bertini氏がソリューションの結果を測るために実務者がどのように問題を解決するべきかについて説明しました。ここでは「有効性」と「効率性」の違いを認識することが不可欠であると主張しています。

有効性は、以下のような定性的なメトリクスを用います：

• 共感と継続的なユーザーエンゲージメント
• アイデア出しと実験のサイクルタイム
• チームのスキル構成（スキルマトリックス）
• デザインスキルの分布
• 部門横断的パートナーによるデザインの価値認識
• デザイナーの満足度と定着率

効率性は、以下のように数字、パーセンテージ、比率を用いて測定可能であり、定量化できます：

• ツールの ROI （コスト／エンゲージメント／アドプション）
• テストとプロトタイプのリードタイム（時間）
• 品質レビューの回数と種類
• チームの生産性（リソースの利用率）
• エンドツーエンドの納期（時間）

UXPin Mergeで制約を減らす

従来のデザインワークフローや画像ベースのツールは、デザイナーに多くの制約をもたらします。特にプロトタイプの忠実度や機能性は、以下のような多くの問題を引き起こします：

• ユーザーテストの範囲が限られる
• デザインプロセス中にユーザビリティの問題を発見できない
• 問題解決の機会が少ない
• ステークホルダーの理解度が低く、購買意欲に影響する
• ビジネスチャンスを特定する能力が低い
• デザイナーとデベロッパーの連携が不十分で、デザインのハンドオフが大変。

UXPin Mergeは、製品のコンポーネントライブラリをUXPinのエディタと同期させることで上記の問題やその他の問題を解決するします。デザイナーは、エンジニアが最終製品の開発で使用する同じUI要素をデザインプロセスで使えるようになります。

Mergeコンポーネントは完全にインタラクティブで、UXPin上でもレポジトリや最終製品とまったく同じように機能します。このインタラクティブ性によって、デザインチームはコンポーネント駆動のワークフローを利用できるようになり、プロジェクト範囲が拡大し、テストと反復が大幅にスピードアップします。

Mergeではデザイナーとエンジニアは共通の言語を使用することができるため、サイロや運用上の制約をなくします。Mergeを使ったハンドオフは摩擦がなく、エンジニアがすでに同じコンポーネントライブラリを持っているため、ドキュメントや説明が少なくて済みます。UXPinがJSXをレンダリングするので、エンジニアは、コピー＆ペーストだけでコンポーネントのプロップに適用できます。

また、テストにおいての制約も大幅に減ります。ユーザビリティテスト参加者とステークホルダーは、最終製品と同じようにプロトタイプを操作できるため、反復して結果を改善するための有意義で実用的な結果を得られるのです。

「UXPin Merge を使うことで、ステークホルダーからのフィードバックを非常に早く行えるようになりました。プロトタイプのリンクを共有するだけで、相手は空いてる時間で自由に閲覧できますし実際にプロトタイプを操作してもらえます。また、Comment機能を使用して相手からのコメントをもらうこともできます。もらったコメントを参考にして改善したら［解決済み］としてマークできるので、使いやすいです。」 – Erica Rider, UX Lead EPX – PayPal

UXPin Mergeのコードベースのデザインソリューションで、プロトタイプの制限をなくしませんか？

時間の制約が厳しい場合でも、反復作業をスピードアップして高品質なプロジェクトを実現できます。

詳細とアクセスリクエスト方法についてはこちらのページをぜひご覧ください。

The post ７つの デザイン制約 とその解決方法 appeared first on Studio by UXPin.