CSS Nite公式サイト

2018年8月11日（土）UMEDAI 大阪梅田 会議室で開催したCSS Nite in Osaka, vol.45「All About XD」 w/YATのblog のフォローアップを公開します。

• （1）YATさん
• （2）鷹野 雅弘さん
• （3）松下 絵梨さん
• （4）松下 絵梨さん
• （5）森 和恵さん
• （6）栄前田 勝太郎さん
• （7）池原 健治さん

2018年9月29日、大崎ブライトコアホールでCSS Nite LP58「Coder’s High 2018」を開催し、330名の方にご参加いただきました。

ツイートは下記にまとめました。

• CSS Nite LP58「Coder’s High 2018」 - Togetter

次のブログで取り上げていただきました。ありがとうございます。

• CSS Nite LP58に参加してきました｜140文字では伝えきれない想い｜note
• CSS Nite LP58 Corder's High 2018にいってきました - 寝ても覚めても犬が好き
• 初めてCSS Niteに参加しました #cssnite | chiilog
• 初めて東京のwebセミナー「CSS Nite」に参加しました！ | マイホーム
• CSS Nite LP58「Coder’s High 2018」に参加しました！
• CSS Nite LP58「Corder's High」に参加してきました | マテンロワークス

講演者のブログなど

• JavaScriptフレームワークは、習得しないといけませんか？という質問への回答｜ナユ｜note
• CSS Nite LP58「Coder's High 2018」 | 覚え書き | @kazuhito

開催から90日を目安に、スライドや動画などを公開する予定ですが、ビデオ参加にお申し込みいただくと、いち早くご覧いただけます。

2018年6月30日（土）大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップとして、濱野 将さん（IMAKE）の『>今日から使えるようになる！Adobe XDの基本的な利用方法』セッションのスライドなどを公開します。

• スライド（PDF）
• サンプルファイル
• 動画

フォローアップメッセージは、イベント開催直後（2018年6月）の時点のものです。

フォローアップ

皆様、先日はご足労いただきありがとうございました。
「今日から使えるようになる！Adobe XDの基本的な利用方法。」でXDの使い方を開設させていただきました濱野です。

貴重な休日にもかかわらず、お話を聞いてくださり大変感謝しております。
参加いただいた皆様からのアンケートをすべて拝見させていただきました。
「勉強になった」「役に立った」「使ったことがあるけど知らなかった機能もあってためになった」などのお声も頂戴し、熱心かつ真剣に聞いていただけていたことが感じられ、登壇者として冥利に尽きる思いです。

実演で行ったXDのサンプルファイルと、素材として使用した画像とテキストは「sample.zip」に格納いたしましたので一度ご覧ください。

また、多くのご質問もいただいておりましたので、下記に記載させていただきました。

質問

クラウドで共有できないときどうするのか？

PhotoshopやIllustratorで作成した画像やパーツなどを、クラウド間で共有できない場合は、作成したそれぞれのツールでpngなどに書き出して、素材フォルダなどに格納してそれをドラッグ＆ドロップで配置しています。

プロトタイプはXDを持っていない人でも共有可能ですか？

ワークスペース画面右上の共有ボタンから「プロトタイプを公開」や「デザインスペックを公開」で共有可能です。なお、Adobeのアカウントを持っていない方でも、ゲストとして閲覧することができます。

Photoshopとの便利な連携法

Photoshopと同じくらい複雑なデザインができるのか気になりました。また、Photoshopで作って、XDに互換性があるのかが気になりました。

Photoshopと同じ複雑なデザインができるかというと、XDは操作性の軽さや起動時の速さを重視しておりますので、多角的にいろいろできる機能は備わっておりません。

ですので、得意な分野は得意なツールに任せて補完し、CCライブラリで共有したり、Photoshop連携をするとより効率的に作業が進みます。

以前、CC道場という番組に出演させていただいた際にPhotoshop連携について解説させていただいた動画がございますのでこちらをご覧ください。

• #206 XD NEWS スペシャル： Photoshopとの連携

XDからコーディングの時同じ動作になるようなcss/jsの設定が簡単になる方法はありませんか？

XDからのCSSやHTMLの書き出し機能はまだ備わっておりません。
現在の対応策としては、Macのみの機能ですが、サードパーティ製のZeplin・Avocode・Sympli・ProtoPie・Kite Compositorなど、デザイン処理ツールと連携してデータ転送をすることで制作したものを活かすようにすることも可能です。

使用される機会がございましたら、是非お試しください。

UIキット、コピペ以外の使い方ってあります？

本来であれば、他ツールとからパーツを持ってくるときと同じように、CCライブラリでパーツ共有ができるの理想なのですが、XDからCCライブラリへ登録できる機能がXDでは備わっていません。

ただコピー&ペーストに問題あり、コピーしたものがシンボル化されていると、複数回に分けてコピー&ペーストをすると同じシンボルも複製され、アセット内に同じシンボルがいくつもできてしまうという問題があります。

現在はUserVoiceでも指摘があるので、バージョンアップで今後使いやすくなるようになるといいですね。

カーニングでいつも困るのですがよい方法は？

たしかにそうですね。カーニングができる機能は備わっておりませんので、Illustratorで持ってきたsvgやpngファイルをCCライブラリやドラッグ＆ドロップで持ってくる方法しかありませんね。

余談ですが、縦書きにする機能もないので、その場合は上記の方法で補完して行うこともありました。

「ここが使いずらいのよ～」というのがあれば知りたい

質疑応答であったリピートグリッドのマージンを数値入力できない点もそうですが、使用したいフォントが一覧でサンプル表示できないのが使いづらさを感じますね。

XDのプロトタイプ共有が安全性（情報漏洩）の問題でまだ社内で許可されていません。業務でどのようにクリアしていますか？

幸い弊社クライアント様との取引ではまだそのような事例が発生していないのですが、もしそのようになった場合には共有にある「プロトタイプを公開」の「パスワードを設定」でベーシック認証を設けるか、ベータ版ですが「プロトタイプを公開」内の下部にある「非公開プロトタイプ」を一度進めてみるのはいかがでしょうか？

最新バージョンで追加された機能になりますので、詳しくはこちらを参照ください。

• プライベート共有（ベータ）

他ユーザー（個人アカウント）との共有は可能か？

個人アカウント間でのやり取りは、こちらも上記の「非公開プロトタイプ」内にある「招待」からメールアドレスで招待することで共有可能になります。よりセキュアな形で共有ができるかと思います。

プレビュー時の文字テキストのデバイス化と、リンク（外部）の埋め込みはできないのでしょうか？

プレビュー時は表示されているパーツがすべて画像になってしまうので、リンクの埋め込みはできません。

テキストに関しては、文面をクリップボードにコピーすることは可能です。共有内にある「デザインスペックを公開」から該当の文面があるアートボードに進み、その文面をクリックすると右側にスペック一覧が表示されるので、そこにあるテキストをクリックするだけで一括でコピーすることが可能です。

ご質問は以上となります。ありがとうございました！

誰でもかんたんに学べるAdobe XD入門講座

配布させていただいておりましたUdemy講座の「誰でもかんたんに学べるAdobe XD入門講座」はこちらのリンクよりアクセスいただけると、チラシと同じく特別割引（1,200円）で受講できますので、もっと詳しく自分のペースで学びたい方はこちらもご覧ください。

他にも何かわからないことなどがありましたら、遠慮なくメッセージなどでご連絡いただけたらと思っております。

濱野 将のFacebook

https://www.facebook.com/2yanko

また皆様とお会いできることを楽しみにしております！
CSS Nite LP57「All About XD」にご参加いただき、誠にありがとうございました！

2018年6月30日（土）大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップとして、長谷川 恭久さんの『XDが提案するこれからのデザイナーの働き方』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップメッセージは、イベント開催直後（2018年6月）の時点のものです。

フォローアップ

セッション1「XDが提案するこれからのデザイナーの働き方」で登壇した長谷川です。休日に時間をつくって来場していただき、ありがとうございました。基調講演ということもあり具体性が低めの内容でしたが、何かしら価値提供できていれば幸いです。

XDのようなコミュニケーションツールを使うことで方向性の共有はしやすくなると思います。しかしそれは、デザインを知らない人へのコミュニケーションも増えていくことも意味しています。ただそのときに考えておきたいのが、「デザインを知らない」で言う「デザイン」とは何を指しているのかという点です。

もし見た目のバランスや印象を語っているのであれば、それは「デザイナーだけが気にしていれば良いデザイン」です。デザイナーとして伝えなければいけないのは、「課題の共有」と「課題に対する解決の提案」です。 Web サイトを作ることは手段であり、課題でもなければ目的でもありません。ユーザーに何をしてほしいのか。ビジネスへどのように貢献するのか。それらに対して、あなたが作っているデザインがどのような役割を果たしているのかを伝えることが、デザインを知らない人に対してできることだと思います。

