Webサイトはページレイアウト、ボタン、フォームなどのデザインや機能性がユーザーの使い勝手に大きく影響します。
これらが統一されていないと使い勝手が悪くユーザーに与える印象も悪くなりがちですが、これらの統一性を図るのは簡単なことではありません。
そこでお勧めしたいのがCSSフレームワークです。
CSSフレームワークを使えば、これらの統一化が実現でき、かつ効率的なサイト画面の作成が可能になるのです。
サイト画面の統一化や機能性向上はユーザーに良い印象を与え効果的であるだけでなく、作成する側もグレームワークを使うことによって大幅に効率化され作業時間が軽減されるのです。
今回は、そんなCSSフレームワークをご紹介しましょう。
CSSフレームワークとは
CSSフレームワークとは、ボタン、ビゲーションメニュー、フォームなどWebサイトを作るのに必要なパーツ、ページレイアウトを構築するためのCSSコードがまとめられているもので、レイアウトを作る時やパーツを作る時は、コードをダウンロードすれば全体の枠組みが既に出来上がった状態になっている物です。
-
ボタン、ビゲーションメニュー、フォームなどWebサイトを作るのに必要なパーツ、ページレイアウトを構築するためのCSSコードがまとめられているもの
後は、その枠組の中で仕様に合わせた内容に追加、変更、削除していくだけで良いので、作業的にも簡単で効率的ですし、各画面のレイアウトや機能仕様も自然に統一化されます。
Webサイトにおけるページレイアウトやフォームなどは独創的すぎると、かえってユーザーには使い勝手が悪いものなので、「よくある規定のスタイル」というものが存在します。
CSSフレームワークは、そういった「よくある規定スタイル」をあらかじめコード化して提供してくれるものなのです。
ですので、CSSフレームワークを使うことによって良質なサイト画面を効率的に作成することができるようになるのです。
CSSフレームワークを利用するメリット
スピーディーな制作
CSSフレームワークにはサイトに制作に必要なパーツやレイアウトが一通り用意されており、HTMLの要素に適切なクラス名を付けるだけで整ったデザインのWebサイトを作ることができます。
つまり1からコードを作る必要がないので非常にスピーディーな制作が可能なのです。
それは工数の削減につながりプロジェクト全体のスムースな進行とコスト削減にもつながるのです。
統一感のあるデザイン
複数人数が参加しているプロジェクトでもCSSフレームワークを使うことにより自然に「統一感のあるデザイン」の画面を作ることができるようになります。
プロジェクトにWebデザイナーが参加している場合はデザイナーの指示により統一感を出すことになりますが、必ずしもWebデザイナーが参加するとは限りません。
むしろ参加しない方が多いと思います。そういう場合でもCSSフレームワークを使えば自然に統一感が出せるのです。
ルールが統一され、メンテナンスがしやすい
開発プロジェクトではコーディング規約が設けられることが多いですが、中々、守られないというのが実情であることは実感されている方も多いのではないでしょうか。
「見た面は同じ」であってもコーディングはコーダーの個性に委ねられるので、どうしても違いが出てしまうものです。しかし、それは後に保守を行う場合に大きな障害となります。
つまり「メンテしずらい」のです。
その点、CSSフレームワークを使った物は「コードも同じ」ですので非常にメンテしやすく保守が楽になるのです。
コーディングがばらばらだと、保守が必要な時に、どうしても「全てを1から解読しなければならない」ということになります。
しかしコーディングが統一されているCSSフレームワークなら「どれも同じ構造」なので解読が圧倒的に楽になるのです。
その結果、保守作業に必要な工数に大きな差が出るので「システムにかかる年間費用」という面から見た場合でもCSSフレームワークを採用することは「多きなコスト削減」につながるのです。
CSSフレームワークを利用するデメリット
オリジナリティを持たせるのが難しい
CSSフレームワークを使うと、どうしても「よくある規定のスタイル」の画面になります。
従ってオリジナリティを前面に打ち出そうという独創的なサイト画面を作るには不向きと言えます。
顧客によって「極く普通の使い勝手が良いものを」という方と「見た人が『おっ』と感じてくれるような独創的な物を」といった要望があると思いますが、後者のような御要望には向きません。
フレームワークのバージョンが更新されなくなるリスクがある
CSSフレームワークにも開発元が存在します。そして、より良いものを、という考えからバージョンの更新が行われることが、よくあります。
その場合は「更新されたもの」を使えば良いのですが、開発元が個人であったり、小さな会社である場合には更新されなくなってしまう可能性があります。
CSSフレームワークには実に沢山の種類があり、それぞれに時代の要求に合わせて進歩していきます。
つまり「更新が止まってしまったフレームワーク」を使っていると、時代の要求に置いていかれてしまう可能性があるのです。
ですので、フレームワークを選ぶ際には、ちゃんと公式なリリースやアップデートが行われているかを事前に確認しておいたほうが良いのです。
CSSフレームワークを選ぶときのポイント
必要なパーツやレイアウト、機能が揃っているか
最初に制作するサイトで使いたいパーツやレイアウト、機能を一覧表にしてみましょう。
そして、それらのパーツ、レイアウト、機能がCSSフレームワークに含まれているかどうかを確認します。
CSSフレームワークのサイトでは、利用できるパーツ、レイアウト、機能が載っていますので必要なものが揃っているか確認できます。
またサイトの作成例なども載っているので作成イメージも掴めます。
カスタマイズに必要な開発言語
CSSフレームワークの中にはカスタマイズを行う時にプログラミング言語を使うものもあります。
その場合、その言語を扱えるかどうかを確認しておきましょう。
カスタマイズは必ず発生するとは限りませんが、長く仕事をしているとカスタマイズが必要となるケースも出てくると想定しておいた方が安全だからです。
情報の豊富さ
CSSフレームワークの中にはマニュアルや解説記事が十分に揃っていないもの、入手しにくいものも存在します。
この傾向は主にマイナーなフレームワークに多いので、メジャーなフレームワークを選べば、この心配はありません。
フレームワークを使いこなすには機能情報、パーツ情報が不可欠なので情報の豊富さ、というのはフレームワークを選ぶ上で重要な要素となります。
よく使われるCSSフレームワーク
Bootstrap
Twitter社によって開発され、数多くのWebサイトで使用されていますので、ほとんどの人が見たことのあるデザインだと感じると思います。
利用者が多く、機能が豊富で細かなカスタマイズも可能です。実際に業務の現場で登場する機会も多いので是非とも覚えて置きたいフレームワークです。
学習のために多少、費用がかかるのですが、Bootstrapを覚えてしまえば他のフレームワークでも理解がすぐにできるようになります。
日本語の情報も豊富にありますので入手しやすく、初心者の方にはお勧めのCSSフレームワークと言えます。
ただ、利用するコンポーネントによっては、CSSだけでなくJavascriptが必要なのでJavascriptを事前に覚えて置くと一層、便利に使いこなせるCSSフレームワークです。
Bulma
Bootstrapと違いJavascriptの知識がなくても使いこなせるCSSフレームワークです。
CSSのみで構成されているのでCSSファイルを読み込むだけで利用できます。
コンポーネントも他のCSSフレームワークと比べるとスマートなデザインでデスクトップやタブレット、モバイル向けのレスポンシブなデザインにも対応しています。
デザインの良さでBulmaを選ぶというユーザーも数多くいます。
Pure CSS
Yahoo!が開発したCSSフレームワークで最低限の機能で構成されており、軽量なのが特徴です。
そのため用意されているコンポーネントの種類も、あまり多くはないので細かなデザインは自分で記述していくというスタイルになります。
ですので、CSSのコーディング作成時間を減らしたい場合には不向きですが、ある程度HTMLとCSSの記述を理解していれば、CSSのベースとして使うことが出来るので他と違うスタイルのWebサイトの開発においては便利で効率的であり威力を発揮するフレームワークと言えます。
CSSフレームワークの一覧
CSSフレームワークは実に沢山のものが出されていますが、おおまかに分けると「クラスレス型」、「超軽量型」、「汎用性型」、「ユーティリティベース型」、「特化型」の5種類に分類できます。
ですので、上記の5分類に分けてご紹介します。
クラスレスのCSSフレームワーク
CSSクラスはサポートされないタイプです。
CSSファイルを読み込むだけで、デザインが出来上がりますので後は自分で追加していくタイプですが、「とにかく簡単に作りたい」と言う時に役に立つフレームワークです。
Water.css
シンプルなWebサイトをすぐに構築したい時、デモページを簡単に作成したい時、CSSでスタイルするのに時間をかけたくない時に便利なCSSフレームワークです。
HTMLページを用意したら、head内に外部CSSとして加えるだけで、すぐに利用できるのが特徴。
2Kbと超軽量でレスポンシブ対応と幅広いブラウザをサポートしています。
AmazonのKindleにも対応しています。
MVP.css
用意するのはHTMLファイルだけ。それに一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量のフレームワークです。
大きな特徴として「CSSの知識を必要としない」と言う点があります。MITライセンスでリリースされているので、個人でも商用のプロジェクトでも自由に無料で利用できるというのも魅力です。
sakura
既存のHTMLに一行、もしくは二行追加するだけで簡単に利用でき、CSSの知識は必要ないのが大きな特徴です。
他のCSSフレームワークのように、class名が無いので覚える必要もありません。
それでも基本的なHTMLの要素はすべてサポートされており誰でも簡単にWebサイト画面を作ることが出来ます。
超軽量のCSSフレームワーク
レイアウト、テーブル、フォームなど様々なコンポーネントや、マージン、パディング、色付けなどのユーティリティ機能を備えながら全体のソースコードが数Kbと超軽量に抑えられているフレームワークです。
Pure
モバイルを念頭に置いて作られているフレームワークで全セットで3.7KBという超軽量のフレームワークです。
そのためレスポンスが非常に良く、しかも一般的なHTML 要素のレイアウトとスタイルはちゃんと備えているフレームワークです。
Milligram
Milligram は、最小限のセットアップを提供するフレームワークで2Kbの圧縮ファイルをダウンロードすれば、すぐに使えるのが特徴です。
ダウンロードする時必要な物をオプション選択できるので小さいながらも結構、便利なフレームワークです。
Picnic CSS
モバイルのロード改善と高速化を目的としたフレームワークです。
完全にモジュール化されているため、各パーツを簡単に変更してテスト出来るのが特徴です。
PicnicもMITライセンスでリリースされているので、個人でも商用でもプロジェクトでも自由に無料で利用できます。
Chota
これも圧縮サイズで3Kbという超軽量型フレームワークです。
HTML文に<link rel=”stylesheet” href=”https://unpkg.com/chota@latest”>というリンク文を挿入するだけで、すぐに使用できます。
それでもHTMLの基本機能は網羅しており、かつ変更したい部分は簡単に変更する事も可能なフレームワークです。
汎用性に優れたCSSフレームワーク
Bootstrap
Twitter社が開発したCSSフレームワークで世界で最も多く利用されています。
グリッド システムとコンポーネントはSaasで構築されておりカスタマイズも可能。全ての機能を1行追加するだけで使うことができますが、必要なものだけを指定して使うこともできますし、こちらの方がレスポンスは良くなります。
しかし元々、用意されている機能が豊富なうえにカスタマイズも可能で、それでもレスポンスは悪くありません。なので、ほぼ万能といって良いでしょう。
- 世界で最も利用されているフレームワーク
- カスタム可能
- 全ての機能を1行追加するだけで使える
- 必要なものだけを指定して使える
Bootstrapは「最も良く使われているCSSフレームワーク」ですので、これから就職活動を始めようという方は、覚えて置けば出会う確率が高いうえに、Bootstrapを知っていれば他のフレームワークも理解が早いので企業側としても歓迎してくれる知識です。
多少、覚えるのに費用がかかりますが、それだけの価値は十分にあるフレームワークだと言えます。
Bulma
外部CSSを一つ加えるだけで、さまざまなコンポーネントやエレメントをFlexboxベースの柔軟なレイアウトで簡単に作れるのがBulmaの特徴です。
よく使用されるボタン、タイトル、コンテンツ、タグ、メッセージ、パネルなどのエレメントはほとんど揃っており、グリッドを柔軟に変えることもでき、カラムの増減も実に簡単です。
ですのでBulmaを使って「よくあるレイアウト」とは一味違った、特徴的なレイアウトを作ることも出来ます。
しかもMITライセンスでリリースされているので全ての用途で無料です。
またJavascriptの知識が無くても使えるというのも利点と言えます。
ですがBlumaの最も優れた点は、そのデザイン性にあります。一般的なCSSフレームワークでは結果的に「どこかで見たような画面」になるのですがBlumaはデザインの自由度が高く、かつ、元のデザインが優れているのできれいで面白い画面が作れるのです。
- 外部CSSを一つ加えるだけで簡単に作れる
- グリッドを柔軟に変えることもでき、カラムの増減も実に簡単にできる
- 無料で利用できる
- Javascriptの知識不要
- デザインの自由度が高い
Blimaを選択するのは独自性、デザイン性を重視したいケースと言えるでしょう。
Foundation
Foundationはセマンティックという「見ただけでどんな機能なのか何となく分る」という非常に読みやすいリソースで作られています。
また電子メールフレームワークというものも用意されておりユーザーに送るメールのデザインまで実施できるようにもなっています。
他のフレームワークと比べると更新頻度が高いのも特徴で、それだけ「どんどん新しい物を追加してくれるフレームワーク」でもあります。
UIkit
軽量でモジュール化されたフロントエンドフレームワークです。
Bootstrapの様に利用できるのですがBootstrapよりシンプルになっています。
その分、覚える費用が安く、時間もかからないフレームワークです。
Primer
Bootstrap によく似ていますが、PrimerはJavaScriptを使用しませんので、JavaScriptを知らなくても使うことが出来ます。ソフトウェアのデベロッパーであるGiftHub社の製品であるだけに、ソフトウェア開発のプラットフォーム用とソースコードのホスティング用に向いたフレームワークです。
Carbon Components
Carbon Componentsは IBM のオープン ソース設計システムです。
実用的なコード、設計ツールとリソース、ヒューマン・インターフェースに優れたガイドラインが用意されており、Carbon Componentsのユーザー同士のコミュニケーションも盛んに行われているので情報収集がしやすいフレームワークと言えます。
IBM系列の企業で採用されているケースが多いので、IBM系列の企業への就職を考えておられる方は覚えておいたほうが有利なフレームワークであると言えます。
Fomantic UI
綺麗なWebサイトを素早く構築できるフレームワークです。
使用されるHTML文が非常に簡素、簡潔で分かりやすく、Javascriptも直感的に使うことができるのが特徴です。
またパフォーマンス ログというものがあり、これを使うと簡単にデバッグが可能で、バグを見つけやすくする工夫もされています。
Pico.css
Pico.cssの特徴は「最小限のCSSだけでエレガントなスタイルを」です。
実際に使用されているHTMLはシンプルで .classesも10未満と、まさに最小限と言う言葉が当てはまります。
そして本当にCSSだけでパッケージ マネージャー、外部ファイル、 JavaScriptも使いません。
またカラーマークが2つ入っており自動的に普通モードとダークモードの切り替えを行う、という機能が標準装備されています。
Blaze UI
Blaze UIはオープンソース のツールキットでMITライセンスのリリースですので完全無料でいかなる用途にも使えるフレームワークです。
一応、元になるレイアウトはあるのですが拡張性に優れており、他のフレームワークにありがちな「よく見るサイト」ではない独自サイトの構築も可能にしています。
Base
Baseは「堅牢でレスポンシブな CSS フレームワーク」を売りにしています。
実際、Normalize.cssというのが含まれており、これを使うと基本的なスタイルが確実に設定されるように作られているのです。
そして、そのスタイルは軽量かつ最小限のコードで構成されており保守性にも優れています。
またParcel JS 構成というものも搭載されており、ワークフローを自動化するオートメーションセンセーションという機能を備えていますので開発、保守ともにワークフローの作成、解読の必要がなくなるのも特徴です。
Cirrus
Cirrusは他のフレームワークと違いプロトタイプ（試作品）を作るためのフレームワークです。
まず、プロトタイプを作り、それを発展させ本番用の画面を作り上げようという訳です。
CSSというのは案外に作る手間と時間がかかるものですので、その時間と手間を軽減しよう、というのが本来の目的なのです。
Cirrusの設計思想は「システムデザイン作業を軽減化すること」にあります。
実際、システムデザインというのはシステムを設計するうえで、最も頭を悩ます作業であることは事実ですので、それを軽減しようというのです。
確かにゼロから設計するよりも、ずっとスピーディーに意思決定できる、と言う点でCirrusは優れていますし、先進的な考え方ですがCirrusは個人が開発したフレームワークなので後継がどうなるかが、まだはっきりしないというのが不安要素として残ります。
Turretcss
「シンプル、スマート、モダン」という3原則を掲げているのがTurretcssの特徴です。
実際、Javascripは使いませんしHTMLも、いわゆる「セマンティック」で非常に読みやすく「グリッドを使わない」という方針で作られているので拡張性も高く、なかなかの優れもののフレームワークです。
Turretcssは新機能も次々とリリースしており更新ストップの心配もありません。
ただ、いくら拡張性が高い、といっても全体的に「広く、浅く」というポリシーで構成されているので独自性が高いものは作れないというデメリットはあります。
しかし、画面の独自性というものがユーザーに与える印象は決して永続的なものではなく一時的なものに過ぎない、と考えた場合、むしろ使い勝手の方が重要だ、という意見があるのも事実です。
Turretcssはそんな意見の方に向いたフレームワークと言えるでしょう。
Vanilla Framework
Vanillaはオープンソースで誰もが使えるフレームワークです。
フレームワークのコンポーネントというのは「機能」を単位にまとめられているものが多いのですがVanillaは「コンポーザブル」という概念を取り入れている点で異色と言えます。
コンポーザブルとは、要は「複数の要素や部品などを結合して、目的とする構成や組み立てを可能にする」方法で実際、Vanillaのコンポ－ネントは「単機能な物が一杯ある」のです。
その中から自分が欲しい機能を作るために必要なものを集めて結合させて欲しい機能を実現する、というやり方になります。つまりVanillaは、あまり初心者向けではなく、ある程度、開発に長けた方向けのフレームワークと言えるでしょう。
Pattern Fly
Pattern Flyの目指すものは「一貫性を推進し、チームを統合すること」です。つまり大人数のプロジェクト向けで保守性を重視しているフレームワークと言えます。
チュートリアル（事前練習）やコード例の提示、ドキュメンテーションの機能まで用意されているので、まさに大規模システムで稼働後に保守が頻繁に発生するようなシステムの構築に向いていると言えます。
しかもオープンソースですので無料で使えるという利点もあります。
HiQ
HiQは「エキサイティングなレイアウト機能の時代に独自のスタイルを」というのがメッセージです。
自ら「Post CSS」と公言しており、カスタム プロパティなどのエキサイティングな新しい CSS 機能を次々に提供しています。
つまりHiQは「ありきたりの画面の時代は、もう終わった。だから肥大化したフレームワークはもういらない」と言っているのです。
既存のレイアウトでは物足りない、という方向けのフレームワークと言えるでしょう。
HiQと言うネーミングは「IQの高いCSS フレームワーク」という意味で付けられています。
Material DesignのCSSフレームワーク
Material DesignのCSSフレームワークとは、Googleのマテリアルデザインのガイドラインに添った形式の画面を作りたい時に使うフレームワークのことです。
Googleのマテリアルデザインには「5つの要素が必要である」とされています。
その5つの要素とは以下のものです。
- 現実世界の物理的法則を取り入れる
- 紙とインクの要素で組み立てる
- 色の数を少なく配色する
- 影を活用して立体感を作る
- 連続性のあるアニメーション
ここでは、それぞれの要素について深く掘り下げた説明は割愛させて頂きますが興味の有る方はこちらを参照下さい。
Material Components Web
まさに「Googleのマテリアルデザインのガイドラインに添った形式の画面」を作るためのフレームワークです。
新しい機能も次々とリリースしており、しっかりしたバックアップ体制が築かれているフレームワークと言えますが、実際のアドバイスやチュートリアル等は用意されておりませんので、マスターするのに少々、手間がかかることを覚悟せねばなりません。
コードをカスタマイズして実装することも多く初心者向けとは言えません。
いくつかのフレームワークを使った経験があり、かつ言語の知識も備えている「経験者向けのフレームワーク」といえるでしょう。
しかし「Googleのマテリアルデザインのガイドラインに添った形式の画面」は確かに「標準」となりつつあるのも現実ですので、一考の価値があるフレームワークです。
MUI
MUIも「Googleのマテリアルデザインのガイドラインに添った形式の画面」を作るためのフレームワークですが、非常に軽量なのが特徴です。
つまり大規模システムならMaterial Components Web、小規模なものならMUIという使い分けがされていると考えて良いでしょう。
実際、Material Components WebでもMUIのコンポーネントを使うことが出来るようになっていることから見ても、この両者は「同じ製造元が作ったもの」と考えて頂いて間違いありません。
ですので、まずMUIから入ってMaterial Components Webに進む、という方法もあります。
いきなりMaterial Components Webから入ると混乱してしまうかもしれません。MUIは、そういった「Material Components Webの入門版」という位置づけでもあるようです。
ユーティリティベースのCSSフレームワーク
マージン、パディング、色付けなどのユーティリティクラスのみを提供し、コンポーネント自体は React や Vue.js などにまかせてしまうタイプのフレームワークです。
もう既に「よくあるデザイン」で決定しており後は、それに機能を付けるだけ、と言う場合に都合が良いようにできています。
Tailwind CSS
これまでの説明で「セマンティック」と言う言葉が何回か出てきました。要は「名前を見ただけで機能が想像できる」ように作る方法です。
ですが実際にセマンティックで書いてあっても、やはり「使って見なければ信用できない」というのが本当の所です。
つまり「セマンティック」というのは多分に「独りよがり」な面も有る訳です。CSSもこれまでに何回か書き方が変わったり新機能が追加されたりして「想像しにくい」セマンティックが多くなっている、と言う事実は否定できません。
つまり「或るCSSがどういう結果を生むのか」はやってみなければ分からないのです。
Tailwind CSSは、そういったセマンティックの概念を止め、常に安定的で使いやすいCSSを集めたユーティリティフレームワークです。
この20年間、新機能の追加はあっても従来のCSSは、そのままですので、安心して使うことが出来る訳です。しかもTailwindのCSSは非常に優秀で多機能でもあります。
TailwindのCSSに変更しただけで開発スピードが飛躍的にアップした事例も豊富に報告されているくらいです。ですので、CSSがどういうものか、を理解している方には「とても有難いフレームワーク」なのです。
従って経験者向けと言える訳ですが、Web系のIT業界で仕事をするのであればCSSは必修科目であると言えます。
確かにフレームワークの中には「手取り足取り」と言う感じで初心者の方でも簡単にWeb画面を作ることができる物もありますが、それだけではIT技術者としては、まだ一人前とは言えません。
「これから先、ずっとBootstrapだけをやる」というのであれば話は別ですが、スキルの幅は出来るだけ広げて置くに越したことはないのです。
Tailwindはそういった意味でCSSというのは、こう作るものだ、というお手本を示してくれるものなのです。
そういった意味でも一度、経験してみる価値のあるフレームワークです。
Open Props
Open PropsもTailwindと同じくCSSを提供してくれるフレームワークです。
そしてOpen Propsの特徴として「他のフレームワークとの併用も可能」という点が挙げられます。
それもカラーのみ、グラデーションのみ、シャドウのみ、タイポグラフィのみ、メディアクエリのみ、といった極めて部分的な併用が可能なのです。
ですので、他のフレームワークをベースにして、困った時だけOpen PropsのCSSを使うといったことも出来る訳です。
この併用可能という特徴は他には見られない特性でOpen Propsの存在意義をより大きなものにしています。
特化型のCSSフレームワーク
特化型フレームワークとは「特定の画面イメージ、特定のイメージ処理」をしたい時に使うフレームワークです。
進歩の早い現代のIT業界では、あまり出番はないかも知れませんが、こういったフレームワークが存在する、という知識は、いざと言う時に役立つでしょう。
98.css
Windows98風のインターフェイスを作りたい時に役立つフレームワークです。
このフレームワークを使うとWindows98風になるのです。
もはやWindows98はサポートも終了していますが会社によっては「ずっと、この画面でやってきたから変えたくない」と言う要望が出ることも稀にあるのです。
また搭載しているソフトがWindows98までしか使えないなどの事情がある場合もあります。
そういう職場で「最新式の画面イメージ」を作ってしまうと「とっつきにくい」「よく分からない」と言われてしまいかねないので、追加システムを作る場合に、あえてWindows98風のインターフェイスにすることがあるのです。
そんな場合には、このフレームワークを使えば大丈夫です。
Tufte.css
Tufteはエドワード・タフテというアメリカの統計学者のことで、彼は情報デザインと、データ視覚化の分野の先駆者としても知られており、チャートや図などの情報グラフィックスの表示の専門家でもありました。
そのエドワード・タフテの提唱した表示方法を実現しているのが、このTufte.cssなのです。
エドワード・タフテは今年80歳で、既に学問の世界からは引退していますが、彼の提唱した表示方法に賛同する方は今でも多いので米国では一定の需要が今でもあるそうです。
Gutenberg
活版印刷技術の発明者であるグーテンベルグの名を冠した、このフレームワークはWebページを正しく印刷するためのフレームワークです。
案外にＷebページの印刷というのはずれてしまったりページ数が変わってしまったりしてしまうものですがGutenbergを使うと「表示されている通り、正しく印刷してくれる」のです。
ペーパーレス化が進んでいる企業では「帳票」という機能がシステムに設けられていない事も多く、そういった場合は「表示画面をPrtScで印刷」という手がよく使われます。
しかしPrtScでは綺麗に印刷されないことも多いものです。皮肉な話ですがペーパーレス化が進んでいるシステムほど、Gutenbergは重宝されているのです。
Bojler
BojlerはHTML電子メールのデザインに特化したフレームワークです。
HTML電子メールというのは、ともすると「非常に重く、表示されるまでに時間がかかる」こともあるのですがBojlerで作ったHTML電子メールは軽いので簡単に表示されます。
電子メールのDMというのは文字だけでは「読んでくれない」ケースも多いのでBojlerを使って「一味違ったDM」を使ってみるのも広告手段としては有効かもしれません。
TuiCss
TuiCssはMS-DOS風インターフェイスを作成するためのCSSフレームワークです。
そろそろMS-DOSといっても通じなくなってきていますがWindowsの前に最も一般的だったパソコンのOSがMS-DOSです。
さすがにMS-DOSをベースに作ったソフトをいまだに使い続けている企業というのはありません。
何故ならMS-DOSを搭載したパソコンはもはや売っていないからです。
そして、かつてMS-DOSを搭載していたパソコンは既に寿命が尽きており、MS-DOSというOSを入手すること自体も難しくなってきているでしょう。
ですので、存在意義はあまり感じないのですが、それでも何故か「一定の需要」はあるそうで、それがTuiCssの存在する理由です。
まとめ
内心、CSSはもう書き飽きたよ、という方はWeb関係のIT技術者の方の中に沢山、いらっしゃるでしょう。
CSSフレームワークを導入すれば、その問題は解決するのですが、CSSフレームワークの存在意義が分からない予算関係者は簡単には首を縦にはふらない、と言うケースも多いと思います。
またシステム管理責任者の中には自分が現役の時代には存在しなかったCSSフレームワークの導入をためらう方もいると思います。
ですので、いきなりBootstrapのような本格的で予算もかかるフレームワークの導入を提案するのは得策ではありません。
ご紹介した通りフレームワークには色々な種類と特徴がありＭITライセンスでリリースされている商業使用OKの無料フレームワークもあるので、「できるところから始める」という導入方法が効果的です。
無料であれば予算関係者は何も言いませんし、「無料だから試しに使って見るだけ」と言えば理解してくれないシステム責任者も否とは言わないでしょう。フレームワークという物は使ってみて始めて、その効果に驚くものです。
つまり実績を作り上げてしまえば理解のない周囲の人達も納得せざるを得ないのです。
そろばん→電卓→業務システムと進歩してきた業務のやり方ですが「まだ先はある」のです。そしてフレームワークを使うのが「当たり前」の時代は、もうそこまで来ています。
そして「フレームワークの次」もあるのです。
そのためにも、「まずはフレームワークの導入」を真剣に考慮することをお勧めします。
