CSS Nite in Osaka, vol.45「All About XD」 w/YATのblog

4月に東京で開催されたCSS Nite LP57「All About XD」 の再演版としてAdobe XDにフォーカスします（企画背景）。

このセミナーイベントは終了しました。

フォローアップ

フォローアップを一般公開しました。

概要

イベント名 CSS Nite in Osaka, vol.45「All About XD」 w/YATのblog
日時 2018年7月7日 8月11日（土）14:30-19:15（開場14:10）
悪天候のため日程変更になりました。
（終演時間は変更の可能性アリ）
会場 UMEDAI 大阪梅田 会議室
大阪府大阪市北区茶屋町1-27 ABC-MART梅田ビル7F
定員 120名
出演
（順不同）
  • YAT（Rish-Design）
  • 池原 健治（ソニー・インタラクティブエンタテインメント）
  • 轟 啓介（アドビ システムズ ）
  • 栄前田 勝太郎（リズムタイプ）
  • 森 和恵（r360studio）
  • 松下 絵梨（ツキアカリ）
  • 鷹野 雅弘（スイッチ）
参加費
  • 当日決済：9,000円
  • 事前決済：8,000円
  • 早割30：7,000円（5月30日14時まで）
主催 CSS Nite実行委員会
共催 YATのblog
協賛 協賛について
協力
司会進行
  • 鷹野 雅弘（スイッチ） @swwwitch
  • 松下 絵梨（ツキアカリ）
事前登録 必要
ビデオ参加 あります。ビデオ参加とは
備考
  • スクール形式（=机があります）
持ち物 筆記用具
Facebook Facebookイベントページで最新情報をアップデートしています
Twitter ハッシュタグは #cssnite です。
URL https://cssnite.jp/osaka/vol45/
懇親会 セミナー終了後に懇親会を予定しています（別途実費）。
2時間程度。

会社名のうち「株式会社」などは省いています。

セッション概要と出演者のプロフィール

2019年02月12日 時点での最新情報です。セッション調整中、内容、出演者は、状況に応じて変更する可能性があります。

プロフィールは、本セミナーイベント開催時のものです。

Webデザインシンキング × Adobe XD

Webデザインシンキングではペルソナ、カスタマージャーニーマップ、ワイヤーフレーム、プロトタイプ、など、カスタマーを起点においたさまざまな調査とプロジェクトメンバーとのコミュニケーションが必要です。

デザインとは本来問題を解決するものであり、そのマインドをチーム内で共有していなければプロジェクトの進行があらぬ方向へ進んでしまいます。

本セッションではAdobe XDを導入することでそういった問題をどうやって解決するのか。デザイナーやディレクターがプロジェクトチームにどういったアプローチができるのかについてお話しします。

YAT（やっと）

Rish-Design

本業はフリーランスのWebデザイナーで、Webサイトの制作をほぼ一貫して行っています。元々は企業のWebサイトを運用するWeb担という形で会社員をしていました。そのため、制作だけでなくサイトの運用によって売上を上げるためのノウハウやSEOの知識も強みです。

Webデザインシンキングセミナー、WordCampほか、セミナー登壇経験多数。

Adobe XDクイックオーバービュー
〜10分で把握するXDの全体像

XDとは何か？ 何ができるのか？ など、15個の質問を通してXDの全体像を把握します。

  • Xd? XD？
  • CCを契約しないと使えないの？
  • Windowsでも使えますか？
  • どんなツールがあるか？
  • ワイヤーフレーム制作ツールとして使えますか？
  • UIキットとは？
  • これまでのPhotoshopファイルを使い回しできるか？
  • IllustratorやPhotoshopの素材はどうやって使う？
  • 制作を効率化させる機能は？
  • マイクロインタラクションは実装できるか？
  • プロトタイプとは？
  • 確認方法や共有方法は？
  • どうやってパーツを切り出すの？
  • コーダー向けの情報共有は？
  • XDの競合は？

写真：鷹野 雅弘（たかの・まさひろ）鷹野 雅弘（たかの・まさひろ）

株式会社スイッチ

