00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ
私はリスナーでWebクリエイターBOXを運営しているManaです。
Web製作を勉強中の駆け出しちゃんです。
この番組では、Webコンテンツ製作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、コーディングを始めるその前に〜、です。
オリジナルサイト製作では、自分でデザインしたものを自分でコーディングしていきます。
無難な形に収まりがちなんですが、逆に雑になってしまったりとか、
いろんなパターンがあると思うので、その辺りを考えていきましょう。
ポートフォーリオ製作の進捗についての回ですが、駆け出しちゃんいかがでしょうか?
コンテンツの内容やデザインについて、
1回デザイン幹部を作って、それが課題で合格になったから、今コーディングをしているんですけれども、
やっぱデザインはこれで良かったのかな〜とか、そういったモヤモヤが残っております。
コーディングについては、前回のコーディング課題よりも順調に進んでいる気がします。
順調に進んでいるということなので、この辺を深掘りしていこうと思います。
それではまずですね、ウェブ制作をするとき、コーディングを始めるときとかに、その前とかでもあるんですが、
製作会社によっては仕様書っていうのをしっかりと作っておきます。
コーディングの決まり事だったりとか、作っていく上で必要なものを書き出してまとめていったりするんですが、
この辺作ったこととかありますか?
やってないです。
全然やってない?
そうですね、全然決めきれてなくって。だからだと思うんですけれども、コーディングの時にこれを基準に余白を取ったりしようと決めて進めていっても、
次の日にはそれを忘れてしまっていて、なんでこいつ、あ、私のことですね。
こんな風にして、何を考えて書いてたんだろうと思って修正して時間を取っていることもあります。
そうですよね。私もコメントとか何も残してなかったりしたら、
なんでこの関数が一体どこから来たんだろうとか、この値はいったい何だったっけとか、
なんか謎の数字が出てたりしますよね。
多分、過去の自分が頑張って計算して出した何かの数字だと思うんですけど、
そういうのが幅に指定されてたりとか、そういうのがあるかもしれないですね。
そういうので、もう既に困っちゃった経験が出ちゃいましたかね。
そうですね。そこまでまだ大事にはなっていないんですけれども、
メンタリングでマナさんにツッコミをいただいております。
03:02
そうですね。これ何でしたっけとか、これはあえてこうしてるんでしたっけ、
みたいなことをちょこちょこ聞いてるような気がしてますけど。
大体は、あれ、私もなんでこれ書いたんですかって書いちゃうんですよね。
なってますよね。
はい。
で、他のページでも使うコンポーネントっていって、共通のパーツとかですね、
これを一度全部、全ページで作ってしまうと、
もう一回修正が入ったら、また全ページ修正しなきゃいけなくなったりするので、
必ず共通のものは一つのものが完成してからコピペしましょうみたいな感じで、
お話したかと思います。
はい。
その辺もありましたよね。
お問い合わせはこちらみたいなエリアが、全ページ一応もう書いたけど、
やっぱ修正になって、クラス名を変えるとかになって、
クラス名全ページまた変えてとか、
そういう作業が出てきたりしますよね。
そうですね。
おそらくそういう作業で、一箇所だけ変え忘れてしまっていたりとかが発生して、
さらにああって、なっちゃいますね。
なっちゃいますよね。
で、また新たに別のクラスをつけてみて、あれあれあれっていう。
はい。そういうのがあるので、最初に決まりごとをですね、
しっかりと作っておきましょうというふうに説明しています。
はい。
で、決めることなんですけど、もうガチガチにあれこれ決めなくても、
まあ言っちゃいいんですけど、
まずは使う画像のファイル名だったりとか、保存するフォルダの名前、
SASを使うんだったらSASを、ファイルをどういうふうに分割するかとか、
今言ったクラスの名前とかレイアウトどういうふうに構成するかっていう、
そういうところから始めてみると、見通しが立てやすくなるとは思うんですね。
はい。
で、実際にこうデザインカンプみたいなのができた時に、
もう直接印刷して書き込んでもいいかなと思うんですね。
レイアウトここで区切りますとか、
ここはひとまとめでこのクラス名で統一しますとか、
そういうふうに事前にやっておくと、後々スムーズになりますね。
スムーズにいきそうです。
いきそうですよね。
経験者ほど、やっぱりコーディングの前、その前の構想の時間とか、
決まりごと考える時間に費やすんですね。
ちゃんとこうバシッとここはこうします、こうしますっていうのは決まってたら、
あとはもう想定した通りにコーディングしていくだけで済みますので、
後からやっぱりこここうしようってなったら、その度に一旦手が止まって、
また考え直して、また追加して、あれ分かんなくなったっていう悪循環になりがちなので、
なるべく手を動かす前に考えておくといいかなと思いますね。
そうですね、もうコーディング自体にうんうん悩んでる以上、
それ以上に考えることはあんまり増やしたくないですね。
そうですよね。なのでよくあるはこのデザインカンプできました、
じゃあコーディングですっていうステップになってるんですが、
その前ですね、デザインカンプできました、決まりごと作ります。
そしてコーディングですってこの一ステップが抜けてる方多いので、
06:01
それありきで考えていくといいかなと思います。
初めてのオリジナルサイト制作ということで、どんなデザインにしたいとか、
どんな動きをしたいかっていうのを今回自分で一から考えていったかと思うんですが、
それをですね、相手に伝える、担当のメンターが私なので、
私に伝えるっていう時に、こうなんかうまくいかなかったりとかそういうことありました?
マナさんのですね、引き出しが多くて、何でしょう、
マナさんの受け取り力が高すぎて、何となくわかってもらえてるかなっていうことが多々あるんですけれども、
口頭での伝え方は今でも課題になってますね。
メンタリングですと、クラス名が、インデックスの何行目?
いや、あの、HTMLじゃなくてCSSの方ですっていうのを、昨日やったばっかりで。
そうですね、これはね、インデックスHTMLとインデックスSCSSっていうファイルがあるっていうこのトラップが。
あれあれあれってなったんですけどね。
ファイル名ちょっと変えた方がいいかなと、うすうす思ってはいたんですが、
まあ伝わりました。はい、大丈夫ですよ。
トップSCSSとかの方がわかりやすいですかね。
そうですね。これでよくないのはさらにインデックス.jsとか、インデックス.jpgとかあったらもう地獄ですよね。
やるかもしれない。
はい、なので極力ファイル名はちょっと考えながらの方がいいんですが、
まあそういうふうにですね、整理しながらできればいいかと思います。
あと動きの説明、動きをいくつか足そうかなっていうお話をしてたんですが、その辺いかがでした?
はい、この辺りもあの、身振り手振りで、まなさんにわかってもらえてる感じでして、
まだテックアカデミーさんでのスラックでの質問は動きについては使ってないんですけれども、どう説明しましょう。
よくあるのが参考サイトとか、参考の動きとかがあれば一番わかりやすいですね。
このサイトのここの部分、ここをクリックした時のこれと同じような感じにしたいですとか、
いうのがもしあれば一番伝わりやすいんですけど、それが難しければ最近だったらFigmaとか、
そういうグラフィックツールでアニメーションを追加できるようなものがあったら、そういうのを使ってもらったりとか、
アニメーションを自分から進んでみてストックしておくとか、いうのは積極的にやっていくといいかもしれないですね。
あとは、初心者さん全般に言えるつまずきというか、よくあることで言うと、先ほどのお話もあった通りですね、
質問する時に思ったようになりませんみたいに言われても、その思ったようにっていうのが我々はどういう形なのかっていうのがちょっとわからないんですね。
理想形は最終的にどうなりたいのかっていうゴールを見せていただいて、現在どうなっていて、どこが違っているのかとか、
そういうのを伝えてもらえると、こちらも答えやすいかなと思います。
わかりました。その理想形に参考サイトを用意しておく。
09:04
そうですね。デザインカンプだけでも全然違うと思いますね。デザインカンプでそこの部分のスクリーンショットを撮ってもらって、
今やってるところこうなってます。余白が揃えたつもりが揃ってないです。なんででしょう。みたいな感じで、理想と現実みたいな感じですね。
送っていただければわかりやすいですね。
そうですね。先ほど言った通り、Figmaとかだったら動きを加えられたり、あとはページの遷移とか、ここをクリックしたらこっちに行きますとか、
そういうのもわかるようなグラフィックツールがありますので、そういうのでデザインカンプを作れるとより良いでしょうという感じですかね。
Figmaだったらブラウザーでできますので、結構入りはしやすいかなと思いますね。よかったら試してみてください。
IT・インターネット業界に強い転職アプリGreenは、今話題のテック企業、プロダクト開発、DX案件など、Greenだけの良質な求人を数多く揃えています。
正式応募前に企業の中の人とカジュアル面談ができるので、仕事内容やメンバーのことをしっかり理解した後に先行に進めます。
カジュアルに始める転職活動にGreenをご活用ください。
続きましてですね、コーディング。今ちょうどコーディングの段階でしたよね。
自分でデザインしたものを実際にコーディングするという作業、初めてかなと思うんですが、いかがでしょうか。
私の作る予定のポートフォリオサイトは、基本的なレイアウトしか使っていない感じではあるんですけれども、ちょっとずつ形になってきていまして、思ったより私できるじゃんって思えるようになりました。
もちろんレイアウト自体がすごく基本的なものなので、ハードルはものすごく低いだけなんですけれども、それでも色がついて画像が貼られて形になっていくのを、自分で形にしていってるっていうのは楽しいですね。
素晴らしい。楽しいって思えることが一番大切ですからね。
あとは、反省点もちょくちょくもちろん出てきてまして、直近で言うと、前回のコーディング課題でクラス名をかなり適当につけてしまったばっかりに、似たような名前の別のクラスをいじってしまって大変なことになったっていうのを踏まえまして、
今回は丁寧にクラス名をつけた結果、全部一つ一つがすごく長くなってしまいました。インデックス-オリジナルマンガ-バックグラウンドみたいに。
昨日話してて、あれこれ長いなってなりましたもんね。
長いんですけども、私が見てわかるにはまだこれぐらいの長さが必要かなと思いまして、他の人に共有するにはあまり良くない行動になっちゃってますね。
12:05
でも自分でわかるっていうのが今の段階では一番大切だと思いますし、そこまで長いクラス名にしてるので、かぶることは多分ないと思いますので。
はい、多分大丈夫。え、でもなんか、昨日二箇所に同じものが書かれてる。
書かれてましたね。お問い合わせアヒルが。
あ、そうだ、お問い合わせアヒルだ。
そこでマダさんに、なんで二つあるのって言われて、私もあれ、なんでこっちにいるのってなってました。
そうなんです、ファイルが別のファイルでね、SASのファイルお問い合わせアヒルっていうクラス名がこのファイルとこのファイルで二つ書かれてて、
しかもなぜか二つとも同じ値なので、意味ないかなみたいな感じのがあったりして、
お問い合わせアヒルっていうのもね、ほんと日本人らしいクラスの名前のつけ方なんですけど。
はい、いいと思います。
本当に英語がすごく苦手な方とかは、ローマ字で今みたいにですね、お問い合わせハイフンアヒルとかいう方もいらっしゃいますし、
誰かと一緒に共同で作業しないであれば、全然それでもいいかなと思います。最初のうちはね。
最初のうちはですね。
最初のうちはそうです。なんならクラス名って日本語使いますからね。
そうなんですか。
そうなんです、ひらがなカタカナ漢字、なんなら絵文字でもいけます。
えー。
ドットリンゴマークみたいな感じでも全然動作するんですよ。
あー、使いたくなっちゃう。
はい、後でまた試してみてください。
はい。
聞いてる方もですね、なんじゃそりゃって思ったかもしれないんですけど、
試してみたらね、クラスイコールちょんちょんリンゴマークとかいう風に絵文字で書いてもらって、
で、CSSの方ではドットリンゴマークでカラーなんとかとかやったらできるんですよ。
不思議ですよね。
あんまりやらない方がいいとは思いますけどね。
ですよね。
文字分けとかしたらもう地獄なので、
なるべく半画絵数でやってみてもらえたらと思うんですが、
そういう風に分かりやすく分かりやすく最初は整理していくっていうのも一つのやり方ではあると思います。
はい。
場数を踏んだりしていい塩梅のクラス名をつけられるようになりたいですね。
そうですね。
これはほんと他のサイトとか見て、ここはこういう風にまとめてるんだなっていうのも実は勉強になると思いますので、
で、よく使われてるクラス名みたいなのも出てくると思うんですね。
全体囲ってるのコンテナとかラッパーとかそういうの使われてたりするので、
そういうのを参考にしながら考えていけたらいいかなと思います。
はい。
で、あと自分でコーディングするってなると無難なレイアウト、無難なデザインになりがちで、
実装しやすいような、もう自分が作りやすいような形に収めがちなんですよね。
掛け出しちゃうも最初はそうだったんじゃないかなと思いますが、やっぱそうなっちゃいますかね。
そうなっちゃいますね。
今もそんな感じなんですけども、マナさんに直していただくまではもっと簡単なデザインでしたね。
15:05
そうですよね。
でも人間ね、不思議なもので基本的に想像し得るものは実装できますので、
自分で思った、こんなんできるかなっていうのは大体できます。
どんなレイアウトでもアニメーションでもですね、実装はできますので、思い切って考えるのが大事だと思います。
何箇所か動かしたいポイントがあるので。
そうですよね。
アヒルちゃん周りかなと思うんですが、その辺ですよね。
楽しみにしております。
あとは逆に自分が最終形を最終的にどういう風な形になるのかっていうのが自分自身は分かってるからっていうことで、
デザインカンプが雑になるっていうパターンもあるんですね。
私もたまにやっちゃうんですけど、自分のサイトだし自分のブログのデザインちょっと変えるだけだしっていう感じで、
何ならデザインカンプ作らずにコーディングに入りますっていうことも実は結構あって、
ただ実際にコーディングしようってなったら細かい部分考えてないので、
コーディングしながらまた一から考えて、ちょっと違った、ちょっともう少し考えてってなると余計に時間がかかっちゃうんですね。
なので先ほどのデザインカンプ終わってすぐコーディングに入るんじゃなくて、
ちょっと考える時間を入れましょうっていう風な話とつながってくるんですが、
デザインの部分はしっかり作ってから考えてしっかりコーディングっていう流れをしないと、
めんどくさいことが後回しになるだけという感じになっちゃうので、
その辺はしっかりと最初から考えておけるといいかなと思います。
それではですね、今週からリスナーさんから届いているお便りっていうのを紹介していきたいと思います。
お便り来てるんですか?
お便りが届いてるみたいなんですよ。ちょっと見てみましょう。
ペンネームだいふくちゃんから。
かわいい。
かわいいですよね。お便りが届いてます。
マナさん、かけだしちゃん、こんにちは。初めてメッセージをお送りします。
マナさんは仕事柄、在宅ワークが多いと思うのですが、どのようにしてオンオフを切り替えていますか?
コツなどありましたら教えてほしいです。
自分の勤めている会社は2020年から週何日かは在宅ワークが可能になり、
在宅ワークの日はできるだけ残業しないように言われているのですが、
就職時よりも辞め時を決めるのが難しく、長く働いてしまいがちです。
スパッとはい終わりとできるようになれたらなと思います。
ということですね。在宅ワークはやってみたら、やっぱいいとこだけじゃないなっていうのが実感すると思うんですが、
かけだしちゃんそういえば在宅ワークってしたことあります?
前職の休業中に少し仕事が入ったりはあったんですけれども、
でも一般的な在宅ワークとはだいぶ違うと思います。
私も出社する時は辞め時がわからなくて、これもいけそうな気がするってやってしまったらいつの間にか残業になってたっていうこともかなりやってきたので、
18:03
マナさんにアドバイスいただければと思ってます。
なるほど、わかりました。
そうですね、私は何をするにも時間をはかるようにしてますので、この作業は1時間以内に終わらせると。
できなかったら明日みたいな感じでやってますので、時間割を自分で最初組んでる感じですかね。
それでできなかったらしょうがないっていう感じなのが一つ。
もう一つ、夕方ぐらいになるとうちワンコがいますので、
おい、いつまでやってるんや、散歩の時間だぞという感じで騒ぎ出しますので、それが一つの目安になってですね、終わりますっていう感じになってます。
ワンコには勝てないですね。
そうなんですよ。解決策としては時間をはかる、もしくはペットを飼う、どっちかですかね。
ペットを飼う。
ありがとうございます。
あともう一つ感想をいただいてます。ペンネーム太郎さんからですね。
白黒チェックや検証モードでのクラス整理などちょっとしたコツを楽しく聞きながら知識を得られて貴重な番組だと思いました。
マナさんの聞きやすく優しくかつ的確な語りは深夜の私にも前進する勇気を与えてくれます。
ありがとうございます。
そうですね。白黒チェック、デザインのところでちょっとお話ししたものだと思いますが、バナーとか作った後に白黒にして確認して、ちゃんと読めるか、色に埋まってしまってないかとかですね、そういうチェックをしましょうというお話をした回ですかね。
もし聞いてない方いらっしゃいましたら、その辺も併せて過去のものも聞いてみてください。
メッセージありがとうございました。
ありがとうございました。
今回のテーマはコーディングを始めるその前にでしたが、かけだしちゃんいかがでしたか。
はい、下準備の大切さを痛感できる回でしたね。正直フォトショップでのデザインカンプ作りにも結構時間がかかってしまってまして、途中でざっくりした手書きのやつでいいんじゃないかなと思っていたんですけれども、いざコーディングに入ると全然そんなことはなくて、私はデザインカンプなしではコーディングができません。
さらにクラスや予約とかもあらかじめ決めて書き込んでおけば、今もっと楽にコーディングできたのかなと後悔しているところにも入ってきてますので、次にサイトを作る機会があればしっかりと下準備した上でコーディングに臨みたいと思ってます。
まだ仮想ページが残ってますので、そこの部分はあらかじめ考えてやっていけたらいいんじゃないかなと思います。
そうですね、今からでも。
もうすぐ完成なので楽しみにしておきます。
はい。
さて、この番組では感想や質問、リクエストなどお待ちしております。番組詳細欄にあるリンクよりお気軽にご投稿ください。
TwitterではカタカナでハッシュタグWebカフェをつけてツイートしてください。
21:03
そしてAppleポッドキャストやSpotifyのポッドキャストではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech Academyはウェブデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。
Webクリエイターボックスマナーと駆け出しちゃんでした。
