• メイン / その他

2021年にスマートに作業するのに役立つ52のWebデザインツール

1/2ページ： ページ1

• ページ1
• 2ページ

ジャンプ先：

• 完全な設計ツール
• モックアップとプロトタイプ
• 設計フレームワークとライブラリ

最近はとてもたくさんの素晴らしいウェブデザインツールがあります。ウェブデザインワークフローで解決しようとしている問題が何であれ、スタンドアロンユーティリティであろうと、より大きなアプリ内の機能であろうと、誰かがそのツールを作成した可能性があります。そして、ウェブデザインコミュニティは初期の頃から大きく変化しましたが、あなたの仕事を共有する精神がまだあるので、これらの素晴らしいツールの多くは無料です。

ツールの急増は大きな恩恵ですが、同じことを行う方法はたくさんあるので、選択に甘んじていると感じることもあります。この記事では、現時点で最高のツールであると思われるものをまとめました。もちろん、これは完全なリストではありませんが、うまくいけば、リストを絞り込んで最高のものをいくつか強調表示することで、ワークフローに適したツールキットを簡単にまとめることができます。

これは非常に長いリストであるため、記事をナビゲートしやすくするためにツールをセクションに配置しました。このページには、完全なWebデザインソフトウェア、さらに基本的な専用のワイヤーフレーミングツール、Webデザインフレームワークとライブラリがあります。 2ページ目には、画像の操作からARやVRでの手を加えるまで、あらゆるものに対応する、より小さく、より専門的なツールが多数あります。

あなたがここにいる間、あなたはのまとめをチェックしたいかもしれません 最高のウェブホスティングサービス そしてその 最高のウェブサイトビルダー 2020年

完全な設計ツール

01. InVision Studio

InVision Studio すべての基盤をカバーし、必要な唯一のUIツールになることを目指しています。ラピッドプロトタイピング、応答性の高いコラボレーションデザイン、デザインシステムの操作など、美しいインタラクティブインターフェイスの作成に役立つ機能が豊富に用意されています。

すでにSketchなどのツールでInVisionを使用している場合は、機能にかなりのクロスオーバーがあります。ただし、Studioの力は、特にデザインにアニメーションが含まれる場合、プロトタイピング部門にあります。ラピッドプロトタイピングを使用すると、複雑で想像力に富んだトランジションを作成できるため、希望するレベルのアニメーションを実際に実現できます。 UIで移行の開始をどのように確認するかを理解し、最終結果を設計するだけです。 InVisionStudioは残りをあなたのために解決します。

さらに、スワイプ、クリック、ホバリングなどのさまざまなジェスチャやインタラクションから、これらのカスタムアニメーションやトランジションを作成できます。

すべて完了したら、InVisionを介してプロトタイプをエクスポートし、人々にコラボレーションを依頼します。目的のプラットフォームでプロジェクトを表示できます。これは、設計を調査およびテストするための優れた方法です。その後、クライアントはデザインに直接コメントできるようになります。

さらに、複数のデバイス用に多数のアートボードを作成することを考えるのをやめることができます。Studioのレイアウトエンジンは、デザインを任意の画面に自動的に調整します。この時間の節約はあなたにあなたのデザインについてもっと多くを考えるスペースを与えます。

02.スケッチ

ボヘミアンコーディング スケッチ 最も広く使用されているWebデザインプラットフォームの1つです。これは、インターフェースとプロトタイプを共同で構築するための非常に強力なベクターベースのツールです。 Sketchは、特にWebサイトやアプリを作成するために構築されているため、インターフェイスが乱雑になる不要な機能がなく、より広い範囲のソフトウェアよりも高速で効率的です。

Rory Berry、クリエイティブディレクター Superrb 、2017年にSketchに切り替えたため、強くお勧めします。 「Photoshopと比較して、すべてのドキュメントを並べ替えたり、Sketchで修正を加えたりするのははるかに簡単です」と彼は始めます。 「Sketchには小さなドキュメントがありますが、Photoshopには大きなドキュメントがあります。ベクターベースのアプリであるため、ファイルサイズはPhotoshopに比べて劇的に小さくなっています。」

そして、それだけではありません。 「Sketchに組み込まれているグリッドシステムは素晴らしく、インターフェイスの設計がはるかに簡単になります。全体的なUIと最小限の感触により、デザインがよりクリーンになり、ユーザーフレンドリーになると思います。比較すると、Photoshopは非常に複雑に見えます。」

コミュニティは何百もの スケッチプラグイン 設計ワークフローをより簡単かつスムーズにするため。

Sketchの欠点は、Macでのみ利用可能であり、他のオペレーティングシステムをサポートする予定がないことです。設計者はWindowsを使用する開発者と.sketchファイルを共有したいことが多いため、これは問題でした。幸いなことに、「SketchforWindows」アプリケーションがあります。 ルナシー それは.sketchファイルを開いて編集し、この苦痛のほとんどを取り除きます-それについては エクスポートと変換 この記事のセクション。

お見逃しなく Sketchを使用するためのヒント 。

03. Adob​​e XD

Adobe XDは、Adobe CreativeCloudスイートの下でデジタルプロジェクトに最適な環境を提供します。熱心なAdobeユーザーであり、XDを初めて使用する場合は、最初から「Adobe」のようなインターフェイスを見つけられない可能性があります。しかし、それはそこにある他の主要なツールと重なります。 Photoshopでしばらくデザインしている場合もジャンプですが、UIデザインには非常に価値があります。

このベクターデザインとワイヤーフレーミングツールは、サポートなどの追加により、改善を続けています。 音声プロトタイピング ツールがUXの最新トレンドに対応できるようにします。 XDには、描画ツール、非静的インタラクションを定義できるツール、モバイルとデスクトップのプレビュー、およびデザインに関するフィードバックを提供するための共有ツールが含まれています。プロジェクトを開始するためのデバイス固有のアートボードサイズを選択できます。また、Googleのマテリアルデザインなどの人気のあるUIキットをインポートすることもできます。

重要なのは、AdobeXDがCreativeCloudの他の部分と統合されていることです。つまり、PhotoshopまたはIllustratorからアセットを簡単にインポートして操作できるようになります。すでに他のAdobeアプリを使用している場合、UIは使い慣れた感じになり、学習曲線が多すぎないはずです。

アンドレイ・ロブ 、バルセロナのRobuStudioのデザインディレクターはそのファンの1人です。 「迅速なモックアップには最適です」と彼は言います。 「これは非常に軽量なインターフェースで、たくさんの写真が読み込まれ、ムードボードに最適です。プロトタイピングは、特にコンテンツをすぐにオンラインでプッシュできるため、クライアントにコンテンツがどのように機能するかを示すのに非常に役立ちます。

Ellis Rogers、グラフィックデザイナー レセプション株式会社 また、それをお勧めします。 「デザイン/プロトタイプまたはワイヤーフレームが完成すると、Adobe XDを使用すると、要素をすばやく選択して、リンクを介して共有できる作業中のプロトタイプのページ遷移を作成できます」と彼は説明します。 'リンクを使用すると、ページごとにフィードバックを収集して、すべてを整理することもできます。リンクはAdobeXD内で更新できるため、クライアントは誤ったバージョンを心配することなく常に最新バージョンを見ることができます。一緒に仕事をすることは絶対的な喜びです。」

04.マーベル

Marvelは、迅速なアイデアの作成、見た目へのインターフェースの改良、プロトタイプの作成に最適なもう1つのWebデザインツールです。 マーベル は、ページを構築するための非常に優れた方法を提供し、プロトタイプを通じてデザインをシミュレートできるようにします。デザインをプロジェクトワークフローに挿入するための素晴らしい統合がいくつかあります。興味深いことに、統合されたユーザーテスト機能がありますが、これはWebデザインツールスケープではまだかなり珍しいものです。すべてオンラインなので、何もダウンロードする必要はありません。

05.フィグマ

フィグマ は、複数の設計者がリアルタイムで共同作業できるようにするインターフェイス設計ツールです。これは、プロジェクトに複数の利害関係者がいて、結果の形成に関与している場合に非常に効果的です。ブラウザ、またはWindows、Mac、Linuxで利用でき、用途に応じて無料版と有料版の両方があります。

その優れた機能のいくつかを次に示します。

「Figmaは、クロスプラットフォームであることを除いて、Sketchと同様のUSPを持っています」とフロントエンドデザイナーは説明します。 ベンジャミンリード 。 「これを使用していくつかのアイコンを作成したとき、ワークフローが非常にスムーズであることがわかりました。学ぶのに時間がかからず、コラボレーションできるという追加のメリットがありました。アプリ内で他のユーザーとグラフィックを共有できます。」

「私は仕事のためにLinuxに切り替えようとしてきましたが、Windowsを使用することもあるので、実用的な観点からはFigmaは理にかなっています」と彼は付け加えます。

