00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ。
WebデザイナーでWebクリエイターBOXを運営しているManaです。
Web製作を勉強中の駆け出しちゃんです。
この番組では、Webコンテンツ製作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、プログラミングスクール入学3ヶ月目の現在地です。
目標に向かってひたすら進み続けるだけじゃなくて、
時々これまでやってきたことを振り返って、
現在地を確認することで足りないスキルを補ったり、
今後学ぶことの軌道修正ができるかと思いますので、
このタイミングで少しこれまでのことを振り返っていこうと思います。
Tech Academyでの学びを振り返る回ですが、いかがでしょうか。
Tech Academyさんの受講を始めてから早いもので3ヶ月目になりまして、
残り日数が半分くらいにいつの間にかなってしまっていました。
カリキュラムも本格的といいますか、今まで学んできたことを
全部活かして一つのサイトを作ってください、みたいになってまして、
難易度がすごく上がったような雰囲気があります。
実際上がってますね。私毎日メソメソしながらコーディングをやっています。
山場が近づいてきているなという感じがしますね。
そうですね。今一番しんどいところに来ているかなと思いますが、
このままの気持ちのまま進み続けるよりも、
ちょっと一旦足を止めて休憩を挟みながらやっていきましょう。
ではまずは最初にお話ししたデザインのところから、
バナー制作というところでこのポッドキャストでもお話をしたんですが、
大切なポイントを思い出していきましょうか。
どんなポイントがありましたっけ?
文字とかにメリハリをつけて、より主張したいところは目立たせていくとか、
その文字はなるべく画像にかぶらないようにするとか、
私がやっちゃったのは文字の色が背景に馴染んでいたので、
そういったことが起こっていないか、一旦モノクロにしてチェックするなどでしょうか。
そうですね、その通りです。
まずは目立たせたいものはメリハリをつけてしっかり目立たせていくというものなんですが、
目立たせ方というのもいろいろあって、
周りのものよりとにかく派手にするというのではなくて、
03:01
逆に周りのものをシンプルにしていくことで主張するというやり方もありますし、
あとは画像にかぶらせないとか、色が馴染みすぎていないか、
この辺は読みやすいかどうかというのがポイントですね。
ちゃんと見えるようになっているか、この辺がチェックしましょうというところです。
今お話に出たモノクロチェックというのが、ある程度デザインができたところで、
作っているバナーをモノクロにした状態でちゃんと見えるかどうか、
バランスが整っているか、この辺をチェックしながら進めていきたいと思います。
チェックしましょうというお話でしたね。
この辺使ってみたりしました?
試してみたのが、モノクロにして確認することですね。
簡単にできて、意外とカラーがついていると分かるやろうと思うところでも、
モノクロにするとちょっと馴染んでいるような気がしまして、
これは効果があるかなと思っています。
よかったです、よかったです。
そうですね、モノクロにする視覚的な問題があって、ちゃんと見えないという方も中にはいらっしゃいますし、
今自分がいるところが暗くて、もともと目が見える見えないとかは関係なく、
ただただ今いる状況が見えづらい状況にあるとか、そういうこともありますので、
どんな状況でもちゃんと見えるようにチェックするというのは大切ですね。
はい、あとはマナさんが前におっしゃっていた、バナー、広告で出したりしているときは、
人のサイトにお邪魔している意識を持つことが大事ですよとおっしゃっていたんですけれども、
これについてはですね、私まだちょっと分かりあえてなくて、
広告としてはとにかく目立ってクリックしてほしいという目的があるんじゃないかなと思います。
ただ、お邪魔するサイトっていうのは作る側では選べないと思うので、
そういった雰囲気を合わせるのも難しそうだなと思います。
ただ確かに広告に不快感を覚えてしまうと、そのサービスまで嫌いになってしまいそうという経験は私もあるので、
そのあたりはどうバランスをとっていけばいいんでしょうか。
そうですね、ここ難しいところですね。広告を出行している側も、広告を掲載している側も選べないというのが、
Googleの広告の特徴の一つなので、この辺はどういうふうに考えればいいのかというのは確かに大切なポイントです。
そうですね、デザインの全体の雰囲気でいうと、全く関係ないウェブサイトに自分の広告が掲載されちゃうということもありますので、
広告をデザインする側でいうと、すごく派手にケバケバしくしなきゃ目立たないというわけではないというのは覚えておいてほしいです。
というのも、やっぱり自動で広告が出てくる仕組みというのは、これまで自分がそのユーザーが見てきた履歴をたどってですね、
06:04
この人だったらこういう広告興味あるでしょうというような形でレコメンドされているんですね。
なので全く興味のないものって出てこないはずなんですよ。
興味があるものだったら基本的に人間って目につきますので、そんな時にちゃんと主張したいキャッチコピーだったりとか、
画像だったりとかその辺がうまく伝わっていればいいので、ただただ広告全体を目立たせるというよりは、
その中でも自分がその広告主が言いたいことがちゃんと伝わるようになっていれば整理されていて、
キャッチコピーがちゃんと見えるかどうかその辺ができていればいいのかなとは思います。
だから色が派手だとか画像が派手だとかそういうのではなくて、整理されているメリハリがついているこの辺を抑えておけばいいはずです。
ありがとうございます。
普段どんなものを見ているかふんわりバレちゃったような気がします。
そうですね。全然興味のないこととか、例えば私だったらそうですね、バイクの免許とか持ってないのでバイクはあまり見ないんですね。
見たことないですし、サイトを見たことないのでバイクに関する広告は出ないはずなんですよ。
なのでそういう広告がどんなに派手でも多分私はスルーするんですね。
バイクに興味がある人だったら多少そんな派手派手しいものじゃなくてもこれバイク新しいの出たなとか多分目につくはずなんですよ。
それでちょっとでも興味を持った人がこれはこういう情報なんだなクリックしようというこの流れができるようになっていればいいはずなのでその辺を分けて考えたほうがいいですね。
ターゲットユーザーが見てくれたときにちゃんとクリックしてくれるかどうか。
ターゲットユーザーじゃない人にはもう主張しなくてもいいのでその辺はちょっと分けたほうがいいですね。
ありがとうございます。
あとはデザインのコンセプトに一貫性を持たせるっていうことも大切なので今の例で言うとバイクの広告を作りますってなったときにすごいかっこいいですね。
大型のバイクをゴリゴリ走ってやるぜみたいな人がターゲットユーザーなのになんかこうファンシーなもこもこしたようなカラフルでかわいいなお花がいっぱいだなとかそういうんじゃ多分ないのでその辺のですね何を主張したいかターゲットユーザーどういうのが興味あるかこの辺をしっかり考えてデザインするっていうことが大切ですね。
あとはその次にですねCSSHTML CSSを学んでレイアウトを組むっていう段階に入ったんですがこの辺ですねどんなですかね最初から比べてある程度使えるようになったんじゃないかなと思うんですが。
レイアウトですよね多少は慣れてきたと思うんですけれどもそうですね自分で作ってるとどんどんあの何でしたっけ未だに完成してない桜田ファミリア作り続けてると思ったように表示されないことがよくあってそれに対して何かを引くんじゃなくてどんどん足していってしまってる気がしまして。
09:17
なるほどなるほど。
マージュを足してパディングを足していろんなものを足して自分でも収集がつかなくなってきている。
マナさんにもちょいちょい突っ込まれそうな気がしてるんですけれどもクラス名の付け方がとてもその場しのぎになっていてその後の自分もなんだこのクラスはっていうことが起こってましていろいろと大変です。
そうですねそうですねまぁ最初におっしゃってたクラスとか足しちゃうとかスタイルを足しちゃうっていうところなんですがこれあるあるですねこれもうまくいかないからもうちょっとこうしてあーしてこれしてあれしてあれこれはいったいなんでこうなってるんだっていうよくある話ではあるんですがそうなった時にちょっと一旦落ち着いてデベロッパーツールで使ってます?
使ってます。
あれでチェックをポチッとクリックしたらその今ついているスタイルを外してどういうふうに表示されるかっていうのが確認できるので一旦それで全部チェックを外してみてでポチッとつけてみたらどうなるかとかそういう形で一旦整理しながら不要だなとかチェックをクリックしてもクリックしなくても何も変わらないんだったら別につけなくてもいいはずなものなので
そういう感じで無駄なものを減らしていくっていうのも一つの手ですね。
あとクラス名なんですがそこまで変なことはなってなかったと思うんですけど確か大丈夫だったはずなんですが今のところですねちゃんと何を指してるのかっていうのがクラス名を見てわかるようにはなってましたので大丈夫だと思いますよ。
他のページを作るときもですね一旦手を置いてじゃあこれは何のクラス名にしようっていうのを考えてから次のページのコーディングに入るとかそういうふうに一旦ちょっと落ち着く時間も取ったらよりですねわかりやすく作れるようになるんじゃないかなと思いますね。
はい落ち着くんですよね。ずっとテンパってばっかりです。
そうですよねなんかお話ししててこうメンタリングをしててもですねあわわあわわというのが伝わってくるんですけど大丈夫です大丈夫大丈夫まだまだ合わせる段階でもないですし大丈夫ですよ。
12:02
はいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはい
周りもだいぶ慣れてきた感じはあるんですけどどんなでしょうか
そうですねディスプレイフレックスにすると横並びになってそこからいろんな並び方やバッチリ折り返したりができるようになるというのは分かったかもです
素晴らしいもうこれだけ分かってたらあとはもうこっちのもんですよ
並びの配置の仕方とかをね付け加えるなったら加えてっていうくらいなので基本的な使い方
フレックスは親要素につけますよとかその辺はできてましたのでまあ多分大丈夫だと思います
あとはその先ほど言った通りですね落ち着いてこういうレイアウトにしたいからここはこういう要素で囲っておこうとか
この辺を事前に考えておけると脳がフリーズすることもないかなと思いますねはい
なんかうまくいかないなという時は今のところどういうふうに解決してますか
ちょっと当てずっぽうにしてるところがあるなぁと思ってまして検証を見たりするんですけれども
それでもあのここだっていう気持ちができていない気がしましてここをこうすればいいんじゃないか打ち込んで思ったようになればもう当たりだと思って次に進んでしまったような気がするんです
でもまあなんとか自分で解決しようというのが最初にあの試みてはいるんですねそうですねただそこにかなり時間がかかってしまいましてせっかくあのテックアカデミーさんは質問を投げると答えてくれる方がすぐに反応をくれる
いい仕組みが出来上がっているのにそこはあまり行かせていない気がしてますそうですねあの掛け台師ちゃんがメンタリングの時にもおっしゃってたんですけどあのどう質問すればいいのかわからないとかそういうのがまずあるのかもしれないですねそうですね質問もあのテンプレートを用意してもらっててあの課題のどこがあなたはどうしたいのか実際はどうなのかとかすごいわかりやすいテンプレができているんですけれどもそこを埋めるのも
まだまだ修行不足で
まあそうですねそのテンプレを埋めるっていうのも今現状どうなっているのかどうしたいのか本当はどうなるのが理想の姿なのかっていうのを比較する段階で自分で落ち着いてですね考えれるっていうこともあると思うので
テンプレを埋めつつ良い質問の仕方っていうのも覚えていけるかと思いますね
はい
あとやっぱちょっと躊躇っちゃいますかねこんなことで聞いていいのかなとかって考えちゃいます?
15:02
躊躇いますね
こここうしたいのにこうならないここがこうじゃないかと思うんですがどうでしょうかという感じで質問するように心がけてはいるんですけれども
もし全然違うところが原因だったりただの見落としだったりしたらちょっと恥ずかしいかなと思ってしまって
質問を出す前にもう一回確認したりもしているのでそこで時間をまた使っちゃってるかもしれないです
なるほどなるほどそうですね確認するのはすごく大切でよく私も質問される中でこの通りに書いたのに動きませんっていうほとんどの場合はスペルミスだったり
その通り書いてないとかいうことがよくあるので事前にもう一回確認するっていうのはすごくいいことですよ
ただそれに時間かかっちゃったらねせっかくこういったサービスを受けてるのに時間がもったいないので15分は自分で考えると時間制限を決めてもう何なら時間を測ってもらってもいいかと思いますね
その中でもどうしても解決できないんだったら聞こうと潔く諦めて聞いて質問返ってくるまでに他のこと考えてとか
いう感じでちょっと自分で時間決めて進めていくっていうのもいいかと思いますね
私結構あの自分の生活の中でもですねタイマーをよく使っていて
アップルウォッチでタイマー測っても10分以内にこれ終わらせるここの掃除は10分で終わらせるみたいな感じでやってますのでそういう癖をつけておくといいかもしれないですね
じゃああとはですねサスとかJQueryとかのプログラミングの匂いがするぞとお話ししていたあたりですね
はいまずサスについてなんですがだいぶ慣れてきた感じがあるのかなと思いますいかがでしょうか
そうですね今のところはJQueryを入れてここが動いたでしたり
サスを導入して分けられて一括で変えられて便利だけなのでそれに関してはだいぶ慣れてきたんじゃないかなと思います
ただやはりそれだけなので実際に現場で使用するレベルには到底届いていないんじゃないかなと思ってます
例えばJQueryやJavaScriptとかも実際にはきっとバリバリかっこよく使ってサイトを動かしていくんだろうし
サスについてもHTML、CSSを組み立てながらより効率的に管理するために使っていくイメージがありまして
私はまだ分けられて便利一括で変えられて便利っていうところしか見えてなくて
サスを意識しながらHTML、CSSを作っていくというのは全くできてないんです
なのでそこまで考えて効率的にコーディングできる日が来るのかはちょっとわからないなぁという不安はあります
18:08
でも最初の最初は本当に何がいいのか何がメリットなのかがわからないという状態から
ここまで便利なところがわかったっていうことなのですごく前進してると思いますよ
ターミナルを使ってね変換するっていうのもできるようになってますし
最初に比べたらもう一歩も二歩も前進してます大丈夫ですよ
ありがとうございます
あとはこれをどういうふうに生かせるかっていうところに入ってくるんですが
これは本当にそうですねやっていかなきゃっていうのはありますね
圧倒的にサスに出会ってから作ったサイトっていうのが今2つ目くらいで
まだまだ作っていかないとメリットが見えてこないかもしれないので
今は慣れている段階だと思ってもらっていいと思います
あまり焦らずですねサス使ってるのになんか全然使いこなせてないっていう風になってると
本当に焦って焦って本当の良さが見えてこなかったりもしますので
今はこういうふうに全体の流れですね
ウェブサイト全体をこういうふうに使うんだな作っていくんだなっていうのがわかっていれば大丈夫かと思います
サスもですね使いこなせてないっていうことでも全然なくて
変数だとかファイルを分割してっていうのもうまくできてますし
昨日もですねあのここの色変えましょうってなった時にささっとこう色の変数を持ってきてちゃんとコーディングできてましたので
ちゃんと使いこなせてるわって思いましたもん大丈夫ですよ
ここの色変えましょうって言ってあのカラーコード持ってきたらどうしようかと思ったんですが
ちゃんと変数でね変数名で指定できてたのですごいわかってるわって思いましたから大丈夫です
よかったですね
はいじゃあザザーッとこれまでの振り返りだったんですがバナー制作
あとCSSでのレイアウトサスとかジェクエリですねこの辺をパーッと振り返ったんですがいかがでしたか
テックアカデミーさんに入って最初の方は正直もともとふんわり持っていた知識でご利用しをしまして
今のデザイン幹部からコーディングする課題をやってるんですけれどもこれでボコボコになりまして
なんですけどもやっとですねあの初めてコーディングが楽しいと思える瞬間があったんですよ
ただのついに楽しいわけじゃなくて今はあのすごい辛たんです
今のところ1日だけ楽しいって思える日がありまして
あれはそうですねコーディングが楽しいと思える日はあったんだなーって気づいただけでもすごい収穫がありました
そうですねちなみにどんな時でそう思ったとか覚えてます
詳しいあの状況はすいません忘れてしまったんですけれども
ゲームでもたまにあるなぜか調子が良くてフルコンボできてしまったりするみたいになぜかの調子が良くって
21:07
ここはきっとこれが関わっているからここを直せばいけるはずっていう
感化知識か微妙なラインなんですけどもそこがかなり当たってすごく順調にコーディングできていた日がありまして
もうその時はバイト行きたくないってなるぐらいに楽しかったですね
おーすごい素晴らしいこれ今感が当たったっておっしゃいましたけど全然そんなことはなくて
まぐれじゃなくてちゃんと力になってるからそういうふうに閃いたわけなんですよ
なのでたまたま良かったラッキーとかそんなわけではなくて私やっぱやればできる子っていうふうに自分を褒めてあげてもらって全然いいですよ
ありますよねやってたらねずっと楽しいもうこのままずっとどこまでも走っていけるぜみたいなそんな時ありますよね
良かった良かったまあそういう日が1日でもあったんだったらこの先はそれがずっと続くってもっと続けられるかと思いますし
勉強して場数を増やしていけばこういったひらめく回数も増えるのかなぁと思います
もっと自分を褒めてあげてさすが私って感じで言ってあげてください
まずは課題が提出できるように頑張ります
はいじゃあこのままですね課題の提出を目指してひとまず進めていきましょう
さてこの番組では感想や質問リクエストなどをお待ちしております
番組詳細欄にあるリンクよりお気軽にご投稿ください
ツイッターではカタカナでハッシュタグウェブカフェをつけてツイートしてください
そしてアップルポッドキャストやスポティファイのポッドキャストではレビューもできますのでこちらにも感想を書いてもらえると嬉しいです
ここで私がメンターをしているテックアカデミーについてのご紹介です
テックアカデミーはウェブデザインやプログラミングをオンラインで学べるスクールです
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます
副業案件の提供を保証するテックアカデミーワークスもあるのでぜひテックアカデミーと検索してチェックしてみてください
またお会いしましょう Webクリエイターボックスまなと かけだしちゃんでした
