00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ
WebデザイナーでWebクリエイターボックスを運営しているManaです。
Web制作を勉強中のかけだしちゃんです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
前回と今回は、3月1日に私の執筆した書籍、一冊で全て身につくJavaScript入門講座が発売になったということで特別回です。
今回のテーマは、WebデザイナーのJavaScriptとの付き合い方です。
ゲストには前回に引き続き、SBクリエイティブ企画編集の鈴木優太さんにお越しいただきます。
かけだしちゃんはどんなことを話したいですか?
編集者さんが来られているということで、もうこれはかけだしちゃんの知らない世界と思うので、この辺りをもっと聞いてみたいんですけれども、
今回はWebデザイナーのJavaScriptとの付き合い方ということで、
マナさんが執筆された一冊で全て身につくJavaScript入門講座に触れつつ、いろいろとその辺りについても聞けたらなと思ってます。
そうですね。JavaScriptについても一生懸命お話ししていきましょう。
それではゲストをご紹介します。鈴木さん、簡単に自己紹介をお願いします。
こんにちは。SBクリエイティブという出版社で編集をしております。鈴木と申します。どうぞよろしくお願いいたします。
今回もよろしくお願いします。
お願いします。
お願いします。
まず、そもそもこの本を書こうとした経緯についてですね。鈴木さん、なんでこうなったんでしたっけ?
一冊目の一冊で全て身につくHTML&CSSとウェブデザイン入門講座の完行した後くらいからすぐに次どうするということは話としてあったと思うんですけども、
読者の学習難易度のことも考えて、JavaScriptとワードプレスがあったんですけど、先にワードプレスを出して、その次はJavaScriptみたいなことを考えたと思います。
JavaScriptの本はついに出せたなという。
そうですね。結構早い段階。もう3年くらい前からですっけ。次どうする?次どうする?みたいな。
私は終わらないんだなって思いながら。私はずっと書くんだなって心の中で思いながら。
ありがとうございます。
次はワードプレス。ワードプレス終わって、JavaScriptという感じでしたね。
03:03
他の読者の方からも、JavaScriptは出ないんですか?みたいなお問い合わせもいただいていたので、ついにという感じですね。
はい。
この本、どんな方にお勧めというのはありますか?
HTMLとCSSを学んだ方というのはあるかと思います。
そうですね。これまでの流れで書籍の執筆という形になったので、基本的なHTMLとかCSSが理解している方、その上で次の目標としてJavaScriptに挑戦したいとか、
あと1回やってみたけど挫折しちゃったという方に向けて書いてみました。
ウェブサイトに主に動きをつけたいとか、そういったウェブデザイナー目線で書いておりますので、そういった方にお勧めです。
はい。
特に力を入れたポイントで言うと、やっぱり今言ったみたいにHTML、CSSがベースになっているんですが、
ちょっとHTML、CSSに比べて難易度が上がってくるかなと思いますので、なるべく優しく読めるようにという形で書いていきました。
あとはサンプルのダウンロードの手間だと考える方もいらっしゃるので、QRコードでもすぐ見れるようにしたというのもポイントですかね。
素晴らしいですね。
はい。
掛け出しちゃんにもちょっとお話を聞いてみたいと思いまして、先ほどその本をお見せしたんですが、パーッと見た感じ、どんなイメージでした?
まだ何もわからないです。
ですよね。パーッと見ただけですもんね。
というのも実際に手を動かしながらやっていきましょうという流れの本になっているので、最初の本は解説があって、
その2章、3章くらいからは実際にコードを書きながらやっていきましょうという形になるので、最初の本はパーッと読んでもらってという感じですね。
パーッと見てちょっと難しそうな感じでしたかね。
そうですね。そもそもJQueryもHTML、CSSとは考え方が違うプログラミングですよね、JQueryも。
そうですね。JQueryはJavaScriptのライブラリーになるので。
はい。
そのJQueryでわーってなっている、今このJavaScriptにどう向かい合っていったらいいのかもわからない、まだ苦手意識はあるんですけれども、
テックアカデミーでJQueryを学んで、マナさんの本でJavaScriptも学んで、和解できたらなと思っております。
争ってたんですか。
争ってないです。一方的に怯えているだけです。
そう、JavaScript側は別に攻撃しようとはしてないんで、大丈夫ですよ。
そうですね。
そうですね。私も最初の段階からJavaScriptの勉強はしていたので、苦手意識というよりは、なんでCSSでもアニメーションできるのに、わざわざJavaScriptを使わなくてよくないみたいなところはあったんですが、
06:01
やっぱりクリックしたらどうなるとか、読み込んだらこうなるみたいなイベントって呼ばれる動作のきっかけになるものとかはJavaScriptが必須になりますので、
実現したいことを明確にしてから学び始めていくといいかなと思いますね。
はい。
鈴木さんもJavaScriptを勉強したことがあるんですよね。
はい。僕も昔JavaScriptの学習をしていたことあるんですけど、やっぱりプログラミングのところが難しくて、挫折したってところはあると思いますね。
どういうところで挫折したか覚えてます?
いや、文法を覚えて、どう使うんだっていうところはちょっとわかんなくて、動いた瞬間も感動があるんですよね。
だけどそれを実際に実装しようとすると、イメージがつかなくて、出してしまいましたね。
ですよね、ですよね。特に最初の方で勉強する1たす2は3みたいな、これどこで使うんやってなりますよね。
はい。
そういうのをなくそうと思って、この本ではなるべく利用するイメージが湧きやすいアニメーションだったりとか、バリデーションとかいうところをメインで勉強していく形にはしています。
今回の本で鈴木さんちょっと試してみたりしました?サンプル。
全部やったですね。
全部やったんですね。どうでした?
いや、わかりやすいんですよ。
よかったです。
あと面白いなって思いました。
本当ですか?苦手意識なくなりました?
まあ、そうですね。
まあ、なくなるそうです。
そうですね。ただ、このJavaScriptの人気が高まっているというのもあると思うんですが、書籍の動向とか見て、やっぱり人気が高まっているのはあるんですかね?
はい。高まってきていると思っております。やっぱり、昔はJavaScriptというとウェブのところを動かすというイメージが強かったんですけど、今はゲームとかアプリとか幅広く使われてきている人がいるので、需要が広くなっているというのがありますね。
あとはブラウザで確認できるというのもやっぱりお手軽感があって、プログラミングを最初に学ぶとか思う人にはちょうどいい言語なんじゃないかなと思っております。
そうですね。そこが本当にポイントだなと思っていて、書き出しちゃんも環境設定という単語がすごく苦手だと思うんですが、JavaScriptはそういうのは必要なくて、もうHTML、CSSの延長線で使えるものになるので、
そういった形では初心者さん大歓迎なプログラミング言語だと思います。
あとは書き出しの方の勉強方法とかも結構問題ではないですけど、どういうふうに勉強すればいいのかなというのは定期的に聞かれるポイント、質問ではあるんですね。
書き出しの方は私は読んでいるだけじゃなくて、とにかくコードを書いて試してみてねというふうに伝えているので、まさに鈴木さんが今おっしゃったみたいな感じで、やってみたら楽しかったという気づきがあるかなと思います。
書き出しちゃんは勉強方法とか何かありますか?
09:01
今のところまだ、私にはまだ早い。
今テックアカデミーで勉強している中で、それも実際に動いているところを確認しながら馴染んでいきましょうねというところだと思うので、そういった形で楽しさは身についてきましたかね。
そうですね。ちゃんとしたものがゼロから自分の力で作ったわけではないんですけれども、それっぽいサイドが作れてプレビューで表示されていて、課題を出してOKももらえてやりがいがあります。
よかったです。そのやりがいというのが本当に大事だと思いますので、ぜひこの本を手にした方とかいらっしゃったら、読むだけじゃなくて実際に書いていただきたいかなと思います。
はい。
カジュアルに始める転職活動にグリーンをご活用ください。
あとはそうですね、かけだしちゃんから逆に何か聞いてみたいこととかありますか?
そうですね。JQueryはJavaScriptのライブラリーというやつなんですよね。
はい、そうですね。
そのライブラリーもカルーセルでしたり、いろんな便利なライブラリーがありそうで、ウェブサイトを作るにあたってはもうJQueryで十分なんじゃないかなと私は思ってしまうんですけれども、実際の制作メンバーやお仕事ではどうなんでしょうか?
そうですね。JQueryでできることも本当にたくさんあるので、今おっしゃったみたいにカルーセルっていって画像がくるくる動くようなものだったりとか、簡単なアニメーションだったりとかですね、そういうのはJQueryで十分かなと思うんですが、カスタマイズに限界があったりとか、あとはもう数十ページ、数百ページみたいなすごく大きいサイトになってくるとちょっと動きが鈍くなるんじゃないかなという懸念点もあります。
それで、JQueryで一から書いていくというよりは、JavaScriptでも自分で最初から書いていった方が、より自分の作りたいものに近いものが実装しやすいのかなというのがあるので、JavaScriptが一からできた方がいいんじゃないのっていう形にはなっていますね。
わかりました。
ただ本当に1ページものの企画だったりLPだったりですね、そういったものだったらJQueryで十分対応できると思いますので、その辺は自分のやりやすいものでいいかなと思います。
JQuery慣れたら楽ですけどね。JavaScriptって聞いたらやっぱちょっと嫌いにしちゃいますかね。
12:05
そうですね。どなたかが作ってくれたものをお借りするではなくて、ゼロから自分で作るというイメージがあるので、とっつきにくさが3倍以上になります。
そうですね。そういった方はですね、この本だったら3章になるのかな。カラーピッカーで色を選択してカラーコードを表示させるというすごい簡単なツールを作るんですが、それだけだったら、一から作っている割にはあれ、できたみたいになると思いますので。
やりがいがありそうですね。
ぜひぜひやってみてください。
あとはそうですね、ウェブデザイナーに向けたもので言うと、アニメーションが本当にわかりやすいかなと思います。
CSSでもアニメーションってできるんですが、やっぱりクリックしたらこう動くとか、スクロールに合わせて動くとか、そういうのはすごくわかりやすいと思うので、見た目でわかりやすいものから入ってもらうといいかなと思います。
あとはウェブサイトを作る上でどういうふうに役に立つのというのも聞かれることがあるんですが、最近だったらリアクトとかビューというものを使って、JavaScriptベースでウェブサイトを作ることが多くなっています。
ウェブデザイナーにそこまでリアクト1から作ろうとか、そういうのは考えなくてもいいかなと思うんですが、JavaScriptベースで作られたウェブサイトにも対応できるように、基本的な知識があったほうが仕事が進めやすいかなと思います。
ささびさんどうですかね、ウェブサイトを作る上でこういうふうに役立つようというのはありますか。
はい、今回の本に書いてあるように役立つのは間違いないと思います。
あとは最近の売上投稿とか見ていると、Amazonの商品を買った人はこちらの商品も買われています。
レコメンド機能とかで、HTMLの本を買った人がJavaScriptの本を買われる方が多いので、やはりそういった連携というか需要の流れがあるんじゃないかなと思います。
なるほど、確かに見たことありますね。HTMLとか初心者向けのウェブサイト制作のものを見た後に確かに出てきますね。
JavaScriptを見た後にリアクトが出てきたりとか、一例の流れになっていますね。
よくロードマップみたいな感じで、初心者はこれを勉強しましょうという流れがレコメンド機能にも反映されていると。
確かにそうですね。あと何か気になることはありますか、かけだしちゃん。
それでは編集者の鈴木さんが来られているということで、前回の放送で持ち込みも来ているよとおっしゃっていたんですけども、
たぶん前回の放送を聞いて、自分も持ち込んでみようかなと思う方がおられるかもしれないんですけれども、
持ち込むにあたってこれは気にとめておいてほしいなとか、心がけて見てくれると受け取る側として助かるなといった何かポイントはありますか。
15:08
やはり読者のためになるかどうかというのは一番大事だと思いまして、書籍のパイというかメディアのパイがあって、ある一定以上の人数に達さないと、
やはり書籍の紙って印刷するのにコストがかかっちゃうんで、どうしても需要を見越してするっていうのがあるので、
読者層がこれぐらいのパイはいそうだなみたいなのをある程度見てもらえるとありがたいと思っています。
例えばHTMLとかってすごいみんな使われていると思うんですよね。
ただ、語言語とか言って、Google作った言語とかと、HTMLに比べるとやっぱりちっちゃい需要になっちゃうので、
価格を高くして本を作るのはできるんですけど、僕の優先順位としては低くなっちゃうので、
これの程度みんなが使っているな、その中で私ならこういった切り口で読者により優しくとか、
よりわかりやすくとか、より便利に使えるような企画が立てられるよみたいな打ち込みだと、
僕も感動しますし、読者も感動するんじゃないかなみたいなのはあると思います。
はい。俺の書きたいものを出すぞとか、そういうのも大事だけれども、
読者さんにより見ていただけるような題材切り口だったり、ぶっちゃけて言うと売れるような、
そういったところも考慮して企画書を作って送るといいかもという感じですね。
ありがとうございます。
かけだしちゃんの野望が、ちょっとダダ漏れてきてますけど、何か狙ってますね。
まずは企画書作り方でググるところから。
何かが始まるみたいですよ、これ。
まだハードルを上げないで。
ちなみにかけだしちゃんは今まで本を見て何か学んだっていうのはあったんですかね。
本を見て学んだ、そうですね。
すごい昔に趣味で好きなキャラクターの顔だけを書いていたりしていた時に、
パソコンで書き始めて、絵を書くソフトで、プロ並みの絵を書こうみたいな分厚い本を買って、
その通りにやってみたこともあったんですけれども、
そうですね、そもそも塗りはレイヤー分けされていて、
分かったつもりでも自分で書いた線画が下手すぎて、
その絵師さんの塗りが表現できないっていうのもありましたし、
あれ、このアイコンはどこにあるんだろうとか、
このレイヤーは何をやってるんだろうっていうのが一つ分からなくなると、
もうその塗りが再現できなくなって、その通路を探すのも諦めてしまうっていうのは結構ありました。
分かります。私も色の塗り方とか絵の書き方とか、本を見てiPadで書いてみたとかあるんですけど、
相場ならんやろみたいなとこありますよね。
ならないんですよね。
どこから出てきたこの色みたいな。
そうそう。
だから結局この書いた人が上手なんだなって諦めて心を閉ざしてしまうみたいな。
18:03
そうです。
なりますよね。分かります、分かります。そういう時はもう諦めてパタッと本を閉じちゃって。
そうですね。その時にもいっぺんなくしたやる気がなかなか戻らないんです。
分かります、分かります。
なるほど。
相場ならんやろってなりますよね。
はい。
突然出てきたこの綺麗な影みたいな。
そうそう。簡単でしょじゃないですよね。
そうなんですよ。そういった時、技術書と絵ってやっぱ違うと思っていて、絵っていうのはやっぱその書いた人の癖とかもあると思うので、
ちょっと正解がない分野だと思うんですが、技術書とかだったら何かこうエラーになったとか、エラーじゃなくても何かおかしくなったら絶対原因があるので、
そういったところは自分で探すなり誰かに聞くなりすれば解決しやすいかなと思うんですよね。
はい。
我々本を書いてても、やっぱ読者から直接質問が来たりとかもありますよね。
はい。
結構な頻度で。
結構来ますね。
そうですね。売れてる本は来るんです。
そうですね。私も鈴木さんに一回来て、編集者宛に質問が来て、それが私に来てっていう流れで、私が答えてとか。
どうしてもこれおかしいなっていうのがあったら、本の方を訂正したりっていうこともたまにはあったりするので、
何かどうしてもできるなって思ったら、思い切って質問していただけたら、編集者の方から返事が来たりもしますし、
あとは書いた人のSNSなりウェブサイトとかも確認できると思うので、そこからちょっとアクセスしてみてっていうのもありかなと思いますね。
はい。
結構イラストとか絵の本とかだったら、著者の方がイラストの書き方のその本の部分を動画で再現してたりとか。
そうなんですか。
そうなんですよ。結構あったり、3Dとかもそうですね。3Dのやり方とかでも動画でその同じものを作ってくれてたりするので、
著者のプロフィールを確認してみるっていうのもいいかもしれないですね。
はい。
ちなみに、SBクリエイティブさんでも有名な手の本みたいな書き方の本ありますよね。
はい。すごい売れてる本があります。
鏡高博さんが。
かっこいい手の。
かっこいい手の。
全力で教える手の書き方、圧倒的に心を揺さぶる作画流儀っていう本があります。
圧倒的に揺さぶられる。
かけ出し者もかっこいいポーズが決められるようになりますかね。
はい。大丈夫だと思います。
大丈夫だと思います。やってみましょう。
これは本当に売れてるので、私も知ってるくらいなので、たぶんつまずく方も少ないんじゃないかなと思います。
興味があったらぜひ読んでみてください。
今日のテーマはウェブデザイナーのJavaScriptとの付き合い方でしたが、かけ出しちゃんどうでしたか。
JavaScript。やっぱりJQueryでつまずいてる身としては、さらにつきにくいイメージ拭えないかなと思うんですけれども、
できることが格段に増える。自分で作りたいように作れる可能性があるということで、
21:05
自分のサイト、アニメーションや好きな動きをつけられるとしたらと、デザインを考えるとちょっとワクワクしてきますので、
立ち向かってみたいと思います。
はい、立ち向かっていきましょう。本当に怯えてる感じが伝わってくるんですが、大丈夫ですからね。
まずは3章までちょっと進めてみてくださいね。
からピッカーまで。
からピッカーまでやってみてください。
はい、じゃあ鈴木さんはどうでしたか。
ありがとうございます。楽しかったです。少しでも読者の参考になれたら嬉しいです。
今回一冊で全て身につくJavaScript入門講座という本を書いたんですが、本当にお話ししてる通り、
書き出しの方とか、ちょっと一回挫折しちゃったなという方でもわかるようにと願いを込めてですね、書いた本なので、
ぜひ興味のある方は手に取ってみてください。では鈴木さん、2回にわたりありがとうございました。
ありがとうございました。
さて、この番組では感想や質問、リクエストなどをお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
ツイッターではカタカナでハッシュタグウェブカフェをつけてツイートしてください。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech Academyはウェブデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからワンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。
Webクリエイターボックスのまなと
かけだしちゃんでした。
