ミルクボーイさんがwebデザインを説明したら。

内海: どうもー、ミルクボーイですー。お願いしますー。

内海: ありがとうございますー。

内海: あーありがとうございますー。 今、LP用のサブドメインをいただきましたけどもね。ありがとうございます。

駒場: いま内ポケットになおさせていただきます。

内海: LPごとに成果分けたいですからね。ありがたいですよー

内海: ありがとうございますー。僕はリュックの中にしまわせていただきますー。

駒場: うちのおかんがね、有名なWebデザインのツールがあるらしいんやけど。

内海: そうなんや。

駒場: その名前を忘れたらしくてね。

内海: 有名なWebデザインのツールをわすれるってどうなってんねん。それ。

駒場: そうやねん。

内海: 有名なWebデザインのツールやったら、古くからあるPhotoshopとか、最近はXDとかSketchとかきくよ。

駒場: それがちゃうらしいねんな。

内海: ちゃうの？

駒場: うん。いろいろ聞くけどな、全然わからへんねん。

内海: ほんなら俺がね、おかんの忘れたデザインツールを一緒に考えてあげるから、どんな特徴いってたか教えてみてよー。

駒場: うん。おかんが言うには、Xが名前につくツールやって言うてた。

内海: ほー。 XDやないかい。それはもうXDやがな。有名なツールは色々あるけど、名前にXがつくならそんなんもうXDで決まりやがな。すぐわかったやんこんなん。

駒場: わからへんねん。

内海: 何がわからへんのよー。

駒場: おかんが言うには、写真の補正やレイヤーエフェクトがすぐできて、装飾多めのLPに向いてるツールやって言うねん。

内海: うーん。ほなXD違うかー。XDってシンプルなWebデザインやアプリのUIデザインには向いてるけど、LPのデザインは向いてないもんね。
LPやとメインコピーの一文字ずつの文字デザインや、セクション、訴求内容ごとに違った装飾に凝りまくったような、ストーリーを感じるデザインが重要やもんね。
ほなXDと違うかー。もうちょっと詳しく教えてみてよー。

駒場: うん。おかんが言うにはプロトタイプもデザインと同じファイルで作れるって言うてた。

内海: XDやがな！XDはワイヤーフレームからデザイン、プロトタイプまで全部ひとつのツールとファイルで作れるんよ。
他のツール連携無しでプロトタイプまで作れて、しかもプロトタイプがURLで共有できるのはXDが得意なんよ。

駒場: それがわからへんねん。

内海: なんでわからへんの。

駒場: いや俺もXDやと思てんけどな、おかんが言うには、プロトタイプがめちゃくちゃすぐ開けて、リンククリックしたら１秒で開くっていうねんな。

内海: あー。 ほなXDとちがうかー。XDのプロトタイプって気軽に共有できるのはいいんやけど、開くのにめちゃくちゃ時間かかるんよね。
クライアントに送るとき『開くのめちゃくちゃ重いですよ』って言わんとエラーと勘違いされるんよね。
ほなXDちがうかぁ…

駒場: そうやねん。

内海: うんー。他になんか特徴言ってなかったー？

駒場: うん、おかんが言うには、Adobeのソフトやって言うてた。

内海: XDやないかい。adobeといえばXD以外にもphotoshopやillustoratorがあるけど、プロトタイプが作れるのはXDだけやもん。
XDはadobeが2017年にラスベガスのAdobe Maxで発表してから一躍注目を浴びたwebデザインツールで、それまでphotoshopやillustoratorでクソ重いファイルを操作してたデザイナーたちにとってXDの操作の軽快さは非常に魅力的だったんよ。
プロトタイピングと言えばそれまではprottやinvisionが使われてたけど、従来のphotoshopやillustoratorからプロトタイピングツールに画像を書き出したり読み込んだりする手間がかかってたんよね。
だからXDが第一線のデザイナーたちに受けたんよ。

