00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ
WebデザイナーでWebクリエイターボックスを運営しているManaです。
Web制作を勉強中のかけだしちゃんです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回はお便りスペシャルということで、リスナーの皆さんからいただいたお便りにどんどん答えていきます。
緊張しますね。楽しみです。
それでは早速リスナーさんから届いているお便りをご紹介していきます。
まずはペンネームシフォンさんからいただきました。
Manaさんかけだしちゃんこんにちは。
こんにちは。
いつもありがとうございます。
LPデザインに関する話題がありましたが、LPデザインテーマを決める上で大切な要素は何だと思いますか?
個人的にはフォントにこだわりがあります。
おすすめのフォントについて教えていただけますか?
つい気になってメールしました。これからも素晴らしいポッドキャストを楽しみにしています。
ありがとうございます。
まず2点ですかね。
LPデザインに関するテーマを決める上で大切な要素というのと、あとフォントについてということなんですが、
まずLPのデザインをする上で大切な要素なんですが、
私は本当に何をして欲しいかというのを明確にするというのが一番大切だと思っていて、
LPって本当にテーマが決まっていて、これをしてくださいというのを大きく打ち出さないと、
何のために存在するサイトなのかというのが分かりにくかったりするんですね。
かけだしちゃんもポートフォリオサイトを作る時に、あれ載せたい、これ載せたいとかいろいろあったと思うんですが、
最終的にはお問い合わせして欲しいという、行動して欲しいものというのは一つに決められたと思うんですね。
はい。そこは自分でもマナさんにいろいろヒアリングしてもらうまで分からなくて、
あれも載せたい、これも載せたいってなっていたんで、そこが決まったおかげでまとまりのあるサイトになったと思います。
そうですね。ゴールが何なのかという、ユーザーがそれを見てどうして欲しいのかというのが明確になっていると、
オノズとデザインの動線というのが見えてくると思うので、まずはそこ、ゴールを決める。これが大切かなと思います。
あとデザイン要素に関しても、分かりやすいフォントについておっしゃっていただいているんですが、
03:02
フォントにこだわりがありますということなので、読みやすいフォント、インパクトのあるフォント、こういうふうにどう打ち出したいかによって分けるというのは大切ですね。
かけだしちゃんもウェブサイトを作るときに、ポータフォリオサイトを作るときに、かわいい雰囲気にしたくて、丸っこい見出ししてもらったかなと思うんですが。
全丸ゴシックを使っております。
はい、そんな感じで全体のデザイン、雰囲気に合わせてフォントを選ぶというのも大切ですね。
はい。
あとおすすめのフォントなんですけど、パッと出てきたりします?フォントの名前とか。
個人的に好きなのは花と蝶々でしたり、キリギリス好きなんですけれども。
はいはい、かわいいですね。
どちらもちょっと使いどころが限られている感じがして、おすすめはできないのかなと。
そうですね。
今悩んでおります。
ちみにマナさんのおすすめのフォントはありますか?
私は自分のポートフォリオサイトでも使っているソフィアっていう英字のフォントがあるんですが、結構丸っこくて女子って感じの、女の子って感じのかわいいフォントがあって、それがかわいいだけじゃなくて優雅な雰囲気もあったりするので、私は自分のポートフォリオサイトには結構長年使ってますね。
あー、出てきました。
マイクロンってこうなってる感じのやつですね。
これは結構長い間使ってます。
あと本文とかだったら無難なものの方が読みやすいと思うので、
ノトサンズとか。
ノトサンズ。
はい、しますね。
ノトサンズだったらWindowsでもMacでも見やすいっていうのがあるので、結構使う頻度は高いかなと思います。
はい、それではシフォンさんお便りありがとうございました。
ありがとうございました。
次のお便りです。ペンネームみたらしさんからいただきました。
がなさんかけだしちゃんこんにちは。
こんにちは。
こんにちは。
初めてメールを送るみたらしと申します。
勉強しながら聞いています。
今専門学生なので、以前の放送で採用の現場の話があったのは印象に残りました。
業界自体はどんな印象を持っているのか教えていただけると嬉しいです。
ポッドキャストを聞いているとリアルな声や情報が伝わってきて、業界の雰囲気やトレンドを肌感覚でつかむことができます。
職場の雰囲気や働き方に関する情報は実際の体験談や意見が一番参考になりますよね。
まなさんかけだしちゃんの番組はいつも楽しく聞かせていただいています。
これからも素敵なコンテンツをお届けいただけることを楽しみにしています。
応援しています。
はい、ありがとうございます。
まず、専門学生ということなので、勉強することもたくさんあって大変かなと思いますが、かけだしちゃんも勉強中ですので、話を聞いていて勉強になることもたくさんあるんじゃないかなと思います。
毎回勉強させていただいております。まなさんに。
06:05
業界自体はどんな印象を持っているのか教えていただけると嬉しいということなんですが。
そうですね、全く全然違うジャンルの業界の人にウェブ制作界はどうなんですかって聞かれた時だったら、学ぶことは本当に多くて、本当に1日1日更新されていくので、勉強しなきゃいけないのは大変だよと。
でもその分新しいことが好きなんだったら楽しめる業界かなというふうには結構答えてますね。
かけだしちゃんはウェブ制作業界に足を踏み入れる前と今では印象変わったりしました?
そうですね、踏み入れる前だとサイトがあってそれを作る人がいるぐらいの認識だったと思うんですけれども。
まずそのサイトにもいろんな種類があって、通販サイトでしたり個人サイト、コプレートサイト、LP。
とにかくいろいろありまして、また作る側の人もいろいろと一緒くたにくくれないぐらい層が広いんだなっていうのを知ってしまいました。
一人が全部最初から最後までやるっていう印象があったかもしれないですが、蓋を開ければ本当にいろんな役割の人がいて、何立ってるっていう業界だったりしますよね。
そうですね、デザイン専門の人がいたりコーディング専門の人がいたり、さらにはプラスアルファでマーケティングの知識があってとか。
そのあたり知ってしまうと、私はとても一人で誰かのサイトを作るなんて難しいよってなってしまうぐらい深い世界ですよね。
全部自分でやるってなると、駆け出しの方にはちょっと負担が大きいかなとは思いますね。
私、以前イギリスで働いたことがあったんですが、イギリスって結構細分化されていて、例えばウェブサイトに掲載する写真のリタッチだけをする人、ゴミを取るだけの人とか、そういうのもいるんですね。
リタッチャーと呼ばれるのも採用されてたりするので、それくらい細分化してやるパターンもあったりします。
これがね、結構業界一括にできないくらいですね。結構奥の深いものだったりしますね。
お客様からすると、それぞれの工程で専門の人が対応してくれるって聞いた方が安心できそうな気がするんですけれども、どうでしょうか。
どうなんでしょうね。お客様からして、例えばフリーランスでこの人に託せば全て完結するっていう1人がいるっていうのも、なんかこうありがたいっていうのもあるかもしれないですよね。
なんかこの人に言ったら、全部ちょっとここを修正したいとか、ちょっとこういうふうにしたいっていうのも、この人に窓口として1人いえばどうにかなるっていうのも、安心感につながるのかもしれないですよね。
09:03
人数が多いと連絡が時間かかりそうですね。
そういう印象はあるかもしれないですね。特に小さい中小企業だったり、個人のお店だったりっていうのをお持ちの方が、ウェブサイト作りたいですってなった時に、大企業の製作会社に頼むっていうよりは、フリーランスな方に相談に乗ってもらいたいっていう、そういうパターンは結構あると思いますね。
ですね。
あの頃はそういった方に届くように。
そうですよね。
営業メールを送っていた記憶があります。
だからその業界に入る前っていうのは、そういう垣根とかも何もなく、フリーランスの人がやったらすべてうまくいくみたいな、そういう考えがあるのかもしれないですが、まあやっぱ適材適所っていうのもあるんでしょうね。
はい。
はい、それでは三原さん、メッセージありがとうございました。
ありがとうございました。
次のお便りです。
ペンネームおもちさんからお便りをいただきました。
まなさん、かけだしちゃん、こんにちは。
こんにちは。
こんにちは。
初めてメッセージを送らせていただきます。
私はSEとして働いているのですが、ウェブデザインもできるようになりたいと思い、まなさんの本を読んだりアプリを使って勉強中です。
他のプログラミング言語を使ったことがあるのですが、HTMLやCSSは初めて勉強しています。
HTMLはちょっとした工夫で画面が変わって面白いなと感じる反面、レイアウトの決め方など初心者には難しいと感じるところもあります。
そこで、他言語経験者がHTMLをマスターするコツはありますでしょうか。
また、独学で上達する方法もあれば教えてもらえると嬉しいです。
ということで、すでに経験者といえど、やっぱりウェブと別の業界だったら違ったりするので、この方はウェブの方は初めてということなんですね。
HTMLやCSSってプログラミング言語とは少し違って、書いたものがそのまま反映されるというものなので、プログラミングとは考え方が異なるかもしれないですね。
プログラミングは言語に指示を出してコンピューターに動いてもらうというものなので、ちょっと考え方を変えないと何か表になれないということはよく聞きますね。
マスターするコツ。
私も知りたい。
コーディングするのはすごく慣れていると思いますので、カタカタ手を動かすということに慣れていると思うんですが、もうHTMLってタグがものすごくありますよね。
私も他のプロの方も覚えてる、全部覚えてるっていう方は少ないと思いますので、よく使うものからどういう特性があるのかっていうのを一通り覚えておかないとちょっと使いどころが違ったりとか、初期の駆け出しちゃうみたいなDIV魔人になっちゃったりとか、とにかくDIVで囲っておけばいいやみたいなね。
12:07
その辺の特性をまず覚えて、じゃあここはこのタグを使いましょうっていうのをやっていくとレイアウトも組みやすくなるんじゃないかなと思いますね。
あと王道の作り、よくあるテンプレートみたいなのをいくつか作ってみると、こういうタグが使えるなとかレイアウトでもCSSでこういうふうに指示をすればこのテンプレートにはなるなっていう王道パターンをいくつかマスターしておくと応用も効きやすくなると思うので、そういうところから始めてみるといいんじゃないかなと思います。
駆け出しちゃんはそうだ、他の言語とかってやったことある?
いえ全く。
全く興味とかはなし。
学生の時にCかCがプラスが2つぐらいくっついてるやつで、if分とfor分の入れ子とぐるぐる回すやつあたりで、なんかもうダメだってなりました。
そうですね、ダメそうですね。あの辺でエラーとか出て解決できなかったら挫折しやすいポイントではありますよね。
なのでHTML、CSSも絶対苦手だろうと思ってたら案の定結構苦労しまして。
なので文字で文字を打って何かを作ることに既に慣れている方であれば、完全な初心者よりもだいぶ上達しやすいんじゃないかなと私は偏見で思ってます。
エディニアちゃんもすごく物を作るのは早かったですね。
そうですね、何か一つある程度できるようになっていると、他分野でも応用しやすいので、それはありますよね。
だと思います。
かけだしちゃん、そういえば今思い出したんですが、ゲーム好きですよね。
はい、ぼちぼち。
ゲームの方のプログラミングに行こうとは思わなかったです。
なんか泣き声が。
夢を見たことはありましたけれども、当時ゲームにプログラミングが使われているということをあんまり理解していなくて、絵を描きたいとか企画したいとかそういう措置でした。
そうなんですね。今だったらユニティっていうのがあって、それにユニティちゃんっていうのがいて、動かしたりとかできるんですけど、そういうのはちょっと難しいかなという感じだったんですかね。
RPGツクールがユニティで動くっていうのが、最近出たのかな?前からあったのかな?存在を最近知りまして、ちょっと気になってます。
そうですね。こういうユニティって本当に昔からあって、使う人も多いので、パッケージになっていたりとか、背景の宿屋の絵とか、そういうのをパッケージになってたりするので、やりやすいとは思いますね。
思い出した昔のRPGツクール、触ってました。無限ループしました。
無限ループ。
15:01
会話が終わらないとかいう。
そうか、そういうね、落とし穴にはまりやすいタイプですもんね。
はい。
あれだったらテックアカデミーでもね、ユニティコースがありますので。
いい。
はい、だったらどうぞ。
はい、それでは、おもちさん、メッセージありがとうございました。
ありがとうございました。
現在、転職アプリグリーンは、今話題のテック企業、プロダクト開発、DX案件など、グリーンだけの良質な求人を数多く揃えています。
正式応募前に企業の中の人とカジュアル面談ができるので、仕事内容やメンバーのことをしっかり理解した後に先行に進めます。
カジュアルに始める転職活動にグリーンをご活用ください。
最後のお便りです。
フェンネーム、エンジニアちゃん。長っ。
エンジニアちゃんから、ものすごく長いメッセージが来ておりますね。
長いですね。
区切り長い読んでいきましょうか。
質問が最後の方にあるぞ、ちょっとね。
ダーッと質問まで読んでいきましょうかね。
こんにちは、エンジニアちゃんです。
こんにちは。
こんにちは。
私もたまにかけだしちゃんに進捗を見せてもらったりしましたけれど、HTML、CSSはちゃんと書くのは難しいんだなって再確認しました。
例えば、ページフッターのCSSを変えたら、ハンバーガーメニューの見た目も一緒に変わっちゃって大混乱だったりとか。
やりましたね。
やりましたね。
とにかくいろんな時代を全部踏みにいっていて、その度にトラブルシューティングをやっているのを見ていました。
まなさんにも近いことを言われた気がしましたね。
初心者あるあるを全部踏んでるって。
そうなんですよ。ここを変えたいけど、変えたら違うところにも問題が発生しそうなので、このままにしておこうみたいなね。
はい。
そうそう。なので、今の時代にウェブ制作を勉強しようとすると、HTML、CSSだけじゃなく、制作環境のセットアップやSCSSなど便利なものを導入したり、さらにはコマンドラインを使える必要があったり、サーバーを立ち上げて動作確認したり、
ハテはCSSアニメーションやJavaScriptの知識も要求されてきたり、コーディングについても後から変更しやすいようにきれいに作ったりと、たとえるならばデザインもできるフロントエンドエンジニアくらいの知識が求められちゃうんじゃないかなと思います。
その通りですね。もう全部言ってくれましたね。
そうなんですよね。設計をしながら、デザインの段階でどういうふうにコーディングしようか考えながら、コーディングするときはどんなふうな見え方になるか考えながらなので、いろいろ大変ですよね。
18:11
そんな中で、かけだしちゃんがテックアカデミーに入ると聞いて、どこまでできるのかなと心配していましたが、メンターの方々のサポートもあり、無事に卒業できて私も安心しています。
これからもオリジナルのホームページを楽しく作っていってくれたら私も嬉しいです。
ここまでが感想ですね。親御さんかな。
親かな。
お母さんかな。
ママ。
質問いってみましょうかね。質問も2ついただいてます。
まず1つ目。マナさんが本気でウェブサイトを作るとしたら、どのようなフレームワークやツールチェーンを使いますか。
そうですね。まずフレームワークで言うとNext.jsをベースに使いますかね。リアクトのフレームワークですね。
これがささっとできるし、今私も勉強中だったこともあって、結構身近に感じるフレームワークなので、もうサクッと使っちゃいます。
何年後かにはマナさんの身につくシリーズから出るんですね。
大変だぞ、これはね。リアクト周りは本当に更新が早いので、フレームワーク周りはそうですね。
JavaScript会話に生きる人はうんうんってうなずいてくれてると思うんですが、1年後にこの書き方使えるのかって言ったらちょっと不明な点もあったりするので、結構大変なんですね。
この辺も楽しめる人だったらリアクトNext.jsおすすめです。
あとはそうですね、結構最新の技術はゴリゴリ使いたいタイプなので、画像とかWebPとか形式をJPEGじゃなくてWebPにしてSVG使ってとかで最適化してとかその辺はいろいろ試みるかなと思います。
WebP?
WebPっていうのが画像の形式でJPEGとかPNGとかGIFとかそういうの聞いたことあるんじゃないかなと思うんですが、最近WEBPって書いてWebPって読む形式があったりするんですね。
これが軽量で読み込みも早く綺麗でっていうので、最近は結構使われてきてるかなと思います。
2つ目の質問です。
Web関連の技術は進歩が早いですが、最新の技術やトレンドにはどのようにキャッチアップしていますか?
これも結構聞かれるんですが、私は毎日毎朝1時間情報収集の時間を決めていますので、そこで必ずチェックしてますね。
で、その時間内で見れるものだったらささっと見ちゃうんですが、もう少し深掘りして知りたいなっていうものは週末だったり時間のある時にガッツリ使って確認したりっていうこともあります。
21:02
かけだしちゃんはどんなですかね、なんか技術トレンドだったりとか技術の勉強キャッチアップとかしてますか?
Twitterですかね、フォローとフォロワーさんがだいたいWeb制作界隈の方なので、ぼーっと見てるだけでちょっとは情報を得られてるんじゃないかなと思うんですけれども、自ら集めに行くっていうのはできてないです。
でもTwitterもね、自分でそうやって目に留めてるっていうのもありますので、全く使わない人よりは全然いかないと思いますね。
マナさんは毎日このサイト見てるよといった情報収集のために見てるサイトとかありますか?
はい、あります。いくつかありまして。私もTwitterでフォローしてるのが流れてくるっていうのをチェックしたりっていうのもありますし、海外のものだったらDev2っていうDev.toっていうサイトがあって、Devコミュニティっていうものがフロントエンド界隈についてはこちらで流れてくる情報を見たり、
全部英語なのでちょっとうえってなる人もいるかもしれないですが、結構新しい技術をまとめられているのでそこを見たり、あと日本語だったらのハテナブックマークのITかな、テクノロジーかなっていうカテゴリーをチェックして、日本で流行ってる技術だったりそういうのをチェックしたりはしますね。
ハテナブックマーク。
これね、昔からウェブ会話にいる人にとっては馴染み深いものかなと思うんですが、駆け出しの方にはちょっとなんやそれってなるかもしれないですね。
そうですね。誰かが記事を書いてるではなく、いろんなところの記事が集まってきてるんですか?
そうですそうです。いろんなところのブログだったりウェブサイトだったりをオンライン上でですね、ブックマークしてそれがランキングみたいな形で何人がブックマークして今話題だよっていう形で紹介されてる感じですね。
いろいろありますね。
そうなんですそうなんです。結構ね、テクノロジーとかだったらウェブ会話だったり、IT業界のこともあったりするんですが、アニメとゲームとか、面白とかいろんなジャンル見てみると、なんかね、すごい面白い。ここから抜け出せなくなっちゃったりもしますので、時間のあるときにちょこちょこっと見てみると面白いと思いますよ。
はい。
それではエンジニアちゃん、お便りありがとうございました。
ありがとうございました。
今日はいくつかメッセージを紹介しました。たくさんのメッセージありがとうございました。
ありがとうございました。
今回はお便りスペシャルということでしたが、書き出しちゃいかがでしたか?
こうしてお便りいただけると、ポッドキャストを聞いてくださっている方がいるんだなという実感が湧いてきまして。
そうですよね。
嬉しいですね。
時間の関係で全部紹介できなかったりして、今回まとめて紹介したんですが、意外と来てたという感じですよね。
24:00
美味しそうなお名前が。
美味しそうなお名前、そうですね、多かったですね。
シフォンさんに、みたらしさん、おもちさん、エンジニアちゃんです。
ありがとうございました。
ありがとうございました。
意外と喋れましたね。
そうですね。
書き出しちゃん、アドリブが弱いということで、今回紹介しながら書き出しちゃんに振るのが、いささか不安ではあったんですが。
そうですね。最初に全部のお便りを出しておいて、欲しかったなと思っているんですけど、なんとかなってます?
なってます、なってます。
よかった。
ちゃんとキャッチボールできてます、たぶん。
よかったです。
このようにお便りいただきましたら、今後も読んでいこうと思いますので、どんどん送っていただけると嬉しいです。よろしくお願いします。
お待ちしております。
さて、この番組では感想や質問、リクエストなどお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
TwitterではカタカナでハッシュタグWebカフェをつけてツイートしてください。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech AcademyはWebデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。
Webクリエイターボックス、マナと駆け出しちゃんでした。
