最初のリリース
Qrac
41

2017-02-05, いい感じのHTML/CSSフレームワーク「MUSUBii」

デザインは難しいし、日本語も難しいのです。

閑話休題。最初から休むなよって言われそう。

私の本家本元ブログ、de-liKeRは、

アクセスしてもらうとわかると思うんですが、ページのロードがむっちゃくちゃおそいです。

その大きな理由の1つが、日本語webフォントです。

仕組み的には普通のサーバーで配信している、webフォント用にサブセット化したNotoSansJPのプロポーショナル版である源真ゴシックPというのを使わせていただいており、これをFastlyのCDNにのっけることである程度高速化しようという目論見です。ただしまだちゃんと整っていなくてHTTPヘッダとかの部分ができてないのでクライアント側のキャッシュが正常に働いてなさそう、というのも理由ではあるんですが^^;

そして、ここまで苦労して(?)、webフォントにこだわるのには理由があります。ちなみにWindowsは持ってないので考えておりませんw。

ちゃんと、こちらが想定した文字、デザインで見てほしいというのは大きなところです。ん?矛盾してる?こまけーこたぁいいんだ。(アクセスの少ない自己満足個人サイトなんで)

Roboto(version 2)というフォントが私は大好きで、Googleによってデザインされた、まぁMaterial Design発表時に2になったんですけど、これがすっごいかっこいいんです。

こんな記事も過去には書いていたりします。

前置きが長くなりました。でですね、このMaterial Designを使うと分かるんですが、特にandroidで、やっぱり、英語用にデザインされてるんですね。English first。あたりまえですけれども。

そのへんはAndroid 7.0にNotoSansが2ウェイト…かな、1ウェイトかもしれない。しか搭載されてないのをみてもわかると思いますけれども(Appleを見習ってくれ…だがしかし多く搭載しているはずのAppleでもウェイトの取り合わせは気持ち悪かったりする)、英語ありきなんです。

当たり前といえば当たり前なんですけれどもね。でもやはり、日本語は日本語の良さがあるわけで、それを包括的にデザインするのはちょっと無理があるかなぁと思っているわけなんですが。

冒頭で紹介した私の本家ブログですが、英語でも記事を書いています。

でも、日本語記事と比べた時に、もともとのデザインが日本語だったので、やはり…英語ではちょっと気持ち悪いなぁと思うところが個人的に。空間のあけ方とか。letter-spacingとかline-heightとか、pタグのmarginとか。ちょっとずつ、違うんですよねぇ。

というように、日本語と英語は、そもそもがちがいます。混ぜる時にも注意が必要です。どのウェイト同士を対応させたら気持ち悪くないか、とか、ベースラインの揃い具合やx-heightと日本語の関係とかとか。文字同士の空間の明け方とかももちろんです。

で、いままでももちろん、そういうところに取り組んできたプロジェクトはありましたし、結論から言えばあまりにcssが非力すぎるというところに落ちつくわけなのではありますが…w、元の記事の

「デザインと同時にコーディングした方がいいんじゃないか?」

にぴーんと来まして。これこそまさにいま、私が試して挑戦していることです。8designという8の倍数をただただ表示する簡易ツールに始まりGoで書いたjson dataとhtml templateのなんかそういうゴニョゴニョだったり(わたしはbackもgoで書くので、最終的にはtemplateで見れると色々嬉しいのです)、もちろんあんな方面のときはそれなりのツール使って慎重に作っていきますが、個人のこういうサイトだったらもう最近はsassも使わずvimでごりごりcssとHTML書いていきます。(もちろん軽いワイヤーフレームみたいなのは作りますけどねw) css variables使えばsassを使う意味も殆どないと言っていいんじゃないかとか信じられないこと言い出してますから。(殺されそう…mixinとかはどうするんだよ…)

でまぁもろもろそういう所感も込めて、応援したいなぁと思うプロジェクトでした。頑張って欲しいです。

なにせ、キャッチがいいですよね!

「腹が減ってはコードが書けぬ」
Webデザインの腹ごなしに、HTML/CSSフレームワーク「MUSUBii(むすびー)」をどうぞ。
MUSUBiiは、日本語サイトのデザイン・コーディングを元気づけます。

今度是非、MUSABiiとYaku Han JPも試してみたいと思っています。恐ろしいことにここまで書いておきながらまだ触っていないので、怒られそうです。