View
273
Download
3
Category
Preview:
Citation preview
を使う
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. 装飾にはテキストを活用しましょう
ご清聴ありがとうございました
Recommended