スタートアップがスタイルガイドを必要とする理由
公開: 2022-03-11ベテランのデザイナーでさえ、特定の製品の新しいスタイルガイドを作成することは困難です。考えられる設計の方向性はたくさんあり、プロセスはすぐに圧倒される可能性があります。 スタートアップの生活は忙しく、速く、「完璧は完了の敵」、「速く動いて物事を壊す」、「今すぐ起動して後で修正する」などの決まり文句でいっぱいです。
そのようなスローガンと変動する優先順位の下でスタイルガイドを考え出すことは困難ですが、製品のデザインが長期的に成功するためには必須です。
近年、デザインシステム、スタイルガイド、パターンライブラリ、アトミックデザインについて多くのことを耳にしました。 これらのツールは非常に便利ですが、MVP用にいくつかの画面を作成したり、アプリをデモしたりするだけの場合は、これらのツールを使用するのはやり過ぎのように思えます。 ただし、スタイルガイドがあると、一般的なデザインプロセスが改善されるだけでなく、アプリがより堅牢で一貫性のあるものになります。
最初にスタイルガイドの主な利点について説明し、次に困難なスタートアップ環境に触れてみましょう。 最後に、スタイルガイドが生きたドキュメントとして常に進化している方法について説明します。
スタイルガイドが良いアイデアである5つの理由
1.スタイルガイドはデザインを具体的でブランディングを明確にします
スタートアップの孤独なデザイナーとして（これはよくあることですが）、チームの他のメンバーが行ったデザインの決定を確認して異議を唱える機会は多くありません。 誰もが共同作業をしているかもしれませんが、デザインは必ずしも他の人と共有されているわけではありません。 これは、最終的な設計を検証するのは1人だけであることを意味します。
スタイルガイドは、スタートアップに参照用のガイダンスとドキュメントを提供します。 アプリのグローバルコンテキストで検証する必要があるため、デザイナーまたはチームが行ったデザインの選択の一部に挑戦します。 1つの画面でうまく機能するためにUIコンポーネントを設計しても、UIコンポーネントはカットされません。 よく考えられたデザインは、ある状況での単一のデザインの問題と、アプリの他の画面で見られる広範な問題を解決する必要があります。
スタイルガイドを使用すると、全体的なデザインスタイル、ブランドガイドライン、仕様、およびルールを会社の全員が利用できるようになります。 クリックするだけです。 URLにアクセスして、オンラインスタイルガイドに簡単にアクセスしたり、PDFをダウンロードしたりできます。 デザインはすべての人の仕事になります—それはもはやデザインチームの唯一の責任ではありません。 これは、製品のユーザーインターフェイスを改善する賢明なアプローチです。
2.スタイルガイドはあなたのデザインをより一貫性のあるものにします
それはあなたのUIデザイン言語のためのある種の辞書を提供します。 すでに表現したことを伝えたい場合は、同じ用語を使用できます。 同じことを表現するために少し違う言葉があったと想像してみてください。
- "雨が降っている; 傘が必要です。」
- 「雨が降っています、私は私のumbrellolが必要です」
- 「雨が降っています。傘が必要です」
それは言語を詩的にするかもしれませんが、理解するのは難しいです。 基本的に、それはサイトやアプリのUIと同じ考えです。 使いやすさのために、あなたが本当に何か新しいものを作成しているときだけ、あなたは新しい「言葉」を発明するべきです。 このように、「製品全体で繰り返し設計の問題を解決するコンポーネントのみが製品に、続いてスタイルガイドに入ることができる」という厳格なルールに拘束されます。
一貫性により、製品はよりユーザーフレンドリーになります。 非常に使いやすい製品は、より多くのエンゲージメントと売上につながる可能性があります。
3.同じシステムコンポーネントを再利用すると、アプリが使いやすくなります
言語の例のように、一貫性が重要です。 各コンポーネントがユーザーに理解されると、別のコンテキストで再び使用されると、人々はすでにその動作に精通しているでしょう。 ユーザーインタラクションに関しては、この一貫性により、製品の全体的なユーザビリティが向上します。
コンポーネントベースの設計システムを使用すると、コストを節約でき、製品の更新も容易になります。 特定の状況でコンポーネントに使いやすさの問題がある場合は、一度修正すれば、そのコンポーネントに関する他のすべての潜在的な問題も更新されます。
4.スタイルガイドにより、長期的にはアプリの開発が迅速化されます
チームが画面の共通コンポーネントを開発しているときは、他の場所でも使用するソリューションを開発しています。 これにより、開発時間が大幅に節約されます。 あなたの会社が規模を拡大するとき、これは新しいスクリーンを構築するのに必要な工数の10倍も節約することを意味するかもしれません。
5.スタイルガイドは生産効率と革新を促進します
スタイルガイドを作成すると、会社の他のメンバーがデザインにアクセスしやすくなり、すぐに利用できるようになります。 開発者と設計者は、アイデアのプロトタイプをより速く、より簡単に作成できます。 Bootstrapは、開発者が実用的なプロトタイプを簡単に作成できるようにすることでしばしば称賛されます。スタイルガイドは同じ目的を果たします。 これは、設計チームが最初に画面を作成する必要なしに、開発者によって構築される新しいUIのリファレンス基盤を提供します（設計チームは最終画面をQAする必要があります）。
スタートアップの挑戦、フラックスのスタイルガイド
スタートアップ環境での設計システムの作成は、より合理化されたプロセスに慣れているより成熟した会社の場合ほど直線的ではありません。 より伝統的な会社では、デザインチームは、UXの調査、構想、実験を行い、最終的なブランドスタイルガイドを作成します。 このプロセスは、すべての企業に適しているわけではありません。 スタートアップは、彼らのビジョンと製品の要件が常に流動的である環境で働いています。 彼らはMVP（最小限の実行可能な製品）、彼らのアイデアをテストし、ユーザーにその可能性を示すために使用される彼らのアプリの不完全なバージョンで動作します。
スタイルガイドの作成に関しては、これが問題になる可能性があります。
常に進化している環境では、デザイナーは通常、ある程度「修正」されているはずのスタイルガイドを作成するのに苦労しています。 設計者は、作成されているすべてのコンポーネントを完全に検討する時間がない場合がありますが、それらはアプリの次のリリースで終了する可能性があります。 Facebookは、少し成熟したときに、ハンバーガーメニューをタブナビゲーションに交換したことで有名です。 そもそもハンバーガーメニューを置いた人がFacebookのスタイルガイドにも追加したと思いますか？
スタイルガイドを作成する時期ではないと考えるかもしれません。 長期的には必要になることに気付くかもしれませんが、今のところ、アプリのユーザビリティテストのために画面をクランクアウトすることがより重要です。 さらに、アプリを宣伝するためのマーケティングページも必要になります。 突然、デザインを立ち上げる必要があります。画面を作成していると、デザインと会社のブランドの一貫性を保つことができるスタイルガイドを持つことの価値がわかり始めます。
問題は、柔軟性と安定性を交換するのに適切な時期がいつか正確にわからないことです。 スタイルガイドを開始するタイミングと、画面の作成に集中するタイミングを決定する必要があります。 最適なアプローチは、画面を配信すると同時にスタイルガイドを作成することです。これにより、両方の長所を活かすことができる場合があります。
UIのインスピレーションから始める
始めるのに良い方法は、特にデザイナーでない場合は、好きなデザインスタイルの例を収集することです。さらに重要なのは、ユーザーが反応すると思うものを収集することです。 できるだけ多くの例を集めて、フォルダ/InVisionボード/Niiceボードなどに入れてください。 それらは、デザインの感性とともに、参照やインスピレーションとして使用できます。 後でそれらに基づいて構築し、パターンライブラリを作成できます。
たとえば、私がエンターテインメント業界のアーティストを宣伝する会社のスタイルガイドに取り組んでいたとき、明るい背景と暗い背景のどちらがユーザーに大きな影響を与えるのか疑問に思いました。 ゲーム/映画/ビジュアル制作の何百もの異なるWebサイトを見て、それらが暗い背景と明るい背景をどのように使用しているかを確認しました。
最も一般的なパターンを強調したリファレンスシートを作成しました。 私が特定したパターンの1つは、その業界の企業は製品を提示するときに暗い背景を使用する傾向がありましたが、マーケティング活動、eコマース、およびショップでは白い背景を使用する傾向がありました。
それほど深く掘り下げる必要はありませんが、視覚的な参照があると、スタイルガイドを作成するだけでなく、設計が必要になる可能性のあるいくつかのユースケースを思い出すのにも役立ちます。 収集した参照に満足したら、ビジュアルデザインの作業を開始できます。
ソリッドUIコンポーネントの設計
スタートアップで働いている間、少なくとも最初は、ページを作成するよりもコンポーネントを作成するのが難しい。 ページをデザインするとき、それがどのように使用されるかについてよく考えます。 コンポーネントを設計する場合、必ずしもそうとは限りません。 特定のユースケース向けに設計しようとしていますが、それをユニバーサルデザインシステムの一部にしたいので、そのようにアプローチする必要があります。 たとえば、3つのボタンを持つサブナビゲーションコンポーネントを作成したい場合があります。 また、4つ、5つ、または10個のボタンで動作する必要がある場合があり、モバイル、タブレット、およびデスクトップで動作する必要があります。 あなたは先を考える必要があります。
コンポーネントに一定レベルの持続性または持続力が必要です。 一般的なコンポーネントは頻繁に変更するべきではなく、製品全体の多くの場所で再利用できる必要があります。 たとえば、iOSアプリのみに関心がある場合は、オプションの数やコンテンツの長さに基づいてコンポーネントをテストする必要があります。必ずしも画面サイズではありません。 アイデアは、それがアプリの多くの場所のUIで実行可能である場合、それがスタイルガイドの一部になる可能性のあるコンポーネントであることを知っているということです。
スタートアップは、実質的に何もないところから始めて、すぐに行動する必要があります。 上司は一日の終わりまでにデザインされた画面を望んでいるかもしれません。 つまり、スタイルガイド全体を実際に開発してから画面を思いつくことはできません。 さらに悪いことに、会社のビジョンが変わったために日の目を見ることのないコンポーネントを使用してスタイルガイドを設計している可能性があります。 彼らが言うように、今出荷する方が良いです。
優れたスタイルガイドの作成には時間がかかります。それがデザインシステムの基盤となるため、適切に作成する必要があります。 スタートアップ環境では、すべてを連携させてスタイルガイドに取り組む必要があります。
生きたドキュメントとしてのスタイルガイド
あなたは進行中の作業としてあなたのスタイルガイドについて考える必要があります。 スタートアップがその戦略を理解しているように、あなたはあなたが進むにつれてあなたのスタイルガイドを理解するでしょう。 それを編集し、UIの基盤になるまで時間をかけて調整します。 便利なアプローチの1つは、スタイルガイドを開始すると同時に最初のモックアップを開始することです。 お気に入りのソフトウェア（私の場合はSketch）で2つのファイルを開きます。 1つはpage nameと呼ばれ、もう1つはstyleguideと呼ばれます。 画面デザインに取り組んでいるときに、デザインを構成する要素を使用してスタイルガイドのシードを開始できます。
これらをさらに実行し始めると、いくつかのコンポーネントがスタイルガイドに含めるための主要な候補であることに早い段階で気付くでしょう。 たとえば、アイコンスタイルを決定した場合は、すべてのアイコンを最初からスタイルガイドに入れることができます。
私は通常、「これまでに作成されたアイコン」というセクションを作成します。 ある時点で誰かがアイコンを必要とする場合、新しいアイコンを作成する前に、まずこのセクションを確認する必要があります。
考慮すべきその他の明らかな項目は、色、ボタン、セレクター、タイトル、ヘッダー、本文などです。特にマーケティングにスタイルを使用している場合は、スタイルガイドに入れて適切にラベル付けすることを検討できます。 特定のアイテムに完全に落ち着かなくても大丈夫です。 後で機会が生じたときにデザインシステムのUI要素を改良し、ガイドを適切に更新できます。 特にスタートアップでは、スタイルガイドは生きたドキュメントであることを忘れないでください。
最終的に、ガイドにレイアウトを配置し始めると、すべてのコンポーネントが最終状態に近づくはずのポイントに到達し始めていることがわかります。 この部分は、スタイルガイド作成プロセスの転換点を示しています。これで、お祝いをすることができます。 このようなマイルストーンを祝う良い方法は、スタイルガイドの1.0バージョンのロゴまたはアイコンを作成することです（名前を付けることを検討してください）。
チームが一種のトロフィーを持っているように、ロゴ/アイコンをステッカーとして印刷するところまで行く人もいます。 それはまた、私が通常、最初にそのスタイルガイドを開いてから、実行する必要のあるインターフェイス用の新しいファイルを作成することによって、ガイドを操作する従来の方法に戻るポイントでもあります。
結論
デザイナーとして、できるだけ早くスタイルガイドを作成することで、スタートアップがより高い水準の品質に準拠していることを確認できます。 難しいかもしれませんが、努力する価値は十分にあります。 堅実でバランスの取れたスタイルガイドは、より良い製品を手に入れるのに役立つだけでなく、開発コストの削減にも役立ちます。
迅速な意思決定が行われ、時には設計を迅速に変更する必要があるペースの速い環境でも、それを実現する方法があります。 うまくいけば、上記のプロセスが、スタートアップの設計者が複雑さとスピードの課題に対処するのに役立つと同時に、製品の利益のための堅牢なスタイルガイドを作成するのに役立つことを願っています。
•••
Toptal Designブログでさらに読む：
- eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
- 製品設計における人間中心の設計の重要性
- 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
- モバイルインターフェースのヒューリスティック原則
- 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法