この記事について
この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。
emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。
私が最近学んでいること、「デザインシステム」について書きたいと思います。
なぜデザインシステムを学んでいるのか。ですが、デザインの制作時にFigmaを使う機会が増えて、今までPhotoshopやXDで作業していたときよりも、コンポーネントを意識するようになったからです。
まだWeb制作を学び始めたばかりだから、デザインシステムとか難しそう。と思っている人もいるかもしれませんが、学んでいるとデザインの基本原則の重要さを改めて感じるようになりました。
どういう部分が重要だと思ったのかをわかりやすく説明しようと思います。
デザインシステムとは
デザインシステムを簡単に説明すると、デザインをすすめていく上でのルール、デザインに必要な部品（コンポーネント）などをまとめたものです。
デザインガイドラインは、このデザインシステムに含まれます。
例えば使用する色、フォント、余白のサイズなどです。
Figmaで公開されているものやWebサイト上で公開されているものがあります。
例：SmartHRが公開しているFigmaとWebサイト
デザインの基本原則について
デザインシステムを学ぶ前にデザインの4つの基本原則をおさらいします。
デザインの4つの基本原則をおさらい
- 近接…同じ情報を持つものをまとまりとして配置します
- 整列…要素をきちんと並べることでまとまりや一貫性を保ちます
- 反復…全体に一貫性を保つために繰り返します
- 対比…メリハリをつけることで要素に区別をつけます
これがデザインの4つの基本原則です。
基本原則をデザインシステムに活かそう
この4つをレイアウトではなくデザインシステムに活かす。というのはどういうことか「近接」「整列」「反復」を例に説明します。
近接
同じ情報を持ったものをひとまとまりとして考えます。
このグループをコンポーネントにできる。ということになります。こういうふうに考えれば、デザインシステムに活かすことができます。
整列
部品ごとで余白がバラバラにならないようにすればきれいに整列させることができます。
ということは余白も共通の部分。となり、この考え方をデザインシステムを作成する時にも活かせます。
反復
カード型デザインなど同じデザインを繰り返し利用する時には反復を使います。
反復するということは同じものを何度も使用するので、その部分をコンポーネントとして使用できることがわかります。これもデザインシステムにつながる考え方です。
実際にFigmaを使って解説します
「近接」、「整列」、「反復」がどのようにデザインシステムと関係してくるのかを解説していきたいと思います。
例えば、商品についての説明をするときに、「タイトル、文章、それを伝えやすくするための画像を配置したい。」という場合です。
この3つがそれぞれバラバラに配置されていると、同じことについて説明している。ということが伝わりづらくなります。ところが、これらをひとまとまりにすると同じ情報を持ったものということが視覚的にもわかりやすくなります。デザインの基本原則の近接です。
このひとまとまりを複数配置することになりました。
同じ部品をコンポーネント化せずに複数をコピーして用意すると、修正が入った時にそれぞれ調整が必要になります。コーディングの時にも同じルールを持った部品。ということもわかりづらくなるので、このひとまとまりの部分をコンポーネント化します。
コンポーネント化した部品は同じ情報を持つまとまりです。これらがバラバラに配置されていると、その情報同士が関連していないように見えてしまいます。
きちんとルールに沿って整列させると同じ情報を持つもの同士ということが伝わりやすくなります。デザインの基本原則の整列です。
デザインシステムに活かすには、使用するフォント、色、余白のルールを決め、デザインガイドラインとします。
Figmaでは、使用するフォントファミリーやフォントサイズをText styles、使用する色をColor stylesとして登録することができます。
余白についても統一するために、カラムとカラムの間は40px、セクション間は120pxなどというふうにルールを決めてわかりやすくコンポーネントをまとめたページに記載しておきます。
近接の考えでコンポーネント化した画像、見出し、本文のまとまりを整列の考えで作成したガイドラインを使ってオートレイアウト機能を使って繰り返して配置します。デザインの基本原則の反復です。
基本原則を理解していると、Figmaで作業するときに、コンポーネント化した方がよいもの、テキストスタイルやカラースタイルとして登録しておいた方がよいものを判断しやすくなります。
まとめ
このようにデザインの基本原則はデザインシステムを制作する上でも重要な知識だということがわかります。
Web制作を勉強し始めたばかりだからまだまだデザインシステムなんて難しい。と思うかもしれませんが、基本原則をきちんと意識して制作することが大事だということがわかるかと思います。
