1 2 3 4 制作フロー 

1 2 3 4 制作フロー 

担当領域  強・用・美  エンジニア デザイナー ※CMSの標準機能の部分も多い 

カスタマイズ可能な 範囲の線引きをする 用 

著者紹介 欲しい SPの 最適化 ヘッダー 古い？ 全体幅 微妙 関連記事 欲しい 記事一覧 古い？ ⋯ テーマの見直しで出た意見たち 

header admin 会社名 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    肩書き この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  My blog ここにリンクが入ります ここにリンクが入ります ここにリンクが入ります 月 火 水 木 金 土 日 4 < 過去のエントリーを日付から探す 2019 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 カテゴリー 初期状態 

header admin 会社名 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    肩書き この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  My blog ここにリンクが入ります ここにリンクが入ります ここにリンクが入ります 月 火 水 木 金 土 日 4 < 過去のエントリーを日付から探す 2019 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 カテゴリー 初期状態 +背景 +ブログ名カラー 

header admin 会社名 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    肩書き この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  ここにリンクが入ります ここにリンクが入ります ここにリンクが入ります 月 火 水 木 金 土 日 4 < 過去のエントリーを日付から探す 2019 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 カテゴリー 初期状態 +背景 +ブログ名ロゴ +ブログ名カラー 

header admin 会社名 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    肩書き この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 エントリータイトル 2019年00月00日(月) カテゴリー #タグ ここにリンクが入ります ここにリンクが入ります ここにリンクが入ります 月 火 水 木 金 土 日 4 < 過去のエントリーを日付から探す 2019 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 +背景 初期状態 +ブログ名ロゴ +ブログ名カラー +高さ (SPは別指定) 

全体幅 ・デフォルト ・640px ・700px ・760px ・820px 640 820 

記事一覧 admin 会社名 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    肩書き この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き さ、量、字間、行間等を確認するために入れています。 エントリータイトル 2019年00月00日(月) カテゴリー #タグ  この文章はダミーです。文字の大きさ、量、字間、行間等を確認 するために入れています。この文章はダミーです。文字の大き エントリータイトル 2019年00月00日(月) カテゴリー #タグ 月 火 水 木 金 土 日 4 < 過去のエントリーを日付から探す 2019 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 カテゴリー カテゴリー 1 1 エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ 1 2 3 4 > PC SP 

記事一覧 エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ 1 2 3 4 5 .summary .summary .is‑thumbnail‑2column .summary .is‑thumbnail‑1column エントリータイトルエ ントリータイトルエン トリータイトル 2019年00月00日(月) カテゴリー名 #タグ#タグ#タグ #タグ#タグ#タグ#タグ#タグ エントリータイトルエ ントリータイトルエン トリータイトル 2019年00月00日(月) カテゴリー名 #タグ#タグ#タグ #タグ#タグ#タグ#タグ#タグ エントリータイトルエ ントリータイトルエン トリータイトル 2019年00月00日(月) カテゴリー名 #タグ#タグ#タグ #タグ#タグ#タグ#タグ#タグ エントリータイトルエ ントリータイトルエン トリータイトル 2019年00月00日(月) カテゴリー名 #タグ#タグ#タグ #タグ#タグ#タグ#タグ#タグ エントリータイトルエ ントリータイトルエン トリータイトル 2019年00月00日(月) カテゴリー名 #タグ#タグ#タグ #タグ#タグ#タグ#タグ#タグ エントリータイトルエ ントリータイトルエン トリータイトル 2019年00月00日(月) カテゴリー名 #タグ#タグ#タグ #タグ#タグ#タグ#タグ#タグ エントリータイトルエントリータイトルエント リータイトルエントリー 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ エントリータイトルエントリータイトルエント リータイトルエントリー 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ SP SP SP 

美 ①装飾で主張しない 

点　 線　 面 $KeyColor #CCCCCC #F5F5F5 ・全体的に色素を薄く、組み合わせやすく ・複雑なCSSの表現を極力なくす 

月 火 水 木 金 土 日 4 < 過去のエントリーを日付から探す 2019 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 月 火 水 木 金 土 日 4 < 過去のエントリーを日付から探す 2019 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 1 2  検索キーワード  検索キーワード  admin 会社名 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    肩書き カテゴリー 1  検索キーワード #タグ1 #タグ2 #タグ3#タグ4 #タグ5#タグ6#タグ7 #タグ8 #タグ1 #タグ2 #タグ3#タグ4 #タグ5#タグ6#タグ7 #タグ8 カテゴリー 1 カテゴリー 1 1 admin 会社名 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    肩書き    1 2 3 4 5 検索カテゴリー #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ ユニットのリンクテキストです。 ユニットのリンクテキストです。 強調です。強調です。強調です。強調です。強調です。強調です。強調です。強調です。 重要です。重要です。重要です。重要です。重要です。重要です。重要です。重要です。 リンクテキストですリンクテキストです。 リンクテキストですリンクテキストです。 古いエントリータイトルエントリ ーエントリータイトル… < > 新しいエントリータイトルエント リーエントリータイトル… 一覧 2019年00月00日 プロフィール 2019年00月00日 プロフィール 1 2 3 4 5 古いエントリータイトルエントリ ーエントリータイトル… < > 新しいエントリータイトルエント リーエントリータイトル… 一覧 まずは最低限必要な要素で構成 

