FigmaのダッシュボードUIテンプレートを厳選〈商用利用可〉

byNatchan - 2023/05/06 2024/01/17

0

Figmaで使えるダッシュボードのUIテンプレートをEnvato Marketから厳選しました。Figmaのフリー素材を駆使したいUI/UXデザイナー、プロフェッショナルなUIキットを活用してお洒落なマイページをスピーディーに制作したいWebエンジニアなどにおすすめの内容です。

{tocify} $title={Table of Contents}
Ads
Amazon Audible｜プロの声優や俳優の朗読が12万冊以上聴き放題で楽しめる〈30日間無料〉

Figma｜フリー素材サイトについて

今回、厳選したFigmaで使えるダッシュボード用UIテンプレートはすべてEnvato Marketから入手できます。素材は有料ですが、買い切りなので一度購入したらずっと使えます。

また、フリー素材なので商用利用可です。どれも視認性が高い上にかなりボリュームのあるUIキットなのでお得です。Envato Marketについて詳しくは以下の記事で解説しています。

おすすめ記事：Envato Marketの購入方法や使い方を解説〈海外フリー素材〉{alertInfo}

FigmaのダッシュボードUI7選

それでは、Figmaのダッシュボード用UIテンプレートを一挙紹介します。画像については一部のみ掲載しています。各商品ページにてすべてのサンプル画像をチェックしてください。

※リンク先にThemeForestとあるのは、Envato Marketではカテゴリー別に名称が変わるためです。なのでThemeForestと表記されていても、大元はEnvato Marketになります。

Rocketboard

断トツで最もおすすめ

名称：Rocketboard
データ形式：Figma FIG
全ページ数：108

レスポンシブ：対応
ダークモード：あり

一般的なダッシュボードにあるすべての機能を網羅したような完成度のUIキットです。このボリュームとデザイン性の高さで良心的なプライスなので最もおすすめ。

{getButton} $text={詳しくみる} $icon={link} $color={#0099ff}

Alphaboard

名称：Alphaboard

データ形式：Figma FIG

全ページ数：93

レスポンシブ：対応

ダークモード：あり

1つ前に紹介したUIキットと同じ制作会社によるものです。こっちの方がよりポップでカラフルなデザインになっています。

{getButton} $text={詳しくみる} $icon={link} $color={#0099ff}

Frox

名称：Frox

データ形式：Figma FIG

全ページ数：135

レスポンシブ：不明

ダークモード：あり

このテンプレートの良いところはEコマース、金融、人材、ブログCMSなどジャンル別にページが用意されていることです。

{getButton} $text={詳しくみる} $icon={link} $color={#0099ff}

Yoda

名称：Yoda

データ形式：Figma FIG

全ページ数：100

レスポンシブ：不明

ダークモード：なし

とてもクリーンなデザインではありますが、ダークモードに対応してないこととレスポンシブ対応なのかどうか不明なことが欠点です。

{getButton} $text={詳しくみる} $icon={link} $color={#0099ff}

Vuexy

名称：Vuexy

データ形式：Figma FIG

全ページ数：不明

レスポンシブ：対応

ダークモード：あり

サンプル画像を見ると、値動きのあるマーケットや金融系のサービス向けな感じもしますが、ウィジェット数が多いので自在にカスタマイズできます。

{getButton} $text={詳しくみる} $icon={link} $color={#0099ff}

Kleon

名称：Kleon

データ形式：Figma FIG

全ページ数：100

レスポンシブ：対応

ダークモード：あり

このテンプレートはスマホだけじゃなく、タブレットにも対応するレスポンシブデザインであるメリットが強いです。

{getButton} $text={詳しくみる} $icon={link} $color={#0099ff}

E-Study

名称：E-Study

データ形式：Figma FIG

全ページ数：24

レスポンシブ：不明

ダークモード：なし

オンラインラーニングなどの教育系サービスに特化したUIキットです。生徒側と講師側両方のページが用意されています。

{getButton} $text={詳しくみる} $icon={link} $color={#0099ff}

最後に｜FigmaにはAdobe Fonts

以上、Figmaで使えるダッシュボード用のUIテンプレートを厳選しました。

今回紹介したテンプレートに使われてる英語フォントはGoogle Fontsのものですが、日本語フォントはAdobe Fontsの方が充実しているのでおすすめです。

2022年、FigmaはAdobeに買収されたのでAdobe Fontsと互換性があります。

最後までお読みいただきありがとうございました。