しかし、語るだけでは伝わらないですし誤解も招きます。だからこそ、XD のようなツールを用いて視覚化して伝えるような練習を始めていただけたらと思います。

アンケートでいただいた質問は Twitter で答えました。ディレクターがいない海外の話や他のデザインツールについて答えています。
http://bit.ly/2z0IxCn

ソーシャルメディアでフォローしていれば、デザイン関連の最新情報や、私が作っているコンテンツをいち早く入手できるので、興味ある方はぜひ。
Facebook https://www.facebook.com/yhassy/
Twitter https://twitter.com/yhassy
Instagram https://www.instagram.com/yhassy/

2018年6月30日（土）大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップとして、佐藤 修さん（フラッグ）の『Webサイト制作における「デザイナーの制作ツールとしてのXD」その活用方法』セッションのスライドなどを公開します。

フォローアップメッセージは、イベント開催直後（2018年6月）の時点のものです。

フォローアップ

休日の貴重な時間を使ってご来場いただき、誠にありがとうございました。
今回はこれからXDに触れる方が多かったので、説明の仕方もこれまでPhotoshopやIllustratorを使っていた方、また初めてXDを使う方にもわかりやすくなるよう、できるだけ比較をしたり、噛み砕きながら説明したつもりでしたが、いかがだったでしょうか。少しでもXDへの理解が深まっていただけたら幸いです。
ご紹介した操作方法の中でも、アセットについてはデザイナーだけでなく、ディレクターがワイヤーフレームを作るときにも大変便利な機能なので、ぜひ活用していただければと思います。

また、XDとは関係ないですが、セッションで使用した音源（SE、BGM）は自作したもので、今回のために書き下ろした曲になります。全て授業のチャイム（キンコンカンコーン）をベースに作曲していますので、気づかなかった方は、下記リンクからチェックしてみてください。
以下、質問への回答になります。

質問「デザインが全体で時短化されるのが想像しにくい。直すのはやはくなるけど、ライブラリを使って時短化できるのか疑問」

XDで作業の時短化もできるですが、その時短化した分を「クライアントに納得してもらうための時間にあてる」などで、結果、出し戻しが減らせたりすることで、トータルの時短化に繋がったりします。レイアウトしたり、フォントを選んだりするだけがデザインの時間ではない（それだけが時短化ではない）ということだと思います。
また、CCライブラリについては、時短化の材料ではなく、XDの表現力を補うための技術だと思っていただければと思います。

質問「Photoshopで管理していた素材全てをXDに移行する事は可能か」

Photoshopのデータの作り方や、更新頻度などの案件の性質によってさまざまですね。
なので、一概に「移行可能」とはいえませんが、条件次第では移行できると思います。

質問「プレゼンテーションのスライドは、何のアプリケーションを使っていたか」

Keynoteになります。このイベントで、初めて使いました。
スライドの作り方についても、多くの方にご好評いただき苦労した甲斐がありました（笑）

質問「すでに個別に作ってしまったパーツを、あとからアセットにまとめることはできるか」

「カラー」や「文字スタイル」については、あとから登録しても支障ないと思いますが、「シンボル」に関しては、後からの登録が向いていないのが現状です。
ですので、ある程度テンプレート化したものを最初に用意し、そこからプロジェクトを始めるのが良いと思います。

質問「パターンのPs/Aiへの展開方法が知りたい。/コーディングへの書き出し方法は」

リピートグリッドを解除すると個別のパーツとして選択できるので、こちらから展開するのが良いと思います。

質問「パターンをリピートグリッドで作ると重くなるが、解決方法は」

私の環境で重さを経験したことがないのでよくわからないでのすが、もしかしたら、リピートグリッドの内容（複雑さや画像数など）や、アートボードの数、もしくは、他の要因があるかもしれません。

質問「アセットの一括編集のとき、一部だけ編集対象から外したい場合はどうすればよいか」

この場合は、その「編集対象から外したいもの」を、予めパラメーターを変えておく必要があります。アセットはアセットと同じパラメーターに対して編集を行いますので、アセットと異なるパラメーター状態にすることで、回避できると思います。

質問「スマホからPCへの展開のときは、データはどうしているのか」

デモでお見せしたやり方の場合、デバイス毎にファイルを分けて制作するとよいでしょう。先に1デバイス分のデザインを仕上げ、そのファイルを複製して他デバイスへと展開することになるので、ページ数が出揃っていない時などは、この方法を取り入れるのが難しいかもしれません。

質問「「早さ」ではなく「速さ」ではないのですか？」

XDが軽いことで実感できるのは、動作としての「速さ」だと思います。ですが、ゴールはそこではなく、その恩恵を受けた結果としてコミュニケーションが加速し、時間的に「仕事が早く終わる」ことですので、本セッションの場合は「早さ」という表記としています。

soundcloud https://soundcloud.com/samuato/sets/chime

2018年6月30日（土）大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップとして、池原 健治さん（ソニー・インタラクティブエンタテインメント）の『コミュニケーションを可視化する！XDストーミング』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップメッセージは、イベント開催直後（2018年6月）の時点のものです。

フォローアップ

Adobe XD漬けの半日という長時間に渡ってご参加いただき、ありがとうございました。

Adobe XDの機能的な説明などは他のセッションの方々におまかせして、私からはコミュニケーションツールとして情報伝達を最適化したり、自由な発想で様々な使い方ができるXDの懐の深さをお伝えできるように心がけました。
自分の中では初めての試みとして、ステージ上スタンディングでのプレゼンにてお話をさせていただきましたが、スライド送りのミスなどで一部お見苦しいところもあり、申し訳ありません（もっと練習します！）。
まずは皆さまに「Adobe XDは楽しい！使ってみよう！」と感じてもらえたら幸いです。

セッションでもお伝えした弊社リクルートサイト制作にAdobe XDを活用した事例については、過去のインタビュー記事もご参考までに共有させていただきます。

参考リンク

• ～コミュニケーションをAdobe XDが視覚化するワークフロー

セッション中にお見せしたデモ

• キャラクタークリエイトUIの合体プロトタイプ（シュウゴ）
• Webコンポーネントのプロトタイプ1
• Webコンポーネントのプロトタイプ2

ご意見、ご質問に関して

（質問）XDストーミングは、修正・確認がスピーディーで簡単になるよ、と受け取ればよいでしょうか？

集まった関係者が頭の中で考えていることを、ラフでよいのでその場でイメージや動きを作成・修正して共有することで、「認識のずれを無くす」ということが最大の目的と考えています。
もちろん他のツールでもやろうと思えば同じことはできるのですが、Adobe XDのレスポンスの速さと修正に強い機能が、特にこの手法に適していると思っています。

（感想）デザイナーがXDに慣れていないとスピード感が落ちると感じました

もちろん操作に慣れているに越したことはありませんが、XDはデザインツールとしてはとてもシンプルな操作体系で、初めて触るユーザーでも比較的短時間で主要な操作を直感的に行えるようになります。
まずはご自分でいくつかプロトタイプまで作ってみて、慣れてきたところでブレストでも使用してみると良いかもしれません。

（感想）デザイナーとエンジニアのコミュニケーションが大事

弊社ではエンジニア（として動くこともある）の私からデザイナー側にAdobe XDを広めたという経緯から、比較的導入は楽でしたが、 学習コストの低さにより、その逆（デザイナーからエンジニアへ）も有りだと思っています。

（質問）エンジニア的に実装のつなぎこみでどうやってるのか気になる

弊社の場合デザインスペックが（物理的に）使えないので、基本XDファイルをデザイナーとエンジニアで直接やり取りしています。位置情報や色やフォントなどを取得するのもPhotoshopなどと比べてもやり易いと感じています。作り込んだイラストなどは一部Illustratorファイルから直接書き出したり、写真素材などは別途まとめて手配してもらうこともあります。
私自身がXDでデザインしたり、XDからコーディングしたりすることがあるため、デザイナーとエンジニアでお互いに見易いXDファイルを作るように心がけています（マークアップを意識したレイヤー・グループ構成など）。

（キーワード）イケてない要望はイケてないデザインを作って見せたほうが説得力がある

いかに最小限のパワーでイケてなさを見せるかがポイントです。・・が、イケてないと思われる中にキラリと光るものがあるときもあるので、生かすか殺すかはあなた次第です！

（感想）XDストーミングは時間がとれないクライアントとの会議の時に使えそう

田中さんのセッションでもおっしゃっていましたが、まさに「井戸端会議」感覚でイメージや動きの共有と、その場でちょっとした修正までできるのは短時間のミーティングでも効果がありそうです。

（感想）XDストーミングは使いどころは選びそう。クライアントのリテラシーが低いと、かえってUIのディテールばかりの話になってしまう気がしました

