Chap5-3 Adobe XDをレイアウトデザイン I

Chap5-3 Adobe XDをレイアウトデザイン I

Adobe XDを使って、ワイヤーフレームの作成方法について理解することが目的です。
Photoshopとの違いや作業の流れについて学習します。

Warning

現在、Adobe XDのインストールができない状態と報告を受けています。
一度、インストールしたことがある人は再度インストールができるかもしれません。

とりあえず、XDの代わりとしてFigmaというアプリケーションが使えるため、代用して受講してみてください。

動画は、XDの内容をそのままFigmaで説明した動画に差し替えています。

プロトタイピングツール

Webページやアプリなどの、画面設計と操作性のチェックができるプロトタイプ(試作品)を作成するアプリケーションソフトのことを指します。

完成品の前に作る操作可能なグラフィックデータで、操作ができない状態のグラフィックデータをデザインカンプ(画面見本)またはモックアップと呼びます。

現在、2023年3月の時点でAdobe XDの単体販売は終了し、Adobe CCを購入しなければダウンロードができなくなりました。(7日間の無料版はあります)

Adobe CCが利用できない方は、同じプロトタイピングツールの「Figma」がオススメです。

Figmaはデザイン、コード、AIがひとつにつながるキャンバスです。最初のアイデアから製品のリリースまで、コンセプトの立案から本番環境への実装までを、チーム全員…
www.figma.com

この「Figma」は、ブラウザ上で利用できるWebアプリケーションサービスで、2022年9月にAdobeが買収すると発表し、その後買収を断念したツールです。

今後どのような展開になるかわかりませんが、XDの単体販売終了していることから、XDのユーザーも「Figma」に注目しています。多くの制作現場でも、さまざまなプロジェクトで「Figma」を活用しているツールでオススメです。

Photoshopでも紹介した「PHOTOSHOP VIP」でも初心者向けの記事を書いているので、興味のある方は参考にするといいでしょう。

Figmaをこれからはじめようというひとがまず知っておきたい、基本の機能や使い方を網羅した完全ガイド2022年版。 ウェブサイトのデモデザインを実際に作成しなが…
photoshopvip.net