Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
実践!a-blog cmsユーザーのためのsite2019.xd活用法
Search
isaikaori
November 23, 2019
Design
0
190
実践!a-blog cmsユーザーのためのsite2019.xd活用法
a-blog cms Training Camp 2019 Autumn
https://ablogcms.doorkeeper.jp/events/92238
isaikaori
November 23, 2019
Tweet
Share
More Decks by isaikaori
See All by isaikaori
熱狂が伝播するチームの作り方
isaikaori
0
61
今日から始めるDesignOpsのヒント
isaikaori
1
650
Deep Dive Adobe XD - レイアウト編
isaikaori
0
220
Adobe XDの『こんな時どうする?』を集めました
isaikaori
0
710
アウトプットむずい
isaikaori
0
320
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
860
実務で活かすXD!制作を支える取り組みと代表機能の活用術
isaikaori
2
1.4k
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
760
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
710
Other Decks in Design
See All in Design
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.4k
今日から意識できるアクセシビリティ
fumiko
0
240
Starry | Storyboards | Scene 1-21
giofortuna_story
0
280
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.7k
Haley's adventure chase
ivettetwin
0
230
freee + Product Design FY25Q4
freee
4
14k
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
670
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
290
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
120
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
270
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
280
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing for humans not robots
tammielis
253
25k
The Cult of Friendly URLs
andyhume
79
6.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Documentation Writing (for coders)
carmenintech
72
4.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Speed Design
sergeychernyshev
32
1k
Done Done
chrislema
184
16k
Transcript
Training Camp 2019 Autumn a-blog cmsユーザーのための site2019.xd活⽤法 実践!
site2019.xdとは?
a-blog cms 公式テーマ site2019 の テンプレートが揃った プロトタイプ⽤配布ファイル
None
https://www.a-blogcms.jp/download/ まずは早速ダウンロード!
site2019.xdの使い⽅を知る ワークショップのゴール
ファイル構成について
site2019.xd について site2019.xdの 設計についての概要。
acms-fonts acms-fonts⼀覧。 ⼀つずつクラス名が ふってあるので、 そのままSVGで 書き出しができる。
マスター コンポーネント ⼀覧 マスターコンポーネント として登録している モジュールやパーツの ⼀覧。
マスター コンポーネント ⼀覧 マスターコンポーネント として登録している モジュールやパーツの ⼀覧。
使⽤モジュール ナビゲーション Navigation モジュールID global_navi テンプレート記述 /include/header/globalNavi.html 使⽤しているモジュールの モジュール名/モジュールID/テンプレート記述の解説。 モジュール解説
layout.html _top.html /company/ /products/ /realestate/ /news/ /news/entry-4.html /tag/ /recruit/ /contact/
confirm.html thanks.html 404.html その他site2019の各種ページ
編集時のお作法的な部分について
① マスターコンポーネントと インスタンス
モジュールヘッダー ⼀覧 マスターコンポーネント インスタンス モジュールヘッダー ⼀覧 ⻭⾞アイコンの⾒出し ⼀覧 RSSアイコン&⼀覧リンクなし⾒出し
モジュールヘッダー ⼀覧 マスターコンポーネント モジュールヘッダー ⼀覧 インスタンス ⻭⾞アイコンの⾒出し ⼀覧 RSSアイコン&⼀覧リンクなし⾒出し 変更
同じように変化
モジュールヘッダー ⼀覧 マスターコンポーネント モジュールヘッダー ⼀覧 インスタンス ⻭⾞アイコンの⾒出し ⼀覧 RSSアイコン&⼀覧リンクなし⾒出し 変更
変化しない
モジュールヘッダー ⼀覧 マスターコンポーネント インスタンス モジュールヘッダー ⼀覧 ⻭⾞アイコンの⾒出し ⼀覧 RSSアイコン&⼀覧リンクなし⾒出し 透明度を変化させて出し分け
モジュールヘッダー ⼀覧 マスターコンポーネント= 編集⽤のパーツ モジュールヘッダー ⼀覧 インスタンス=アートボードに配置する⽤のパーツ ⻭⾞アイコンの⾒出し ⼀覧 RSSアイコン&⼀覧リンクなし⾒出し
必ずマスターコンポーネントで 作業する 編集時の注意点
② ステート
インスタンス:設定初期のステート インスタンス:ステート「no-icon」 モジュールヘッダー ⼀覧 マスターコンポーネント::設定初期のステート モジュールヘッダー ⼀覧 モジュールヘッダー ⼀覧
インスタンス:設定初期のステート インスタンス:ステート「no-icon」 モジュールヘッダー ⼀覧 マスターコンポーネント:ステート「no-icon」 モジュールヘッダー ⼀覧 モジュールヘッダー ⼀覧
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください インスタンス:ステート 初期設定 インスタンス:ステート
description インスタンス:ステート inquiry インスタンス:ステート address インスタンス:ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー site2019.xdでの活⽤例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー インスタンス:ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 プレイスホルダー マスターコンポーネント マスターコンポーネント 内包
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください インスタンス:ステート 初期設定 インスタンス:ステート
description インスタンス:ステート inquiry インスタンス:ステート address インスタンス:ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー site2019.xdでの活⽤例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー インスタンス:ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 プレイスホルダー マスターコンポーネント マスターコンポーネント 内包 * フォームのスタイルを変更
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください インスタンス:ステート 初期設定 インスタンス:ステート
description インスタンス:ステート inquiry インスタンス:ステート address インスタンス:ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー site2019.xdでの活⽤例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー インスタンス:ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 プレイスホルダー マスターコンポーネント マスターコンポーネント 内包 * フォームのスタイルを変更 * 背景⾊を変更
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください インスタンス:ステート 初期設定 インスタンス:ステート
description インスタンス:ステート inquiry インスタンス:ステート address インスタンス:ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー site2019.xdでの活⽤例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー インスタンス:ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 プレイスホルダー マスターコンポーネント マスターコンポーネント 内包 * フォームのスタイルを変更 * 背景⾊を変更 * タイトル/必須のテキストを変更
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください インスタンス:ステート 初期設定 インスタンス:ステート
description インスタンス:ステート inquiry インスタンス:ステート address インスタンス:ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー site2019.xdでの活⽤例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー インスタンス:ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 プレイスホルダー マスターコンポーネント マスターコンポーネント 内包 * フォームのスタイルを変更 * 背景⾊を変更 * タイトル/必須のテキストを変更 編集完了
変更が及ぶ範囲 マスター:ステート初 マスター:ステートB マスター:ステートA インスタンス:ステート初 インスタンス:ステート初 インスタンス:ステートA インスタンス:ステートA インスタンス:ステートB インスタンス:ステートB
変更
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート
description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:初期設定
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート
description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:初期設定 変更
変更が及ぶ範囲 マスター:ステート初 マスター:ステートB マスター:ステートA インスタンス:ステート初 インスタンス:ステート初 インスタンス:ステートA インスタンス:ステートA インスタンス:ステートB インスタンス:ステートB
変更
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート
description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:ステート 初期設定
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート
description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:ステート inquiry
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート
description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:ステート inquiry 変更
変更が及ぶ範囲 マスター:ステート初 マスター:ステートB マスター:ステートA インスタンス:ステート初 インスタンス:ステート初 インスタンス:ステートA インスタンス:ステートA インスタンス:ステートB インスタンス:ステートB
インスタンス同⼠は作⽤しない
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート
description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:ステート inquiry
お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート
description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:ステート inquiry 変更
必ずマスターコンポーネントの ステートから作業する 編集時の注意点
プロトタイプ作成 実践!
1. site2019.xdを開く site2019.xd おすすめの使い⽅ 2. 別ウィンドウで新しいドキュメントを開く 3. 使うパーツ・モジュールだけsite2019.xdから コピ-して持ってくる 4.
コンポーネントはローカルコンポーネントに 変更して管理する
_top.html index.html _entry.html a-blog cms 基本のテンプレート
実践!
ご不明な点があれば お気軽にお問い合わせください 次回バージョンへのフィードバックもお待ちしています!