【React向け】 ダッシュボード デザインのチュートリアル

最初に

ダッシュボードは、アプリケーション内の主要なイベントの整理や、さらなる分析に使える統計情報を確認できることから営業、マーケティングなどのを含むさまざまなチームまたはビジネスでよく使用されます。

一見、ダッシュボードのデザインは複雑そうに思うかもしれません。大量の情報とデータセットが統合されていますからね。

しかし、実際にダッシュボードを作成してみると、意外ととても簡単に１つにまとめることができます。

ここで重要なのはデザイン上の決定を導くために役立つ、すぐに使えるコンポーネントを用意しておくことです。

本記事では、Reactライブラリである Material UI （既製の要素の完全に文書化された人気のライブラリの１つ ）を使ってレスポンシブなダッシュボードをデザインする手順を見ていきましょう。

レスポンシブなレイアウトを短時間で簡単に作ってみませんか？

完全にインタラクティブな要素をドラッグ＆ドロップするだけで、プロ並みのUIを数分で簡単に作成することができます。

詳しくはUXPin Mergeのページをぜひご覧ください。

ダッシュボードの構築に MUI コンポーネントを使う理由

MUIは、React向けのコンポーネントライブラリであり、Googleのマテリアルデザインガイドラインに従って開発されました。

開発当時でもMUIは画期的なコンポーネントライブラリであり、React開発者はレスポンシブレイアウトをより速く構築できるようになりました。

また、MUIチームはライブラリを進化し続け、新しいバージョンを随時リリースしているため今日でも変わらず人気があります。詳しくは、MUI に関するこちらの記事をご覧ください。

MUI はデータ表示コンポーネントでいっぱい

MUI には、ダッシュボードに最適なUI（ユーザーインターフェース）の要素が数多くあり、広範囲にカスタマイズ可能です。

コンポーネントの種類

カード

特定のデータポイント、または強調したい関連データのグループを表すカードを作成できる。

データテーブル

MUIは、ソートとフィルタリング機能を持つシンプルな外観の Reactコンポーネントに公開されている。

日時ピッカー

詳細な日付または時刻での並べ替えが必要な場合は、 Material UIコンポーネントを使用する。

入力コンポーネント

チェックボックス、レーティング、セレクトなど、データテーブルで使いたいあらゆるタイプのボタンや入力フィールドが見つかる。

きちんと文書化されたライブラリ

Material UIは、最も文書化された UIコンポーネントライブラリの１つです。

ライブラリの進化とともにドキュメントを更新し続けるというコミットメントから、包括的な公式ドキュメントを備えています。

MUIがライブラリを最新の状態に保つ努力をしていることはもちろんですが、ライブラリはコミュニティからの強力なサポートを受けています。

例えば、開発者は Material UIを使ったアプリ構築のチュートリアルを頻繁に共有し、ヘルプが必要な人たちを手伝うことも十分できます。

アクセスしやすくレスポンシブである

MUIには、「使いやすい」と「レスポンシブ」という２つの大きな特徴があり、これは現代のインターフェースのデザインにおけるポイントなっています。

MUIはアクセシビリティを重視しており、「ARIA属性の使用」などのアクセシビリティのベストプラクティスに関するヒントが含まれています。

また、レスポンシブデザインにおいて、MUIは最も優れたコンポーネントライブラリの１つです。

デバイスや画面サイズに関係なく動作するレスポンシブレイアウトを簡単に作成できます。

MUIコンポーネントでダッシュボードを構築する方法

ここからはUXPin Mergeを使って、MUIコンポーネントを使ったシンプルで機能的、かつレスポンシブなダッシュボードを構築する方法をご紹介します。

UXPinのアカウントをまだお持ちでない方は、こちらでUXPinのアカウントを作成してください。

それでは実際に作成してみましょう！こちらのUXPinプレビュー画面を開き、コードをみながらインタラクティブ性と応答性の高さをぜひご確認ください。

ステップ１：プロトタイプを新規で作る

 

 

 

UXPinのDashboardから［Design with coded components（コード化されたコンポーネントでデザインする） ］にカーソルを合わせ、MUIライブラリを選択します。

次にエディタが表示され、中央にはキャンバスが表示されます。

このキャンバスが作業フィールドになるので、レイアウトをデザインしたいデバイスに調整するには、右側にある「CANVAS SIZE」でキャンバスサイズを設定してください。

その他に、右側のメニューでは背景色の変更や、要素を整列させるためのグリッドの追加も可能です。 

キャンバスの左側では、ページやレイヤー、既成のコンポーネントなどが全て確認できます。

ちなみにMUIライブラリの場所は、左下の［Design System Libraries］から［MUI V5］を見つけましょう。（MERGE LIBRARIESの中にあります）

あとは、好きなコンポーネントをキャンバスにドラッグ&ドロップまたは、クリックすると中央に表示されます。

いかがでしょうか？簡単にできますね！

ステップ２：ThemeCustomizer にアクセスする

