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

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

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

サイトのキャプチャ

Brand Style Guide Example

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

サイトのキャプチャ

homify -styleguide

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

サイトのキャプチャ

lonely planet -styleguide

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

サイトのキャプチャ

Mapbox -styleguide

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

サイトのキャプチャ

Starbucks -styleguide

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

サイトのキャプチャ

Max Quattromani -Style Guide

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

top of page

©2017 coliss