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

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