[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

158users がブックマーク コメント 35

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

CSS設計における、すべてがコンポーネントであるという誤謬

158 users yuheiy.com

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント35件

  • 注目コメント
  • 新着コメント
ustam
コンポーネント思考になれないデザイナーはプロのデザイナーとは言えないのでお引き取り願いたいのだが、デザイナー不足の昨今そうも言ってられないんだよなあ。せめて学習してほしい。

その他
take-it
制作上の問題だけじゃなくて、「偶然似ているだけなので共通化できないパターン」がユーザーの行動にとって意味があるのか、ビジネスとして利益になるのか、みたいなとこもぶっこんでいきたい。

その他
sabro
UIはプログラムの中で一番人間に近い部分なのできっちり構造化するより全体の印象みたいな感覚的なところが重要になるというのは分かる。バックエンドにいくほど構造的、フロントエンドにいくほど柔軟であるべき

その他
neet_modi_ki
具体例がないとなんとも言えないが...微妙に違うパターンなどは、本来コンポーネントのバリエーションとして取り扱うべきなのでは?デザイナーの意図も気になる(あらかじめ相互の認識合わせがあれば防げる問題?)

その他
i5s4y
こういうので苦しみ続けると、Tailwindの偉大さが分かる

その他
yarumato
"デザイナーにとって「コンポーネントもあれば、コンポーネントではないものもある」という感覚が普通。条件分岐が複雑になり割に合わない膨大な数のコンポーネントができあがる。必要を超えた構造化は害になる。"

その他
kagehiens
確かにCSSの基本思想はそういうところあるよな......それに忠実に構造化されたものを作ろうとしても実際上の要求を入れ込んでいこうとすると、弊害の方を強く感じるようになってしまうというか。

その他
fujii_yuji
"必要を超えた構造化は害になる。"って考え方は僕も好きだな。もちろん必要な範囲ならそれは良いものだとして。

その他
knjname
じゃけんtailwind方面に進化しましょうねー

その他
rryu
ビジュアルデザインする人もコンポーネント化を意識していないと無理が出てくるというだけな気がする。他ページとの整合性を取らず一枚の絵として作ると細部がなにげにちょっとだけ違うものが出来がちである。

その他
kiririmode
デザイナーとエンジニアのインピーダンスアンマッチ

その他
rryu
rryu ビジュアルデザインする人もコンポーネント化を意識していないと無理が出てくるというだけな気がする。他ページとの整合性を取らず一枚の絵として作ると細部がなにげにちょっとだけ違うものが出来がちである。

2022年06月14日 リンク

その他
strawberryhunter
コンポーネントというか、BEMは要素間の依存関係を無くすための方法論なので、コンポーネントを分割する時に困る状況というのは何かが間違っているんだろう。SassやCSS Variablesのようなものも活用してはいかがだろうか。

その他
uehaj
これがtailwindが流行る理由だと思う。

その他
AmaiSaeta
「コンポーネントに無理解なデザイナーが悪い」と評すると、誰も得しない。デザイナー視点では「コンポーネント」なんて無くて良い訳だから。 | しかし、その結論がユーティリティファーストというのは納得しかねる。

その他
xlc
こういうのって具体例で話をしないとポエムになっちゃうよな。

その他
fujii_yuji
fujii_yuji "必要を超えた構造化は害になる。"って考え方は僕も好きだな。もちろん必要な範囲ならそれは良いものだとして。

2022年06月12日 リンク

その他
mayumayu_nimolove
一人でやった方がいいとか思っちゃうほどめんどくさいのはなんとかしなければならない

その他
manaten
"一貫した印象を与えるために、意図的に共有している要素" こういうのは表現可能なら定数やmixinて表現できると良さそうではある...

その他
Rishatang
「ページに含まれるのはすべてがコンポーネントである」みたいな考えの人自分は見たことなかったんだけど、自分の周りにいないだけで結構いるのかな。明らかなコンポーネント以外は特にコンポーネント化してなかった

その他
wait0000
ユーザ体験が一番良いデザインが丸だとして、コンポーネント指向が四角、これだけだと丸を埋め立てるのは無駄が多くて大変だけど、状況に応じて三角や五角を使えたらもっと丸に近づけやすいよね、という話と理解した

その他
kvx
コンポーネントの考えがない人は構造化、アクセシビリティも弱い。

その他
for-my-internet-demo
メディアならわからなくもない。webアプリで説明不能なものそうそう思いつかないが

その他
onesplat
アプリケーションとグラフィックの違いな気がする。グラフィック部分にコンポーネント指向の設計がフィットしないのは理解できる。グラフィック部分を大きなコンポーネントとして隠蔽してしまうのが良いだろう。

その他
i5s4y
i5s4y こういうので苦しみ続けると、Tailwindの偉大さが分かる

2022年06月12日 リンク

その他
tomono-blog
まず、そんなに意識してるデザイナーはいないし、ページをコンポーネントにこだわって閲覧してる客もいない...ただ、cssを全く見ない触らないデザイナーは論外だ。

その他
tinsep19
ページ内ではもちろんコンポーネントだけど、違うページ感では共有しにくいって話かな?perspective(見方)が違うのであれば、違うコンポーネントでしょ。そういうものだと思うわ

その他
sabro
sabro UIはプログラムの中で一番人間に近い部分なのできっちり構造化するより全体の印象みたいな感覚的なところが重要になるというのは分かる。バックエンドにいくほど構造的、フロントエンドにいくほど柔軟であるべき

2022年06月12日 リンク

その他
chiroruxx
この話だともっとデザイナーと対話しようという話に落ち着くんだけどある程度はコンポーネント指向であるということをデザイナーも理解する必要がありそうよなとは思った。

その他
knjname
knjname じゃけんtailwind方面に進化しましょうねー

2022年06月12日 リンク

その他
otchy210
場合による。システム寄りの構造化されたアプリであれば、デザイナもコンポーネント指向でデザインすべきだし、デザイン寄りのビジュアル重視のサイトであれば、デザイナはコンポーネントの縛りから自由であるべき。

その他
take-it
take-it 制作上の問題だけじゃなくて、「偶然似ているだけなので共通化できないパターン」がユーザーの行動にとって意味があるのか、ビジネスとして利益になるのか、みたいなとこもぶっこんでいきたい。

2022年06月12日 リンク

その他
fai_fx
コンポーネント・ベースで作成して、個別のページ内でユーティリティ的なカスタマイズを加えるのが楽。なぜなら、デザインの本質はバランスであり、ページ毎に個別に調整し尽くさなければ完成に至らないからだ。

その他
ryer
機能に振るかアートに振るか、ってことかな?

その他
neet_modi_ki
neet_modi_ki 具体例がないとなんとも言えないが...微妙に違うパターンなどは、本来コンポーネントのバリエーションとして取り扱うべきなのでは?デザイナーの意図も気になる(あらかじめ相互の認識合わせがあれば防げる問題?)

2022年06月12日 リンク

その他
kagehiens
kagehiens 確かにCSSの基本思想はそういうところあるよな......それに忠実に構造化されたものを作ろうとしても実際上の要求を入れ込んでいこうとすると、弊害の方を強く感じるようになってしまうというか。

2022年06月12日 リンク

その他
turanukimaru
例えば新聞の一面は非コンポーネント。記事の構造が一定ではなく隙間なく詰め込まれてる。コンポーネント化すると画面が単調になり隙間ができる。この手のデザイナはタグを閉じる事すら嫌がるので技術屋としては困る

その他
ledsun
"CSS設計上のコンポーネントの多くが、デザイナーの頭のなかにあるイメージと非対称的な構造になっている。エンジニアの頭の中にしかない、元のデザインを独自に解釈した「別物」を作り出してしまっている。"

その他
securecat
ずっとコンテンツを追加していくとコンポーネント分解や破壊が起きるのは自明。で、デザインは過去産物をラスタライズしちゃえば済むんだけど、実装はすべてナマモノなので変更で生ずる工数が計り知れないんだよな。

その他
yarumato
yarumato "デザイナーにとって「コンポーネントもあれば、コンポーネントではないものもある」という感覚が普通。条件分岐が複雑になり割に合わない膨大な数のコンポーネントができあがる。必要を超えた構造化は害になる。"

2022年06月12日 リンク

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「CSS設計における、...」が注目されています。

気持ちをシェアしよう

ツイートする

CSS設計における、すべてがコンポーネントであるという誤謬

後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベー... 後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。 もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。 典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してB

ブックマークしたユーザー

  • mactkg2025年08月07日 mactkg
  • kiririmode2024年08月11日 kiririmode
  • batti-82024年08月11日 batti-8
  • warufuzaketaichi2024年08月10日 warufuzaketaichi
  • techtech05212024年05月17日 techtech0521
  • m2ym2023年10月25日 m2ym
  • ryosuke-fujii2023年10月19日 ryosuke-fujii
  • tacamy2023年08月28日 tacamy
  • kenichiice2023年02月24日 kenichiice
  • umai_bow2022年07月25日 umai_bow
  • hrfmmymt2022年06月15日 hrfmmymt
  • gomentic2022年06月15日 gomentic
  • threeMonths2022年06月14日 threeMonths
  • toolholics2022年06月14日 toolholics
  • rryu2022年06月14日 rryu
  • t_otoda2022年06月14日 t_otoda
  • moccos_info2022年06月14日 moccos_info
  • kojika172022年06月14日 kojika17
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - 学び

いま人気の記事 - 学びをもっと読む

新着記事 - 学び

新着記事 - 学びをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /