webデザインソフト

webやスマホサイトのプロトタイプ、アプリデザインツール

webサイトやアプリのインタラクティブなプロトタイプを作成できます。ユーザー体験を作成し、デスクトップやモバイルデバイスでライブでプレビューします。ワイヤーフレームからプロトタイプへの移行がかつてないほど簡単になりました。

デザインやプロトタイプを一気に作成

Adobe XD CC

UI/UX デザイナーがUI/UXデザイナー向けに構築。効率的なユーザー体験が単調な作業を最小限に抑え、クリエイティブな作業に注力いただけます。

試してみる

アートボードの選択

作成済みの共通の画面サイズのアートボードや共通のwebページのテンプレートを活用して時間を節約できます。

スタイルの定義

カラースウォッチ、書体、グラフィック要素を選択してプロジェクトに独自のスタイルを設定できます。

デザインと接続

個々のページをデザインし、異なる要素間に矢印をドラッグすることで機能的に接続できます。

共同作業、プレビュー、書き出し

プロジェクトのライブプレビューを共有することで、共同作業やフィードバックの取得が可能に。リアルタイムで変更を加え、完成したデザインやアセットを開発チーム用に書き出します。

Adobe XDでUI/UXの設計を効率的に

JPEG形式で書き出し

アセットやアートボードをJPEG形式で書き出し。調整可能な画質設定により、ファイルのサイズを小さくして簡単に共有できます。

ホットスポットのヒント

デザイン上のインタラクティブな要素をハイライトし、テスターにプロトタイプを案内できます。重要な部分についてフォーカスされたフィードバックを引き出します。

プロトタイプビデオ

プロトタイプのビデオをすばやく作成できます。簡単に理解できるビデオのデモによりユーザー体験を共有します。

Adobe XDでできること ›

細部までこだわったwebデザインソフト

高度なコーディングツールとライブプレビューオプションにより、webサイトをより高速に細部まで構築することが可能に。プランやワイヤーフレームから完成まで、効率的に進めることができます。

堅牢なwebサイトのコーディングとデザイン

Adobe Dreamweaver CC

HTML、CSS、JavaScriptなどを使用して効率的にコーディングできます。コーディングショートカット、複数行編集、エラーチェック、ライブプレビューにより作業を高速化します。

試してみる

プラン

webサイトの機能と要素のプランを立案。必要なページを決めてフォルダー構造内のアセットを整理します。

スタイル

CSSを使用してサイトのスタイル要素を定義できます。クラスを作成し、それに適したフォント、スタイル、カラー、レイアウトを選択します。

構築

高度なコーディングツールを使用してサイトを構成するページを構築できます。動的な要素とスクリプトを開発してコンテンツのパフォーマンスを改善します。

テスト、修正、公開

異なる画面でデザインをプレビューし、共同作業者からフィードバックを取得できます。デザインを調整してホスティングサーバーに公開するか、アセットを書き出して別のチームに渡します。

強力な機能によりDreamweaver CCが理想的なコーディングアプリに

コードヒントとツールチップ

コードを入力するとそのコードの用途や目的がツールヒントに表示され、それを参考にしてコーディングの高速化が可能に。自動終了タグにより、入力の手間が省けます。

コーディングショートカット

省略されたテキストやキーボードショートカットを使用して、ネストされた構造、Lorem ipsumのテキストなどを自動的に作成できます。ライブのエラーチェックやヒントによりエラー修正を高速化します。

レスポンシブなwebデザイン

検索エンジンのランキングを向上させ、より一貫したデザインを維持できます。最初からレスポンシブデザインツールを使用し、様々な画面サイズに対応するページレイアウトを定義します。

Dreamweaver CCでできること ›