Webデザイン

【2018年】いま絶対に注目すべきWebデザインツールとは?

絶えず新しいデザインツールが登場する中、いま注目すべきデザインツールを紹介します。

Mako Mizuno

デザインツールといえば、Adobe IllustratorとPhotoshopが主流でしたが、近年Webデザインツールが続々と発表されています。 UIデザインに特化したデザインツール、インタラクションデザインツール、プロトタイプ制作向けなど「Webデザイン」を細分化したデザインツールが増えてるように感じます。

今、Webデザイナーに求められているのは制作案件に合わせたデザインツールの選択です。

2018年10月現在、いま絶対に注目すべきWebデザインツールを2つのカテゴリーに分けて紹介したいと思います。

UIデザインに特化したデザインツール

今回は人気あるデザインツールの中からSketch、Adobe XD、そしてまだ登場したばかりのFramer Xを紹介したいと思います。

Sketch

やはり世界中から絶大的な人気があるのはSketchでしょう。 Sketch 無料トライアルは30日間です。https://www.sketchapp.com/

Sketchの特徴

  1. 学習コストが低い
  2. プラグインが豊富
  3. とにかく軽い、早い!

他にもシンボル機能でコンポーネント管理ができることや、外部サービスとの連携の強さなどがあります。

1. 学習コストが低い

インターフェイスがシンプルでとても分かりやすいので、今まで使ったことがない人でも、Sketchでのデザイン制作にすぐに慣れると思います。 チュートリアルも豊富なので、心配であればいくつか試してみるといいでしょう。 また、Sketchデータのデザイン素材を無料でダウンロードできるサイトがいくつかあります。

2. プラグインが豊富

プラグインを追加して、自分好みのツールにカスタマイズができるところはSketchの強みです。 種類も豊富なので、デザイン制作をしている上で作業をスピーディーにしてくれるプラグインは数多くあります。

3. とにかく軽い、早い!

日本では他のデザインツールを好むWebデザイナーも多いですが、Sketchは動作が軽く、複数のアートボード作業をしてもストレスフリーでデザインに取り組めます。 一度、このスピードに慣れてしまったらもう後戻りはできません…!

SketchはMacのみ対応

世界中から愛されているSketchですが、Macのみ対応のためWindowsでは利用ができません。 そのため、Windowsユーザーの方はAdobe XDを使用する人が多いのかもしれません。

Adobe XD

2018年5月に無料プランを発表したAdobe XDも、UIデザインに特化したデザインツールと言えるでしょう。 Adobe XD Adobeアカウントを持っていれば無料プランを使用することができます。https://www.adobe.com/ca/products/xd.html

Adobe XDの特徴

  1. 厳選された機能のみを搭載
  2. プロトタイプ機能が使いやすい
  3. IllustratorやPhotoshopとの連携

1. 厳選された機能のみを搭載

Adobe XDは2016年にベータ版がリリースされてから、ユーザーからの要望に合わせて改善を重ね、機能を追加してきました。 Sketchとは異なり、プラグインの種類が少ない代わりにデフォルトの機能が豊富です。

2. プロトタイプ機能が使いやすい

デフォルト機能に搭載されているプロトタイプ機能は、効率的でとても便利です。 各プロジェクトごとに特有のリンクが生成され、ブラウザ上で瞬時にプロトタイプを確認することができます。コメント機能があり、チーム内でのフィードバックを簡単に共有することができます。 また、制作者とのコミュニケーションツールではカラーやフォント情報をデザインデータを渡すことなく確認できます。

3. IllustratorやPhotoshopとの連携

Adobe CCライブラリを通じてベクターデータや写真データを共有できます。 デザインパーツに合わせて特化したツールで編集を行い、Adobe XDで1つのデザインにまとめることができるのは革新的です。

フラットデザインに向いてる

Sketchと比べてみると、Adobe XDは細かいディテールデザインには向いてないように感じます。 特にシャドウなどの表現は少ないので、その辺りはIllustratorと連携しながらデザインを行う必要があります。