「なんとなく頭には浮かんでるんだけど、やりたいことをうまく伝えられない」という場面にも「例えばこんな感じにしたらどうでしょう」とラフなイメージを作りながら提案することができるのは、「考える速度でデザインできる」XDならではのミーティングスタイルです。クライアントとのレビューではディテールよりも、どちらかというと全体のストーリーや画面構成、デザインの方向性などの認識を合わせることを重視し、その分内部確認でUI設計などのディテールを詰めるようにしています。

（感想）複数の人間をアサインして時間と場を共有するのはいろいろ難しいのでは？

確かにクライアントまで巻き込んだXDストーミングを行うのは、まずセッティングするのが一番大変かもしれませんが、作り込んだ状態でレビューしてちゃぶ台返しがあるよりは、短い時間でも途中の段階で見せながらその場で修正していくほうが、結果的には近道になる場合もあります。

（質問）リアルタイムブレストはどの程度の時間をとっているのでしょうか？

デザイナー同士やエンジニアなど、実作業する人間の場合は2時間程度長く行うこともありますが、マネージャーやクライアント、仮想ユーザーなどの場合は予定を確保できる現実的な時間として1時間程度で行うことが多いです。

（質問）ブレストしてもしゃべらない人はどうすればよいですか？

日本人はシャイな方が多いので、そこは議長が適度に話題を振るなど、欧米式が良いかと思います。

（感想）同じくセキュリティの関係でクラウド機能が使えないため、参考になりました（他同意見）

クラウドを使えないことで、かなり機能的な制限を受けるAdobe XDですが、リアルタイムなコミュニケーションならではのメリットと、（デザインスペックではなく）XDファイルそのものを下流工程にやり取りするワークフローを突き詰めていきたいと考えています。
（もちろんクラウドが使えるに越したことはないですが！）

（感想）社内サーバーのみで（セキュアに）クラウドが使えるようにAdobeにリクエストしたいです

是非！

（質問）クラウド機能を使えないところも多いと思います。何か外部とのやりとりでできる方法があれば知りたいです

上記ご意見のように、社内サーバーのみでのクラウド利用などができれば望ましいですが、Adobe XDは無料で利用できるスタータープランがあるため、XDファイルを開ける環境を導入することは可能です。ブラウザを介した共有はできませんが、XDファイルをやり取りして、直接プロトタイプを実行することである程度は代用できるかもしれません。

（質問）できるだけアートボードは増やさないほうが管理は楽？

確かにアートボードが少ないほうが管理しやすいですが、優れたUI/UXの模索にはどうしてもアートボードは煩雑化しがちです。無理に増やさないように考えるよりも、シンボルやアセット機能をうまく使って、アートボードが増えてもまとめて修正できる構造にしたり、過去のバージョンと住み分けて、複数のパターンを常に把握できるようにするなど、地味ですが整理整頓も大事です。

（感想）カルーセルのプロトタイピングのヒントになる情報が入手できてとてもよかった

実は今回お見せしたデモは、前回のCSS Niteのときにアンケートで頂いたご意見
「メインビジュアルのスライドを見せるときなどに（埋め込みコードが）使えそうだと思いました！」
を参考に制作しております（笑）
誰もがアイデア次第で面白い使い方ができる可能性を秘めているのもXDの魅力です。

（質問）埋め込みコードを利用したスライダー部分などはそのままHTMLに配置、本番運用できるのでしょうか？

見た目だけでいうとコーディングで実装したものに近いイメージ・動きはできるかもしれませんが、実態はAdobeのサーバーに置かれたプロトタイプのため、急な仕様変更なども起こり得ます。また、アクセシビリティ、SEOの観点からも、あくまでコンポーネントベースでのプロトタイプとして利用するのがよいかと思われます。

（感想）埋め込み機能の利用方法がわかったのが嬉しい

本来は例えばブログ記事などで、作成したプロトタイプを埋め込んで紹介する、といった使い方が想定されます（笑）
Webページそのものに違和感なく埋め込みプロトタイプを同化できるので、より実装に近い状態でのプレビューも可能です。

（キーワード）シュウゴ（他同意見）

シュウゴはあなたの心の中に・・・

（感想）どこいつキャラたちに会えたのも嬉しかったです！

ありがとうございます！（最近ゲームのほうが出ていませんが…）弊社どこいつ担当プロデューサーも喜ぶと思います！

2018年6月30日（土）大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップとして、田中 忍さん（LIFULL）の『あらゆるワークフローを改善！デザインツールを越えたXDの底力』セッションのスライドなどを公開します。

• スライド（PDF）
• XDによる履歴管理のデモ
• 動画

フォローアップメッセージは、イベント開催直後（2018年6月）の時点のものです。

フォローアップ

ご参加いただいた皆様、ありがとうございました。
私からは「汎用性」をテーマに、実例を交えつつXDの利用例をご紹介させていただきました。
XDは、挙動の軽快性、共有機能の利便性、イージーな操作性といった特徴により、さまざまな用途に耐えうるツールに仕上がっています。

今回多くの反響をいただいた履歴を記録／管理するという使い方も、ハッと閃いた訳ではなく「使っているうちに自然とそうなった」という感覚です。XDは利用者の感性に呼応して多彩な可能性を示してくれます。
今回のセッションが、皆様の制作活動の一助となれることを願っています。

ご質問と回答

（感想）ワークフロー上で、どの立場の人が、どのように、どれくらいXDに触っていたかが分かりにくかった。

おっしゃる通り、今回は「誰が」という点はあえて深く触れずにおりました。XDが持つ、誰にでも様々な場面で活用できる汎用性をお伝えしたかったためです。
XDの利用に関わらず、どんな立場の人がどんな関わり方をするかは、現場ごとに全く違う場合もあります。
皆様のお立場で、用途を見出す上でのご参考にしていただければ幸いです。

（質問）関わる人にXDのリテラシーが無くては難しいのでは？

プロトタイプの共有画面がわかりやすいので、リンク1本渡して見てもらえれば順応いただける事がほとんどです。
（「気になった点は共有画面のコメント欄に」といった一言は添えたりします）
作業者として仕様書を書いたりするには多少慣れる必要はありますが、XDは直感的な操作性で誰でもすぐに扱える強みもあり、ハードルはそう高くありません。
なお、XD導入におけるハードルをどう超えるか、については、私より栄前田さんのセッションの方がご参考になるかもしれません。

（質問）履歴管理の方法を詳しく知りたい。

大変恐縮ながら、事例における実際のXDデータの共有は出来ないのですが、代わりにサンプルのXDデータを用意しました。下部のダウンロードリストにございます。
あくまで1つの例ではございますが、よろしければご覧になってください。

（質問）仕様書とあるが、実際、中間成果物の意義が強いので、契約（請負の納品）としてどこまで耐えるのか？

最終成果物を最高品質で提供するためには、成功要件を確実に押さえながら進行し続けることが何より重要です。
私が3つ目にご紹介した地方創生の事例がまさにそうですが、ワークフロー上の経過地点で都度生まれるアウトプットに「コレジャナイ感」があった場合、（要件定義で躓いていない前提で）何かしらの要件を満たせていなかったと考えられます。
※地方創生事例でいうと、「期待感を醸成する」という要件があったのに、ターゲット視点でワクワクするものに仕上がりそうにない仕様書が渡されたので、精度が低い、と表現していました。

逆に言えば、構成段階で要件をこぼしているだけなのでコミュニケーションによって解消することが出来ます。その点でXDは、密なコミュニケーションを取りながら画面構成のプレビューを高速で回す事ができるため、優れた適性を発揮します。
こうした経過地点における要件達成の品質を厳しく見ていければ、最終成果物もよりよいものになると考えております。

（質問）XDをデザインデータとしてエンジニアに受渡した際、エンジニアはこのXDデータをどうコーディングに落とし込んでいるか？

コーポレートサイトの時は、XDファイルをそのまま渡していました（2017年当時）。エンジニアの手元は当時見ていませんが、IllustratorやPhotoshopからデータ抽出する際と同じ方法で対応していたはずです。
ただし、その後XDに「デザインスペック」という機能が実装されました。これは、デザイン画面の色、要素のサイズ、要素と要素の幅、といった実装に必要なさまざまな情報を、ブラウザ上で簡単に取得できる機能です。リンク1本で共有できます。
これが実に便利なので、現在ではXDファイルそのもの＋デザインスペックのリンクを渡す、という対応になりました。

（質問）XDを導入するとき反対意見は出なかったか？

現場レベルでは特に反対はありませんでした。むしろ井戸端会議で「良いツールだ」と感じてくれる人が多かった印象です。
ただセキュリティ・ポリシーの関係で、プロトタイプ共有に関して情報システム部門との折衷が必要でした。
しかし最近ついに、共有リンクにパスワードが掛けられるようになったので、今は特に問題なく利用できています。

（質問）デザイナー以外でXDを使う人は社内にいるか？

います。マークアップエンジニアは、デザインデータをXDで渡される場面で必然的に使いますし、デザイナーの出身ではないディレクターが、ワイヤーフレームの制作でXDを使っているケースもあります。

