UIデザイナーにおすすめのWebデザインツール＆便利素材まとめ

新しいツールを模索している人、Webデザインをはじめたばかりの人におすすめなデザインツールと素材情報をまとめました。ぜひ日々のお仕事に役立ててください。

UIデザインツール

UIデザインツールの需要は現在伸び続けています。そのぶん新しいツールが次々に生み出されていたり、既存ソフトの操作性や機能がどんどんグレードアップされています。

Sketch 3

日本でも利用者が増加している『Sketch 3』は、Mac専用のベクタードローイングツールです。機能がUIデザインに必要なものだけに絞られているので、誰でも簡単に使いこなせます。

クオリティの高いフリーリソースやプラグインも豊富に用意されており、値段も99ドルと安く、かなりコストパフォーマンスの良いソフトです。

https://www.sketchapp.com/

Figma

『Figma』の特徴は、複数のデザイナーがひとつのファイルを同時に編集できることと、chromeのブラウザ上で使えることです。

オンラインブラウザで使えるので、他のPCにデータを移行する必要もありません。これからデザインをはじめるなら、『Figma』を使ってみては？

http://www.figma.jp/ja/figma/

STUDIO

『STUDIO』はレスポンジブなWebデザインが作りやすいUIデザインツールです。画面サイズを変更すると、自動的に最適化されるのです。

多くの描画ツールに存在する「レイヤー」の概念がなく、絵を描くように画面をデザインできるのも特徴。直感的な操作で、非エンジニアでも操作できます。

2017年にリリースされたばかりですが、そのユニークなUIが好評で、現在世界展開を目指してブラッシュアップが繰り返されています。

https://studio.design/

レスポンシブデザインソフト

デバイスが多様化した現代に置いて、レスポンシブデザインへの対応は欠かせません。短時間でさまざまなデバイスに対応するレイアウトを作成するために、専用のツールを使いましょう。

Bootstrap

『Bootstrap』はレスポンシブWebデザインに対応したCSSフレームワーク。スマートフォンやタブレットなど個別に対応するデザインを作るのは大変な手間です。『Bootstrap』なら、ブラウザの横幅サイズを基準にデザインを調整してくれます。

http://getbootstrap.com/

テキストエディタ

UIデザイナーに限らず、Web上でものづくりをする人にとってコーディングしやすいテキストエディタ選びは欠かせません。使いやすさを重視して、3つのおすすめをご紹介します。

Atom

GitHubで開発された『Atom』は、多くのエンジニアやデザイナーが利用するテキストエディタです。20年以上の歴史をもつエディタも多い中で、2015年にリリースされたばかりの新しい商品。 日本語に対応している他、パッケージ（プラグイン）も豊富。ユーザーは今後も増え続けることでしょう。

https://atom.io/

Coda 2

HTML、CSS、JS、PHP、Rubyなど言語を問わずコーディングができるプログラミングエディタ。また、サイトをフォルダ分けして管理できる機能が便利だと好評です。

https://panic.com/jp/coda/

Textastic Coda Editer

iPhone、Mac、iPadで使えるテキストエディタです。

https://www.textasticapp.com/

手書き風のフォントパック

他とちょっと違うデザインに仕上げたいなら、多少読みにくくてもユニークなフォントを使ってみましょう。今回は、安くてオススメな手書き風フォントをふたつご紹介。

4 Modern Calligraphy Font Families

万年筆やマーカー、ブラシで書いた文字が含まれていて、そのラフな描き具合がサイト全体にゆるい雰囲気をもたせます。
フォントは4種類含まれています。

4 Modern Calligraphy Font Families, 30+ Inpidual Typefaces

7 Fabulous Handmade Fonts

ちょっと味のあるおしゃれのサイトを作りたい……という方に是非使ってほしい、手書き調フォントを紹介します。9ドルと安価ですが、7つの手書き風英字フォントが含まれています。大文字、小文字共に対応。

https://goo.gl/gUULYn

モックアップ素材

コンペや提案のために、モックアップを手軽に用意できるのはデザイナーが有利なポイントです。洗練されたモックアップ素材を利用して、資料をもっと魅力的に、効率的に作りませんか？

The Mockup Bundle

『Mockup bundle』は、デザイナーやWeb開発者はもちろん、広告代理店やブランディングに携わる方にもおすすめのモックアップ素材集です。素材は、12種類のパッケージに分かれており、さまざまな媒体で使える素材が詰まっています。

The Mock Up Bundle

PHOTOSHOP VIP

モックアップ情報をまとめているWebサイトをブックマークしておくのも良いでしょう。

http://photoshopvip.net/tag/mockup

テンプレート集

デザインは必ずしもオリジナルである必要はありません。良いデザインであれば、テンプレートに頼ることも大切です。

WordPress Welcome Mat

『WordPress Welcome Mat』はコンバージョン獲得に特化したデザインのテンプレート集です。
効果的なCTAがついたランディングページ用のテンプレートが19種類含まれています。テンプレートはすべてカスタマイズ可能で、データのエクスポートも簡単です。

WordPress Welcome Mat

Assembly

『Assembly』は、『Bootstrap』で作られたテンプレート素材です。数千もの写真素材や18のテンプレート、700以上のアイコンで、直感的にデザインできます。

ASSEMBLY: A Robust Multipurpose Theme with Page Builder

Retro & Vintage Branding Bundle

デザインにビンテージ調の風合いを出したいときにおすすめの素材集です。ヒップなテイストのベクター素材や、ビンテージ風の名刺テンプレート等が利用できます。

サーフテイストやブルックリン風など4種類のスタイルがあり、2000種類のブラシ、テクスチャー、アクション、ベクター、アイコン素材が含まれています。一味違うデザインを叶えるお買い得なセットです。

2000+ Professional Retro & Vintage Design Elements

インフォグラフィックス作成ツール

データや複雑な情報を視覚的に表現する手段として、インフォグラフィックスは最適な手段です。情報を正しく美しく伝えるために、便利なツールをインストールしておきましょう。

Infogram

『Infogram』では、チャート、グラフ、地図のテンプレートを選び、可視化したいデータを入力するだけでインフォグラフィックスが作れます。 ExcelやCSV、Google Driveなどの外部データを読み込めるのも便利です。

https://infogram.com/

Piktochart

ブラウザ上でインフォグラフィックを作れるサービス。インフォグラフィックだけでなく、報告書やバナーのテンプレートもあります。無料版の場合は、作った資料がWeb上に公開されてしまうのでご注意を。

https://piktochart.com/