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