Successfully reported this slideshow.

a-blog cms 導入サイトのためのデザインカンプ制作術

1

Share

1 of 56
1 of 56

a-blog cms 導入サイトのためのデザインカンプ制作術

1

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

a-blog cms 導入サイトのためのデザインカンプ制作術

  1. 1. 導入サイトのための デザインカンプ制作術
  2. 2. t 本セッションの前提 静的な「見映え」を 中心にお話しします 情報設計やエフェクトも重要ですが
  3. 3. t 今回のアジェンダ 01. デザインカンプとは? 02. 最初に作るページと注意点 03. デザイン展開 04. どのモジュールを使う? 05. マルチデバイス対応を考える 06. CMSが活きる装飾
  4. 4. 01 デザインカンプとは?
  5. 5. t カンプ 【英】comprehensive layout カンプとは、広告や印刷などの制作に おいて、制作物の仕上がりを具体的に 示すために作られる見本のことである。 引用元:IT用語辞典バイナリ http://www.weblio.jp/content/カンプ
  6. 6. t カンプ 【英】comprehensive layout Webサイトの見映えを クライアントや制作メンバーと 共有するための画像ファイル
  7. 7. t 必要なテンプレート ✤ トップページ top.html ✤ 一覧ページ index.html ✤ 詳細ページ entry.html
  8. 8. 1テンプレートでの運用もOK
  9. 9. 02 最初に作るページと注意点
  10. 10. 詳細ページ(entry.html)
  11. 11. t おすすめする理由 ✤ 納品後もっとも更新される ✤ ベーシックなので合意形成しやすい ✤ 検索流入も考慮した情報設計が必要 ! 必要なのは「全部のせ」
  12. 12. 全部のせ
  13. 13. t 「全部のせ」の構成要素 ! 一番更新しやすい「テキスト」
  14. 14. 運用者の リテラシーにも 大きく依存する
  15. 15. CSSフレームワーク「acms.css」
  16. 16. t 12カラムで作ればOK
  17. 17. t 12カラムで作ればOK デフォルトの 余白は20px
  18. 18. 左右に10pxの padding
  19. 19. 左右に10pxの margin
  20. 20. t カスタムユニット
  21. 21. 03 デザイン展開
  22. 22. t 並べて作って俯瞰する ✤ 繰り返し使うパーツがわかる ✤ 配色やサイズの揺らぎをなくす ✤ トップページなど独自のデザインも把握 ! アートボードおすすめです
  23. 23. 04 どのモジュールを使う?
  24. 24. t Entry_Summary おすすめです ✤ エントリー一覧を表示するときに ✤ タイトル、URL、メイン画像
 カテゴリー、概要文 etc… ✤ Entry_List のスニペットも使い勝手◎
  25. 25. t 1エントリーも意外とデキる ✤ ランディングページに向いている ✤ シンプルな運用がしやすい バージョン機能での管理も…
  26. 26. t リンクとナビゲーション ✤ グローバルナビでも選択肢はある ✤ 運用者のリテラシーを考慮する
  27. 27. 05 マルチデバイス対応を考える
  28. 28. acms.cssはモバイルファースト!
  29. 29. t 並べて作る! ✤ デバイスごとに変えるべきスタイル ✤ 統一して使えるスタイル ✤ 情報のプライオリティー !あらゆるケースを想定できる
  30. 30. t オフキャンバスがおすすめです ✤ スマートフォンに対応 ✤ ナビゲーションが増えていってもOK ✤ 弊社で作っています
  31. 31. 06 CMSが活きる装飾
  32. 32. t CMS導入サイトのジレンマ ✤ 画像見出しは極力避けたい ✤ 画像の加工も、クライアントの手元で
 できるかというと… ✤ 理想は「写真と文字でかっこよく」
  33. 33. 対策01 見出しに凝ってみる
  34. 34. 対策02 Webフォントを使う
  35. 35. 対策03 ユニットグループで囲む
  36. 36. t まとめ ✤ 最初に作るのは entry.html ✤ Entry_Bodyのクセは頭の片隅に ✤ ページの一覧で迷った時は Entry_Summary ✤ ページとマルチデバイス展開は並べて作る ✤ 基本機能だけで装飾の工夫はできる
  37. 37. ご清聴ありがとうございました

×