a-blog cms Training Camp 2019 Springで話したテーマとUIの変更です。

1. a-blog cms Training Camp 2019 Spring
有限会社アップルップル 森⽥かすみ
テーマとUI について
の

2. 森⽥ かすみ
有限会社アップルップル デザイナー
@KasumiMorita

3. まずはテーマから

4. 3つはほぼ同じ変更

5. サイト系テーマの変更点
• Bootstrapのバージョンを v4.3.1に
• お問い合わせのエラー⽂を改善
• オフキャンバスの廃⽌
• Tag_Relationalのデモを追加
• ユニットグループに背景⾊を追加
• メインカラムのサイズを820pxに
• Facebookのロゴ変更

6. フォームの連続投稿のエラー

7. オフキャンバスやめました
オフキャンバス
の実装サンプルは
ブログテーマで！

8. メインカラムを820pxに
1/1幅 1/2幅 1/3幅
820px 400px 260px
820pxは魔法の数字🌟☺
1/1幅 1/2幅 1/3幅
857.5px 418.75px 272.5px

9. Facebookのアイコン変更
https://ja.facebookbrand.com/assets/「f」ロゴ/
Facebookの
ガイドラインも
要チェック！

10. ブログテーマについて

11. ブログテーマの変更点
• デザインを⼀新
• メインカラムのサイズを選べるように
• スマホのデザインパターンを3つ⽤意
• キーカラーの設定
• カレンダーの実装
• ライター紹介

12. 幅4パターン
メインカラム幅 1/1幅 1/2幅 1/3幅
820px 820px 400px 260px
760px 760px 370px 240px
700px 700px 340px 220px
640px 640px 310px 200px
コンフィグセット
あり◯

13. スマホレイアウト3パターン
サムネイル1カラム サムネイル2カラムそのまま
class属性の
変更だけ！

14. そのほかブログテーマだけの設定
カレンダー キーカラーの設定 ライター紹介

15. UIの変更
https://developer.a-blogcms.jp/blog/kaizen/admin-ui-kaizen-20190214.html

16. UIの変更点
• 作成ボタンを緑に
• ラベルとバッジのコントラスト⽐を改善
• ファイルアイコンデザイン変更
• エントリー保存ボタンの固定化
• スマホエントリー⼀覧の編集ボタン

17. 「作成」ボタンを緑に

18. ラベルとバッジのコントラスト⽐を変更
青 赤 黄 緑 灰
以前のラベル 3.03 3.36 1.98 2.24 2.85
現在のラベル 5.4 5.68 4.67 5.36 7.71
レベルAAを11pxの⽂字サイズのときに達成するためには、4.5以上のコントラスト⽐が必要になります。

19. ファイルアイコンの変更

20. エントリーの保存ボタン

21. スマートフォンのエントリー⼀覧

22. ぜひ最新バージョン、お使いください！

23. ありがとうございました
#acmscamp