スタイルガイド10選こんにちは!デザイナーの佐々木です。花粉症が辛い季節になってきましたが、頑張って乗り切りたいところです。最近アイスリーデザインでは、デザインシステムやスタイルガイドの作成を進めています。一つ「これだ!」というスタイルを決めるためには、様々な議論や考慮を重ねて、頭をひねって考える必要があります。ボタンのサイズ一つ決めるだけでも、そのプロセスではデザイナーそれぞれのモック作成時の癖に気付いたり、今まで考えもしなかった発見がありとても勉強になります。今回は、実際に参考にした公開されているものから10のスタイルガイドを選びました。Systemhttps://www.lightningdesignsystem.com/CRM・営業支援のクラウドサービスを提供するSalesforceのデザインシステムです。“一貫性”といったデザインの基本的原則から、UIコンポーネント、コードまでの一連が展開されています。SketchのUIキットやアイコンまでが用意されていて圧倒的なコンテンツ量となっています。MailChimpメール配信サービスのMailChimpは様々なタイプのスタイルガイドを公開しています。ライティングに関するガイドラインや、メールでの受け答えのベストプラクティスはメールサービスならではのコンテンツですね。MailChimpのサイトはいつ訪れても新しい発見があり、デザイナーには嬉しいコンテンツづくりがされているように思います。Guidehttps://marvelapp.com/styleguide/overview/introductionプロトタイピングツールを提供しているMarvelのスタイルガイド。命名規則といったコーディングガイドラインから、ポップな世界観を保ちながらも厳選されたUIコンポーネントまで展開されています。今後、オープンソース化の予定があるようです。Jankordによる縦長の1ページに収められたリビングスタイルガイドのテンプレート。基本的なHTML要素を網羅した構成になっており、カスタマイズしてすぐに使用できるよう考えられているようです。Designの考え方に基づいて設計されたパターンライブラリーです。Frostが参画しています。Systemhttps://vmware.github.io/clarity/コンピューターの仮装化ソフトウェアを提供する”VMware”が公開しているデザインシステム。利用までが想定されています。コンポーネントの種類も豊富です。Developerhttps://developer.spotify.com/design/少し変わり種ですが、Spotifyのブランドガイドラインです。ロゴの利用規定、カラーパターン、フォントまでが指定されています。グリッドがとても綺麗で、コンプレクション・リダクションなデザインがどのように規定されているか垣間見ることができます。Guidehttps://www.starbucks.com/static/reference/styleguide/少し時間が経っていますがよくリファレンスされるスタバのスタイルガイドです。一通りのスタイルが用意されていて自社でスタイルガイドを用意する際には取り入れやすいのではないかと思います。レイアウトのパターンが豊富です。Officeのスタイルガイド。AngularJSといったJSフレームワークのリソースまでがオープンソースで用意されています。各UIコンポーネントのベストプラクティスの項目ではアンチパターンが細かく記されています。Languagehttps://www.ibm.com/design/language/IBMはスタイリッシュなサイトデザインで洗練されたデザインキットが用意されています。アイコン、カラーパターン、アニメーションのライブラリ。タッチジェスチャーを示すイラストのテンプレートや、フォントサイズのジェネレーターといった他にはない面白いコンテンツが提供されています。以上、スタイルガイド10選でした。企業によって独特なコンテンツがあったり、コンテンツのまとめ方の単位も様々ですね。アイスリーデザインでもこういった美しいスタイルガイドが作れるように頑張りたいと思います!今後もデザインに関する投稿をしていきますので、時々チェックしてみてください!ご拝読ありがとうございました。番外編Webデザインに関するものではありませんが、とてもかっこよく、スタイルガイド作成時のレイアウトなどにも参考になるので載せておきます。i3DESIGNi3DESIGN(アイスリーデザイン)は渋谷とウクライナに拠点を構えるIT企業です。「デザイン思考」の手法を取り入れたクライアントワークと、Google対応の自社クラウドサービス「GOMOBILE」の提供を行っています。システム運用を一貫してご提供できることが、i3DESIGNの強みです。designer西東京にある美大を卒業後、i3DESIGNに入社。meetsource.comやin-Pocketなど、i3DESIGNでwebサービスやアプリUI、自社プロダクトのデザインをしています。us株式会社アイスリーデザインが発信するオウンドメディアです。デザイン思考でUXを「デザイン」ができる時代、「idea」「internet」「information」.....と世の中には多くの「i」のつくキーワードが存在し、ある意味無限のビジネスが考えられます。ITビジネスでひとつ時代の先を行く人が、ポケットの中にとっておきたくなるような情報を発信しているメディア、それが「in-Pocket」です。(10)Facebookアイスリーデザインi3DESIGN(アイスリーデザイン)は渋谷を本社、ウクライナを開発拠点に据えるIT企業です。ITサービスのプロフェッショナルとして、お客様のビジネスにおけるデジタルトランスフォーメーションを支援します。「デザイン思考」のアプローチを起点に、ビジネスの創出に必要な”右脳部分”のUX/UI、”左脳部分”の開発体制を社内にそろえています。]を一貫してご提供できることが、i3DESIGNの強みです。お問い合わせご意見、ご要望からサービスについてのご質問など、お気軽にお尋ねください。popupqewqe。