Adobe XDはWindowも対応

Mac/Windowに対応しているため、多くのWebデザイナーが使い始めていることは間違いありません。 また、SketchはAdobe XDのファイルに対応していませんが、Adobe XDではSketchファイルの編集が可能です。

Framer X

プロトタイピングツールとして知られてきたFramerが、新たな機能を搭載したのがFramer Xです。 日本ではまだまだ馴染みのないFramer Xですが、今後、注目の外せないインタラクティブデザインに特化したデザインツールです。 Framer X 無料トライアルは14日間です。https://framer.com/

Framer Xの特徴

SketchやAdobe XDと異なるところは、プロトタイプを意識しながらデザイン制作を行うところでしょう。 Sketchと操作はとても似ているため、Sketchを使ったことがあればすぐに慣れるとは思いますが、ツールの扱い方が少し異ります。

コンポーネントの自由性

Framer XのStoreには様々なコンポーネントが用意されています。世界中のデザイナーが分割・再利用しやすいように用意されていて、独自のコンポーネントをアップロードすることも可能です。 驚くべきところは、コンポーネントがインタラクティブに作成されていることです。

例えば、iPhoneのメニューバーのコンポーネントを使用するとします。 ドラッグ&ドロップでアートボードに追加でき、時間表示部分やバッテリー部分など、デザインそのものを調整するのではなく、メニューバーで調整を行うことができます。

Framer X 右側のメニューでインタラクティブに調整することができる。

Reactベースでコードを生成

Reactはフロントエンドに人気のJavaScriptフレームワークです。特に海外では、Webデザイナーに求められるスキルの1つになってきました。 Reactを習得したいと考えているWebデザイナーにとって、大注目のデザインツールであることは間違いありません。 コードのカスタマイズが可能なので、今後Webデザイナーの領域になってくるようにも感じます。

今までとは全く異なる斬新なデザインツール

コーディングなしでWebサイトを公開することができるようになったSTUDIOは、上記のデザインツールとは全く異なります。

STUDIO

ブラウザ上でデザイン制作を行うことができるため、パソコン環境に関わらずどこでも作業を行うことができます。 STUDIO 無料プランでも十分に機能を使うことができます。https://studio.design/

STUDIOの特徴

  1. 今までにないスタイリッシュなインターフェイス
  2. ボタン1つでWebサイトを公開
  3. コーディングを意識できるデザイン制作

1. 今までにないスタイリッシュなインターフェイス

ログインをしてまず驚くのが、インターフェイスのスタイリッシュなデザインです。 シンプルで分かりやすく、統一されたデザインは目を引きます。 優れたテンプレートも多く、デザインパーツの配布されているため、誰でも簡単にデザインクオリティの高いWebサイトを制作できます。

2. ボタン1つでWebサイトを公開

「公開」ボタン1つでWebサイトを簡単に公開することができ、独自ドメインを使用することもできます。 アクセス解析ツールとの連携も可能なので、サイト公開後に分析を行い、サイトを改善していくことを1つのツールで行えるのは画期的です。

3. コーディングを意識できるデザイン制作

コーディング知識がない人でもWebサイトを簡単に公開することができるSTUDIOですが、他のデザインツールにはないユニークな機能を持っています。 それは、余白の調整をマージンやパディング設定で行うところです。また、SEO対策に向けたタグの適切な設定をデザイン編集画面で行うことができます。

まだまだ進化を続けるSTUDIOに今後も目が離せません。 CMS機能を搭載したプランが追加されるなど、次のアップデートが待ち遠しいです!

まとめ

デザインツールはどんどん進化しています。 新しいデザインツールの出現も以前より早くなり、最新の技術に付いていくが困難と感じているWebデザイナーも多いと思います。

まずは躊躇せず、気になるデザインツールがあったらどんなツールなのか知ることから始めてみるといいでしょう。 その中で自分に合った表現方法を見つけ、少しずつ自分のスタイルを調整していくことが、変化の激しいWeb業界で重要なことであると思います。