「デザインガイドライン」はデザイナー・エンジニアの救世主なのです。

みなさま初めまして。
株式会社BitStarでデザイナーをしている菊地です。

同社のデザイナー採用第1号ですので、社内のデザイナーは私一人です。
私が入るまでは社内にデザイナーはいなかったので、デザインの積み残しが多少なりとも存在します。

そこで私のサイドミッションとして、「自社サービスのUI/UXの向上」を目指してみることにしました。
ですが、

・デザイナーは私一人。リソースに限りがあります。
・エンジニアも他の開発が優先で、UIについて細かな話ができない。
・すでにリリース済みのサービスの全体改修となるとだいぶ先になりそう。
・でも、リリース済みのサービスに関しては随時の機能追加などがイケてないデザインで追加されている

などの課題があります。そこで、大規模サービスなどで採用されている「デザインガイドライン」の導入を検討することにしました。

いきなり全体改修でなく、まずは今後追加される機能やページについてこちらで作成した「デザインガイドライン」に沿って作業を行ってもらえば今後の作業フローになれるだろうし、
「デザインガイドライン」に沿って作業してもらえば、UIについて話さなくても良いし、後の全体改修の工数も減るし、チームとして、「自社サービスのUI/UXの向上」について共通認識を持ちやすくなる。


ということで、私の復習も兼ねて、もし同じような状況に面している方のためになれたらと思い

1・デザインガイドラインの有用性
2・デザインガイドラインとは

について記していきます。


1.デザインガイドラインの有用性

「デザインガイドライン」はデザイナー・エンジニアの救世主
―――――

チーム開発においてエンジニアもデザイナーも自身の作業に集中しているタイミングで作業を中断しなくてはいけない状況というのは作業効率・やる気の面でも健全ではありません。

そこであなたの作業を中断させず爆速で仕事を敢行するために必要なのが「デザインガイドライン」です。

「デザインガイドライン」と聞くと、デザイナーの領域に聞こえるかもしれませんが、
「デザインガイドライン」とは「誰でもこのガイドラインを見ればどうやってデザインするかがわかる指針」となるものです。
ですので、

デザイナにとっては
・これを作っておけば自分がいちいち細かな部分まで確認しなくてもイケてない部分が出てこない

エンジニアにとっては
・これがあれば、細かな部分や急な仕様変更があった場合などもデザイナに意見を聞くために作業を中断する必要がなく作業に集中できる

こんな素晴らしいものは作らない他ありません。
もし、あなたの作業環境に「デザインガイドライン」がない場合はデザイナーに作成を依頼しましょう。

デザイナーがチームにいない場合は、下記の「デザインガイドラインとは」を参考にして作ってみるのもいいのではないでしょうか。


2.デザインガイドラインとは

デザインの骨組み

―――――

デザインガイドラインは、配色やフォントや見出しルールなど、デザイン上の共通項目をまとめたものです。
ルールを策定することで、ブランドイメージを保持し、見た目の印象を統一することができます。
また、更新作業時にも一定のトーン&マナーを保持でき、大規模案件や長期的に運用が必要なWebサイトなどで効果を発揮します。


(1)サービス全体の共通ルール

デザインガイドラインに記すべき情報については大まかに下記の項目になります。

  1. 配色
    ・ベースカラー
    ・サブカラー
    ・アクセントカラー
    ・その他背景色やホバー時の色などサービスによって追加修正が可能なように
  2. フォントの指定
    ・書体
    ・サイズ
    ・色など
  3. 見出しルール
  4. バナーサイズ
  5. アイコン
  6. ロゴのルール
  7. 余白の取り方
  8. 禁止事項など

これらのルールを記載していくのですが、このままだと様々なパターンに対応しにくい&更新が行いずらいのでこれらのルールをさらに細分化しコンポーネント別でまとめていきます。


(2)コンポーネント別に抽出し、細分化したルール付け

各画面のコンポーネント別に細かなルールづけを行なっていきます。


(3)エンジニアなどのフィードバックからチームに最適化したデザインガイドラインにカスタマイズ

上記で作成したガイドラインについて、実際に使用するエンジニアやデザイナーのフィードバックをもとに改善・最適化していきましょう。

ガイドラインのセオリーを理解するために、一般的にどのように作成されているのかを下記ページなどを参考にするのもいいかもしれません。

Human Interface Guidelines iOS
Material Design


・デザインガイドライン作成のお役立ちサービス

・既存のWEBサイトのURLを入力すると自動でガイドラインを作成してくれるサービス
http://stylifyme.com/

