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

Transcript

1. 強・用・美から考える テーマデザインのヒント Mie WordPress Meetup #3

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

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

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

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

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

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

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

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

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

    “ “ “ “ “ “

11. なぜ建築？

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

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

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

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

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

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

18. デザイン/スタイリング ユーザビリティ/UI/UX/アクセシビリティ サーバー/セキュリティ/マークアップ 美 用 強 このヒエラルキーも成り立ちそう

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

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

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

22. blog2018 Before

23. blog2019 after

24. 1 2 3 4 制作フロー

25. 1 2 3 4 制作フロー

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

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

    欲しい 記事一覧 古い？ ⋯

28. 1 2 3 4 制作フロー

29. 1 2 3 4 制作フロー

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

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

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

33. 2.方向性の確立 でも公式テーマは⋯  メディアサイト  日常ブログ  技術ブログ  アフィリエイト

    みんなblog2019をカスタマイズする

34. そこで

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

36. 公式テーマの特徴  メディアサイト  日常ブログ  技術ブログ  アフィリエイト みんなblog2019をカスタマイズする

37. 美 用 強 それぞれの性質は？

38. 美 用 強 高 低 それぞれの性質は？ 専門性

39. 美 用 強 高 低 カスタマイズ性 易 難 それぞれの性質は？ 専門性

40. となると

41. は作り込み 強 用 美 は柔軟に扱いやすく は誰にでも受け入れられる

42. そう、まるで

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

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

45. 続きは後編へ