浮世絵にインスパイアされたUIコンポーネント、和紙・墨・朱の和のカラースキームが癒やされる -Hinomaru Ink UI Kit
Post on:2026年9月17日
sponsorsr
日本の浮世絵にインスパイアされ、日の丸のポスターのように描かれた再利用可能なUI要素・UIコンポーネントのキットを紹介します。
テキストや罫線には墨色、背景色にはくすんだ和紙のような色、アクセントカラーには日の丸の紅色をイメージした朱が使用されており、目に優しく、癒やし系のカラースキームが使用されています。
Hinomaru Ink UI Kit
ShiUI -GitHub
Hinomaru Ink UI Kitは、日の丸のポスターを思わせるフラットなスタイルでデザインされたコンポーネントのキットです。111種類のUI要素と24種類のUIコンポーネントが揃っています。
ライセンスはISCライセンスで、商用プロジェクトでも無料で利用できます。ISCというのを初めて見たのですが、そのほとんどがオープソースとのことです。
作者のサイト「Dmitrii Dark」でも同じカラースキームが使用されています。
デザインの大きな特徴は、フラットな2D、端正な1.5pxのライン、シャドウはなし、和紙・墨・朱の3色のみのカラースキームです。和紙は背景色に、墨はすべての本文と境界線に、朱はアクセントカラーです。
Hinomaru Ink UI Kitのカラースキーム
- 和紙:
#e5e3dc - 墨:
#2a2926 - 朱:
#e14d2a
サイトでは朱になっていますが、日の丸に使用されている色の名称は「紅色」です。紅色には厳密な色指定はなく、「鮮やかな紅色」という規定があるだけです。よく使用される色合いは、RGB: 188, 0, 45、CYMK: 0%, 100%, 76%, 26%、HEX: #bc002d でしょうか。
Hinomaru Ink UI Kitには、111種類のUI要素と24種類のUIコンポーネントが揃っています。すべてReactで実装されており、コードは各ボタンからコピペで利用できます。
111種類の中からいくつか紹介します。まずは、ボタン類。
デモ：ボタン
シール・タグには通常のサイトで見かけるものをはじめ、判子や印鑑を模したものもあります。
デモ：シール・タグ
UI要素は111種類と数が多いので、あとはまとめて紹介します。左上から、フォーム、ナビゲーション、フィードバックとステータス、データ。ちょこちょこ和のデザインやコンテンツが含まれており、楽しめます。
フォーム、ナビゲーション、フィードバックとステータス、データ
左上から、オーバーレイ、カード、マークとモーション、図とグラフ。
オーバーレイ、カード、マークとモーション、図とグラフ
続いて、24種類のUIコンポーネント。
まずは、サイトの上部にも使用されているヒーロー。
コンテンツ用もさまざまなコンポーネントが用意されています。特徴や機能もまとめるコンポーネント、FAQ、ログイン、チェックアウト、プロセス、お問い合わせフォームなど。
コンポーネントにも和のデザインやコンテンツがたくさん含まれています。上部には、判子や印鑑のシールがあったり、京都、和紙、桜、椿など面白いですね。
sponsors
