Nextstage Nite vol.2 イベントレポート 実践されるデザインガイドライン

 

みなさんは、デザインガイドラインを作った経験はありますか?

情報更新や、機能追加がめまぐるしいWebサービスを長期運用してくためにも、ガイドラインの作成・運用を課題に感じている人も多いかと思います。

昨今、Web上に公開されているガイドラインも増えてきましたが、自社サービスの規模とはあわなかった、求めてるガイドラインと違ったなんてこともしばしばあります。

実際に今、運用されているデザインガイドラインがどんなものなのか、どんな風にガイドラインが作られて、運用されているのか、ものすごく気になる・・!

そこで、実際のモノを見ながら、直接話を聞いてみよう!という趣旨の元、Nextstage Nite vol.2 実践されるデザインガイドラインが開催されました。

Nextstage Nite vol.2 実践されるデザインガイドライン

10月18日(水)、本社2階のイベントスペースで開催されたNextstage Nite vol.2。

ベーシック以外には、GREE、WANTEDLY、CrowdWorks、BIZREACHの4社が登壇し、それぞれのサービスに関わるデザインガイドラインについて、発表しました。

今回のイベントのように、デザイナー同士の交流や知見を広げる場に活用できる、イベントスペースが会社の中にあるってありがたいなぁと感じます。

それでは、各社どんなガイドラインを作って運用しているのか、発表内容を一部ご紹介します。

Marketer’s STOREのガイドライン​​​​​​

ベーシックデザイン部からは、橋本が登壇。弊社サービス、Marketer’s STOREのデザインガイドラインについて発表しました。

Marketer’s STOREには、リリース時からデザインガイドラインが存在していましたが、何か新しい機能を追加したい場合に、デザインガイドラインに矛盾が生じてしまう、といった課題がありました。

課題解決のため、新しくデザインガイドラインを作成する際に気をつけたのは、”継続して使う・運用を考える”、”わかりやすい”、”変化につよい”こと。

本番のCSSにあとから修正を加えても、ガイドラインのCSSも同じように修正されるような形にしたい、と今後の運用の仕方についても触れる場面がありました。

作ったガイドラインが風化してしまわないように、流動的に運用されることを考慮する背景には、弊社の特徴も関係しています。

ベーシックは、100名規模の会社ながら、To BからTo Cまで多様かつ多くのサービスを立ち上げ、運営しています。

新規事業の立ち上げも盛んな社風柄、デザイナーが注力すべき場所にコストをかけるため、日々のプロダクトの運用の仕方を見直したり、不要なコストの削減ができないか、デザイナー自身も考え、実践する環境があります。

そんな環境から生まれたデザインガイドラインについて、実際のブラウザを見せながら詳細な説明が行われました。

登壇資料はこちらから

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

GREE からは、住まいと暮らしのメディア、LIMIAを運営している岡部さんにお話いただきました。

「闇深めだったサービスのスタイルガイド作成までの真実」と題して、話はLIMIA立ち上げ当初の話に。

当時は締め切りやコンセプトの途中変更など、とにかく闇が深かったと語ります。

複数のデザイナーがそれぞれ同時期に画面を作っていったため、様々な種類のデザインパーツが存在する状態だったそうで、見かねたエンジニアが「Interface Inventory」という、要素を分類・整理して記録する方法を提案したそう。

全てのパーツを洗い出して、分類するのは非常に忍耐のいる作業だったそうですが、その作業があったおかげで、パーツごとに優先順位をつけて修正、整理していけたそうです。

私もURLから、Keynoteのテンプレートをダウンロードして見ましたが、パーツの分類作業に非常に使えそうでした。

登壇資料はこちらから

WANTEDLY サービスのブランドガイドライン

続いてWANTEDLYの青山さんから、ブランドに関するスタイルガイドについて語られました。

青山さんが入社したときは、1人だったデザインチームも、4人になり、WANTEDLYの名がつくサービスも増えたタイミングで、ブランド全体のスタイルガイドを作ることになったそう。

ガイドライン、という言葉には、義務感ややらされ感を感じる、という青山さん。

ガイドラインが気持ちよく運用されるために、スタイルガイドの名称にもこだわりを持って「WANTEDLY BRAND STANDARD」と名付けたといいます。

また、ガイドラインができるまでは、日常的に皆が良いと思ったものを貯める仕組み(Githubのやり取りの中で良いものが生まれたら、ラベルを付けるそう)があったそうで、日々の作業の取り込み方が非常に上手いと感じました。

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

CrowdWorksからは、UXデザイングループから広瀬さん、上田さんの2名が登壇。

現在製作中のデザインガイドラインについて発表していただきました。

サービスリリースの2012年から、ロゴのリニューアル、スマホアプリ化など順を追ってサービスの変化が説明される中、統一されないデザイン・放置される情報設計・濫用されるUIコンポーネントなど、課題ばかりだったと言います。

世界観の違うLPと、それらへのバナーが共存するトップページ、その場その場の目的達成するためだけのデザインに陥っていた…というのは意外とよくある話なのではないでしょうか。

