2016年11月18日(土)「a-blog cms Training Camp 2016 Autumn」にて発表した内容です。 a-blog cmsの実装をこれから始めたい方、実装は担当しないけれどCMSを導入するサイトのデザインをするデザイナーさんに向けてテンプレートの基本、作業のコツ、装飾のアイディアをご紹介しました。

1. を使う
5つの心得
デザイナーのための

3. t
5つの心得
01. 基本の3つのテンプレートが必要です
02. 詳細ページからデザインしましょう
03. デザインは「並べて」作りましょう
04. acms.cssの特徴は知っておくと便利です
05. 装飾にはテキストを活用しましょう

4. 基本の3つのテンプレートが
必要です
01

5. t
a-blog cms 基本のテンプレート
トップページ
top.html
一覧ページ
index.html
詳細ページ
entry.html

6. top.html
index.html index.html
entry.htmlentry.html

8. t
トップページ（top.html）

9. t
トップページ（top.html）
✤ Webサイトの玄関
✤ 一番クライアントが気にするところでもある
✤ ある程度好みを反映してあげたい

10. t
一覧ページ（index.html）

11. t
一覧ページ（index.html）
✤ 情報の性質によって見せ方は異なる
✤ a-blog cmsでスタンダードな形は5種類

12. t
エントリーの一部や全部を並べたレイアウト

13. t
画像を並べたレイアウト

14. t
タイトルを並べたレイアウト

15. t
日時を並べたレイアウト

16. t
ビジュアルデザインを重視した独特のレイアウト

17. t
詳細ページ（entry.html）

18. 詳細ページからデザインしましょう
02

19. t
詳細ページ（entry.html）

20. t
おすすめする理由
✤ 納品後もっとも更新される
✤ ベーシックなので合意形成しやすい
✤ 検索流入も考慮した情報設計が必要
「全部のせ」が必要

21. t
全部のせ とは
運用者が追加できる要素の一覧

22. t
全部のせに最低限ほしい要素

23. t
全部のせに最低限ほしい要素
✤ 画像（1～3カラム）
✤ 本文テキスト
✤ 見出し（h1～h5程度）
✤ テーブル
✤ リンクのためのボタン

24. 運用者の
リテラシーにも
大きく依存する

25. t
後工程のことも考えていたりします
早めに実装に取り掛かってもらえる！
（その間にトップなどに時間をかけられる）

26. t
足りないものはカスタムユニットで

27. デザインは「並べて」作りましょう
03

28. 突然ですが、
どんなデザインツールをお使いですか？

29. デザインは
並べて作る！

30. t
アートボード機能の活用がおすすめ
✤ 静的サイト以上にデザインパターンが必要
✤ 繰り返し使うパーツが把握できる
✤ 配色やサイズの「ゆらぎ」を防ぐ
✤ 必要なテンプレートを視覚的に把握できる

33. acms.cssの特徴は
知っておくと便利です
04

34. t
CSSフレームワーク「acms.css」

36. t
基本的に12カラムで作ればOK
デフォルトの
余白は20px

37. t
acms.css の特徴
✤ Webサイトに欲しい要素を揃えている
✤ Bootstrapなどとの併用OK
✤ 12カラムのグリッドシステム
✤ デフォルトは960px

38. 左右に10pxの
padding

40. 左右に10pxの
margin

41. 装飾にはテキストを活用しましょう
05

42. t
CMS導入でのデザイナーのジレンマ
✤ 画像見出しは極力避けたい
✤ 画像の加工も、クライアントの手元で
できるかというと…
✤ 理想は「写真と文字でかっこよく」

43. t
画像を使わずにできる対策
✤ 凝った見出しをいくつか用意してみる
✤ Webフォントを活用する
✤ ユニットグループで囲んでみる

48. t
5つの心得
01. 基本の3つのテンプレートが必要です
02. 詳細ページからデザインしましょう
03. デザインは「並べて」作りましょう
04. acms.cssの特徴は知っておくと便利です
05. 装飾にはテキストを活用しましょう

49. ご清聴ありがとうございました