2018年6月30日（土）大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップとして、境 祐司さん（Creative Edge School Books）の『』セッションのスライドなどを公開します。

• スライド（PDF）9.6MB
• デモの動画ページ（デモ映像を視聴できます）
• 動画

フォローアップメッセージは、イベント開催直後（2018年6月）の時点のものです。

フォローアップ

ご参加された皆さん、お疲れ様でした。
このセッションで、Adobeのクリエイティブツールが「AI（人工知能）の技術で少しづつ進化し始めている」ことを知っていただけたら幸いです。

Adobe XDのツールバーには、長方形ツールや楕円形ツール、ペンツールなど、ごく基本的な機能しか搭載されていませんよね。このツール構成は、2016年3月に登場したプレビュー版から変わっていません。XDの開発チームは、アプリケーションソフトのパフォーマンスを最も重視しており、今年の1月アップデートでもズームパフォーマンスが大幅に強化されました。
プロトタイピングツールの開発で死守すべきは「軽快に動く」こと。多少古いマシンでも、もたつくことなく速く動くことがとても重要です。紙とペンだけの「ペーパープロトタイピング」が現在でも多くの企業で実践されているのは、アイデアを具現化しやすく、誰でも参加できることが大きなメリットとして評価されているからです。プロトタイプ制作は「作品」づくりではありません。コミュニケーションを促進するためのツールであることを理解しておく必要があります。

AIに処理をさせて時間を短縮できれば、もっとアイデアを出して、意見を聞くことができます。「キレイに作り込む」より「速くカタチにして対話する」ことがプロトタイピングでは価値になります。

今回は、Photoshopとの連携に絞りましたが、（2018年4月現在）50のAI機能がAdobe製品・サービスに搭載されており、まだまだ有効な手法があります。XDにAI機能がなくても、CCライブラリを介して作業すれば間接的にAIの恩恵を得られます。
Adobe Senseiの情報はまだ少なく、ネット検索しても出てきませんので現段階で「AI機能を使いこなす」のは難しいと思いますが、ゆっくりと時間をかけて、少しづつ試してみてください。

（ご質問）ミーティングしながらプロトタイプも作っているそうですが、具体的にはどのようにやっているのですか？

XDをメモ帳やスケッチブックのように使っています。私の場合は、タブレットPCでXDを使っていますので、アイデアを出しながら「落書きをするように」高速プロトタイピングをしています。こちらの動画をご覧いただければ作業の様子がわかると思います。
タブレットPCでXDを使用（Twitterの動画投稿）

（ご質問）Adobe Senseiというのは今使えるのでしょうか？

Adobe Senseiは、Adobeが開発しているAI（人工知能）技術群の総称です。AIの機能は10年以上前からPhotoshopやAfter Effectsなどに搭載されていますので、私たちはCSの時代からAIの機能を使っていることになります。今回ご紹介したAI機能もかなり古い機能です。
ただし、現在のAI技術で上書きされている機能も多く、処理能力は向上しています。最新のAIは常に「学習」しており、リリース時に「使い物にならない」レベルでも日々改善されていますので、今回のように「多くのユーザーが忘れてしまった古いAI機能」を紹介しています。

（ご質問）Adobe Senseiが使われている機能のリストはありますか？

50以上のAdobe製品（およびサービス）にAI技術が使われていると公式発表されていますが、その詳細については公開されていません。PhotoshopやLightroom、Adobe Stock、Premiere Pro、After Effectsなどのリリースノートには、搭載されているAI機能について簡単な情報が掲載されています。また、PhotoshopやLightroomの環境設定の中には最先端技術の機能を試すことができる「テクノロジープレビュー」の項目があります。

（ご質問）XD（とPhotoshopの連携）とInVision Studioではどちらが優れていますか？

プロトタイピングの作業内容や「何を求めるか」によって評価が異なります。
外観のデザインならグラフィックスに特化したPhotoshopを使いXDとデータを共有した方が効率的で表現の自由度も高いと思います。
アニメーションを含むインタラクションを手軽に設定したい場合は、InVision Studioが便利です。ただ、今回ご紹介したProtoPieとXDを組み合わせて使用すれば、もっと高度なインタラクションが可能になります。
まずは、試用版（期間限定で使用できるバージョン）をインストールして実際に試してみることをお奨めします。

XDやAdobe Sensei、AI活用などの情報は、Twitter（@commonstyle）で発信しています。

2018年6月30日（土）大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップとして、栄前田 勝太郎さん（リズムタイプ）の『クライアント視点から考えるXDの導入・活用方法』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップメッセージは、イベント開催直後（2018年6月）の時点のものです。

フォローアップ

「ディレクターが考えるXDの導入・活用方法」で登壇した栄前田です。ご参加ありがとうございました。
他のセッションでXDの様々な可能性が見えたところで、実際のクライアントワークにおける導入や実務における活用方法を紹介させていただきました。
XDはデザイン、プロトタイプ作成、コミュニケーションと多岐に渡って活用できるツールではありますが、新しいツールはそれをいかに導入し、実務においてどのように活用していくかという点が課題になりますので、それについて何かしらの参考になれば幸いです。

アンケートで頂いた貴重なご意見、ご質問に関して

「ディレクターが考える」といったテーマのセッションでしたが、導入・活用の参考になったというご意見を多数いただけました。また、制作側の視点ではありましたが、発注側となる皆さまも発注される際の参考になればと思います。
幅広くXDを利用したケースを紹介しましたが、もちろん何でもXDを使えばいいということではなく、クライアントやプロジェクトの性質に合わせて適宜判断する必要はあります。今回は幅広く紹介することで、皆さんの参考になるケースがあればと考えていました。

（質問）仕様書をXdでとありましたが、グーグルシートに移す時はキャプチャしてはりつけたのでしょうか？アートボード買いのオブジェクトは書き出せないと思いますので

キャプチャでも書き出すのでもなく、XDから該当部分を選択・コピーして、Googleスライドにペーストしていました。
XDからGoogleスライドへのコピー&ペーストは見た目はほぼそのまま持って行くことが可能です。（ただし、テキストも画像化されてしまうので、その後の編集は行えません）

（質問）クライアントとの成果物はどうしているのか知りたかった

クライアントと事前に相談・調整していますが、共有したXDのURLでOKとしてもらうことが多く、それ以外では書き出したPDFファイル。または先方にXDの環境があればXDファイルを成果物としています。

（質問）クライアントがXDを導入しない場合、どこまでの活用が可能か知りたいです。

ほとんどの場合はクライアント側でXDを導入する必要はなく、共有リンク+α（補足ドキュメント等）でプロジェクトに導入・活用できるのではないかと考えています。
クライアント側でXDの導入が必要かどうかは、クライアント側にXDファイルを編集したいというモチベーションとその時間が取れるかどうか(その体制が作れるか)で判断されるのがよいかと思います。

（感想）ただ簡単にできることをクライアントに見せることで、簡単だから安くしてよ・・・的にならないかとても不安

弊社の場合ですが、XDを利用する部分については、どのようなフローとなり、どれくらいの稼働工数がかかるかを伝えています。
簡単に見えるけど、実は工数はきちんとかかっているということを伝えることで回避できるかなと思われます。
（クライアントの関係の問題もあるかと思われますので、一概には言えないと思いますがご参考までに）

（感想）最初に紙やPPTでほしいと言われるので、導入するスキがない（2重で作ったりする）

2つ対応パターンがあると思います。

1つは、なぜ紙やPPTで作る必要があるのか、本当に紙やPPTでなければならないのか、という話をするきっかけにしてしまうパターンです。
この場合、XDを導入したパターンでどのように変わり、どのようなメリットがあるのかを合わせて伝えます。
スタータープランができたことで導入のハードルは下がりましたので、クライアントにもXDの環境を作っていただく提案を行ってもよいかと考えます。
もう1つは、紙やPPTで作りつつ、部分的にXDを利用してみて、比較してもらうパターン。手間はかかってしまうのですが、比較してもらい、XD利用に誘導するように提案します。

（感想）今までのお話はデザイナー向けの話が多かったので、ディレクターとしての活用事例、とてもタメになりました。

（感想）ディレクションの立場としていかに利用すればよいのか？ということがよくわかりました

（感想）ディレクションの自分にとって一番ささるセッションでした。（他同意見）

そう思っていただいてよかったです。

XDはディレクターにこそ使ってほしいツールです。クライアント、デザイナーやエンジニアとのコミュニケーションや、プロジェクト全体の成長のきっかけになるツールですので、ぜひ活用してもらえればと思います。

（感想）クライアントによって熱量がちがうことが、制作側にもその熱量がわかるしくみができるとうれしいなと思います。

体制や状況によるところはあると思いますが、クライアントとの打ち合わせの場に制作側のメンバーも参加してもらうのが一番伝わるかなとは思います。
ディレクターや仕組み的なもので伝えることも可能と思いますが、熱量という点については、実際に対面して体感してもらえると、納得感が得られると考えています。

