00:04
ManaのWebクリエイターカフェ。
WebデザイナーでWebクリエイターボックスを運営しているManaです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、制作環境、技術選定を語ろう、です。
制作周りの詳しい記事とか、SNSのポストをよく投稿されている方に、
今日はお話を聞いてみたいと思います。
それでは、今回のゲストを紹介します。
株式会社キテレツ代表のカイトさんです。
カイトさん、簡単に自己紹介をお願いします。
はい、株式会社キテレツの代表のカイトと申します。
普段はデザインからコーディング、ディレクション、もちろん経営まで、基本的には何でもやります。
よろしくお願いします。
はい、よろしくお願いします。
カイトさん、結構昔から知っているイメージなんですが、最初に出会ったのがいつだったかちょっと覚えていなくて。
そうなんですよね。
ワードキャンプとか。
ワードキャンプは、多分大阪、京都あたり行ったことがあるので、その辺かも。
そうですよね。京都で会って、お話ししているのは全然覚えていない。
その前から、もしかしたら、一回会ってるのかもしれない。
一回どっかしらで。
ちょっとあやふやな感じではあるんですが。
ワードプレス、ワードキャンプ。
周りでしょう。
そうですね。
そうなんですよね。結構昔から知ってる感じで、SNSとかでも、冒頭でも言った通り、たくさんポストされてるのをよく目にしてますので、
なんか、あまり話す機会がないにしても、すごく身近に感じるんですよね。
ありがとうございます。こちらこそ、なんか、僕なんかもう何十年も前ってなっちゃうんですけど、マナさんのブログとかずっと拝見してて。
ありがとうございます。
そんなかいとさんなんですが、かいとさんもウェブ協会長いですよね。
そうですね。長くなりましたね。
最初の興味を持ったきっかけっていうのは、いつ頃で何だったかって覚えてますか?
もともと一番最初がですね、大学の時にアパレルの製造販売の会社を作って、その時に自社のサイトとかサーバー構築、当時まだレンタルサーバーとかもあんまりない時代で、
オンプレで会社の中にサーバー作って、サイトを作って、そういう感じでですね、それが一番最初ですね。
そうなんですね。
その後に、当時の彼女を追っかけて大阪に来て、で、グラフィックから、まず最初にグラフィックのデザインとかからやり始めて、
で、徐々にウェブの方に興味を持つようになって、転職してウェブ専門になって、今独立してみたいな感じですね。
そうなんですね、最初の最初はアパレルだったんですね。
アパレルですね。
今もうアパレル関係はノータッチ?
もう趣味だけですね、はい、もう作ってはないですね。
03:02
そうなんですね、私も実はアパレルが最初で、最初本当の最初はファッションデザインから。
そうなんですね、はい。
そうなんですね、そうなんですね、近いところ。
近いですね、はい。
レンタルサーバーがないときからって、すごい昔じゃないです?もう20年前?
いや、全然20年以上前ですね、はい。
そうなんですね、その頃から。
はい。
なるほど、なるほど、そのときのいろんなことをやった経験が、今の会社を立ち上げるところにまでつながっていたんですかね?
そうですね、はい、あると思います、はい。
今、製作会社で、住宅がメインになるんですか?
住宅メインですね、この後、いろいろやりたいと思っていることはあるので。
それはじゃあ、後ほどゆっくり聞きましょうかね。
はい。
じゃあ、会社を立ち上げたきっかけも何かありました?
そうですね、もともとサラリーマン、多分向いてないだろうなっていうのはあるんで、だから大学のときに会社作ったんですけど、
まあ、一旦大阪に来るタイミングで、一応就職して、勉強して、いろいろした後に、会社の中で勉強するものはちょっと減ってきたなという感じで、
それで、自分で会社をもう一度独立してという感じですね。
なるほど、どういったところで会社向いてないなって思いました?
自分は違うなっていう。
そうですね、自由にやりたいっていうのが大きいし、コロコロやりたいことが増えるので、
なので、経営者としてそういうふうにやっていったほうがいいんじゃないかなっていうところですかね。
なるほど、そういうところなんですね。
最初の話にまた、ワードプレスについてなんですけど、コントリビューターっていうのをされてらっしゃるんですよね。
今もされてる?
ちょこちょこ、最近のバージョンででは、一応コントリビューターとして入ってるんですけど、
ちょっと前は忙しくて、あんまりできてなかったっていうところもありました。
コントリビューターっていうのが、聞いてる方、初めて聞きましたっていう方もいらっしゃると思うんですが、
どういうことをするのか、簡単にご説明いただけますか?
そうあるんですけど、バグを見つけたら報告をまずして、
で、自分でできるんだったら自分でバグを潰すパッチっていうソースコードを書いてやるのとか、
あとは新機能に関して議論をしたり、そこにも同じようにソースコードで貢献できるんだったらそれをやったりとか、
他の人が書いたソースコードをテストしたりとか、本当にいろいろあるって感じですね。
なるほど、ワードプレスっていうのがオープンソースであるからできることなんですかね。
これもけっこう長くされてるイメージなんですけど、いつ頃からされてます?
一番最初は本当に自分をワードプレス使うタイミングで見つけて、じゃあソースコードでパッチを送ろうっていう感じで、
確か2015年のキャンプのちょうどそのやってる間ですね。
そうなんですね、もう10年くらいワードプレス貢献し続けてる感じで。
06:00
そうなりますね。
最近はワードプレス以外にも技術選定としてはいろんな選択肢があると思うんですが、ワードプレスもメインで使われてますかね。
使ってますね、どうしてもクライアントワークだと必要になってきますね。
なるほど、きてるずさんのサイトとか見るとリアクトだったりとか、ネクストJS、ナクストだったり、いろんなものも使ってるように見えるんですが、
この辺の使い分けというか、こういうサイトだったらワードプレス、こういうサイトだったらネクストとか、そういう選定の仕方っていうのは何かありますか。
そうですね、やっぱり更新が頻繁に必要になるサイトはワードプレス使うことが多いですね。
クライアントがもともと使ってらっしゃったりとかっていうことも多いし、使える担当者さんみたいなのがすでにいるので、ワードプレスでいくことが結構多いですね。
昔からウェブサイトに関わってる方だったらワードプレス絶対1回は使ったことあると思うので、そういった流れで引き続きっていう方はよくあるかもしれないですね。
なるほど、なるほど。ただワードプレスって昔に比べて、10年前に比べたら作り方が全く変わってきたじゃないですか。
その辺についてちょっといろいろ言いたいんですけど、どうですか?ブロック系はどんなですか?
ブロック、バリバリブロック。
バリバリ使ってます?
使ってます。
開発から、一から作って?
そうなんです。もう必要なブロックを作っていくみたいな感じですね。
それは、なんか以前ハムさん、北海道ね、ハムさん来ていただいたときも聞きました。
そのときもたくさんお話をしたんですが、ブロックを作るタイミング、一番最初に作ってしまって、全部出し切ってから積み重ねていくみたいなパターンがあると聞いたんですが、そんな感じなんですかね?
そのページというか、その部分によりますね。
例えば、固定ページでも、あんまり更新する必要がない部分とかに関しては、もうデザイン作って、それに合わせて何か構築したりすることも多いです。
あとトップページとかだとそうなんですけど、コンテンツのページをすごい更新が頻繁に必要な部分に関しては、ちゃんとブロックを用意してあげるっていうのはあったりします。
なるほど。使う頻度とかに。
そうですね。具体的なお客さんで言うと、学習塾のサイトなんですけど、それぞれの校舎が別々の担当、多分フランチャイズとかだったり担当者さんが更新する校舎ページがあるんですよ。
そこのページ用のブロックとかも全部ガーって作って、もう固定した状態で入れてしまう。
それでこうぐちゃぐちゃにされたりってことは。
できないように作ってる。
なるほど、なるほど。そうしたら安心ですね。
私結構最近Next.js使ってるんですけど、その時もこれはコンポーネントにすべきなのか?みたいなものも出てくると思うんですが、それも使用頻度によってっていう感じで考えてますかね?
09:09
そうですね。何回も3回ぐらい繰り返して使ってるなってなったタイミングでコンポーネント化しようかなみたいな感じが多いかもしれないですね。
確かにそういうのは大事ですよね。
私が参考にした記事で言うと、TailwindのCSSですね。
こちらのサイトをすごく参考にさせていただいて、これがZENのほうでですね、書いていただいたものなんですが、Tailwindはゴリゴリ使ってる感じですか?
ゴリゴリですね。今もう多分CSSほぼTailwindしか使ってないぐらい。9割ぐらいTailwind。
そんなに?なるほど。でもワードプレスで開発してたら別になりません?
そこいい質問ですね。
ありがとうございます。
ワードプレス、そうなんです。ブロックの中のスタイリングっていうのはTailwindを使えなくはないんですけど、推奨はしないです。
なんでかというと、Tailwind CSSってHTMLに直でクラス名を書くじゃないですか。
ワードプレスのブロックってHTMLが保存される状態なんですよ。
スタイルを変えようとすると、そのHTMLが変わってしまうんで、そうするとこれまで作ったブロックは壊れてしまうんですよ。
ちょっとしたスタイルを変えるために。
それに対応することもできるんですけど、結構めんどくさいので、CSSを普通に別で用意したほうがやりやすいっていう感じですね。
クラス名をつけてみたいな感じ。ただその外側、サイト全体のスタイリングとか。
枠組みだったり。
そこはもうバリバリ使ってますので。
じゃあ使い分けてるんですね。同じワードプレスのサイトでもTailwindは用書用書で使って。
そうです。
なるほど、そういう使い方が。
それがTailwind CSSです。
クラスを書いてスタイリングを当てる、そのファイル自体はTailwind CSS用に用意したCSSファイルなので。
なるほど、じゃあブロックに対しては別のやり方なんですが、全体的には使われてると。
はい、そうです。
そうなんですね、それじゃあ一回作ったものを別の人が修正しますってなった時に、何がどうなってるかって分かりづらくならないです?
それはちゃんと社内には共有してます。
そうなんですね、なんかドキュメント用意して。
これはもうだいぶ前からずっとやってきているので、ブロックの部分に関してはクラス用意してちゃんと書いてる。
そこもちゃんとCSSの設計をちゃんとして、コンポーネントに対してスタイリングをしているという状態ですので、パッと見てはすぐ分かるって感じです。
そうなんですね、なるほど、分かりました。
この辺が、掛け出しの方、何から勉強すればいいか分かりませんっていう声をよく聞くんですけど。
なるほど、はい。
そう、ワードプレスとか、今の話で言うとワードプレス、ネクトジェイス、リアクト、ビュー、テイルウィンドって今の話だけでもこれだけでできたんですけど、どうすればいいですか?
12:05
そうですよね、確かにそうですよね、難しいですよね。
ワードプレスのブロックテーマとかブロックについて勉強した方が仕事にはつながりやすいかなとは思います。
なるほど。
技術的に勉強したいなら、テイルウィンドは僕はすごくおすすめ。チームに入るためにはテイルウィンド。
弊社はもうチームでやるのでテイルウィンド、CSSを使ってるっていう節は強いですね。
あとは最近おすすめなのは、アストロですかね。
なるほど、こちらもよく使ってらっしゃいます?
はい、使ってます。
私、実はまだ使ったことなくて、すごく人気なのはわかるんですが、なぜそんなに人気なのかがまだちょっとつかめていなくて。
ネクストジェイス使われてるならわかると思うんですけど、ネクストジェイスってJSXっていうかリアクトを書かないといけないじゃないですか、HTMLを。
それがまあ難しいんですけど、コンポーネント思考としてのフレームワークとしてはいいんですけど、そこがちょっと難しいんですけど、
ただの静的サイトを作るのに、なんかすごいJSとかリアクトを勉強しないといけないみたいなっていう人がいるわけですよね。
その人にとってはアストロがもう最高。もう本当にHTMLです。
じゃあなんか、Vueとかネクストジェイスとかも結構HTMLっぽいものに追加していく形なんですが、そんな感じ?
ネクストに近いですね。ネクストに近いけど出力されるものっていうのは完全にHTMLのみです。
そうなんですね。そういったところが。
そうなんです。ネクストとかネクストってどうしても最初にJSが走るじゃないですか、ページに。
その出来上がったサイトをアクセスしたときに最初にJSが動いて、HTMLをどうにかするみたいな感じですけど、それが一切なくて。
もう完全に普通のHTMLが生成されるっていう感じです。
そうなんですね。
じゃあ今からウェブサイト制作勉強しますっていう人が、まずHTML、CSS、最初の取っ掛かりとしては勉強すると思うんですが、その次何をおすすめしますか?
そうですね。JS勉強した方がいいと思います。何にでも使えますね。
基礎のJSそうなんです。ワードプレスでも最近JSですし、リアクトも絶対JSだし、アストロ出てもJSは出てきますし。
確かに確かに。ウェブサイト制作で行くんだったらHTML、CSSが今までベースでしたが、プラスでJSもセットで覚えていきましょうという感じですかね。
そうですね。それがいいと思います。
分かりました。ありがとうございます。
続きまして、カイトさんの活動を見てみると、昔からそうなんですが、なければ作るっていうような感じで、今まで世界中にあるサービスの中でも、自分が使いたいものを自分で作って公開するっていうスタンスでされてるのかなと思うんですが、この辺はあってますかね?
15:02
そうですね。
最近だったらフォントブック、これノーションを使ったものですよね。
そうですね。
フォントを集めたものだったりなんですが、こういった何か作ってしまおうと思ったきっかけは何かありましたか?
最初は何だろう。でも最初、製作会社入って自分でデザインしてサイト作ってるときに、いろいろ、当時JQueryとかすごい流行ってた時期だと思うんですけど、みんなプラグインとか探していい感じのを使うじゃないですか。
そういうときに合うプラグインは見つからなくて、じゃあ自分で作るかみたいな感じで。
プラグインいっぱい公開してる人いるけど、いつも助けられてるし、自分も作ったやつ公開するかみたいな。
そっから徐々にワードプレスに入って、ワードプレスすごいオープンソースでみんなプラグインとか公開してるし、自分も何か貢献しようってなって、それでコントリビューターになって。
それで自分が使いたいものを作って、きっと同じように使いたい人もいるので、じゃあ公開しちゃおうかみたいな。そんな感じですかね。
そうなんですね。初心者の方と話してたら、作るものがないですみたいな。聞くんですよね。そういった方にはまず最初の取り掛かりとしては、こういうのどうですかってのありますか?
作りたいものがなければ作らなくていいと思うんですよ。
なるほど。
自分が使わなくなったものっていうのはメンテナンスもしなくなりますし、あんまり情熱ないというか、続かないと思いますので、やっぱ欲しいなと思ったもので、世の中になければ作って、それ公開してしまえば他の同じように欲しいと思う人は使いますしっていう。
はい、それでいいかなと思いますね。
そうですね。私も、私しか使わないようなウェブアプリも何個かあったりしますので、まずはそういったものからでいいかなって感じですかね。
そうです、はい。
なるほど。で、なんか自分のために、私はこう自分しか使わないから、特に見た目とかも気にせず、そのままもうローカルでしか動かないようにしてるんですけど、
はい、そういうの結構ありますね。
人にこう公開するんであれば、また気を使わなきゃいけないところもたくさん出てきますよね。
そうなんですよね。結構大変です。
大変ですよね。
自分使うように作ってるものと公開ように作るもの、2倍ぐらいたぶん労力かかるかもしれないですね。
そうですね。その辺はやっぱ分けてます?これはもうお礼専用みたいな感じで。
ああ、もうこれあんまり重要ないやつだなと思ったら、もう公開してないですね。
ああ、もう作って終わり。
そうですね。案件でコピーペイするみたいな感じぐらいですかね。
そうですね。初心者の方だったら、まずは自分専用のものでもいいので作ってみて、できれば、余力があれば人のために公開したほうが自分の力になるよって感じですかね。
18:07
そうですね。たぶん同じような案件結構あるとは思いますので、自分のよく使う環境だったりパーツだったりあると思うんですけど、
それを作って使いまわしていって、これよく使うのは結構需要もありそうだなと思ったら公開したらいいと思います。
なるほど。わかりました。最終的にはメンテナンスしなくなって、消えてしまってもまあいいかなって感じですか。
そうですね。
最初はね。そうですよね。わかりました。他に作ったものでおすすめのものとか、見てほしいものとかありますか。
はい。アストロレラティブリンクスっていう、アストロで相対パスで出力することがデフォルトではできないんですけど、
それ、静的サイトなので結構たぶん需要あると思うんですよね。で、僕らがやってる案件とかでちょうどそういう必要性があって、それを作って、
案件用に作ったんですけど、きっと需要ありそうだろうなと思って公開したものだったりとか。
なるほど。これ使わなかったら絶対パスじゃないですか。
そうなんです。絶対パス、ルートパス、すらから始まる感じだったりとか、っていう感じです。
そういうもの。
とかだったりとか、ワードプレスの開発環境だったり。
あと、テイルウィンドの…
イージングの…
これ、アニメーションの…
アニメーションのイージングを拡張するプラグインみたいな感じですね。
なるほど。本当にコード見たらちょっとしたものなんですが、あると便利っていう。
そういうことです。どっかVSコードのテーマ、僕のツイートの固定ツイートにしてるんですけど、
それも同じような感じで、自分が欲しいもの、かっこいいものないなと思って作って、じゃあ公開しちゃおうみたいな、そんな感じです。
なるほど。この辺の公開してるものはGitHubの方で確認できるんですかね。
基本的にはGitHubに全部あります。
そちらの方もチェックしていただければと思います。
はい。
はい、それではカイトさん、今日はいかがでしたか。
はい、楽しかったです。会社に話せてよかったです。
そうですよね。なんかあんまりカイトさんと会場ではあーって話すんですけど、ゆっくり2人で話すっていう機会があんまりなかったので。
そうですね、はい。
では、はい、最後にお知らせなどあればお願いします。
会社キテレツでは常にいい人材がいれば募集しておりますので、最近は特にディレクターさんとかコピーライターさんとかエディターさんとかいらっしゃったら、はい、ぜひ来ていただければというのと、
今年の後半から来年にかけて新しい試みというかプロジェクトがありますので、興味がある方はぜひフォローしていただければ、新しい情報が入ってくるかもしれないです。
お、すごく楽しみにしております。
はい。
概要欄の方にもリンク貼っておきますので、ぜひチェックしてみてください。では、カイトさん、今日はありがとうございました。
ありがとうございました。
さて、この番組では感想や質問、リクエストなどお待ちしております。
21:03
毎月最初の配信ではお便りの紹介コーナーもありますので、番組詳細欄にあるリンクよりお気軽にご投稿ください。
XではカタカナでハッシュタグWebカフェをつけてポストしてください。
そしてAppleポッドキャストやSpotifyのポッドキャストではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech Academyは現役デザイナーからマンツーまで学ぶことができるスクールです。
Webデザインコースではオリジナルのポートフォリオサイトが作れるようになり、バナー案件の提供も保証しています。
ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。Webクリエイターボックスマナでした。
