Webデザインの勉強になる！有名ブランドサイトのスタイルガイドのまとめ -Brand Style Guide Example

Post on:2015年1月16日

sponsors

最近はスタイルガイドを公開しているサイトも増えてきました。有名ブランドのWebサイトのスタイルガイドやガイドラインを数多くまとめているサイトを紹介します。

なんとなく眺めるだけでもよし、もちろん実装方法やレイアウトのバリエーションなど、参考になるものばかりです。

その中からいくつか要注目のスタイルガイドを紹介します。

ドイツの家具メーカー「homify」のスタイルガイド。
キャプチャは各デバイスごとのグリッドの使い方で、エレメントの実装方法、レイアウトのパターンなど非常に充実しています。

旅行情報サイト「Lonely Planet」のスタイルガイド。
Webサイトはカード型レイアウトを取り入れたフラットなデザインで、エレメントやコンポーネント、ウィジェットやユーティリティなど豊富なガイドが用意されています。

FoursquareやEvernoteとかに地図デザインを提供している「Mapbox」のスタイルガイド。
Webサイトや地図アプリは非常に美しく使いやすいデザインで、スタイルガイドもかなりの出来です。

「Starbucks Coffee」のスタイルガイド。
コンテンツのオブジェクトやウィジェットだけでなく、プロモーションページのレイアウトパターンなどバリエーションも豊富です。

フロントエンド開発者のポートレイトサイト「Max Quattromani」のスタイルガイド。
個人サイトながら、充実のスタイルガイドです。ポートフォリオにこういったものを置くのもいいですね。