制作現場の働き方とワークフローが変わる

Web活用法Adobe XDCSS Nite in Aomori, vol.12「令和時代のウェブ制作トレンド」

株式会社まぼろし益子 貴寛

ちょっと自己紹介

let me introduce myself

益子 貴寛

Takahiro Mashiko

株式会社まぼろし 取締役CMO
株式会社メンバーズキャリア 技術顧問
年、栃木県宇都宮市生まれ
ウェブサイトの企画、設計、アクセス解析、リスティング広告運用、ランディングページ設計、検索体験の最適化など、ウェブマーケティング全般を担当
1975

アナリティクス（GAIQ）認定資格者
Google AdWords認定資格者
Web検定 プロジェクトメンバー
日本マーケティング学会 会員
元・金沢工業大学大学院 工学研究科 客員教授
Google主な著書

our books

主な案件

our works

話す内容content at a glance

ワイヤーフレーム再考
2 事例から見る成果物
3 デザインやプロトタイプへの展開
おすすめのプラグイン
41

従来のツールの欠点

faults of typical tools

学習コストは低いが画面設計には向かない

テキストには強いがオブジェクトの配置が煩雑

高機能なデザインツールだが学習コストが高いそこで、Adobe XDの出番です

try using Adobe XD

Design at the Speed of Thought

思考の速度でデザインするたとえば、ワイヤーフレーム

e.g. wireframeたとえば、デザイン

e.g. visual designたとえば、企画書や提案書

e.g. planning or proposal sheetたとえば、プレゼンスライド

e.g. slides for presentation

ワイヤーフレーム再考
guide to make wireframes

1ワイヤーフレームとワークフロー

企画

wireframes on workﬂow

設計
ワイヤーフレーム（コンテンツ整理含む）

制作
開発

公開
運用

ワイヤーフレームの2つの役割

2 roles of wireframes

企画フェーズの要望や要件をうまくまとめること
設計フェーズがスムーズに進むように配慮すること

わたしの守備範囲

my job range

このあたり

このあたり

企画
提案書

制作
開発

設計
要件定義

コンテンツ整理ペルソナ

サイト設計
ワイヤーフレームカスタマージャーニー

設計

UI

デザイン
プロトタイプ公開運用

わたしの守備範囲

my job range

企画
提案書

制作
開発

設計
要件定義

コンテンツ整理ペルソナ

サイト設計
ワイヤーフレーム
カスタマージャーニー

設計

UI

デザイン
プロトタイプ

公開運用ワイヤーフレームの心得

principles of wireframes

ロゴ、テキスト、写真、イラストなどの素材を早めに支給してもらう（または、準備する）
ある部分が量が増えたり減ったりなど、スケーラブルな整理を心がける～80パーセント基準で仕事を進めて、関係者に早めに共有する70

スキルを高めよう

improve your skills

ライティング、デザイン、UXD、UI設計など、自分の得意分野を深めたり広げたりできれば、もっと使えるツールになる
ディレクターやマーケターとしては、ライティングのスキルを高めるのが近道
ワイヤーフレームなどのテキストは、アタリではなく本気でしっかりとエネルギーを注ぐ

energize your project

考えてみましょうエネルギーを注ぐとは、どういうことでしょうか？

しっかりとエネルギーを注ぐ

energize your project

エネルギーを注ぐ抽象と具象を何度も行ったり来たりするなら、きっとできる

Adobe XD

you can do that三強時代に突入か？

3 emerging tools for design and prototyping

Adobe XDFigmaSketch

事例から見る成果物
case studies

23

型ウェブページLP

webpages for landing from ads and so on

使い回す素材はアートボードの外（ペーストボード）にまとめておくと便利

型ウェブページLP

webpages for landing from ads and so on

デザインまで展開する場合はUIの定義をしておくとなおグッド

ツリー型ウェブサイト

website based on a tree structure

ツリー型ウェブサイトは目次（サイトマップ）を1ページ目に用意しておく対話型コンテンツ

dialog content

画面遷移の深さに合わせてアートボードを整理しておくスマホアプリのプロトタイプ

prototype for smartphone app

クリッカブルな部分をわかりやすく示すスマホアプリのプロトタイプ

prototype for smartphone appを取り入れたり
Atomic Design

MVPを素早くつくろう

