1
/
5

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

みなさま初めまして。
株式会社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クリエイターボックス


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


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


フロントエンドエンジニア
インフルエンサーのパワーを可視化!実装に磨きをかけるフロントエンド募集!
BitStarでは主にクリエイタープロダクション事業、コンテンツ制作事業、インフルエンサーマーケティング事業を展開し、複数事業の垂直統合とシナジー発揮による価値最大化を目指しています。 ■クリエイタープロダクション事業 クリエイターの“やりたい”を叶え、スターへの道を全面サポートするクリエイタープロダクション「BitStar」を運営。 ソーシャルメディアでの成長支援のみならず、企業タイアップ案件の獲得支援、メディア露出支援、イベント運営や物販、音楽活動のプロデュース、その他手続き業務(コンプライアンス、確定申告、経理、賃貸契約)など、クリエイターを幅広くサポート。さらなる活躍の場を提供し、クリエイターの可能性と成長を最大化します。 ■コンテンツ制作事業 コンテンツスタジオ「BitStar Studio」や、VR/VTuber研究所「BitStar Akihabara Lab」を運営。 「BitStar Studio」は、企業のYouTubeチャンネルの動画制作及び運営などを行うコンテンツスタジオです。コンテンツを通じ、顧客と高いエンゲージメントを構築させブランディング / 認知 / 収益性の向上を実現します。 「BitStar Akihabara Lab」では、VTuberキャラクターの運営や日本最大規模のVTuberイベント「わくわく!VTuberひろば」を運営しています。VTuberイベントにおけるVR/ARエンタメ技術を提供し、キャラクター価値の最大化とXR領域への進出を目指します。 ■インフルエンサーマーケティング事業 インフルエンサーマーケティング「BitStar Ads」を運営。 広告主に対してクリエイターやコンテンツを活用した新しいマーケティングソリューションを提供しています。様々なソーシャルメディアでのクリエイターキャスティングのみならず、クリエイティブの制作、広告運用、番組制作、イベント協賛など、認知から購買、オンラインからオフラインに至るまでのトータルソリューションをサポートします。
株式会社BitStar


Railsエンジニア
「BitStarでエンジニアをやっていた」というのがいつか大きな財産になる
BitStarでは主にクリエイタープロダクション事業、コンテンツ制作事業、インフルエンサーマーケティング事業を展開し、複数事業の垂直統合とシナジー発揮による価値最大化を目指しています。 ■クリエイタープロダクション事業 クリエイターの“やりたい”を叶え、スターへの道を全面サポートするクリエイタープロダクション「BitStar」を運営。 ソーシャルメディアでの成長支援のみならず、企業タイアップ案件の獲得支援、メディア露出支援、イベント運営や物販、音楽活動のプロデュース、その他手続き業務(コンプライアンス、確定申告、経理、賃貸契約)など、クリエイターを幅広くサポート。さらなる活躍の場を提供し、クリエイターの可能性と成長を最大化します。 ■コンテンツ制作事業 コンテンツスタジオ「BitStar Studio」や、VR/VTuber研究所「BitStar Akihabara Lab」を運営。 「BitStar Studio」は、企業のYouTubeチャンネルの動画制作及び運営などを行うコンテンツスタジオです。コンテンツを通じ、顧客と高いエンゲージメントを構築させブランディング / 認知 / 収益性の向上を実現します。 「BitStar Akihabara Lab」では、VTuberキャラクターの運営や日本最大規模のVTuberイベント「わくわく!VTuberひろば」を運営しています。VTuberイベントにおけるVR/ARエンタメ技術を提供し、キャラクター価値の最大化とXR領域への進出を目指します。 ■インフルエンサーマーケティング事業 インフルエンサーマーケティング「BitStar Ads」を運営。 広告主に対してクリエイターやコンテンツを活用した新しいマーケティングソリューションを提供しています。様々なソーシャルメディアでのクリエイターキャスティングのみならず、クリエイティブの制作、広告運用、番組制作、イベント協賛など、認知から購買、オンラインからオフラインに至るまでのトータルソリューションをサポートします。
株式会社BitStar
株式会社BitStar's job postings
5 Likes
5 Likes

Weekly ranking

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