見出し画像

Web UI（HTML/CSS）は「文章構造」「ボックスの積み上げ」「スタイリングはシンプルに」という感覚を持っておく

fumink7

これは何？

Web UIの実装に関わることが多いのですが、初心者の方などに知っておいてほしいと思っているWeb UI（HTML）の考え方・捉え方をかきました。

Web UIは構造を持つ文章である

Web UIというと画面（GUI、コンポーネントが自由に配置されてるようなイメージ）を想像しますが、その正体であるHTMLとは構造を持った文章です。要素（タグ）とその階層によって、どんな情報がどんな関係性で並んでいるかを表しています。

例えばmainタグの中にsectionタグが並んでいることで複数の内容がならんでいることがわかりますし、その中でh1とPタグが並んでいれば、そのセクションのタイトルとその本文だな、みたいなことがわかるわけです。

要はHTMLファイルを見ただけで、内容（文章構造）が理解できるようになっていないといけません。
この文章構造が適切に組み上がっていることが、Web UIアクセシビリティのスタートにもなります。

UI実装は、UIデザインから文章構造を理解することから始まる

UIイメージ（デザイン）をブラウザ上で実現するためにHTMLを書く、というアプローチだと、形（ブラウザ上での見た目）は正しいが文章構造としては間違っている、ということが起きやすくなります。

Web UI実装では、まずはUIデザインから文章構造を読み取り、それをHTMLに起こすところから始めるのがおすすめです。
そのあとでCSSを使ってブラウザ上で表現したい見た目に整えていくのが良いかと。

HTMLはボックス（矩形）の積み上げをイメージする

HTMLの構造は、基本的にボックスの積み上げ、入れ子という形でUIにあらわれます。

ボックスはボックスを内包し、ブロックは横幅いっぱいに広がり縦に積み上がる、インラインはコンテンツにより幅が生まれる、などが理解できていないと、やたらCSSが複雑になったり変更（コンテンツやウィンドウサイズなどの変化）に弱いレイアウトが生まれてしまいます。

デザインツールのようにxyの座標で表示位置を決めるようなイメージでレイアウトを捉えているとこの辺間違えますよね。

flexboxおよびgridが出てきたことでこの辺曖昧なままそれっぽいレイアウトができちゃってることがあるのですが、しっかり理解しておきたいところです。

基本の振る舞いを理解して、不要なスタイル指定は減らす

マークアップ後「UIデザインと同じように出力されているから、CSSはOK！」みたいにチェックされがちですが、構造理解を妨げないため、変更しやすくするため（あと僅かではあるけどパフォーマンスのため）に不要なスタイル指定がないかどうかも意識しましょう。

不要な例：

  • 親からスタイルを引き継いでいるのに、わざわざ子でも同じスタイルを指定している

  • コンテンツ（テキストの高さなど）とpaddingで要素の高さが決まればいいのに、heightが絶対値で指定されている

  • flexやgridである必要がないところでも使う

基本的なHTML（ブラウザのデフォルトの振る舞い）に従うことをベースとして、なるべくシンプルにスタイル指定を行うように心がけたいですね。

HTMLの特徴を生かしたUI設計・実装例が見られる「Every Layout」という本があるのでおすすめです。
中級者の方はぜひ。

以前書いた感想：Every Layout 社内輪読会 - Web UI・CSS設計をあらためて考える

おわりに

Web UI実装というのは評価時に「Figmaどおりに表示されてるからいいじゃん、想定通りに動いているからいいじゃん！」となりがちなのですが、意外と「文章構造（情報設計）としてどうか」「余計なスタイリングが行われていないか」みたいな観点がレビューなどから抜けてたりするので、この辺の概念はみんなで持っておきたいところだと勝手に思っています。

アクセシビリティ観点から正しいタグを使う、キーボードで操作できる、みんなが理解しやすいビジュアルになっているみたいなことをチェックする前に、まずはHTMLというドキュメントとして問題のない構造になっているかを常にチェックしておきたいところです。

余談：Figmaのdevモード（インスペクター）の功罪？

功罪っていうほどのものじゃないのですが…
figmaってfigma上で作成した要素をどうやったらHTML/CSSで表現できるかを教えてくれるんですよね（devモード？）。

ただ、当たり前なんですけどそこでは要素サイズが固定値で入っていたり、不要なフォント指定が入っていたりするのをUI実装者がそれをそのまま実装に使ってしまうことがあって。

※頑張ればリアルHTML/CSSに近い形で出力させることはできるかもしれないが、デザイナーはそこまでやらないしそこ頑張るのはあんまり意味ない気がするし

あくまでfigmaが教えてくれるHTML/CSSは参考ですよ、ということも今回書いた内容と合わせて伝えておきたいんですよね。

この記事が気に入ったらサポートをしてみませんか？