を使う

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. 装飾にはテキストを活用しましょう

ご清聴ありがとうございました