課題解決のために、どのプラットフォームであっても守られるべき指針の作成や、周囲の理解を得るための社内ワークショップの開催を行っているそうです。

登壇資料はこちら

HRMOSのデザイン

最後に登壇してくださったのは、BIZREACHからフロントエンドエンジニアの浅井さん。

人事採用業務を一元管理できるサービス、HRMOSの事例を紹介していただきました。

題して、「動くスタイルガイド」。

HRMOSでは、デザイナーがSketchでスタイルガイドを作成・更新していたそうなのですが、アップデートの手間や、細かいアニメーションについての指定などが課題でした。

そこでjavascriptを使って、UIコンポーネント集をアプリ化。インタラクション含めた挙動の確認をスタイルガイドからできるようにしたそう。

また、UIとインタラクションは、デザイナーとフロントエンドエンジニア、ロジックに関わる画面動作はエンジニアと、ガイドラインを定める範囲をお互い分けたことで、それぞれの業務に集中しやすくもなったと言います。

アプリ化までいくと、スタイルガイドの更新に必ずフロントエンドエンジニアが必要になるとのことだったので、そういった運用コストも加味して、どれくらいの規模のガイドラインを作る必要があるのか考える必要がありそうですね。

登壇資料はこちら

おわりに

今回は、Nextstage Nite vol.2 イベントレポートをお届けしました。

ガイドラインつくりたいけど、どのくらいの期間をもってやるものなんだろう、そもそもどうやってやるんだろう、といった悩みは解決されたでしょうか。

私自身も、弊社サービスのガイドラインを悩みながら制作している最中だった

りするので、今回のイベントを通して、デザインガイドラインとどう向き合ったらいいか、刺激をもらうことができたと感じています。

会社の外もよく見る・知りにいくことの大切さを実感しますね。

株式会社ベーシックでは一緒に働く仲間を募集しています。

辻 蒔菜

辻 蒔菜

東京造形大学でWebデザインやWebプログラミングなどの基礎的な技術を習得。映像メディア表現、インターフェースデザインなどについても学ぶ。在学中は地域活性化のためにきぐるみの中に入って子供とたわむれたりしていた。 2017年4月に新卒でbasicに入社後、CIを始めとしたデザインを担当している。 アリクイ好きが高じて、家にアリクイグッズが増えつつある。

Recommend Articles

1

バナーのデザインで悩んだ時に参考にしたい5つのパターン

簡単なようで難しいバナーをデザインすることって難しいですよね。小さいスペースに必要な要素を入れなければならないので、悩んだことがある方も多いのではないでしょうか?この記事ではバナーデザインを取り上げるだけではなく、どんなところが参考になるのかを合わせてご紹介します!バナーのアイデアで煮詰まっているデザイナーさんや、デザインの勉強のためにバナーのコピーをしようと思っている学生さんは是非読んでみてください。

2

簡単にオシャレで見やすくなるスライドの作り方

この記事では、デザイナーではない方や新人のデザイナーさんがプレゼンテーション(パワーポイントなど)のスライド作成で困ったときに、簡単にオシャレで見やすいスライドを作る方法をご紹介します! 法則に則って作成すれば、簡単にキレイなスライドを作ることが出来ますよ!

3

【イベントレポート】UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」

サービスの設計をする際にペルソナを決めるのはもちろんですが、それをチームでうまく共有し活用するのは想像以上に難しいですよね。チーム内でうまく共有できず、いつの間にかペルソナが忘れられてしまっている…なんてことは少なくないのではないでしょうか。そうしたペルソナ作成の難しさを解決するヒントをさぐるため、先日、株式会社アイ・エム・ジェイ R&D室主催のイベント「UX、デザイン思考、サービスデザインのための『チームで使える共感ペルソナ™入門 』」に参加してきました!

4

別に最初から正社員じゃなくても良い〜未経験からWebデザイナーになるまで私が行ったこと〜

今年の7月からデザイナーとして働いているのですが、実は元からデザイナーだったのではなく、アルバイトとしてベーシックに入社したという経緯があります。なぜ正社員ではなく、アルバイトからスタートして、どのような経緯でデザイナーにコンバートしたのかをここにシェアして、今後未経験の業界に転職を考えている人、特にWebデザイナーへの転職を考えている人への参考になればと思います。

5

「実績や得たノウハウを発信するところまでがシゴトの報酬」 iOSエンジニア堤修一さんの仕事論に迫る| dotFes 2016 shibuya

2016年10月からサンフランシスコでFyusion社でiOSエンジニアとして活躍されている堤修一さん。今回はdotFes 2016で行われた「デザイン×ライフスタイル 制作者として海外で働くということ」というテーマのセッションで、海外で働くためのワークスタイルを語られました。

Basic Designers’ Portfolio

ferret

ferret One

phocase

留学Debut

Designer Wanted!

  • Kunihiro Okamura
  • Hikaru Kobayashi
  • You
  • Fumiya Shibusawa
  • Yuki Asamoto

この内容で送信します。よろしいですか?