ManaのWebクリエイターカフェとゲストの紹介
ManaのWebクリエイターカフェ。WebデザイナーでWebクリエイターボックスを運営しているManaです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、WordPressのブロックテーマ制作、です。
昔からWordPressを使っている人ほど、クラシックエディターという使い方に慣れていて、
新しく出てきたブロックテーマに慣れていない人も多いんじゃないかなと思います。
今回は、ブロックテーマ、ブロックエディターを使った制作方法について聞いてみたいと思います。
それでは、今回のゲストを紹介します。
株式会社ハムワークス代表兼フロントエンドエンジニアのハムさんです。
ハムさん、簡単に自己紹介をお願いします。
ハムワークスのハムです。よろしくお願いいたします。
よろしくお願いします。半笑いなのは何なんですか?
ハムワークスのハムですしか名乗るようなことがないので、
キャッチーな名前でいいんじゃないですか。
ありがとうございます。
ハムさんのキャリアと出会いの話
そんなハムさんですね。まず、どこで出会ったっけって思い出した時に、
はるか昔、2011年でしたっけ?あってます?
あってます。実際の直接の出会いは、2011年の東京でのイベントがきっかけですね。
そうですね。3月15日に放送された、山田さんと一緒に主催した、
ネタ帳とWebクリエイターボックスの状況を歓迎してくださいのかいっていう、
ちょっとよくわかんないイベントがあったんですが、確かそこで初めてお会いして、
という感じでしたね。
そうなんです。当時は東京にちょっと出張にいた期間もあって、
ちょうど東京にいたので、もうポチッて参加しようと。
そうなんですね。
勢いで参加してしまったんですよね。
その時から北海道にお住まいだったんですよね。
そうなんですよ。もうこれ20年以上北海道に住んでいるので。
なるほど、なるほど。で、最近だったら、2023年12月に名古屋であった、
スタック名古屋フェスっていうところでまたお会いして、お話ししてって感じでしたよね。
はい。1位参加者として参加したんですけどね。
そうですよね。結構いろんなところにイベントにいらっしゃるようなイメージはあるんですけど。
やっぱりそう皆さん言いますけど、いや、そんなことないと思ってるんですけどね。
なんか気がついたら、ハムさんがいたみたいな、なんかそんなイメージはありますけど。
いや、きっと皆さんもよく参加してるからだと思うんですよね。同じところに。
そうなんですかね。なるほど、なるほど。
じゃあ、まずですね、キャリアについても聞いてみたいんですが、
そもそもウェブ業界に興味を持ったきっかけっていうのは何でしたか?
マナさんもブログを書いてるようにですね、当時大学の頃、
そもそもウェブに全く無関係だった臨床心理学を専攻してたんですが、
その当時に流行り始めたブログを自分も作り始めたっていうのがそもそもきっかけで、
HTMLやCSSをそこからカスタマイズしようとか。
で、その当時勉強してた大学の内容もその先の就職活動はちょっとせずにですね、
大学を卒業したらちょっとデジハリとかで勉強しようかなと思いながら行動してたんですね。
で、何かしらでも大学ちゃんと行ったよっていう爪痕を残そうかと思い、
インターンシップに参加したんですね。
で、その年のインターンシップに行った出版社、出版社の会計でウェブの部門のお手伝いをするという内容だったんで。
そこに行ったところ、そこで出会った役員だった部長さんに、
彼これこういうような感じでウェブの方に興味あるんですよねって話をしたら、
それだったらまあうちで働きながら勉強しないかとお誘いを受けて。
なので興味を持ってから就職するまでがどんどんどんと決まったので、就活はほぼゼロで入ったりしてるんです。
その頃は本当にできる人がいなかったから、興味あるんだったらもうどんどんやっていいよみたいな時代だったかもしれないですね。
時代はちょうどCSSが出始めたぐらいの頃だったんじゃないかなと思う。
その頃、なるほど。フロートと戦ってた選手ですね。
もうまさに。
そうですよね。
5.5って謎なバージョンとかもありましたね。
聞いたことあります。私が戦ってたのは6メインだったので、それより前の話ですもんね。
CSSハックとかで5.5はCSSを聞かないようにするとか。
CSSなしで。
そうですね。余計なのを聞かせるよりテキストだけ出そうみたいなのとか。
はいはいはい。
いろんなハックを駆使してた時代。
駆使して。
そんな時代ですよね。
そうかそうか。
ハムワークスの創業と北海道での生活
今は製作会社を始めて、創業8年になってると思うんですが、
そんな下積み時代があって、製作会社作ろうって思ったのは何かあったんですか?
フリーランスで4年ぐらい仕事をしてたんですが、
その間にも勉強会、自分でサックスという勉強会を当時やってたんですね。
そのサックスで出会った人とかと仕事をするようになって、
そのうちの一人が会社を辞めようと思っていると話を聞き、
辞めるんだったらフリーランスになって一緒に仕事するかなみたいな気持ちでいろいろいたんですよ。
ところがその人から会社じゃないと入らないよという話を聞き、
ちょうどその時は東京に行ったイベントがあって、
その時出会った人も創業を考えてるみたいなことを言っていたので、
なるほど、会社を作ればいいんだと。
ちょっと悲しいことを気づき、それをきっかけに会社を作ればその人も入ってくるし、
入ってくれるかもしれないしですね、希望もあって。
それであったら会社にしようというのをきっかけに法人にしたというのがスタートですね。
なるほど。
ちゃんと今は、今もメンバーでやってくれているので。
よかったですね。
ということはその時点で、フリーランス4年の時点である程度顧客は見れて、
案件があって安定はしてきたという状態だったんですかね。
そうですね。半端ぐらいは常駐して、要はプログラム系のお客さんのところに行って、
それのフロントの仕事をしながら、その他にもいろんな個々のお問い合わせが来てたような状況だったので、
案件自体は困ることはなかったというような状況ですね。
そうなんですね。それだったらやってみようって思いますよね。
そもそも一人でさばけたくなって、一緒にやっていくメンバーとともにじゃないとほぼ無理な状況だったので。
ですよね。そうなりますよね。
先ほどちょっとお話も出てきたんですが、今も北海道に住んでいて、北海道拠点にしても20年ぐらいっておっしゃってましたっけ。
そうです。大学の生活から考えるともう20年以上になりました。
なるほど。もともと新潟ご出身で、北海道に移動して、移動のタイミングも何かあったんですか。
単純に大学の進学を北海道に決めてっていうのがきっかけだったので、北海道にした理由もですね、
新潟、教科書でよく、新潟って豪雪地帯だって出るじゃないですか。
いや、なんでここを対決したらもう北海行ってもどこでも大丈夫だろうと、そんな気持ちでですね、北海道に行ったんですよ。
ところがですね、3月に行ったにも関わらず雪がまだ残ってるんですよね。
地元新潟ではそんなことなくて、3月にはもう完全に溶けて春モードに入っていったんですけど、あれもしかして間違ったんじゃないかなっていう。
雪がちょっとでも少なくなればいいなと思ったんですけど、逆に北海道の札幌の方ですね、めっちゃあんこ降るっていうのに。
そうなんですね。
じゃあ、だいたい同じくらいの期間住んでるわけですよね。新潟、生まれてから新潟と引っ越してから20年北海道と住んでらっしゃっていて、今比べてどんなです?どっちが住みやすいとかありますか?
住みやすさというと、どっちかというと暑い方が苦手だって気づいたので、冬の寒い時期、基本的には家にしかいないので、仮に外に出ても外にいる時間の方が短いので、
そういう意味では北海道の方が断然過ごしやすいなと思ってます。
そうなんですね。慣れたら都だと。
食べ物も美味しいですし。
そうですよね。絶対太って帰りますもん、北海道行ったら。
何倍になったんでしょうね、北海道来てから。
そんなですか。
皆さんもぜひ来てほしいですね。
ハムマークスさん作ってから8年経って、こんなこだわりあるよっていうポイントありますか?
はい。弊社のこだわりというか、そもそも事業的にはフロントのお仕事がメインで、HTML、CSSとあとはワードプレスの実装系。
その他に細かいところで言うと、ムーバブルタイプのフロントの実装とかもあるんですが、それらほとんど全部がフロントの実装なんですね。
あとはJavaScriptでのアプリケーションの開発とか。
なんですが、うちとして一番こだわっている点として、やっぱりJavaScriptの制作部分と、
ワードプレスでのブロックエディターを活用してのウェブサイト制作を一番こだわって作っています。
中でもワードプレスのブロックエディターを活用しての制作活動というのは一番注力していて、
他の方があまりブロック使われていないというような現状もこの間つい知ったんですが、もっと使ってもらいたいなと思っていたりします。
そうですね。お客さんが更新できるという環境って、やっぱりお客さんからしても楽ですもんね。
絶対その方がいいと思うんですよね。
あとは勉強会もずっと続けられている。今も続けられているんですかね。
はい。コロナ禍で落ちていたものの、2009年をスタートにほぼ毎月当時は開催して100回以上やっていたんですが、
コロナ禍に入ってからやっぱりそういう勉強会、実際に出会う勉強会がなくなってしまって、
オンラインでやるかと思ったんですけど、オンラインだったらやることは必要ないかなという考えになってしまって、しばらく休んでたんですよね。
札幌CSSの変化
なんですが昨年からちょこちょこと復活していって、今月も一度開催して、4月にまた今度は名古屋の方とか大阪の方を呼んで開催を予定しています。
そうなんですね。こちらがSACSSですね。札幌CSSを省略してSACSSという感じで活動していて。
じゃあそれだけ長年やっていたら、なんか変化もありました?最初と今最近やってみて。
そうですね。自分自身のステップアップっていうのも踏まえると、当時はやっぱりHTML、CSSのベーシックなことをみんなで学ぼうみたいなことがスタートだったのと、
内容も中心だったんですけど、今どっちかというとそういう内容あまり求められていないんじゃないかなという気持ちが大きくて。
もちろんHTML、CSSを学ぶ人もいっぱい出てきておりますけど、どっちかというと情報としてはいっぱい出ているのかなと。
かつそういうところよりも、じゃあ自分が今できることは何かなって考えたときに、いろんな地域に行っていろんな人の話を聞いたの。
それをじゃあ北海道に持ってきて、いろんな人の話を聞きたいなっていうのになったので、だからベーシックな勉強会っていうよりは、
自分が聞きたい話を札幌に持ってきて話を聞くっていうような内容に、今はどっちかというとメインがセフトしてるなっていうような。
そうですね。自分がセルフペルソナみたいな感じになるんですよね。
そうですね。これ聞きたいって人を呼んでるような。
いいですね、いいですね。
いろんな勉強会とかイベントとか、はむさん自身が参加してみて、地域差みたいなのもありました?
地域差でいうと、東京とかで比べると東京はそもそも開催頻度がいっぱいあるので、いわゆるシートなんですけど、札幌もどっちかというとバックエンドの方の開催は頻繁にやられてるなっていう印象なんですけど、
フロントの会とかデザイナーの勉強会はほぼないんじゃないかなと。
オンラインでやってるとか、あと最近はちょっとずつプログラム系の人も入ってきたようなフロントの勉強会も出てきてますけど、まだまだそれでも他のエリアに比べたら少ないんじゃないかなと。
わかりました。最近だったら、最近というか昔からワードキャンプにははむさん参加されてたと思うんですが、
ここ1ヶ月くらいでですね、ワードキャンプ関西とワードキャンプアジアに参加されたんですよね。
そうですね。関西ってすぐにアジアだったので立て続けですね。
そうですよね。1週間後くらいにアジアが、台北であったんでしたっけ?
そうです。ちょうど先週台北に参加してきたばっかりです。
そうですよね。言語は何になるんです?日本語?
全部英語です。
全部英語で。さすがはむさん、ぺらぺらなわけですね。
全然しゃべれません。
あれ?でも何となくは聞き取れるくらいな感じではあるんですか?
そうだと思ってたんですけど、ほとんど翻訳アプリなので。
そういうのがあるんですね。そういったワードキャンプもすごく長く続いているので、結構毎年参加はされてるんですか?
ワードキャンプの開催、参加の最初は思い出せないんですけど、
最初はワードキャンプの東京のイベントに参加をして、それからほぼ毎年東京には参加し、
その後関西、大阪とか京都でやった時も参加するようになったので、
コロナ禍前はほぼ毎年、コロナ禍後にもなっても、今は再開してからだいたい行くようにしています。
ワードキャンプ参加とブロックエディター
すごいですね。ワードプレスをちゃんと終えてるのが、実はすごいなと私は思っていて、
ここ数年で一気に変わったじゃないですか、ブロックエディターが出てきて、
その辺から私ちょっと置いてけぼりがちで。
ブロックエディター、皆さんそう言うんですけど、ブロックエディターのほうが全然いいと思うんですけど。
そうなんですね。この辺をちょっと私いろいろと聞きたくて、全部聞きたくて。
ぜひ。
いいですか?
もちろんです。
今でもワードプレスよく使ってたよっていう方、だいたいPHPでタグを入れて、独自タグを入れていってテーマを作るっていうパターンが、
何て言うんですかね、昔はベーシックだったんですが、今ブロックエディターになって変わってきたじゃないですか。
なので、制作手順を全部聞きたいんですが、
制作手順を全部、はい。
どうやってオリジナルテーマを作るっていう仕事がまずあるんですよね、まだ。
テーマを作るというよりですね、意味的にはブロックを作るにあると思います。
そもそもテーマはどっちかっていうと何でもよくて。
ありますね、ブランクとかデフォルトとか。
ブロックをいかに構成デザインを再現できるブロックを作るかっていうのが今ほとんどになります。
今までおそらく言っている従来の方法っていうのは、HTMLを作って、それをもとにテンプレートを作って、
もしくはカスタムフィールドをゴリゴリに中に入れていくっていうような手法だったんじゃないかなと思います。
もちろん私もですね、ウェブ制作を始めた当時はその方法だったんですが、
それこそWordCamp東京のストアル会に参加したときに、
それって無駄じゃね?と言われる人に出会い、
無駄じゃないんだけどなぁと思いつつも、
その後の制作の工程を考えると、やっぱり変えていくのがいいんだろうなと考え、
さらにその後にブロックエディターが出てからは、なおさらより顕著になったと思っていて、
カスタムフィールドなんて逆に言うと作らなくても、
ブロックエディターさえ作れば、ここに必要なテキストだったり画像だったりを入れていくし、
かつ並び替えもできるので、好きなところに好きな順番で入れられる。
はい、質問いいですか。
はい、どうぞ。
今までデザインがあって、HTMLコーディングしました、
ブロックエディターの制作手順
PHPでワードプレス化しますっていう流れだったんですが、
今デザインができましたってなった後に、まず何をするんですか?
まずブロックで、どのブロックを作れば全部サイトを作れるかなっていう、
ブロックの洗い出しを行ってます。
そもそもブロックでできないんじゃないのってところは、
デザイナーと相談したりしつつ、
ワードプレスをブロックエディターでどれを使おうか。
それを使ったら再現できるの?
それは組み合わせたらパターンっていうものでいけるかな。
パターンが無理だったらカスタマイズするかとか、
そういったのを全部洗い出しして一覧というか課題にしていって、
最後は一覧ができたらそれをどんどん作っていって、
その後に最後ページを作るっていう流れをしてます。
ブロックを作るっていうのは、
theme.jsonをごにょごにょとしていく感じなんです?
theme.jsonだったり、既存のブロックにスタイルを当てていくっていう作業です。
なるほど、そっちもあるんですね。
はい。
それで全部のブロックができましたってなった後に、
管理画面に行ってそのページを作る、動かしていくっていう感じなんですかね。
はい。
なるほど。ってなると顧客側がいじれますよね。
いじれます。
すると崩壊する未来も見えるんですが、
レイアウトが崩れちゃったり。
一応ちゃんとページを作ったり、ここまで触れますよっていう、
全部触れるんですけど、
そうですよね。
ちゃんとページはできましたよってところから、
ようやくお客さんに触ってもらうようなことが多いので、
崩壊っていう現場に出会ったことはほとんどないですね。
そうなんですね。
かつては自由に動かせるようにしたところ、
じゃあうちでもできるわ、ちょっとレイアウト変えたいけど、
できるわってやって、いろいろレイアウトが崩れていって、
みたいなことも経験が私自身あるんですけど。
崩れるということはないですけど、
要望に足りてないブロックが出てきたな、みたいなことはあったりしますね。
それでブロックを追加するってことはありますけど、
今のところ崩れたみたいなのをうちは多分ほとんど見解してないじゃないですかね。
もちろん崩れたってなるっていうことは、
何かしら用意が足りてない状況なので、それを追加したりとか。
修正したりっていう作業をしています。
ということはもうHTMLとかって、
本当にテーマで必要なものしか作らない感じです?
もう使わないHTML時代。
HTMLは使ってますけど、
HTMLでページを作るみたいなことはしてないです。
なるほど。そうなんですよね。
今ワードプレスのテーマって言ったら、
PHPかCSSみたいなイメージが昔のものだったらあるんですが、
今はJavaScriptとHTMLとあとFunctions、PHPとかですかね。
ちょっとのPHP。
そうですね。中でもブロックエディター、グーテンベルクはリアクトを使っているので。
そうですよね。
そうか。何かいろんな言語を知ってないと、
しんどくないですかね、そうしたら。
しんどいかどうかで言うと、
おそらくしんどさは上がっていると思います。
確かに。
そうですよね。だから管理画面からいじるだけなら簡単にはなっているんですが、
その元を作ろうと思ったら、いろんな知識をちょっとずつ買いつまんでやっていく感じなんですね。
HTMLから作るときって何も気にせずに、そのページがとりあえずできればいいということで、
ダーッと作っていけるんですけど、
ブロックエディターになると、どのブロック使えばこれできるのっていう組み合わせが重要になって、
全然その構成を考えるのが一番時間がかかっている状況です。
そうですよね。しかも考えている間って、何かもう頭だけ使うばっかりで、
手も動かせないし、ちゃんと考えてないから何もできないみたいな感じになっちゃいますよね。
そうなんですよ。
ウェブデザイナーさんやコーダーさんに必要なスキル
いかに早くブロックの一覧を作るかみたいなのがポイントなんじゃないかなって今は思ってます。
なるほど。
逆に言うと、ブロックの最初の構成さえできていれば、デザインはその後のコーティングでもいいんじゃないかなって思ったりします。
そしたらその構成からできるページをデザイナーさんが構成したりすればいいって話なので、
デザインからスタートして内容をいろいろ決めてから構成がものすごく分かるので、
パーツを先に決めて、このパーツで全部ブロックできますっていうのをできたりすれば、
制作の流れはちょっと変わりますけど、だいぶ構成は減るかなと。
ってなると、デザイナーさんもワードプレスの基本の形だったり、ブロックの作り方だったりそういうのを学んでないと、
デザイン自体がちょっと難しくなりそうですね。
デザイナーさんもワードプレスは学んだほうが、
学んだほうがいい。
そうですよね。なるほど。
じゃあこれからのウェブデザイナーさん、コーダーさん、必要になってくるスキル、
今言っただけでもデザインのほかにリアクトだったり、JavaScriptですね、
HTMLの基礎とCSSももちろん必要で、PHPも必要で、
ってなってくると思うんですが、じゃあ結局何すればいいですかって言われたら何て答えます?
まずはワードプレスの標準のブロック何があるかを抑えようというところですかね。
プラスそれにスタイルを当てるのをどうするかっていう次のステップいき、
テーマのスタイルだけじゃなくてテーマJSONっていう仕組みを次は覚えて、
その次にその組み合わせで作るっていうパターンの作り方、
その次のステップでようやくブロックカスタムしようかみたいな流れで十分いいと思うんですね。
ということは特定の言語っていうよりはワードプレスを学ぶっていう形になるんですね。
ワードプレスの案件を使うんであればどう構成されてるかっていうところが一番なので。
すごくよくわかりました。なんか不明なところが全部クリアになったので。
ということはそういう風なまだフローになってないってことですね。
今ちょっと自分のWebクリエーターボックスのブログもずっとクラッシックエディターのままで
ブロックを1回入れてみたんですけど、なんか保存されないまま上書きされて崩壊して、
記事消えたみたいな、そんな時期でまだ不安定な時期だったので、
それがトラウマになって今に至ってますね。
なるほど。
今多分違うんでしょうけど。で、新規に始めるんだったらまだいいんでしょうが、
私千記事ぐらいあるので、それをねちょっとまた一から考えるってなるのも大変なんですよ。
別なところでテーマを作ってそこに移植できるかなをやる方が早いかもしれないですね。
そうなんですよ。って思ったらそこまでしなくていいかなみたいな感じで、
今もクラッシックエディターです。
それは仕方ないかもしれない。
許してもらえますか?
許すべきだけど、多分それはもう仕方ないなと思うので。
仕方ない。はい、そんな感じです。ありがとうございます。
ハムの作り方
じゃああとですね、これからそんなハムさんがチャレンジしていきたいことってありますか?
私の挑戦したいことはですね、ハムを作りたいんですよ。
ハムを作りたいって何ですか?手作業で?どういうこと?
まんま言葉の通りハムワークスでハムなのにハムは作ってないんですか?ってリベントで言われるようになってしまったので。
じゃあどうやってハムを作ろうかな?
どうやって作るんです?
まず私の作りたいハムはですね、ってここから話すとものすごい長くなってしまうので。
3行でお願いします。
3行で豚の足を塩で漬けたプロシュートみたいなものを作りたい。
塩で漬けてそれを水で戻してまた漬けてあとは乾燥させてなんで。
出来上がりまでがほぼ1年半以上かかるんですよ。
そんなに?
私が今ちょっとささっと検索したら簡単3ステップでできちゃうよみたいな記事出てきたんですけど、そんな甘いものじゃないんですね。
そういうハムではなくもうどっちかっていうと熟成ハム。
熟成のハム。なるほど。じゃあ1年半後には特製ハムが食べれるかもしれない。
どうかな。
楽しみにその後の報告をね楽しみにしてますね。
はい。
じゃあハムさん今日はいかがでしたか。
ウェブの話なのに最後ハムで終わってよかったというそんなオチですが。
ハムに始まりハムに終わっていいんじゃないですか。
ありがとうございます。
じゃあそんなハムさん最後にお知らせなどあればよろしくお願いします。
はい。札幌での先ほど勉強会サックスというのを再開し始めています。
4月以降毎月本州の方から人をお招きしての開催をどんどん続ける予定ですのでぜひ皆さん北海道の人はぜひ札幌に。
そして北海道外の人もぜひ札幌に来てその方たちの内容をプラスおいしいものを食べて帰っていただければなと思いますので参加してください。
はいわかりました。ではハムさん今日はありがとうございました。
ありがとうございました。
さてこの番組では感想や質問リクエストなどお待ちしております。
毎月最初の配信ではお便りの紹介コーナーもありますので番組詳細欄にあるリンクよりお気軽にご投稿ください。
XではカタカナでハッシュタグWebカフェをつけてポストしてください。
そしてAppleポッドキャストやSpotifyのポッドキャストではレビューもできますのでこちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech Academyは現役デザイナーからマンツーマンで学ぶことができるスクールです。
Webデザインコースではオリジナルのポートフォリオサイトが作れるようになりバナー案件の提供も保証しています。
ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。Webクリエイターボックス野菜でした。
