Webサイト制作における「デザイナーの制作ツールとしてのXD」
その活用方法

佐藤 修

自己紹介

自己紹介

佐藤 修
株式会社フラッグ
Art Director / Designer

TVアニメ 「ルパン三世 Part4」公式サイト
株式会社トムス・エンタテインメント

「ガム彼！」
株式会社ロッテNCW
ニューシネマワークショップ株式会社

セッションの流れセッションの流れ

ワークフロー

設計

ワイヤー
フレーム

デザイン

検証

実装

セッションの流れ

ワークフロー

設計

ワイヤー
フレーム

デザイン

検証

※「プロトタイプ」などの共有機能については取り扱いません

実装セッションの流れ

背景と課題

クライアントワークによくあること解決法「早さ」と「強さ」のXD

活用他のアドビ製品との連携

まとめ

XD導入で得られる効果・期待値

背景

クライアントワークによくあること※弊社クライアントに限定した話ではありません背景ー クライアントワークによくあること ー

1 コミュニケーション

Webのことに詳しくない
説明コスト がかかる

背景ー クライアントワークによくあること ー

2 制作進行

スケジュール通りに進まない
作業に時間 をかけられ ない背景ー クライアントワークによくあること ー

3 制作データ

データ完成前にコーディング開始
修正前提の データ作り

背景ー クライアントワークによくあること ー

作業スピードの向上
修正に強いデータ

背景ー クライアントワークによくあること ー

作業スピードの向上

修正に強いデータ

「早さ」と「強さ」の「早さ」と「強さ」のワイヤーフレームから制作データへ

「早さ」と「強さ」のXD ー ワイヤーフレームから制作データへ ー

ディレクター

ワイヤーフレーム

デザイナー

「早さ」と「強さ」のXD ー ワイヤーフレームから制作データへ ー

ディレクター

デザイナー

「早さ」と「強さ」のXD ー ワイヤーフレームから制作データへ ー

ディレクター

デザイナー

「早さ」と「強さ」のXD ー ワイヤーフレームから制作データへ ー

ディレクター

デザイナー

データ移行

「早さ」と「強さ」のXD ー ワイヤーフレームから制作データへ ー「早さ」と「強さ」のこれまでの効率化

「早さ」と「強さ」のXD ー これまでの効率化 ー

ヘッダー
見出しテキストボタン

「早さ」と「強さ」のXD ー これまでの効率化 ースマートオブジェクトシンボル

編集編集

反映

反映

「早さ」と「強さ」のXD ー これまでの効率化 ー「早さ」と「強さ」の「アセット」について

「早さ」と「強さ」のXD ー「アセット」について ー

アセット

「早さ」と「強さ」のXD ー「アセット」について ー

カラー
文字スタイルシンボル

「早さ」と「強さ」のXD ー「アセット」について ー

カラー
文字スタイル

シンボル• カラー または グラデーション• フォント• ウエイト
• サイズ

• 字間
• 行間
• カラー

• オブジェクト全般

「早さ」と「強さ」のXD ー「アセット」について ー

登録方法

選択

「早さ」と「強さ」のXD ー「アセット」について ー

登録方法

クリック

「早さ」と「強さ」のXD ー「アセット」について ー

登録方法

登録完了

「早さ」と「強さ」のXD ー「アセット」について ー

適用方法

選択

「早さ」と「強さ」のXD ー「アセット」について ー

適用方法

クリック

「早さ」と「強さ」のXD ー「アセット」について ー

適用方法

適用完了

「早さ」と「強さ」のXD ー「アセット」について ー

編集方法「カラー」「文字スタイル」
Mac control ＋ クリック
Win 右クリック

「早さ」と「強さ」のXD ー「アセット」について ー

編集方法「カラー」「文字スタイル」
パラメーター

「早さ」と「強さ」のXD ー「アセット」について ー

編集方法「シンボル」
ダブルクリック

「早さ」と「強さ」のXD ー「アセット」について ー

編集の適用対象「シンボル」
適用対象

「早さ」と「強さ」のXD ー「アセット」について ー注目「早さ」と「強さ」のXD ー「アセット」について ー

注目

アセット

カラーアセット

文字スタイル

「早さ」と「強さ」のXD ー「アセット」について ー

編集の適用対象

「早さ」と「強さ」のXD ー「アセット」について ー

この書式情報をアセットに登録！

ヒラギノ角ゴ
19pt

編集の適用対象
ドキュメントで使用している文字
ヒラギノ角ゴ
19pt

A1明朝
44pt

タカハンド
32pt

ヒラギノ角ゴ19pt

ヒラギノ角ゴ19pt

ヒラギノ角ゴ60pt

「早さ」と「強さ」のXD ー「アセット」について ー

編集の適用対象
ドキュメントで使用している文字

ヒラギノ角ゴ
19pt
ここで使ってるよ!

ヒラギノ角ゴ
19pt

A1明朝
44pt

タカハンド
32pt

ヒラギノ角ゴ19pt

ヒラギノ角ゴ19pt

ヒラギノ角ゴ60pt

「早さ」と「強さ」のXD ー「アセット」について ー編集の適用対象
ドキュメントで使用している文字

ヒラギノ角ゴ「アセットに登録した情報」と19pt
ヒラギノ角ゴタカハンド
ヒラギノ角ゴ
19pt

A1明朝
44pt

同じ条件のものすべて が編集可能※※カラーは、近似値も含めて変更対象
ここで使ってるよ!

32pt

19pt

ヒラギノ角ゴ19pt

ヒラギノ角ゴ60pt

「早さ」と「強さ」のXD ー「アセット」について ー

作業スピードの向上

修正に強いデータ

