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

t本セッションの前提

静的な「見映え」を 中心にお話しします

情報設計やエフェクトも重要ですが

t今回のアジェンダ

01. デザインカンプとは？ 02. 最初に作るページと注意点 03. デザイン展開 04. どのモジュールを使う？ 05. マルチデバイス対応を考える 06. CMSが活きる装飾

01

デザインカンプとは？

tカンプ 【英】comprehensive layout

カンプとは、広告や印刷などの制作において、制作物の仕上がりを具体的に示すために作られる見本のことである。

引用元：IT用語辞典バイナリ http://www.weblio.jp/content/カンプ

tカンプ 【英】comprehensive layout

Webサイトの見映えを クライアントや制作メンバーと共有するための画像ファイル

t必要なテンプレート

✤トップページ top.html

✤一覧ページ index.html

✤詳細ページ entry.html

1テンプレートでの運用もOK

02

最初に作るページと注意点

詳細ページ（entry.html）

tおすすめする理由

✤納品後もっとも更新される

✤ベーシックなので合意形成しやすい

✤検索流入も考慮した情報設計が必要

!必要なのは「全部のせ」

全部のせ

t「全部のせ」の構成要素

!一番更新しやすい「テキスト」

運用者の リテラシーにも 大きく依存する

CSSフレームワーク「acms.css」

t12カラムで作ればOK

t12カラムで作ればOK

デフォルトの 余白は20px

左右に10pxの padding

左右に10pxの margin

tカスタムユニット

03

デザイン展開

t並べて作って俯瞰する

✤繰り返し使うパーツがわかる

✤配色やサイズの揺らぎをなくす

✤トップページなど独自のデザインも把握

!アートボードおすすめです

04

どのモジュールを使う？

tEntry_Summary おすすめです

✤エントリー一覧を表示するときに

✤タイトル、URL、メイン画像カテゴリー、概要文 etc…

✤Entry_List のスニペットも使い勝手◎

t1エントリーも意外とデキる

✤ランディングページに向いている

✤シンプルな運用がしやすい

バージョン機能での管理も…

tリンクとナビゲーション

✤グローバルナビでも選択肢はある

✤運用者のリテラシーを考慮する

05

マルチデバイス対応を考える

acms.cssはモバイルファースト！

t並べて作る！

✤デバイスごとに変えるべきスタイル

✤統一して使えるスタイル

✤情報のプライオリティー

!あらゆるケースを想定できる

tオフキャンバスがおすすめです

✤ スマートフォンに対応

✤ ナビゲーションが増えていってもOK

✤ 弊社で作っています

06

CMSが活きる装飾

tCMS導入サイトのジレンマ

✤ 画像見出しは極力避けたい

✤ 画像の加工も、クライアントの手元でできるかというと…

✤ 理想は「写真と文字でかっこよく」

対策01

見出しに凝ってみる

対策02

Webフォントを使う

対策03

ユニットグループで囲む

tまとめ

✤ 最初に作るのは entry.html

✤ Entry_Bodyのクセは頭の片隅に

✤ ページの一覧で迷った時は Entry_Summary

✤ ページとマルチデバイス展開は並べて作る

✤ 基本機能だけで装飾の工夫はできる

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