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

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

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

関連記事

ユーザーの思考を見落としたデザインから見えてきたもの... ふとECサイトを見ていたら、ユーザーを誤解させるページを見つけました。 悪意があったり、ダサいからダメという類のデザインではなく、初心者が陥りやすい例かなと思いました。 また、小馴れたデザイナでも陥りやすい失敗だと思い、少し自分の中で考察してみました。 ユーザーが先入観を持ってしま...
ワイヤーフレーム作成用のUIパーツを作りました(DL可能)... WEBサイトを作る際に使用するワイヤーフレームのパーツ集を作りました。 Fireworksに特化して使えるようにしています。 個人・商用の利用は自由なのでディレクタさん達に利用いただけると嬉しいです。 ダウンロードする...
色選び苦手な人に勧めたい、マテリアルデザインのカラーパレットの活用方法(初心者向け)... Google のマテリアルデザイン良いですよね。 特にカラーパレットがいいなと思っています。 サイトを作る際に「何色を使おう」、として色を決めても「じゃあこの色の濃いバージョン、薄いバージョン」などより複数の色が必要になってきてある程度組み合わせの検証の時間が...
これからWebデザイナーを始める人にオススメ。脱Adobeという選択... この記事はSketch Advent Calendar 2016の15日目の記事になります。 皆さんAdobe製品は使ってますか? 私は使っていません(CCの契約はしているけど)。 理由は単純でAdobe以外のツールを使ったほうが私は効率が良かったからです。 私はSketchに出...
【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方... 4/10はなんの日かご存知ですか? そう、フォントの日です。 本記事では2017年4月に公開となった明朝体で使えるWebフォント Noto Serifの使い方を紹介します。 とりあえず見たい方はデモを用意しているのでそちらをご覧ください。 Noto Serif CJKのデモ ...
ロゴの価格と価値についての私の考え方... ロゴはいくらなのかというアンケートがtwitterに流れてきて、普段から自分でも思ってる疑問だったので、興味があって自分の中で深掘りしてみました。 考えだしたきっかけ こちらのツイートがきっかけです。 ロゴデザインをデザイナーにお願いしようと思った時、いくらぐらいかかるとい...