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.
導入サイトのための
デザインカンプ制作術
t
本セッションの前提
静的な「見映え」を
中心にお話しします
情報設計やエフェクトも重要ですが
t
今回のアジェンダ
01. デザインカンプとは?
02. 最初に作るページと注意点
03. デザイン展開
04. どのモジュールを使う?
05. マルチデバイス対応を考える
06. CMSが活きる装飾
01
デザインカンプとは?
t
カンプ 【英】comprehensive layout
カンプとは、広告や印刷などの制作に
おいて、制作物の仕上がりを具体的に
示すために作られる見本のことである。
引用元:IT用語辞典バイナリ
http://www.weblio.jp/c...
t
カンプ 【英】comprehensive layout
Webサイトの見映えを
クライアントや制作メンバーと
共有するための画像ファイル
t
必要なテンプレート
✤ トップページ top.html
✤ 一覧ページ index.html
✤ 詳細ページ entry.html
1テンプレートでの運用もOK
02
最初に作るページと注意点
詳細ページ(entry.html)
t
おすすめする理由
✤ 納品後もっとも更新される
✤ ベーシックなので合意形成しやすい
✤ 検索流入も考慮した情報設計が必要
! 必要なのは「全部のせ」
全部のせ
t
「全部のせ」の構成要素
! 一番更新しやすい「テキスト」
運用者の
リテラシーにも
大きく依存する
CSSフレームワーク「acms.css」
t
12カラムで作ればOK
t
12カラムで作ればOK
デフォルトの
余白は20px
左右に10pxの
padding
左右に10pxの
margin
t
カスタムユニット
03
デザイン展開
t
並べて作って俯瞰する
✤ 繰り返し使うパーツがわかる
✤ 配色やサイズの揺らぎをなくす
✤ トップページなど独自のデザインも把握
! アートボードおすすめです
04
どのモジュールを使う?
t
Entry_Summary おすすめです
✤ エントリー一覧を表示するときに
✤ タイトル、URL、メイン画像

カテゴリー、概要文 etc…
✤ Entry_List のスニペットも使い勝手◎
t
1エントリーも意外とデキる
✤ ランディングページに向いている
✤ シンプルな運用がしやすい
バージョン機能での管理も…
t
リンクとナビゲーション
✤ グローバルナビでも選択肢はある
✤ 運用者のリテラシーを考慮する
05
マルチデバイス対応を考える
acms.cssはモバイルファースト!
t
並べて作る!
✤ デバイスごとに変えるべきスタイル
✤ 統一して使えるスタイル
✤ 情報のプライオリティー
!あらゆるケースを想定できる
t
オフキャンバスがおすすめです
✤ スマートフォンに対応
✤ ナビゲーションが増えていってもOK
✤ 弊社で作っています
06
CMSが活きる装飾
t
CMS導入サイトのジレンマ
✤ 画像見出しは極力避けたい
✤ 画像の加工も、クライアントの手元で

できるかというと…
✤ 理想は「写真と文字でかっこよく」
対策01
見出しに凝ってみる
対策02
Webフォントを使う
対策03
ユニットグループで囲む
t
まとめ
✤ 最初に作るのは entry.html
✤ Entry_Bodyのクセは頭の片隅に
✤ ページの一覧で迷った時は Entry_Summary
✤ ページとマルチデバイス展開は並べて作る
✤ 基本機能だけで装飾の工夫はできる
ご清聴ありがとうございました
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
Upcoming SlideShare
Loading in …5
×

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

478 views

Published on

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

Published in: Design
  • Be the first to comment

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

×