デザインをスムーズにするガイドライン: 第1回 スムーズな制作を実現するアイデア
はじめまして。株式会社Plankton Designの牧下浩之と申します。
みなさんは、今のデザイン制作フローに満足していますか？
この連載では、デザインファイルを作成する際に、ちょっとしたガイドラインを設けることで、より効率的に、より運用しやすいデザインファイルを作成することができるというお話をしていきます。
ガイドラインは縛るもの？役立てるもの？
デザイン作業にガイドラインを設けたり、それを守ったりすることは、デザインとは関係ない作業が増えて面倒だと思われるかもしれません。
ですが実際には、ガイドラインを活用することで、理解が容易になり、無駄な作業が省かれ、他者とのコミュニケーションも円滑になるなど、さまざまな効果を得ることができます。
さらには、デザインそのもののクオリティ向上に寄与することもあります。
それではさっそく、最初のガイドラインを紹介しましょう。
基本的なガイドライン
今回は導入として、どんなデザイン制作の場面でも活用できる基本的なガイドラインをご紹介します。
それは以下の３つです。
- 名前をつける
- 順番にならべる
- グルーピングする
順を追って詳しく見ていきましょう。
名前をつける
デザインを作成していく上で、オブジェクトやレイヤーなど、さまざまな要素が発生します。それらの要素に対して、それが何であるかをラベリングしましょう。
要素が同一であっても、どのような文脈でその要素を扱うかによって、最適な名前は変わってきます。
下の図のように、名前の付け方によって、その要素がどのような意図で存在しているのかを共有することができます。
名前の付け方でとらえ方が変わる
順番にならべる
複数の要素が存在する場合、必然的に要素と要素の関係性がうまれます。
関係性を測る適切な基準を設定し、その基準にしたがって要素を順番にならべましょう。
基準が明確であれば、要素が増えた場合でも、どこにその要素を置くべきかを悩まなくてすむでしょう。
要素を増やさなくても並べ方で意図をあらわすことができる
グルーピングする
要素の数が増えてきても、グルーピングを活用することで、全体像の把握のしやすさを保つことができます。
種別が同じ要素をひとまとめにして、そのまとまりにラベリングしましょう。
また、グルーピングは階層としての関係性を定義することもできます。
要素やグループの相互関係がわかりやすくなる
ガイドラインのメリットを考えよう
基本的なガイドラインを３つ紹介しましたが、これらはさまざまな箇所で活用されています。
たとえばOSのファイルシステムを思い返してみてください。
ファイルやフォルダには名前が付けられており、それらはファイル名や容量など、一定のルールによって並んでいます。また、フォルダによってグルーピングされ、階層構造になっています。
HTMLの構造も同様です。さまざまな名前の付いたタグが、要素同士の関係性に準じて階層構造になり、意味にそった順番で記述されています。
要素の見た目だけにとどまらず、要素の意味や関係性を定義することで、自他ともに理解しやすくなり、拡張もしやすくなります。
ガイドラインに沿って絞り込みをおこなえば、最適な要素を抽出する手助けにもなります。
ガイドラインを活用することで意図が伝わる
ガイドラインを評価しよう
ガイドラインを設ける際、そのガイドラインの内容は適切か、そのガイドラインを適用することでメリットは発生するのか、といったことを評価するようにしましょう。
有用に見えるガイドラインであっても、そのメリットを明確にすることができなければ、最適とは言えません。
優れたガイドラインであっても、欲張って導入しすぎてしまうと、手間ばかりが増えてしまうことも事実です。うまく活用できるかどうかを判断した上で、ガイドラインを採用するようにしましょう。
例えば、1年後の自分でもわかるガイドラインか、チームのメンバーで共有しやすいガイドラインか、といった判断基準も有効です。
制作環境や条件は常に変化します。ガイドラインも適宜見直しを図りましょう。
おわりに
いかがだったでしょうか。
「ガイドライン」「ガイドラインの活用」「ガイドラインの活用によるメリット」について、イメージがつかめたでしょうか。
次回からは、具体的な作業に沿ってお話しをしていきます。