make a minimum viable productデザインやプロトタイプへの展開
for design works or prototypingカラーを登録しよう

deﬁne your colors

文字スタイルを登録しよう

deﬁne your text styles

レイアウトグリッドを使おう

use layout grids

設計の場合は「方眼」もよい
UI

レイアウトグリッドを使おう

use layout grids

アートボード
初期値 1,366px

レイアウトグリッド列 12
段間隔 30列の幅 68
左右マージン 110

コンポーネントを使おう

共通で使うオブジェクト（旧「シンボル」）

use components

リピートグリッドを使おう

use repeat grids

繰り返し配置するオブジェクト

リピートグリッドを使おう

use repeat grids

ボイスレコーダーにはメリットがいっぱい！！ 今日から ボイレコ 生活、してみない？
生活 ビジネス 学習 趣味
2019.04.10

テキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキスト…

パワハラ対策には音声録音が一番の武器！
安全・安心のクラウド環境で、録音データを保存・管理
生活 ビジネス 学習 趣味
2019.04.10

テキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキスト…

デモ種類のテキストボックスを使おう2

use 2 types of text boxes

なりゆきで伸縮するボックス
幅と高さを決められるボックス

プロトタイプを使おう

use prototype feature

オーバーレイ
トランジションのさせ方

最初の画面いろんな共有方法を使おう

use various share tools

共有

書き出し

いろんな共有方法を使おう
PNG →
PDF →

use various share tools

アートボードをバラバラに書き出し
アートボードを一揃いで書き出し

共有

書き出し

プレビュー用に共有 → ブラウザで確認
開発用に共有 → デザインスペックいろんな共有方法を使おう

use various share tools

プレビュー用で共有すれば、ブラウザで確認し、コメントがつけられて便利プラグインを使おう

use plugins

おまけappendix

スクロール固定を使おう

use ﬁxed element

広いメニューから狭いメニューへスクロール固定を使おう

use ﬁxed element

切り替え後のメニューのほうに「スクロール時に位置を固定」をオン（デザインではなくプロトタイプの画面で）おすすめのプラグイン
recommended plugins

4プラグインを見つける

ﬁnd plugins

プラグインを検索

search plugins

検索系プラグイン

UI

plugins for UI elements

VizzyCharts

icondrop

Odin Charts

Confetti

UI Faces

Pattern Maker

PhotoSplash

Calendar

棒グラフや円グラフの挿入
さまざまなグラフの挿入
顔写真の自動生成
顔写真の自動生成

さまざまなアイコンの挿入
オブジェクトのランダム複製
オブジェクトのパターンを生成
カレンダーの挿入

デザイン系プラグイン

plugins for design

Artboard Plus

アートボードの整理や並び替え
Rename It

アートボード名やレイヤー名の置換
Notes and Annotations

矢印や付せんをつけられるツール
Color Blender2

つのオブジェクトの色をブレンドして中間色を段階的に生成ユーティリティ系プラグイン

plugins for utility

Mimic

ウェブサイトのフォント、カラー、画像などの抽出

テキスト校正くん

オブジェクト内のテキストの校正ツール
Copy SVG Code

オブジェクトのSVGコードを生成
Remove Decimal Numbers

幅、高さ、XとY値から小数点を削除

まとめclosing

企画・設計の中心にAdobe XD
コンテンツ整理
テキストライティング

use Adobe XD as a key tool①

ワイヤーフレーム
画面設計

ライター

ディレクター

③

デザイン
UI設計

デザイナー

⑤
④

コーディング実装

クライアント企業
社内関係者

エンジニア

②

企画・設計の中心にAdobe XD
コンテンツ整理
テキストライティング

use Adobe XD as a key tool①

ワイヤーフレーム
画面設計

ライター

プロトタイプ（プレビュー用に書き出し）
PDF／PNGディレクター②

③

デザイン
UI設計

デザイナー

プロトタイプデザインスペック⑤（プレビュー用に書き出し）（開発用に書き出し）
PDF／PNG
コーディング④
実装

クライアント企業
社内関係者

エンジニア

ぼくらの中心に、Adobe XD

Adobe XD ecosystem

出典：https://twitter.com/commonstyle/status/1137525778613018624

ありがとうございました
thank you!!

cybergarden
takahiromashiko
takahiromashiko