駒場: わからへんねん、だから。

内海: 何がわからへんのー。

駒場: おかんが言うには、使うのにめっちゃ金がかかるっていうねん。

内海: ほなXDとちゃうやないかい。XDはね、その他のadobe 製品と違って２GBのストレージがついたスタータープランが無料で使うことができるんよ。
そやからそれまでphotoshopしか使ってなかったデザイナーも気軽に試すことができるし、これからwebデザインを習っていきたいっていう学生や未経験の他業種の人でもコストをかけずにチャレンジすることができるねん。

駒場: おかんが言うには、エンジニアとの連携も楽らしいねん。

内海: XDやないか。XDは色やUIパーツ、フォントなど、デザインを構成する様々な要素を「コンポーネント」として管理できるんよ。エンジニアはそれまで「似た色やけどカラーコードちゃうがな」とか「同じ要素やのにパディング設定ちゃうがな」と思いながら頭を捻って実装してたんやけど、XDをつかってコンポーネント管理しつつデザインすることによってこうしたデザインの曖昧さを最小限に抑えることができるようになったんよ。

駒場: いやー、でもわからへんねん。

内海: なんでわからへんのー。

駒場: おかんが言うには、デザイン以外の用途では使われへんっていうてた。

内海: ほなXDちゃうがな。XDはコンポーネント管理機能や自動アニメーションを使うことで、パワーポイントのような資料を作ったりできるねん。
特にweb業界の旬な人たちはXDを使って登壇資料を作ったりしてるんよ。
資料やプロトタイプにちょっとしたアニメーションを加えて遊び心あるお洒落さを演出することもできるんよ。

駒場: うーん、でもわからへんねん。

内海: 何でわからへんのよそれでー。

駒場: おかんが言うには、基本的な操作を覚えるのがめちゃくちゃ楽で教えてもらえるっていうてた。

内海: ほなやっぱりXDやないかい！XDはね、adobe公式サイトで無料配布してるスターターキットをDLして眺めるだけで初級から中級までの基本的な操作が全部インプットできるんよ。

駒場: わからへんねん。

内海: 何でわからへんのよ！もうXDしかないやん。

駒場: いや俺もそう思うねんけどな、おかんが言うにはアプリのデザインには使われへんらしいねん。

内海: ほなXDちゃうやないかい！XDが得意なのはデザインの中でも、特に似た画面の繰り返しや、同一画面の別ステータス画面などが多い、アプリのUIデザインなんよ。

駒場: でもな、おかんが言うには、XDではない言うてんねん。

内海: ほなXDとちゃうやないかい！おかんがXDではない言うてるならXDちゃうがな！

駒場: そうやねん。

内海: 先言えよ！おれがエンジニアとの連携の説明してたときどう思ってたん？

駒場: 申し訳ないなーって。

内海: ほんまに分かれへんがな。どないなっとんねん。

駒場: おとんが言うには、SAIとちゃうかって。

内海: いや絶対にちゃうやろ！もうええわ！

駒場&内海: どうも、ありがとうございましたー。

- - - - - - - - - - - - - - - - - - - 

【免責】

・この記事はこちらの記事を参考に、デザインでいうならどうなるんだろうと思いつつ書きました。

・さらに上記記事の元の記事も参考にさせていただきました。

・Invision Studioを完全に無視しているのですが、私が使ったことないため「Invision Studioのない世界線」としてお楽しみいただけますと幸いです。

・すでに誰かが書いてそうなのと、内容に間違いがありそうですがどうぞお手柔らかにお願いします。
（修正すべきところがあったら是非お知らせください。）

・書くにあたってミルクボーイさんの漫才をyoutubeでみたんですけど、ほんとに最高でした。お気に入りはサイゼです。

・この記事を企画した当時よりもXDがアップデートされており、ところどころ間違いがあるかもです。懐かしみながらお楽しみ下さい(2020/7/4追記)