LoginSignup
310

すぐに使える!Reactテンプレート15選

Posted at

はじめに

WebサイトやWebアプリケーションを作る際に、Reactを使って開発をする方も多いのではないでしょうか。
世界で人気があり、学習も比較的容易だと言われているReactですが、1からかっこいいUIを構築するのは難しいですよね...
今回はReactで開発をする際に使えるコンポーネントセットやデザインテンプレートを紹介します。

この記事内ではできるだけ無料で使えるものを紹介していますが、課金をすることによってより多くのテーマが扱えたりするものも含まれています。

弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています!興味をお持ちいただける方は、こちらまで。

Reactとは

Facebook社(現Meta社)が開発したUI構築のためのJavaScriptライブラリです。
「Facebook」「Instagram」「Yahoo!」「Airbnb」「Netflix」「Slack」など、世界中で多く採用されているライブラリです。オープンソースとしても公開されているので、品質も保たれています。
公式サイト:https://ja.legacy.reactjs.org/

UI・デザインシステム

Atomize

atomize.png
公式サイト:https://atomizecode.com/
github:https://github.com/proksh/atomize#readme

オープンソースのUIフレームワークです。開発者とデザイナーが協力して一貫性の取れたUIを構築できるように配慮されています。スタイルガイドに沿って統一されたUI設計ができる他、カスタマイズやコンポーネントの追加もできます。

Treact

Treact.png
公式サイト:https://treact.owaiskhan.me/

フレームワークにTailwindCSSを使用して開発されたUIコンポーネントセットです。7種類のランディングページのデモ、8種類のインナーページのデモ、52種類のコンポーネントが用意されています。また、デスクトップページだけでなく、モバイルやタブレット向けにも対応可能です。

Chakra UI

Chakraui.png

公式サイト:https://chakra-ui.com/
github:https://github.com/chakra-ui/chakra-ui/

ChakraUIはReactアプリケーションを構築するために必要なコンポーネントセットを提供しています。Githubのスター数は32.8kと多くの人から支持を得ているコンポーネントセットです。ほぼ全てのコンポーネントがダークモードに対応していたり、すべてのコンポーネントについてWAI-ARIAの仕様に準拠していたりととても使いやすいです。

Material KIT React

MaterialUIkit.png

公式サイト:https://www.creative-tim.com/product/material-kit-react
github:https://github.com/creativetimofficial/material-dashboard-react

豊富な機能と高いカスタマイズ性を備えた、見栄えの良いウェブサイトを作りたいと考えている人にはもってこいの無料のReactUIテーマです。ボタン、アラート、カードなど、40種類以上の個別要素で構成されており、自由に選択、組み合わせることができます。また、デザインブロックやサンプルページも用意されているので開発がスムーズに進みます。英語ではありますが、開発者向けのドキュメントも充実しています。

Ant Design Pro

AntDesignpro.png

公式サイト:https://pro.ant.design/
github:https://github.com/ant-design/ant-design-pro/

中国のAlibaba社が開発したAnt Designというライブラリを使用して作られているReactテンプレートです。美しいデザインで使いやすいことはもちろんですが、様々な画面サイズに対応したデザインで簡単な設定でカスタマイズ可能であることも特徴です。

Base Web

baseweb.png

公式サイト:https://baseweb.design/
github:https://github.com/uber/baseweb

日本ではUber Eatsで有名なUberで使用されているReactのコンポーネントとユーティリティからなるオープンソースのツールキットです。高品質でカスタマイズもしやすく、ドキュメントもとても丁寧です。エンタープライズアプリケーションやEコマース、スタートアップなどのプロジェクトに最適です。

Blueprint

Blueprint.png

公式サイト:https://blueprintjs.com/
github:https://github.com/palantir/blueprint

ReactベースのWeb用UIツールキットです。デスクトップで使うことを想定されており、複雑でデータ量の多いUIを構築するために最適化されています。日付や時刻、タイムゾーンなどを操作するための要素も揃っているのが特徴です。ドキュメントもまとまっておりとても見やすいです。

ダッシュボード系

Tabler

tabler.png

公式サイト:https://tabler-react.com/
github:https://github.com/tabler/tabler-react

あらゆる種類のバックエンドWebアプリケーションに最適な無料の管理ダッシュボードテンプレートのReact版です。ボタン、マップ、チャート、フォームなどのコンポーネントが豊富に揃っています。

Devias Kit

Devais.png

公式サイト:https://material-kit-react.devias.io/
github:https://github.com/devias-io/material-kit-react

Material UIコンポーネントを使用して構築されたReact用のダッシュボードテンプレートです。無料でも7個のシングルページのデモが用意されていますが、Proバージョンを使うことによって、開発の幅はさらに広がりそうです。

Shards Dashboard Lite

Shards dashboard.png

公式サイト:https://designrevision.com/demo/shards-dashboard-lite-react/blog-overview
github:https://github.com/DesignRevision/shards-dashboard

Bootstrap4を使用して構築された、モダンなデザインのダッシュボードテンプレートです。ボタンやフォームなどのコンポーネントも用意されている他、1500以上のアイコンをサポートしていることも特徴です。

Airframe

Airframe.png

公式サイト:http://dashboards.webkom.co/react/airframe/dashboards/projects
github:https://github.com/0wczar/airframe-react

Bootstrap4とReact16をベースにした、無料かつオープンソースのReactアプリテンプレートです。10種類以上のレイアウトバリエーションがあり、コンポーネントも充実しています。CRM、CMS、管理ダッシュボード、分析などあらゆるWebアプリの作成に役立ちそうです。

Webサイト

Gatsby Starter Ghost

Ghost & Gatsby.png

公式サイト:https://gatsby.ghost.org/
github:https://github.com/TryGhost/gatsby-starter-ghost

ブログ、マガジン、ニュースウェブサイトなど様々なWebサイトをこのテンプレートで作ることができます。デスクトップ、モバイル、タブレットなど全てのサイズに対応可能なサイトを作ることができることも魅力です。

React SaaS Template

React SaaS Template.png

公式サイト:https://reactsaastemplate.com/
github:https://github.com/dunky11/react-saas-template

SaaSプロジェクト、オンラインサービスなどを展開するスタートアップ向けに開発されたテンプレートです。軽量でシンプルなWebサイトを作成することができます。

ランディングページ

Open

open.png

公式サイト:https://open.cruip.com/
github:https://github.com/cruip/open-react-template

オープンソースプロジェクトやオンラインサービス向けにデザインされたランディングページのテンプレートです。ダークで洗練されたデザインであることや様々なコンポーネントを備えていることが特徴です。

Ant Design Landing

Ant design landing.png

公式サイト:https://landing.ant.design/
github:https://github.com/ant-design/ant-design-landing

Ant Design System によって構築されたランディングページ用のテンプレートです。テンプレートの種類が豊富で、バナーやフッターなどのモジュールもたくさん備えられています。

参考文献

終わりに

コンポーネントセットやテンプレートを上手に使って素敵なWebアプリケーションを作りましょう!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
310