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
170
実践!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
今日から始めるDesignOpsのヒント
isaikaori
1
510
Deep Dive Adobe XD - レイアウト編
isaikaori
0
190
Adobe XDの『こんな時どうする?』を集めました
isaikaori
0
640
アウトプットむずい
isaikaori
0
300
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
740
実務で活かすXD!制作を支える取り組みと代表機能の活用術
isaikaori
2
1.3k
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
710
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
580
強・用・美から考えるテーマデザインのヒント_前編
isaikaori
1
1.6k
Other Decks in Design
See All in Design
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
1.7k
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
340
アフォーダンスとシグニファイア
ryokanakai
0
240
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
110
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
260
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
12
5.5k
root 会社紹介資料 / We are hiring.
root_recruit
1
12k
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
350
我做了一個詐騙網站...嗎?
crboy
1
130
Первая беседа о Карте реализации историй
ashapiro
0
160
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
370
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
370
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
How GitHub (no longer) Works
holman
310
140k
How STYLIGHT went responsive
nonsquared
93
5.1k
Making Projects Easy
brettharned
113
5.8k
Docker and Python
trallard
39
3k
GitHub's CSS Performance
jonrohan
1029
450k
YesSQL, Process and Tooling at Scale
rocio
167
14k
How to train your dragon (web standard)
notwaldorf
85
5.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Web Components: a chance to create the future
zenorocha
308
42k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
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 基本のテンプレート
実践!
ご不明な点があれば お気軽にお問い合わせください 次回バージョンへのフィードバックもお待ちしています!