強・用・美から考えるテーマデザインのヒント_後編

1.

1 2 3 4 制作フロー

2.

1 2 3 4 制作フロー

3.

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

4.

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

5.

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

6.

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 カテゴリー初期状態

7.

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。エントリータイトル 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 カテゴリー初期状態 +背景 +ブログ名カラー

8.

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。エントリータイトル 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 カテゴリー初期状態 +背景 +ブログ名ロゴ +ブログ名カラー

9.

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。エントリータイトル 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は別指定)

10.

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

11.

記事一覧 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

12.

記事一覧エントリータイトル 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

13.

美 ①装飾で主張しない

14.

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

15.

月火水木金土日 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 古いエントリータイトルエントリーエントリータイトル… < > 新しいエントリータイトルエントリーエントリータイトル… 一覧まずは最低限必要な要素で構成

16.

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

17.

月火水木金土日 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 古いエントリータイトルエントリーエントリータイトル… < > 新しいエントリータイトルエントリーエントリータイトル… 一覧スタイルを確立

18.

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

19.

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

20.

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

21.

リンク 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 あり(初期設定) なし

22.

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

23.

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

24.

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

25.

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

26.

まとめ

27.

強・用・美構造機能意匠

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

強・用・美から考えるテーマデザインのヒント_後編

強・用・美から考えるテーマデザインのヒント_後編

Want more?

Transcript