これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～

2018年の独立以降、WordPressのクラシックテーマでオリジナルデザインのWebサイトを作ってきました。FSEなどWordPressの進化に伴い、今年に入ってからはブロックテーマやハイブリッドテーマでの制作を積極的に取り入れ始めています。

そうした制作手法の変化を実際の事例を交えながら感じていることをお話しさせていただきたいと思っています。

Transcript

2. 自己紹介
3. 三宅 敦 営業/ディレクション/取材/撮影/ライティング/ デザイン/コーディング/WordPress 構築/ 保守メンテ/運用コンサル…全部やるマン Webデザイナーとして福岡で活動 制作会社で5年間実務経験を積み、2018年 独立。 7年ほど個人で活動してきました。 現在はつぶさん（@tbshiki） と 「株式会社hogehoge」を設立 Miyake Atsushi
4. 目次 これまでの作り方 　クラシックエディタでの構築、運用方法 これからの作り方 　ブロックテーマでの構築、運用方法 クラシック→ブロックで変わること 　デザインは「表現」から 「体験」へ
5. これまでの作り方 クラシックエディタでの構築と運用方法
6. この章で話すこと ・クラシックエディタでの作り方 ・WordPress 化のメリット、 デメリット ・WordPress ってなんだっけ？
7. クラシックエディタで作ったサイトを解説！ サイトマップ作成 ワイヤーフレーム作成 デザインカンプ作成 コーディング （html/css/js） WordPress（※WordPress 化） 制作フロー 個人のポートフォリオ
8. common header.php footer.php index.php page.php sidebar.php single.php archive.php 404.php functions.php style.css screenshot.png front-page.php css js images
11. いわゆる WordPress 化
12. クラシックエディタでオリジナル デザインをするメリット
13. 1.圧倒的な自由度とカスタマイズ性の高さ 2.どんな風にでもデザイン出来る 3.それに伴う独自性とブランディング力 4.イケてるね！って言ってもらえるかも
14. 表現の自由
15. クラシックエディタでオリジナル デザインをするデメリット
19. 編集の不自由
20. 1.制作業者しか触れないページがいっぱい… 2.ユーザーはお知らせ投稿しかできない… 3.それに伴う更新頻度の低下… 4.業者がいないとテキスト修正さえ出来ない… 5.他の業者でも仕様が分からない魔改造…
21. それWordPress で 作る意味ある？？ WordPress ってそういうものだから??
22. WordPress（CMS） ってなんだっけ？ そうだ！生成AIに聞いてみよう！
23. 技術知識がなくても簡単に更新できる HTML やプログラミングがわからなくても、 ワードで文書を 作るような感覚でコンテンツを追加・編集できます。 ブログ記事の投稿や画像のアップロードも直感的です。 CMS やWordPress でサイトを 作るメリット
24. だよね。
25. この章のまとめ ・クラシックエディタでの作り方 ・WordPress 化のメリット、 デメリット ・WordPress ってなんだっけ？
26. これからの作り方 ブロックテーマでの構築と運用方法
27. この章で話すこと ・ブロックテーマって何？ ・FSE って何？ ・テーマの紹介 ・ブロックテーマでのデザイン ・表現の自由から編集の自由へ
28. ブロックテーマで作ったサイトを解説！ サイトマップ作成 ワイヤーフレーム作成 デザインカンプ作成 テーマの検討（unitone） WordPress（ブロックエディタでやる） 制作フロー 株式会社ホーホゥ様
29. ブロックテーマって なんですか？ 聞いたことはあるけどまだ使ったことない
30. 2022年1月25-26日にリリースされたWordPress 5.9 「Josephine」にFSE（フルサイト編集） という機能が 搭載されました。 このFSE に対応したテーマのことをブロックテーマと呼ぶ。 ブロックテーマとは
31. WordPress のフルサイト編集はサイト開発における最新技術 と言えます。 個々の投稿や固定ページだけでなく、 サイト全体を ブロックを使ってデザインすることができます。 統一された直感 的なインターフェースで、WordPress サイトのデザインのあら ゆる側面を管理可能です。 WordPressフルサイト編集の使用方法（徹底解説）|kinstaより引用 フルサイト編集とは
32. WordPress のフルサイト編集はサイト開発における最新技術 と言えます。 個々の投稿や固定ページだけでなく、 サイト全体を ブロックを使ってデザインすることができます。 統一された直感 的なインターフェースで、WordPress サイトのデザインのあら ゆる側面を管理可能です。 WordPressフルサイト編集の使用方法（徹底解説）|kinstaより引用 フルサイト編集とは
33. 技術知識がなくても簡単に更新できる HTML やプログラミングがわからなくても、 ワードで文書を 作るような感覚でコンテンツを追加・編集できます。 ブログ記事の投稿や画像のアップロードも直感的です。 CMS やWordPress でサイトを 作るメリット
34. これじゃん！
35. テーマどうする？ ※実際に使うテーマを決めたのは実装時だった。 言い換えるとテーマに合わせたデザインをしてない。
36. unitone公式サイトより引用
43. すごい！
44. ブロックテーマにおける デザインの考え方
45. デザインカンプは模型 デザインカンプはモック （実物そっくりの見た目を 持つ ）ブラウザ上で調整する前の静的 な見本だから、実装時にピクセルパーフェクト不要。 px単位で見本に合わるよりもブラウザ上で仕上げて いくようなイメージ。 試作品・模型
46. Why?
47. ウィンドウ縮小＋200%に拡大
49. 幅１９２０ｐｘや640pxで表示 されるとは限らないから。 Webはとってもフレキシブル！
50. ２００％に拡大する人 なんていない？
51. WCAG 2.2 解説書より引用
52. 総務省｜情報アクセシビリティポータルサイトより引用 総務省｜情報アクセシビリティポータルサイトより引用
53. 総務省｜情報アクセシビリティポータルサイトより引用 総務省｜情報アクセシビリティポータルサイトより引用
54. います。
55. 唯一無二の 凝った表現がしたい？
56. アニメーションで ｺﾞﾘｺﾞﾘ動かしたい？
57. 固定された縦横比でのピクセル パーフェクトにほとんど意味はない。 高度なアニメーションも 閲覧を妨げる(かも)しれない。
60. デザインって奇抜な見た目や装飾、 派手な動きだけではないですよね？？ 開発の軸はブロックテーマ （FSE)へ シフトしてってるんですよね？？
61. なら古い価値観を捨て これからのデザインを 考えませんか？(WordPress)
62. WordPress のフルサイト編集はサイト開発における最新技術 と言えます。 個々の投稿や固定ページだけでなく、 サイト全体を ブロックを使ってデザインすることができます。 統一された直感 的なインターフェースで、WordPress サイトのデザインのあら ゆる側面を管理可能です。 WordPressフルサイト編集の使用方法（徹底解説）|kinstaより引用 フルサイト編集とは
63. エンジニアが新しい技術 を取り入れてるのに、 デザイナーの価値観が
 古いままじゃないか？？
