XD入門ワークショップに参加しました!こんにちわわわ。リクトのフロントエンドをやってます、中村です。みなさん「XD」って知ってますか?使ってますか?XDとはAdobeが開発するウェブサイトやモバイルアプリのデザイン制作に適したオールインワンUX/UIソリューションです。これからWeb業界においてWebデザインの作成はこのXDで作られる時代に入っていきます。現在Illustrator、Photoshopで作られていることが多いかと思いますが、これからはXDでの作成に移行するとみて間違いありません。僕はコーダーなのであまりXDを触る事もなかったので、少ししか触ったことがありませんし、あまり詳しく知りません(笑)ですが今後デザインがXDで上がってくる以上「使ったことがありません」と言い続けるわけにはいきません。Fireworksが消えていったように、次はXDが出てきたのです!もう避けては通れません!というわけで初心者の僕には嬉しいセミナーを見つけたので受講してきました。Hayashi)さんです。・共有の方法(共有URLの発行、コメント・ピン機能、開発用URL)・自動アニメーションなどを教えていただきました。初心者にも分かるようにゆっくり丁寧に指導していただき、とても分かりやすい内容でした。XDの印象としては「軽くて速い」でした。画像を扱っているのにサクサクです。PhotoshopやIllustratorを使った事がある人ならすぐに使いこなせる部分も多いですし、レイヤーなどの概念もあり、UIも整理されていてわかりやすい。UI的にはKeynoteにも近い感じがしました。スマホにXDのアプリを入れる事でPCのXDで作成しているスマホのデザインをそのままスマホで見る事ができるんですが、PCを修正したらリアルタイムでスマホに反映され、その速さも驚くほどタイムラグを感じません。プラグインにも驚きました。css」プラグインです。先ほどの写真のデザイン下部にある「戻る」ボタン。写真では分かりにくいですが、微妙に背景にグラデーションがかかっています。このグラデーションをコーディングの際にCSSで再現するには、明るい色と暗い色をスポイドで取ってきたりしなければならず大変です。!!XDではこのボタンのレイヤーを選択した状態で、プラグインをクリック。́∀`)そしてもう一つXDの特筆すべき点はデータの共有方法です!今までは、できたデザインカンプをjpgに変換してメールで送付したり、psdファイルをzipファイルに圧縮して送ったりしていましたが、XDでは共有するためのURLを発行する事ができ、そのURLを見ている人全員でデザインを共有する事ができます。デザイン画面の横にコメント欄があり、コメントのやりとりがチャット形式でリアルタイムに行えます!!!さらにさらに!修正箇所などにピンを立てて、そこに対する修正内容などを書き込んだり、修正が終われば解決に切り替えれるようなタスク機能もあるんです!!!!百聞は一見に如かず、実際に画面を見てみてください。※PCで見てください。IDをお持ちの方はログインしていただければピンを立てたりする事が出来ますので自由にお試しください。ちなみにXDから吐き出される共有用URLは長いのでこのURLは01waveさんが開発されたURL短縮アプリ『たんっ!』で短縮しています!いかがでしょうか?右にコメント欄があるのが分かりますでしょうか?そこにクライアント(うちのスタッフ)から修正依頼が書き込まれています。デザイン上の数字を押せばそこに対する修正依頼のコメントを確認できます。依頼通りに作業していたXDでデザインを修正したら更新ボタンを押すだけです。同じURLを使えるのでリロードすることで修正がURLを共有している人すべてに反映されます。これで複数の人とリアルタイムで確認、打ち合わせをする事ができます。すごい機能ですよね?あともう一点XDがサイトデザインに特化している機能の一つにプロトタイプというのがあります。XDのデザインはPhotoshopなどのデザインと違い、ページ遷移を動的に表現できます。「このボタンを押したらこのページに飛びます。」みたいなフローを実際のWebサイトのような動きで確認できます。Page」というボタンを押してみてください。飛び先のページに遷移します。遷移先を作り込む時間が無かったので御容赦ください(笑)。これによりナビゲーションなどから遷移先のデザインを表示する事ができパッと見では本当のWebサイトとの違いが分からないような動きを表現でき、完成形をイメージしやすくなります。XDはアニメーションなども作成する事ができ、デザインでありながら、トップのメイン画像をスライドショーにしたい際などの動きを表現できます。先ほどの共有URLサイトのトップ画像をクリックしていただければスライドっぽい動きを確認できると思います。ちなみにわんちゃんのページに遷移したら、わんちゃんの上のテキストをタップしてみてください。́∀`)こんな動きも実装できます(笑)ローディング画像くらいにしか使えないかもですが(笑)参考までに「開発用URL」についても触れておきます。これは我々コーダーにとって、とても助かるツールで、これで吐き出されたURLでみれる表示はUIが異なります。先ほどコメント欄があった場所に、触った要素のwidthや色、フォントなどのデータが表示されます。デザイン上で各要素のマージンなども表示してくれるのでCSSを書くのにとても便利です。(要素表示とコメントは切り替える事が出来ます)これも参考までにURLを貼っておきます。https://01w.me/8t0uf3回のセミナーで僕のような初心者もこれくらいは使えるようになりました。今後は自分で作る事よりも、出来てきたデザインを修正したり、画像を書き出したりする際に使うことになるかと思いますが、今回のセミナーを受けたことでだいぶ触れる自信がつきました。ユーザーグループ福岡の活動をチェックしてみてはいかがでしょうか?ツイートRELATEDアウトプット「売上アップにつなげるSNSマーケティングの新法則セミナー」に参加してきました。「売上アップにつなげるSNSマーケティングの新法則セミナー」に参加してきました。3.0に参加してきました。2019に参加してきました。