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. 強・用・美から考える
    テーマデザインのヒント
    Mie WordPress Meetup #3

    View Slide

  2. 有限会社アップルップル
    Webデザイナー
    2018/04∼
    井斉花織
    人生初三重!
    自己紹介

    View Slide

  3. この1年でやったこと
    LP制作 受託サイト制作
    自社イベントの
    宣伝美術
    自社プロダクトの
    公式テーマ作成

    View Slide

  4. コミュニティ活動
    Adobe XD
    ユーザーグループ名古屋 Design Hack Nagoya

    View Slide

  5. 「強・用・美」
    知ってますか?

    View Slide

  6. 古代ローマ時代の城郭の設計者
    ヴィトルヴィウスが『建築十書』で述べた
    建築の三大要素
    強 用 美

    View Slide

  7. 強:構造
    ・耐震性
    ・火災時の安全性
    ・劣化の軽減

    View Slide

  8. 用:機能
    ・温熱環境
    ・高齢者への配慮
    ・家事動線

    View Slide

  9. 美:意匠
    ・プロポーション
    ・デザイン
    ・芸術性

    View Slide

  10. 強がなければ、用はない
    強と用がなければ、
    美はない
    しかし美がなければ、
    建築ではない



    by ヴィトルヴィウス






    View Slide

  11. なぜ建築?

    View Slide



  12.  
    学生の頃の専攻:建築 社会人の今:Web業界

    View Slide



  13.  
    学生の頃の専攻:建築 社会人の今:Web業界
    似てるなぁ⋯

    View Slide

  14. 「強・用・美」
    Webサイトに置き換えると

    View Slide

  15. 強:構造
    ・サーバー
    ・セキュリティ
    ・マークアップ

    View Slide

  16. 用:機能
    ・ユーザビリティ
    ・UI/UX
    ・アクセシビリティ

    View Slide

  17. 美:意匠
    ・デザイン
    ・スタイリング

    View Slide

  18. デザイン/スタイリング
    ユーザビリティ/UI/UX/アクセシビリティ
    サーバー/セキュリティ/マークアップ



    このヒエラルキーも成り立ちそう

    View Slide

  19. 本日お話しするのが
    強・用・美 テーマ
    デザイン
    落とし込んだ話

    View Slide

  20. テーマデザイン
    プロジェクトの概要

    View Slide

  21. 自社で開発しているプロダクト
    a‑blog cmsの公式テーマ
    新テーマではなくリニューアル
    :インストールした時に入る
    :blog2018→blog2019

    View Slide

  22. blog2018
    Before

    View Slide

  23. blog2019
    after

    View Slide

  24. 1 2 3 4
    制作フロー

    View Slide

  25. 1 2 3 4
    制作フロー

    View Slide

  26. 1.昨年テーマの見直し
    使っていて不便に感じた点
    トレンドとのギャップ
    初期搭載で望む機能

    View Slide

  27. 1.昨年テーマの見直し
    著者紹介
    欲しい
    SPの
    最適化
    ヘッダー
    古い?
    全体幅
    微妙
    関連記事
    欲しい
    記事一覧
    古い?

    View Slide

  28. 1 2 3 4
    制作フロー

    View Slide

  29. 1 2 3 4
    制作フロー

    View Slide

  30. 2.方向性の確立
    受注サイトの場合
     
    受注側 発注側
    ヒアリング

    View Slide

  31. 2.方向性の確立
    テーマ作成の場合
     
    制作側 ユーザー
    見えない

    View Slide

  32. 2.方向性の確立
    配布テーマなら
     
    制作側 ユーザー

    View Slide

  33. 2.方向性の確立
    でも公式テーマは⋯

    メディアサイト

    日常ブログ

    技術ブログ

    アフィリエイト
    みんなblog2019をカスタマイズする

    View Slide

  34. そこで

    View Slide

  35. ターゲットを絞り混まずに
    強・用・美 テーマ
    デザイン
    落とし込んでみる

    View Slide

  36. 公式テーマの特徴

    メディアサイト

    日常ブログ

    技術ブログ

    アフィリエイト
    みんなblog2019をカスタマイズする

    View Slide




  37. それぞれの性質は?

    View Slide






  38. それぞれの性質は?
    専門性

    View Slide






  39. カスタマイズ性


    それぞれの性質は?
    専門性

    View Slide

  40. となると

    View Slide

  41. は作り込み



    は柔軟に扱いやすく
    は誰にでも受け入れられる

    View Slide

  42. そう、まるで

    View Slide

  43. 無印良品の収納ケース
    そう、まるで
    のような

    View Slide

  44. 方向性
    無印良品で
    売ってそうなテーマ
    組み合わせ
    自由自在!
    クセのない
    シンプルな形!

    View Slide

  45. 続きは後編へ

    View Slide