（感想）XDで良いかはわかりませんね。失敗談は回避できなかったもんですかね？

XDが適しているかどうかはクライアントやプロジェクトの性質によりますので、もちろんケースバイケースですが、トライしてみる価値はあるかと思います。

弊社はクライアントとのコミュニケーションにかなり時間をかけますが、やはり初めてのお取引のクライアントの場合は読み切れない場合があり、失敗談のケースに至ってしまうこともあります。
回避できるのがベストですが、失敗となってしまったケースもそれを次回以降への改善への学びとするようにしてします。

（感想）失敗例はリアルでした。クライアントにも使ってもらうといのは挑戦してみたい。

ぜひ挑戦していただきたいです。それによって、いままでクライアントからは出てこなかった意見やお互いのコミュニケーションの変化を得られると考えています。

（感想）Wires jp ステキです、使います

ありがとうございます！思っていた以上の反響をいただいてとても嬉しいです。

汎用的で実戦で使えるキットとして作りましたが、皆さんに使っていただいて、ご意見・ご感想いただければ幸いです。

Wires jpについてのご意見・ご感想は、
Adobe XD JapanのFacebookページ 、または私のTwitter @katsutaro 宛てにいただければと思います。

2018年6月30日（土）大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップとして、北村 崇さん（TIMING DESIGN）、湯口りささん（ネットパイロティング）、轟 啓介さん（アドビ システムズ）の『Adobe XDとともに進化するデザインの未来』セッションのスライドなどを公開します。

• スライド
• スライド中の書き出し設定一覧表部分
• デモファイル
• 動画

フォローアップメッセージは、イベント開催直後（2018年6月）の時点のものです。

フォローアップ

ご参加ありがとうございました！
最後のセッションということで、他のセッションでカバーしきれなかった細かなポイントや、これからのお話をさせていただきましたが、他にもまだまだ伝えたいことや伝えきれなかったこともあります！
XDは今後もどんどん進化をしていくと思いますので、皆さんも色々な使い方をためしてみてください。またデザイナーやディレクター、プロジェクトをつなぐ架け橋としても、ぜひ活用してみてください。

コメント湯口

ご参加ありがとうございました。
XDは、「できないかも？」が「できちゃう！しかも簡単に」に変わっていく毎月の更新が楽しみなデザインツールです。その楽しさを少しでもお伝えできたならとても嬉しいです。
今回のイベントをきっかけに、社内での情報シェア、グループ活動・SNSでのちょっとした投稿といった小さなところからXDそのものを利用してみたり、周りの方におすすめしたりしてみてください。
XDからはじめるデザインコミュニケーションでどんどん周りを巻き込んでいきましょう！

質問と回答

JPGは結局自分で2倍を作らなければいけない？

いいえ。次の手順で1倍と2倍サイズのJPGファイルを一度に書き出せます。

1. XDで予め用意されているアートボードを作成します
2. 書き出したい画像を配置しサイズ調整や型抜きなどの加工をします
3. 書き出す画像を選択して書き出しの設定をする画面まで操作を進めます
4. フォーマットを「JPG」に指定します
5. 書き出し先を「Web」に指定します
6. 設定サイズは「1x」に指定します
7. 書き出します

注意点は、2倍程度のサイズの画像を用意しておくこと。そうしないと2倍で書き出した画像が荒くなってしまいます。

もし、デザインは実寸の二倍サイズで作ることが決まっている場合には、アートボードのサイズに注意し、設定サイズに「2x」を設定します。

※設定サイズについては、配布している「スライド中の書き出し設定一覧表部分」を参考にしてください。

オーバーレイ スクロールやり方がわかりません

1. どの領域でスクロールさせたいかを親のアートボード上でデザインします
2. アートボード外に作ったデザインを移動します
3. アートボードツールで移動したデザインに沿ってアートボードを作成します
4. 背景になるシェイプを固定位置にします
5. アートボードを選択してスクロールの項目を「垂直方向」に設定します
6. アートボードの高さを広げます
7. プロトタイプモードでオーバーレイを設定します

配布しているデモファイルで、ちょっと工夫が必要なオーバーレイサンプルを確認できます。オーバーレイ スクロールも設定済みですので合わせてどうぞ。

URL

• XDの開発中機能を見てみよう(2018年6月版)

• 公式Facebookページ「Adobe XD Japan」

2018年6月30日（土）大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップを公開します。

• （1）長谷川 恭久さん
• （2）濱野 将さん
• （3）佐藤 修さん
• （4）池原 健治さん
• （5）田中 忍さん
• （6）境 祐司さん
• （7）栄前田 勝太郎さん
• （8）北村 崇さん、湯口りささん

2018年3月3日（土）ベルサール神田 イベントホールで開催したCSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」のフォローアップを公開します。

• （1）名村 晋治さん
• （2）英 誠一朗さん
• （3）後藤 賢司さん
• （4）横澤 幸満さん
• （5）草間 淳哉さん
• （6）枌谷 力さん

2018年3月3日（土）ベルサール神田 イベントホールで開催したCSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」のフォローアップとして、草間 淳哉さん（ウェブエイト）の『信州の68才 オヤジ、ウェブで大手企業に勝つ！』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画
  

フォローアップメッセージは、イベント開催直後（2018年3月）の時点のものです。

フォローアップ

CSS Nite LP56 の
「信州の68才オヤジ、ウェブで大手企業に勝つ！」
に登壇いたしました、ウェブエイトの草間です。

内容はいかがでしたでしょうか？
楽しんでいただけましたでしょうか？

みんなで自己実現の世界をつくりあげていくために、
第一歩目を踏み出していただければ幸いです。

下記、紹介したサイトを送ります。

セッションで紹介したサイト

・オーディオ買取屋
http://audio.kaitori8.com/

セッションで紹介した動画

・株式会社ウェブエイト　テレビCM
https://www.youtube.com/watch?v=OVkgj2Y9bLU

・安全にスピーカーを送るための梱包手順
https://www.youtube.com/watch?v=SMOS8rPT90Y

・TOSANDO music CM　披露宴編　full
https://www.youtube.com/watch?v=-09dRyIG9bU

補足

質問で多かったので補足させていただきます。
今回ご紹介したオーディオ事例と同様に、クライアントワークでも時間と手間をかけてブランディング戦略を行います。
ブランディング部分はそれなりに金額をいただき、その後ウェブ制作はウェブ制作でそれなりな金額をいただきます。

ですので、中小企業の中でも規模の小さい企業はターゲットに入らないことが多いです。
気持ち的にはなんとかサポートさせていただきたいと思うのですが、金額が合わないのでヒアリングもせずにお断りしていることが多いです。
（もちろん丁重に）

また、相見積の場合には、基本的にお断りしています。
ただ作るだけであれば、弊社でなくて良いと思っています。

質問

いただいた質問に回答します。

＜質問1＞
ご自身のお父様のお話参考になりましたが、これが仕事なら生産が取れるのか気になりました。

クライアントワークも同様のサポートをしています。
・ブランディング戦略構築で150万?200万
・ウェブ制作で200万?300万
・その後のグロースで200万?300万（毎月マーケティング戦略会議を行いサポート）
といった感じになると思います。
ずっと寄り添い、最終的にはクライアントが自走できるレベルになるまでサポートしています。
（だいたい1,2年はかかりますね）

＜質問2＞
ペルソナと世界観をあそこまで徹底して作ることに驚きました。
どれくらいの割合のクライアントがあれだけの労力をきちんとかけているのか？
どれくらいの成功率なのか？
が気になりました。

ウェブ制作のみをお受けするのは、全案件の半分くらいです。
残り半分は、ブランディングからサポートしています。
成功率は、ブランディングから行う場合は非常に高いですね。
結果が出るまで寄り添うので、ほぼ100％といっていいかと思います。
（クライアントが求める成果が違うので、なんとも言えないのですが）

＜質問3＞
買い取ったオーディオ製品は売るのですか？
その市場があるということですか？

はい、売るのは困りません。
売り先は確保できているので、どれだけ買い取れるかにかかっているのです。
（ちなみに、何でも買い取るわけではありません。売れるとわかっているものしか買取りません）

＜質問4＞
地方でブランディングをクライアントに理解してもらうことは難しいと感じているので、どうやって理解して納得してもらうのかが知りたい。

初回のヒアリング時に2時間?3時間かけてブランディングの重要性を伝えます。
今回紹介したオーディオの事例の他にも、いくつも事例を紹介していますね。
そして、戦略からやらないと効果が出ないということをご理解いただき、その場でだいたいご契約のお約束をいただくことが多いです。
初回ヒアリングがプチセミナーみたいなイメージです。

＜質問5＞
戦術の一部から問い合わせがあり、戦略からやりましょうとなる際、どのフェーズから有料でされていますか？（◯回目のヒアリングからなど）

