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

Mie WordPress Meetup #3

Transcript

1. 1 2 3 4
   制作フロー
   

   View Slide

2. 1 2 3 4
   制作フロー
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   カテゴリー
   初期状態
   +背景
   +ブログ名カラー
   

   View Slide

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
   カテゴリー
   初期状態
   +背景
   +ブログ名ロゴ
   +ブログ名カラー
   

   View Slide

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は別指定)
   

   View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

13. 美
    ①装飾で主張しない
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    古いエントリータイトルエントリ
    ーエントリータイトル…
    < >
    新しいエントリータイトルエント
    リーエントリータイトル…
    一覧
    スタイルを確立
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. まとめ
    

    View Slide

27. 強・用・美
    構造 機能 意匠
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide