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
200
実践!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
1.7k
今日から始めるDesignOpsのヒント
isaikaori
1
720
Deep Dive Adobe XD - レイアウト編
isaikaori
0
230
Adobe XDの『こんな時どうする?』を集めました
isaikaori
0
730
アウトプットむずい
isaikaori
0
340
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
880
実務で活かすXD!制作を支える取り組みと代表機能の活用術
isaikaori
2
1.4k
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
770
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
760
Other Decks in Design
See All in Design
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
500
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
170
CursorでAI活用のナレッジベースを構築する
kanzaki
0
760
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
520
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
510
DESIGNEAST 2025 A-3
_kotobuki_
0
100
Yumika Yamada Portfolio
yumii
0
1.8k
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
140
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
380
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
380
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
260
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
9k
Designing Experiences People Love
moore
142
24k
Side Projects
sachag
455
43k
Git: the NoSQL Database
bkeepers
PRO
431
66k
A better future with KSS
kneath
239
18k
Leading Effective Engineering Teams in the AI Era
addyosmani
6
450
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Speed Design
sergeychernyshev
32
1.2k
The Cult of Friendly URLs
andyhume
79
6.6k
Six Lessons from altMBA
skipperchong
29
4k
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 基本のテンプレート
実践!
ご不明な点があれば お気軽にお問い合わせください 次回バージョンへのフィードバックもお待ちしています!