だいたい初回ヒアリングで内容が決まり、契約につながるかどうかが決まります。
（ターゲットに合わないお客様の場合、こちらからお断りすることも多いです）
2回目には見積書と契約書をもっていきます。
そこで契約になるので、その後は有料となります。

＜質問6＞
ここまでやると成果が出るのはとてもわかるのですが、どれくらいの時間と予算をかけるのかを知りたいです。
制作側の時間コストが高そう。

10回から20回の戦略構築ワークとミーティングを重ねます。
予算は「質問1」でも回答しましたが、150万?200万くらいになることが多いです。
2?4ヶ月くらいで戦略をかため、そこでまたウェブ制作の見積もりを出します。
その時にはもう相見積などはなく、クライアントも自分たちのブランドを作るためにも予算を捻出しようと頑張ってくれますので、ウェブ制作の金額が高くてもなんとかなることが多いです。
ですから、制作の時間とコストはそれなりにかかりますね。

＜質問7＞
戦略のないクライアント（もしくは知らない担当者）にはどうアプローチすべきでしょうか？

一から丁寧に説明します。
あまりにもリテラシーが低い場合には、担当者に向けての教育研修をご提案しています。

＜質問8＞
ブランディングを極めた時、Webである必要性は？

ないと思います。
ブランド戦略を設計後、Webじゃなくて他の課題解決にお金をかけることも当然あります。
Webはもちろん重要な要素の1つですが、必ずしも1番重要とは限りません。
クライアントの課題に合わせて柔軟に対応しています。

P.S.

※会場でも販売させていただきましたが
「パーソナルブランディング」
をテーマにした本を出版しています。

自分のブランディングをどのように行なっていきますか？
その答えを体系的にまとめてありますので、ご覧ください。

全国の書店に陳列されています
『自分1人、1日でできるパーソナル・ブランディング』（同文館出版）
※amazonでもご購入いただけます。

2018年3月3日（土）ベルサール神田 イベントホールで開催したCSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」のフォローアップとして、枌谷 力さん（ベイジ）の『10人のweb制作会社が代理店に頼らず自社サイトだけで年間400件超の依頼を獲得するまでに実践したこと』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップメッセージは、イベント開催直後（2018年3月）の時点のものです。

フォローアップ

ベイジの枌谷です。初めてのCSS Niteでしたが、皆の温かい反応によって緊張しすぎずに登壇できました。ありがとうございました。

補足

登壇テーマを深堀するにあたって2つのことを考えました。一つは登壇中のことです。もう一つは登壇翌日以降のことです。

CSS Niteに参加された方にとって「役に立つ」とはどういうことか。そのことにフォーカスすると、私がより重視すべきは「登壇翌日以降」であると考えました。人の記憶は薄れていくものですが、記憶が薄れても「役立つもの」であろうと思いました。そう考えて、私の強みである「言語化されたコンテンツ」つまりは「スライド」に今回は力点を置きました。

登壇中の私の話を振り返りながら、スライドを見ていただくことで、皆さんの戦略や提案業務のお役に立てればと思っています。あるいは私の話の記憶が薄れても、スライドを見れば思い出せる／理解できるように、文字を多めにしました。

登壇中の話のみならず、フォローアップの資料も加わることによって、制作に携わる皆さんのキャリアに良い影響を与えることができればと思っています。

登壇内容についてご質問等があれば、FacebookやTwitterなどで気軽に連絡ください。その際には「CSS Niteに参加しました」と書いていただけると嬉しいです。

リンク集

[登壇で紹介したベイジのサイト]
コーポレートサイト：https://baigie.me/
ベイジの社長ブログ：https://baigie.me/sogitani/
ベイジの日報：https://baigie.me/nippo/
ベイジの用語集：https://baigie.me/glossary/

[枌谷力のアカウント]
facebook
https://www.facebook.com/tsutomu.sogitani
Twitter
https://twitter.com/sogitani_baigie

質問1：受託だとUXデザインができないとはどういう意味ですか？

正確には「受託のweb制作会社がクライアントのUXデザインをするというのは不可能」ということです。

「UXデザイン」とはユーザー体験のすべてをデザインすることだと私は思っています。これは当然、webサイトだけでなく、サービス設計から組織作りまですべてのことに手を加えなければ不可能です。一方、受託のweb制作会社のスコープは基本的に「webサイトを作ること」です。そのため、「受託のweb制作会社がクライアントのUXをデザインするというのは不可能」という結論になります。「UXデザイン」とは何を意味するのか、本質を学べば学ぶほどその考えに至ります。

ただこれは、「UXのことは考えない」「UXに関わる提案はしない」とイコールではありません。webサイトが戦略的に機能するものになるためには、UXを考えることは不可欠です。またクライアント企業はマーケティングやUXをきちんと整理できていなことも非常に多いです。

そのため私たちはwebサイトの検討から派生してUX領域のリサーチや整理、言及も積極的に行っています。webサイト以外でもやるべきだと感じたことは忌憚なく意見しています。ただ私たちはあくまでweb制作者であり、webサイトをUXに最適化することはできてもそれ以上のことは限界がある、皆さん（クライアント）主体でしっかり考えていただく必要がある、というスタンスを取っています。

その根幹には、UXデザインはそもそもすべてをアウトソースしてできるものではない、事業者側が主体にならないと実現できないという考えがあります。またクライアントがすぐにできないことを「これやってない御社はダメ」と厳しく詰めることに意味がないとも思っています。

繰り返しますが、だからといってUXの話を放り投げるようなことはしませんが、ビジネスとしての現実的な落としどころをweb制作に置いているが故のスタンスです。

もちろん「web制作ではなくUXデザインの支援業務をしてほしい」という依頼が来ればまた話は別です。それと自分たち自身、つまりベイジという会社自身に関しては、当然私たちが事業の主体者なわけですから、少なくとも他の会社よりはしっかりとUXデザインができている、という自負はあります。

ただそれでも、「webサイトでUXデザインをする」というのは不可能で、webサイト起点で言えば、「webサイトをUXに最適化する」というのが正確なのではないかと考えております。

こういった考えが、「受託だとUXデザインができない」という端折った発言の中には含まれていました。

質問2：問い合わせを断る基準を教えてください。また契約までにどの程度の工数をかけていますか？

お仕事をお請けするかどうかを判断する基準は、基本的に以下の3つです。

• 予算が合う
• 納期が合う
• 仕事の価値観が合う

このうち3については、より具体的かつ細かな基準を設けていて、さらに言えばバランスを見て判断しているので、複雑かつ感覚的であったりします。

例えば、以下のような傾向のある案件だと、私たちは良い仕事がおそらくはできないので、お断りする可能性が非常に高いです。

• 夜遅くや土日に問い合わせしてくる
• 初対面なのに急な見積や面談を求めてくる
• 言語化が苦手過ぎて話を聴きだすのに時間がかかる
• 電話でのコミュニケーションを好む
• 計画的に物事を進めない社風が明らか
• 会ったときに私たちのアドバイスを受け入れてくれない
• 受発注の上下関係に厳しい姿勢が顕著
• アイデアや提案は無償と考えている
• お金をかけず安く済まそうとする姿勢が過剰

などです。これらを総合的に判断しています。

契約までの工数というか、やることは以下の3点です。

• メールや電話で、上記の条件を引き出す
• 顧客化の可能性があれば一度会う（2017年度は問い合わせの1割くらい）
• 会ったうえでさらに顧客化の可能性がある場合、見積もりと進め方の資料を出す

「進め方の資料」というのは過去の実績などをまとめたものなので、それほど手間をかけずに作っています。

問い合わせ数が年間100件台だったころは提案コンペへの参加も行っていたのでより工数をかけていました。しかし今は個別の提案を必要とするコンペは一切受けなくなり、営業に工数をかけなくなりました。

そのため、面談以降の受注率自体は落ちました。以前は90%を超えていましたが、今は50%くらいです。ただし営業効率は飛躍的に上がりました。

2018年3月3日（土）ベルサール神田 イベントホールで開催したCSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」のフォローアップとして、横澤 幸満さん （SPS）の『地方でホームページ制作が400万円で売れる理由』セッションのスライドなどを公開します。

• スライド（PDF）
• 参考資料（社長道場、集客の仕組み構築サービス、求人の仕組み構築サービス）
• 動画
  

フォローアップメッセージは、イベント開催直後（2018年3月）の時点のものです。

フォローアップ

四国パソコンシステムの横澤です。
今回の内容は香川県という地方でホームページ制作という事業をスタートしてから、ウェブコンサル、マーケティング会社に変化していった過程を話しました。

補足