グラフィックデザイン、エディトリアルデザイン、Web制作の分野で、デザイン、オペレーション、設計・ディレクションなど、20年以上、第一線で手を動かし続けている。

そのノウハウをテクニカルライティングや講演に落とし込み、「制作→執筆→講演」のサイクルを回す。2015年から大阪芸術大学 客員教授。 2017年からAdobe Community Evangelist。

テクニカルライターとして30冊以上の著書を持ち、総販売数は18万部を超える。主な著書に『10倍ラクするIllustrator仕事術（増強改訂版）』（共著、技術評論社）など。

2005年からWeb制作者向けのセミナーイベント「CSS Nite」を主宰。都内での開催を中心に日本全国に飛び火し、600回を越える関連イベントを通して、のべ7万名を超える方が参加。

2,000エントリー、年間300万ビューを超えるDTP制作者向けの情報サイトDTP Transitは13年目に突入。

Adobe XD、最初の一歩

Adobe XDには、制作フローに取り入れることで、時短につながり、プロジェクトの質が上がる仕組みがたくさん用意されています。

ワイヤーフレーム、デザインカンプ、そしてプロトタイプ、それぞれの制作過程におけるつまづきやすいポイントや効率よく制作するためのポイントを、デモを交えながらお伝えします。

Adobe XD、次の一歩

Adobe XDでのデザイン制作、プロトタイプ制作の工程を、新機能の解説を交えながらお伝えします。

これからXDを始める方はもちろん、一通りの機能は把握したけれど、どう実務に活かしていいか分からない、という方にもおすすめしたい内容です。

松下 絵梨（まつした・えり）

ツキアカリ

大阪のWeb/DTPデザイナー ・講師。通信機器メーカーで開発・サポート業務に従事したのち、DTPデザイン・ 広報秘書業務に転身。 デジタルハリウッドでWebを学び、2010年からフリーランスとして独立。 ロゴや印刷物のデザイン、webデザイン、webディレクションのほか、最近ではセミナー活動・登壇にも力を入れている。

  • CSS Nite in OSAKA 実行委員会
  • デジタルハリウッド大阪校 主幹講師

Bootstrapありきで考えるXDでのページレイアウト

ウェブ制作を簡易化するために、CSSフレームワークのBootstrapを土台にコーディングすることが増えました。

Bootstrapには独特のルールがあり、それを画面設計の段階から考慮しておくと制作がよりスムーズに進みます。

  • BootstrapページをXDでレイアウトする時の手順とコツ
  • PsやAiのパーツをCCライブラリに集めて制作をする利点
  • XDの「デザインスペック」をコーディングに役立てる話

など、後のコーディングを手早く進めるためのXDページレイアウト作業の流れとポイントを紹介します。

写真：森和恵森 和恵（もり・かずえ）

r360studio

“むずかしいことでも、わかりやすく伝える”がモットーのウェブ系インストラクター。講師歴19年目を迎えられたのも、最盛期には年間1,000人を超えていた受講生の方々が支えてくださったおかげです。ウェブの知識を一日完結でさくっと学べる講座で気軽に参加しやすいと、リピーターの方が多いことが特長です。2018年は《Adobe XD・Bootstrap・WordPress》の学びに注力しています。

おもな情報発信は、Twitter @r360studio にて。相互フォロー大歓迎です。

ディレクターが考えるXDの導入・活用方法

デザイナーやディレクターに注目・利用されているAdobe XDですが、クライアントを含めたプロジェクト全体のコミュニケーションツールとして利用することでプロジェクトチームの理解や成長につなげることができます。

XDに興味を持ち利用したいと考えていても、クライアントや社内の事情で導入に躊躇されている方もいるでしょう。クライアントから見た場合、XDはどのように映っていて、どのように感じているのかを考えつつ、プロジェクトにおいて効果的にXDを導入していく手法についてご紹介します。

栄前田 勝太郎（えいまえだ・かつたろう）

有限会社リズムタイプ
プランナー／ディレクター

