Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

isaikaori
April 27, 2019

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

Mie WordPress Meetup #3

isaikaori

April 27, 2019
Tweet

More Decks by isaikaori

Other Decks in Design

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