今回、登場した「成果のパッケージ」や「コンサルブック」は制作前や後のサービスを、お客さんにしっかりと理解してもらう、という目的があります。
しかし、もっと根幹にあるのは「次の世代への責任」なのです。
自分の勝手で起業して、がむしゃらに頑張ってきました。
そして40台半ば辺りからある思いが芽生えてきたんです。
コンサルティングの質は人によってバラバラです。
このままの提案営業型で本当に次の世代に引き渡せれるのだろうか？
そう考えた時に「このままではダメだな」と思いました。
社員は人生をかけて会社にきています。
そこに対して責任をもってバトンを渡していこうと考え抜いた一つの形が今回の「成果のパッケージ」や「コンサルブック」なのです。
まだまだ至らぬところはありますがドンドンとバージョンアップして良いものにしていきたいと思っています。

質問

成果にコミットするのですか？

成功報酬ではないですが成果にはコミットします。
セミナーの中でもあったとおり「得意なところをパッケージ」にしています。
なので成功率は非常に高いです。
例えば「求人の仕組み構築サービス」ではエントリーはあるが、想定した職種の人がこない、という場合です。
そこに対しても完成して後に成果をヒアリングしてダメな時はキーワード、LPなどをチューニングします。
これらは最初からサービスに含めていて、お客さんにもあらかじめ説明しています。

「集客の仕組み構築サービス」ではステップ③のマーケット調査のところで、月間の問合せ数や広告での問い合わせ獲得単価（CPA）、SEOで戦っていけるかの競合調査などをおこないます。
この段階で立てた戦略をもってインターネット上で戦っていけるかが分かります。
ダメなときは戦略から見直しになります。

大事なのはお客さんに最初にこの流れを説明しておくというところです。
これがパッケージ化、コンサルブック化の良い所です。
言った言わないには絶対にならないのです。

2018年3月3日（土）ベルサール神田 イベントホールで開催したCSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」のフォローアップとして、後藤 賢司さん（よつばデザイン）の『「デザインしないデザイナー」の肩書きを使いはじめた理由』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画
  

フォローアップメッセージは、イベント開催直後（2018年3月）の時点のものです。

フォローアップ

「デザインしないデザイナー」の肩書きを使いはじめた理由というテーマでお話したよつばデザイン後藤です。主に小規模事業者や少額案件のお仕事をされている方向けにお反しさせていただきました。

オーダーメイドからレディメイドへスイッチし、デザインの一番大事な部分に時間をかける事で、作業時間は大幅に短縮出来ます。本編では時間的に補足できなかったのですが、その際の見積内容も大きく変えており、通常制作案件でも計上しづらいプランニングや打ち合わせに対して単価を設定しています。僕たちの持つ知識やノウハウに対して価値を感じてもらい、そこは有料だという事を打ち出せる機会でもあると考えます。

プロジェクトを一週間で仕上げるのか？3ヶ月かけて仕上げるのか？では、力を入れるところや体制も大きく変わってきます。良かれと思う事を全てやっていける案件もあれば、そうは言ってられない案件もあります。ご自身がどの辺りでお仕事をされているのかで、仕事で大事にする部分は変わります。その辺りはレディメイド的な思想などが役に立つかもしれません。

レディメイドの実際の制作方法としては、複数回の打ち合わせ（ワークショップ含む）を行いクライアントのビジョンと行きたい方向をまとめます。方向性が決まったら最適な情報設計を行い、すぐにWordPressでサイトを構築します。高機能なWordPresdsテンプレートとドラッグ&ドロップでパーツをレイアウトできるページビルダープラグイン（アドオン含む）で、実際に作りあげてから、クライアントに見ていただき調整をかけていきます。操作方法や更新方法などは、画面キャプチャーしてマニュアル動画を作成しています（ScreenFlowを使用）。動画マニュアルを作る事で紙のマニュアルを作る手間を省き、ます。手順は動画どおりやれば良いので質問も来ません。 Video editing and screen recording Software | Telestream ScreenFlow | Overview

これから素人でもある程度のクオリティでウェブサイトや広告ツールを作れる時代になります。しかし、そこで何を言うかや何をするかの部分についてはプロの力がより不可欠になると考えています。数年後に力を必要とされるように今から動き始めています。

お伝えしたかったのは、既存のワークフローや常識にとらわれず、業界をも超えた俯瞰視点で仕事のやり方や売上の作り方を考える事で、クライアントにも自分にも大きなメリットを出す事が可能だという事です。

仕事を真面目にやっていても時代の流れで無くなる仕事もたくさんあります。版下時代、DTP自体、ウェブの今昔と見ていてもデザイナーのやる仕事内容は大きく変わっています。（ディレクターやライター、マーケッターのお仕事も変化しています）

数年前より始めた「作業を一切しない相談プラン」の利用も増えてきました。クライアントに対し良く聞いている「御社の売りは何ですか？」もいざ自分自身に向けられるとなかなか答えられないものです。行動を起こす前の理念の整理や戦略整理も第三者を介する事でうまくいく事が多いです。相談プランの具体的なメリットやメッセージの出し方は僕自身まだまだ試行錯誤中です。少しでも早く言語化、視覚化していきたいと思います。

私自身多くの刺激をいただきましたし、懇親会では参加者の方からのやり方なども聞けてとても良い機会となりました。ありがとうございました。

質問への回答

3万円の相談で「方向性だけ提案」だけで終わるクライアントは多いですか？

相談プランは実は制作者の方に多く利用されています。小さな制作会社様に自社のウェブサイトリニューアルの相談を受けた事例で言うと、その会社にしかない強みの設定、情報の出し方のアプローチを変える、新たなパッケージ商品の提案、請求時のトラブルを防ぐような見積の出し方の変更提案を行いました。その内容を元にリニューアルをしたところ、問合せが増えて顧客の質も上がったという感想をいただきました。先日二度目の相談を行い、新たな施策を実践されつつあります。

相談から戦略や指針をたてるまでの期間は？

実働3?6日です。ヒアリングから個別のワークショップを行い、クライアントの思考やビジョンを明確化し、方向性を提案します。※そこまでやっても迷われる方もいます。

デザインに費用をかけられないお客さんはどのぐらいの割合ですか？クライアントの数はどれぐらいですか？

最近はオーダーメイド制作の依頼を受けた場合でもレディメイド制作を提案する事もあります。クライアントの強い思い込みでウェブサイトをリニューアルしたいというケースもありますが、経験値からその方向性は一時的なものだろうなという場合もあります。このように費用をおさえて作る方法もあるので、まずはこちらで運営してみませんか？と誘導し、慣れてもらってから本題に向き合うような場合もあります。クライアントは数十件です。

デザインクリニック（コンサルタント）をされるまで様々な業種に関する勉強をしなくてはならないと思いますが、時間の確保や勉強法などはどのような工夫をされていらっしゃいますか？

幸い今までのお仕事幅広い業種に関わった経験と、子供服の情報サイトCOCOmagを自社運営する事でひとつの業界をじっくり見るという経験もしています。日頃からの政治や経済の動向などについても、それらが何の意味を持つのかをなるべく分析するようにしています。分析といっても専門的な分析ではなく、それらが何を意味するかといった簡単な言葉に置き換えるような感じです。勉強方法については心理学や行動経済学などの本を読んだり、海外の動向などはこまめにチェックするようにしています。Chromeの機能拡張「Panda」はオススメです。

どのような発信を行っていますか？

ニュースなどをシェアする場合に「自分はこう考える」を入れるようにしています。ものの見方や捉え方は親しい間柄であっても以外と知らない事も多いと考えています。言葉にしなければ伝わらない事はたくさんあると思うのでなるべく言葉にするようにしています。（本来は得意なほうではありませんが慣れだと思います）

デザインしないデザイナーになるにはどんな事を学ぶべきか？

目指す方向性で人それぞれだと思います。私の場合は、企画立案や提案については昔から興味があり本で学んだり、アイデア出しなどは日常的に訓練してきました。

レディメイド案件で手を動かさない作業（企画など）と、手を動かす作業（テンプレ設定・調整など）のそれずれにかける時間はどれぐらいでしょうか？

数回の打ち合わせ時に提案も含めてしています（実働3?6日）。手を動かす作業は最短1日?4日ぐらいです。必要であれば再調整に1?2日といった感じです。平均して1週間あれば終わるようなイメージです。（3?4件の同時進行も可能です）

このポジションは誰でもできちゃうのではないか？と思った

はい、これは誰でも出来るこれからのデザイナーの働き方のひとつの形だと考えます。その意図も含めつつお話させていただいています。特に小規模事業者に対しての制作方法としてひとつの解決策だとも思っています。その中でどのような特徴が出せるかというのも課題ではありますが、今は絶対数が圧倒的に少ない事、発信している人が少ない事を考えると、いち早く情報発信をしていく人が有利にはなると思っています。

AI、レディメイド制作はパッケージですか？

パッケージに近い形になっています。基本価格はありますが、さらに予算が少ない場合はやる事を減らしたりしています。

フックとして「デザインしないデザイナー」は良いけど、それは「フリーのアートディレクター」とはどう違うのか？ウェブで「ディレクタ?」「ウェブディレクター」「アートディレクター」があいまいなのかと思った。

