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

WordPress MeetUp Shimane #8 ブログのカスタマイズで大切にしたい精神

Avatar for Yoshi Yoshi
December 22, 2019
Design
0
550

WordPress MeetUp Shimane #8 ブログのカスタマイズで大切にしたい精神

Avatar for Yoshi

Yoshi

December 22, 2019
Tweet

Other Decks in Design

See All in Design
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
120
Character Experience AI 〜 AIキャラクターのつくりかた 〜
Avatar for 株式会社スマートバンク smartbank
1
400
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
3
1.7k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
PRO
0
250
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
280
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
2.9k
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
Avatar for 弁護士ドットコム bengo4com
1
1.3k
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
2
300
kintone Style Book
Avatar for kintone kintone
5
5k
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
2
270
プロダクトリニューアルと同時に進める初めてのデザインシステム
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
170
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
PRO
0
210

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.1k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
640

Transcript

  1. My points of customize - ３つの心得 -

  2. Y&K Studio 発表の流れ ◇自己紹介 ◇カスタマイズで意識しているPoint ◇実例紹介 －フロントページ ーショートコードによるFAQ ーBox ◇まとめ

    2

  3. Y&K Studio 自己紹介 Yoshitaka ◇島根大学 大学院 M1 研究：ニューラルネットワークを用いた嘘検出 ◇最近はまっている物：FGO ◇趣味：カメラ

    SONY α7iii ◇活動：松江水燈路 広報チーム ◇個人ブログ：Y&K Studio –二人三脚ブログ- 3

  4. Y&K Studio Y&K Studio -二人三脚ブログ- 4 Kana 東京なう 担当：デザイン、構成 Yoshitaka

    担当：運営、執筆 #yandkstudio #二人三脚ブログ

  5. Y&K Studio 皆さんはカスタマイズするとき 何を意識しますか？

  6. Y&K Studio カスタマイズで意識しているPOINT

  7. Y&K Studio カスタマイズで意識しているPOINT １．常に読者の目線を意識 ⇒ブログが読み辛くなってしまうことを防ぐ ２．自分が書きやすい環境を整える ⇒「書きやすさ」は更新頻度やブログの質に影響する ３．CSSはシンプルに ⇒CSSが多くなると、ページの読み込み速度が遅くなる

  8. Y&K Studio 実例1 – フロントページ -

  9. Y&K Studio フロントページ 読んで欲しい記事を最初に 持ってくる カードをホバーした時に 浮き上がるモーション ⇒クリック率を上げる

  10. Y&K Studio 実例2 – ショートコード -

  11. Y&K Studio ショートコード [faq] [faq_item question="質問です" answer="回答です"][/faq_item] [faq_item question="質問です" answer="回答です"][/faq_item]

    [faq_item question="質問です" answer="回答です"][/faq_item] [/faq] 11 ショートコードとは…WordPressで使えるコードの呼び出し機能 ショートコードを書くことで 右（⇒）のようなデザインを呼び出せる

  12. Y&K Studio 実例3 – Box -

  13. Y&K Studio CSSをシンプルに書くコツ 13 全Box共通のCSS 各BoxのCSS 各BoxのCSS 各BoxのCSS 各BoxのCSS 各BoxのCSS

    各BoxのCSS

  14. Y&K Studio Page Speed Insights 14

  15. Y&K Studio まとめ 15

  16. Y&K Studio カスタマイズで意識しているPOINT １．常に読者の目線を意識 ⇒ブログが読み辛くなってしまうことを防ぐ ２．自分が書きやすい環境を整える ⇒「書きやすさ」は更新頻度やブログの質に影響する ３．CSSはシンプルに ⇒CSSが多くなると、ページの読み込み速度が遅くなる

  17. Y&K Studio Thank you for your attention!! 17