つなぐをつくる、つくるをつなぐ。販促制作を支援する株式会社タガス｜東京都杉並区
株式会社タガス
「Webデザインのワークフローで学ぶ はじめてのAdobe XD」
ご清聴ありがとうございました！このページは浅野がAdobeMAXJapan2019のstage Gでお話した資料＆各種URL、デモのデータ置き場です。（※Wires jpはBehanceのウェブサイトからのダウンロードをお願い致します。）
登壇者紹介関連
- 書籍『はじめるデザイン』
- 「Illustratorことはじめ」オンライン講座
- PhotoshopでWebデザインをはじめよう（※2014年の古い記事）
- AdobeFontsフォントパックデザインテンプレート①「新春初売りパック」
- AdobeFontsフォントパックデザインテンプレート②「カフェメニュー」
- AdobeFontsフォントパックデザインテンプレート③「夏祭り」
書籍『Illustrator魔法のレシピ』、「Photoshopオンライン講座」についてはまだウェブ上には情報がございません。
UIデザインキット関連
補足1：更新等により内容が変化する例
今回のXDでのデータ制作では紹介しませんが、情報量が多かった場合などの見た目も考慮して、デザインガイドを作成しておくとよいでしょう。以下に悪い例を示します。こういったことは、WordPressをはじめとしたCMSなどの動的サイトでよく起きがちです。
補足2：「Webディレクターの要件定義」について
最低限、以下の内容を事前に決めておきましょう。
- ターゲットデバイス、ブラウザ（非対象のものは？）
- ドメイン・サーバーの準備、情報
- レスポンシブWebデザインかどうか
- サイズ・ブレークポイント
- 高解像度対応等をするかどうか
- 実装技術で難易度の高そうな部分
（外部との連携やCMS、フォーム類、その他最新技術の使用など） - 何がどこに入るか（ワイヤーフレーム・構成案の作成）
- サイト全体の構造は（サイトマップの作成）
- 予算・スケジュール（検証・修正の時間や費用を必ず設ける）
「要件定義」の例
●対象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デザインライフを！またどこかでお目にかかりましょう！
