旧萌尽狼グ

同人音楽サークルkaguyadepth代表、萌尽狼(もえつきろ)の個人ブログ ※更新終了

日本製で日本語に対応したCSSフレームワークをまとめてみた

f:id:moetsukiro:20190518050408j:plain

NES.cssが話題だ。
nostalgic-css.github.io
公式サイトは英語だが、作者は日本人。
kuroeveryday.blogspot.com
個人的に使うならファミコン風のデザインだけいただいてドット絵は不要…と思いきやドット絵はCSSで描かれているという驚きの展開。
qiita.com


さて日本製のCSSフレームワークといえばOnsen UIやBasisなどが代表的だが、これらは特に日本語の扱いに長けているというわけではない。
ja.onsen.io
sass-basis.github.io
最新のCSSフレームワークを検索しても、どの記事も似たりよったりで、日本人が作ったCSSフレームワークを目にする機会はほとんどない。
そこで過去にはてブしてあったものを中心に、日本製で日本語に対応したCSSフレームワークをまとめてみることにした。

MUSUBii

musubii.qranoko.jp
Yaku Han JP作者による日本語サイト向けに最適化されたシンプルなCSSフレームワーク

echo.css

cms-skill.com
札幌のWebbingStudio制作の、CMSサイト制作に最適化された、マルチバイト言語対応のCSSフレームワーク
デモサイト

Arakawa Template

arkw.net
愛知県岡崎市の高校生が制作したオープンソースCSSテンプレート。
レスポンシブデザイン対応、3種類のカラーテーマ、2カラムのウェブサイトも制作可能なところが主な特徴と思われる。
作者サイトには学生ならではのユニークなプロジェクトが多数。

Honoka

honokak.osaka
日本語も美しく表示できるBootstrapテーマ。最新バージョンはBootstrap4に対応。ラブライブ!高坂穂乃果をイメージし「honokak.osaka」というユニークなドメインでも話題に。数多くの派生テーマが作成されているが、アップデートは個別に行われており一部はBootstrap3のままとなっている。以下、Enpediaの記事を参考にまとめた。

jpn.css

kokushin.github.io
BootstrapなどCSSフレームワークを適用させた際、日本語だと不格好に見えてしまう問題を解消するためのスタイルシート。フォントには美しくデザインされた「游ゴシック」を採用し、最新バージョンであるBootstrap4に対応。タイポグラフィ周りだけ最適化されるので、他要素への影響はない。
作者サイトには他にも魅力的なプロジェクトが多数。

Fivee-base

plain-web.com
日本製のかゆいところに手が届くダッシュボードUIデザイン用CSSフレームワーク。作者は企業向けサポートや完全オリジナルのCSSフレームワーク制作も行っているとのこと。

印 INCSS

web.archive.org
(公式サイト閉鎖のためインターネットアーカイブへのリンクです)
株式会社インブランディングによるIE7/8対応、日本製の軽量CSSフレームワーク。Q&A用のテンプレートが用意されているなど、ホームページテンプレート的なデザインが特徴的。

mikan.js

github.com
CSSフレームワークではないが、日本語改行問題の解決策として取り上げる。これを使うことで単語の途中で改行されていたものが、単語区切りでの改行になる。以下の記事に詳しい。
suin.io

Saetl.net

saetl.net
CSSフレームワークではないが、日本製なので取り上げる。
レスポンシブデザインに対応し、著作権表示不要の無料ホームページテンプレート。CSSにはすべてコメントがつけてありわかりやすい。

JS CMS

www.js-cms.jp
CSSフレームワークではないが、日本製なので取り上げる。DB不要のCMS、静的サイトジェネレータ。
520種類のデザイン・レイアウトがあらかじめ用意されており、企業サイトを金太郎飴方式で大量に作る必要がある人向け。
ダッシュボードUIはとてもよくできているので、テンプレートのカスタマイズ次第ではWordPressの代用になるやもしれず。

OneThird CMS

onethird.net
CSSフレームワークではないが、日本製なので取り上げる。福岡県のSpiQe Softwareが開発した軽量CMS
同社サイトが作例となっており、無料HPも開放。これである程度自力で構築させて保守契約するというビジネスモデルらしく、それでも1サイト12000円は驚異的な低価格だと思う。

applique.css

qiita.com
おまけ。読み込むだけでAppleっぽいランディングページが作れるCSSフレームワーク