フリーランスのコンテンツライター兼アートワーク デビッドイーストウッド フィグマについてもいいことがあります。 「これは、MVTをすばやくモックする必要がある場合にも非常に便利なツールです。時々、既存のレイアウトへの小さな追加。デスクトップ、タブレット、モバイル向けのデザインをすばやく作成できることを嬉しく思います。」

06.アフィニティデザイナー

'セリフの AffinityDesigner 一部の人から「Photoshopキラー」と呼ばれていますが、その理由は簡単にわかります」とプロダクトデザイナーは言います。 そしてエドワーズ 。 「調整可能な非破壊レイヤーなど、私が本当に楽しんだ機能がいくつかありました。これは基本的に、画像やベクトルを損傷することなく調整できることを意味します。

'1,000,000パーセントのズームはまさに至福でした。あなたが本当に近づくことができるので、それはベクターアートで作業するときに特に便利です。元に戻す機能と履歴機能も非常に便利です。アフィニティを使用すると、8,000ステップ以上戻ることができます。」

「デザインに関しては、UIはなじみ深いものです。 Photoshopから移行するとき、誰もが最初からやり直したいと思うようですが、これは大きな課題となる可能性があります。 Affinityが行ったことは、すべてを引き締め、気を散らすものを隠しながら、レイアウトを使い慣れた状態に保つことです。私は簡単にまっすぐに飛び込んでデザインを始めることができました。」

AffinityDesignerも利用できます iPad用 。また、これは期待するような縮小されたモバイルアプリバージョンではないことに注意してください。デスクトップで取得するのと同じフルバージョンです。

を使用するためのガイドをお見逃しなく ピクセルパーソン 、 輸出者 そしてその ペンツール AffinityDesignerで。 SerifはPhotoshopの代替品にもなっていることにも注意してください。 アフィニティ写真 およびInDesignの代替、 アフィニティパブリッシャー ;これらはすべてうまく連携します。

モックアップとプロトタイプ

07. UXPin

私たちのリストの次のウェブデザインツールはUXPinです。この専用のプロトタイピングアプリは、Mac、Windows、またはブラウザで利用できます。他のほとんどのデザインツールでは、アートボード上のさまざまな要素をリンクすることによってのみインタラクションを模倣できます。UXPinはコードに近づき、インタラクティブな状態、ロジック、およびコードコンポーネントを操作できるようにします。

iOS、マテリアルデザイン、ブートストラップ用の統合要素ライブラリに加えて、何百もの要素ライブラリがあります 無料アイコンセット 、あなたの途中であなたを助けるために。 UXPinは最近、アクセシビリティ機能を導入して、デザインがWCAG標準に準拠していることを確認しています。

APIリクエストは、UXPinのインタラクション機能への最新の追加です。この機能を使用すると、コードを必要とせずに、設計ツール内から直接製品と「対話」するアプリのプロトタイプを作成できます。これは、HTTPリクエストを外部APIに送信できるようにすることで機能します。

で最初のプロトタイプを作成できます UXPin 無料で、適切な場合は有料の月額サブスクリプションに切り替えます（チームメンバーシップが利用可能です）。 UXPinは最近、Sketchとの統合を改善したため、プロトタイピング機能が制限されていると感じているSketchファンの場合は、ワークフローに導入することができます。

08. Proto.io

Proto.io は、大まかなアイデアで始まり、本格的なデザインで終わる、リアルなプロトタイプの開始を可能にするトップアプリケーションです。このツールは、詳細なカスタムベクターアニメーションなど、プロジェクトのさまざまな可能性も提供します。

手描きスタイルで最初のアイデアを開発することから始めて、それらをワイヤーフレームに加工し、忠実度の高いプロトタイプで仕上げることができます。 SketchプラグインとPhotoshopプラグインは、他のツールを使用してデザインする場合に役立ちますが、Proto.ioはエンドツーエンドのデザインプロセスを適切に処理します。その他の機能（ユーザーテストなど）は、設計の検証に役立ちます。これは、多数の信頼できるブランドがすでに使用しているオールインワンソリューションです。

試してみるのに最適なデモがたくさんあります。このエンドツーエンドのソリューションが、現在使用されている多くのツールをいかに簡単に置き換えることができるかを実際に確認できます。比較的最近追加されたProto.ioには、アセットマネージャー、開発者ガイド、プロトタイプの記録機能など、さまざまな新機能が含まれており、このツールを多くの優れたプロトタイピングツールと一致させることができます。

09. Balsamiq

