Successfully reported this slideshow.

a-blog cmsを使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】

1

Share

1 of 49
1 of 49

a-blog cmsを使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】

1

Share

Download to read offline

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

2016年11月18日(土)「a-blog cms Training Camp 2016 Autumn」にて発表した内容です。
a-blog cmsの実装をこれから始めたい方、実装は担当しないけれど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を使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】

  1. 1. を使う 5つの心得 デザイナーのための
  2. 2. t 5つの心得 01. 基本の3つのテンプレートが必要です 02. 詳細ページからデザインしましょう 03. デザインは「並べて」作りましょう 04. acms.cssの特徴は知っておくと便利です 05. 装飾にはテキストを活用しましょう
  3. 3. 基本の3つのテンプレートが 必要です 01
  4. 4. t a-blog cms 基本のテンプレート トップページ top.html 一覧ページ index.html 詳細ページ entry.html
  5. 5. top.html index.html index.html entry.htmlentry.html
  6. 6. t トップページ(top.html)
  7. 7. t トップページ(top.html) ✤ Webサイトの玄関 ✤ 一番クライアントが気にするところでもある ✤ ある程度好みを反映してあげたい
  8. 8. t 一覧ページ(index.html)
  9. 9. t 一覧ページ(index.html) ✤ 情報の性質によって見せ方は異なる ✤ a-blog cmsでスタンダードな形は5種類
  10. 10. t エントリーの一部や全部を並べたレイアウト
  11. 11. t 画像を並べたレイアウト
  12. 12. t タイトルを並べたレイアウト
  13. 13. t 日時を並べたレイアウト
  14. 14. t ビジュアルデザインを重視した独特のレイアウト
  15. 15. t 詳細ページ(entry.html)
  16. 16. 詳細ページからデザインしましょう 02
  17. 17. t 詳細ページ(entry.html)
  18. 18. t おすすめする理由 ✤ 納品後もっとも更新される ✤ ベーシックなので合意形成しやすい ✤ 検索流入も考慮した情報設計が必要 「全部のせ」が必要
  19. 19. t 全部のせ とは 運用者が追加できる要素の一覧
  20. 20. t 全部のせに最低限ほしい要素
  21. 21. t 全部のせに最低限ほしい要素 ✤ 画像(1~3カラム) ✤ 本文テキスト ✤ 見出し(h1~h5程度) ✤ テーブル ✤ リンクのためのボタン
  22. 22. 運用者の リテラシーにも 大きく依存する
  23. 23. t 後工程のことも考えていたりします 早めに実装に取り掛かってもらえる! (その間にトップなどに時間をかけられる)
  24. 24. t 足りないものはカスタムユニットで
  25. 25. デザインは「並べて」作りましょう 03
  26. 26. 突然ですが、 どんなデザインツールをお使いですか?
  27. 27. デザインは 並べて作る!
  28. 28. t アートボード機能の活用がおすすめ ✤ 静的サイト以上にデザインパターンが必要 ✤ 繰り返し使うパーツが把握できる ✤ 配色やサイズの「ゆらぎ」を防ぐ ✤ 必要なテンプレートを視覚的に把握できる
  29. 29. acms.cssの特徴は 知っておくと便利です 04
  30. 30. t CSSフレームワーク「acms.css」
  31. 31. t 基本的に12カラムで作ればOK デフォルトの 余白は20px
  32. 32. t acms.css の特徴 ✤ Webサイトに欲しい要素を揃えている ✤ Bootstrapなどとの併用OK ✤ 12カラムのグリッドシステム ✤ デフォルトは960px
  33. 33. 左右に10pxの padding
  34. 34. 左右に10pxの margin
  35. 35. 装飾にはテキストを活用しましょう 05
  36. 36. t CMS導入でのデザイナーのジレンマ ✤ 画像見出しは極力避けたい ✤ 画像の加工も、クライアントの手元で
 できるかというと… ✤ 理想は「写真と文字でかっこよく」
  37. 37. t 画像を使わずにできる対策 ✤ 凝った見出しをいくつか用意してみる ✤ Webフォントを活用する ✤ ユニットグループで囲んでみる
  38. 38. t 5つの心得 01. 基本の3つのテンプレートが必要です 02. 詳細ページからデザインしましょう 03. デザインは「並べて」作りましょう 04. acms.cssの特徴は知っておくと便利です 05. 装飾にはテキストを活用しましょう
  39. 39. ご清聴ありがとうございました

×