Uxデザイン
スタートアップがスタイルガイドを必要とする理由
経験豊富なデザイナーでさえ、製品の新しいスタイルガイドを作成することは困難です。考えられる設計の方向性は数多くあり、プロセスはすぐに圧倒される可能性があります。の生活 起動 それは非常に忙しく、速く、「完璧は何かを成し遂げることの敵である」、「速く動いて物事を壊す」、「今すぐ立ち上げましょう、後で修正しましょう」などの決まり文句でいっぱいです。
流星（ウェブフレームワーク）
このように変動するスローガンや優先順位の下でスタイルガイドを作成することは困難ですが、製品設計を長期的に成功させるには必要です。
ザ・ グローバルランゲージエクスペリエンス（GEL） BBCは、各コンポーネントの目的とその使用方法を説明しています。
近年、私たちはデザインシステム、スタイルガイド、パターンライブラリ、そして アトミックデザイン 。これらのツールは非常に便利ですが、MVPまたはアプリのデモ用にいくつかの画面を作成するだけの場合、ツールを使用するのはやり過ぎのように感じることがあります。ただし、スタイルガイドがあると、全体的な設計プロセスが改善されるだけでなく、アプリがより堅牢で一貫性のあるものになります。
最初にスタイルガイドの主な利点について説明し、次にスタートアップ環境での課題に焦点を当てましょう。最後に、スタイルガイドが常に生きたドキュメントとして進化する方法について説明します。
スタイルガイドが良いアイデアである5つの理由
1.スタイルガイドはデザインを具体的かつブランディングを明確にします
スタートアップの単一の設計者である（これはよくあることですが）チームの他の人々が行った設計上の決定を何度も確認して異議を唱える機会は多くありません。多くの人が協力して作業しているかもしれませんが、デザインは必ずしも他の人と共有されているわけではありません。これは、最終設計を検証するのは1人だけであることを意味します。
スタイルガイドは、スタートアップに参考のためのガイダンスとドキュメントを提供します。によって行われた設計上の決定のいくつかに挑戦します デザイナー または、アプリのグローバルコンテキストで検証する必要があるため、チームによって。画面上でうまく機能するためにUIコンポーネントを設計することはできません。よく考えられたレイアウトは、ある状況で1つのレイアウトの問題だけでなく、アプリの他の画面で見られる一般的な問題も解決するはずです。
スタイルガイドを使用すると、すべての一般的なデザインスタイル、ブランドガイド、仕様、およびルールを社内のすべての人がワンクリックで利用できるようになります。 URLにアクセスして簡単にアクセスしたり、PDFでダウンロードしたりできます。デザインはすべての人の仕事になります—それはデザインチームの責任だけではありません。これは、製品のUIを改善するより慎重なアプローチです。 
2.スタイルガイドはあなたのデザインをより一貫性のあるものにします
それはあなたのUIデザイン言語のための一種の辞書を提供します。すでに表現したことを伝えたいときは、同じ用語を使用できます。同じことを表現するために別の言葉があったと想像してみてください。
- 「雨が降っています。傘が必要です。」
- 「雨が降っています。傘が必要です」
- 「雨が降っています。傘が必要です」
それは言語を詩的にしますが、理解するのは難しいです。基本的には、サイトやアプリのUIと同じ考え方です。使いやすくするために、実際に何か新しいものを作成するときに、新しい「単語」を作成する必要があります。このように、「製品を通じて繰り返される設計の問題を解決するコンポーネントのみが製品に、続いてスタイルガイドに許可される」という厳格なルールに拘束されます。
一貫性により、製品がよりユーザーフレンドリーになります。非常に使いやすい製品は、販売とより多くのマーケティングエンゲージメントにつながります。
（沿って Murat Gursoy ドリブル）。
3.同じコンポーネントシステムを再利用すると、アプリが使いやすくなります
言語の例のように、一貫性が重要です。各コンポーネントがユーザーに理解されるたびに、それが再び使用され、異なるコンテキストで使用されるとき、人々はすでに以前の動作に精通しているでしょう。ユーザーの操作に関しては、この一貫性により、一般的に製品の使いやすさが向上します。 
コンポーネントベースの設計システムを使用すると、時間を節約でき、製品のアップグレードも簡単になります。特定の状況でコンポーネントにユーザビリティの問題がある場合、そのコンポーネントで発生する可能性のある他のすべての問題が更新されると、修正できます。
4.スタイルガイドにより、アプリを長期的に簡単に開発できます
チームがディスプレイ用の共通コンポーネントを開発しているとき、チームは他の場所でも使用するソリューションを開発しています。これにより、開発時間を節約できます。実際、大幅に節約できます。あなたの会社が成長するとき、これはおそらく新しいスクリーンを作成するのに必要な工数の10倍を節約するでしょう。
5.スタイルガイドは生産効率と革新を促進します
スタイルガイドを作成すると、会社の他のメンバーがデザインにアクセスしやすくなり、利用できるようになります。開発者と デザイナー 彼らはアイデアをより速くそしてより簡単にプロトタイプ化することができます。ブートストラップは、一般的に、生活を楽にすることで賞賛されています 開発者 実用的なプロトタイプを作成するには—スタイルガイドも同じ目的を果たします。これは、設計チームが最初に画面を作成しなくても、開発者が作成できる新しいUIの基本リファレンスを提供します（ただし、設計チームは最終画面のQAまたは品質テストを行う必要があります）。
スタートアップの挑戦、絶え間ない変化のスタイルガイド
スタートアップ環境での設計システムの作成は、より合理化されたプロセスに慣れている成熟した企業のように直線的ではありません。より伝統的な会社では、設計チームは UXリサーチ 、アイデア、実験、そして最終的なブランディングスタイルガイドを考え出します。スタートアップはビジョンや製品要件が常に変化しているとは限らない環境で運営されているため、このプロセスはすべての企業に当てはまるわけではありません。彼らはMVP（最小限の実行可能な製品）、つまりアイデアをテストして潜在的なユーザーに見せるために使用されるアプリの不完全なバージョンと連携します。
ガイドスタイルの作成に関しては、これが問題になる可能性があります。
それが常に進化している環境では、 デザイナー 通常、「固定」されたものと思われるガイドスタイルを作成するのは難しいです。設計者は、作成されているすべてのコンポーネントを実際に検討する時間がありませんが、最後に表示される場合があります。 リリース アプリの。 Facebookは有名なナビゲーション用の「ハンバーガー」メニューを変更しました タブ 彼らが少し成熟したとき。そこにハンバーガーメニューを置いた人は誰でもそれをFacebookスタイルガイドに追加したと思いますか？
また、スタイルガイドを作成する時期ではないと考えるかもしれません。長い目で見れば必要になるかもしれませんが、今ではディスプレイを大量生産することがより重要になっています。さらに、アプリを宣伝するには、いくつかのマーケティングページが必要になります。突然、デザインは賭けを倍増する必要があり、ディスプレイを作成しているときに、会社のブランディングとデザインの一貫性を保つことができるスタイルガイドを持つことの価値がわかり始めます。
問題は、柔軟性と安定性を交換する適切な時期が正確にわからないことです。いつスタイルガイドに焦点を合わせ始めるべきか、そしていつディスプレイの作成に焦点を合わせるべきかを決定する必要があります。最適なアプローチは、ディスプレイの配信と同時にスタイルガイドを作成することです。これにより、両方の長所を活かすことができます。
UIのインスピレーションから始める
始めるのに良い方法は、特にデザイナーでない場合は、ユーザーが反応すると思われる、好きな、またはもっと重要なデザインスタイルの例を収集することです。できるだけ多くの例を収集し、InVision / Niiceフォルダーまたはボードなどに配置します。それらは、デザインの感性と組み合わせて、参照やインスピレーションのために使用できます。後でそれらを基にして、パターンのライブラリを作成できます。
たとえば、エンターテインメント業界のアーティストを宣伝する会社のスタイルガイドに取り組んでいたとき、明るい背景と暗い背景がユーザーに大きな影響を与えるのではないかと考えました。ゲーム/映画/ビジュアルプロダクションの何百もの異なるWebサイトを見て、明るい背景と暗い背景がどのように使用されているかを確認しました。
最も一般的なパターンを強調したチートシートを作成しました。私が特定したパターンの1つは、業界の企業は製品を提示するときに暗い背景を使用する傾向がありますが、マーケティング、eコマース、および店舗の取り組みでは白い背景を使用する傾向があるということでした。
それほど深く掘り下げる必要はありませんが、視覚的な参照があると、スタイルガイドを作成するだけでなく、設計が必要になる可能性のあるいくつかのユースケースを思い出すのにも役立つことがわかりました。収集した参照に満足したら、ビジュアルデザインの作業を開始できます。
（出典： サマーティールシンプソンヒッチ ; Vivek Venkatraman ; アンバー ドリブル）
ソリッドUIコンポーネントの設計
スタートアップで働いている間、少なくとも最初は、ページを作成するよりもコンポーネントを作成する方が難しい。あなたがページをデザインするとき、あなたは通常それがどのように使われるかについての考えを持っています。コンポーネントを設計する場合、必ずしもそうとは限りません。特定のユースケース向けに設計しようとしていますが、それをユニバーサルデザインシステムの一部にしたいので、そのようにアプローチする必要があります。たとえば、3つのボタンを持つサブナビゲーションのコンポーネントを作成したい場合があります。また、4つ、5つ、または10のボタンを使用することもできます。これらのボタンは、モバイル、タブレット、およびデスクトップで機能する必要があります。あなたはそれを超えて考える必要があります。 
あなたは特定のレベルが欲しい 永続性 または 固定電力 コンポーネント内。一般的なコンポーネントはあまり変更しないでください。また、製品全体のさまざまな場所で再利用できる必要があります。たとえば、iOSアプリのみに関心がある場合は、オプションの数やコンテンツの長さに基づいてコンポーネントをテストする必要があります。必ずしも画面サイズではありません。アイデアは、それがアプリの多くの場所のUIで実行可能である場合、それがスタイルガイドの一部になる可能性のあるコンポーネントであることを知っているということです。
スタートアップは、事実上何もないところから始めて、迅速に行動する必要があります。上司は一日の終わりにデザインされたディスプレイを望んでいるかもしれません。つまり、スタイルガイドを実際に開発してからディスプレイをデザインすることはできません。さらに悪いことに、会社のビジョンが変わったために日の目を見ることのないコンポーネントを使用してスタイルガイドを設計している可能性があります。彼らが言うように、今すぐ立ち上げる方が良いです。
優れたスタイルガイドの作成には時間がかかります。それがデザインシステムの基盤となるため、適切に作成する必要があります。スタートアップ環境では、すべてを念頭に置いてスタイルガイドに取り組む必要があります。 ##生きたドキュメントとしてのスタイルガイド
あなたはあなたのスタイルガイドを進行中の作業として考えるべきです。その戦略を理解しようとしているスタートアップとして、あなたは途中であなたのスタイルガイドを理解しなければならないでしょう。 UIのベースになるまで、時間をかけて編集および調整します。便利なアプローチは、スタイルガイドから始めると同時に最初のモックアップから始めることです。お気に入りのソフトウェア（私の場合はSketch）で2つのファイルを開きます。 nombre de páginaと呼ばれるものおよび別のguía de estilo。ランプシェードのデザインに取り組むとき、デザインを構成する要素をスタイルガイドにシードし始めることができます。
これらのガイドに取り組むほど、スタイルガイドに含まれる重要なコンポーネントがいくつかあることにすぐに気付くでしょう。たとえば、アイコンスタイルを決定した場合、すべてのアイコンを最初からガイドに含めることができます。
私は通常、「これまでのアイコン」というセクションを作成します。また、誰かがアイコンを必要とする場合は、新しいアイコンを作成する前に、まずこのセクションを通過する必要があります。
考慮すべき他の明白な項目は、色、セレクター、タイトル、見出し、本文などです。マーケティングに特別なスタイルを使用している場合は、それをスタイルガイドに入れて、適切にタグ付けすることを検討してください。特定のアイテムについて完全に確信が持てない場合は問題ありません。後で機会が訪れたときにデザインシステムのUI要素を改良し、ガイドを正しく更新することができます。忘れないでください、スタイルガイドは 生きている文書 、特にスタートアップで。 
最終的に、ガイドにレイアウトを配置し始めると、すべてのコンポーネントが最終状態に近づくはずのポイントに到達し始めていることがわかります。この部分は、スタイルガイド作成プロセスの重要な瞬間を示しています-今、あなたは祝うことができます！このような成果を祝う良い方法は、ガイドのバージョン1.0のロゴまたはアイコンを作成することです（名前を付けることを検討してください）。
チームがトロフィーに似たものを持てるように、ロゴ/アイコンをステッカーとして印刷する人もいます。これは、私が通常、ガイドを最初に開いてから、必要なインターフェイス用に新しいファイルを作成するという、ガイドを操作する従来の方法に向かうポイントでもあります。
結論
デザイナーとして、できるだけ早くスタイルガイドを作成することで、スタートアップがかなり高い品質基準に準拠していることを確認できます。難しいかもしれませんが、努力する価値はあります。しっかりとしたよくできたガイドは、優れた製品を手に入れるのに役立つだけでなく、開発コストも削減します。
迅速な意思決定が行われ、設計が時々迅速に変更されなければならないペースの速い環境でこれを可能にする方法があります。上で概説したプロセスが役立つことを願っています デザイナー どんなスタートアップでも、複雑さとスピードの課題に対処すると同時に、製品の利益のために強力なスタイルガイドを作成します。
