00:04
ManaのWebクリエイターカフェ。WebデザイナーでWebクリエイターボックスを運営しているManaです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、Mana的Webデザインニュース2月号です。
最近あったことだったり、最近気になるWebデザインのニュース、読んだ本なんかを紹介していきたいと思います。
近況についてなんですが、Xなどでお知らせをしているんですが、ITエンジニア本大賞というのに、前回ノミネートされたというお知らせをしたと思うんですが、そちらにですね、ベスト3に選出されました。ありがとうございます。
トップ10の発表があったのかな。
技術書部門とビジネス書部門、それぞれ10冊ずつ紹介があって、さらにその中のトップ3に選ばれたというものです。
こちら各10冊ずつ、20冊がですね、Webサイト上に紹介されているんですが、どれも見ごたえのあるものばかりで、私も実際に読んで紹介したようなものもたくさんありましたので、
何か読みたいなとか、ちょっと最近勉強してなかったなという方は、こちらを参考に次読む本とかを探してみるといいと思います。
トップ3に入った方はですね、さらにプレゼン大会というものにお呼ばれしまして、
2月15日、木曜日のDevelopers Summit 2024、Dev Summitですね。
こちらに招待されまして、この本を書いたきっかけだとか、内容だとか、そういうのをプレゼンしてくださいというふうに言われています。
プレゼンかと思いながらですね、5分間ぐらいの、結構短いものではあるんですが、なかなかの人数が集まるようで、今から緊張しております。
はい、頑張ります。
このDev Summit、ちょこちょこですね、毎年開催されているのかなと思いますが、今回は東京ベルサール羽田空港というところで開催されるようです。
参加費は無料とのことなので、ぜひ事前登録をして現地で聞いてみてください。
いかに緊張しているのかというのが伝わると思います。
緊張しないようにね、頑張って喋りますので、よかったら聞いてみてください。
その他、プライベートなお話だったら、私、駅伝に出ることになりまして、駅伝ってちょっとなんだそれ、みたいな感じなんですけど、運動をしていて、69回のお話の中でトライアスローに出たよ、みたいな話をしたかと思うんですが、
それを知っている地元の友達からですね、声をかけていただきまして、走れるよね、みたいな感じで。
走ってるけどってなったら、駅伝ちょっと人数足りなさそうだから、ちょっと来てくんないっていうことで、地元である駅伝大会で走ることになりまして、そんなに長くないんですけど、3キロとか4キロくらいなんじゃないかなと思うんですが、
03:09
そこに突然入ることになっちゃいまして、今から緊張、これもね緊張ばっかりなんですけど、突然呼ばれて、突然ね、させられたりってこともあるんですが、はい、頑張ろうと思います。
で、その駅伝って皆さん地元でも多分あると思うんですね。今聞いてる方の中でも地方の方だったり都会の方に住んでる方もいらっしゃると思うんですが、実は結構地元の方で開催されてると思うんですよ。
で、ただ知らないだけっていうことがよくある話で、地域のイベントだとか、スポーツ大会とか、そういうのご存知ですかね。なかなか、あの地方とかだったら、なんとか町頼りとか、なんとか市頼りみたいなのが配られたり、あと階段板っていうのが回ってきたりっていうのもあると思うんですが、
都会の方だと、なんかそういうのがないらしく、どうやって地域の情報を得てるのかなっていうのが不思議にずっと思ってて、聞くところによると、能動的に動かないと、その地域のウェブサイトに行くとか、インスタグラム見るとか、そういう自分から動かないとイベントの情報とかが得られないっていう風に聞いたんですね。
で、そうなると地方の方だったら、私の地域だったら、各州2週間に1回、なんとか市頼りみたいなのが届いて、最近行われたイベントの内容とか、今後こういうのやります、なんとかピクニックみたいなのが結構来るんですが、そういうのが都会の方はないという風に聞いてます。
で、地域の方だったら、ウェブサイトが逆になかったりするので、本当にその紙のお便りしか告知をされないんですよね。
だから、リーチする層も本当にそこに住んでる人しか知らない情報がたくさんあったりするんですよね。
で、その駅伝の話とかもウェブサイト、なんかかつての駅伝どうだったのかなって調べてみたんですけど、なくて、そんな情報がまるでなくて、もう本当に私の幼馴染のFacebookで去年こんなのしたよみたいなのをやっとたどり着いてみたみたいな、その程度なんですよね。
だから、情報を集める手段だったり、そういうのは全然違うんだなと感じました。
それもですね、69回でお話しした通り、スポーツだとか、そういう地域のイベントのウェブサイトがないとか、あってもすっごい古くて見づらいとか、こういうところでビジネスチャンスがあるんじゃないかなという風に感じてます。
前回のそのスポーツイベントでも、管理する人が多分いないとかなんじゃないかなって思うんですね。その詳しい方がいないから、相談したいけど誰に相談すればいいかわからないとか、そういう人に向けて駆け出しのね、地域の方に住んでらっしゃるフリーランスの方とか、私できますよとか、私だったらこうしますよとか、勝手に作っちゃってこんなの作ったんですけど、使えませんかみたいな感じで営業していくっていうのも
06:13
地域ならではのやり方ではあるかなと思います。都会の方だったら本当にお店もたくさんある分、ちゃんとマーケティングとかもやってるんですよね。ウェブサイト自分で用意してとか、SNS使ってっていうことはされてるんですが、地域だとどうしてもそういうところが疎い方が多かったりするので、それを助けるのは私よみたいな感じで、自ら手を挙げて動いてみるっていうのもいいかなと思いました。
地域だから仕事がないよっていうんじゃなくて、自ら探していく、自分から動いて掴んでいく、そういうスタンスでいるといいと思います。
続いてですね、最近私が注目しているウェブ関連のニュースとか、そちらの方になってくるんですが、最近本格的に使い始めたのがTailwind CSSというものです。
フロントエンドの方だったらゴリゴリ使っている方もいらっしゃるかと思うんですが、このTailwind CSS、似たようなもので言うとブートストラップがあったりしますが、一言で説明すると、ユーティリティファーストなCSSフレームワークですっていうふうに紹介されてます。
全然わからんっていう感じだと思うんですけど、ユーティリティファーストってなんやっていうところですね。これが一つのクラスに一つのCSSの指定が最初から用意されていて、そのCSSを読み込んだら用意されているクラスを指定した要素に適用されますよっていうものです。
なのでCSSを全く書かずにクラス名を指定するだけでそのスタイルが適用されるっていうようなものになってます。
ブートストラップとは違って、ブートストラップって例えばボタンっていうクラスがあって、それを適用させたら文字のサイズだったり装飾がすべてひっくるめてボタンの形にしてくれるんですが、Tailwind CSSだったら背景色の指定のクラス、文字サイズのクラス、文字色のクラス、大きさのクラスみたいな感じで、とにかくたくさんクラスが用意されてます。
それを指定しないといけないんですが、その分カスタマイズがしやすいんですね。自由度がある感じになってます。
それをこれまでは練習がてら使ってきてはいたんですが、実際に運用する予定のサイトで使ってみたっていうのが初めてで、なぜやってみたかというと、単純に流行ってるとかよく聞くなーっていうのもあるんですが、
Tailwind CSSを採用すると、CSSファイルを作らなくて済むんですね。HTMLとかリアクトだったらリアクトのファイルに直接クラス名を指定するだけでスタイルが作れるので、ファイルがまずいらなくなると。
09:01
ファイル数が少なく済みますっていうのと、ファイルを空けてCSSを書くっていう作業がほぼなくなるので、効率よく進められるんじゃないかなと思ってやってみました。
あと最近イーロン・マスクさんの本を読んでみて、その中で既存の制作の流れは疑えみたいな感じで書かれてたんですね。
これまで当たり前だと思ってたものが今でも通用するのかっていうのを最近よく考えるようになって、これまでだったらHTMLにコンテンツ、CSSに装飾、JavaScriptに機能みたいな感じで分けられたものを、
リアクトだとか、最近私がNext.js使って構築しているので、その中でだったらもうJavaScriptの中にJSXっていうんですが、
HTMLっぽいものもありますし、スタイルもそこで指定できますっていう一つのファイルで完結するので、そういう流れになるんじゃないかなとか、
なってきてるんじゃないかなということで、このTailwind CSSも採用して、これまでの制作とは違う流れでやってみようっていう試みで採用してみました。
やっぱり手順がこれまでと全然違うので、悩むこともすごく多くて、Tailwind CSSの公式のドキュメントも何度も見ながらですね、あれこれ試しているところです。
Tailwind CSS聞いたことあるけど、ちょっと使いたくないなとか使いづらいなっていう思っている方もたくさんいると思いますね。
その理由の一つ、私もこれがあるからちょっと使いづらかったっていうのが、まずクラスがすごく増えるので、
もう一つの要素にこれまでだったら一つ二つのクラス名だったところが、10個ぐらいずらーっとクラスを指定することもあります。
そうなると、もう本当に横長に一行にだーっとクラス名が並ぶので、本当に見づらくなるんですね。
それが嫌だっていう方もいらっしゃると思います。私もそうでした。
で、やってみたら慣れますね。これすぐ慣れました。見づらいなって思ったのは本当最初の1日目ぐらいですぐ慣れたので、まあいいんじゃないかなっていうのが一つあるのと、
あとはいろいろとプラグインも用意されていたので、例えばクラス名が本当に10個ぐらい並ぶ中で順番を統一したいっていうときは、
Prettier Plugin for Tailwind CSSっていうプラグインが用意されていて、VS Codeのプラグインですね。
こちらを入れると自動的に書いたものを任意の流れで、任意の並びの順に書いてくれるっていうものがあったので、
そういうのでチームで運用するんだったら統一感を出すっていうのもいいと思いました。
あとは自由度が低いんじゃないかなと、あらかじめクラス名が決められているので、自分の指定したいやり方が難しいのかなって思ったんですが、
見てみたらそうでもなくて、任意の数値に指定したいんだったら括弧で囲って数値の指定もできますし、
12:07
CSSのカスタムプロパティっていうのも括弧で囲って指定もできました。
なので思っているよりもできることは多いなと思います。
ただこれがこれまでのHTMLとCSSを使ってっていう流れをベースにしていると、あまりメリット感じないかもしれないんですが、
やっぱりリアクトとかビューとかそういうコンポーネントで分けて制作していくものだったら、何度も使い回す要素っていうのはコンポーネントで分けられているので、
CSSにしなくても直接記述したスタイルを使い回せるようになるので、
制作手順で言うとリアクトベースで一つのファイルで管理、こういうのが実現できるかなと思います。
なのでちょっと私のようにですね、くわず嫌いでどうかな気になるけど使ってみるのもなーっていう方とかは一回試しにですね、
簡単な1ページものだとか少ないページのサイトに採用してみると、
あ、意外とできるなっていうのは見えてくるかなと思いますので、よかったらぜひ使ってみてください。
続いて私が最近読んだおすすめの書籍についても話していきたいと思います。
まず1冊目が世界一流エンジニアの思考法という本ですね。
アメリカマイクロソフトのシニアエンジニア牛尾剛さんという方が書かれた本です。
結構人気で書店とかでも見たことあるかなと思うんですが、紺色の表紙の書籍ですね。
これが実際にエンジニアとしての働き方というよりは考え方とか、
生活する上でこういうのも便利だよみたいなものが書かれているもので、
速攻性があるかというよりはちょっと意識を変えてこういうやり方もあるよっていうような、
すごい優しい語り口で書かれているものなので、
世界一流のエンジニアって言われたらすごいなんか思想の強い感じに聞こえるんですけど、
全然そんなことはなくて、こんなやり方もあるよ、こんなことあったからこういう風にしようねみたいな感じで書かれてます。
なのでスラスラと読めましたね。
中でも理解することの大切さというのがすごく伝わってきました。
なんかうまく説明できないなっていうことはだいたい理解が浅いっていう風に書かれてますね。
理解が浅いから伝えられないよと。
ふわっとしか言えないことも、ちゃんと理解して勉強1からし直したら説明もできるようになりますよっていうことを書かれてますので、
考え方そのものを変えるきっかけになるんじゃないかなと思います。
マイクロソフトのエンジニアって聞いたらすごい猛者なのかっていう風に思われがちですが、
これを読んでみるとこの牛尾さんという方ですね、
すごい方なんですが、それ以上にご本人の努力の結果だっていうのがよくわかるんですね。
すごい頑張られたんだな、こういうところを意識して時間をかけて勉強されたんだなっていうのが伝わるので、
15:05
これは読んでいて、なんかあったかい気持ちになります。
そんなハートフルな感じで書かれてはいないと思うんですが、私の中ではですね、すごく優しい本だなっていうふうに思いました。
読んでみてください。
あともう1冊は、クリエイターのための権利の本っていう書籍ですね。
これが改訂版で、前作が5年前に出版されたもので、
5年経つと法律だとかそういう内容も変わってくるので、最新の内容に変わっていると。
他にもAIとかNFTとか新しいトレンドの情報も追加されていて、クリエイターの方は一度見てみるといいと思います。
中でもよく疑問に思われるような著作権とかですかね、いくつか読んでみると、
キャラクターグッズが写り込んでいる写真は利用できるのかとか、二次創作ってどこまでOKなのかとか、
SNSのアイコンってどういうふうに設定するのが正解なのかとか、
あとプログラミングのコードについてですかね、オープンソースって結局どうすればいいのかとか、
その辺が書かれているので、デザイナーだけじゃなくてプログラマーの方とかも読んでみるといいですね。
実際にトラブルがあったときの対処法も書かれてますので、
例えば自分の書いたイラストが勝手に私が書きましたというふうにSNSで出されてますよってなったときどうしようっていうのが書かれてますので、
起きる前に読んでおくっていうのは大切かなと思います。
クリエイターのための権利の本ですね、ぜひ読んでみてください。
それではここでリスナーさんから届いているお便りを紹介していきたいと思います。
チェスナットさんからのお便りです。
皆さんこんにちは。
こんにちは。
初めてのお便りを出させていただきます。
昨年、内藤さんがゲストの会を聞いてとてもシンパシーを感じました。
私はウェブデザイナーやエンジニアではありませんが、フルリモート可能な職種なので定期的に住む場所を変えながら仕事をしています。
東京出身ですが、昔からゴミゴミしている場所があまり得意ではありませんでした。
それによって地域地域のカルチャーを感じつつ、食べ物や名所を楽しんだり、一つの地域に定住するよりもプライベートが充実して、結果とても仕事がはかどっているように思います。
皆さんも海外にいらした時はそういう感覚もありましたか。
今は地元広島にお住まいと思いますが、国内に住んでみるならここという場所があればぜひ聞いてみたいです。
ということでですね、ありがとうございます。
国内で住んでみるならここというのがですね、私は埼玉県半納市というのがもうさっと出てきますね。
なんででしょう。わかりますか。
これがムーミンバレーパークがあるからですね。
実は私ムーミンが大好きで、ムーミンバレーパークもちょこちょこ通っております。
18:03
ムーミンバレーパーク行ったことある方わかると思うんですが、ものすごく自然が豊かで、お散歩するのにちょうどいいんですね。
毎日近くに住んで、毎日うちのワンコのお散歩をムーミンバレーパークの方行ってみたいなという密かな夢があったりします。
あとは私自転車、ロードバイク乗ったりするので、埼玉県多分そういうサイクリングロードとかもあるんじゃないかなと思います。
結構ね走りやすいみたいで、そういうのもあって住んでみたいなと思ってます。
私も海外でカナダのバンクーバーとオーストラリアシドニーとイギリスロンドンに住んで、
ほんとにね、チェスナットさんが書いてくださってるみたいに、その土地どちのカルチャーを感じつつ、食べ物名所を楽しんだりっていうのはですね、すごくわかります。
やっぱ新鮮なんですよね。どこに行くのも、ちょっとお散歩するのも楽しいですし、
特にイギリスに住んでた時は、フランス行くのもスペイン行くのもドイツに行くのも全部近いので、結構イギリスにいる間だけでもフランスに4回ぐらいは行ったような気がしますね。ちょこちょこ行ってます。
はい、っていう楽しみもあるので、そういう人生を謳歌する方法もあると思います。
これがねフルリモート可能な職種でしかできないかなと思うんですが、そういう楽しみもいいですよね。
ただ私はそういう生活を10年以上、10年ちょっとですかね、やってみて、そろそろ定住したいなっていうタイミングが出てきたんですね。
いろいろ引っ越しをしていると家具が買えないとか、ペット買えないとか、そういう悩みも出てきたので、ちょっと地元戻ろうかなっていう流れになったんですね。
なので、チェスナットさんもそのうちちょっとどこかに落ち着きたいなっていうタイミングがもしかしたら来るかもしれないですね。
そのそうなった時にどこに住みたいっていうのを今のうちにリサーチしていくといいと思います。
チェスナットさんありがとうございました。
今日のテーマはファナテキウェブデザインニュース2月号でしたが、生活自体はそんなに変わってはいないものの、ちょっと読む本によっては考え方が変わってきたりとか、
懐かしい友人とお話しして、こういう考え方があるんだなっていうのが分かったり、それを踏まえて今までの仕事の仕方を変えてみたりとか、結構いろんな気づきのある作品かなと思っています。
皆さんもどんなところに気づきがあるか、ぜひぜひお便りでお知らせください。
この番組では感想や質問、リクエストなどお待ちしております。
毎月最初の配信ではお便りの紹介コーナーもありますので、番組詳細欄にあるリンクよりお気軽にご投稿ください。
ネックスではカタカナでハッシュタグWebカフェをつけてポストしてください。
そしてAppleポッドキャストやSpotifyのポッドキャストではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
21:03
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech AcademyはWebデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証する初めての副業コースもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。
Webクリエイターボックス花菜でした。