こういうのを一つは用意しておきたい!Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材

スタイルガイドを0から作成している人に、朗報です。
Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。

UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。

サイトのキャプチャ

Symbols

Symbolsで作成できるスタイルガイド

Symbolsはその名の通り、シンボルで自動更新されるスタイルガイドのテンプレートです。使用するカラー・フォント・ロゴなどを変更するだけで、Webサイトに使用するさまざまなコンポーネントのスタイルを定義できます。

Symbolsのキャプチャ

シンボルの編集画面

アイコン付きのボタン、ラベル付きの入力、情報メッセージ、文字カウントなど、さまざまな種類のシンボルが用意されており、カスタマイズして利用することができます。

スタイルガイドのフォーマットは、4種類が用意されています。

Symbolsで作成できるスタイルガイド

生成されるスタイルガイド: その1

Symbolsで作成できるスタイルガイド

生成されるスタイルガイド: その2

Symbolsで作成できるスタイルガイド

生成されるスタイルガイド: その3

Symbolsで作成できるスタイルガイド

生成されるスタイルガイド: その4

Symbolsのダウンロード

Symbolsのダウンロードは、下記ページから。

サイトのキャプチャ

Symbols

ページちょい下の「Download」をクリックすると、gumroadに移動します。

サイトのキャプチャ

Symbols -gumroad

価格に「0」を入力し、これが欲しいボタンをクリックします。
gumroadに登録済みの人はそのままダウンロードできます。未の人はメールアドレスを入力してダウンロードできます。

Symbolsの使い方

SymbolsはSketchファイルで構成されていますが、Sketchで開く前にフォントをインストールしておきましょう。

Symbolsのファイル構成

Symbolsのファイル構成

フォントは下記の3種類。
全部をインストールしてもよいですが、お好みの1つでも大丈夫です。

  • Proxima Nova(Adobe TypeKit)
  • Roboto(ダウンロードファイルに含まれています)
  • Source Sans(ダウンロードファイルに含まれています)

スタイルガイドの作り方は、動画が用意されています。

Symbols & Styleguides - Sketch Freebie Tutorial

top of page

©2017 coliss