迅速で効率的なワイヤーフレーミングがあなたが探しているものであるなら、 Balsamiq 強い提案です。プロジェクトの構造とレイアウトを簡単にすばやく開発できます。ドラッグアンドドロップ要素により、作業が楽になり、ボタンを他のページにリンクできます。ワイヤーフレーミングを使用すると、インターフェイスの計画をすばやく開始して、チームやクライアントと共有できます。 Balsamiqは2008年から活動を続けており、忠実度が低く、高速で、焦点を絞ったナンセンスなアプローチに誇りを持っています。

10.ProtoPie

Webデザインツール プロトピック 複雑な相互作用を作成し、設計の理想的な最終機能に近づけることができます。おそらく傑出した機能は、プロトタイプ内のスマートデバイスのセンサー（傾斜、音、コンパス、3D Touchセンサーなど）を制御する機能です。プロジェクトによっては、これはネイティブアプリの機能を網羅したい人にとって素晴らしいツールです。パイのように簡単で、コードは必要ありません。

最近リリースされたバージョン4.2には、要望の多かった2つの新しい機能が含まれています。編集可能なSVGをシーンに追加し、選択するとすぐに2つのレイヤー間の距離を見つけることができます。

11.MockFlow

MockFlow は、ワイヤーフレーミングおよび計画Webサイト用のアプリケーションスイートです。 WireframeProは、最初のアイデアを設定し、それが適切になるまで繰り返すのに役立ちます。これを支援するUIリビジョントラッカーがあります。要件に合わせて調整できる何千ものビルド済みコンポーネントとレイアウトが付属しており、同僚やクライアントに作業を提示するためのプレビューモードがあります。

ワイヤーフレームを作成したら、スイートの残りの部分は、情報アーキテクチャ、スタイルガイドの作成（これは自動的に生成できます）、サインオフプロセスの実行など、Webサイトの計画の他の側面で役立ちます。

他のオプションをご覧になりたい場合は、トップのまとめをご覧ください。 ワイヤーフレームツール 。

12. Adob​​e Comp

Adobe Comp は、iPad用の素晴らしいウェブデザインツールで、ウェブページのワイヤーフレーム、プロトタイプ、レイアウトコンセプトの作成を支援します。必要に応じて、CreativeCloudを利用したインテリジェントなスケッチパッド。モバイルやウェブ用のさまざまなレイアウト用の基本的なテンプレートがあり、それが必要な場合は印刷することもできます。画像やテキストなどを表す直感的な形状を描画することで、すばやくプレースホルダーを作成できます。 Compは、大まかなアウトラインを直線、円、長方形に変換します。

困惑することに、AdobeはXDへの直接エクスポートを含めるのに適しているとは考えていません。 –にもかかわらず 長年のご要望 それは永遠に見えるもののために検討されてきました。ただし、Photoshopへのエクスポートは（IllustratorおよびInDesignとともに）組み込まれており、モックアップの微調整がユビキタスイメージエディターで行われると、そこからXDにエクスポートできます。アドビ愛好家のワイヤーフレーマーのユーザージャーニーにおけるこの歓迎されない追加のステップにもかかわらず、Compは、どこにでも持ち運べる機能、使いやすさ、印象的なUIを備えており、このリストに含める価値があります。

13.フリント

Flintoは、デザイン内で独自のインタラクションを作成できるデザインツールです。さまざまなジェスチャを利用でき、前後の状態を設計することで簡単に移行できます。 フリント 違いを理解し、アニメーション化するだけです。非常に役立ちます。

これはiOSのみであることに注意してください。ただし、使い始めるとなじみがあります。途中で役立つドキュメントがオンラインにあり、SketchとFigmaからのインポートも簡単です。

14.斧

Axure 常に市場で最高のワイヤーフレーミングツールの1つであり、動的データを必要とする複雑なプロジェクトに最適です。 Axureを使用すると、技術的であり、構造とデータに重要な注意を払う必要があるプロジェクトのモックアップに本当に集中できます。

Axureの引き継ぎプロセスには、開発者が設計に一致する最終製品を作成するのに役立つ完全な仕様の作成が含まれます。

15.ジャスティンマインド

Justinmind プロトタイピングに役立ち、SketchやPhotoshopなどの他のツールと統合されます。プロトタイプの組み立てに役立つインタラクションとジェスチャーを選択できます。 UIキットも含まれているため、画面をすばやくまとめることができ、応答性も高くなります。

16.液体

体液 は、迅速なプロトタイプを作成し、設計を仕上げるためのシンプルで直感的なツールです。すぐに使える優れたアセットがいくつか含まれているため、迅速なプロトタイプを作成できます。アップグレードすると、独自のシンボルを独自の好みのUIアセットで簡単に組み立てることができます。このツールは非常に高速なUIデザインを提供し、忠実度の高いプロトタイプと低いプロトタイプの両方でアセットを利用できます。

17.相互作用

相互作用 は、特に設計者と開発者の間のチームでのコミュニケーションとコラボレーションを改善するプロトタイピングシステムです。設計システムを念頭に置いて構築されており、コードと統合して、簡単にフォローして自動的に更新するドキュメントを生成します。全員を同じページに最新の状態に保つことはコア機能です。つまり、コードが更新されると、デザインも更新されます。 Interplayはまだベータ版ですが、すでに多くの大きな設計および開発ツールで動作します。

設計フレームワークとライブラリ

18.ブートストラップ

ブートストラップ 確かに新しいツールではありませんが、開発に革命をもたらし、Web上での構築方法を形作り続けています。

これを書いている時点で、最新バージョン（4.4.1、2019年11月にリリース）では、特定のブレークポイントまで流動的な新しいレスポンシブコンテナーと、ブレークポイント全体の列数を効率的に指定するための新しいレスポンシブ.row-colsクラスが導入されました。

Bootstrapは最近、独自のオープンソースアイコンライブラリを立ち上げました。 ブートストラップアイコン 、これはBootstrapコンポーネントで動作するように設計されています。

を見つける 私たちのガイドで最高の無料のブートストラップテーマ 。

19.スタートアップ3

Bootstrapが好きで、生のことに飛び込みたくない場合は、Startup3が簡単な方法です。これは、12列のグリッドを備えたBootstrap4に基づいてウェブサイトを構築するための組み込みのテンプレートとテーマを備えたオンラインアプリです。ドラッグアンドドロップインターフェイスを使用してコードを記述せずにサイトを構築できますが、完成させるにはHTMLとCSSの知識が必要です。

20. Vue.js

Vue.js はユーザーインターフェイスを構築するためのフレームワークであり、仮想DOMを使用します。名前が示すように、Vueのコアライブラリはビューレイヤーに焦点を合わせています。

Vueのドキュメントから抜粋した、ユーザー入力を利用してライブラリの優雅さを示すコード例を見てください。 HTMLから始めましょう：

{{ message }}

Reverse Message

を呼び出すカスタムv-onハンドラーに注意してください reverseMessage 方法。 JavaScriptは次のとおりです。

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

この例では、段落にデータを入力し、 reverseMessage 方法。 Vueは、複雑なライブラリの経験が少ない人に最適ですが、複雑な単一ページのWebアプリの開発に役立つプラグインも多数あります。

21.パターンラボ

Pattern Labは、DaveOIsenとBradFrostによって作成された美しいパターン駆動型のデザインツールです。それはの概念に基づいています アトミックデザイン は、デザインを最小の部分（原子）に分解し、それらを組み合わせて、より大きく再利用可能なコンポーネント（分子と有機体）を形成し、それを使用可能なテンプレートに変換する必要があることを示しています。

コアとなるのは、UIコンポーネントをつなぎ合わせる静的サイトジェネレーターですが、さらに多くの機能があります。 パターンラボ それより。それは言語やツールにとらわれません。 UIパターンを相互にネストし、動的データを使用して設計することができます。デバイスに依存しないビューポートサイズ変更ツールを備えており、設計システムが完全に応答することを保証します。完全に拡張可能であるため、ニーズに合わせて拡張できます。

22.マテリアルデザイン

マテリアルデザイン は、優れたデザインの古典的な原則とテクノロジーと科学の革新を組み合わせて、ウェブサイトのまとまりのある柔軟な基盤を作成することを目的としたGoogleの視覚言語です。

マテリアルデザインフレームワークを使用して作成されたウェブサイトやアプリは、見た目がモダンでユーザーに馴染みがあるため、ユーザーはすぐに製品を簡単に使用できます。この設計システムを支援するために利用できるツールはたくさんあります。それらを見つけるには、ナビゲーションバーの[リソース]をクリックします。

2020年4月にGenerateJSでJavaScriptスーパースターのラインナップをご利用ください。このカンファレンスは、より優れたJavaScriptの構築を支援します。今すぐ予約 generateconf.com

次のページ：問題に対処するための専用Webデザインツール

• 1
• 二

現在のページ： ページ1

次のページ 2ページ