Cntlog

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は軽くて、使いやすいので様々な場面で活躍します。

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

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