見やすくてわかりやすいWebサイトを制作するためには、デザイン性を高めることがポイントとなります。
しかし、デザイン制作においてネックとなる点は、複数人でデザイン制作を行う場合に、デザインに一貫性が感じられなくなることです。そのような問題は「デザインシステム」を利用することで解決します。
今回は、Webサイトの制作において重要な要素であるデザインシステムについて解説します。
デザインシステムとは
デザインシステムとは、デザイン制作に関するあらゆる内容をルール化したものを指します。
ルール化する内容としては、デザインの原則や基準、コンポーネント、スタイルなどが挙げられます。これらについて仕様を細かく定めることによってデザイン性を高め、作業を効率化することができるようになります。
デザインシステムとは
デザインシステムを取り入れることで得られるメリットとしては、以下のものがあります。
・デザインが統一的なものとなる
・デザイン制作を効率的に行える
ここでは、それぞれのメリットについて説明します。
デザインが統一的なものとなる
デザインシステムが整備されていれば、制作されるデザインは統一的なものとなります。デザインシステムが特に高い効果を発揮するのは、規模の大きなプロダクトデザインを制作するときです。
デザイン制作の規模が大きくなると複数人で作業を行うことになります。ここで問題となるのは、デザインにばらつきが生じてしまうことです。
もしデザインシステムが整備されていなければ、デザインに対する制作者一人ひとりの感性が異なるために、当初のイメージとは異なったデザインができあがってしまう可能性があります。
その点デザインシステムを活用すれば、すでに定義されているコンポーネントや色を使いながらデザイン制作を行えます。そのため、制作者同士の間で連帯感が生まれやすくなり、複数人で作業を行ったとしても、統一感のある質の高いデザインに仕上げることが可能になります。
デザイン制作を効率的に行える
デザインシステムを取り入れるもう1つのメリットは、デザイン制作を効率的に行える点です。
たとえばWeb制作の場合、テキストのフォントやボタンなどのスタイルを事前に定義しておくことで、新しいデザインを作成する際にパーツを組み合わせることで形にすることができます。
また、デザインの修正が必要となった場合であっても、デザインシステムに基づいて作業を行えば、時間をかけることなく修正することが可能です。
デザインシステムの作り方
デザインシステムの作り方についておおまかに説明すると、「デザインの原則を作る」「デザイン制作の構成要素を決める」という流れで行います。
デザインシステムの作り方について具体的に説明します。
デザインの原則を決める
デザインシステムを作る前には、デザインの原則を決めておきます。
デザインの原則とは、プロダクトを制作するにあたり、どのようなデザインにするか、という点を明確にしておくことです。
一例として「全体的にスッキリとしたイメージで、洗練されている印象とする」などになります。
ただし、上記のように文章のみでデザインの原則を表現したとしても、デザインのイメージはそれぞれの制作者の中で異なるものとなってしまいます。それを防ぐためにはイラストも付け加えておくと、イメージを明確に示すことができます。
デザインの原則を明確にしておく理由は、プロダクトを制作する際のデザインの基準になるためです。デザインが明確でなければ、プロダクトの制作に一貫性が感じられず、質の低いデザインにもなりかねません。
そのような状態を防ぐためにも、デザインの原則を明確にしておく必要があります。
デザイン制作の構成要素を決める
次に、デザイン制作の構成要素を決めます。主な構成要素としては「スタイルガイド」や「コンポーネントライブラリ」があります。
スタイルガイド
スタイルガイドとは、デザインのスタイルを定義したもので、主な内容としては以下のものがあります。
・タイポグラフィ：文字の配置をルール付けすること
・カラーパレット：色合いの見本を示したもの
・デザインのトンマナ：デザイン制作に一定のルールを持たせること
・余白の寸法に関するルール
上記のほかに、デザインの制作中に行ってはいけない禁止事項も設定されます。
コンポーネントライブラリ
コンポーネントライブラリとは、デザインの制作において使用するUIモジュールをまとめたものです。
ボタンやフォームなどに使用するデザインをあらかじめ決め、コンポーネントライブラリにまとめておけば、デザインの制作者はコンポーネントライブラリの中から必要なデザインを選べます。
それによって、複数人でデザインを制作してもデザインに統一感が生まれます。
デザインシステムの事例
デザインシステムの事例として、Googleが開発した「Material Design」、Salesforceが開発した「Lightning Design System」を紹介します。
Material Design
Material Designを利用すると、視覚的に見やすく、感覚的に理解しやすいデザインに仕上がります。また、デザインに立体感を持たせるために影を活用している点も特徴的です。
そのほか、1つのデザインに使用する色の種類をおさえていることから、仕上がったデザインはシンプルな印象となります。
Lightning Design System
Lightning Design Systemのデザイン指針は「明確」「効率的」「一貫性」「美しさ」の4種類です。
これらの指針に基づくことでよりデザインのイメージが明確になります。また、効率性も重視しているため、スピーディーなデザイン制作を行うことができます。
まとめ
デザインシステムは制作するデザインに統一感を持たせること、そしてデザイン制作を効率的に行うために必要なシステムです。
デザインシステムが特に高い効果を発揮するのは、複数人でデザイン制作を行う場合です。デザインシステムを有効活用しながら、理想のイメージに合ったWebサイトを制作してみてください。