よりビジネス課題やビジネスモデルまで関わる事などは従来のディレクターなどが行う範囲外だと考えます（やられてる方もいるかもですが）。見積内容など見せ方も変えているので打ち合わせに価値がある事などを理解してもらいつつ、戦略などの部分に予算をかける事を認識してもらうという意味もあると考えます。ディレクターの定義は事業規模などで全く異なると思います。肩書きにこだわらずクライアントからどのように見られるのかを意識し、印象含めさらに改良していければと思っています。

参考サイト

• The Grid - welcome doers & creators, this medium adapts to your message
• 文賢（ブンケン）- 文章の完成度を高める校正・推敲・校閲支援ツール
• Turning Design Mockups Into Code With Deep Learning - FloydHub Blog

ウェブ関連の情報をシェアするFacebookグループ

• webクリエイターのための情報交換所

2018年3月3日（土）ベルサール神田 イベントホールで開催したCSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」のフォローアップとして、英 誠一朗さん（四国新聞社）の『地方紙サイトにおけるコアバリューの探索』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画
  

フォローアップメッセージは、イベント開催直後（2018年3月）の時点のものです。

フォローアップ

四国新聞社の英　誠一朗です。無事にうどん県に戻っております。UX(Udon Experience)の設計をUX(User Experience)指向で設計した事例報告でもありました。

Userの話よりUdonの話が印象的だったみたいで、「うどん食べたくなりました」コメントを多く頂きました。

セッションで紹介したサイト

----------------------
讃岐うどん遍路
----------------------
・TOPページ：https://www.shikoku-np.co.jp/udon/
・【旧】店詳細ページ：https://www.shikoku-np.co.jp/udon/shop_old/shop.aspx?id=1015
・【新】店詳細ページ：https://www.shikoku-np.co.jp/udon/shop/1015

アンケート記入の質問に回答します。

＜質問1＞
ワークショップの場にクライアントを引っ張り出す方法？

ワークショップしたいと言わずに、ヒアリングしたいと申し出てみる。結果として会議の進行のテクニックでワークショップに持ち込んだり、自分のメモ用紙が模造紙という状態から、参加者に書いてもらう段階に持ち込んだりします。
まずは、「自分はまだあなたの会社のことを分かっていない」、「業界特有の言葉や商流を教えてほしい」など言ってヒアリングの時間を頂く手口が多いです。ワークショップというと構えるクライアントもいます。

＜質問2＞
ペルソナを決めるときは慎重さと大胆さのどちらですか？

大胆かつ繊細です。料理に例えるならば、塩と砂糖は間違えないようにするが小さじ少々が何グラムかは気にしない感じです。
大きな方向性が合っていれば問題ないです。

＜質問3＞
もっと話が聞きたい。どこへ行けば聞けますか？

普段は、香川県に住んでいます。出張に行くのは月に１回程度。四国新聞社の本社にいます。是非うどんを食べに香川にお越し下さい。毎年どこかで、登壇の機会を頂いております。日本のどこかで再会できることを楽しみにしています。

＜質問4＞
スクロール率測定のプラグインを知りたい

このツールを使っていたのですが、今はGoogle タグマネージャで設定できるようです。私の記事ではないですが、解説しているブログを見つけました。
・使っているツール：http://www.lunametrics.com/labs/recipes/scroll-tracking/
・解説ブログ：https://ayudante.jp/column/2017-10-24/13-04/

＜質問5＞
ワークショップに参加者はどのような人が必要か？

webサイト構築の意志決定者や情報発信する担当部署など全員を巻き込めるのが理想。
ワークショップは、よりよいサイトにしたり、メンバー間で意見を合わせるための手段でもありますが、意志決定者によって手戻りを発生させられることを防止する役割もあります。

＜質問6＞
どのようなワークショップをしているか知りたい

ペルソナかジャーニーマップのワークが多いですが、単純に「どう思われたいか」、「お客様が知りたい情報は何か」を列挙するだけでも有効です。ワークすることにより
クライアントも制作に関わった感じを醸成できます。

＜質問7＞
最後のスライドの写真はどこですか？

私の住んでいる香川県高松市の市街地です。山と海と美味しいうどん屋が共存する素晴らしい街です。
私が撮った写真です。

2018年6月11日（月）デジタルハリウッド STUDIO福岡でCSS Nite in Fukuoka, vol.12を開催し、36名の方に参加いただきました。

次の3セッションで構成。

• Adobe XD関連／林 航平（アイドットデザイン）
• ECサイトでの決済／佐藤 毅（ジーティーアイ）
• 英語（発音、練習方法）／鷹野 雅弘（スイッチ）

!importantとの共催、また、特別協賛としてデジタルハリウッド STUDIO福岡に会場提供いただきました。

2018年9月8日[土]には、vol.13として、XDにフォーカスして開催予定です。

2017年12月16日（土）ベルサール半蔵門 イベントホールで開催したShift11：Webデザイン行く年来る年のフォローアップを公開します。

• （1）「基調講演」長谷川 恭久さん
• （2）「マークアップ」小山田 晃浩 （ピクセルグリッド）、久保 知己（まぼろし）
• （3）「アドビ」浅野 桜（タガス）、黒野 明子（crema design）
• （4）「アクセシビリティ」植木 真（インフォアクシア）、土屋 一彦 （Website Usability Info）
• （5）「マーケティング」益子 貴寛（まぼろし）、安達 里枝（スマイルファーム）
• （6）「フォント」鷹野 雅弘（スイッチ）、関口 浩之（ソフトバンク・テクノロジー）
• （7）「スマホUIトレンド」佐藤 洋介（サイバーエージェント）
• （8）「Webデザイントレンド」原 一浩（Greative）、矢野 りん、坂本 邦夫（フォルトゥナ）
• （9）「クロージング中川 直樹（アンティー・ファクトリー）

2017年12月16日（土）ベルサール半蔵門 イベントホールで開催したShift11：Webデザイン行く年来る年のフォローアップとして、佐藤 洋介さん（サイバーエージェント）の『スマホアプリにおけるUIデザインのトレンド2017』セッションのスライドなどを公開します。

• スライド（PDF） 当日紹介しなかったアプリも10ページほど追加しています。
• 動画

フォローアップメッセージは、イベント開催直後（2017年12月）の時点のものです。

フォローアップメッセージ（補足など）

スマホのUIトレンドのセッションを担当しました佐藤です。

サービスデザインの現場において今年は、iPhone Xやスマートスピーカーの発売など、新デバイスの登場によって進化する市場への「応用力」を求められた年だったと思います。

そんな市場の中で、社内のクリエイターに対して僕が日々気にかけていることは以下の2つです。

• 日々変わるトレンドに対して、いかに自分たちのスキルをアップデートすることができるか
• 普段なにげなく頼ってしまう「経験則」や「慣れ」に対して、いかに自分自身をアップデートできるか

僕の好きなラッパー「haiiro de rossi」の歌詞で、「不安やリスクのない人生は安定ではなく惰性まみれのクソだ」というフレーズがあります。やっかいなのは「惰性」の状態でもそれなりにやっていけてしまうところにあります。

ただし、作り手の怠慢はユーザーにすぐにバレるし、常に進化する市場と比例してユーザーのリテラシーはどんどん上がっていきます。作り手としてユーザーをリードするためには、変化するトレンドを「自分なりに解釈」して、培ったベーススキルを「応用」する必要があります。

こうした変化の波を乗りこなすためにこそ、これまでの「経験則」をうまく使っていきましょう。フォローアップ用のスライドでは、当日紹介しきれなかったアプリも含んでいるのでぜひご覧下さい。

セッションの感想や質問について

常に新しいものが出てくるモックアップツールなど、どのように学習しているのか？ 教材があるのか？

基本的にはみんな独学で学んでいます。新しいツールの場合、あまりリファレンスが出回っていないため、クリエイター同士で教えあうような「ノウハウを横に展開する」環境を大事にしています。とはいえ、最近のツールは応用が効くものが多く、学習コストがそこまで高くないので、1週間使い続けたら大体理解できるかと思います。流れの速いこの市場では「まずはやってみる」という意識が大事なのかもしれません。

UIの動画キャプチャの仕方は？

iPhoneの場合PCとつないでQuickTme Playerで操作画面を録画。iOS 11以上であればデフォルト機能の「画面収録」で行なっています。

Androidの場合、Telecineというアプリで動画をキャプチャしています。

日々のトレンドチェックをどのように記録しているのでしょうか？

基本的にはEvernoteでまとめています。新しくストアで見つけたもの、人から聞いたもの、ソーシャルで話題になっているものなど、目にとまった情報を自分なりに解釈して、「有料のカメラアプリ」や「メニューの出方が気持ちいいアプリ」など、特徴別にカテゴライズしてまとめています。ポイントは、得た知識を「その場ですぐにまとめる」というところでしょうか。性格上「後でやろ?」だとすぐに忘れてしまうので、情報に触れた瞬間に、その熱で書き留めておくことをオススメします。