知っておくと便利！ CSSでUIデザインを微調整する時短テクニックとプロセスを解説

Post on:2022年4月26日

はじめに

少し前に「Designing in the browser」という言葉が果たして有益なのかどうか、考えるようになりました。「ブラウザでデザインする」というのはデザイン要素を素早く追加できることを意味しますが、Figmaなどのデザインツールと比較すると、スピードではツールの方が勝っています。

ブラウザにすでに実装されているデザインがあれば、それを微調整するのはとても簡単で、最終的には最初とは異なるものを「デザインする」ことになるかもしれません。そういう意味では「微調整する」という言葉の方がしっくりきます。問題は、ブラウザでデザインできるようになるためには何が必要なのか、ということです。そして、現在のデベロッパーツールを使用してブラウザで何ができるかです。

「Designing in the browser」という言葉はあまりにも曖昧で、一部のデザイナーやデベロッパーには「Webブラウザはデザインツールだ」と考えている人もいるほどです。この考え方は、HTMLのマークアップさえあれば、デザインツール（Figmaなど）と同じようにブラウザ上でデザインを始められるということを意味していると思うかもしれません。いいえ、そうではありません！

下記のレシピサイトを例に見てみましょう。

レシピサイトの例

いくつかのセクションがあります。

ヘッダ
検索
注目のレシピ
レシピの一覧

デザインツールと同様に、ブラウザでこのようなデザインを行うことは可能でしょうか？

簡単に答えると「ノー」です。
ブラウザでこのようなWebサイトをデザインすることが現実的でない理由はたくさんあります。難しいわけでも、不可能なわけでもありませんが、現実的ではありません。

その理由のいくつかを紹介しましょう。

ブラウザでのデザインがうまくいかない理由

時間がかかる

デザインをしている時は、デザインすることに集中したいと私は考えています。HTMLとCSSのコードを書きながら、同時にデザインついて考えると、その時間は2倍にも3倍にもなってしまいます。

例としてヘッダを取り上げてみましょう。
ブラウザでこれを考えてデザインするには、レイアウト、スペース、配置、アイコンの書き出し、フォントサイズなど、さまざまなことに気を配らなければなりません。

ヘッダの例

最初に必要なCSSを記述し、次にブラウザで表示を確認し、すべてが意図した通りになっているかどうかを確認するため、時間がかかります。アイコンのサイズが合っていなかったり、クラス名にドットを付け忘れたためにセレクタが動作しなかったり。小さなシナリオがたくさんあります。

これは、ヘッダ用にデザインツールでシンプルな矩形を作成した方が、コードで行う（別名: ブラウザでデザインする）よりもはるかに速いという、単純な例です。

上: ブラウザでデザインする（コードで行う）
下: デザインツールでデザインする（Figma）

結果は同じではありません！ブラウザでは残りの要素を追加してから、ナビゲーション要素にpaddingを追加し、ヘッダの高さを適切にする必要があります。

デザインツール（Figma）なら、2つのステップで済みます。

長方形を作成する
背景色を選ぶ

もう一つの例は、検索フォームです。ブラウザでコーディングして、実際の時間を比較してみました。Figmaでは1～2分しかかかりませんが、ブラウザでは8分ほどかかりました。意図したデザインにするためには、次のことが必要です。

appearance: none;を追加してデフォルトのデザインに戻す。
border, border-radiusを削除する。
プレースホルダーの色を追加（ベンダープレフィックスを覚えてなかったので、検索して調べました）。
検索アイコンをCSSの背景で追加し、サイズや位置を調整する。

これが基本的なHTMLとCSSのコードです。

上: ブラウザでデザインする（コードで行う）
下: デザインツールでデザインする（Figma）

しかも、これはまだスクリーンサイズの違いは考慮していません。さらに、それ用のFlexの親も用意していません。Figmaでは、アイコンと角丸ボーダーがある矩形を描くだけです。

これでも、ブラウザでデザインするというべきでしょうか。デザインするときは、CSSのプロパティから頭を切り離し、デザインだけに集中する必要があります。もし私がブラウザでデザインするとしたら、時間があまりまくっていて、締め切りのないプロジェクトであるときだけです。

CSSの問題に直面するかもしれません

CSSのレイアウトで悩まされ、デザインにかかる時間がさらに増えてしまう可能性が高くなります。たとえば、CSSのプロパティに小さなタイプミスをしてしまうことがあります。デベロッパーツールでどのCSSプロパティが無効かを見て、初めて気づきます。

.search-input {
    disply: flex;
}

.search-input {

disply: flex;

}

displyはタイプミスなので、ブラウザで期待通りに表示されません。Flexの親が存在しないということになります。デザインをしているときに、なぜそんな無駄なことに時間をかけなくてはいけないのでしょうか。意味がありません。

コンテキストの切り替え

デザインのルックアンドフィールはもちろん、そのためのCSSの記述を考える必要があります。このコンテキストの切り替えは（少なくとも私にとっては）良くありません。集中することができなくなります。