どんな順番でも違和感のないように適宜変更 境目がわかりにくい スッキリ 

月 火 水 木 金 土 日 4 < 過去のエントリーを日付から探す 2019 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 月 火 水 木 金 土 日 4 < 過去のエントリーを日付から探す 2019 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 1 2  検索キーワード  検索キーワード  admin 会社名 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    肩書き カテゴリー 1  検索キーワード #タグ1 #タグ2 #タグ3#タグ4 #タグ5#タグ6#タグ7 #タグ8 #タグ1 #タグ2 #タグ3#タグ4 #タグ5#タグ6#タグ7 #タグ8 カテゴリー 1 カテゴリー 1 1 admin 会社名 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    肩書き    1 2 3 4 5 #タグ1 #タグ2 #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ ユニットのリンクテキストです。 ユニットのリンクテキストです。 強調です。強調です。強調です。強調です。強調です。強調です。強調です。強調です。 重要です。重要です。重要です。重要です。重要です。重要です。重要です。重要です。 リンクテキストですリンクテキストです。 リンクテキストですリンクテキストです。 古いエントリータイトルエントリ ーエントリータイトル… < > 新しいエントリータイトルエント リーエントリータイトル… 一覧 2019年00月00日 プロフィール 2019年00月00日 プロフィール 1 2 3 4 5 古いエントリータイトルエントリ ーエントリータイトル… < > 新しいエントリータイトルエント リーエントリータイトル… 一覧 スタイルを確立 

美 ②入るコンテンツを 場合分けして考える 

admin 所属 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    肩書き プロフィール ・画像 ・ユーザー名 ・所属 ・肩書き ・アカウント ・自己紹介文 

admin 所属 ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。      肩書き ‑ 紹介文 ‑ 画像/所属/肩書き admin 所属    肩書き プロフィール + アカウント admin ここに自己紹介が入ります。ここに自己紹介が 入ります。ここに自己紹介が入ります。ここに 自己紹介が入ります。    不自然な余白を生まないようパターン化 

リンク My blog ここにリンクが入ります ここにリンクが入ります ここにリンクが入ります My blog エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ 1 2 3 4 5  エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ エントリータイトル 2019年00月00日(月) カテゴリー #タグ 1 2 3 4 5 あり(初期設定) なし 

 制作＆ブラッシュアップ 用 美 カスタマイズ可能な範囲の線引きをする 装飾で主張しない 入るコンテンツを場合分けして考える 

blog2019 リリース！ (この間約3ヶ月) 

ablogcms.io Blog2019 実際に触ってみたいなら⋯ 

のちにXDファイルも 配布予定です 

まとめ 

強・用・美 構造 機能 意匠 

強がなければ、用はない 強と用がなければ、 美はない しかし美がなければ、 建築ではない 美 用 強 by ヴィトルヴィウス “ “ “ “ “ “ 

強がなければ、用はない 強と用がなければ、 美はない しかし美がなければ、 美 用 強 “ “ “ “ “ “ ではない Webサイト 

公式テーマ  メディアサイト  日常ブログ  技術ブログ  アフィリエイト 想定されるユーザーが広範囲 

強・用・美 テーマ デザイン 落とし込む 公式テーマ 

①どの部分の検討か？ その時に作っているものは、 強・用・美のうち どこへのアプローチか テーマデザインにおいて 美 用 強 

②どんな性質があるか？ 例)難易度/カスタマイズ性 テーマデザインにおいて 美 用 強 

美 用 強 ③それはユーザーに 　どう扱われるのか 例)ユーザーのカスタマイズを 　 どこまで制御するか 例)入るコンテンツのパターンは 　 何種類あるか テーマデザインにおいて 

強・用・美の考え方は 不確定要素が多い「テーマ制作」に 堅実な「軸」をもたらす 

強・用・美をヒントにした テーマデザインで 人が賑わう街をつくろう 

ご静聴ありがとうございました Twitter:@isaikaori Facebook:isaikaori Blog:https://isaikaori.com