00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ。WebデザイナーでWebクリエイターBOXを運営しているManaです。
Web製作を勉強中の駆け出しちゃんです。
この番組では、Webコンテンツ製作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、HTML、CSSとコーディングスキルです。
HTMLとCSS、結構長年勉強してきたのかなと思うんですが、駆け出しちゃん、どんな印象でしょうか?
なんだかんだで、駆け出しの時よりかはちょっと長く触ってはきたのかなと思うんですけれども、今でも全然苦手です。
全然苦手。そんなHTML、CSSのコーディング、やっていくと楽しくなるはずなので、そんなお話と、
あとはノーコードについても今日はちょっとお話ししていきたいと思います。
まずは、最近はそんなHTMLやCSSがわからなくても、ウェブサイトが作れるサービスも増えてきました。
歴史を遡ると、1990年代にホームページビルダーというソフトがあって、現在では数多くのサービスが国内外に存在します。
ノーコードなんて呼ばれてるんですが、駆け出しちゃんはノーコードについてはどれくらい知識がありますか?
そうですね。どういったものがあるのかとか、何ができるのかとか、そういったことはあまりわかんないんですけれども、
LPデザイナーをやっていた頃に、Pera1というツールを使ったことがあります。サービスですかね。
そうですね。サービスありますね。
ただ、かなり前の話なので、今回Pera1でこれができなかったって言うかもしれないんですけれども、
それがもう最近ではできることになっている可能性があるので、そのあたりはご容赦ください。
そうですね。ちょっと前までできなかったことが1ヶ月経ったら、新しい機能追加っていうのが。
アップデートが早いですよね。
そうですよね。それがいいとこであり、ついていけなくなっちゃうっていう方も、もしかしたらいるかもしれないですよね。
それでは、Pera1を使ってどんなことをされたんですか?
はい。ランディングページを作りまして、もともとはHTML、CSSで組んだLPをご提供していたんですけれども、
そのクライアントさんの方から、文章や画像を自分で変更したいので、Pera1というサービスがあるこれを使ってみてほしいということで、
03:06
Pera1を触ることになりました。ただ、コーディング費用がかからないということで、金額はかなり安くなってしまいました。
ランディングページ1本1万円になりました。
ただ、文章や画像を変更したいというニーズは確かにあるなと思いまして、Pera1を使いこなせるようになれば、私にも新しい需要が生まれるんじゃないかなとかなり張り切ってしまいまして、
自分でも練習用として有料プランを登録して、あとは昔HTML、CSSを使って作っていた架空のサイトをPera1に移植したり、
HTMLの埋め込みも試しにやってみたりして準備していたんですけれども、結局クライアントさんの求めるデザインがそもそもかなりシンプルだったようで、
基本機能で事足りてしまっていました。有料プランの日数はまだ実は残っています。
そうかそうか。結構1年プランとかで登録されていた。
そうですね。かなり割引率が高く見えちゃって思い切ってしまいました。
ありますね。ありますよね。でも練習用として長く使ってみるというのもいいかもしれないですけど、最初は無料プランでも十分かもしれないですね。
そうですね。
確かに今言ったみたいに濃厚度、結構思っていたより使っていると思ったんですけど、使いこなせている感じが今聞く感じだったら伝わってきたんですが、
そうなんですよね。クライアントさん側のほうが結構求めているものがすごくシンプルで、
こっちはHTMLとかCSSあとJavaScriptを使ってゴリゴリ使っていくぜみたいな感じで思っていたら、いやそこまで求めてないですみたいなお客さん結構いるんですよね。
本当に住所と電話番号と営業している日が分かって写真がちょっとあればいいよぐらいのすごくシンプルな要求の時もあるので、
そんな時は本当に濃厚度でウェブサイトを作って、スピード感を出してささっと公開するというのも一つの手なんですよね。
それが今濃厚度が注目されている理由の一つかなと思っていて、本当にサービスを作りました、このプロダクトを作りました、すぐに世に出したいですというお客さんもいるので、
そういった時は濃厚度を使ってひとまず世に出すというのが大事かもしれないですね。濃厚度を使ってみて思ったメリットやデメリットって何かありましたか?
そうですね。メリットはHTMLCSSの時よりはかなり早く作ることができまして、そのクライアントさんも早くできるからということで、その後何サービスかLPのご依頼をいただいてました。安かったからかもしれないですけれども。
06:08
でも本当に安いというのもメリットの一つなんですね。顧客側からしたらメリットの一つになると思うので、それはすごくあげられますね。デメリットで言うとやっぱり制限があるというのが一番あるかなと思っていて、先ほど言った通りですね、この時はできなかったけどその後でできるようになりましたということもありますし、今でもずっとできないようなこともありますし、
そういったところをちゃんと理解していないと使い切れないかもしれないですよね。あと一つサービス停止するリスクっていうのも結構あって、今までそんなウェブサービスの停止で困ったこととかはなかったですか?
今まではなかったです。
最近だったらツイッターがですね、某イーローさんが、あれこれあるみたいで、ツイッター関連のサービスとかがどんどん停止になってきているというのが話題になっています。
そういうサービスに依存したサービスとか、サービスに依存したウェブサイトっていうのは結構そういったデメリットが大きくて、そういったところも考えておかないといけないかもしれないですね。
じゃあそんな今注目されているノーコードなんですけど、ノーコードツールが使えるならHTMLやCSSのコーディングの勉強はいらないじゃないかっていう声は結構昔からあるんですね。その辺はどう思います?
まだ必要じゃないかなって思ってます。やはりデザイン面とか機能面でできることに制限がありまして、その制限というのがクライアントさんからのこれなら簡単にできるよね、こちらもできそうって思っていたことが意外とできなかったりして、時間がかかってしまうこともあると思うので。
おそらくペライチさんにはHTML、CSS埋め込みみたいな機能がついてるんですけれども、たぶん今もついてると思うんですけれども、やはりそれがついているということは需要があるからついてるんだろうなと思うので、不要かもしれないんですけれども、コーディングの勉強もしてHTML、CSSの埋め込みを使いこなせることができれば、
ただノーコードが使えますよりは、よりできることも増えて、自分のアピールポイントも増えていくと思うので、まだ不要ではないと思います。
そうですね、その当時ですね、細かいカスタマイズしようと思ったら、またやっぱり人の手で一つ一つカスタマイズしていく必要があるので、それができないとなると、やっぱり用意されたテンプレートしかできないんですね。できる範囲がやっぱり限られてくるので、新しいものを自分たちの手で作っていこうぜっていうような考えなんであれば、ある程度はコーディングができていないと難しいかもしれないですね。
09:13
IT・インターネット業界に強い転職アプリGreenは、今話題のテック企業、プロダクト開発、DX案件など、Greenだけの良質な求人を数多く揃えています。
正式応募前に、企業の中の人とカジュアル面談ができるので、仕事内容やメンバーのことをしっかり理解した後に先行に進めます。
カジュアルに始める転職活動にGreenをご活用ください。
エディターの予測変化に頼りきりだったのが、今回メンタリングでバレてしまいました。
バレてしまったというのが、私はメンタリングで時間が余った時に練習問題をやってもらっています。
そこでコーディングの練習問題をやってもらった時に、ハイフンをアンダースコアにしちゃってたりとか、スペルミスがあったりとか、そういう小さいミスがちょこちょこあったんでしたね。
そういったミスは本当に最初のうちは本当に多くて、私もセミコロン一つ足りないっていうので、エラーがわからなくて見つけられなくて、もう1日ぐらい潰したことがあるんですね。
自分で本当に見つけづらいと思うので、そこで紹介したのがEMMETという省略記法です。
例えば、CSSでMって押してTABキーを押すとマージンって出てくるとか、HTMLだったらDIVってやったら閉じるDIVまで出てくるとか、そういう省略した書き方ができるっていうものなんですね。
これをちょっと紹介した時、どう思いました?
すごいびっくりしました。
びっくりしました。
こんな機能あったんだって、全然知らなかったです。
そうなんですよね。これが昔はプラグインみたいな形で、なんかこう自分でツールに付け加えないとできなかったものなんですが、便利じゃんってなって、だいたい今どのエディターでも標準でついてるような機能なんですね。
あまり知られてない、すごく便利なんですけど、初学者の方にあまり知られてないかもしれないというようなもので、これを使うと本当に効率よくコーディングできますし、先ほど言った通りミスの防止にもつながります。
で、使ってみて、あれからどうなんですか?紹介してから使ってみました?
12:03
何回かですね。まだ見ながらなので、逆にすごくたどたどしくなってしまって。
最初は省略元を覚えなきゃいけないとか、ああいうのがありますからね。最初のうちは当てずっぽうでもBって押してタブ押してみるとか、Pって押してタブ押してみるとパディングって出るんですけど、なんとなく最初の頭文字でタブキー押してみると結構出てきますので、もしスペルわかんなくなったらやってみるといいですね。
そうやって記述ミスした時、先ほど私が言ったみたいに自分で気づきにくいと思うんですね。なんかこううまくいかないなっていう時、記述ミスした時ってどういうふうに解決してました?
気合ですかね。
気合。もう一つ一つ見直しながらっていう感じで。
はい。ディブの閉じるディブが1個多かったりとかそういったものであればインデントを整理して1個ずつディブをちょいちょいクリックして対応するディブが色が変わったり。何らかの形でわかるようになってるじゃないですか。
なってますね。
それを見ながらなんですけれども、スペルミスとセミコロンは気合で見てました。エラー表示で何行目って出ていて、そこでわかればいいんですけれども、結構何行目と言っておきながら他のところに原因があることもありますよね。
よくあるのが一つ上の行とかね。ありますね。そういう時は見つけづらいですよね。
目視で。
目視で。そうなりますよね。結構便利なツール、デベロッパーツールとかですね。
クロームが標準でつけてるデベロッパーツールとかだったら、スペルミスがあったら三角のビックリマークがついて、これスペル違うよっていう風に出てくるので、そういうツールを頼りにするとか、エディターの機能を使うとか、それが一番手っ取り早いかなとは思いますね。
あと、HTMLの文法エラーをチェックできるサイト。テキストにも書いてたと思うんですが覚えてますか。
はい。
一応、HTMLは文法っていうのがあって、それがもう著しく違うとかいうのはエラーとして出てきますので、そういうのを確認するっていうのはまず大事ですね。
そうですね。ご指摘いただいた例のミスはエディター上じゃ出なかったので。
出なかった。あれ何でしたっけ?ディブが多かったとかでしたっけ?
そうですね。確か閉じるディブが一つ多かったです。
あ、そうだそうだそうだ。それね、インデントもね、ちゃんとしてないとわかりづらいですしね。
インデントはミスがあったらインデントで修正するっていうのではなくて、最初からつけておくって意識しておくとミスが少なく済むかもしれないですね。
15:02
はい。
はい。気をつけましょう。
はい。でも一つミスをしたら今度は同じミスはなかなかしづらくなってくると思うので、ちょっとずつ慣れていくといいですね。
だといいんですけれども。
はい。大丈夫です大丈夫です。ちょっとずつやっていきましょう。
はい。
はい。で、今ちょっとお話題にも出たエディターなんですが、いつも何のエディター使ってます?
Tech AcademyさんではCloud9?
はい。そうですね。AmazonのAWSっていうとこから出してるCloud9っていうオンラインで使えるエディターですね。
はい。これがメンターと共有するために必要なので、ローカルで使えるものではなくて、オンライン上で共有できるような形で使っているものなんですが、
普段ローカルでインストールして使っているものとかもありますか?
VSコードです。読み方合ってますかね?VSコードで。
合ってます合ってます。ビジュアルスタジオコードっていうのが正しい、正しいというか正式名称で、それ省略してVSコードって呼ばれてるマイクロソフト社から出ているエディターですね。
これを使い始めたのって何か理由があったんですか?
はい。訓練校ではAtomを使用していたんですけれども、友人に勧められて乗り換えました。
機能を使いこなせているわけではもちろんないので、違いはよくわからなかったんですけれども、特に不満なく使えていると思います。
予測変換やタブの保管、拡張機能での保存をするたびにインデントが切断されるやつ、あれには助けられてます。
なるほど、それがあったからクラウド内の方ではインデントの癖がなかった感じなんですね。
なるほど、そう繋がるわけだ。分かりました。
今出てきたAtomっていうのがGitHubが出していたもので開発が終了しちゃったんですね。
そうなんですよ。
なので、昔はAtomとか他にもいろいろブラケットとかいろいろ無料で使えるものがあったんですが、今無料で使えるものって多分VSコード一択に近いかなって感じで。
他にも無料で使えるものあるんですけど初期設定がちょっと難しかったりとかいうので、初心者向けで言うと本当にVSコードだけかなっていうくらいに絞られてます。
なので逆に言うと選びやすいですね。
そうですね。
あれもこれもあるけどどれにしようっていうのがないので、今から勉強しようという方はVSコードで大丈夫です。
で、選ぶポイント、違いがよく分からないっていうのはもちろんそうで、最近本当にどのエディターも高機能で拡張もできますし、どれ使っても正直いいかなと思うんですけど。
使いやすさで言うと、例えば日本語で表記ができるかとか表示できるかとか、他の機能がカスタマイズ性がどうかとか、そういうところで見極めるといいかなと思います。
18:11
で、有料のものを入れるとアドビから出ているドリームウィーバーとか、あとはウェブストームとかサブライムテキストとか、この辺が一般的というかよく知られているものですかね。
たくさんあるんですね。
たくさんあります。これもね。
使ってみたら違いが分かってくるかなと思うんですが、どれも無料で最初何ヶ月、1ヶ月使えるとかいうのはあるので、気になったら使ってみればいいですね。
で、私は今まで昔から歴史をたどると本当にいろいろ乗り換えてきて、ドリームウィーバーからパニックコーダーっていう昔あったもの。
パニックコーダー、ドリームウィーバーに戻り、アトムに行き、VSコードにたどり着くっていう結構いろいろやってきた感じです。
まあ、VSコードでいいかなっていう感じですので、よかったら使ってみてください。
今日のテーマはHTML、CSSとコーディングスキルでしたが、いかがでしたか?
ノーコードがやっぱり気になってしまいましたね。
最近ですとイラストだともうAIの進化がすごいですし、これからどうなってしまうんだろうなっていう気持ちはあります。
私はコーディングあまり得意ではないので、勉強しなくて済むならっていう下心もすごいあります。
ただですね、今のテックアカデミーさんで学んでいる知識もそうなんですけれども、カリキュラムと講座を読んで、自分で調べていく、自分で手を動かしていく。
そうやって学んで、コード、HTML、CSSをうまく組み立てていく力とか、そういったところもコーディング以外でもきっと使えるはずなので、養っていきたいと思ってます。
素晴らしい。いいですね。
そうなんですよ。文字の色を変えれるかどうかが大事なんじゃなくて、どこがどういうふうにつながって何を指定したらこうなるっていうその一連の流れとか考え方っていうのが大事なのであって、
そういう細かいところは今後AIとかノーコードとかでもできる範囲かもしれないんですが、その最初の組み立てっていうのはすごく大切なので、これからもそういう細かいところまで考えていきましょう。
さて、この番組では感想や質問、リクエストなどお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
Twitterではカタカナでハッシュタグウェブカフェをつけてツイートしてください。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いていただけると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
21:02
Tech Academyはウェブデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。
Webクリエイターボックスまなと
かけだしちゃんでした。