コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。XDですが、まだ使った事が無くてこれから勉強しようと考えている方も多いはず。Trail」が初心者にも分かり易くておすすめ。Trailでは単にXDの使い方だけでなく、便利なテクニックをチュートリアル動画で解説しています。以下の様な疑問を持つ方は、勉強前にこの記事を読んでおくと理解が早まりますよ。XDとは?XDは、webサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツール。要するに、XDを使えばワイヤーフレーム、デザインカンプ、プロトタイプまでを作成出来ます。制作のスピードも断然違ってきます。制作チームでの共有や、アプリを持っていないクライアントに確認してもらう事も簡単に出来ます。見せ方や操作性、動き等を開発段階で確認・修正が出来るので、工数の削減にもつながります。ちなみにPhotoshopが駄目という事では無く、大事なのは使い分ける事。画像加工などは変わらずPhotoshopです。Trail」がおすすめで、実際このサイトで全て事足ります。Adobeは関連する公式サイトが沢山あるのですが、結局どれを使えば良いのか分かりにくいです。出来れば効率的に勉強したいですよね。Trailは情報量が多く、体系的にまとまっています。このサイトで十分!「動画で学ぶ総合学習プログラム」と題されたチュートリアルサイトです。有り難いのは、実際に動画で使われている素材をダウンロードして使える事です。動画と同じ素材を使って真似すれば理解が進みますよね。機能を学ぶ各プログラムをやりつつ、分からない時はTUTORIALで調べる。各プログラムを行ったり来たりする感じですね。Trailを見れば分かるので、各メニューの概要だけ解説しますね。XDの多彩な機能を、個別に動画で学ぶ」この記事を書いている時点では92本の動画があります。多いですが、全部使う訳ではないので・・・。色々な機能がありますので、目的別に動画を見る事が出来ます。各動画ページ内から素材もダウロード出来ます。興味のあるものからどうぞ。作り方を学ぶ「目的やつくりたいもの別に、実際に手を動かして学ぶ」なら、まずはこの「LESSON」から始めてはどうでしょうか。動画は23本あります。こちらも各動画ページ内から素材をダウロード出来ます。みんなで高め合う動画では制作の様子を解説者が解説しながら進んでいきます。動画は6本で再生時間は長め。チュートリアルとは違いますが、実際の制作手順を見れるのは勉強になります。各動画ページ内の下にある「Q&A」も結構参考になりますよ。学習キット先に紹介したワークショップ動画で使われているXDファイルと素材、さらには手順書がセットになったデータをダウンロード出来ます。テーマ別に分かれているので便利。スターターキット「KIT/RESOURCE」メニューの下の方からスターターキットもダウンロード出来ます。方でも、自習形式でXDの主要機能の使い方を簡単に学べるデザインキット。初級編と中級編があり、レベルに応じての学習が可能です。XDとPhotoshopの違いは?XDは大きく分けて「デザイン」「プロトタイプ」「共有」の3つの項目に分けられます。各項目ごとに、Photoshopと何が違うのか代表的なものを幾つか紹介します。1デザイン例えば、Webサイトデザインにおいてよく使われるレイアウトに繰り返しパターンがあります。商品画像と説明文がセットになったカード型のレイアウト等ですね。XDの「リピートグリッド」機能を使えば、余白を含めたレイアウトをドラッグするだけで繰り返し配置出来ます。Photoshopではレイヤーを必要分だけ複製し、それぞれ余白を調整して配置しなければいけません。他にも、ホバーやタップ時の状態変化を「ステート」としてデザインを切り替える事が出来ます。Photoshopでは状態変化ごとに別途レイヤーを分ける必要があり、管理が面倒になりがちです。XDではプロトタイプが作成出来ます。これはPhotoshopとの大きな違いの1つです。完成時の実際の操作感などを開発段階で確認も出来るので、作業工数の削減に繋がります。グローバルメニューからの各ページへのリンクなどもアニメーション付きで設定出来るので、完成時のイメージがつかみやすいです。3共有XDを使えば、チーム間やクライアントとのやりとりもスムーズに行うことができます。XDを持っていないクライアントでも修正や要望のコメントを付ける事が出来たり、逆にコメントに対して、対応済などのリアクションをする事も出来ます。制作はどう変わる?これまでは、Webディレクターがパワーポイントやその他ツールでワイヤーフレームを作ったりしていたのではないでしょうか?言うまでも無くパワーポイント等では、デザイナーやコーダーに細かい要望は伝わりません。指示漏れや追加要望は、ある程度制作が進んでから出てくるなんて事も。XDを使えば、デザイン作業の効率化に繋がる。デザインだけでなくプロトタイプとして、操作できる状態の物を確認出来る。修正箇所もコメントでやり取り出来るので、チームやクライアントのやり取りがスムーズ。メリットは作業工数の削減だけでは無いですが、分かり易いポイントなのでは無いでしょうか。クライアント側にもメリットがありますので、XDの習得にチュートリアルを活用してくださいね。css検索:FUERU(フエル)ウェブデザイナーが知識と経験をもとに、制作やSEO対策、ITスキルについて解説・発信するブログ。デザイン・コーディングからSEO対策やライティングなど幅広くWEB制作をしています。スキルアップして仕事に活かしましょう。コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。