映像制作会社、Web制作会社を経て2002年にフリーのディレクターとして独立、2005年に有限会社リズムタイプを設立。BtoB向けのWebサイト、およびBtoBtoC向けのWebサービス・アプリケーションの企画・開発・運用に関わる。
近年は主に企業のプロダクト開発プロジェクトに参加し、マネジメント／ディレクションおよび、サービスのカイゼンやグロースハックの支援を行っている。

主な著書に、『Webディレクションの新・標準ルール 』『Webディレクションの新・標準ルール システム開発編 』『Webサイト、これからどうなるの? 』（MdN）。

コミュニケーションを可視化する！XDストーミング

提案から確認、フィードバックを受けて修正のフローの中で「ボタンをもっと大きく」「キーカラーの赤を少し明るめに」「ふわっとした動きで」のような主観的な要望は、ときに何度も同じようなやり取りが発生しまうことがあります。

Adobe XDを使うことで、デザイナーだけではなく、ディレクターやエンジニア、クライアントを交えてブレインストーミング感覚でワイヤーフレームから色、ビジュアル、動きなどをその場でスピーディに作っていくことができます。

アイデアを素早くビジュアル化できるAdobe XDの特徴を最大限生かしながら、お互いの認識を合わせつつ、ムダなやり取りを減らす方法をご紹介します。

池原 健治（いけはら・けんじ）

株式会社ソニー・インタラクティブエンタテインメント
Webデザイナー

人口的にレアな鳥取県出身。学生時代は工学部出身でロボットコンテストに出場したり、流体力学を専攻するようなメカニカル野郎だったが、在学中に始めたスケートボードのWebサイト作りとFlashを使ったインタラクティブデザインにはまり、Webデザイナーを目指して当てもなく上京。元々ゲームが趣味だったこともあり、いつの間にかゲーム会社でWebデザイナーとして活動中。

Adobe MAX Japan 2017でXDセッションの一つを担当。

ユーザーと歩むAdobe XDと今後の進化

毎月アップデートを行い、目まぐるしく進化するXDは、その機能だけでなく利用するユーザーやプロジェクトチーム、活用方法も進化しています。

これからのXDに期待する展開やユーザーとしての貢献方法など、単にデザイナーが扱うデザインツールとしてだけではないXDの可能性や将来性を探っていきます。

轟 啓介（とどろき・けいすけ）

アドビ システムズ 株式会社
マーケティングマネージャー

1999年、早稲田大学理工学部を卒業後、大手印刷会社に勤務。主にEC分野でJ2EEによるWebアプリ開発に携わるが、Adobe Flexとの衝撃的な出会いを機にリッチクライアントの世界へ。

2008年4月、アドビ入社。アドビのWebツール全般のマーケティングを担当。その他、Adobe MAX Japanの統括やCreative Station Blogの運営、Creative Cloud道場の番組ディレクターも兼任。家電や車など、世の中のデザインがヒドいもの全てを憎んでいる。

感想戦

すべてのセッションを通しての質疑応答や補足などを全出演者によって行います。

参加費とお申し込み

CSS Nite in Osaka, vol.45 は有料のイベントです。
ご参加いただくには参加登録と事前決済が必要です。

参加費

すべて税込みです。

決済方法

Doorkeeperを利用します。

指定期限内（お申し込みから24時間）に決済が完了しないとキャンセル扱いになってしまうのでご注意ください。

お申し込みから開催当日まで

振込連絡と入金確認メール

入金確認メールなどはお送りしません。

お申込状況は、Doorkeeperにログインし、イベント名をクリックすると確認いただけます。

受講票、カウントダウンメール

ビデオ参加

CSS Niteの有料版は、およそ90日後に、スライド/音声などを参加されていない方にも公開しています。

当日ご都合が悪い、遠方で参加が困難という方のために、フォローアップ（スライド/音声、動画）を開催後（1週間後）に受け取れる「ビデオ参加」をご用意しています。

これまで「フォローアップ参加」という名称でしたが、「ビデオ参加」という名前に変更します。

CSS Nite Osaka45にビデオ参加する

開催の背景

CSS Nite in Osaka, vol.45「All About XD」 w/YATのblogについて

