Share on FacebookTweet about this on TwitterShare on Google+

この記事は第75回 WordBench神戸(2018年3月24日)のSkecthを使ったWordPress制作ワークフローのフォロー記事です。

当日は、Skecthの基本的な使い方と背景、コラボレーションサービスのZeplinやプロトタイピングツールのinDesignなども使ってワークフローの紹介をしました。

そこで紹介したWordPressテーマ「錦(Nishiki)」のデザインカンプ用のSkecthテンプレートファイルを公開します。

<仕様>

タイトルにGoogleのウェブフォントOswaldNunitoを使っています。任意の変更してください。

アイコンにFontAwesomeを使っています。

ダウンロードはコチラ


デザインは錦のカストマイズでフロントページを設定した際のデザインカンプ用です。画像はunsplash.comからダウンロードしたものを使用しています。

メインビジュアルとヘッダーはheadというシンボルにまとめられています。

タイトルや各パラメーターがオーバーライドできるようになっています。

マスクした画像はChoose Imageで別の画像に変更できます。

テーマではインラインのSVG でカバーされているマスクは透過PNGのパターンにしています。

ボタンはシンボルの階層化で、いくつか選択して変更できるようになっています。

錦にはフロントページで設定出来るセクションがあります。

セクションはシンボルになっています。

セクションで設定できる項目をSkecthでもオーバーライドできるようになっています。

テキストの位置によりシンボルを入れ替えます。

さらにメインテキストやサブテキストの右揃え、左揃え、中央揃えを変更します。

各テキストや背景の画像は右のOverridesで変更できます。

各シンボルはSmart Resizingに対応してますので、幅を小さくしてもタイトルの位置は保持されます。

ファイルにはニュース用のアートボードも入っています。

ファイルを開いて、各データをオーバーライドしていくだけで、素早くデザインカンプを作成できます。

?