こういうのを一つは用意しておきたい!Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材
Post on:2017年9月27日
スタイルガイドを0から作成している人に、朗報です。
Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。
UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017092701.png)
Symbolsで作成できるスタイルガイド
Symbolsはその名の通り、シンボルで自動更新されるスタイルガイドのテンプレートです。使用するカラー・フォント・ロゴなどを変更するだけで、Webサイトに使用するさまざまなコンポーネントのスタイルを定義できます。
![Symbolsのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017092702-01.png)
シンボルの編集画面
アイコン付きのボタン、ラベル付きの入力、情報メッセージ、文字カウントなど、さまざまな種類のシンボルが用意されており、カスタマイズして利用することができます。
スタイルガイドのフォーマットは、4種類が用意されています。
![Symbolsで作成できるスタイルガイド](http://coliss.com/wp-content/uploads-201703/2017092702-02.png)
生成されるスタイルガイド: その1
![Symbolsで作成できるスタイルガイド](http://coliss.com/wp-content/uploads-201703/2017092702-03.png)
生成されるスタイルガイド: その2
![Symbolsで作成できるスタイルガイド](http://coliss.com/wp-content/uploads-201703/2017092702-04.png)
生成されるスタイルガイド: その3
![Symbolsで作成できるスタイルガイド](http://coliss.com/wp-content/uploads-201703/2017092702-05.png)
生成されるスタイルガイド: その4
Symbolsのダウンロード
Symbolsのダウンロードは、下記ページから。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017092703-01.png)
ページちょい下の「Download」をクリックすると、gumroadに移動します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017092703-02.png)
価格に「0」を入力し、これが欲しいボタンをクリックします。
gumroadに登録済みの人はそのままダウンロードできます。未の人はメールアドレスを入力してダウンロードできます。
Symbolsの使い方
SymbolsはSketchファイルで構成されていますが、Sketchで開く前にフォントをインストールしておきましょう。
![Symbolsのファイル構成](http://coliss.com/wp-content/uploads-201703/2017092704.png)
Symbolsのファイル構成
フォントは下記の3種類。
全部をインストールしてもよいですが、お好みの1つでも大丈夫です。
- Proxima Nova(Adobe TypeKit)
- Roboto(ダウンロードファイルに含まれています)
- Source Sans(ダウンロードファイルに含まれています)
スタイルガイドの作り方は、動画が用意されています。
sponsors