それでは、お時間になりましたので次のセッションを始めます。この時間は、ハセガワ・ヒロムさんにブロックエディタでウェブサイトの制作がどう変わったのか、実装事例から見る現在のワードプレスの設計と構築というタイトルでお話いただきます。ハセガワさんは、ハムさんのお名前の方がご存知の方が多いかもしれませんが、ウェブ制作をしながらクラシックエディタの時代からブロックエディタの時代へと流れ込んでいく中で、どのように制作の仕事が変わっていったのかを伺うセッションです。それではハムさん、よろしくお願いします。よろしくお願いします。長いタイトルつけたんですが、実はちょっと変えまして、ワードプレスのブロックエディタ登場で制作がどう変わったか、実例を元にワードプレスの設計と構築をお話ししたいと思います。なお、本日の内容はスライド共有しますので、メモは不要なんですが、割と画像がたっぷりなところに補足を入れるので、もしかしたらメモは必要かもしれないというスライドを後から変えられなかったので、お伝えいたします。はい、まずちょっと皆さんにご質問です。ワードプレス案件、やられてる方、ありがとうございます。これをもうブロックエディタとサイトエディタの利用で構築をしていますかと聞くと、多分手ががない気がするんですが、どうでしょうか。もうエディタ、最低エディタも使ってるよって方、ありがとうございます。少なかった。はい、なので皆さんの設計とか構築も変わったかどうかというところをちょっと思いながらこの話を聞いていただければなと思います。ちなみにこの話ですね、実は2019年、この前の大阪の内容でもブロックエディタ、サイトエディタじゃなくてブロックエディタが登場していたので、その内容を同様の質問を実話してました。その時は当たり前にほとんどの方が手を挙げなかったんですけど、ちょっとチラホラいたので今日はちょっと嬉しいなと思っております。ちなみにそれはですね、2018年の12月6日、これ何かっていうと、ワードプレスの5.0が出た時です。この時にブロックエディタ登場しております。なのでもう5年経ってるんですね。なのでワードプレスの政策フロー、本当は変わってるだろうと思って話をし始めようと思っているんですが、意外とまだ5年だと変わらないもんだなというようなのを、実は昨日のイベントだったりも、コントリビューターですね、とかいろんな話を聞きながら思ったりしております。そんな中でちょっと最初に自己紹介を、今からよって思うんですが、発生側を広むと言いますが、先ほど紹介したようにハムと思ってください。同じ発生側さんが今日最初に登壇してたんで、負けらしいと言われるますが、ハムと申します。で、こんなアイコンだったり、こんなアイコンだったり、そんなロボットだったりが登場しておりますが、この辺も私のアイコンなのでぜひ見かけたら、ハムさんだなと思ってください。私ですね、普段北海道札幌の方におりまして、そこでサックスという勉強会をだいたい、今ほぼ毎月じゃなくてだいたい毎月やっております。ここ数ヶ月で済みしていたんですが、2月から、違うですね、3月から復活してやろうと思っております。こんな感じで、今の同じような感じのですね、セミナーの形式の方をやっていたりします。ぜひ皆さんね、北海道のイベントにも参加していただければと思います。問題です。先ほども話したんですが、ブロックエディターやサイトエディターが登場しました。その登場によって、もちろんながら、ワードプレスの設計とかっていうのは変化して生きているはずだろうと思っております。が、まだまだちょっとカトキなのかなと思いますね。ちなみに、誤解を恐れずに言うならば、今のワードプレスっていうのは、クライアントワーク、ついですね、ワードプレスのクライアントワークは、クライアント専用のノーコードツールを構築することだと、私は思っております。なので、お客さんがいかにそのHTMLとか、気にせずにかけるか、そのままブロックで作れるかっていうのがポイントになります。今の管理画面、このような画面になっていますね。左側にブロック選択ができるようになったり、見出しだったり、っていうのをどんどんブロック選択しながら、そのベージを構築していくっていうような流れになっています。なので、今どういうことをやっていると、サイト全体は管理画面から変更可能になりましたし、コンテンツはブロックで、一個一個のブロックで構築可能です。てかつ、HTMLがわからないっていう人でも投稿できるというのが大きなポイントになっています。そのための設計っていうのが今は重要だなと。なんなら、クラシックエディターでも、HTMLには気にしてないじゃんって思う方もいらっしゃるかと思うんですけど、いやいや、そんなことなくて、やっぱりクラシックエディターの時は難しいことやろうとすると、HTML編集してたんじゃないかなと思います。ちなみに、このような話のきっかけになったら、2023年の昨年の11月に、トロさんが僕が考えるHTMLサイトをワードフェイスにする話というのを、関西の方で行っております。この話をインスパイしているような話なんですが、ちなみに、これとは真逆の話を、実は過去のワードキャンプ東京で私話してしまってまして、2016年の内容ではデザイナーが効率よくテーマ制作性を進めるためのような話をしております。この時は、クラシックエディターの時に多くあった政策フローの話をしてしまってまして、どんな話かざっくり言うと、HTMLを作ってから、人のHTMLの音に制作しましょうという話をしてました。多分ですね、おそらくこの会場の半分以上の方は今でもこの政策フローなんじゃないかなと思います。入力の多くは、HTML作ったとか、スタンフィールドに置き換えればいいよねとか、あとその中身はほとんどテーマに入れたり、テーマじゃなかったとしても、HTMLを編集画面で、エディターのモードじゃなく、HTMLが入力できるモードに変えて入力しているんじゃないかなと思います。この方法ですと、変化とか、変更とか追加が管理画面からできないというのがなかなかのポイントですね。特にテーマ側に全部書いてしまった場合は、変更するためにはテーマを変更しなきゃいけないんですね。そういったデメルトだったり、管理画面と管理画面の見た目はあまり気にせずにとりあえずプレビュー見てくださいみたいな方法を、多分おそらく皆さんとっているんじゃないかなと思います。かつ、特にカスタムフィールドとかをガリガリ使ってしまうと、リニューアルの時にも同じ構成が大体必要になってしまうというケースがほとんどだと思います。入力したフィールドの値を取り出すためのコンテンツを、HTMLとかフィールドを書かなきゃいけないと。すごいシンプルな例ですが、どういう構築グレーだというかというと、HTMLをこういうふうに書きますよね。その後に皆さん多分こういうふうな置き換をしているんじゃないかなと思います。うんが大きいな。多分皆さんこうやってるわという話ですよね。なんですけど、コンテンツ部分はカスタムフィールドの場合というのもこういうのもあると思います。だからさっきの置き換えプラス、あとカスタムフィールドの部分ゴリゴリ書いてると思うんですね。テーマの部分に。入力箇所を限定することで、HTMLを先に制作しても手戻りをなくすという点には確かにありだと思うんですね。で、先ほども言ったようにテーマに直接買ったり、HTMLを管理画面で投稿したりというのがほとんどだと思うんですが、これってカスタムフィールドのすごい良し足があると思ってまして、いい点では確かに入力の制限。お客さんにこれを入力すればページができますよっていう制限ができることができるというのがポイントだと思います。決まった入力で制限をすることで、4期戦で使われ方、もう崩れたりするのが嫌だよっていうお客さんも多いと思いますね。それを入力をこれとこれとこれ、再入力しておけばページができますってしてれば、もう崩れることがないですよね。なのでどこに何入力するかの明確ができてるっていうのは確かにポイントだったんじゃないかなと今では思います。しかし結果、どういうことが多かったかというと、作り切りが大前提になってしまいますね。フィールドがそのまま、同じままリニューアルされればそのまま使えますけど、だいたいフィールドが変わりますよね。なので、リニューアルするとかいうタイミングの時には、だいたいフィールドをもう一回作り直して、なんならそのフィールドに当たり入力し直してみたいなことをやってるんじゃないかと思います。また、リニューアルではなくても、例えば政策とか運用の過程で入力の内容に追加とかこういうふうにしたいよってときまっても、フィールドを追加してテーマを変えてっていう2つのことをやってると思うんですよね。それによってテンプレートの規制作構成というのが増えてるかと思います。HTML直したいんだけど、HTML直すだけじゃ終わらないしっていうようなことがいっぱい起きてると思うんですよね。本当にワードプレスでそれいいの?っていうのをもう一度考えるべきだなと思っています。これについては、先ほどのスライド11月でトロさんが話したという中に入っている一文なんですが、HTMLを先に作ってからそれをワードプレスに合わせて直していくという方法については、とりあえず素敵な服を自由に作ってから、それを着る人に合わせて直すというような工程を皆さんもやっているんじゃないかなと思います。要は作ってしまったら、それ前提で他の工程もやらなきゃいけないので大変ですよねっていうような医薬ですね。それからは、ここからがどっちかというと今日一番伝えたいところなんですけど、今はそういう作り方よりもグーテンメルク、ブロックエディターが出たのから政策を見直そうというのが本題になります。ブロックエディターが登場したことによってその構成が変わります。まず一番目は先ほどからHTML作ってたよっていう人は、まずはHTMLを作らない。HTMLを作り始めるのはもうちょっと後の工程だよ。どういうようなのか、まず前提になります。一番始めにあるのは2番目に書いている、どの構成を使ってそのページを実現するかというのを検討を始めるのが最初です。その構成単位を今度は政策をし始めて、人取り必要なブロックが出来上がったら、あとはそれを使って入力し始めるという段階になります。これを一番に伝えたいのは1番目と2番目ですね。今までやってた構成とは違うんだよというポイントです。かつこれらの政策過程じゃなくて政策の達成条件。これを目標にやろうというのがこの3つに書いたところなんですが、まずは今だったらサイト全体やサイトエディターも使って、サイト全体を管理画面から変更可能にしようというのがポイントになると思っています。そのため、全ページ、全コンテンツがブロックになるのが理想です。ちなみに理想というのはサイトエディターでどうしても対応できないポイントも、やっぱり今でもまだあるので、そういうところはちょっと工夫する必要があるとは思うんですが、それさえなければ大前提は全ページ、全コンテンツをHTMLではなく、サイトの管理画面から変更できるようになっているところのポイントだと思います。かつ1番最後。さっきほどもお伝えしたようにHTMLが分からなくても、とりあえずブロックさえ追加、削除していれば投稿、かつ順番並び替えれば並び替えるもできるよというようなことをすればお客さん、例えば農品した先のお客さんがHTMLをかけない。HTML書いてはもう分からないよというところが入ってこない。分からなくても大丈夫だよというところができます。この後の流れもブロックでできるだけで作りましょうという話を続けていきますが、それらをポイント、この3つを押さえながら聞いていただければなと思います。まず考えなきゃいけないのは、そのページ、デザインをどう構成しながらやればいいのかというのをまず分解していくというのが作業必要になります。主に5個、この5個の要素で分割すればある程度は実現できると思っています。まずはブロックのスタイル、そしてパターン。あとはその2つで実現できないところはもう開発しましょう。もしくは開発しなくてもプラグインで実現するのだったらプラグインを入れましょう。それでもできないところはテンプレート、テンプレートじゃないとできないところもあるのでテンプレート後は見直しましょうというところですね。この5つをポイントしながら今日は見ていきたいと思います。ちなみにちょっと今日ご紹介するレジはこのサイトをちょっと例にご紹介しようと思ってます。ご自身の方もいるかもしれませんが、マーケティングオートメーションで日本国内で出しているツールのSatoriさん程サイトの弊社の方で行っていましたのでそれを例に今日ご紹介しようと思っています。ちなみにこれをデザインのちょっと例ですね。例ではなくてデザインで出てきたものを弊社の方ではこういうふうにコメントを入れているよっていうようなポイントになるんですがちなみにデザインは弊社が作ったのではなくちょっと別な会社さんがまた入っているっていう前提条件になります。なので工程としてはちょっと難しいというか、ウォードペーストを知っているっていう人がデザインしたじゃないっていうのがポイントになります。特にこういうどうやって実現するんだろうっていうのをポイントポイントで見直しとか考えながら政策は進めていました。ここであればここの例をちょっとさっと言うとサンカラムのカード型のところで前の予白はどうしようかギャップという設定できるよね。そしてアイコンの下のところはアイコンを入れたりするかしてやりましょうと。そんなのは最初のデザインをもらった時点で考えて結果実現したのが管理画面からこういうふうに入れられるようにするっていうところです。左側にちょっと文字めっちゃ言っちゃって見づらいかもしれないんですけど画像とちょっと重なってずらしてる部分があるのでマイナスマージコンテナって書いちゃったんですけどネガティブマージンが使えるようなコンテナをまず1個作りそこをちょっとカスタムで作ったんですね。中身の方に関してはできるだけデフォルトのブロックを使ってカラムで分割してリンク自体をリンクにしたいというので当時は最初にボックス自体リンクする機能がないのでボックスリンクというブロックを作りあとはテキストでそれぞれの中身を増加したというような構成にしています。これだけ見れば、ここで作ったってなるとマイナスマージンコンテナとリンクのブロックだけです。あとは標準のところ、正確に言うとテキストの部分にちょっと大きな文字が入ったり、色が変わっているところがありますよね。そこのカスタマイズもちょっと入っています。これはちょっと後ほどまたご説明しますが大体このような構成で作れるよというところです。紹介はしてないんですが、下も同じようなことでできるだけデフォルトのブロックを使うでデフォルトでできない部分だけを抜き出してカスタムして作っています。あと、ちなみに先ほどのデザイン出てきた段階でまずは5個の要素のうち、どれに該当するのかを場所のバックログを使っているので、バックログにまず登録し始めます。考えたうちに、ご飯作りましょうというのをどんどんカテゴリーもつけながら入れていってそれをすることによって、大体ページはじゃあどのくらいの構成が構築の時間がかかるんだろうというのをこの段階で一応把握するようにしています。そのためデザインもらった段階では実はそれをパッと分かないのでコースの差について結構難しいなと思っています。前提があって、パッと見たときにいろんなパーツがあるなってなったらやっぱりコースがかかるなと思うということですね。逆にパーツが少なくて、あんな仕様などで全部できるってなったらこれ楽だみたいな感じにもしかしたらなるかもしれません。なのでここに分解して登録した数が少なければ少ないほどコースは少かかんないなという判断ができると思います。さっきテキストの装飾って書いたところ、お伝えしたところですねはどうしてるかというと、リッジテキストとかのスタイルの追加機能というのをカスタマイズして追加しています。これまた後ほどちょっと紹介するんですが大体あるようにテキストの下に微妙にマーカーラインがついているようなデザインのときですね。あの、ま、いや、ここであのちょうど。はい、というのでまずは5つの分類にしたいと思いますがその1個1個見ていきたいと思います。ブロックスタイルですね。これはもうデフォルトで入っているブロックなので1個1個入っているブロックがどんなのか出しながら見てもしいんですが一番シンプルなところで言うと見出しと段落、そしてあとリストだったりボタンですね。ここでは見出しのちょっと例を出しただけなんですがカスタマイズするときどういうことかというと多くの人はクラスをつければ行けるようという感覚があると思います。けど、それだけだとお客さんやっぱりクラスかかなきゃいけないじゃないですか。それは大変なので、一応ブロックのスタイルの部分をこの右側、スタイルズのところで設定できるようにできるだけよく使う部分はそこに抜き出します。パターンがある場合はこれですね。パターンがなくてそれを選択さればそのスタイル当たるよというだけであればここは別に不要だと思います。ピックアップすると大体こんなですね。ここを活用されている方は多分いろんなパターンを登録されているんじゃないかなと思いますが特に何もないシンプルなデザインであればデフォルトだけでいいと思います。デフォルトじゃなければここにどんどんあとはスタイルのパターンというか種類を追加していくというようなことが必要になります。それの上でスタイル、ここに先ほど登録するといったもののどうしたらクラスじゃないと実現できないんだよねみたいなところがあったりします。というときはどうしているかというとブロックのパターンを用意するようにしています。いろんな組み合わせで先ほどの例もマーニャスマージンブロックなんとかブロックなど入れたと思うんですけどあれをお客さんにいざ実装してくださいというと難しいですよね。なのでそういったところに関してはブロックの組み合わせで何とも利用するようなところはパターン登録してお客さんに渡すということをしています。ここは入力のフォーマットの代わりとしてなのでカスタンフィールドでもこういう提携の場所を作れるよねというところに関してはもうパターンを作るというのが逆に大体のポイントになるかなと思います。あとは複数のページで共通で利用しているようなところとかはパターンだけじゃなくてシンクパターン、動機ブロックみたいなところで動機しながら使うというと登録すればいかしょ変えれば同じようなブロックが全部変えられるというところもなるのでそれらも選択するかどうかを選ぶことができます。ちょっと見たいんですがパターンもブロックの隣にパターンズというのが登録された一覧が出るようになっています。ここに登録されすればここに一覧として出てくるですね。ここです。オールパターンズから選択すればいろんなとりあえず出てくるものは一覧を見れますし一覧から見つけづらいとってもいっぱいパターンがあるよというときはやっぱりカテゴリーを設定しておくことによってカテゴリーから自分の好きなパターンをつけるというのは使いたいパターンを選択できるということにもできます。ここのパターンですね。たぶん結構皆さんブロック、さっきのHTMLは登録しているHTMLで作っているという方じゃないブロックを作っているんだよって方もパターン登録されているかと思うんですけどパターンは結構活用ポイントだなと思っております。ちなみにパターンですね。昔はブロックで当時はパターンを作るのもちょっと手間だったんですよね。パターンを作ってから一番シンプルな像だったかな。コピーペーしてテーマの方に書いておくとか。こういったことが必要だったと思うんですけど今ちょっとシンプルになり自分のパターン作りたいときには作りたい範囲のブロックを選択してパターン登録と言われば作成ができます。そして共通のすべてのところを同期したいというときは同期のところをチェック入れればそれに変わるようになっています。前だったら再利用ブロックって言ったところが今は同期のブロックになっております。ちなみにパターンですけど自分が作ったパターンじゃなくてどんなパターンがあるんだというのはパターンズっていう最初のページがあります。オルグのページのところにパターンズっていうのがあるのでひこちゃんの方も今見てもらえればいろんなパターンがあるなという逆に言うとこれをパターンをカスタマイズすることによって自分でもパターンをさないつくない言ってもいいかというのもできるかと思います。続いてスタイルとパターンでどうしてもできないようなものが出てきた場合ですね。そのときはどうしてもブロックの開発が必要になるので開発をします。が開発のポイントとしてはデザインでやっぱり見たときにこれ無理だなというところです。一応あげるとこれも見たときにこれ横線どうすんだろうとか逆に言うと見づらいんですが一番左上に防線の上に導入直後とか運用フェーズって書いてあると思いますね。このブロックをつけるときに上をどう入力するんだろうとかいうのを考えると結構複雑になるなというのがわかります。こういう複雑すぎるのは逆に言うとお客さんと話し合ってワードプレスで実現できる範囲はこれですというのを提示しながら始めるようにしています。そもそもこれシンプルで作ろうとシンプルじゃないですね。ワードプレスが実現できるかというと結構難しいポイントがいっぱいあります。今言った文字のところもそうだし微妙にグラデーションがかかっているのがわかると思いますね。しかもですね、これPC版のデザインだからなんですよね。SP版イメージできますか?みなさんこれ。こういう風に出てくるんですよ。もう無理だと。気づきますよね。ACML作ってる人も多分ブロックじゃなくてもACMLだったらこれもう2つ登録するかね、みたいなことを思い浮かぶ人が多いんじゃないかなと思います。し、いやいや画像で作ればいっぱいでしょうと思う方もいると思います。まあですね、確かに画像作れば1発というかまあ2つ登録は必要ですけど実現できるですよね。最終的にはどうしたかというとお客さんと相談してもうちょっとシンプルにしましょう。ということで文字は最低限上の方に小さく入ってないとは入れない。それは適当の方に入れる。これがこれに変わります。矢印も一番左についてたのが1個目と2個目の間だけにしているようにしていますしグラデーションもまとめたポイントとしては全体で1個だけ。要はステップ1とかステップ2それぞれで同じようなパッドに色のカラーパターンだけを登録できるようにしたとですね。なにかカラーパターンも登録したんじゃなくてカラーパターンが選択できるようにしてあります。別にだから色、これ緑からグラデーションじゃなくても単色で設定したかったら同じように作れるようにできますしなんならテキストも全部色変えられるように作っています。というのがここで作った最高のネットポイントになります。SPにするのとこれがですね、最終的にこれ今、管理画面でも見た目がほぼ一緒だのですね。全てが一緒ではないんですけど大体一緒に作って見えるんだね、プレビューしたらほぼ一緒ですね。で、ちゃんとSPも縦に入れるように気立ちています。実装者は相当悩んだなと思っておりますがやっぱこういうところは悩むポイントだし時間がかかるポイントにはなります。なのでまずデザイン出てきた段階でそれが本当にデザイン再現可能なのか調整、じゃあどうするの?どういうプロパティを持たせてどういうカスタマイするの?というのを必要になりますので考えた上で難しいポイントはお客さんにもこれ難しいんです。ブロックで作るためにはこうしたいんですっていうのをちゃんとお客さんとコミュニケーションと取りながらやります。ちなみに、録画されているけどあるなんですけどお客さんとのコミュニケーションです。デザイナーとのコミュニケーションを諦めました。デザイナーから出てくるんですけど一定期間ちゃんとやり取りしていたんですけどそのHTMで言いますよねって言われた瞬間にちょっと諦めました。そうなんですけどお客さんはHTMに入力するの?というね、そんなポイントです。なので再現できるかどうかというよりも俳用的にできるかどうかですね。そのパターンが他でも使われているかどうかも含めてなんですが俳用的にデザインがされているかどうかを見ながらブロックに再現するというのがポイントになります。ブロック内の一部だけそのパターンで作るんだけどイレギュラーでここのパターンだけ違うみたいなやつがどうしても出てくるときがデザイナーさんによってはそういったところも全部諦めてくれって切り捨てます。できる範囲のデザインの提案にしてくれっていうのをやっぱりやり取りするのがポイント出すと思います。もちろんできないわけじゃないんですよ。お金かけますかってところですね。一番下もそうですね。カスタムHTML CSSならできるんですよ。わかるんですよ。けどそれ運用で本当に変えるんですか?それ誰が講習するの?メディアンスするの?テキスト会のお客さんですよね。テキスト会のだけだったらいいですけど色変えたいと言われるとき、その色変え誰やるんですか?っていうどこまでを考えながらブロックが作るっていう人が必要あるのでカスタムブロック作るときもこのポイントは抑えたほうがいいと思います。続いてプラグインです。プラグインで話をするといろんなことをプラグインならできますっていう話ができるんですがちょっと今日は1例だけ紹介しようと思います。先ほどお伝えしたこのマーカータイプのところですね。どっちかというとこれお客さん専用のプラグインを弊社の開発としてプラグインとして提供した。のでプラグインって言いつつもそういう機能を作れるんだっていうところです。通常であればこのハイライトの機能を使えば選択したところの色を変えるってこともできますしテキストの色を変えるってこともできます。このように今赤に変えるっていうですね。でこれだとでもマーカーついたところがまんま上から下まで同じ色になっちゃうのでちょっとした線をつけたいっていうような先ほどの見たデザインこれとはちょっと違うんですよね。なのでどうしたかっていうと色も違うパターンが出てくるんですよ。黄色だけじゃなくて青だと。そういったときにこのインラインのブロックというかインラインのスタイルを選択できるようにカスタマイズをしています。これを今プラグインで実現したんです。もうちょっとピックアップすると多分普段は見慣れないような選択者とこのサイズだけを変えるっていう機能を用意しています。ちなみに右側にもそのような機能あるじゃないか人がいるかもしれませんがあれやると全部変わっちゃうんですね。そのブロック全部が。なので選択したところだけを変えるっていう機能としてこれを用意しました。もうちょっと柔軟性を持たせようと思えばできたかもしれませんがそこまで柔軟ではなくもうマーカーも黄色と緑とダググリンというところですね。あとはカドマルグラデーションにするのかとか必要なとこだけを本当に入れたという。でこれはもう全部管理管理画面から追加したかったところですけどそうではなくここに関してはもうあらかじめ用意するというところでセッティングのJSONを用意してセッティングのところで入れたらクラスが当たるように作ったというクラスではないスタイルか。そのような構成であの部分を実現しています。プラグイントはいつもプラグイントオリジナルで作ったというところで言うともうちょっと構築に入るかなと思いますが文字を選択して変えるというところの機能も含めれば実現するブロックとかデザインは幅広くなるかなと思います。わざわざだからカスタムブロックを作らなくてもカスタムのインラインのブロックを作ればいいというところですね。最後にテンプレートです。今だったら先ほどのサイトだと紹介しているこのサトリーさんのサイトだと実はリリース当時はまだサイトエディターが出始めもしくは出る前だったかなぐらいの時期だったので全体はまだブロックにできていない状態ですが一部はテンプレートをちゃんと利用しています。今だったらテンプレート機能、サイトエディターの機能で全てのページがブロックで構成できるようになっていますね。その一連としてはこの最新の今ベータ版ですけど5.2の管理画面だとこうなっていますしその中でもヘッター・フッターを変えたい時はこのエリアを選択するというような機能も管理画面ができるようになっています。管理画面から選択してその場所のブロックをどのようにするかという選択ですね。そうするとサイト全体で使うものの共通的なところもブロックで変えられるという流れになります。でテンプレートパーツこれヘッター・フッターはエリアとかテンプレートパーツというところも活用がのでテンプレートパーツ登録しておくと先ほどのヘッター・フッターだけじゃなくてその他サイドバーとかこれはもう2024ですね。ところで入っている例ですがこういったテンプレートパーツというのも活用できる。これをですね説明細かくしようかと思ったんですがちょっと今日は活用させていただきますが一応テーマと部分はテーマのエイシェベルを書くだけじゃなくてテーマもブロックで構成できるんだよというところをちょっと今日は覚えてくれいただけたらなと思います。やみなの管理画面ここから先に入ると例えばフッターの例ですがフッターも全部ブロックで作られてですね。共通部分もさっきのページと同じようにブロックで構成できますよっていうような画面です。みさとりさんのフッターの部分はこのようにカラムで分割してカラムの中にはリスト入れてリストの中にリストってちょっと複雑な構成なんですがこのような構成でフッターは作られています。こうすることによってフッターのリンクの部分も前ページで共通するようなテンプレートパーツで構成できたっていうようなとこですね。最初これがちょっと出る直前まではテンプレートパーツではなくて何だっけ?ウィジェット機能を使っていたんですがウィジェットだと作られて表示できる部分が限られてたりするので最終的にはテンプレートパーツに置き換えたっていうエンジニアの選択でした。なのでここまでいろいろフッターを見てきましたが分解した要素を見てきましたが分かるかと思うんですけどまずは設計が大事なんですねこれらをどう実現するかがこの部分政策が今まで多分スタートとしてはとりあえずページ作りましょうみたいなのでそうじゃなくて、まずはどのブロックどのテンプレートどのスタイルを当てなきゃいけないかっていう設計の部分が今は重要になってると思いますそのページ、サイト全体でどういうパターンがあるのかどういうブロック作れば構成できるのかの設計ですそうするとですねやっぱり実装者のスキルにもよりますが運用する人のスキルも踏まえて検討する必要がありますだから運用も踏まえて使用を詰めましょう運用の時にどういう入力が想定されるのか色を変えるの?サイズ変えるの?とかも含めてですね運用に合わせてどのようなコンポーネントを用意しなきゃいけないのかっていうのがまずは考えるポイントですし何よりもブロックヘジターでどう作るの?っていう理解が必要になりますどんなブロックがあって何ができるのかそのブロックでどんなHTMLが出力されるの?スタイルがついてるの?多分今まではこのブロックでどんなHTMLが出力されるのかを考えつつHTML最初に作った人がいると思うんですけど結局それ難しいですよねだからHTMLが先じゃなくてブロックでちょっと大変かもしれませんがリアクトのところでどう実現するかとかにもなるかと思いますあとはそのサイト全体がコンポーネントで作られるよどういうコンポーネントとしてパーツを用意するのかっていう意識の設計とスタイル設計が必要になりますカスタンブロックは全部をカスタンブロックすれば確かにできるんですけど結局それって大変なのでカスタンブロックはできるだけ最小限に抑えて作る人がありますそれらを自分たちのスキルに合わせてどう作るのかって考えるのはだけどデザインにさえなんとかなれば実はブロックでどう作るかってもうちょっとシンプルにできるなと思いますここではこんな時この時のデザインはやっぱり時間かかるよっていうところをいくつかピックアップしてご紹介しますその前にデザイナーも実装条件の把握が必要になる特に難しい5個1つはレスポンシブの変化と最大と最小のサイズどこまで伸びるのどこまで縮むのあとは予泊の設定SPの時の予泊PCの予泊どうなってるのと同様にフォントファミリーとサイズ満たしのところは全部変えるとかだと分かるんですけどここだけ変えるとかになるとやっぱり難しいですよねその他にブロックどこに配置されてるのかとその装飾と配置レスポンシブも含めてどこに入るのとかそこ含めてこの辺の条件の把握が必要になります自由なデザインでもできるといえばできるんだけど難易度が上がる例を紹介しますシンプルなところで言うとPCとスマホの画像を変えるっていうのってデホルトではないんですよね左の画角の時とCSSでできるじゃんっていうこともあるのでCSSでできる範囲の画像だったらいいんですよそうじゃないときもありますよね完全に人を止まん中にここの人の顔だけは絶対切れないように作りたいみたいなパターンであると思うんですがそういった時はどうしてもCSSだけじゃ実現できないときがありますなので登録しなきゃいけないんですがこれを用意するのはさっきも言ったんですけど難易度が上がるんですよけどやっぱり難易度が上がるし火をかかるよねそういったのを他にもいくつか紹介しますが続いて紹介する例としては例えば入って画がこんな自由に配置されているような例ですねこんなにくにくしいわけじゃなくて右にもあるし左下にもあるしこれ伸びた時どうするのとかこのサイズ位置で右がついていくのそれとも拡大するのわかんないですよねわからないというかデザイナーさは多分いけるでしょうみたいな感じで入れている人もいるのでそうじゃない人もいるもちろんいるんですがどうなるかという意図を確認しながらやる必要があるんですがこれ実際どうするかというとスタイルにやっぱりクラスを設置して入れるかパターンを作るかのどっちかになるかと思いますが運用の時に上手く生きるのかなというような場合は悩みになると思いますあとは予白の設定とかですね下側スナホだとした場合にテキストのサイズも小さくなるし予白も小さくなるという統一のルールだったらある程度いけるかもしれないんですが基本的にはデフォルトはサイズ設定するとPCとSPは同じサイズなんですね特に予白も設定すると同じままいくんだけどこのデザインで来るとどうしようかなあですねかと言ってじゃあPCに合わせるそうするとデザイナーはじゃあどう判断するかこっちで合わせるのかそれともスマホで合わせるのかやっぱり考えてほしいなと思っていますなぜこれちょっと大変かというと基本的には設定管理画面で予白作れるんですよねこの右がちょっと小さいですけどマージンとかがつけられるんですけど基本的にここでつけるマージンというのはPC、SP、統一なんですよ同じものが使われます分けたい時はクラス設定とかしなきゃいけないですけどその設定してまでこれ無視してまで作るのっていうのがあるのでやはりシンプルにするためにはPCとSPは予白、コントサイズは統一して作った方がシンプルにできるよねっていうところになると思いますあと苦手な点はこういうところですねさっきマイナスマージンブロックっていうのを作った楽しみますが作んないとネガティブマージンというかマイナスのところで設定するのがかかるのでそもそも重なり必要なのっていうのが考えるポイントだと思います皆さんどう思いますかね毎回重なってるの見るたびこれいるのかなっていつも前にだから実装するんですがなんか必要なら実現するよ実装するよと思うんですけどはい皆さんならどう思いますかそれらでブロックエディターもう一度整理なんですが実装できないわけじゃないけど実装個数がかかるポイントを整理するとレスポンシブの配置レスポンシブのサイズとかですねそしてブロックの重なりがあるかどうかと余白やホントサイズの差があるかどうかPCとSPで画像が切り替えなきゃいけないのかあとは自由の背景とか自由の配置のものがないかどうかです結局のところブロック設計が重要だよっていうのが今日の一連の流れで分かったと思いますブロックだけでページが構成できるようにさえすればお客さんの方でいくらでも追加できるしページを追加しないっていう時にわざわざ連絡して構成加計してもないと経営者が開かするとあれにならないじゃんと思われるかもしれませんがお客さんのためにとってはそっちの方が絶対いいですよねやっぱりお客さんの方で自由に追加したり変更できたりする方がいいと思いますしなので制作のブロック数で最初の見たときに変わるのでデザイナーさんはどのくらいのGSOコースにかかるのだろうはページ数とかものじゃなくてどんだけのブロックのパターンとかスタイルのパターンがあるかですあとはカスタンフィールドどうしてもやっぱり詳細ページから一覧ページに出すときにここだけは出さなきゃいけないっていうフィールドがあると思うんでっていう時もあると思いますというのがポイントですね考えずにブロックでできるところもカスタンフィールドする必要は全くないと思うのでなのでそこは最小限に抑えましょうというのがポイントになりますだから設計時からの検討は重要だよ大事だよっていうのが今日のポイントになると思います最後にまとめです最初にお伝えしましたがブロックエディダーが登場して制作はだいぶ変化したぜひこの機会に変えてほしいなと思いますしHTMLを先に制作は始めちゃった人はまずは設計をするっていうのを考えてほしいんですそのHTML本当に必要お客さんがどう入力するかもさっき右側にいろんな設定があるんですねあの設定も活用できるようにちゃんと作るようにしましょうっていうのが基本になりますあとはさっきお伝えたようにカスタンフィールドは基本はなくていいと思いますなので最小限のところでそれを抑えるポイントですしあとはスタイルの設定やパターンはできるだけ活用しましょうっていうところそしてデザイナーはそのブロックの構成どんくらいかかるのっていうところも把握しながらできるだけデザインしましょうデザイナーさん多分ワードプレス案件かどうか気にせずにデザインされる人もいると思うんですよねなんですがワードプレスの案件であれば構成どんくらいいたの例えばそんなに難しいパターン大じゃなくてもその中でプロとしてできる範囲の最大限のデザインをできるんじゃないかなと思いますあとはさっき途中でお伝えした難しいポイントですねSPとPCのサイズの差はなくしましょうっていうところとあと今日の途中に戻りますがカスタムしてみるは使えば全部できるじゃんっていうデザイナーのコメントもあるかもしれませんがそれは最終集なんだよと思います今日の話は以上ですありがとうございましたハムさんありがとうございましたこの後少しお時間があるので質疑応答を取らせていただきたいと思いますがお聞きしたいことある方いらっしゃれば教宗をお願いしますでは前の方先にありがとうございましたデザインが来てからそれをブロックでどう実現するかっていう設計の部分が大事っていうのがすごく参考になりました質問なんですけど設計がすごい大事なんですけどHTMLとかPHPで私とか普通に実装してると後からなってここの部分デザイン変えたいみたいな感じでそういう場合はHTMLをちょっと修正して実現するってことがあるんですけどブロックの場合だとちょっと結構そこの設計の部分に関わってきちゃう場合とかまた追加でもらうのかそれかできませんってことがあるのかとかそういった時ってどうされてるのか知りたいですブロックエディーターにした時に後から追加の要望が出た時っていうことですねスタイルである程度パターンした中で選択できる範囲であれば変えればいいだけなのでそこは別に構成かかないと思いますところがやっぱり構成をどうしてもかけてまで実装しなきゃいけないってものに関しては予算の範囲であれば追加はするかもしれませんが予算とスケジュールどうしても間に合わないものは追加ですよねって話で進めますというのもデザイン出てきてからやっぱり構成は考えるはずなので後から追加のものは追加扱いでいいと思っていますはい回答でよろしいでしょうかねありがとうございます今日はありがとうございましたいくつか聞きたいことあるんですかまず1つそもそもなんですけど作り始める前にお客さんからもうこことことこコンテンツは触りたいっていう風に言われてブロックにされてるのかっていうだからカサムブロックを作るのに構想がかかると思うんですけども実際そこをいじるかどうかっていうのはあんまりお客さん側で分かってないパターンっていうのもすごく多いと思うんですけどそこは話し合ってやり始めたのかいやもう全部とりあえず触れるようにしましょうよってことでやり始めたのかどっちかっていうのを聞けてきたらと思いますブロックのところお客さんが全部触れるかどうかっていう質問ですねやっぱ触るかどうかはお客さんに最初は聞きますしそこは最低限実現するというポイントで作りますが基本はお客さんが分かんなければ後からだいたい変えたいっていうのがもしかしたら運用始めて半年後だったり1年後あるかもしれないのでそれらも最低限っていうわけではないんですけど未来もちょっと予測しながら変えるだろう前提で作ったりすることが多いですお客さんはここ絶対触りませんは当てりしませんでいいと思いますいきますいくつかっていう意味一つね大丈夫ですかねまだ大丈夫ですかね大丈夫ですかねじゃっきりありませんお時間がそろそろ来ておりますのでこのあとはもはむさん会場にいらっしゃると思いますのでどこかで捕まえてでは、お時間になりましたので、このセッションはこちらで終了させていただきます。ありがとうございました。ハムさん、ありがとうございました。