都内で4月、6月に開催するLP57「All About XD」の再演版として、CSS Nite大阪版にて開催するセミナーイベントです。

YATのblogについて

2009年から運営しているwebサイト制作者向けのブログ。
現在は、ブログにとどまらずイベントやセミナーを主催し、リアルでの交流も行っている。
最近は主にwebデザインシンキングセミナーを中心にセミナーを開催し、webサイトをデザインする際に考えるさまざまな知見を伝えている。

LP57「All About XD」について

画面遷移やアニメーション、そしてマイクロインタラクションなど、ワイヤーフレームとカンプでは読み取れない情報を表現する「プロトタイプ制作ツール」が制作ワークフローに組み込まれることが増えてきました。

その中でも、2年間のパブリックベータ期間を経て、昨年（2017年10月に）正式版がリリースされたAdobe XDへの注目が高まっています。

今回のLPは、Adobe XDの基本操作から、使いこなしのテクニック、事例ベースでの活用例など、どっぷり、ガッツリ、じっくりと7セッションでお送りします。

CSS Niteについて

CSS Nite（シーエスエス・ナイト）は、Web制作に関わる方のためのセミナーイベントです。2005年10月、アップルストア銀座にてマンスリーイベントとしてスタート。当初は文字通り「CSS」にフォーカスしていましたが、現在は“Web 制作者にとって有益であろうトピック”を広く扱っています。

都内を中心に、神戸、岡山、山梨、札幌、静岡、広島、仙台、高知、高松、福岡、大阪、青森、また、海外では韓国でも開催。マークアップ系にとどまらず、WebディレクターやSEO、プログラマー系、経営者など、Web制作に関わる方の交流の機会となっています。

これまでに600回を越える関連イベントを通して、のべ6万人を超える方が参加するなど、Web制作業界のセミナーイベントとしてはモンスター級（2016年12月現在）。

cssnite marketplace

cssnite marketplaceとして、展示や即売会のブースを設けます。休憩時間などにご利用ください。

領収書は、それぞれのブースで準備しています。

カリカチュア アイコン製作所

カリカチュアとは顔を誇張してコミカルに描くアメリカンスタイルの似顔絵のこと。カリカチュア世界チャンピオンの田中ラオウがキャラクターのようなタッチであなたのお顔を描かせていただきます。

  

SNSのアイコンやプロフィールに、ぜひ、ご利用ください。

〈メニュー〉

  • 10minカリカチュア
    ふんわりタッチで即興で描かせていただきます。
    通常2,000円→CSS Nite特別価格 1,500円
  • カリカチュア アイコン（上半身）
    キャラクターのようなタッチでバストアップを描かせていただきます。
    通常7,000円→CSS Nite特別価格 5,000円
  • カリカチュア アイコン（全身）
    キャラクターのようなタッチで全身を描かせていただきます。
    通常9,000円→CSS Nite特別価格 7,000円

〈受付方法〉

受付用紙にご記入いただき、その場でお顔のお写真を撮らせていただくだけ。2週間ほどで絵のデータをメールで納品いたします。
お支払いはその場で現金、または、後日銀行振込。

タイムテーブル

時間 # ステージ 出演者
14:30 　 オープニング 　
14:40 1 基調講演：Webデザインシンキング × Adobe XD YAT（Rish-Design）
15:10 2 Adobe XDクイックオーバービュー
〜10分で把握するXDの全体像		 鷹野 雅弘（スイッチ）
15:25 3 Adobe XD、最初の一歩 松下 絵梨（ツキアカリ）
15:50 　 （休憩） 　
16:05 4 Adobe XD、次の一歩 松下 絵梨（ツキアカリ）
16:40 5 Bootstrapありきで考えるXDでのページレイアウト 森 和恵（r360studio）
17:10 6 ディレクターが考えるXDの導入・活用方法 栄前田 勝太郎（リズムタイプ）
17:40 　 （休憩） 　
17:55 7 コミュニケーションを可視化する！XDストーミング 池原 健治（ソニー・インタラクティブエンタテインメント）
18:25 8 ユーザーと歩むAdobe XDと今後の進化 轟 啓介（アドビ システムズ ）
18:50 9 感想戦 全員
19:10 エンディング
19:15 終了
19:45 懇親会スタート

