かんたんデザイン編集やってみた~「完全に理解した」までの道のり~

by morit4ryo

Slide 1

Slide 1 text

「完全に理解した」までの道のり @morit4ryo かんたんデザイン編集やってみた

Slide 2

Slide 2 text

自己紹介森田了　@morit4ryo デザイナー・フロントエンドエンジニア東京音大（作曲）→IAMAS（メディア芸術）→シグナル・コンポーズ（株） Zenn 記事色々書いてます SpeakerDeck スライド上げます

Slide 3

Slide 3 text

構成 1 実践結果調査公式Docs・テーマのソースコード解読 → 理解したことまとめテーマを作ってみよう → 何を意識したか開発中のテーマチラ見せ → こだわりポイント紹介

Slide 4

Slide 4 text

構成 2 実践結果調査公式Docs・テーマのソースコード解読 → 理解したことまとめテーマを作ってみよう → 何を意識したか開発中のテーマチラ見せ → こだわりポイント紹介

Slide 5

Slide 5 text

2024年6月… 3 「かんたんデザイン編集」がリリースされたらしい!? とりあえず仕様詳細を読んでみるなんかいっぱい書いてある… editor:type？属性値多すぎ

Slide 6

Slide 6 text

（勝手な代弁） 4 わかります

Slide 7

Slide 7 text

調査でやったこと 5 公式ドキュメントを読んでみた（当たり前）・網羅的・実例も色々面白そうなのが載っているかんたんデザイン編集仕様詳細コンポーネント利用例 FusionCorp まずはだけど

Slide 8

Slide 8 text

調査でやったこと 6 公式ドキュメントを読んでみた（当たり前）かんたんデザイン編集仕様詳細コンポーネント利用例 FusionCorp まずはやっぱり読みにくい

Slide 9

Slide 9 text

なんで読みにくい？ 7

Slide 10

Slide 10 text

なんで読みにくい？ 8 こういうのを目指して理解したことを整理してみよう…！

Slide 11

Slide 11 text

整理してみた 9 思ってたより多くなった

Slide 12

Slide 12 text

ざっと紹介 10 の書き方をひたすらまとめた editor:type テキスト画像記事色ドロップ全部の使用例を考えてみた

Slide 13

Slide 13 text

① 属性早見表 11 属性名値必須初期値補足に分けてリスト化！

Slide 14

Slide 14 text

① 属性早見表 12 editor:typeの種類もパッと見ただけで分かる！

Slide 15

Slide 15 text

②③④ editor:typeごとの使用例 13 公式の『コンポーネント利用例』かんデザ編集でできることをざっくり理解できる editor:typeごとの使用例作りたいものが決まっている時に書き方を確認できる

Slide 16

Slide 16 text

整理してみた 14 分かってきた…かも？プレゼンシートの折り返し地点です

Slide 17

Slide 17 text

構成 15 実践結果調査公式Docs・テーマのソースコード解読 → 理解したことまとめテーマを作ってみよう → 何を意識したか開発中のテーマチラ見せ → こだわりポイント紹介

Slide 18

Slide 18 text

こんなテーマが作りたい！ 16 ① サイトが作りやすいちょうどいい自由度何を変更できるか分かりやすい ② 色が自由に変えられる色を選択肢から選べるし、カラーコードでも指定できる ④ モバイルファースト PCとモバイルで見た目が変わらないから、配置に悩まない ③ フォントが変えられるゴシック体・明朝体だけでも雰囲気が変えられるのでは

Slide 19

Slide 19 text

（個人的な好み） 17 ⑤ モジュールで効率よくコンポーネント化してコードの重複は減らしたい ⑥ GitHub連携コードエディタ上で書いてなるべくラクしたい ⑧ なるべくJS書きたくない可能な限りCSSで書いていい感じにしたい ⑦ TailwindCSSで書きたい MTタグで細かく変更したいデザインと同時に進めたい

Slide 20

Slide 20 text

好みが合う人は… 18 『エンジニアが解説！新テーマ「Fusion Corporate」制作のポイント（テーマ作成者向け）』 ① CSS編　② かんたんデザイン編集編おすすめです

Slide 21

Slide 21 text

こんなテーマが作りたい！ 19 ① サイトが作りやすいちょうどいい自由度何を変更できるか分かりやすい ② 色が自由に変えられる色を選択肢から選べるし、カラーコードでも指定できる ④ モバイルファースト PCとモバイルで見た目が変わらないから、配置に悩まない ③ フォントが変えられるゴシック体・明朝体だけでも雰囲気が変えられるのではかんデザ編集の出番です

Slide 22

Slide 22 text

① サイトが作りやすい 20 < > mt:Var editor:type="list" 記事やニュースなど見せたいものだけをピックアップして表示できる

Slide 23

Slide 23 text

① サイトが作りやすい 21 読みにくい箇所をいい感じに整える設定画面用のスタイリングモジュールを作成

Slide 24

Slide 24 text

② 色が自由に変えられる 22 text-red-500になる

Slide 25

Slide 25 text

③ フォントが変えられる(WIP) 23 とりあえずNoto Sans/Serif JP

Slide 26

Slide 26 text

構成 24 実践結果調査公式Docs・テーマのソースコード解読 → 理解したことまとめテーマを作ってみよう → どんなところを意識したか開発中のテーマチラ見せ → こだわりポイント紹介

Slide 27

Slide 27 text

開発中のテーマチラ見せ 25

Slide 28

Slide 28 text

ついに 26 完全に理解した

Slide 29

Slide 29 text

けど 27 まだわからない「チョットデキル」への旅は続く ️ DOM更新周り editor:update:ほにゃらら

Slide 30

Slide 30 text

最後に改めて 28 実践結果調査公式Docs・テーマのソースコード解読 → 理解したことまとめテーマを作ってみよう → どんなところを意識したか開発中のテーマチラ見せ → こだわりポイント紹介

Slide 31

Slide 31 text

ありがとうございました!! Zenn SpeakerDeck ぜひ話しかけてください！初MTDDC参加です…