ルックアンドフィールとCSSの記述を同時に考えたときの私の心は次のようになります。

例えば、次のようなセクションをデザインしたいとします。

セクションのデザイン

このようなレイアウトの場合、この種のレイアウトではカードを複製してグリッドを埋めない限り、カードのデザインが十分かどうかを判断できない場合があります。

デザインとCSSのコンテキストを切り替えるときに私が考えていることは次のとおりです。

クリック可能にするために、リンクで囲む必要があるか？
リンクで囲んだぞ。次に、<a>要素をFlexのラッパーにしよう。
ん？カードのタイトルが下から左にずれてる。marginとpositionのどちらを使えばいいのかな？

お分かりになりましたか？この時点での目標は、可能な限り最速でデザインを探求することだけですが、なぜこのような問題に答えたり、考えたりする必要があるのでしょうか？

ブラウザでデザインを複製するのは難しい

Figmaのようなデザインツールで作業しているとき、キャンバスを複製して別のデザインオプションを探すのは簡単で迅速です。ブラウザではほとんどの場合、.cssファイルを複製して別のものを探したり、新しいクラスを追加してそこから取得することになります。

ブラウザでページを複製できるようにしてほしいとは言いません、それは意味がないからです。その機能はデザインツールにのみあるのが望ましいと思っています。

デベロッパーツールは面積を占有する

誰もが27インチのディスプレイを持っているわけではないので、ブラウザでデベロッパーツールを開くと画面占有率が高くなり、ブラウザで「デザイン」するワークフローに影響を与えます。

デベロッパーツールを別ウインドウで開くのも1つの解決策ですが、あまり実用的な解決策ではありません。2つの異なるウインドウ（ブラウザのタブとデベロッパーツール）を行き来することになります。

ブラウザでデザインすることがうまくいかない理由を探ったので、代わりに私が「微調整」と呼ぶことを好む理由を見てみましょう。

ブラウザでの微調整

「デザインする」よりも「微調整する」という言葉の方が、しっくりくると思います。なぜなら、Webブラウザをデザインツールと思い込んでいる初心者やデザイナーに誤った希望を与えないからです。

私がブラウザでの調整作業で気に入っているのは、ドキュメントのフローです。何かを変更すると、そのサイズが大きくなり、兄弟要素は下に押し下げられます。

デザインツールでは自動レイアウトを使用しない限り、このようなことは起きません。場合によっては、素早くデザインを試したいこともあるでしょう。

下記のモックアップをご覧ください。さまざまな要素のリストがあります。左のブラウザでは、そのうちの1つが大きくなると、残りの要素は下に押し下げられます。

ブラウザとデザインツールの違い

右のデザインツールでは、オーバーラップが発生します（ピンクの要素を大きくすると、その下の要素にオーバーラップします）。

続いて、ブラウザが大得意にしている微調整をいくつか紹介します。

ブラウザで配色を微調整する

CSS変数を使用すると、カラーの値を簡単に微調整でき、納得のいく結果が得られるまでさまざまなカラーを試すことができます。デザインツールでも可能ですが、ブラウザと比較すると柔軟性に欠けます。

お分かりいただけたでしょうか。デザインツールよりもブラウザでやったほうが便利なこともあります。

:root {
    --primary: #d66636;
    --secondary: #222;
    --gray-0: #fcf5f2;
}

:root {

--primary: #d66636;

--secondary: #222;

--gray-0: #fcf5f2;

}

ブラウザで配色を微調整する

ブラウザでフォントサイズを微調整する

デザインツールでは、Figmaのオートレイアウトなどを使用していない場合、テキスト要素はサイズを変更するとレイアウトが崩れてしまいます。下記をご覧ください。

右: デザインツールでフォントサイズを変更すると、レイアウトが崩れる

フォントサイズの変更もCSS変数を使用すると、いくつかの変数を変更するだけで、すべてのテキスト要素にフォントサイズを反映させることができます。

:root {
    --text-1: 1rem;
    --text-2: 1.25rem;
}

p {
    font-size: clamp(1rem, 5vw, var(--text-2));
}

:root {

--text-1: 1rem;

--text-2: 1.25rem;

}

p {

font-size: clamp(1rem, 5vw, var(--text-2));

}

フォントファミリーの調整

フォントサイズと同様に、UIでいくつかの異なるフォントをテストする必要がある場合があります。デザインツールでは、Figmaで共有スタイルやオートレイアウトを使用しても、この作業は私にとっては悪夢です。

ブラウザでグリッドレイアウト・システムを微調整する

CSS Gridのブラウザサポートが非常に充実してきたため、ブラウザでのグリッドレイアウトの変更はより簡単になりました。たとえば、grid-template-areasを使用してグリッド内のエリアに名前を付け、それに基づいて子要素を変更できます。

