[CSS] CSSで描けるシンプルな7種の説明図

インフォグラフィックの第一人者である櫻田潤さんの書籍「図で考える。シンプルになる｡」で紹介されている7つの図をCSSで描いてみました。

文章コンテンツの合間にこういった図を挟むことで、読み手の理解をグッと助けることができます。

画像ではなくhtmlとCSSで描くことで内容のちょっとした修正がしやすいですし、SEOの観点でもプラスになるはずです。

デザイナーさんにイラストの作成を依頼するときの見本サンプルにするのもいいと思います。

構造の関係を表す「交換の図」

モノやコトの相関や交換関係を表すときに有効な説明図です。

要素の内訳を表す「分類の図」

組織図や家系図、サービスの分類図など、モノやコトの親子関係を表すときに有効な説明図です。

要因を洗い出す「深堀りの図」

なぜなぜ分析のようなモノやコトの要因を掘り下げるときに有効な説明図です。

要素の違いを表す「比較の図」

サービスや企業、モノやコトの位置づけや相対関係を表すときに有効な説明図です。

プロセス・流れを表す「段取りの図」

作業や工程、サービスの流れを表すときに有効な説明図です。

組み合わせを表す「重なりの図」

商品やサービスの特長を表すときに有効な説明図です。

組織・上下関係を表す「階層の図」

組織やモノゴトの階層構造の表すときに有効な説明図です。