Figmaを活用して現場で実践できる“デザインガイドラインハンズオン“ イベントレポート

6/13（土）、TUBのオンラインイベントに参加したのでそのレポートを致します！

- TUBってなに？
https://www.tokyo-uppers-boost.mht-code.com/

- 過去のTUB
https://mht-code.connpass.com/

- 株式会社マンハッタンコード（主催会社）
https://www.mht-code.com/

今回のイベント内容

🎉 Figmaを使ったデザインガイドラインの作り方を学ぶ 🎉

タイムテーブル

- 講義
- ハンズオン

講義

まず、デザインガイドラインについて資料を用いて説明してくださいました。

デザインガイドライン＝デザインのルールがまとまっているドキュメントだそうです。
デザインガイドラインの中でも、①設計指針 ②デザインガイド ③スタイルガイドと種類があります。
今回は③スタイルガイドの説明とハンズオンをやっていきます！

スタイルガイドラインの説明です。見た目のルールの定義が書かれているものなのですね。
次にスタイルガイドラインが無いとこんな弊害があるよ...と教えてくれました。

- 統一化したルール(ガイドライン)がないとチームでデザインが決まらない
- 準拠するデザインがないので認識が違いと手戻りが発生する
- クライアントもどんなものができるか想像できない

- 準拠するデザインがないので認識が違いと手戻りが発生する
- クライアントもどんなものができるか想像できない
上記２つについて詳しく説明していきます。

こんな感じで、認識の違いが起こり、手戻りが発生してしまうのです。
しかも手戻りはデザイン段階のみならず、設計、開発、検証まで幅広い範囲で起こります。他のデザイナーだけでなくエンジニアやディレクターの方に迷惑がかかってしまいます。結果、納期が遅れてしまったりと大変なのです。

また、クライアントがどんなものができるか想像できないのも問題です。
ルールが無いとクライアントは行き当たりばったりのFBになりがち。
しかもクライアントはどんなデザインができるのかわからず不安ですよね。
だからこそ、余計なコストや手戻りを防ぐためにスタイルガイドラインを作れるようになろう！というわけです。

ハンズオン

ここでハンズオンの説明に移ります。

いきなり書け！と言われても困りますよね。
なので、マンハッタンコードのコーポレートサイト（←どんなデザインなのかはこちらのリンクで確認ください！）のデザインデータを分解し、ガイドを作ることにします。
「どんな要素が必要なのだろう？」「何を決めればいいのかな？」「どういう書き方にすれば他の人が見てもわかりやすいかな？」と悩みながら作っていくことでスタイルガイドラインとはなんなのかがわかるハンズオン、というわけです！

※ちなみに、スタイルガイドラインの項目として以下のものが挙げられるようです。

早速手を動かしていきます！
今回使用するデザインツールは「Figma」。
Figmaのメリットは、

- 無料で使える。
- Webブラウザで操作できる。

だそうで、

XDと比べてのメリットは、

- 共同編集がサクサク快適、15人くらい同時でやっても重くない。

だそうです！
スタイルガイドは複数のデザイナーで作ったり、エンジニアやディレクターの方と一緒に作ることもあるはずです。Figmaはスタイルガイド作りに最適なデザインツールだなと思いました。

今回たくさんの方々が参加されていたので、グループに分けて作業を進めました。

左側の長いのがマンハッタンコードのコーポレートサイトのデザインです。右側が私たちが作っていくガイドラインです。
矢印が付いているので誰がどこを編集していているかが一目でわかっていいですね！

実際手を動かすと何書けばいいのか分からない。。
普段デザインで気をつけていることって何だっけ。。とか色々考えていたらあっというまに時間が終わってしまいました。

私の作ったスタイルガイドラインはこちらです。

全然書けてない〜。
Sizeのところがよくわからなくて、コンテンツ幅くらいしか書けて無い。
Colorの部分は、カラーコードだけでなく下に色付きの四角を置いてどんな人でもわかりやすくしたのがこだわりです！

ここで、他の方々の作品を拝見しました。

こちらの方のガイドでは、Sizeはフォントサイズを中心に書かれています。確かにフォントサイズは重要です。また、H1は〇〇px、とか書かれているとコーディング時にわかりやすいですね。

こちらの方は、Colorでメインカラーとベースカラーと分けています。確かに、どの色がどの割合で入るべきとか書かれているとデザイナーは助かります。

こちらの方は、コンポーネントという項目を追加しています。確かに、一覧であると使いやすそう。（Figmaにはsketchみたいにシンボルだけを並べたページが自動的に作ってくれないということですかね？）

みなさん、私と違って素晴らしいスタイルガイドラインを作成していらっしゃいました！

全員分の講評が終わったところで、マンハッタンコードさんが実際に作ったスタイルガイドラインを紹介されました。

めちゃ見やすい〜！マージンの部分あるとすごい便利ですね。（私は下層ページよく作るので）
こちらで、勉強会は終了となりました。

個人的な感想

スタイルガイドラインを作るときは、デザイナーだけでなく、エンジニアやディレクターのことも考慮して作るべきだと学びました。
なぜなら、サイトやアプリはチームで作っていくのが当たり前だからです。

コンテンツ幅やマージン、スマホにしたときどうなるか？などを書いておくとエンジニアが嬉しいし、タイトルが何文字以上になると改行します、とか書いておくとディレクターが嬉しい、はず。
もっと色々なガイドラインを参考にして良いガイドを作ってみたいです！

マンハッタンコードでは、エンジニアリングをするビジネスマンを募集しているそうです。最新技術を使ってチームで制作したい、そんな方はぜひ採用サイトをご覧いただきお問い合わせしてみるのはいかがでしょうか？
https://2020q3-recruit.mht-code.com/