番組の紹介とKakedashiの近況
ManaのWebクリエイターカフェ。
WebデザイナーでWebクリエイターボックスを運営しているManaです。
SF漫画家のKakedashiちゃんです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、ノーコードツールを使ってみた、です。
はい。反省文を書いてきました。
反省文。ちょっと何が起こったのか気になるところなんですが、
じゃあまず、Kakedashiちゃんの近況からですね、先に聞いていきましょうか。
はい。9月もいろいろありました。
そうだ、前回お話ししたところで、Tシャツの販売がありましたね。
はい。アヒルちゃんTシャツ。
どうでしたか?
なんと、意外にも買ってくれた人がいました。
アヒルが好きなのか、ツアモノなのか、部屋着が足りない人なのか、わからなかったんですけども、ありがとうございます。ということで。
よかったですね。グッズってやっぱり難しくて、予測もできないんですよね。
どれくらい売れるかとかもわかんないですし、経験がある人でも難しいところだと思うんですが、一ついい経験になったんですかね。
そうですね。アパレルに手を出すという貴重な経験ができました。
私もサンプルとして1枚アヒルちゃんTシャツをもらえたので、満足しております。
素晴らしい。
これをね、11月の技術書店に着ていこうと思ってます。
いいですね。そこではもう販売されないんでしたっけ?
そうですね。このアヒルちゃんTシャツは受注期間終わっていて、販売終了になりました。
なるほど。今後またグッズ化する予定とかは?
いつかは。また私が新しいアヒルTシャツが欲しくなった時に作るかもしれないです。
なるほど。わかりました。じゃあ、他最近活動していることで言うと、どんなことをやってますか?
はい。技術系の本即売会の技術書店に申し込みをしまして、先日当選のメールをもらってしまいました。
すごい。技術書店って、なんかすごい、つよつよエンジニアたちがすごくマニアックな本を書いてるみたいな、そんなイメージあったんですけど、そんなことないんです?
そうなんですよね、実際。前に遊びに行って、うわ、楽しそうだな、出てみてえなと思って。
確かに技術って言うと、私なんもわからんのですけども、勢いで申し込んでサークル審査要項に、
SM漫画を書いた時のあれとか情報不足のサムシングとか書きたいですって言ったら通してもらいました。
そうか、そうか、そうか。内容次第なのかなと思ったんですけど。
そうですね、実際に本を出す前に、また本の内容の審査もあるらしくて、もしかしたらそこで、
技術っぽくないから、今回はごめんねとか言われるかもしれないですね。
その時はメソメソしながら、他のイベントに出そうかなって思ってます。
ただ、その審査があることで、技術書店の技術のクオリティが保証されてるっていうのはいいことですよね。
そうですね。内容のチェックがないと、本当になんやこりゃみたいなのがあっても困りますしね。
なので、正直落ちても仕方ないかなとは思いつつ、ちょっと技術感も出していけるように書いていきたいなと思ってます。
なるほど、わかりました。ちょっとこの技術書店については、また後半でも聞いてみたいと思います。
ノーコードツールの体験と課題
はい。
あとですね、YouTuber、デビューしましたね。
いやいや、マナさんがそう言ってるだけって思ってたんですけど、YouTubeで動画出したらそれはYouTuberかという。
その通りです。3人目の登録者なんで。
ありがとうございます。大先輩、YouTuberとしても大先輩のマナパイセンに登録していただきました。
今のところショートだけかなと思うんですけど。
そうですね。長い動画ちょっとまだ手出せないと言いますか。
進捗をショートでも報告してみるか、最近プレミアプロ、そういえば触ったしな、忘れたらあれだしなという感じで作り始めたんですが、結構楽しいですね。
そうなんですね。
自分の声編集するの、ああって感じですけど。
それってプレミアに直接オーディオ吹き込んでるって感じです?
パソコンに入ってたボイスレコーダーで声をやって、それをプレミアに突っ込んで、ノイズ取ったりしてやっています。
あれ実はプレミアに直接録音できるんですよ。
はい、知りませんでした。
だから動画を先に作っちゃって、動きに合わせて音のレコーディングアイコンみたいなのがあるので、そこを押したらそのまま。
あったっけ?
あります。実はできるんですよ。
それ便利そうですね。
そうなんですよ。そっかそっか。今後長いのも作ろうかなって思ってるんです?
もし本がちゃんとできて、イベントにちゃんと出れて、トラブルが起きなかったら、まとめとかも作ってもいいのかなって思ってますし、
慣れてきたらいつかはマナさんをお呼びで、こっちが遊びに行ったほうがいい感じですかね、これ。
お互いコラボとかできるといいですね。
はい。
で、あとはですね、今回のテーマでもあるノーコードですね。ノーコードツールの、前回お話ししたのがスタジオっていうのを使ってみたいねっていうお話になって、
じゃあお互いちょっと頭突いて、次回お話ししてみようという感じになったんですが、どんなでしょう?触ってみましたか?
触っては見ました。テンプレいじったりウニョウニョしてるんですけれども、
はい。
はい、もうマナさんにお見せしたとは思うんですが、できは大変残念なものにやってしまいました。
そうなんですよ。これ公開予定はあるんですかね?
ありません、ありません。
ありません。じゃあちょっと簡単にですね、説明しますと、画像が3つくらい並んでます。
はい、はい。
で、ちょっと文字が、見出しのような文字が、試し読みコーナーという見出しがテキストであります。
はい。
以上ですっていう感じのものが、はい、私の目には映っているんですね。
はい、これモバイルから作ってみようということで、縦にこう置いていくっていう感じだったんですよね。
そうですね、せっかくなので技術書店用の特設サイト、何なら当日QR貼ってみんなが直接飛んで見てもらえるようなサイトを作ろう。
だったらモバイルファーストがいいよねっていう感じで、妄想しながらですね、進めていったんですけれども。
まずスタジオさん、私が思ってたよりだいぶ難しくって、操作感が結構独特というか、見た目がおしゃれすぎて、どこを押せば何ができるのかよくわからなかった。
そうなんですよね、私もつついてみたんですけど、結構初見殺しというか、何からどうすればみたいなところがあったのと、
あと専門用語が多いなっていう、CMSとか突然ね、表示されて、
たぶん私はCMSずっとつついてきてるので、わかるんですけど、全くの初心者が手軽にウェブサイト作れるよって思って登録した人が、
CMS、フォーム、アナリティクスって並んでるのを見て、これわかるんかなってずっと思ったんですよね。
何から始めればいいかっていう。
最初のハードルすごい高いなと思いましたね。
昔、ペライチっていうノーコードツール使っていたんですけれども、あれはサクッと作るには本当にわかりやすくて、
それで私もスタジオもいけるやろって思ってたんですが、全然そんなことはなく。
そうなんですよ。私もキャンバーとかワードプレスとか、そういう感じでドラッグ&ドロップだとか、
ワードプレスっていうブロックみたいなのを組み合わせて、パッパッパッとできるかなって思ったら全然。
ありました。ここは画像をちょっと伸ばして大きくして、いや伸びないんかーいみたいなのがかなりありました。
そうなんですよね。テンプレートがたくさん用意されてるんですけど、
本当にテンプレート通りの構造で、テンプレート通りの動きを想定したウェブサイトじゃないと、
これカスタマイズ、ここからも難しいなと思ったので。
そうですよね。ここちょっと増やしたいな、できるかな、ぐちゃぐちゃになったっていうのが。
そうなんですよ。本当そういうのが多くて、じゃあ最初から作ろうってなったんですが、
じゃあ一体何から始めれば?みたいな感じになっていき、
そうなんですよね。
結構ね、大変だったんですよね。
ただ、そんなマナさんのサイトはすごかったです。
そうなんです。あれちょうど一つ簡単なサイト作ろうって思っていたのがあって、
で、せっかくならこの話が出たので、スタジオで作ろうって思い、もう1からテンプレートのやつは全部捨て、
1から作り出したのが、今もう公開されてます。
tryasla.studio.siteというものですね。
こちらは結構頑張りましたよ。
いやーすごい、写真に字というか、これが重なってるし、ちゃんとお問い合わせフォームもあるし。
そう、お問い合わせフォームだけは本当に簡単でしたよ。
なんかありましたよね、テンプレート。
そうなんです。パーツだけピッてやったらもうできたので、あとメールアドレスを登録するだけでできたので、これは本当にすごいなと思いました。
画像ポンポン載せて最後にお問い合わせフォームを設けるタイプのLPとかだったら、簡単に作れるのかな?
そうですね、1ページもので更新とかも特になく、商品の詳細、テキスト、見出し、で、お問い合わせフォームっていうものだったら、結構すぐできるかもしれない。
でもそれでも初手難しいかもしれないですね。
まずこのフォームどうやって置くの?から。
そうなんですよ。先ほども言ったような、専門用語が多いので、ブロックを使いましょうみたいなのがあっても、ん?ってなりそうですし、レスポンシブ、ん?ってなりそうですし。
自分のやりたいこととスタジオ側の単語が一致するとは限らなくて、そこがわかれば検索も楽なんでしょうけど。
ただ、どういう人に向いてるかなって思ったのが、私コーディングもできますし、デザインもしますので、そういう事前にコーディングの知識がある人、かつデザインもする人だったら、時短になるとは思いますね。
最初の学習はちょっと時間必要になってきますけど、1回作ってしまえば、これこうしたらできるんだっていうのがわかってきますので、その辺がわかるようになると。
作品の例を何個か見たんですけども、本当にすごいやつありますよね。マスターすればここまでできるんだと夢は広がります。
特にアニメーションが手軽にできるのが面白いなと思っていて、私が作ったサイトも最初のトップのところはちょっとアニメーション用意してるんですけど、
ふわっと出てくるとか、シュッと動くとか、そういった簡単なものが意外とすぐに実装できたので、その辺の時間にもなりそうかなって思いましたね。
こういったアニメーションコーディングでやろうって思うと、慣れてない人はめっちゃ時間かかると思うんで。
そうなんですよね。あと考え方としてコンポーネントで管理するって、初心者にはちょっとなんやそれってなりそうなんですが、
よく使うパーツを集めておいて、まとめておいて、必要な時に引っ張り出して使おうねっていうコンポーネントっていう考え方があるんですけど、
それが実装できるので、その辺の作り方に慣れてる方、やり方わかる方だったら、ささっと作れるようになるかなと思いましたね。
そういったところをちゃんとマスターした上で、クライアントさんに提案する選択肢の一つとして、スタジオこういうのがあるんですけど、どうですかっていう一つとしてはいいかもしれませんね。
そうですね、それはありだと思います。で、CMSの機能もあって、クライアントがウェブサイト上で簡単に更新できるっていう機能もあって、
実際にウェブとか全くつついたことのない方にもつついてもらったんですが、結構簡単だねっていう感じでささっと慣れてましたので、
ユーザーの可能性と活用法
ここをこうして、ここをこうやって、こうやったら公開できるよっていう手順だけ教えてあげると、結構すぐ慣れてましたね。
だからスタジオ向いてる方、そうね、HTMLのタグだとか、CSSでのレイアウトの組み方、基本、デザインとかがある程度基礎だけでもいいのでわかってて、
で、スタジオを使い始めるとやりやすくなると思いますね。
ノーコードツールの重要性
で、たぶんささっと触っただけだったら、ちょっと見逃したかなと思うんですけど、ボックスを並べるときにタグを選べるんですよ。気づいてました?
気づいてなかったです。
そうなんです。これも右端の方に設定するところがあったんですけど、それがないとディブだらけになるんですね。
あ、なってますね。
ですよね。見出しとかもテキストは全部Pタグになりますし、箱、ボックスの部分は全部ディブになってますので、何にもしなかったらディブとPだけのサイトになっちゃうんですよ。
これ見逃しがちだなと思って、そういったところもあって、HTMLの基礎が絶対必要になってくると思いました。
本当に見た目は、最初は感動したんですよ。ドラッグドロップでいろいろいけるやんって。
いけると思ってたんです。すいませんした。舐めてました。
そう、私も思ってました。だから、本当にそういうドラッグ&ドロップだけでとか、もう何も考えたくないですって方は、wordpress.comの方とか、あとはCanvaでも今できるかな。Canvaとかでささっと作るっていうのもアリだと思いますね。
他、おすすめのCMSなどあれば教えていただきたいんですが、あ、ペライチも簡単で教えましたっけ?
ペライチはね、昔使っていたんですけれども、必要なパーツとかを見やすく揃えていてくれたりして、本当に組み合わせるだけで作れる感じなんで、パッと作りたいならペライチさんもアリかもしれないですね。
なるほど、なるほど。はい、というもので、どれも無料で使える機関があったり、無料である程度公開するところまでできると思いますので、いろいろ試してみて、あ、これ簡単だなとか、これ使いやすいなっていうものを使ってみるといいと思います。
そうですね。もう何が合うかは人それぞれだと思います。
技術書に関するディスカッション
今までのエンジニア経験を登録することで、厳選された企業から年収提示付きのスカウトが届き、リアルな試乗価値が測れます。気になる方は、転職ドラフトで検索してお気軽にご参加ください。
じゃあ、冒頭でですね、技術書店のお話もあったんですが、こちらのサイト、もしかしたらスタジオでできてるかもしれない?
ああ、確かに。いや、今はですね、締め切りが生えてしまったんで、本優先になっちゃってるんですが、もし時間があったらですね、やっぱり当初の目的通り、特設サイトも作りたいですね。
もしかしたらスタジオでできてるかもしれない。
はい、もしかしたらペライチになってるかもしれない。
さあ、どう出るのか楽しみですね。もしかしたら何もないかもしれない?
そうですね。何も生えなかったら困るんですけれども、ウェブサイトは生えないかもしれないです。
そうですね。どうなってるのかっていうのは。
また次回、進捗を報告できればと思います。
はい、お楽しみにしてください。
あとは、かけだしちゃんからですね、その技術書店に出すにあたって、何かお聞きたいことがあると伺っているんですが。
はい、技術書の大先輩であるマナさんにですね、技術書の書き方についてお聞きしたいです。
書き方。
書き方、だいぶでっかく出てしまいましたが、これだけはやめておけとか、そういうマナーですかね、技術書においてのマナーがよくわからないんですね。
まあ、内容にもよるんですけど、技術の紹介なんであれば、ファクトチェックも必ずしてほしいですね。これは正しい情報ですよっていう。
間違った情報を書籍で公開するわけにはいかないので、そこはちょっと気をつけたほうがいいかもしれないですね。
でも、そんなコーディングの話とかではないんですよね。
そうですね。
エッセイ的な話になるんだったら、そんなに気にならないかな。
書いているものとしては、自分の当時の思い出を振り返りながら、どういった手段に引っかかったのかとか、最近はこういう手口も増えてますねとか、そういったものなんですけれども。
ただ、やっぱり観測範囲が、私がツイッターやインスタで見ているつもりなんですが、やっぱり限界がありまして、全員がこういうことを言っているとは限らないというのはもちろんなんですけども、
今その手法を誰も使ってないよとか、そういうのも混ざっているかもしれなくて、そこが怖いですね。
なるほどな。なんか主観になっちゃうので、それを最初にエクスキューズしておいて。
はじめにで。
そうですね。私が勝手に書いてますみたいな感じで。
個人的なものです。
そうそう。っていうところをしっかりとね。そんな感じからかな。そしたら。
まず予防線を張るところから。
そうですね。書き方か、技術書になるのかな、それは。
技術書として認めてもらえるかは、まだわからないんですけれども。
でも本を書くのも初めてです。活字の本というか。
そうなんですよね。文章初めてで。
そうそう。よく考えたら、文章を書けないから漫画にして、ツイッターで投稿したろって言って始めたのに、なんで今文章を書いてるんだっていう。
本当だ。すごいすごい。でもやろうと思うのがすごいですね。
形にしたいですね。
今、1ページごとに書を作ってって感じで進めてるんですよね。
1ページごとだと、途中で飽きてしまったので、77ページ。
書きたいネタをバーッと並べてたら、77ページになりまして。
今、埋められるところから埋めてるっていう感じです。
結構広げてますよね。
そうですね。ここから削っていく作業も出るのかなと思いつつ、今は埋めることで手一杯です。
いけるいける。
コツとしては、毎日書いたほうがいいですね。
はい、それだけはできてるはず。
たぶんたまに、仕事が忙しくない時にまとめてとか、週末にまとめてっていう人もいるんですけど、
それでも、1行でもいいから毎日書かないと、たぶんもう忘却の彼方に内容とかも自分でわかんなくなっていっちゃったりするので、
毎日手をつけたほうがいいなっていうのはありますね。
わかりました。今の習慣を止めないように。
そうですね。それが習慣化できてるんだったら、もう素晴らしいことです。
ちなみに書いた本っていうのは、オンラインでも買えたりするんですか?
はい。審査がうまく通れば技術書店のサイトで、みんなの本と一緒に買えるようになっている見込みです。
すごい、それはちょっと楽しみにしております。で、発売されるのが11月に入ってからですよね。
はい。
ということなので、次回のこのかけだしちゃん会で結果がわかるかなという感じですね。
進捗報告をさせていただきます。
はい、楽しみにしております。
それでは、今回のテーマはノーコードツールを使ってみたでしたが、かけだしちゃんいかがでしたか?
はい。本の締め切りが生えているとはいえ、自分の諦めの速さといいますか、
初手でのつまずき具合に本当に申し訳なさでいっぱいでございます。
いい、でも最後までね。きっと今の時点ではそうだけど、次回お話しするときにはいろんなものが完成しているんでしょう。
進捗報告と結果
劇的ビフォーアフターを目指します。
楽しみにしております。
また上がっちゃったよ。
技術書店行かれる方いらっしゃいましたら、ぜひそちらの方もチェックしてみてください。
お待ちしております。
さて、この番組では感想や質問、リクエストなどお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
XではカタカナでハッシュタグWebカフェをつけてポストしてください。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech Academyは現役デザイナーからマンツーマンで学ぶことができるスクールです。
キャンペーンコードをお申し込みの際の微項で入力するとTech Academyの講座を2万円引きで受講できます。
キャンペーンコードはWebカフェ、小文字のアルファベットでWEBCAFEです。
概要欄のリンクからぜひチェックしてみてください。
またお会いしましょう。サブクレーターボックスマナと賭け出しちゃんでした。
