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