MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
コーダーはCSS設計に夢を見る

コーダーはCSS設計に夢を見る

公開日:2017年02月10日
最終更新日:2019年05月28日
オンスタ運営
エンジニア
マークアップ
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > コーダーはCSS設計に夢を見る
このエントリーをはてなブックマークに追加
コーダーはCSS設計に夢を見る

こんにちは。エンジニアの石原です。

今日は、CSS設計についてほわっと考えていきます。

CSS設計と、理想

ここ数年CSS設計もだいぶ浸透し、今ではスタンダードにすらなっているように思えます。

それに伴い、BootstrapやFoundartionといったフレームワークをベースにしたマークアップも、あまり見かけなくなった気がします。

CSS設計を始めると、自分でCSSフレームワークっぽいものを作ることも難しくはありません。 弊社でも、デザインからコーディングまである程度規約で縛って制作できるように、最低限のボイラープレートを作っています。 なお、以後意図的に「広告媒体としてのWebサイト」という意味を込めて「ホームページ」と記述しています。Webサービスでもない、Webアプリケーションでもなく、プロモーションやブランディング等を目的としたWebサイトをイメージしてください。

CSS設計はホームページ制作には適していないのか

さて、話は遡ります。ちょうどCSS設計が広がりはじめた頃でしょうか。 CSS設計を軸に物事を考えるようになると、デザインに対する意見がでてくるんですね。

「これとこれ一緒のデザインでいいじゃん、、、」とか「フォントサイズ統一してよ、、、」とか。

モディファイアとか状態とか、揃えようと思うけど揃えきれない。

CSS設計を優先して margin をデザインと違うものに設定する。

CSS設計をベースにWebサイトを制作すれば、正解なんだ!自分は正しいんだ!

、、、なんて考えが頭に浮かんでました。

ホームページ制作におけるCSS設計なんてたかが知れている

しかし、ですよ。僕らが作っているのは「ホームページ」なんです。広告媒体なんです。Webサービスやアプリーケーションとは全く違います。

小規模なものは10ページいかないこともあるし、正直その後の運用でゴリゴリ変更するかっていうとそういうわけではないですし。CMSいれて、コンテンツを更新できるようにしておけば、CSSを触るなんてことは逆に少なくなります。

そんな中コンポーネント化を第一に考えデザインを制限すると、なんか伝わってこないんですね。そのホームページから世界観というかなんというか。広告としてのホームページとしては、弱くなっちゃうんです。

ホームページ制作におけるCSS設計

では、ホームページ制作においてCSS設計、ひいてはコンポーネント化的なデザインシステムの概念はいらないのでしょうか?

そんなことはありません。時代を逆行するつもりはありません。

ホームページでは、さらに「コンポーネント化しないコンテンツ」と「コンポーネント化するコンテンツ」を明確に分けることが重要だと考えています。

理解しやすいように、 コンポーネント化しないコンテンツを「スペシャルコンテンツ」コンポーネント化するコンテンツを「フォーマットコンテンツ」 とします。

スペシャルコンテンツ

スペシャルコンテンツは、コンテンツが持つ目的に対して、デザインが目的の達成に大きく関与するコンテンツを割り振ります。

例えば「私たちのビジョン」「〇〇の歴史」や理念に関するコンテンツなど、ライターさんを入れて取材や写真撮影などから制作するコンテンツです。

スペシャルコンテンツの具体的な概要

スペシャルコンテンツについては、コンポーネント化等を考える必要はありません。(もちろんプロジェクトで利用している命名規則や、BEM、SMACCS、FLOCSSなどの規約にはしたがう必要はありますが)

コーディングにおいて、以下にデザインを再現し、アニメーションや動的なコンテンツがあれば、それに全力で注力することを目指します。

フォーマットコンテンツ

フォーマットコンテンツは、コンテンツが持つ目的に対して、デザインがそこまで重要ではないものを割り振ります。

例えば、「会社概要」「料金」「よくあるご質問」など。

テーブルや、アコーディオン、グリッドシステムと見出し、テキスト等のHTMLタグに準じたフォーマットを予め用意し、それに準じてコンテンツを入れ込んでいくコンテンツです。

フォーマットコンテンツの具体的な概要

スタイルガイドを作成します。GrowGroupでも「フォーマットデザイン」というサイト全体のデザインのルールやコンポーネントをまとめて、デザイナーさんに作成してもらっています。

[caption id="attachment_794" align="aligncenter" width="289"] スタイルガイドを作成するための構成ラフ※クリックで拡大します[/caption]

 

これにより、フォーマットコンテンツについては、設計さえちゃんとしていればコーダー側で調整することができます。

コンポーネントの例
  • HTMLタグに準じたフォーマット
  • グリッド、アコーディオン、タブ、パネル、フォーム、カード、ボタンなどのスタンダードなコンポーネント

コンポーネントを無理にまとめない勇気

CSS設計において、コンポーネントに状態を付けることでなんとかコンポーネントを単一化したいと思うことも少なくないかもしれません。

しかし、デザイン・システム化の限界と、ホームページの目的を考えて実装する必要があると考えています。

じわじわと話題になっている気がする Enduring CSSもそうですが、複雑さを排除し、コンポーネントを新しく分けて制作する勇気をもってコーディングしてみませんか?

以上、石原でした。

関連コンテンツ

オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
マークアップ
公開日: 2019年10月08日
最終更新日: 2019年10月08日
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
  • # markdown
  • # マークダウン
  • # 効率化
オンスタ運営
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2019年06月19日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
エンジニア
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
エンジニア
制作
公開日: 2019年09月02日
最終更新日: 2019年09月02日
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
オンスタ運営
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2019年09月02日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
エンジニア
公開日: 2019年03月07日
最終更新日: 2019年05月28日
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2019年04月19日
最終更新日: 2019年06月15日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
もう一度考えてみる、HTMLのマークアップとSEO対策についての考察
マークアップ
公開日: 2016年12月15日
最終更新日: 2019年05月28日
もう一度考えてみる、HTMLのマークアップとSEO対策についての考察
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。