Upgrade to Pro — share decks privately, control downloads, hide ads and more …

実践!a-blog cmsユーザーのためのsite2019.xd活用法

isaikaori
November 23, 2019

実践!a-blog cmsユーザーのためのsite2019.xd活用法

a-blog cms Training Camp 2019 Autumn
https://ablogcms.doorkeeper.jp/events/92238

isaikaori

November 23, 2019
Tweet

More Decks by isaikaori

Other Decks in Design

Transcript

  1. Training Camp 2019 Autumn
    a-blog cmsユーザーのための
    site2019.xd活⽤法
    実践!

    View full-size slide

  2. site2019.xdとは?

    View full-size slide

  3. a-blog cms 公式テーマ site2019 の
    テンプレートが揃った
    プロトタイプ⽤配布ファイル

    View full-size slide

  4. https://www.a-blogcms.jp/download/
    まずは早速ダウンロード!

    View full-size slide

  5. site2019.xdの使い⽅を知る
    ワークショップのゴール

    View full-size slide

  6. ファイル構成について

    View full-size slide

  7. site2019.xd
    について
    site2019.xdの
    設計についての概要。

    View full-size slide

  8. acms-fonts
    acms-fonts⼀覧。
    ⼀つずつクラス名が
    ふってあるので、
    そのままSVGで
    書き出しができる。

    View full-size slide

  9. マスター
    コンポーネント
    ⼀覧
    マスターコンポーネント
    として登録している
    モジュールやパーツの
    ⼀覧。

    View full-size slide

  10. マスター
    コンポーネント
    ⼀覧
    マスターコンポーネント
    として登録している
    モジュールやパーツの
    ⼀覧。

    View full-size slide

  11. 使⽤モジュール
    ナビゲーション
    Navigation
    モジュールID
    global_navi
    テンプレート記述
    /include/header/globalNavi.html
    使⽤しているモジュールの
    モジュール名/モジュールID/テンプレート記述の解説。
    モジュール解説

    View full-size slide

  12. layout.html
    _top.html /company/
    /products/ /realestate/
    /news/ /news/entry-4.html
    /tag/ /recruit/
    /contact/ confirm.html
    thanks.html 404.html
    その他site2019の各種ページ

    View full-size slide

  13. 編集時のお作法的な部分について

    View full-size slide


  14. マスターコンポーネントと
    インスタンス

    View full-size slide

  15. モジュールヘッダー ⼀覧
    マスターコンポーネント
    インスタンス
    モジュールヘッダー ⼀覧
    ⻭⾞アイコンの⾒出し ⼀覧
    RSSアイコン&⼀覧リンクなし⾒出し

    View full-size slide

  16. モジュールヘッダー ⼀覧
    マスターコンポーネント
    モジュールヘッダー ⼀覧
    インスタンス
    ⻭⾞アイコンの⾒出し ⼀覧
    RSSアイコン&⼀覧リンクなし⾒出し
    変更
    同じように変化

    View full-size slide

  17. モジュールヘッダー ⼀覧
    マスターコンポーネント
    モジュールヘッダー ⼀覧
    インスタンス
    ⻭⾞アイコンの⾒出し ⼀覧
    RSSアイコン&⼀覧リンクなし⾒出し
    変更
    変化しない

    View full-size slide

  18. モジュールヘッダー ⼀覧
    マスターコンポーネント
    インスタンス
    モジュールヘッダー ⼀覧
    ⻭⾞アイコンの⾒出し ⼀覧
    RSSアイコン&⼀覧リンクなし⾒出し
    透明度を変化させて出し分け

    View full-size slide

  19. モジュールヘッダー ⼀覧
    マスターコンポーネント= 編集⽤のパーツ
    モジュールヘッダー ⼀覧
    インスタンス=アートボードに配置する⽤のパーツ
    ⻭⾞アイコンの⾒出し ⼀覧
    RSSアイコン&⼀覧リンクなし⾒出し

    View full-size slide

  20. 必ずマスターコンポーネントで
    作業する
    編集時の注意点

    View full-size slide


  21. ステート

    View full-size slide

  22. インスタンス:設定初期のステート
    インスタンス:ステート「no-icon」
    モジュールヘッダー ⼀覧
    マスターコンポーネント::設定初期のステート
    モジュールヘッダー ⼀覧
    モジュールヘッダー ⼀覧

    View full-size slide

  23. インスタンス:設定初期のステート
    インスタンス:ステート「no-icon」
    モジュールヘッダー ⼀覧
    マスターコンポーネント:ステート「no-icon」
    モジュールヘッダー ⼀覧
    モジュールヘッダー ⼀覧

    View full-size slide

  24. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    インスタンス:ステート 初期設定
    インスタンス:ステート description
    インスタンス:ステート inquiry
    インスタンス:ステート address
    インスタンス:ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー
    site2019.xdでの活⽤例
    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    インスタンス:ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    プレイスホルダー
    マスターコンポーネント
    マスターコンポーネント
    内包

    View full-size slide

  25. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    インスタンス:ステート 初期設定
    インスタンス:ステート description
    インスタンス:ステート inquiry
    インスタンス:ステート address
    インスタンス:ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー
    site2019.xdでの活⽤例
    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    インスタンス:ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    プレイスホルダー
    マスターコンポーネント
    マスターコンポーネント
    内包
    * フォームのスタイルを変更

    View full-size slide

  26. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    インスタンス:ステート 初期設定
    インスタンス:ステート description
    インスタンス:ステート inquiry
    インスタンス:ステート address
    インスタンス:ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー
    site2019.xdでの活⽤例
    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    インスタンス:ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    プレイスホルダー
    マスターコンポーネント
    マスターコンポーネント
    内包
    * フォームのスタイルを変更
    * 背景⾊を変更

    View full-size slide

  27. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    インスタンス:ステート 初期設定
    インスタンス:ステート description
    インスタンス:ステート inquiry
    インスタンス:ステート address
    インスタンス:ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー
    site2019.xdでの活⽤例
    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    インスタンス:ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    プレイスホルダー
    マスターコンポーネント
    マスターコンポーネント
    内包
    * フォームのスタイルを変更
    * 背景⾊を変更
    * タイトル/必須のテキストを変更

    View full-size slide

  28. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    インスタンス:ステート 初期設定
    インスタンス:ステート description
    インスタンス:ステート inquiry
    インスタンス:ステート address
    インスタンス:ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー
    site2019.xdでの活⽤例
    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    インスタンス:ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    プレイスホルダー
    マスターコンポーネント
    マスターコンポーネント
    内包
    * フォームのスタイルを変更
    * 背景⾊を変更
    * タイトル/必須のテキストを変更
    編集完了

    View full-size slide

  29. 変更が及ぶ範囲
    マスター:ステート初
    マスター:ステートB
    マスター:ステートA
     インスタンス:ステート初  インスタンス:ステート初
     インスタンス:ステートA  インスタンス:ステートA
     インスタンス:ステートB
     インスタンス:ステートB
    変更

    View full-size slide

  30. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    ステート 初期設定
    ステート description
    ステート inquiry
    ステート address
    ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー

    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    マスターコンポーネント:初期設定

    View full-size slide

  31. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    ステート 初期設定
    ステート description
    ステート inquiry
    ステート address
    ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー

    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    マスターコンポーネント:初期設定
    変更

    View full-size slide

  32. 変更が及ぶ範囲
    マスター:ステート初
    マスター:ステートB
    マスター:ステートA
     インスタンス:ステート初  インスタンス:ステート初
     インスタンス:ステートA  インスタンス:ステートA
     インスタンス:ステートB
     インスタンス:ステートB
    変更

    View full-size slide

  33. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    ステート 初期設定
    ステート description
    ステート inquiry
    ステート address
    ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー

    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    マスターコンポーネント:ステート 初期設定

    View full-size slide

  34. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    ステート 初期設定
    ステート description
    ステート inquiry
    ステート address
    ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー

    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    マスターコンポーネント:ステート inquiry

    View full-size slide

  35. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    ステート 初期設定
    ステート description
    ステート inquiry
    ステート address
    ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー

    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    マスターコンポーネント:ステート inquiry
    変更

    View full-size slide

  36. 変更が及ぶ範囲
    マスター:ステート初
    マスター:ステートB
    マスター:ステートA
     インスタンス:ステート初  インスタンス:ステート初
     インスタンス:ステートA  インスタンス:ステートA
     インスタンス:ステートB
     インスタンス:ステートB
    インスタンス同⼠は作⽤しない

    View full-size slide

  37. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    ステート 初期設定
    ステート description
    ステート inquiry
    ステート address
    ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー

    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    マスターコンポーネント:ステート inquiry

    View full-size slide

  38. お名前 必須 ⼭⽥ 太郎
    ご⽤件 必須 選択してください
    ステート 初期設定
    ステート description
    ステート inquiry
    ステート address
    ステート confirm
    テーブルタイトル 確認⽤テキスト
    テーブルタイトル 必須 プレイスホルダー

    テーブルタイトル 必須 プレイスホルダー
    テーブルタイトル 必須 プレイスホルダー
    ステート name
    ご住所 必須
    000-0000
    000-0000
    都道府県
    000-0000
    マスターコンポーネント:ステート inquiry
    変更

    View full-size slide

  39. 必ずマスターコンポーネントの
    ステートから作業する
    編集時の注意点

    View full-size slide

  40. プロトタイプ作成
    実践!

    View full-size slide

  41. 1. site2019.xdを開く
    site2019.xd おすすめの使い⽅
    2. 別ウィンドウで新しいドキュメントを開く
    3. 使うパーツ・モジュールだけsite2019.xdから
     コピ-して持ってくる
    4. コンポーネントはローカルコンポーネントに
     変更して管理する

    View full-size slide

  42. _top.html
    index.html
    _entry.html
    a-blog cms 基本のテンプレート

    View full-size slide

  43. ご不明な点があれば
    お気軽にお問い合わせください
    次回バージョンへのフィードバックもお待ちしています!

    View full-size slide