MUIライブラリを開き、［ThemeCustomizer］を検索します（検索バーを使って見つけましょう）

MUIコンポーネントの外観の調整に便利で、 ThemeCustomizerをキャンバスの上と外側に配置すると、操作しやすくなります。

ステップ３：キャンバスに MUI コンポーネントを配置する

デザインしたいコンポーネントを選びます。アプリバーやパンくずリストなどの操作から始めましょう。

アプリバーでは、ユーザーは他のページへのアクセスまたはアプリ内移動がしやすくなり、パンくずリストでは、アプリ内でのユーザーの位置付けを可能にします。

下のチュートリアル動画をご覧ください：

コンポーネントの四隅をクリックして拡大や縮小することで、簡単にサイズを調整できます。

他のコンポーネントも見てみましょう。

Cards（カード）

さまざまなインサイトを強調するために、このコンポーネントを複製する。

Paper（ペーパー）

テキストボックスです。

Typography（タイポグラフィ）

ライブラリからドラッグ&ドロップして、Paperコンポーネントに入れる。フォントの操作ができる。

Table（テーブル）

ソートできるデータのテーブルになる。

これでコンポーネントの準備ができたので、キャンバスの上に配置したThemeCustomizerでテーマを切り替えることができます。

ステップ４：コンポーネントをカスタマイズする

ここからが楽しくなってきますよ！

コンポーネントを移動させたり、独自のコンテンツやデータで埋めるたり、パディングやサイズを編集など、好きなように触ってみてください。

これは、基本的なコンポーネントだけでなく複雑なコンポーネントを作成するステップでも同じです。

テキストボックスのコンポーネントを取り出し、その中にいくつかの子要素をコピーした方法をご覧ください。

次に、実際のコンテンツを入力し、テキストのサイズを調整して、パディングを追加しました。 テーブルも同様です。

テーブルのセルをコピーして、［Pages and Layers］パネルに貼り付けるだけで、さらに行が追加されました。

ステップ５：グリッドとレイアウトを設定する

レイアウトがレスポンシブかどうかを確認します。コンポーネントをキャンバスの外に出し、レイアウト要素を配置しましょう。

その方法は次の通りです。

メニュー用のコンテナから始めます。コンテナをキャンバスの上に置き、幅に合わせてサイズを変更して、アプリバーを戻します。コンテナが必ず 「responsive（レスポンシブ）」 に設定されているようにしてください。

その後は、パンくずリスト用のBoxをドラッグ&ドロップし、データテーブル、カード、テキストボックス用のグリッドを追加します。

メニュー内のコンポーネントを移動させてグリッドをコピーして、その中に別のコンポーネントを配置するだけなのでとても簡単です。

ステップ６：デザインのプレビューと共有をする

これでダッシュボードを見たり、他の人と共有できる準備が整いました。

［Share］ボタンをクリックし、プロトタイプをプレビューするためのURLをコピーしてブラウザに貼り付けるか、Previewボタン（▶️）をクリックして確認してください。

できましたか？いいですね！！これで、ウィンドウのサイズを変更して、プロトタイプが実際にレスポンシブデザインのようにサイズを調整できるかが確認できます。

また、そのリンクを他の人と共有して閲覧してもらうこともできます。

ステップ７：実装作業

デザインは完了したので、最後のステップはコードをReactアプリケーションにコピーするだけです。

必要な依存関係や設定がすべて含まれた 初心者向けのReactボイラープレートを用意しましたので、こちらからCodeSandboxやStackBlitzですぐに編集を始めることもできます。

React App Boilerplateのインストール実行手順

1. ボイラープレート のレポジトリをダウンロードまたはクローンする。

2. npm install を指定してプロジェクトをインストールする。

3. npm start を指定してプロジェクトを実行する。 

テーマのインポート

1. UXPinのSpecモードにあるThemeCustomizerのコンポーネントのJSXをコピーする。

2. プロジェクトのtheme.jsファイルに JSX を貼り付ける。

コンポーネントのインポート

1. UXPinのSpecモードから、目的のコンポーネントコンポジションのJSXをコピーする。

2. JSX をApp.jsファイルに貼り付ける。

3. MUI からインポートする各コンポーネントに import のステートメントが追加されていることを確認する。例：’@mui/material/Button’から「Button」 をインポートする。

より詳細な手順については、CoderOneのビデオチュートリアルの最後の部分をご参照ください。

UXPin Merge でレイアウトを１０倍速で作成する

これで完了です！これで、完全にレスポンシブでMUIコンポーネントライブラリと一貫性のある、アプリ用の新しいダッシュボードがセットアップされました。

作成したダッシュボードがプレビューのダッシュボードと同じようになっているか見てみてください。

UXPin Mergeを使用して、ダッシュボード以上のものも作成することができます。

デザインスキルがなくても、簡単にコードに変換できるアプリ、ウェブサイト、その他のデジタル製品の完全なUIを効率的にデザインできます。

無料トライアルはこちらから