a-blog cms 導入サイトのためのデザインカンプ制作術
?
1 like?683 views
9/23(金) 「a-blog cms 勉強会 in 東京」にてお話しした内容です。a-blog cms を使ったサイトをデザインするときの注意点、装飾のコツについてご紹介しました。
a-blog cms 導入サイトのためのデザインカンプ制作術
- 4. t 今回のアジェンダ 01. デザインカンプとは？ 02. 最初に作るページと注意点 03. デザイン展開 04. どのモジュールを使う？ 05. マルチデバイス対応を考える 06. CMSが活きる装飾
- 9. t 必要なテンプレート ? トップページ top.html ? 一覧ページ index.html ? 詳細ページ entry.html
- 10. 1テンプレートでの运用も翱碍
- 11. 02 最初に作るページと注意点
- 13. t おすすめする理由 ? 納品後もっとも更新される ? ベーシックなので合意形成しやすい ? 検索流入も考慮した情報設計が必要 ! 必要なのは「全部のせ」
- 14. 全部のせ
- 20. t 12カラムで作ればOK
- 23. 左右に10pxの padding
- 26. 左右に10pxの margin
- 27. t カスタムユニット
- 28. 03 デザイン展開
- 31. t 並べて作って俯瞰する ? 繰り返し使うパーツがわかる ? 配色やサイズの揺らぎをなくす ? トップページなど独自のデザインも把握 ! アートボードおすすめです
- 32. 04 どのモジュールを使う？
- 34. t Entry_Summary おすすめです ? エントリー一覧を表示するときに ? タイトル、URL、メイン画像? カテゴリー、概要文 etc… ? Entry_List のスニペットも使い勝手◎
- 40. 05 マルチデバイス対応を考える
- 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. ご清聴ありがとうございました