1. ManaのWebクリエイターカフェ
  2. #136 Mana的Webデザインニュー..
2025-05-09 18:28

#136 Mana的Webデザインニュース5月号〜AIとの住み分けを考えよう〜

spotify apple_podcasts

<今回のメインテーマ記事>

書籍執筆しました!『CSSとJavaScriptで作る動くUIアイデアレシピ』

https://www.webcreatorbox.com/blog/wcb-book7

ウェブページやPDFから「ポッドキャスト風の掛け合い音声」をAI生成

https://japan.cnet.com/article/35232440/

AI時代にWebデザイナーがスキルを「見える化」する方法を考えてみた

https://www.webcreatorbox.com/blog/skill-visualization


<番組へのメッセージはこちらから>

https://bit.ly/manawebcafe

Xハッシュタグは「#ウェブカフェ


<トークテーマ>

・岡山のフルマラソンを無事完走!

・テックアカデミーの講師を卒業

・WordPress入門講座をアップデート

・『CSSとJavaScriptで作る動くUIアイデアレシピ』発売!

・AIへの指示の出し方について

・GoogleのNotebookLMについて

・実際に生成してみた音声

・AIが苦手なこと、自分にしかできないこと


<お便り紹介>

◆のの さん

・かけだしちゃんがきっかけで電子書籍マンガを作りました!

Web業界のクセつよ人物録

https://amzn.to/4kiUB4n


<ManaさんX>

@chibimana

<Webクリエイターボックス>

https://www.webcreatorbox.com

<『CSSとJavaScriptで作る動くUIアイデアレシピ』>

https://amzn.asia/d/ei0g7Wp

See Privacy Policy at https://art19.com/privacy and California Privacy Notice at https://art19.com/privacy#do-not-sell-my-info.

サマリー

今回のエピソードで、ManaはWebデザインニュース5月号について、近況報告や新刊の紹介、AIによるコーディングの現状、そしてGoogleの新サービスに焦点を当てています。特に、CSSとJavaScriptを使った新しい書籍がどのように役立つのかについて詳しく解説しています。このエピソードでは、AIの進化によるウェブデザイナーの役割の変化や、個々の経験の重要性についても語られています。また、リスナーからの体験談を通じて、ウェブ業界のあるあるネタにも触れています。