64. WordPress はブロックテーマを使うことで よりWordPress らしくなっていく。 表現の自由から 編集の自由へ。
65. デザイン作る！
67. お客さんと話し合いながら アイデアや役割を整理していく
69. 必要なページを洗い出す
71. ページに入る内容（原稿や写真や 動画…） や伝えること、 役割、 導線、 必要な機能、 などをお客さんや エンジニアと確認する
73. デザインできた！ デザインが作られるまでに けっこう色んな工程がある
74. 細部を見てみよう
76. 「表面的な見た目」 ではなく、 内部的に意味を持った部品を デザインしている。 これは「部品」
77. .sliderCard .sliderCard__thumb .sliderCard__client .sliderCard__ttl .sliderCard__cat
78. クエリーループブロックでカスタム投稿[事業紹介]表示 アイキャッチ表示 タグ表示 タイトル表示 タクソノミー表示
79. 考えたこと…（出力する場所によって押せる・押せない） カテゴリー押せるの？
80. グラフィックデザインと違い、 Webデザインではユーザーが操作 を行うため、 見た目だけではなく、 機能を持ち、 状態を持ち、 値を持ち、 それは常に変化する。
81. デザインされたものは なるべくブロックで実装される のが望ましい。
82. Why?
83. デザインデータ
84. ブロックエディタ
85. デザインデータ
86. ブロックエディタ
87. 編集の自由 用意されたブロックで作ればリリース後に ブロックエディタからユーザー自身で編集 出来るから。
88. 素人が触ったら デザインが崩れる？
89. ロックすることでブロックの削除や移動ができなくなる。 （テキスト編集は可）
90. 権限で編集できるページを制限する （投稿者は固定ページを触れないなど）
91. サイトはデザイナーの 作品ではないし、業者の ものでもない。 お客さんのものだよね？
92. なのに触れないってどうでしょう？ 触ることでしか当事者意識は 生まれないから、 自社のことを発信 してもらえるようにどんどん触って もらおう。 だから…
93. デザインは動的で、 編集者や投稿者が 触れることを前提に デザインする。
94. この章のまとめ ・ブロックテーマって何？ ・FSE って何？ ・テーマの紹介 ・ブロックテーマでのデザイン ・表現の自由から編集の自由へ
95. クラシック→ブロック で変わること デザインは「表現」から 「体験」へ
96. この章で話すこと ・配慮するデザイン ・使われるデザイン ・体験から生まれるデザイン ・関係性から生まれるデザイン ・変わりゆくデザイン
97. 唯一無二のデザインや凝った表現を 辞めたとして、 デザイナーには何が 求められるのか？
98. 【配慮するデザイン】 アクセシビリティを 考えよう。
99. 「状況に応じた見やすさ」をデザインする
101. whocanuse.comより引用
102. ウェブアクセシビリティ導入ガイドブック｜デジタル庁より引用
103. 【使われるデザイン】 サイト内で繰り返し 使われるデザイン パターンを考えよう。
108. 【体験するデザイン】 現場に居合わせ、 感じたことをデザイン に落とし込もう。
128. デザインする前、様々な現場 に同行して何をしてるのか？ 見て聞いて体験しました。
133. 対象のことをどれだけ 知っていますか？ 自分で見て直接聞いて 体験したかどうか？
136. 表現者であると共に 企業の理解者となろう
137. 【関係性から生まれるデザイン】 エンジニアや開発者、 様々な人と交流して ヒントを得よう。
138. 「unitone」開発者 キタジマさん（@inc2734）
139. UIデザイナー ファシリテーション がりゅーさん（@Garyuten）
142. わぷーの生みの母 WebUIデザイン カネウチカズコさん （@mutsuking）
143. 「デザインだけ」で 解決しようとしないで 様々な人と関係を築き 共に作っていこう。
144. この章で話すこと ・配慮するデザイン ・使われるデザイン ・体験から生まれるデザイン ・関係性から生まれるデザイン ・変わりゆくデザイン
145. AIの進化によってデザインの 領域は変わる （変わらざるを得ない） 今後はAIを活用しながらAIに 出来ないことをやる必要がある。
146. Because…
147. この世界同様に、価値感も 方法も流動的で過渡的であり 全ての物事はたえず変わり続 けているから。
148. 成果物だけではなく、 体験や変わりゆくその 過程にも価値がある。
150. WordPressの 未来、未開拓の フロンティアに 向けて舵を切ろう。
151. ご清聴ありがとう ございました