BizVektorに見る汎用テンプレートの設計思想

「汎用デザインと
マークアップごにょごにょ」
BizVektorに見る汎用テンプレート設計思想

名古屋で株式会社ベクトルというウェブ制作会社をしています。
普段はWordPressを使って企業サイトやポータルサイト、
業務管理システムなどを制作しながら生きています。
名前：石川栄和
Twitter : ＠kurudrive
2013 WordCamp Tokyo セッションパネラー
2013 WordFes Nagoya 実行委員＆セッションスピーカー
2013 WordCrab Fukui セッションスピーカー
2012 WordCamp Tokyo セッションスピーカー
2012 WordBeach Nagoya 実行委員 & セッションスピーカー
最近のWordPressコミュニティでの活動
スタッフ募集中！ ※詳細は弊社サイト採用ページまで。

WordPressテーマ WordPressプラグイン
企業サイト向けWordPressテーマ
BizVektor
無料
配布中
http://bizvektor.com
VK Post Author Display
http://wordpress.org/plugins/vk-post-author-
display/developers/
投稿の下に投稿者情報を表示出来ます。
著書（共著）

ビジネス向け汎用WordPressテーマ
HTMLやCSSの知識が無くても管理画面からの設
定だけでウェブサイトが完成する。
特徴
ビジネス用途に特化して構成
（WordPressだけどブログっぽくない）
デザインのバリエーションが豊富！
幅広いサイトに対応出来る。
！

デザインの汎用性
様々な業種のウェブサイトの要望を満たす汎
用デザインとは？
コーポレートカラーに合わせた色に！
(ヾﾉ･∀･`)ﾑﾘﾑﾘ
フォーマルな感じ！親しみのある感じ！

デザインを変えられるように
CSSだけで雰囲気が変えられるように
極力HTML内に画像のタグを
埋め込まない
デザインバリエーションを増やしやすいHTML
／CSS構造
1
２
CSSの背景画像や
アイコンフォントの使用など

DefaultPlain
中に入れる画像次第で様々な雰囲気が出るように
テンプレート自体はデザインを主張しない
企業サイト向けにフォーマルな印象になるよう
重みのある配色・ディティール

DefaultPlain
/plain/plain.css
デザインを増やしやすいCSS構造
@import "../plain/plain.css";
/001/001.css
共通で使いそうなレイアウトなど
のCSSと固有のデザイン用CSS
の分離

現在のBizVektorのCSS構造（１）
_base_size_tab.scss
_base_size_pc_small.scss
_base_size_full.scss
_base.scss
_vk_icons.scss
neat.scss
neat. css
各デザイン共通のCSS
BizVektor NEATの場合
NEATで使用するアイコンフォ
ントのCSS
NEAT固有のデザイン指定
このファイルだけ作れば
デザインを量産しやすい

現在のBizVektorのCSS構造（２）
neat. css
<head>
g_menu_divide_x. css
<style type=“text/css”>
• 色の指定
• フォントの指定
</style>
style. css
</head>
とりあえずNEATのデザイン指定を
読み込む
グローバルメニューのボタンの
横幅指定（画面が広い場合のみ）
管理画面からユーザーが好みの色
やフォントなどを指定
※PHPで動的に出力
部分的なカスタマイズをしたい
場合はこのファイルに記述。
※WordPressにかならず存在するファイル。
個別のカスタマイズがしっかり有効になるように
最後に読み込んでいる。
量産のしやすさと個別のカスタマイズ性を両立

デザインを増やしやすいHTML構造
HTML構造は後からは変更が難しい！
既にCSSなどが複数運用されてしまうと、
HTML構造を変更したら既存のCSSも
修正が必要になる。
！
想定するデザインを実現するHTMLよりも少し
多めにタグをマークアップしておく。

HOME サービス会社案内お知らせ
<ul id=“nav”>
<li>HOME</li>
<li>サービス</li>
<li>会社案内</li>
<li>お知らせ</li>
</ul>
#nav {
margin:10px auto;
width:950px;
}
#nav li { ごにょごにょ }
HOME サービス会社案内お知らせ
http://ごにょごにょ
幅いっぱいに装飾したい！
※レスポンシブ
(ﾟДﾟ)ﾌｧ?

<ul id=“nav”>
<li>HOME</li>
</ul>
<nav>
<div class=“nav_inner”>
<ul>
<li>HOME</li>
</ul>
</div>
</nav>
CSS3やbefore/after要素がかなり使いやすい環境に
なってきましたが、対応ブラウザの幅の広さや
CSSを書く人の技術レベルを考慮すると、まだ少し多めに
マークアップしておいた方が良いかと。
※とは言え無駄なタグが増えすぎるのもよくないので状況に応じて程々に・・・。

ちょっとデザインのお話

オレ流デザインの原則
デザインは内容の構造をもとに組み上げる
タグのマークアップ
見た目のマークアップ
HTMLコーディング＝
デザイン＝

見た目のマークアップ
伝えたい事、重要度を判断して、
各要素の見た目をマークアップしていく。
一番重要な見出し → h1
HTML
デザイン
一番重要な見出し → 大きく目立つ色にしたり
違い
タグは選択要素が少ないがデザインは大きさ・色・太さなど多い！
！

不変の要素
余白
「余白を制す者はデザインを制す」
デザ・イナー（イタリア 1894～1945）

例
お城めぐりのお供に戦国攻城記
戦国攻城記は携帯のGPS機能を使ったお城めぐりスタンプラリーゲームです。
国宝天守や現存天守のお城など、様々なカテゴリーを設けていますので、攻略しや
すい所から順次攻略し、日本100名城の制覇を目指しましょう！
また、チェックイン回数など様々な要素を集計した城主機能など、ゲーム性をもっ
た機能をどんどん実装していきますのでご期待下さい。
お城まじ最高！
とりあえず行ってみなよ！近くなら彦根城がお勧めだよ！
section
h1
p
p
h2
p

HTML例
<section>
<h1>お城めぐりのお供に戦国攻城記</h1>
<p>戦国攻城記は携帯のGPS機能を使ったお城めぐりスタンプラリーゲームです。
すい所から順次攻略し、日本100名城の制覇を目指しましょう！</p>
<p>また、チェックイン回数など様々な要素を集計した城主機能など、ゲーム性をもっ
た機能をどんどん実装していきますのでご期待下さい。</p>
<h2>お城まじ最高！</h2>
<p>とりあえず行ってみなよ！近くなら彦根城がお勧めだよ！</p>
</section>

例
section
section
section

htmlでは本当は一つのsecctionのはずなのに
セクションが３つに見える
デザインがおかしい。
HTMLの構造に応じて余白を設定すれば、
自然とまとまりのあるデザインになる。

ビズベクトルに戻ります

使うのは一般の素人
Sectionごとに余白を設定しようが、
素人にマークアップして貰うのは無理がある。
何よりそれはユーザーにやさしくない。
H3以降の見出しタグなどの
上にマージンを多めに設定
文字数などが違っても、
なるべく要素が揃うように設定。
１
２

例
section
section
マークアップなんて
してもらえない

例

使う人、見る人、ユーザーの事を
よく考えて作りましょう。

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

BizVektorに見る汎用テンプレートの設計思想

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a BizVektorに見る汎用テンプレートの設計思想

Semelhante a BizVektorに見る汎用テンプレートの設計思想 (20)

Mais de Hidekazu Ishikawa

Mais de Hidekazu Ishikawa (18)

BizVektorに見る汎用テンプレートの設計思想