つなぐをつくる、つくるをつなぐ。販促制作を支援する株式会社タガス|東京都杉並区
株式会社タガス

「Webデザインのワークフローで学ぶ はじめてのAdobe XD」

ご清聴ありがとうございました!このページは浅野がAdobeMAXJapan2019のstage Gでお話した資料&各種URL、デモのデータ置き場です。(※Wires jpはBehanceのウェブサイトからのダウンロードをお願い致します。)

登壇者紹介関連

書籍『Illustrator魔法のレシピ』、「Photoshopオンライン講座」についてはまだウェブ上には情報がございません。

UIデザインキット関連

補足1:更新等により内容が変化する例

今回のXDでのデータ制作では紹介しませんが、情報量が多かった場合などの見た目も考慮して、デザインガイドを作成しておくとよいでしょう。以下に悪い例を示します。こういったことは、WordPressをはじめとしたCMSなどの動的サイトでよく起きがちです。

ダメなデザインの例

補足2:「Webディレクターの要件定義」について

最低限、以下の内容を事前に決めておきましょう。

  1. ターゲットデバイス、ブラウザ(非対象のものは?)
  2. ドメイン・サーバーの準備、情報
  3. レスポンシブWebデザインかどうか
  4. サイズ・ブレークポイント
  5. 高解像度対応等をするかどうか
  6. 実装技術で難易度の高そうな部分
    (外部との連携やCMS、フォーム類、その他最新技術の使用など)
  7. 何がどこに入るか(ワイヤーフレーム・構成案の作成)
  8. サイト全体の構造は(サイトマップの作成)
  9. 予算・スケジュール(検証・修正の時間や費用を必ず設ける)

「要件定義」の例

●対象OS,ブラウザ

■PC(Windows、Mac)
・Internet Explorer11
・Edge、Chrome、Firefox、Safari 最新版
■タブレット、スマートフォン
・Safari(iOS) 最新版
・Chrome(Android) 最新版

●ドメイン・サーバー

■・xxxで取得済み(顧客支給)IDはxxx,Passはxxx
PHP 7.2.

●サイズ・ブレークポイント

〜480px(スマホ)
〜768px(タブレット)
〜それ以上(PC)

●実装技術

・フォームはGoogleフォームで
・YoutubeのAPIを使用して動画を埋め込む、スマホ版の場合は自動再生しない
・アニメーション効果
・Webフォントの使用
・高解像度ディスプレイ対応


デモ編補足1:XDのUIの名称

 

デモ編補足2:デザインへのリンク

PSDやAiファイルからは、各種CCライブラリパネルを経由したアセット(素材)管理が便利です。

焼き鳥プロトタイプへのリンク

こんなふうに確認できます。

デモ編補足3:紹介していない機能

今回は「初級編」ということでオーソドックスな使い方を中心にご紹介しました。ここ1年の間に実装された「変化」に強くて便利な機能については下記をご覧ください。

 


素敵なAdobe&Webデザインライフを!またどこかでお目にかかりましょう!