ブラウザー上でスタイルガイドが作れるFrontifyを試してみた|Webクリエイターボックス


デザイナーは一人ですが、ただデザインを良くしようとかではなくどのようにしてチームとしてイケてるサービス開発を行えるか最優先で考えております。


ぜひご興味がある方はぜひお待ちしております!


フロントエンドエンジニア
インフルエンサーのパワーを可視化!実装に磨きをかけるフロントエンド募集!
「インフルエンサーが活躍できるインフラを創る」というビジョンの元、インフルエンサーマーケティングのトータルソリューションを展開しています。 直近3カ年の売上成長率1,500%は国内でもトップクラスとなっており、翌年2018年8月には約13億円の大型資金調達を実施。2019年2月には国内最大級ファッションショーの商標を取得ならびに協業をスタートし、同3月にはライバー事業も買収しました。現在、さらなるチャレンジと成長に向け、メンバーを募集しています。 【事業領域・提供サービス】 ▼インフルエンサーマーケティング/広告領域 ・マッチングプラットフォーム「BitStar」 ・プランニング・分析ツール「Influencer Power Ranking」 ▼インフルエンサープロダクション領域 ・プロダクション「E-DGE」 ・ファンコミュニティサービス「costar」 ・札幌コレクション事業 ・ライバー事業「メゾワン」 ▼メディア制作領域 ・大手事業会社や、テレビ局・新聞社などのメディア企業と協業したYouTubeチャンネル運営 ・バーチャルYouTuber(VTuber)事業 参照 ・BitStarがDSLDO社より国内最大級のファッションショーの一つである「SAPPORO COLLECTION」の商標を取得 https://prtimes.jp/main/html/rd/p/000000066.000015232.html ・BitStarが総額13億円の資金調達を実施し、インフルエンサーが活躍できるインフラ構想を加速。事業会社と戦略的協業を開始 https://prtimes.jp/main/html/rd/p/000000050.000015232.html ・BitStarがデロイトトーマツ主催「2018年日本テクノロジー Fast 50」において4位を受賞。インフルエンサーが実施する企業タイアップ数が3,500件を突破 https://prtimes.jp/main/html/rd/p/000000055.000015232.html ・BitStarが"正社員YouTuber"制度をつくり採用を開始! https://prtimes.jp/main/html/rd/p/000000073.000015232.html
株式会社BitStar


Railsエンジニア
「BitStarでエンジニアをやっていた」というのがいつか大きな財産になる
「インフルエンサーが活躍できるインフラを創る」というビジョンの元、インフルエンサーマーケティングのトータルソリューションを展開しています。 直近3カ年の売上成長率1,500%は国内でもトップクラスとなっており、翌年2018年8月には約13億円の大型資金調達を実施。2019年2月には国内最大級ファッションショーの商標を取得ならびに協業をスタートし、同3月にはライバー事業も買収しました。現在、さらなるチャレンジと成長に向け、メンバーを募集しています。 【事業領域・提供サービス】 ▼インフルエンサーマーケティング/広告領域 ・マッチングプラットフォーム「BitStar」 ・プランニング・分析ツール「Influencer Power Ranking」 ▼インフルエンサープロダクション領域 ・プロダクション「E-DGE」 ・ファンコミュニティサービス「costar」 ・札幌コレクション事業 ・ライバー事業「メゾワン」 ▼メディア制作領域 ・大手事業会社や、テレビ局・新聞社などのメディア企業と協業したYouTubeチャンネル運営 ・バーチャルYouTuber(VTuber)事業 参照 ・BitStarがDSLDO社より国内最大級のファッションショーの一つである「SAPPORO COLLECTION」の商標を取得 https://prtimes.jp/main/html/rd/p/000000066.000015232.html ・BitStarが総額13億円の資金調達を実施し、インフルエンサーが活躍できるインフラ構想を加速。事業会社と戦略的協業を開始 https://prtimes.jp/main/html/rd/p/000000050.000015232.html ・BitStarがデロイトトーマツ主催「2018年日本テクノロジー Fast 50」において4位を受賞。インフルエンサーが実施する企業タイアップ数が3,500件を突破 https://prtimes.jp/main/html/rd/p/000000055.000015232.html ・BitStarが"正社員YouTuber"制度をつくり採用を開始! https://prtimes.jp/main/html/rd/p/000000073.000015232.html
株式会社BitStar
株式会社BitStar's job postings
4 Likes
4 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more