9/23(金) 「a-blog cms 勉強会 in 東京」にてお話しした内容です。a-blog cms を使ったサイトをデザインするときの注意点、装飾のコツについてご紹介しました。

1. 導入サイトのための
デザインカンプ制作術

3. t
本セッションの前提
静的な「見映え」を
中心にお話しします
情報設計やエフェクトも重要ですが

4. t
今回のアジェンダ
01. デザインカンプとは？
02. 最初に作るページと注意点
03. デザイン展開
04. どのモジュールを使う？
05. マルチデバイス対応を考える
06. CMSが活きる装飾

5. 01
デザインカンプとは？

6. t
カンプ 【英】comprehensive layout
カンプとは、広告や印刷などの制作に
おいて、制作物の仕上がりを具体的に
示すために作られる見本のことである。
引用元：IT用語辞典バイナリ
http://www.weblio.jp/content/カンプ

7. t
カンプ 【英】comprehensive layout
Webサイトの見映えを
クライアントや制作メンバーと
共有するための画像ファイル

9. t
必要なテンプレート
✤ トップページ top.html
✤ 一覧ページ index.html
✤ 詳細ページ entry.html

10. 1テンプレートでの運用もOK

11. 02
最初に作るページと注意点

12. 詳細ページ（entry.html）

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

14. 全部のせ

15. t
「全部のせ」の構成要素
! 一番更新しやすい「テキスト」

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

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

20. t
12カラムで作ればOK

21. t
12カラムで作ればOK
デフォルトの
余白は20px

23. 左右に10pxの
padding

26. 左右に10pxの
margin

27. t
カスタムユニット

28. 03
デザイン展開

31. t
並べて作って俯瞰する
✤ 繰り返し使うパーツがわかる
✤ 配色やサイズの揺らぎをなくす
✤ トップページなど独自のデザインも把握
! アートボードおすすめです

32. 04
どのモジュールを使う？

34. t
Entry_Summary おすすめです
✤ エントリー一覧を表示するときに
✤ タイトル、URL、メイン画像
カテゴリー、概要文 etc…
✤ Entry_List のスニペットも使い勝手◎

36. t
1エントリーも意外とデキる
✤ ランディングページに向いている
✤ シンプルな運用がしやすい
バージョン機能での管理も…

38. t
リンクとナビゲーション
✤ グローバルナビでも選択肢はある
✤ 運用者のリテラシーを考慮する

40. 05
マルチデバイス対応を考える

41. acms.cssはモバイルファースト！

43. t
並べて作る！
✤ デバイスごとに変えるべきスタイル
✤ 統一して使えるスタイル
✤ 情報のプライオリティー
!あらゆるケースを想定できる

46. t
オフキャンバスがおすすめです
✤ スマートフォンに対応
✤ ナビゲーションが増えていってもOK
✤ 弊社で作っています

47. 06
CMSが活きる装飾

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

49. 対策01
見出しに凝ってみる

51. 対策02
Webフォントを使う

53. 対策03
ユニットグループで囲む

55. t
まとめ
✤ 最初に作るのは entry.html
✤ Entry_Bodyのクセは頭の片隅に
✤ ページの一覧で迷った時は Entry_Summary
✤ ページとマルチデバイス展開は並べて作る
✤ 基本機能だけで装飾の工夫はできる

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