Adobe XDでデザインしよう!PSDから始めるUI/UXデザインチャレンジ | Adobe XD Creative Challenge シーズン1 #AdobeXD #Challenge

連載

Adobe XD Creative Challenge

これからAdobe XDを使ってみたい方を対象に、Webサイトやスマホアプリのデザインやプロトタイプを実際につくる機会を用意しました。指定された日にアンロックされる6つのチャレンジ(課題)は、PSDファイルから開始する形式になっています。それぞれのチャレンジが、XDの代表的な機能を体験できるようにつくられています。

優秀なチャレンジ作品や全てのチャレンジを達成した方には、Creative Cloud 個人版 1年分やXDノベルティなどが贈られますので奮ってご参加ください!

XDの使い方で分からないことがある場合は、Adobe XD ユーザーグループ(XDUG)がサポートしてくれます。オンラインの質問はXDUGのFacebookへどうぞ。

手順

  1. アンロックされたチャレンジ(課題)のテンプレートファイルをダウンロード
  2. デザインとプロトタイプを作成
  3. 作り方の解説をする動画(CC道場)を確認
  4. 分からないことがあったらXDUGのFacebookで質問
  5. プロトタイプの共有リンクを作成
  6. 共有リンクをハッシュタグ #AdobeXD #Challenge を付けてツイート
    ※各チャレンジの締め切りまでにツイートしてください

XDUGのサポート

XDUGのFacebookグループに開設する質問スレッドで、XDの使い方で分からないことなどを質問してみてください。質問スレッドへのリンクは下記の各チャレンジに表示されます。
※ チャレンジ別の質問スレッドをチャレンジ共通の質問スレッドに変更しました。

XDUGのFacebookグループで質問するために、まだ参加していない方はこちらからどうぞ!

XDUGのFacebookグループに参加する

表彰と賞品

Creative Cloud

シーズンMVP

今回の6つのチャレンジを通して、もっとも素晴らしいと評価された1名にCreative Cloud 個人版 1年分を贈呈

XD Tシャツ

週間MVP

各週(Week 1 〜 3)のチャレンジを通して、もっとも素晴らしいと評価された1名(合計3名)にAdobe XD Tシャツを贈呈

皆勤賞

各チャレンジの締め切り以内に全てのチャレンジを達成した方から抽選で20名にAdobe XD マスキングテープを贈呈

チャレンジ(課題)

Week 1 (4/16 – 4/26)

#01 | 4/16(火)

eコマースサイト

eコマースサイトの購入体験をデザインし、プロトタイプを作成してみましょう。ショッピングカートに入れるところも工夫できそうです。
締め切り:4/26(金)15:00

テンプレートをDL 解説動画をみる

XDUG参考作品 by 湯口りさ
プロトタイプを試す | XDファイルをDL

#02 | 4/17(水)

スマホのダッシュボードアプリ

スマホ利用時間を表示するモバイルアプリのダッシュボードをデザインし、プロトタイプを作成してみましょう。
締め切り:4/26(金)15:00

テンプレートをDL 解説動画をみる

XDUG参考作品 by 北村崇
プロトタイプを試す | XDファイルをDL

週間MVP: #02「スマホのダッシュボードアプリ」by hani@成長期

Week 2 (5/21 – 5/31)

#03 | 5/21(火)

レストラン検索アプリ

レストラン検索の体験をデザインし、プロトタイプを作成してみましょう。今回は音声コントロールにも挑戦します。
締め切り:5/31(金)15:00

テンプレートをDL 解説動画をみる

XDUG参考作品 by 塚田友美
プロトタイプを試す | XDファイルをDL

#04 | 5/22(水)

旅行サイト

旅行サイトに掲載する観光地の画像を魅力的に見せる体験をデザインし、プロトタイプを作成してみましょう。
締め切り:5/31(金)15:00

テンプレートをDL 解説動画をみる

XDUG参考作品 by 佐藤 実可子
プロトタイプを試す | XDファイルをDL

週間MVP: #04「旅行サイト」by タクト
週間MVP: #04「旅行サイト」by crest

Week 3 (6/4 – 6/14)

#05 | 6/4(火)

チャットアプリ

チャットアプリの体験をデザインし、プロトタイプを作成してみましょう。簡単で便利なプラグインも活用してみましょう。
締め切り:6/14(金)15:00

テンプレートをDL 解説動画をみる

XDUG参考作品 by 林 航平
プロトタイプを試す | XDファイルをDL

#06 | 6/5(水)

イベント情報サイト

イベント情報サイトのレスポンシブデザインをしてみましょう。モバイルファーストではじめるとデザインしやすくなります。
締め切り:6/14(金)15:00

テンプレートをDL 解説動画をみる

XDUG参考作品 by 井斉 花織
プロトタイプを試す | XDファイルをDL

週間MVP: #06「イベント情報サイト」by Tantan/Web制作修行中

受賞者

シーズンMVP:

crest

週間MVP:

hani@成長期(Week 1)
タクト(Week 2)
crest(Week 2)
Tantan/Web制作修行中(Week 3)

皆勤賞:

Tantan / Web制作修行中、crest、Anna 🍵Wolf’s Design、𝕨𝕒𝕤𝕒𝕓𝕚𝕥𝕒𝕣𝕠、みお、カワグチマサト、コマキチ@見習い中、DoremiFa_Design

よくある質問

Q. チャレンジ(課題)は全てやらないとダメ?

全てのチャレンジをコンプリートする必要はありませんが、色々なパターンのUI/UXデザインを体験できる上、皆勤賞の対象にもなるのでオススメです。

Q. 週間MVPは、Weekに出される2つのチャレンジをやる必要がある?

必須条件ではありません。チャレンジは1つでも2つでも週間MVPの対象となります。

Q. プロトタイプの共有リンクをツイートすれば応募したことになるの?

はい、チャレンジの締め切り前に指定のハッシュタグ #AdobeXD と #Challenge を付けて、プロトタイプの共有リンクがツイートされていれば応募完了となります。

Q. Adobe XDを全く使ったことがありません。基本的な使い方はどこで学べますか?

まだ一度も使ったことがない場合は、Adobe XD スターターキットで実際に使いながら学ぶことをオススメします。各チャレンジの動画解説は、アンロックされた週の木曜夜8時からCC道場で配信しますので、そちらをご確認ください。

Q. 自分の手持ち画像素材、もしくは他の無料素材等を使用しても良いですか?

はい、素材は著作権に問題ないものや、他者を誹謗中傷しないものであればなにを使っても構いません。