---

先月公開したCSSフレームワーク「echo.css」ですが、「どんなページが作れるかのサンプルがないと、イメージしにくいんじゃないかな」と言われました。

それで、ドキュメントよりも先にテンプレートを作っています。日曜日はチクチク制作をしておりました。

echo.cssのモジュール群で特に気に入っているのが、冒頭の画像の「c-flip」というコンポーネントです。デスクトップでは写真を大胆に表示し、モバイルでは写真が上、文章が下となります。

---

---

初出は、昨年稲葉さんと制作したa-blog cms用のテーマ「zeroichi_lp」です。

この時点でも充分使い勝手は良かったですが、実際の案件で使ううちに、デスクトップでの表示が8パターンまで必要なことがわかってきました。使用する背景画像によって、適切な文字配置は全く異なるためです。デザイン上の理由もあります。

• 画像全面＋コンテンツ白背景・左寄せ
• 画像全面＋コンテンツ黒背景・左寄せ
• 画像全面＋コンテンツ白背景・右寄せ
• 画像全面＋コンテンツ黒背景・右寄せ
• 画像半分＋コンテンツ白背景・左寄せ
• 画像半分＋コンテンツ黒背景・左寄せ
• 画像半分＋コンテンツ白背景・右寄せ
• 画像半分＋コンテンツ黒背景・右寄せ

8パターンのデザインを簡単に切り替えるために、サブクラスなどをずいぶん整理して現在に至ります。詳しくはこのコンポーネントの解説ページをご覧ください。

https://cms-skill.com/echo-css/styleguide/component-flip.html

私が制作するサイトは、ほぼすべてCMSを介して制作し、さらにその半分くらいが、フォーマットができてから原稿が入ります。その際に想定外の画像やテキストをどれだけ少ない工数で補完できるかを、自分の独自スキルとして磨きたいと日々考えています。これは少なくとも、AIには当分できないことです。

---

一昨日、「FLOCSSがわかりにくい」「Atomic Designの思想でフレームワークを作ってみたい」という記事を書いたところ、とてもたくさんの感想をいただきました。

【Webdesign】Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい | ウェビンブログ

大半がフロントエンドエンジニアからの突っ込みです。著名な方々にもたくさん意見をいただいただのでまとめました。ありがとうございます。

「Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい」に識者たちの鋭すぎる突っ込みが入る - Togetterまとめ

Atomic DesignがCSS設計に適していない理由

ピクセルグリッドの高津戸さんによると、そもそもAtomic DesignはCSSやJSの設計とは全く関係ないそうですが、よく考えてみると、たしかに厳密な階層構造を持っているAtomic Designの設計は、デザインレベルからの意思統一が可能な環境でなければ破綻してしまいます。

私はデザインを外部に発注することが多いですし、CMSベースで構築すると、どうしてもマークアップやクラスの命名に手を出せない箇所が出てきます（※）。

そんなこんなで、Atomic Designを採用することは諦めて、既存のCSS設計を、専門のマークアップエンジニアではなくても理解しやすくする方向で考え直すことにしました。

---

久しぶりにいくつかコーディングの仕事をすることになりそうで、CMSの構築と比較して効率化できていなかった、CSSの設計を見直すことにしました。

最近のCSS設計は、OOCSS・FLOCSS・SMACSSなどがあり、高度かつ多岐に渡ります。ウェブデザイン設計についても、Material Design・Atomic Designなどがあります。

どれも素晴らしい内容なのですが、どうも私の中ではもやもやとしています。
かつてと比較すると、あまりにも理系寄りで難解だと感じるのです。

---

本日、プロ製作者のCMS構築に特化したフレームワークテーマ「echo」をリリースしました。

echo - プロの制作者のためのフレームワークテーマ

Movable Type版からスタートして、二ヶ月ごとくらいのペースでa-blog cms版、WordPress版とリリースしていく予定です。
応援・ご協力をいただきました、Movable Typeのパワーユーザーの皆様に、改めて御礼申し上げます。

ウェビングスタジオからのクリスマスプレゼントとして、12月27日（日）23:59までの限定で、実際のマニュアルの2章まで（全8章）を無償で公開いたします。

うっかり30日まで放置してしまいましたが公開を終了しましたw

マニュアルとこの記事を読んでいただき、「echo」に興味を持っていただければ幸いです。

プロ用のテーマを作る計画

---

札幌のフロントエンドエンジニアの友人、長谷川さんが、WordPressベースの案件のワークフローで疑問を感じているようです。

• テーマをいきなり作りはじめる人が多いが、最初にきっちり静的ページを制作する自分のフローと比べてどうなのか
• 何かしらのテーマをベースにカスタマイズで制作するフローが増えているようだが、それは本当に効率が良くなっているのか

という二点の疑問のお返事として、WordPress以外も含めた、最近の流れについて書いてみます。