サムネイル_copy_2

2017年、デザインガイドラインについて考える。

株式会社rootのUIデザイナー 古里祐哉です(@remmyfurusato)。

rootでは、サービスの立ち上げやリニューアルに伴う、UI/UXデザインをご支援しています。

さて、今年を振り返えると「デザインガイドラインに注力した」年でした。デザインガイドラインを必要とされるクライアント様には共通点があります。

・レイアウトパターンやパーツの使い方が定義されていないで、設計者やエンジニアが迷う。
・結果、サービス全体の一貫性がなく使いづらい。

このような課題を抱えるクライアント様からのご依頼を多くいただきました。サービス開発の現場で、徐々にデザインガイドラインの重要性が広まってきているのではないでしょうか。

デザインガイドライン作成を通して考えたことをまとめたいと思います。

デザインガイドラインとは?

デザインガイドラインの定義は「サービスやプラットフォームのデザイン方針を示したドキュメント」です。

プラットフォームでは、ヒューマンインターフェースガイドラインやマテリアルデザインが有名ですね。サービスでは、Atlassian、Airbnbなどが有名です。

配色やタイポグラフィなど最低限な要素を定義したものから、レイアウトパターンまで定義したものもあります。デザインガイドラインをサービス開発に導入し、得られる効果は以下の2つがあります。

1. パターン化されているので、効率よく画面設計ができる。
パーツ・コンポーネントを組み合わせることで、最終アウトプットがすぐ見える状態になります。1からデザインするよりも効率よく画面デザインができるので、他の画面作成や改善に時間を割くことができます。

2. デザインに一貫性があるか否か判断できる。
デザインガイドラインを使って、一貫性があるかどうか客観的に判断できます。デザインはエラーフィードバックがないので、ダメなデザインでもデプロイできてしまいます。ガイドライン自体がダメなら元も子もありませんが、判断基準があるだけでもデザインの破錠を食い止める予防になります。

統一されたデザインは、一貫したエクスペリエンスの提供に繋がります。

デザインガイドラインの構造

Atomic Designをベースに設計する


Atomic Designは、パーツとコンポーネントを粒度別に定義する手法で、コンポーネント軸で展開されるデザインガイドラインとの相性がよいためです。
5つの分類があります。

Atoms(原子)  
分解できないパーツ群。抽象的な機能を意味する。単体では使えない。

Molecules(分子) 
 Atomを組み合わせたコンポーネント群。具体的な機能を持つ。

Organisms(有機体) 
より具体的なコンポーネント群。ページのどこに配置するかがわかるレベル。

Templates(テンプレート) 
ページの構造を分類したもの。ワイヤーフレーム。

Pages(ページ) 
画面のコンテキストに忠実に従ったもの。遷移が繋がったデザインカンプなど。

SketchもAtomic Designをベースに設計する

1. Libraries側にAtoms ~ Pagesのpageを作成。

2. Atoms~Organismsには、パーツ・コンポーネントをそれぞれ配置する(もちろんsymbol化できるものはしておく)

3. Templatesには、業務固有の情報を抜いた画面をアートボード単位で配置する。他の業務への展開が簡単なため。

4. Pagesには、作成したデザインカンプを入れておく。

誰でもアクセスでき、簡単に書き換えられるようにする。

デザインガイドラインは、ドキュメント共有ツール(Atlassianなど)を使って運用します。誰がいつどういう目的で改修したのか、履歴が見えるようなツールが望ましいです。

スクショに関しては、べたの画像だと更新が面倒なので、invisionで管理します。この場合はinvisonのリンク先が画像で見えておく必要があります。

invisionはsketchからアートボード毎にアップデートできますし、Inspector ModeでCSSを参照できるので、フロントエンド側にも優しいです。

デザインガイドラインのコンテンツ

ここまでデザインガイドラインの構造について説明しました。コンテンツを作成する上で大切にしていることが2つあります。

誰が読んでも、パーツ、コンポーネントの使い分けができること。

ありがちなのは、各パーツやコンポーネントとその名前だけ記載してしまうことです。使いどころや、使い分けが書かれていないので、第三者から見ると理解できません。

例えば、

・Successボタン = 成功
・Primaryボタン = 優先度が高いアクション

ではなく、

・Successボタン = 一連のステップの完了、保存。ステップでは1回だけ使える。
・Primaryボタン = ステップを次へ進めるボタン、ステップで何回も使えるが、画面内では1回だけ使える。その他はデフォルトボタンを使う。

のように、使い分けができるように記述しましょう。

ガイドラインは常にアップデートすること。

完璧なガイドラインは存在しません。

全てを網羅して細かく書こうとすればするほど、柔軟性を失うという性質があります。すべてのパターンに対応するには膨大な時間がかかりますし、完璧にしたところで1つのパターンが追加されれば毎回見直さなければなりません。

重要なのは、ガイドラインを常にアップデートすることです。最初から完璧なものはかけないことを周りに関係者に理解してもらい、チームで作っていくことです。

デザインガイドラインの難しさ

細かく書きすぎると膨大な時間がかかる。

作り始めると、きりがないのがデザインガイドラインの難しさです。

先程も書きましたが、全てを網羅して細かく書こうとすればするほど、柔軟性を失うという性質があります。

細かくしていくのは、開発と同時進行でもできますし、現場で議論になったものはチケット化し、ガイドラインに吸い上げましょう。

画面固有のコンテキストは内包されない。

サービス全体のUIコンポーネントを揃えた段階では、まだスタート地点です。言語に置き換えるなら、アルファベットや語句、主語述語の体系が作られた段階です。

使いやすい画面を作るには、まずはユーザーを知ることが重要です。ユーザーの目的はなにか?どの情報を知りたいのか?ニーズを明確にしましょう。

デザインガイドラインを作るまえに大切なこと

ちゃんとワークする土壌をつくりましょう。

デザインガイドラインは形骸化しがちです。作り始める前に、どのように活用するか、いつアップデートするのか話し合い、開発のプロセスに組み込みましょう。

今のフェーズでやるべきことなのか精査しましょう。

例えば、リリースが最優先であればリリースしてからやるべきでしょうし、キャンペーンサイトなどエンターテイメント性が重要なページでは不要です(当たり前ですが)。

また、デザインの適応範囲が狭く、チーム内で上手くやれるんだった不要かと思います。サービスとチームの規模が大きくなり、コミュニケーションコストが高くなってきたら、作り始めれば良いと思います。

ただ、負債を残しすぎると収集つかなくなるので、sketchの管理とCSS設計はちゃんとやっておきましょう。

最後に

現在rootでは、ディレクター・UI/UXデザイナーを募集しています。

新規サービス立ち上げや、リニューアル、デザインガイドライン作成のプロジェクトのご依頼を多数いただいておりますが、人員が足りません。

我こそは!という方は是非力を貸してください。興味がある方はwantedlyページからご連絡お願いします:)

事業成長にデザインで貢献するデザインディレクターを募集!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

応援ありがとうございます!もしよろしけばシェアよろしくお願いします^^
164
INSIGHT代表 兼 株式会社rootパートナー。中古マンション提案アプリ「カウル」プロダクトマネージャー。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。