ウェブアプリや業務用システムのデザインをする際、UI の参考を探すのって結構難しいですよね。
似たようなサービスがあればそれらを実際に触ってみて参考に……ということもできますが、特に業務用のシステムとなると、一般には画面が公開されていなかったり、簡単に試せるものでもなかったりとなかなかハードルが高いです。
ここ数日、たまたまそういう「ウェブアプリ UIデザインの参考になりそうなもの」を探し回っていたので、見つけたものをいくつかご紹介したいと思います。
UIフレームワークや管理画面テンプレートのデモ画面
UI フレームワークや管理画面テンプレートには利用イメージのデモ画面が用意されていることがあります。
フレームワークやテンプレートをそのまま使うわけでなくともデザインの参考になりますので、いくつかご紹介します。
Codebase
Codebase は、Bootstrap を利用した UI フレームワークなのですが、利用イメージの参考としてデモ画面を用意してくれています。
ダッシュボードのテイストも数種類用意されているほか、「e-commerce」「Forum」など、サービスの機能ごとによくある画面構成のサンプルもあるので、イメージが掴みやすくなっています。
Dashkit
Dashkit は、Bootstrap を利用した管理画面テンプレートです。こちらのデモ画面も参考になります。
管理画面のテイストにバリエーションはありませんが、機能ごとの画面のサンプルが豊富なので、必要な機能に合わせた画面構成がイメージできます。
Gentelella Alela!
Gentelella Alela! も Bootstrap を利用した管理画面テンプレートです。
テンプレートのデモ画面には、数種類のダッシュボードのほか、EC の商品画面や、プロジェクトの一覧画面、プロフィール画面など、サービスの機能に付随する画面も用意されています。
Bootstrap を利用した管理画面テンプレートはウェブ上に数多く公開されていて、「管理画面テンプレート」と検索するだけでたくさん見つかります。
ベースが Bootstrap なので、基本的な構成や細かなパーツのデザインは似通ってきますが、上記のようにデモ画面が用意されているものも多いので、デザインの方向性を決めるのに活用できそうです。
UI ジェネレーターのテンプレート
最近は、AI を利用して UI を生成するサービスも出てきています。
そういったジェネレーターにもテンプレートが用意されていて、プレビューできるようになっています。
「雇用管理」「メッセージ」「予約管理」など、種類ごとのテンプレートが用意されているので、機能ベースで参考を探すのに役立ちます。
Uizard
UI ジェネレーター Uizard のサイトに掲載されている、ウェブアプリの UI テンプレート集です。
スマホやタブレットのアプリ、ウェブサイトのテンプレートも用意されていますので、ウェブアプリの他にも参考にできそうです。
Visily
こちらも UI ジェネレーター、Visily に用意されているデザインテンプレートの一覧です。
アプリのベースとして使えるざっくりとした要素のみが配置されたワイヤーフレームものもあれば、しっかりとデザインされたものもあります。
「Hi-Fi Templates」のカテゴリーには、デザインされたテンプレートがまとめられていてます。
業務システムのデザインサンプルが欲しい
すでに挙げたように、一般的な管理画面のデザインは探せば色々と見つけられます。
しかし、たとえば社内の業務フローと密接に結びつくようなシステムの管理画面となると、画面の構成や要件も複雑になりがちです。
そういう場面で参考にできるようなものがあると嬉しいのですが、なかなか見つかりませんね……
「これ参考になるよー」というものがあったらぜひ教えてください。