「早さ」と「強さ」のXD ー「アセット」について ー

3つの検索方法
このアセットはどこに使った？

「早さ」と「強さ」のXD ー「アセット」について ー

3つの検索方法
このパーツはどのアセット？

「早さ」と「強さ」のXD ー「アセット」について ー

3つの検索方法

あの名前のアセットはどこだ？

「早さ」と「強さ」のXD ー「アセット」について ー

3つの検索方法
このアセットはこのパーツはどこに使った？

どのアセット？

あの名前のアセットはどこだ？

「早さ」と「強さ」の「早くて強いデータ」の作り方
実際のデータをご覧ください

「早さ」と「強さ」のXD ー「アセット」について ー

作業スピードの向上

修正に強いデータ

「早さ」と「強さ」の他デバイスへの展開

実際のデータをご覧ください

「早さ」と「強さ」の「リピートグリッド」の活用法

「早さ」と「強さ」のXD ー「リピートグリッド」の活用法 ーパターン

「早さ」と「強さ」のXD ー「リピートグリッド」の活用法 ー

パターン

画像
作成

登録

実装
検証

調整

手間が掛かる…

再登録

再実装

「早さ」と「強さ」のXD ー「リピートグリッド」の活用法 ーパターン

実際のデータをご覧ください

「早さ」と「強さ」のXD ー「リピートグリッド」の活用法 ー

パターン

画像
作成

登録

実装
検証

調整

再登録

再実装

「早さ」と「強さ」のXD ー「リピートグリッド」の活用法 ー

パターン

画像
作成

登録

実装
検証
調整

効率的！

「早さ」と「強さ」のXD ー「リピートグリッド」の活用法 ー

点線、破線

「早さ」と「強さ」のXD ー「リピートグリッド」の活用法 ー

表組み

「早さ」と「強さ」のXD ー「リピートグリッド」の活用法 ー

作業スピードの向上

修正に強いデータ

他のアドビ製品との連携

他のアドビ製品との連携の向き・不向き

他のアドビ製品との連携

ー XDの向き不向き ー

XDがもつパラメーター

不透明度
角丸塗り
境界線
シャドウ
背景のぼかし他のアドビ製品との連携

レイヤースタイル

ー XDの向き不向き ー

アピアランス他のアドビ製品との連携

効果苦手ー XDの向き不向き ー他のアドビ製品との連携

フラットデザイン
得意ー XDの向き不向き ー

リッチデザイン苦手他のアドビ製品との連携

ー XDの向き不向き ー

CCライブラリ+
リッチデザイン苦手他のアドビ製品との連携

ー XDの向き不向き ー

CCライブラリ+
リッチデザイン
大丈夫他のアドビ製品との連携「CCライブラリ」について

他のアドビ製品との連携

ー「CCライブラリ」について ー

アドビの製品同士が連携するためのライブラリ

CCライブラリ他のアドビ製品との連携

ー「CCライブラリ」について ー

登録された素材を変更

LOGO

他のアドビ製品との連携

ー「CCライブラリ」について ー

すべてのアプリに反映

LOGO

他のアドビ製品との連携

ー「CCライブラリ」について ー

複数のユーザーで共有

LOGO

LOGO

LOGO

LOGO

LOGO

他のアドビ製品との連携

ー「CCライブラリ」について ー

XDと連携しているのは、PhotoshopとIllustrator

他のアドビ製品との連携

ー「CCライブラリ」について ー

XDと連携しているのは、PhotoshopとIllustrator

読み込み他のアドビ製品との連携

ー「CCライブラリ」について ー

XDと連携しているのは、PhotoshopとIllustrator

登録他のアドビ製品との連携

ー「CCライブラリ」について ー

登録方法※例：XDとIllustratorの場合

他のアドビ製品との連携

ー「CCライブラリ」について ー他のアドビ製品との連携

ー「CCライブラリ」について ー他のアドビ製品との連携

ー「CCライブラリ」について ー他のアドビ製品との連携

ー「CCライブラリ」について ー他のアドビ製品との連携

ー「CCライブラリ」について ー他のアドビ製品との連携

ー「CCライブラリ」について ー

編集方法※例：XDとIllustratorの場合

他のアドビ製品との連携

ー「CCライブラリ」について ー他のアドビ製品との連携

ー「CCライブラリ」について ー他のアドビ製品との連携

ー「CCライブラリ」について ー他のアドビ製品との連携

ー「CCライブラリ」について ー他のアドビ製品との連携

ー「CCライブラリ」について ー他のアドビ製品との連携

ー「CCライブラリ」について ー

全体レイアウト

画像編集・加工

アイコン
グラフィック

まとめ

まとめ

今日のおさらいまとめ

背景と課題ー 今日のおさらい ー「作業スピードの向上」「修正に強いデータ」が必要「Webのことに詳しくない」「スケジュール通りに進まない」「データ完成前にコーディング開始」

解決法「ワイヤーフレーム」からXDを使うこと「アセット」「リピートグリッド」で効率的に作る

活用「CCライブラリ」で「XDの苦手分野」を克服

まとめ導入で得られる効果・期待値

まとめ

品質ー XD導入で得られる効果・期待値 ー

設計ワイヤーフレーム※図は、イメージです

デザイン
検証
実装時間

まとめ品質

設計
ワイヤー
フレーム

※図は、イメージです

ー XD導入で得られる効果・期待値 ー

デザイン
検証何に使う？

実装時間まとめー XD導入で得られる効果・期待値 ー顧客満足度UPまとめー XD導入で得られる効果・期待値 ー

担当案件数UPまとめー XD導入で得られる効果・期待値 ーより良い「何か」ご清聴ありがとうございました