近況報告とマラソン
ManaのWebクリエイターカフェ。WebデザイナーでWebクリエイターボックスを運営しているManaです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、Mana的Webデザインニュース5月号です。
前回のMana的Webデザインニュースが3月号だったので、3月、4月、5月といろいろと話したいこともありますので、今日はたっぷりとお話ししていきたいと思います。
それではまず、私の近況について、3月、4月にあったことですかね、について話していきたいと思います。
まず前回お話しした中で予定としてたのが、岡山であったフルマラソンですね。
この大会出るよーっていうお話をしてて、その結果どうなったんやーっていう方ももしかしたらいらっしゃるかもしれないので、一応言っておきますと、無事完走しました。
42.195キロあったんですけど、5時間切ったのかな、4時間57分とか、なんかそこら辺でギリギリ5時間切るタイムで無事完走できました。
もう本当にこれまでの人生で一番辛かったですね。
フルマラソン完走したことある人もしかしたらいるかもしれないんですけど、あのーやっぱ大変なんですよ。
本当に全てのエネルギーが絞り取られてるというか、これをやったら、完走しちゃったら他のこと何でもできるなと思えるような、もうそれくらい過酷なものでした。
雪も降ってたので、吹雪の中走る、何してんだ私とか思いつつも、無事完走できました。
で、不思議だったのが翌日なんですね。もうその日のうち本当歩けなくて、もうボロボロだったんですけど、翌日はいくら食べてもお腹が空いてるっていう。
男子高校生もしかしてこんな感じなのかなってずっと思ってたんですけど、食事をお昼ご飯普通に食べました。
食べ終わった瞬間に、あ、お腹空いたっていう、これの繰り返しでしたね。もう翌日はずっとお腹空いてました。
そんな過酷なものでしたが、なんか不思議なことにもう一回やろうかなって思っちゃうんですね。不思議ですね。
もしかしたら今年も、今年来年どっかしらで走るかもしれないです。
新刊の紹介
続きまして、もう一つ大きい話題というか、私の中で大きいニュースの一つが、ずっと続けてたテックアカデミーのオンラインスクールの講師っていうのをやってたんですが、
それを3月かなで終わりになりまして、卒業という形になりました。
決して後ろ向きな理由ではないんですが、ちょっと次のステップ行こうかなと思ったりっていう感じですかね。
ただもう本当にいろんな生徒さんとお話しする機会がすごく貴重で、やっぱりずっと同じ業界にいると新人の人とか、何なら未経験の人と話す機会って本当にないんですね。
同僚はみんな経験者ですし、新しく入ってくる子とかも全くの未経験という人とは出会ってこなかったので、今から勉強しますっていう人とお話できて、
どういうところが分かりづらいかとか、どういうところでつまずくのかっていうのが見えてきた結果、いろんな書籍を、初心者向けの書籍を書かせていただくっていう流れにもなってきましたし、
私の書いた本、いろいろと本書いてきてるんですが、どれもやっぱり生徒さんの顔を思い浮かべながら書いたっていうのが思い出の一つとしてありまして、
この本書くとき、デザインが苦手なあの生徒さん担当してたなーとか、あの生徒さんがこう言ってたからこうねたしたんだよなーとか、そういうのも全部今でも覚えてますので、すごくいい機会だったなと思ってます。
あとは本の話があったので、その続きと言いますか、関連する話なんですが、ワードプレスの本、一冊ですべて身につくワードプレス入門講座という書籍を4,5年前に書いてたんですが、
やっぱり4,5年経つと画面だったり操作方法だったり結構変わってくるんですね。
なので、書いてというほどでもないが、画面のスクリーンショット画像がだいぶ違うぞということで、ページ数だったり書打て、話の流れとか全部そのままでスクリーンショット画像を変えたり、説明のテキストをちょっと変えたりという形で差し替えてます。
これがもう発売されておりますので、もし最新版欲しいなという方いらっしゃいましたら、一番最後のページめくってもらって、最新版かどうか確認して購入してみるといいと思います。
目印としては、ワードプレス新しいものはですね、帯が変わってます。真っ黄色のすごく目立つシリーズ50万部突破みたいなのを書いてる帯が新しいものなので、よかったらそれから手に取ってみてください。
次にまた本の話になっちゃうんですが、4月15日に新しい本が出版されました。
CSSとJavaScriptで作る動くUIアイデアレシピという書籍で、こちらがですね、タイトルの通りなんですが、CSSとJavaScriptをメインに動くアニメーションをつけていこうというようなものになってます。
なので全くの初心者の方に向けたものではないので、CSSの基礎とかJavaScriptの基礎っていうのは本当に最初の最初にサラーとあるかなないかなぐらいしかないので、全くの初心者の方は別の一冊ですべて身につくHTML&CSSとWebデザイン入門講座というのがあるので、そちら読んでもらうとして、そういった基礎が終わった後の方に読んでほしい一冊です。
基礎を学んでその後どうしようみたいな方もいらっしゃると思うので、そういった方はやっぱりアニメーションって面白いんですよね。動くと動いたってなりますし、ちゃんと機能したってなると達成感にもつながると思うので、そういった方に向けて書いてます。
あとは、昔コーディングしてたけど最新のアニメーションよくわからんなとか、CSS結構変わってますので、もう一回学び直したいなっていう方にはおすすめになってますので、よかったら読んでみてください。
最近の話題で言うと、AIがいろいろコードを書いてくれるじゃないかと思われがちなんですが、意外と全くのゼロから作るっていうのがまだ難しいみたいで、AIもこんなコードを書いてくださいと、結構指示を明確にしないとちゃんとしたコードを書いてくれないってことはよくあります。
そんな方には、CSSやJavaScriptでまず何ができるのかっていうのを把握してないと、AIに聞くことも意見をもらうこともできないなって気づいたんですね。
なので、この新しい書籍1から順に読んでいくっていうのはもちろんいいんですが、パラパラめくりながら、こんなのができるんだな、あんなのができるんだなっていうのを知っておくだけで、AIに指示もしやすくなると思いますし、AIじゃなくても自分で書きたいなってなった時も、これ似たようなのがこの本書いてたなってあるだけで、やっぱり幅が広がっていくと思いますので、そういった方にもぜひ読んでもらいたいなと思います。
もうすでに発売してますので、よかったら書店だったりネットだったりで読んでみてください。
AIとGoogleの新サービス
最後に最近注目のニュースについて話してみましょう。
この収録する前日ぐらいに発表があって、実際試してみてすごいと思ったのが、Googleがですね、ノートブックLMというもので、ポッドキャスト風の音声を生成してくれますよっていうようなサービスをリリースしました。
リリース自体は実は英語版では先行してあったんですが、日本語に対応したのが、もう本当にこの数日前というような形になってます。
これどういうものかというと、ソースとなる何かしらのドキュメントだったりPDF、あとウェブサイト、テキストデータ、YouTube動画とかベースとなるものを最初投げておいて、それについて解説してくれるとか、それをベースに男女が話をして掛け合いながらトークを繰り広げるというような音声を自動で作ってくれるんですね。
これまでのゆっくり解説みたいなのがあったと思うんですが、そういうのを台本を作らず勝手に作ってくれるというような形になってます。
いろいろ細かい指定もしてくれるんですが、特に設定しなければ男女のホストがそのテーマに対するトークを掛け合う形でやってくれるというもので、だいたいそのベースとなるソースの大きさにもよると思うんですが、3分、4分、5分ぐらいで一つのファイルが完成します。
そのファイルが5分程度のワーブファイル、音声ファイルがダウンロードできるようになってます。
で、ちょっと1回ですね、私の方で、私の書いたブログの記事、先ほど紹介した新刊のCSSとJavaScriptで作る動くUIアイデアレシピという本の紹介記事を、ブログ記事を書いたんですが、それをベースにポッドキャストにしてもらいました。ちょっと聞いてみてください。
さて、今回はですね、Webクリエーターボックスというブログに載っていた新しい本についてです。CSSとJavaScriptで作る動くUIアイデアレシピ。
ああ、その本見ました。
HTML、CSS、JavaScriptの基本は分かったと。で、次に動きのあるウェブページ作りたいなって思ってるあなた。そんな時に、なんかこう役立ちそうな一冊みたいですね。
ええ。著者はこれまでどちらかというと入門書を多く書いてこられた方で、今回はその次のステップ、学んだ基礎をどうやって実際のUIデザインに生かすかみたいな。そこに焦点を当ててる感じですね。発売は2025年の4月15日予定だそうです。
なるほど、もうすぐですね。最近ウェブサイトって動くのが当たり前みたいになってきてますもんね。
そうですよね。だからこういう実践的なレシピ集みたいなのは需要があるんでしょうね。
確かに。静的なページだけだとちょっと物足りないというか、記事によるとこの本は特にどんな人に読んでほしいって書かれてますか?
えっとですね、まずHTML、CSS、JavaScriptの基礎学習が終わった方。で、次に何しようかなと。あとは動きのあるページ作ってみたいって方とか。
ふむふむ。
それから既存のサイトをもうちょっと良くしたい、アレンジしたいみたいな方。あとはもちろんウェブデザイナーとしてスキルアップしたいと考えてる方ですね。
なるほどな。基礎は分かってるんだけど、いざ自分でページに組み込もうとすると、あれ?どうやるんだっけ?って手が止まるみたいな。
そうそう、それです。まさにその段階の人に響くんじゃないかと。
AIとの住み分け
というような形でですね、すごく自然ですよね。なんかえっとーとかあのーとか普通に入ってますし、タイミング、話をする間とかも本当に自然な会話な感じですし、ちょっとなんか外国人風のアクセントがあるとは思うんですが、日本語が得意な外国人、こういう風に話すよねーっていうのもありますし、すごく自然でしたね。
これは一部を聞いてもらったんですが、実際のファイルは5、6分くらいにまとまってます。で、一応権利的なところを確認すると、そのベースとなるソースが著作権違反になってるものは共有しないでね、みたいな風に書いてましたので、そこだけ注意してもらいつつ、一般公開しなければ自由に使ってもいいのかなと思いますので、よかったら試してみてください。
これ、もう本当に誰もが思いつくような単純な解説っていうのが、あまり必要なくなってくるんじゃないかなと。で、逆に言うと、その人の身のある会話というか、人の会話の価値っていうのが逆に高まってくるのかなとも思いました。
それでAIに関することなんですが、今言った通り、AIにできること、単純な作業だったり誰でもできそうなことっていうのはもうAIに任せちゃってもいいのかなって思うんですが、自分にしかできない、人間にしかできないこともあると思うので、そういう経験が重要になってくるなと思って書いたブログ記事があります。
AI時代にウェブデザイナーがスキルを見える化する方法を考えてみたという記事です。
結局、AIが苦手な部分、理解を深めるとか、広い視野を持つことが大事だよねって言われがちなんですけど、それは結局どうすればいいのかとか、その経験を他人に説明するときって、数値化もしづらいですし、成長したかどうか分かりづらいよねっていうことを書いてます。
どういうふうにすれば他人に自分の経験値、そういうのを伝えられるか、そういうことを書いてますので、こちらも併せて読んでみてください。
それではここでリスナーさんからのお便りを紹介していきたいと思います。ペンネームののさんからのお便りです。
マナさんこんにちは。こんにちは。
ポッドキャストいつも楽しく聞いています。
実は賭け出しちゃんがご自身の体験談を漫画にしているのを見て、自分も書いてみたいと思い、ウェブ業界の苦節用人物録という電子書籍漫画を作りました。
ちなみに出身地が賭け出しちゃんと一緒で勝手に親近感湧いてます。
マナさんの番組では様々なゲストの方の経験談がたくさん語られていて、いつも共感しながら聞いています。
私の漫画もそんなウェブ業界のあるあるネタを書いたものなので、番組の話のネタとしても使いやすいかなと思い、今回お便りを送らせていただきました。
もし興味を持っていただけたらぜひ読んでみてください。
リンクが概要欄に貼ってあると思いますので、そちら併せて読んでみてください。
続きですね、SNSでも漫画を投稿しているのですが、特に1巻のIT業界で無双するDTPデザイナーと2巻の意外とまともな人が多い触手は?が反響が大きかったです。
また海外のプログラマーの話も書いているので、海外でお仕事されていたマナさんにとって楽しめる内容になっていたらいいなと思います。
読んでいただけるだけでも嬉しいですが、もし番組で取り上げていただけたら、こんな人いるいるとか、こんな人絶対いないみたいな感じで盛り上がってもらえるかもなんて思っています。
お忙しいと思いますが、どうぞよろしくお願いします。
ということでですね、ありがとうございます。
かけだしちゃんと意外なつながりがあったり、かけだしちゃんきっかけで漫画を書いてみたってね、かけだしちゃんに伝えておかないといけないですね、この話は。
はい、で、読んでみました。1から3巻出てたのかな?
はい、全部読んでみて、確かにいるよなーっていう人もいれば、私の周りにはいないけど聞いたことあるなーっていうような方もいらっしゃったりして、
例えば2巻だったかな?にあったエンジニアとデザイナーの間に入って円滑にしていくとか、コーディングに回って全員をまとめてみたりとか、
そういうちょうど中間な場所にいる方って結構たくさんいらっしゃって、私はどちらかというとゴリゴリコーディングしていったりとかデザインに集中したりっていう形だったんですが、
やっぱり周りでサポートしてくれる方もいらっしゃったので、そういう視点で見れるっていうのも面白いなと思いましたね。
あとデザインあんまりしてなくてもデザイナーって名刺に書かれているままとか、そういうのも確かにあるなと思いましたね。
私もずっとウェブデザイナーって書いてたんですけど、ワードプレスのプラグインを作ってたあたりで、あれこれデザイナーじゃないなって思いまして、
私の肩書きをウェブデザイナープラスデベロッパーっていう風に書いたのがそのタイミングでしたね。
デザイナーはプラグイン作らんだろうと思いながら書いたのを覚えてますね。
あとウェディング周りのデザインを自分でやっちゃうっていう招待状だったりとか、そういうグッズ周りですよね。
そういうのも友人のデザイナーの方とかは自分でやっちゃうよって方多くいらっしゃいましたね。
この漫画の中ではウェディングの招待状だけじゃなくてウェブサイトを作ってたのかな。
結婚しますとか結婚しましたっていう報告ウェブサイトを作りましたみたいな話があったんですが、
実際にそういうのを作ってたウェブデザイナーの友人もいましたので、こういうのは確かにあるなって思いながら読んでいました。
皆さんもこういうあるあるっていうのは出会えると思いますので、よかったらこちらも読んでみてください。
では野野さんお便りありがとうございました。
今日のテーマはまな的ウェブデザインニュース5月号でしたが、2ヶ月3ヶ月くらい開くとやっぱり話すことたくさんありますね。
結構AI周り多かったんですが、AIの進化が本当1ヶ月開くと全然違ってくるので、こういう話が中心になっちゃうかなと思います。
皆さんの周りでもいろんなツールの変化があったりとか仕事の仕方自体が変わってきてるかなと思いますので、その辺もお便りでお知らせください。
さてこの番組では感想や質問リクエストなどお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
Xではカタカナでハッシュタグウェブカフェをつけてポストしてください。
そしてAppleポッドキャストやSpotifyのポッドキャストではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
またお会いしましょう。
Webクリエイターボックスまなでした。
18:28

コメント

スクロール