Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

466 views

Published on

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

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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. ご清聴ありがとうございました

×