ワイヤーフレームUIキット
ワイヤーフレームUIキットとはAdobeXD用に作られたデザインや画面構成が詰まったセットです。様々なワイヤーフレームUIキットが配布されており、それぞれ設計思考が異なります。 今回は10種類のワイヤーフレームUIキットに触れた後に、弊社提供のMockittについても紹介させて下さい。
Part 1: トップ10のAdobeXDワイヤーフレームUIキット
1.Wires
スマホ用の170種類ものテンプレートやPC用の90種類のテンプレートが用意されています。ワイヤーフレームUIキットと言ったらまっさきにこれと言った感じかと思います。 ニュースサイトやショッピングサイ
2.FreeWire
Webサイトやライティングページで使いやすいものがまとめられているワイヤーフレームUIキットです。 クレジット表記名はAhmed Hammad（アーメド・ハマド）で、この作者は他にEcommerce Profile and SettingsやEcommerce Profile and Settings。Ecommerce Profile and SettingsやEcommerce Profile and Settingsを提供しています。
3.Calendar
その名が示すように、カレンダーのソフトで使えるものがまとめられたワイヤーフレームUIキットとなっています。画面は15種類でコンポーネントは25種類程度なのでワイヤーフレームUIキット初心者でも使いやすい部類ではないでしょうか？
4.Bootstrap 4 UI
オープンソースでありHTMLとCSS、JavaScriptでまとまりモバイル関連にも強いフレームワークBootstrapの為のワイヤーフレームUIキットです。
5. Adobe XD Desktop Wireflows
角が丸くなったパーツで構成されているのが特徴的なワイヤーフレームUIキットです。WEBサイトのみならずCSSの最新機能のグリッドレイアウトや、様々な情報を計測するダッシュボードまで網羅しています。
6. Free Dashboard UI Kit
スマホ用のアプリも作れますが、ダッシュボード向けと言う見方が強いワイヤーフレームUIキットとなっています。ユーザー及びチームデータの管理やカレンダーにグラフなど管理関連が充実しています。
7. Free Wireframe Kit For Adobe XD
見た目の華やかさや機能の充実度が話題となっているワイヤーフレームUIキットの中で、こちらは良い意味で簡素的になっています。 見た目や機能に惑わされて自分の作りたいものが分からなくなってしまうと言う方にお薦めです。
8. Pawtastic eCommerce UI Kit for Adobe XD
ネットショッピングのEコマース用に用意されたワイヤーフレームUIキットとなっています。また犬や猫をクローズアップした可愛らしい見た目が特徴で、ワイヤーフレームのテンプレートは15種類です。
9. Cactaceae Free Web UI Kit
こちらにも幅広く用途に対応したワイヤーフレームUIキットとなっています。ちなみにCactaceaeとはサボテン科と言う意味があります。角丸タイプではないのでその分使いやすさに拍車がかかっています。
10. Adobe XD Free UI Styleguide
Bootstrap関連のワイヤーフレームUIキットでもあります。シンプルなデザインですがカラフルな配色が出来るように設計されているので、簡素だけど寂しくない印象のWebサイトを作る事が可能になっています。
Part 2:ワイヤーフレーミングツールMockitt
ワイヤーフレーミングツールWondershare Mockitt は、Webデザインやアプリの試作段階を作りたい初心者にお薦めのソフトです。
10種類のワイヤーフレームUIキットを見て、その情報量に付いていけないと感じた読者もいると思います。MockittではAdobeXD用であるワイヤーフレームUIキットのように数が膨大に用意されているわけではありません。 よってあまりそう言ったのに惑わされずに作成できるメリットがあります。（ちなみに無料でも作れます。） またMockittは何も初心者のためだけのツールではありません。WebサイトなどのUIデザインのためのSketchと連動しており、Sketchのファイルとインポートする事が可能なのです。 またSketchはiMac専用なのでWindowsユーザーは使えませんし、しかもWebブラウザでmockittは完結できるので、ネットとパソコン環境があればいつでもSketchの続きを行えると言っても過言ではありません。
10種類ものワイヤーフレームUIキットを見ていきましたがいかがでしたか？ ソフトを使いこなす近道は使いこなせない機能に惑わされず、やれる所から少しずつ始めてみる事だと思います。 ワイヤーフレームUIキットなしで最初に作成してみて、不便さを感じるようになったらワイヤーフレームUIキットに触れてみる方法でも良いかと思います。
