もしあなたがウェブデザインに携わっていれば、「デザイン・フレームワーク」や「UIフレームワーク」、「UIキット」、「パターンライブラリ」などの言葉を聞いたことがあるかもしれません。これらはどれも、商品やサービスに利用される設計基準やテンプレート、UIパターン、コンポーネントとそのデザイン言語全般を指します。
これまでデザイン・フレームワークを作成したことがない人は、時間のかかる作業に見えるかもしれませんが、一度作成してしまえばデザイン制作をスピードアップさせ、全体的な作業の効率化を実現できます。
まず、デザインフレームワークが解決できる問題点や、デザインフレームワークが必要な理由、そしてデザイン制作時に必要なコンポーネント素材について詳しく見ていきましょう。
デザイン・フレームワークとは？
すべてのユーザーインターフェース・デザインは、真っ白のアートボードからはじまり、デザイナーはそこに機能的なデザインを作り上げています。このプロセスには、作成したすべてのデザインコンポーネントから、配色やボタンサイズなど、一貫性のあるデザインを構築するためのすべての手順が含まれます。
ここでは繰り返し作業を行いながら、相互に関連したパターンとコンポーネントのシステムを作成することで、効率的にデザイン制作を進めることができます。つまり、これが「デザイン・フレームワーク」です。
デザインフレームワークは、以下のいくつかの問題点を解決します。
- デザインに合っていない要素を排除、取り除きます。
- 他デザイナーと共同作業のしやすさ、効率性をアップし、チーム間の連携を取りやすくする。
- プロジェクト後半でのデザイン変更も、あまりストレスなく行うことができます。
第一の問題点: デザインの不一致。
一貫性（英: Consistency）は、良いデザインを素晴らしいデザインに変えます。一貫性は、UXや一般的なユーザビリティを改善し、ユーザーのサービスをより効率的に提供することが可能です。ウェブサイトやアプリの大小にかかわらず、一貫性のないデザインは、サービスや商品の外観、雰囲気、信頼性、ユーザーエクスペリエンスを損なうことになります。
デザインの不一致（英: Inconsistency）は、チームやデザイナーの作業スピードが早すぎたり、その場で変更を加えたりすることで、しばしば起こる問題です。またデザイナーは、クライアントの要望に応じて配色などを変更してしまうことがあり、これによって突然、デザインチームは微妙に色合いの異なる4つのみどり色が登場するなど、どれが本当に必要なものか誰も分からなくなってしまいます。
デザイン・フレームワークは、一貫性のある基本スタイルを作成することで、この問題を解決します。
第二の問題点: コラボレーションやコミュニケーションの相違
開発プロセスに多くのチームメンバーが携わっているとき、チームの基準となる標準スタイルがないと混乱が起きてしまうことがあります。
デザインフレームワークは、コミュニケーションプロセスを合理化し、はっきりとした標準スタイルと方向性を示すことで、共同作業の効率化につながります。どの配色やフォントが使われているのか、何度もファイルを読み返す必要はもうありません。
よくありがちな問題 : 同じボタンに３つの異なるスタイルがデザインされています。
第三の問題点: プロジェクト後半でのデザイン変更
たとえば、プロジェクトのために120枚のアートボードをすでに開発しているデザイナーは、あと何回色を変更しなければいけないでしょう。また、200個近くあるコンポーネントの一部である、アイコンデザインを変更しなければいけないこともあるでしょう。
デザインプロセス全体を通して、変化することはしょうがありませんし、製品やサービスの改善には仕方のないことですが、デザイナーが望んだタイミングより後に変更を伝えられることもしばしば。デザイン・フレームワークは、オブジェクトに方向づけされたシステムで構築されているため、プロジェクト後半でのデザイン変更もストレスなく行うことができます。一度変更すれば、デザイン全体に波及するよう設計されています。
デザイン・フレームワークの作り方
デザインフレームの意味と解決できる問題点を確認したので、ここからは、無料ダウンロードできるSketh UIを参考に、デザイン・フレームワークを作成していきましょう。
この記事で利用しているデザイン・フレームワークは、Sketchで「シンボル（英: Symbols）」と呼ばれている、特定のコンポーネント階層を利用したひとつのSketchファイルです。これらのシンボルは、ボタンクリックひとつでファイル全体の変更を簡単に行うことができます。メインとなるコンポーネント、各「シンボル」に変更を加えることで、他のすべての要素にも瞬時に反映されます。
デザイン・フレームワークの階層について
うまく活用できるデザイン・フレームワークを作成するには、まずしっかりとした視覚的な階層を設定することから始めましょう。最初に、配色やフォントなどもっともよく利用するコンポーネントからデザインします。
次に、ボタンや入力フォームなどの小さなコンポーネントに取り掛かりましょう。家を立てることを連想しながら行うと良いでしょう。最初に土台を作ってから、プロジェクトの進行状況に応じて、他のコンポーネント部分を追加していくといった具合です。
配色について
配色は、UIデザイン・フレームワークでもっとも重要な要素です。デザインすべての要素に色は利用されており、人間の強い反応と感情を引き出し、デザイン全体の見た目や雰囲気、トーンなどを決定します。
オススメの方法のひとつとして、以下のように配色をグループ分けするテクニックがあります。
- 主要カラー（英： Primary Color）はブランドカラーで、一般的にはプロジェクトの標準カラーパレットとして、ボタンなど重要なコンポーネント作成に利用されます。
- 二次カラー（英: Secondary Color）は主要カラーを補う役割を果たし、主要カラーの彩度や色合いとは異なります。基本的に灰色、グレースケールの配色が書体や背景などに利用されます。5から８の異なる灰色カラーを準備しておけば十分でしょう。
- システムフィードバックカラー（英: System Feedbabck Color）は、デザイナーがしばしば忘れがちな重要なグループです。ここでは、アラート、警告、通知などのシステムメッセージ用の配色をまとめています。
Sketchファイルでは、各色をそれぞれ異なるシンボルとなっており、ひとつの色を変更すれば、デザイン全体の色も自動で変更されるようになっています。
グリッド: デザインの余白スペースについて
配色が決まったら、次はグリッドを設定しましょう。グリッドは、ページ上のすべてのコンポーネント要素を正しい場所と順序で配置することができ、デザイン全体に影響しています。
グリッドには、縦と横の2種類があります。
垂直グリッド（英: Vertical Grid）は、もっとも一般的に利用されており、すべてが水平に整列するように利用されているグリッドです。Bootstrapや960pxグリッドなど、人気のあるグリッドシステムも多数公開されています。
もうひとつは水平グリッド（英: Horizontal Grid）で、こちらはあまり一般的ではありません。書体、タイポグラフィには水平グリッドが使用され、文字テキストの段落リズムを整えるため、一般的に新聞などで活用されています。
スタイルを加える、モディファイア
配色とグリッドに加えて、デザイン・フレームワークで重要なコンポーネントがモディファイア（英: Modifiers）です。そのままデザインとして使用することはできず、他のコンポーネントの変更やスタイル設定に使用されます。
このグループは、プロフェクトにスタイルやデザイン性を追加する、シェイプやドロップシャドウなどのデザインエフェクト関連のコンポーネントを含んでおり、どれもプロジェクト後半での個別の変更が面倒な要素と言えます。
Sketch用シンボルとして図形を作成することは、他のコンポーネント作成にもりようできるので、賢い方法と言えるでしょう。ひとつの図形の形状を変更すれば、他のコンポーネントにもすぐに反映されます。
モディファイアは、他の要素を作成する部品、パラメーターとして利用すると良いでしょう。たとえば、Sketchで長方形と角丸長方形、サークル円の3つの異なるシンボルを作成します。これらの図形を利用して、ボタンや入力フォーム、背景デザインなどUIに必要な各コンポーネントをそれぞれ作成してみましょう。
このテクニックによって、デザイナーはUIコンポーネントの外観ではなく、UXにより集中することができます。また、角の丸みの調整などスタイル変更を行うときも、基本シェイプに戻り図形ひとつを変更するだけで、デザイン全体が自動的に更新することも可能です。
タイポグラフィ: コンテンツ
タイポグラフィは、デザイン・フレームワークに重要な最後のコンポーネントです。ここでは、ヘッダーや段落のような静的なページ要素と、ボタンやナビゲーションメニュー、入力フォームなどインタラクティブなページ要素の2つに分けることができます。
すべての見出し（H1, H2, H3など）と段落のスタイルとサイズを設定しましょう。静的ページでは、配色やウエイトなどデザインに関連するバリエーションはあまりなく、唯一あるバリエーションは背景が明るいか暗いかのみです。どちらもうまく機能することを確認するために、2セットの配色カラーを作成するのが最善でしょう。
明るい背景とダーク系背景でそれぞれスタイリングされたボディテキスト。
その一方、ボタンやフィードバック用メッセージなど、インタラクティブなコンポーネント要素に関しては、複数のバリエーションが考えられます。たとえば、メッセージの種類（警告、エラー、成功など）に応じて4つの背景色を表示可能で、同様にボタン用ラベルも異なる背景を設定できます。
デザイン・フレームワークにこの項目を追加することで、書体やフォントのデザインを考えたいときにも役立ちます。
まず、通常のボタンラベル用テキストを設定し、次にそのバリエーションを作成していきます。こうすることで、最終的にたくさんの異なるフォントサイズを設定してしまうのを防ぐのにも便利。フレームワークに新しいUIコンポーネントを追加するときは、既存の書体スタイルが当てはまるか常にチェックしましょう。
タイポグラフィは、Sketch用シンボルは使用できませんが、Sketch用スタイルとして適用できます。すでに作成してある配色ライブラリを利用して、配色を変更するときは、これらのテキストスタイルを更新することをオススメします。
アイコン
デザインシステムにおけるアイコンは、インフォーマティブ（英: Informative）とユーザーインターフェース（英: User Interface）という2種類のグループがあります。
最初のグループは、主にイラストなどの要素の一部で、ボタンなどのUIインタラクション・コンポーネントには使用されません。もうひとつのグループは、ボタンやラベル、テーブル表などより複雑なコンポーネントを意味しており、ごく限られたスペースに配置されています。UIアイコンは、「編集」や「コピー」、「ダウンロード」、「削除」など機能的なトリガーとしても使用できます。
「矢印」や「追加」（+）、「閉じる」（x）など、UIのやりとりに使用される簡単なアイコンから始めてみましょう。さまざまなサイズ（12px、16px、24px 32px）でデザインすることをオススメします。
Sketch用シンボルとして作成された必要最低限のシンプルなUIアイコンセットは、他のデザイン・フレームワークに利用されている他の要素をデザインするのにも役立ちます。
コンポーネント: ボタン
ボタンは間違いなくUIデザインの中でもっとも重要なコンポーネントのひとつですが、トレンドの移り変わりに応じて、デザインは変化しています。
ボタンをデザインする時は、それぞれの「状態、ステータス」を設計するように心がけましょう。通常、ボタンは複数の状態があり、現在の状態（アイドリング、ホバー、押さえれた状態、無効な状態、アクティブな状態など）を示す視覚的フィードバックを、ユーザーにうまく提供します。
これを行うには2つの方法があります。まず１つは、各状態（通常、アクティブ、ホバー、押した状態）ごとにボタンの外観をデザインする方法です。時間がかかる方法ですが、その後の柔軟性を考えたテクニックと言えるでしょう。（無料のSketchフレームワークで登場します。）
各ボタンは、すでに作成されているシンボルのみで構成されています。ベースとなるシンボル上で角の丸みを調整することで、すべてのボタンに影響します。
2番めの方法は、最初の状態にもとづいてすべての状態をデザインする方法です。たとえば、各状態の色や彩度、明るさを変更する1つのSketch用シンボルを作成すると良いでしょう。
これを行うには、Sketchの描画モード「色相」、「彩度」、「オーバーレイ」のひとつを選択し、ボタンに重ねるようにシンボルとして配置しましょう。描画モード「色相」に設定した黒色の長方形を使って、通常のボタンの色合いを調整します。不透明度を変更することで、ボタンの色合いを明るくしたり暗くしたりできます。
コンポーネント: 入力フォーム
入力フォームによって、ユーザーはウェブサービスとのコミュニケーションやデータのアップロードを行うことができます。ボタンのついた入力フィールドなどのコンポーネントを使用することで、簡単なウェブアプリケーションを作成することもできます。ボタンと同様に、異なる状態の入力フォームのデザインを作成することをオススメします。
これはデザイン・フレームワークによりますが、入力欄が空の状態、入力欄を埋めた状態、入力エラー時のデザインは、最低限検討するようにしましょう。
複雑なコンポーネントなど
この段階までくると、デザイン・フレームワークは、製品やサービスがうまく機能するために必要な要素をすべて備えているので、完成と言ってしまっても良いでしょう。しかし、カード型レイアウトやテーブル表、日付ピッカー、チャート、フォームなどより複雑なUIコンポーネントを作成するのに、時間を費やしてみても良いでしょう。
セクション用レイアウト
このステージでは、アプリケーションやウェブサイトの最も一般的なレイアウトを作成することで、デザイン・フレームワークをさらに拡張することができます。ナビゲーションメニューやヘッダー、「About Us」ページ、ギャラリーなどをデザインすることで、デザイナーはプロジェクト後半での時間を大幅に節約できます。
製品やサービスのいくつかの異なるレイアウトデザインを作成することで、異なるプロジェクトに合わせて調整しやすくもなります。
デザイン・フレームワーク作成のポイントまとめ
定期的にデザイン・フレームワークをテストしよう。
テストにはあらゆるデザイン、開発プロセスを含める必要があります。小さなデジアンパーツを作成し、それらに「ストレステスト」を実施することで、エラーや血管したコンポーネントを発見、省くことができます。たとえば、プロジェクト前半に作成したコンポーネントの仕様を変更すると、最近追加したコンポーネントも自動で更新されているかどうか確認してみましょう。
シンプルなUIコンポーエントを作成しよう。
できるだけ多くの利用ケースを検討しながらも、UIコンポーネントのデザインをシンプルに保ちましょう。将来的には、どのスタイルもカバーすることができるでしょう。簡単な図形でUIコンポーネントを作成し、どのプロジェクトにも容易に適応できるフレキシブルさ、柔軟さを保つことがベストです。
ひとつのスタイルに集中しない。
デザイン・フレームワークは普遍的なものでなければいけないため、特定のスタイルに焦点を当てるのではなく。スタイルを作成できるコンポーネント自身にフォーカスを集めましょう。
独自のデザイン・フレームワークを作成しよう。
次のプロジェクトでは、デザイン・フレームワークをじっくり構築するために、まずはじめに時間をたっぷりかけてみましょう。デザインプロセス全体を改善し、効率をアップし、製品やサービスデザインの一貫性を高め、ユーザビリティも向上させることができます。
時間を節約して、デザインアイデアをより効果的に伝えることで、クライアントに向けて作成したたくさんのメッセージやコンセプトを、ほんの少しの時間で分かりやすく伝えることができるでしょう。
自分だけのデザイン・フレームワークを作成しよう。
SKetchファイルをこちらより無料ダウンロードできます。使用方法についてのドキュメンテーションも一緒に収録しています。
参考にしたいデザイン・フレームワークやUIフレームワーク
デザイン・フレームワークのより詳しい内容を理解できる方法のひとつは、既存の大企業がどのようにデザイン・フレームワークを使用しているか調べることです。これらの企業を参考にしながら、それぞれのデザインアプローチについて学ぶことができます。
Google’s Material Design : 現在、世界でもっとも人気のあるデザイン・フレームワークのひとつ。Googleがどのようにデザインプロセス全体を進め、有用なコンポーネント階層を作成したか学ぶことができます。
IMB’s Design Language : IBMはより細かい部分まですべてのデザインプロセスを公開、共有しています。また、シンプルなアイコンからUIアニメーションライブラリに至るまで、デジアン言語の豊富なリソースもすべて共有されています。
Atlassian : こちらも素晴らしい学習リソースのひとつで、デザイン・フレームワークの勉強に最適な教材と言えるでしょう。Sketchで作成した豊富なコンポーネントのウェブ用GUIキットも無料公開されています。
サムネイル@ : Mail.Ru Group Paradigm Design System by Evgeniy Dolgov – Dribbble
参照元リンク : How to Build an Effective Design Framework (Includes a Free Sketch UI Framework) – toptal
