はじめに

こんにちは。DX開発事業部でUIデザイナーをしている北澤です。

WebサイトやWebアプリケーションの開発では、ReactやVueなどのフレームワークを使ったフロントエンド開発が一般的になっています。

一方で、どれだけ開発技術が変化しても、Webページの基本となるのは、HTML・CSS・JavaScriptといった技術です。

昨今ではAIの発達により、デザインデータからコードを生成したり、逆にコードからUIを生成したりすることも珍しくなくなり、デザインとフロントエンドの境界はこれまでより近くなっています。

デザイナーが自力で完璧にコードを書ける必要はありませんが、「自分がつくったデザインがどのように実装されるのか」を想像できる力は、これまで以上に重要です。

例えば、

  • このテキストは単なる文字なのか、見出しなのか
  • この要素はリンクなのか、ボタンなのか
  • このレイアウトは画面幅が変わったときにどう変化するのか

といったことは、見た目だけではなく、実装を考えながら設計する必要があります。

この記事では、デザイナーが知っておくべきフロントエンドの基礎知識について紹介します。

1. そもそもフロントエンドは何で成り立っている？

Webページの表示は、基本的にはHTML・CSS・JavaScriptの3つによって成り立っていることが多いです。

  • HTML：ページの構造や情報の意味を表す
  • CSS：レイアウトや色、文字などの見た目を整える
  • JavaScript：操作に応じた動きや処理を実装する

見た目が同じでも、その要素が何をするものなのかによって、適切なHTMLが異なります。
「お問い合わせ」というUIパーツでも、別ページへ移動するのであればリンク（a）、その場で処理を実行するのであればボタン（button）になります。

また、CSSにおいても、見た目の完成形を考えるだけでなく、同じレイアウトやスタイルを複数の場所で再利用するかについても考えておく必要があります。Figmaでコンポーネントを設計するとき、「どこを共通化するのか」を意識しておくことが、実装時のコンポーネント設計にもつながります。

このように、WebページはHTML・CSS・JavaScriptがそれぞれ役割を持って組み合わさってできています。デザインするときも、見た目だけでなく、どのような構造で実装されるのかまで考えておくことが大切です。

2. FigmaでつくったデザインはHTMLでどう表現される？

HTMLは「見た目」ではなく「意味」を表すもの

HTMLのタグには、それぞれ役割があります。

  • 見出し → h1〜h6
  • 文章 → p
  • リスト → ul / ol / li
  • リンク → a
  • ボタン → button
  • コンテンツの区切り（意味のあるまとまり）→section / article

Figmaなどのデザインツール上では文字サイズや色を自由に変更できますが、実装では「この文字は何なのか」という意味が重要になります。

例えば、デザイン上は小さな文字でも、ページのセクションを説明する見出しならh2になることがあります。逆に、見た目がどれだけ大きく主張していても、単なるアクセントの数字や装飾テキストであれば見出しタグは使いません。

「デザイン上の見た目」と「HTML上の構造的な意味」を切り離して考えることがポイントです。

3. FigmaのAuto LayoutとCSS

FigmaでAuto Layoutを使うときに、実装ではどのようなレイアウトになるかを考えておくと、エンジニアとの認識を合わせやすくなります。

Auto LayoutとFlexbox

FigmaのAuto Layoutと、CSSのFlexboxには考え方が似ている部分があります。

Figma CSS
Auto Layout Flexbox
横方向 flex-direction: row
縦方向 flex-direction: column
Gap gap
Padding padding
Space between justify-content: space-between

もちろん完全に1対1で対応するわけではありませんが、FigmaでAuto Layoutを使う際に「実装ではどう表現されるか」を意識すると、より実装しやすいデザインになります。

「見た目の余白」ではなく「構造の余白」で考える

余白を指定する際も、「なんとなく要素同士を32px離す」のではなく、構造で分解して考えます。

例えば、

「このカードの中は全部32px空ける」

という指定だけではなく、

「カードの内側に32pxのpaddingがあり、要素同士は16pxのgapで並んでいる」

と考えましょう。

このように「何によって発生している余白なのか」をデザイン段階で整理しておくと、実装時にデザインの破綻が起きにくくなります。

4. コンテンツ量による変化を予測する

Figmaのキャンバス上では幅や高さなどが決まったサイズでデザインできます。しかし、Webサイトは必ずしもそのサイズで表示されるわけではありません。

「固定」ではなく「可変」を前提にデザインする

実際のWebページでは表示する文章やユーザーの入力内容によって要素の大きさが変わります。

そのため、デザイン時に以下のような点を考慮しておく必要があります。

  • 見出しのタイトルが想定の2倍（2行以上）に増えたらどう崩れるか？
  • ボタン内の文言が長くなったとき、横幅はどう伸縮するか？
  • ユーザーが入力フォームに長文を入れた場合、領域はどうスクロール・拡張するか？

可変要素でも崩れないデザインを作成することが重要です。

5. レスポンシブデザイン—画面幅に応じた「変化のルール」を考える

PCとスマートフォンだけではない

レスポンシブデザインとは、単に「PCとスマートフォン、それぞれの画面図をつくる」ことではありません。

Webサイトは、1440px、1280px、1024px、768px、390pxなど、さまざまな画面幅があります。

そのため、PC版をつくる、スマホ版をつくるだけではなく、その間のサイズでどう変化するかまで考える必要があります。

「一枚の絵」ではなく「変化のルール」を設計する

例えばカード型のグリッドUIをデザインする場合、下記の点を考慮する必要があります。

  • レイアウトの折り返し：画面幅に応じて「3列 → 2列 → 1列」へ自動で変形させるか
  • メディアサイズ：画像アスペクト比を固定にするか、画面幅に合わせて縦横比を変えるか
  • テキストとボタン：画面幅が狭くなった際、テキストを折り返すのか、ボタンを縦並び（100%幅）に変更するのか？

デザインを「画面サイズごとの完成図」として捉えるのではなく、画面幅に応じてどう変化するかというルールとして考えることが重要です。

6. デザイナーが知っておきたいアクセシビリティ

アクセシビリティも、実装段階だけで対応するものではありません。

例えば、リンクとボタンをどう使い分けるか、色だけに頼らず情報を伝えられるか、十分なコントラストがあるか、といったことはデザインの段階で考えられます。

また、キーボードで操作できるUIになっているか、画像に適切な代替テキストを設定できるかといった点も、実装時にエンジニアが判断するだけではなく、デザイン側から意図を伝えておける部分です。

「見た目をどうするか」だけでなく、ユーザーが何をするための要素なのかを考えることが大切です。

まとめ：実装を見越してデザインする

フロントエンドの知識は、コードを書くためだけのものではありません。

HTMLがどのように情報の意味や構造を表し、CSSがどのようにレイアウトをつくり、画面幅によってUIがどう変化するのかを知っておくことで、実装に配慮したデザインを作成できるようになります。

特にReactやVueなどのフレームワークを使った開発が増えている現在でも、Webの基礎となる考え方を理解しておくことは変わりません。

デザイナー自身がすべてのコードを書ける必要はありませんが、「このデザインは実装するとどうなるか」を想像できることが今後も重要になります。