Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
強・用・美から考えるテーマデザインのヒント_前編
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
isaikaori
April 27, 2019
Design
1.9k
1
Share
強・用・美から考えるテーマデザインのヒント_前編
Mie WordPress Meetup #3
isaikaori
April 27, 2019
More Decks by isaikaori
See All by isaikaori
熱狂が伝播するチームの作り方
isaikaori
1
3.5k
今日から始めるDesignOpsのヒント
isaikaori
1
760
Deep Dive Adobe XD - レイアウト編
isaikaori
0
280
Adobe XDの『こんな時どうする?』を集めました
isaikaori
0
760
アウトプットむずい
isaikaori
0
360
実践!a-blog cmsユーザーのためのsite2019.xd活用法
isaikaori
0
220
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
920
実務で活かすXD!制作を支える取り組みと代表機能の活用術
isaikaori
2
1.5k
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
810
Other Decks in Design
See All in Design
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
shikichee
2
4.1k
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
2
800
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
190
デザインとフロントエンドの境界が融ける Claude Code × Figma
littlebusters
1
2.2k
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
6
1.1k
2026年の勢い / Momentum for 2026
bebe
0
420
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
saka2jp
2
1.2k
kintone Style Book
kintone
6
13k
公開スライド)熊本市様-電子申請中級編
garyuten
0
1.2k
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
760
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
290
Signull 団体説明資料
signull
0
550
Featured
See All Featured
Amusing Abliteration
ianozsvald
1
150
Thoughts on Productivity
jonyablonski
76
5.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
340
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.1k
Color Theory Basics | Prateek | Gurzu
gurzu
0
290
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
エンジニアに許された特別な時間の終わり
watany
106
240k
AI: The stuff that nobody shows you
jnunemaker
PRO
6
570
Fireside Chat
paigeccino
42
3.9k
Transcript
強・用・美から考える テーマデザインのヒント Mie WordPress Meetup #3
有限会社アップルップル Webデザイナー 2018/04∼ 井斉花織 人生初三重! 自己紹介
この1年でやったこと LP制作 受託サイト制作 自社イベントの 宣伝美術 自社プロダクトの 公式テーマ作成
コミュニティ活動 Adobe XD ユーザーグループ名古屋 Design Hack Nagoya
「強・用・美」 知ってますか?
古代ローマ時代の城郭の設計者 ヴィトルヴィウスが『建築十書』で述べた 建築の三大要素 強 用 美
強:構造 ・耐震性 ・火災時の安全性 ・劣化の軽減
用:機能 ・温熱環境 ・高齢者への配慮 ・家事動線
美:意匠 ・プロポーション ・デザイン ・芸術性
強がなければ、用はない 強と用がなければ、 美はない しかし美がなければ、 建築ではない 美 用 強 by ヴィトルヴィウス
“ “ “ “ “ “
なぜ建築?
学生の頃の専攻:建築 社会人の今:Web業界
学生の頃の専攻:建築 社会人の今:Web業界 似てるなぁ⋯
「強・用・美」 Webサイトに置き換えると
強:構造 ・サーバー ・セキュリティ ・マークアップ
用:機能 ・ユーザビリティ ・UI/UX ・アクセシビリティ
美:意匠 ・デザイン ・スタイリング
デザイン/スタイリング ユーザビリティ/UI/UX/アクセシビリティ サーバー/セキュリティ/マークアップ 美 用 強 このヒエラルキーも成り立ちそう
本日お話しするのが 強・用・美 テーマ デザイン 落とし込んだ話
テーマデザイン プロジェクトの概要
自社で開発しているプロダクト a‑blog cmsの公式テーマ 新テーマではなくリニューアル :インストールした時に入る :blog2018→blog2019
blog2018 Before
blog2019 after
1 2 3 4 制作フロー
1 2 3 4 制作フロー
1.昨年テーマの見直し 使っていて不便に感じた点 トレンドとのギャップ 初期搭載で望む機能
1.昨年テーマの見直し 著者紹介 欲しい SPの 最適化 ヘッダー 古い? 全体幅 微妙 関連記事
欲しい 記事一覧 古い? ⋯
1 2 3 4 制作フロー
1 2 3 4 制作フロー
2.方向性の確立 受注サイトの場合 受注側 発注側 ヒアリング
2.方向性の確立 テーマ作成の場合 制作側 ユーザー 見えない
2.方向性の確立 配布テーマなら 制作側 ユーザー
2.方向性の確立 でも公式テーマは⋯ メディアサイト 日常ブログ 技術ブログ アフィリエイト
みんなblog2019をカスタマイズする
そこで
ターゲットを絞り混まずに 強・用・美 テーマ デザイン 落とし込んでみる
公式テーマの特徴 メディアサイト 日常ブログ 技術ブログ アフィリエイト みんなblog2019をカスタマイズする
美 用 強 それぞれの性質は?
美 用 強 高 低 それぞれの性質は? 専門性
美 用 強 高 低 カスタマイズ性 易 難 それぞれの性質は? 専門性
となると
は作り込み 強 用 美 は柔軟に扱いやすく は誰にでも受け入れられる
そう、まるで
無印良品の収納ケース そう、まるで のような
方向性 無印良品で 売ってそうなテーマ 組み合わせ 自由自在! クセのない シンプルな形!
続きは後編へ