Cntlog > スキルアップ・ノウハウ > デザイン > Sketchでワイヤー/デザインテンプレートを作る時に便利なUIキット

Sketchでワイヤー/デザインテンプレートを作る時に便利なUIキット

SketchはUIデザインのツールですが、ワイヤーやモックを作ときも便利です。
簡単すぎて打ち合わせの中で画面を作りながら話をすることもあります。

やはりクライアントさんと話を進めるときは対面しながら同じものを見てやれると話が進めやすいです。

本記事では、ワイヤーを作るときに私が使っているテンプレートを幾つか紹介します。

UI系の素材

Atomic Design Template Sketch Resource

Atomic Designのワイヤーフレームテンプレートです。

データをダウンロードする

Wireframe Kit for Atomic Design Sketch Resource

こちらもatomic designを意識したものですがUIパーツが豊富です。
こういうのを一つ持っておくと、便利です。

データをダウンロードする

Mobile UI Wireframe Kit Sketch Resource

アプリなどで、画面のフローを考えるときに便利です。
最近プロトタイプも流行っているので、デザイナ/プログラマとのコミュニケーション、意識合せをするのによく使います。

データをダウンロードする

有料で使いやすいもの

Sketchは色んな人がダウンロード出来るように無料でUIを公開しているのですが、有料のものもあります。

私も最初は無料のものばかり使っていたのですが、最近は有料のものを購入してそっちを使い続けてる事が多いです。

購入する場所

幾つかUIテンプレートを購入できるサイトはあるのですが、私はui8さんが気に入ってここで探して購入しています。

https://ui8.net/

気に入ってる点は、価格が安い(5000円くらいで大体買える)ところと、人気のもの、新しいもの、セール中のものが簡単に探せるからです。

またカテゴリもUI Kitやワイヤーフレームなどに分けられていて必要なものが探しやすいからです。

singleton-2

LPなどに使えるテンプレートです。
ブログやEC系などジャンル別によく使うデザインが含まれているので、組み合わせでデザインに反映できます。

価格 $48
https://ui8.net/products/singleton-2

Frames Wireframe Kit

主にPC版になりますが、これ一つでクライアントとの打ち合わせがスムーズにいけます。
色んなレイアウトのデザインがあるのでこれに構成していくだけで、いい感じのページを作っていけます。

あと、有料の素材系の中ではめずらしく、$12と格安です。

価格:$12
https://ui8.net/products/frames-wireframe-kit

その他

Sketch Hunt Arrows and Lines Pack Sketch Resource

データをダウンロードする

Phoenix Startup UI Kit Pro

こちらも、組み合わせでサイトが作れちゃう系ですが、これの凄いところはこのデザインのHTML/CSS/JSのテンプレートが含まれているところです。

Sketchで確認をとれたらすぐにコーディングの方でその組み合わせを反映してすぐに公開まで辿りつけます。

価格:$88
https://ui8.net/products/phoenix-startup-ui-kit-pro

最後に

Sketchは軽くて、使いやすいので様々な場面で活躍します。

デザインのテンプレートも豊富にあるので、デザイナがいないときでも組み合わせで素敵なデザインが出来上がります。

短縮できた時間はコンテンツやマーケティングを考えるのに使えるとよいですね(ゝω・)

関連記事

現役WebデザイナーがデザインツールをSketch一択にした理由... 転職を期に制作環境がmacに変わったのもあって二ヶ月前からsketchを導入しました。 ちょっと感動とか恋に落ちるとかのレベルを超えて衝撃的を受けています。sketchまじヤバイ。 以前使っていたデザインツール もともとはFireworksをメインに使っていました。 ただ開発...
ワイヤーフレーム作成用のUIパーツを作りました(DL可能)... WEBサイトを作る際に使用するワイヤーフレームのパーツ集を作りました。 Fireworksに特化して使えるようにしています。 個人・商用の利用は自由なのでディレクタさん達に利用いただけると嬉しいです。 ダウンロードする...
ロゴの価格と価値についての私の考え方... ロゴはいくらなのかというアンケートがtwitterに流れてきて、普段から自分でも思ってる疑問だったので、興味があって自分の中で深掘りしてみました。 考えだしたきっかけ こちらのツイートがきっかけです。 ロゴデザインをデザイナーにお願いしようと思った時、いくらぐらいかかるとい...
色選び苦手な人に勧めたい、マテリアルデザインのカラーパレットの活用方法(初心者向け)... Google のマテリアルデザイン良いですよね。 特にカラーパレットがいいなと思っています。 サイトを作る際に「何色を使おう」、として色を決めても「じゃあこの色の濃いバージョン、薄いバージョン」などより複数の色が必要になってきてある程度組み合わせの検証の時間が...
【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方... 4/10はなんの日かご存知ですか? そう、フォントの日です。 本記事では2017年4月に公開となった明朝体で使えるWebフォント Noto Serifの使い方を紹介します。 とりあえず見たい方はデモを用意しているのでそちらをご覧ください。 Noto Serif CJKのデモ ...
デザイナーなら抑えておきたい著作権の勘どころ... 著作権って名称はよく聞くけど、実際はどんなものについているのかよくわからない。 私もそんな一人です。 デザインの仕事をしていると著作権関係の話が時々聞こえてきますのでちょっと調べてみました。 制作者には自動的に著作権がある。 小説、イラスト、写真、音楽などの著作物を制作した場合は自動...