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

Mie WordPress Meetup #3

Transcript

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. 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 カテゴリー 初期状態 +背景 +ブログ名カラー
8. 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 カテゴリー 初期状態 +背景 +ブログ名ロゴ +ブログ名カラー
9. 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は別指定)
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