FAQ

それぞれの質問をクリックすると、回答が開きます。すべての質問を開く

開催に関して

当日の配布資料はありますか？
ほかのCSS Niteと同様、基本的にありません。スライドなどは、開催終了後にダウンロードいただけるようにご案内します。セミナー中に撮影いただいたり、録音いただき、個人として利用されることはOKです。
ただし、撮影時に音が出る機器（携帯電話など）はご遠慮ください。
パソコンを持参した方がいいですか？
いいえ、必要ありません。パソコンを持ち込んでいただくのは結構ですが、電源は十分にありません。まわりの方と分け合ってご利用ください。
なお、「隣に座った方の、キーボードのタイピング音がうるさくて気が散る」といった苦情を最近よくいただきます。ご配慮をお願いします。
電源はありますか？
会場にある電源をお使いいただいてOKですが、分け合ってお使いください（ぜひ、電源タップなど延長できるものお持ちください）。
また、ACアダプターにつまづいてPCが落下などされないように、くれぐれもお気をつけください（休憩時間には、電源コードをはずしておいたり、養生テープなどで固定された方がよいかもしれません）。
Twitterで実況中継してもいいですか？
はい、どうぞ。ハッシュタグは「#cssnite」です。
なお、場合によっては、守秘義務に関する内容があります。講演者から指示があった場合、そちらは避けていただけますようお願いします。
ライブ中継してもいいですか？
こちらはご容赦ください（=NGです）。主催者サイドでライブ配信する予定はありません。なお、ビデオ参加は、ライブ配信ではなく、後日、録画した動画を共有します。

お申し込み・決済に関して

複数名で申し込む予定ですが、まとめて振り込んでもOKですか？
はい。その場合、お振り込み後に「振込名義」と、どなたの分かをフォームからご連絡ください。
申し込み時に記入したものとは異なる方法で送金したいのですが...（「PayPalを選択したけど、銀行振込したい」、「銀行振込を選択したけれど、PayPalで決済したい」など）
基本的には、Doorkeeper内でキャンセル処理を行っていただき、改めてお申し込みください。
請求書は発行いただけますか？
PDFに限り、発行します。請求書発行依頼フォームからご連絡ください。
領収書はいただけますか？
領収書はDoorkeeperから発行ください。
それでは困る、という方はフォームからご連絡ください。領収書をPDFで送付、または、郵送します。
セミナー+懇親会のセットで申し込みました。領収書を分けて欲しいのですが...
フォームからご連絡ください。
諸事情で、遅刻（途中退席）しなければなりません。
問題ありません。ただし、部分的な返金等はご容赦ください。
遅刻される場合、会場によって（すでに着席されている方の注意を削ぐため）次の転換/休憩時まで、会場の後部にて待機いただくことがあります。
入金確認メールはいつ届きますか？
入金確認メールは送信していません。
「ビジネスデーで3日以内の決済」とのことですが、社内稟議の関係上、ご猶予いただけませんか？
はい、可能です。ただし、早期割引は決済ベースにて区切っていますので、早期割引の期限を越える場合には、差額を頂戴することがあります。
請求書（PDF）が必要な場合には、請求書発行依頼フォームからご連絡ください。

当日

