Webdesign

Atomic Designの思想でCSSフレームワークを作るのは難しいので代替案を考える


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

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

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

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

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

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

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

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

この記事には続きがあります

Webdesign

Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい

Atomic Designの構成図かわいいです

2017-06-16追記:Atomic Designをフレームワークに採用すべきでないという結論になりました。悲しい。こちらの記事でもう少し技術的な考察をしています。
Atomic Designの思想でCSSフレームワークを作るのは難しいので代替案を考える

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

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

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

この記事には続きがあります

CMS

Drupal8について、Movable TypeやWordPressを使っている人が知っておいた方が良いこと


Drupal8がすっかり標準になりましたが、私はなかなか実践レベルになりません。ちゃんとサイトを作らなければ身につかないと、Drupalで趣味の素材配布サイトを立ち上げてみることにしました。

私のCMSの構築は、2005年頃にブームだった素材サイトからはじまりました。素材は、AI・PNG・壁紙などの属性が異なるファイルを、複数のタクソノミーで検索させる必要があり、自動化しようとすると奥が深いコンテンツです。


echo_zeroのフレームワークは今回も役に立ちました

投稿タイプ・フィールド・タクソノミー・Views・サブテーマまで勉強して、見た目はともかくきちんと機能する素材サイトがだいぶできてきました。

ここまでの段階で、MTやWordPressなどのブログベースのCMSで制作をしている人が、Drupal8を学習する前に知っておかないと苦労すること・損をすることがいくつかあると感じたのでメモしておきます。

この記事には続きがあります

CMS

a-blog cmsの投稿画面用UIと既存スタイルの衝突を回避するCSSを公開します


a-blog cmsの魅力は、公開サイトからデザインの異なる管理画面へ移動せずにエントリーの投稿ができるところにあります。日本での利用を前提としたUIもわかりやすく、クライアントさんからの評価も高いです。

投稿画面のユーザーインターフェースのCSSも丁寧に作られているのですが、導入するサイトのCSSルールによっては衝突が起こる場合があります。

典型的な例が以下のようなサイトで、body要素のスタイルを参照しているa-blog cmsの投稿画面は、冒頭の画像のように見た目が崩れてしまいます。

  • bodyにセリフ系、デザイン系のフォントを指定している
  • bodyの文字サイズを「0.625rem(=10px)」として、各モジュールは「140%」などの相対%で調整している

これらをはじめとする細かい問題を回避するCSSをGistで公開しました。

a-blog cms バージョン2.6時点の、公開ページでの投稿フォームなどの既存CSSとの衝突を修正するための追加CSS

こちらからも、2017年1月19日時点のバージョンをダウンロードできます。


ファイルイメージ

acms_ex.css.zip

使い方

以下のとおり、本来の「acms.css」に続けて読み込んでください。

<link rel="stylesheet" href="/css/acms-admin.css">
<link rel="stylesheet" href="/css/acms_ex.css">

このCSSは、以下の問題の修正と、外観の調整を行います。

  • 本文のスタイルの影響をUIも受けてしまう問題を回避
  • 全幅レイアウトのサイトに組み込んだときにUIが広がりすぎる問題を回避
  • 管理ボックスのボタンサイズを固定
  • ユニット内のラベルのクラス名がbootstapと重複している問題を回避
  • acms.css以外のフレームワークを使用すると予期しない箇所で段組が解除されてしまう問題を回避
  • エントリーカスタムフィールドのラベルを長いタイトルにも対応させる
  • ファイルユニットになぜかインラインでwidthが入ってしまう問題を回避
  • ツールチップアイコンをエントリー・モジュールのカスタムフィールドでも使用できるようにする
  • 文字装飾ボタンを目立たせる

「本文のフォントをacms.cssのフォントに合わせる」「予期しない箇所で段組が解除されてしまう」「文字装飾ボタンを目立たせる」については必要ないケースもあると思うので調整してください。

また「ファイルユニットになぜかインラインでwidthが入ってしまう問題」については今後のバージョンで修正される可能性があります(先日リリースれた2.6.1.4では未確認です)。その場合はこちらは逆に不具合の原因になるかもしれません。


私はいちからすべてテーマを制作する案件だけでなく、すでに制作会社さんによってコーディングが終わったサイトにCMSを組み込む案件も多数請け負っています。この調整CSSは、そのような案件を通してちょっとずつ書き足していったものです。

個人的には10pxから文字サイズを調整する手法は開発者側の計算が楽になるものの、改修や外部サービスのパーツ追加に弱いので避けるべきと思います。

しかし、そういった導入先サイトのスタイルの問題だけでなく、最近のCSSフレームワークで見られる「ワイド画面でサイト全体の文字サイズが大きくなる」効果によって「良かれと思って作られているものがacms.cssと衝突する」というケースもあり、やはりサイトに応じて制作側が細やかに調整していくしかないと思います。

「そこまでするの?」「フォントなんて気にしなくても…」という意見もあるでしょうが、私は可能な限り徹底したいと考えています。はじめてのCMSを扱うクライアントの不安をできるだけ払拭するのが、CMS構築を担当する私の役割でもあるからです。

Webdesign

「たった2日で楽しく身につく HTML/CSS入門教室」を読みました

札幌の高橋朋代さん(コモモ)と、森智佳子さん(モリコ)の著書、「たった2日で楽しく身につく HTML/CSS入門教室」を読みました。

私は初心者でも指導者でもないのですが、前作「作りながら学ぶ HTML/CSSデザインの教科書 」がベストセラーとなっている二人の新刊ということと、最近ちょっとWeb制作に疲れていて、原点に返ってみようという気持ちがあって読んでみました。

この記事には続きがあります