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

Fb3f3c151603102a5e60b197a7dfbeb7?s=47 isaikaori
April 27, 2019

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

Mie WordPress Meetup #3

Fb3f3c151603102a5e60b197a7dfbeb7?s=128

isaikaori

April 27, 2019
Tweet

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