AdobeのWebデザインソフトで
Webデザインをはじめよう
Webデザインをおこなうには、目的に合ったサイト設計と目を引くデザイン、そしてそれを実現するための実装が必要です。
Adobe XDとDreamweaver は、デザイン＆実装には欠かせない、AdobeのWebデザイン向けのソリューションです。
それぞれの特徴を理解して、Webデザインをはじめましょう！
Adobe Creative Cloudは、イラストからアイコンやロゴ、
さらにタイポグラフィにも対応
webサイト制作からアプリデザインまで
そのアイディアを今すぐ形に
Adobe XD は軽快で直感的な操作感が特徴。複雑なコードを書かなくても、Webサイトやアプリのインタラクティブなプロトタイプを作成できます。静的なjpegデータでは再現できない、ページ同士のリンクやリンクボタンの色の変化など、クライアントとのコミュニケーションのための簡単なプロトタイプや本格的なデザインを誰でもすぐに作れます。
直観的なアプリおよびwebデザインソフト
Adobe XDは、UI/UXデザイナー向けにデザイナー自身が構築した、クリエイティビティに集中できる効率的なUXツールキットです。
Adobe XDならではの便利な機能
コンパクトな機能と軽快な操作感
IllustratorやPhotoshopといった精密なグラフィックを制作するアプリと違って、スクリーンのデザインに必要な機能だけを搭載しているAdobe XD。覚えやすいツールと軽い動作で、はじめででもスムーズに操作できます。
ドキュメントアセットでスタイルを管理
スクリーンのデザインでは、同じ要素が何度もでてくることが多いものです。「ライブラリ」パネルの「ドキュメントアセット」を活用すれば、色や文字スタイル、コンポーネントを登録してスタイルを管理できます。
ページ同士を接続する
「プロトタイプ」モードからは、ページ同士を接続することができます。ページ同士の関係性がはっきりと分かるようになり、プレビューすればPCやモバイルなどでもリンクを再現できます。
「共有」を使ったコミュニケーション
Webサイトはクライアントやチームメイトとの協力が欠かせません。「共有」モードからURLを発行して通知することで、デザインのフィードバックや開発向けのデータ（アセット）のやり取りをおこなえます。
楽しく学べるAdobe XDの無料チュートリアル
常に進化し続けるAdobe XD。初心者から上級者まで、楽しく最新情報を学べる公式コンテンツを多数ご用意しています。
Adobe XD ことはじめ
デザインやプロトタイプ（試作品）を作るための基本的なチュートリアルです。まずはサイトの構造を示すための「ワイヤーフレーム」の作成からはじめてみましょう。
詳細を見る >
Adobe Xd Trail
多彩な機能や代表的なUIデザインなどをカテゴリ別に動画で学ぶチュートリアル集。定期的に開催されるオンラインワークショップに参加すれば、分からないことを直接質問することも可能です。
詳細を見る >
主要な機能を試せるスターターキット
XDの主要機能の使い方をまとめて学べるスターターキットを使えば、XDを業務で使う大きなスタートを切れます。ぜひ、お試しください。
スターターキットをダウンロード（mac OS版） >
スターターキットをダウンロード（Windows版） >
Adobe XD検定
きちんと操作できればクリアできる「初級」から、超辛口な「上級」まで。Adobe XDに慣れてきたら、腕試しにXD検定に挑戦しましょう。何度も挑戦できるので、知識のアップデートに最適です。
詳細を見る >
Adobeのソリューションと連携してシームレスなデザインワークを実現
「CCライブラリ」を利用した他のアプリケーションやサービスとの連携で、アプリやサービス間の垣根を超えた
デザインワークを実現できます。
PhotoshopやIllustratorと連携しよう
IllustratorやPhotoshopで作成した素材（アセット）は、CCライブラリを経由することでそれぞれのアプリで編集を継続しながら、Adobe XD上でも利用できます。
Adobe Stock
写真やイラストなどのイメージ素材に困ったことはありませんか？Adobe Stockの豊富な素材を利用すれば、イメージをすぐに形にできます。「ライブラリパネル」から直接Adobe Stockの素材を検索することも可能です。
詳細を見る >
細部までこだわる、webデザインソフト
高度なコーディングツールとライブプレビューオプションにより、webサイトをより高速に細部まで構築することが可能に。プランやワイヤーフレームから完成まで、効率的に進めることができます。
視覚的で堅牢なwebサイトのコーディング
Webサイトのプロフェッショナルを目指すのであれば欠かせないコーディング。
Dreamweaverを使えば、HTML、CSS、JavaScriptなどを使用して効率的にコーディングできます。コーディングショートカット、
複数行編集、エラーチェック、ライブプレビューにより作業を高速化します。
Adobe Dreamweaverならではの便利な機能
短時間で柔軟なコーディング
高機能でシンプルなコーディングエンジンを利用して、webサイトを簡単に作成、コーディング、管理できます。コードヒントが表示されるので、HTMLやCSSなど、webの標準規格を短時間で学習して実際に編集できます。
テンプレートを活用してすばやく設定
メールマガジン用のHTMLなど、用意するのが難しいテンプレートなども準備されているので、すばやく構築できます。Adobe Stockの素材も簡単にwebサイトに利用できます。
あらゆるデバイスに対応する動的な表示
あらゆる画面サイズに対応するwebサイトを構築できます。リアルタイムでプレビューしながら作業できるので、公開前に表示や機能が確認できます。
シームレスなライブビュー編集
ライブビューではテキストや画像のプロパティを編集したり、ワンクリックでクラスを直接追加することができます。編集内容はすぐにプレビューに反映。別の編集モードに切り替える必要はありません。
効率的にデザインワークを進める強力な機能
スタイル
CSSを使用してサイトのスタイル要素を定義。クラスを作成し、それに適したフォント、スタイル、カラー、レイアウトを選択します。
ビルド
高度なコーディングツールで、サイトを構成するページを構築。動的な要素とスクリプトを開発してコンテンツのパフォーマンスを改善します。
テスト、修正、公開
異なる画面でデザインをプレビューし、共同作業者からフィードバックを取得。デザインを調整してホスティングサーバーに公開するか、アセットを書き出して別のチームに渡します。
コードヒントとツールチップ
コードを入力するとそのコードの用途や目的がツールヒントに表示され、それを参考にしてコーディングの高速化が可能。自動終了タグにより、入力の手間が省けます。
コーディングショートカット
省略されたテキストやキーボードショートカットを使用して、ネストされた構造、サンプルテキストなどを自動的に作成できます。ライブのエラーチェックやヒントによりエラー修正を高速化します。
レスポンシブなwebデザイン
検索エンジンのランキングを向上させ、より一貫したデザインを維持できます。最初からレスポンシブデザインツールを使用し、様々な画面サイズに対応するページレイアウトを定義します。
Adobe XDとDreamweaverの違い
Webサイトの制作は大きく分けて2つの工程に分けられます。レイアウトや配色などの見た目をつくる「デザイン」と、HTMLやCSS,JavaScriptやPHPなどを記述する「コーディング」です。Adobe XDは「デザイン」、Adobe Dreamweaverは「コーディング」に適したアプリです。両者をうまく連携させてプロジェクトを進めていきましょう。
Adobe XD
・コーディングをせずにウェブサイトやアプリの見た目を作る
・画像やテキスト、CSSを書き出す
・プロトタイプを作成・共有する
・デザインのフィードバックを得る
Adobe Dreamweaver
・ウェブサイトをコーディングする
・コードヒントやEmmetを利用して素早くコードを書く
・サーバーへ接続してアップロードする
・gitを利用してバージョン管理をおこなう
Windows、macOS、Android、iOS対応のwebデザインソフト
Creative Cloudには、一歩先を行くwebサイト作成に役立つアプリが揃っています。写真編集やグラフィックデザインからグラフィカルなwebデザインやコーディングまで、あらゆる用途に対応するツールが用意されています。包括的なクリエイティブソリューションで、共有、共同作業、配信を高速化。個人向けと法人向けの魅力的なメンバーシップオプションに加えて、学生・教職員向けの割引など、すべての人にぴったりのプランがあります。最適なプランをお選びください。