.c-newspaper {
    display: grid;
    grid-template-columns: 0.2fr 0.6fr 0.2fr;
    grid-template-areas: 
                    "item-1 featured item-2"
                    "item-3 featured item-4"
                    "item-5 item-6 item-7";
    grid-gap: 1rem;
}

.c-article--1 {
    grid-area: item-1;
}

.c-article--2 {
    grid-area: item-2;
}

.c-newspaper {

display: grid;

grid-template-columns: 0.2fr 0.6fr 0.2fr;

grid-template-areas:

"item-1 featured item-2"

"item-3 featured item-4"

"item-5 item-6 item-7";

grid-gap: 1rem;

}

.c-article--1 {

grid-area: item-1;

}

.c-article--2 {

grid-area: item-2;

}

ブラウザでグリッドレイアウト・システムを微調整する

特定のコンポーネントを別の配置で試してみたいですか？簡単です、grid-areaを好きなエリアに変更するだけです。CSS Gridのエリアについてよく知らない場合は、この記事をご覧ください。

ブラウザでレスポンシブ対応のフォントサイズを微調整する

Figmaのようなデザインツールで、レスポンシブ対応のテキストを実装するにはどうしたらよいでしょうか？答えは、不可能です。レスポンシブというのは、特定のテキスト要素が特定の制約に基づいてどのように変化するかを確認できることを意味しており、2つ3つのサイズのみに対応することではありません。

タイポグラフィに関して、デザインツール対ブラウザの現状を、私はこう見ています。

上: デザインツールは点、下: ブラウザは線

CSS比較関数のおかげで、clamp()関数を使用してこのようなレスポンシブ対応のフォントサイズを簡単に実現できるようになりました。

.title {
    font-size: clamp(1rem, (1rem + 5vw), 3.125rem);
}

.title {

font-size: clamp(1rem, (1rem + 5vw), 3.125rem);

}

参考: CSSの数学関数min()、max()、clamp()の基本的な使い方

ブラウザでコンテナクエリを微調整する

CSSのコンテナクエリは2022年4月現在、Chrome、Edge、Safari TPで取り組まれています。コンテナクエリとは、コンテナや親を基準にスタイルを設定できる新機能です。
参考: CSS コンテナクエリの基礎知識と便利な使い方を解説

このコンテナクエリによりデザイナーにとって、考え方やデザインの方法が変わるかもしれません。たとえば、デベロッパーに4種類のサイズが異なるデザインを提供する代わりに、コンテナのサイズに応じて変化するコンポーネントだけを提供することができます。
参考: CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる

カードコンポーネントの4つの異なるバージョンを考えてみましょう。

カードコンポーネントの4つの異なるバージョン

各バージョンのコンテクストを図にすることも可能です。これによって、実装チームとデザインのやり取りがしやすくなります。

カードの各バージョンのコンテクスト

ブラウザで多言語サイトのデザインを微調整する

私はデザイナーなので、クライアントやプロジェクトマネージャーから、1つのUIを2つの言語のバージョンで提供するように何度も依頼されたことがあります。私にとって、これは悪夢のような作業です。

基本的には断っており、使用する書体を含めてメインスクリーンのみを提供しています。

なぜなら、FlexboxやCSS Gridをはじめ、論理プロパティを使用すれば、ルート要素のdir属性を変更（<html dir="rtl">）するだけで、デザインをLTR（左から右）からRTL（右から左）に切り替えることができます。

LTR（左から右）とRTL（右から左）を切り替える

実装にFlexboxやCSS Grid、論理プロパティを使用していれば、方向を切り替えることは非常に簡単です。

たとえば、検索ボックスにパディングを加えたい場合は、下記のように記述します。

.input--search {  
  padding-inline-start: 2.5rem;
  padding-inline-end: 1rem;
}

.input--search {

padding-inline-start: 2.5rem;

padding-inline-end: 1rem;

}

同じCSSで、LTRとRTLを変更するだけ

とはいえ、ブラウザでRTLにするようにデザインを調整することは、デザインツールでやるよりとても簡単です。CSSでのRTLスタイリングについてもっと知りたい方は、こちらのガイドをご覧ください。

終わりに

デザインツールとブラウザの両方を使用して、必要なことを実現する方法について自分の見解を探り、共有しようと思いました。デザインツールがよい場合もあれば、ブラウザがよい場合もあります。少なくとも私にとっては、「微調整」という言葉がぴったりです。

その一方で、私の考えではこれはブラウザの仕事ではないため、ブラウザがデベロッパーツールでデザインするための機能が必要になるとは思いません。デベロッパ－ツールにはすでに多くの機能があります。デザインツールは、アイデアを試す柔軟性を提供することを目的としていますが、ブラウザは制約や制限がある場合に可能な限り最高のユーザーエクスペリエンスを実現できるように作られています。

この記事があなたのお役に立てれば幸いです。
コメントや提案があれば、@shadeed9までお願いします。