何を持参すればいいですか？
筆記用具をお持ちください。
また、スマホにて「チェックインコード」（QRコード／番号）が記載されたDoorkeeperから発行されるメールをご提示ください。
長時間のセミナーですので、座布団をお持ちいただくのもよいと思います。
映画館やセミナーなどで寒いと感じることがある方は、夏冬問わず、 ひざ掛けやカーディガン等をご持参ください。
受講票はいつ届きますか？
Doorkeeperから発行されるメールに記載されている「チェックインコード」（QRコード／番号）が受講票となります。 お困りの場合には、受付でリストにてお名前を照合します。
会場内は飲食可能ですか？
はい、会場内は飲食可能です。長丁場ですので、軽食やおやつなどをご持参ください（ゴミはお持ち帰りいただけますようご協力をお願いします）。参加者の方のための飲み物などはご用意していません。ご自身でご用意ください（館内に自動販売機があります）。
遅刻しても入場できますか？
はい、ご入場いただけます。電話やメールでの連絡などは不要です。
遅刻される場合、会場によって（すでに着席されている方の注意を削ぐため）次の転換/休憩時まで、会場の後部にて待機いただくことがあります。
指定席ですか？
いいえ、自由席です。
視力の弱い方は、お早めにご来場いただき、見やすいお席を確保してください。
見にくい場合には、途中でも席を移動してください。
空席を荷物などでふさがないようにご協力お願いします。
禁止事項はありますか？
まわりの方の迷惑となりますので、シャッター音の鳴る機器、および、タブレットでの撮影を禁止します（スマホ、タブレット、コンデジ等、デバイスを問わず）。
スライドは、追ってダウンロードいただけるように、後日、フォローアップメールにてご案内します。
スマホで撮影されたい方は、無音カメラのアプリを事前にご準備ください。
スライドはダウンロードできますか？
はい、終了後にお送りする「フォローアップメール」にて、ダウンロードのURLなどをご案内します。開催後、遅くても1週間以内にお送りしています。
無線LAN環境はありますか？
ご用意しています。
電源はありますか？
会場にある電源をお使いいただいてOKですが、分け合ってお使いください（ぜひ、電源タップなど延長できるものお持ちください）。
また、ACアダプターにつまづいてPCが落下などされないように、くれぐれもお気をつけください（休憩時間には、電源コードをはずしておいたり、養生テープなどで固定された方がよいかもしれません）。
途中で参加者を交代してもいいですか？
それはご勘弁ください。

キャンセルや払い戻しについて

申し込みましたが、まだ、送金していません。キャンセルしたいのですが、キャンセル料はかかりますか？
いいえ、かかりません。
諸事情により参加できなくなりました。
支払前の場合には、チケットメールからキャンセルください。送金されているばあいには、Doorkeeperのお問い合わせでなく、CSS Niteのキャンセルフォームからご連絡ください。その際、下記のキャンセルポリシーをご一読の上でお願いします。ｌ
急遽参加できなくなりました。代わりの人間が参加してもよいですか？
はい、どうぞ。
その際には、参加される方にチケットメールを送信ください。また、念のため、フォームからご連絡ください。
当日、急用で欠席しました（領収書を紛失してしまいました）。領収書は発行いただけますか？
はい、発行します。領収書発行依頼フォームからご連絡ください。

キャンセルポリシー

決済後のキャンセルについては、下記のポリシーにて行わせていただきます。

ただし、「ビデオ参加」は不要という方には全額返金します（懇親会の方は差額が発生することがあります）。

請求書 PDFのみ発行（希望者）
資
料
の
公
開		 会場参加者 OK
ビデオ参加 OK
一般公開 およそ90日後
キ
ャ
ン
セ
ル		 7月13日[金]17時まで
（延期のため参加できなくなった方）		 全額返金
1週間前まで（追加募集の方） 全額返金
それ以降 返金なし（フォローアップあり）

参加費のキャンセル返金に関して

懇親会のキャンセルについて

懇親会のキャンセルについて、次のようにお願いします。開催の1週間前に人数確定の連絡を行うため、それ以降のキャンセルの場合、参加されなくても費用が発生してしまいます。

タイミング 返金額
イベント開催の21日前 全額
イベント開催の48時間前まで 3,000円
開演後、
1つめの休憩が終了するまで		 2,000円
それ以降、終演まで 0円

 

関連情報

バナー

ブログやサイトにバナーを掲載いただければ幸いです。ソースコードのままご利用ください。

CSS Nite in Osaka, vol.45「All About XD」 w/YATのblog （幅200ピクセル×高さ200ピクセル）

お問い合わせ

ご不明点やお気づきの点がありましたら、フォームからご連絡ください。

お問い合わせ

このページの上部に戻る