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

こんにちは、梅雨に入ってしまい除湿器を買おうか悩んでいるみらいです。

本記事では6/13開催のTUBについて紹介していきたいと思います！

TUBとは？　https://www.tokyo-uppers-boost.mht-code.com/

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

6/13の企画内容

今回のTUBでは、デザインガイドラインの必要性について学び、その後にFigmaというツールを用いて実際にデザインガイドラインを作成しました。

講師はこちらのお二人

マンハッタンコード(主催会社)　https://www.mht-code.com/

デザインガイドラインの必要性

この記事をご覧になっている方でwebページ遷移時のアニメーションをご覧になったことのある方はどれほどいるのでしょうか？

恐らく大多数の方が普段目にしているように、昨今のWebサイトはどんどん複雑化しています。

デザイナーやエンジニア、サイトを発注したクライアントといった多くの人間が関わる中でこうした複雑なサイトを作成するには共通化した認識が必要不可欠であり、そのために必要となるのがデザインガイドラインなのだそうです。

デザインガイドラインの例

下記に挙げたのは講義内で触れられていたUberのデザインガイドラインで、すっきりと見やすくまとめられていることが分かります。Uberでは2016、2017年と不祥事に苦しみ、2018年に顧客とのコミュニケーションを密にするという指針をもって改めてリブランディングを行ったそうなので、もしかするとそうした思いもこもっているガイドラインなのかもしれませんね。

ハンズオン

さて、デザインガイドラインについてある程度理解が深まったところでハンズオンが始まりました。

今回用いるのはFigmaというツールで、ブラウザ上で共同作業ができるという利点があります。また、左側部分からROOMを選択することで小人数に分かれて編集することも可能です。

今回は下図のように、マンハッタンコードのサイトを題材にFontやSizeといった情報をデザインガイドラインにまとめるハンズオンを行いました。

20分という制限時間が与えられた中でどこまで作りこむことが出来るのか、

私の作成結果がこちらです。

………。

ツールの使い方に手間取ってしまい、題材の内容把握が不十分だったことに全ての敗因はあると考えています……。

書くことのできる余地はまだあり、今回の結果以上にクオリティの高い作品を作ることのできた可能性はあったので、正直なところ悔しいです。今回の反省点を生かし、次回のFigmaを用いたハンズオン時にはよりクオリティの高い作品を仕上げたいと思いました。

私は上述のように苦戦しましたが、傍らで作業していた他の参加者さんは止まることなくさくさくと作業を進めており、内容の詰まった分かりやすい作品に仕上がっていたので感心しました。以下他の参加者さんの成果物です。

画面中央部分の左2つが参加者作品、そして一番右側に表示されているのが解答例です。Font、Size、ボタンなど項目別にまとめられており、解答例と比較しても遜色のないことが分かります。作者曰く、過去の経験を生かして目を通す人にとっても分かりやすい作品を目指したとのこと。ご本人のお言葉通りの作品に仕上がっており、今後作品つくりをする上での学びとなりました。

感想

難しかったという一言に集約されます。しかし、難しかったからこそ次はもう少しまともな作品を作りたいというモチベーションにも繋がりました。

次回は他の参加者さんとお互いの作品についてコメントしあえるくらいの作品を作れるようFigmaの使い方を復習しようと思いました。

結びに

マンハッタンコードでは、エンジニアリングをするビジネスマンを募集しているそうです。今回とても分かりやすいデザインガイドラインの講義を行ってくださったmichikoさんやLilyさんと一緒に働いてみたい！と思った方は採用についてのLPをご覧になってみてはいかがでしょうか。

https://t.co/SKjkIXBtjJ?amp=1