Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
April 27, 2019
Design
0
320
強・用・美から考えるテーマデザインのヒント_後編
Mie WordPress Meetup #3
isaikaori
April 27, 2019
Tweet
Share
More Decks by isaikaori
See All by isaikaori
isaikaori
0
35
isaikaori
0
290
isaikaori
0
170
isaikaori
0
79
isaikaori
1
260
isaikaori
2
720
isaikaori
0
520
isaikaori
1
590
isaikaori
2
170
Other Decks in Design
See All in Design
sn_taiga
0
390
masakioka
2
310
mannuamrit
0
390
jonoda
1
300
xai
0
610
asksuyo
1
120
seeeeemy
0
300
unosanno
0
180
oakleybillions
2
1k
youknowcast
1
150
avyjonsay
0
110
bamfonyy
0
490
Featured
See All Featured
davidbonilla
70
3.6k
pauljervisheath
195
15k
trishagee
24
2.6k
sachag
446
36k
samlambert
237
10k
jensimmons
207
10k
chrislema
173
14k
akmur
252
19k
mongodb
23
3.9k
marktimemedia
7
400
searls
204
36k
brettharned
93
3k
Transcript
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