00:01
WEBの世界には、面白い小噺がたくさんあります。
雨宿りとWEBの小噺、パーソナリティのkeethです。
今日も一つ、興味深いお話をご紹介します。
ホームページの見直し
今回の話題ですけど、久しぶりに自分のホームページを見直してまして、
実はまだ未完成なんですよね。
未完成とはいえ、公開をされていて見ることはできますが、
詳細なところがまだ更新されていないので、
そんな感じだなというふうに、興味ある人は見てみてください。
概要欄にリンクも貼っておきますけど、
コートでしゃべると、keeth.meというURLにアクセスすると見れます。
k-e-e-t-h.m-eですね。
で、アクセスすると見れます。
なんか、ちょっとおかたいというか、
少しですね、真面目すぎるサイトになっていて、
個人的にはあんまり好きではない。
なので、これをですね、変えたいなと思っておりますっていうのと、
音声コンテンツの強化
最近ずっとポッドキャストをやってるんですけど、
ポッドキャスト専用のホームページとか、
公式サイトみたいなのを作りたくなって、
それにプロフィールつければ、
一応自分のホームページとしていいんじゃないかと思ってまして、
最近僕の発信というか、
アウトプット基本的には音声が一番多い。
テキストのアウトプットがnoteとか、
全文も一応ちょっと書いてる感じですけど、
他にもブログ系サービスはいくつか使ったんですが、
結果的にはテキストのアウトプットあんま続かなくて、
基本音声でやってるので、
もう振り切ってしまって、
音声用のページを自分のホームページにしようという風に考えてます。
で、作るにあたって、
いろんな公式サイトであったり、
いろんなポッドキャストのページを参考に見させていただいてまして、
すごい参考になるのはやはり海外の方の
公式ホームページとかサイトをすごく見てます。
人のサイトとかデザインを見るのはすごい楽しくて、
いろんなものを見ながら今作り直そうとしている途中でございます。
作るとしたらやはりフルスタックに作りたくて、
ソフトウェアエンジニア、特にフロントエンドに強みと言いますか、
まあ経歴は長いので、
フロントエンドの技術を使って、
自作をしていこうかなと思ってます。
現時点のホームページも自分で、
一から手で作ってますけど、
僕が作るとしたら何で作るか?
フレームワークの話ですけど、
そこはですね、やはり私といえば
Riot.jsっていうブランディングを自分でもしているので、
やはり今回もRiot.jsを使って開発をしてます。
久しぶりにRiot.js触ると、それはそれで楽しくて、
デザインと技術的選択
なんか久しぶりにRiot.jsそのものの発信もしたくなったんですけど、
今回はそこは趣旨と違うので置いておきます。
はい、戻して今は自分のPodcastのサイトを作ってます。
いろんな公式サイトを見てデザイン参考にしてますけど、
結果的にですね、コンセプトとかテーマカラーとか、
大きく3色ないし4色ぐらいのカラーパレットを渡して、
こんなサイトにしてほしいとか、
こういうページを作ってください。
ページの構成であったり、
その中の特にトップページのコンテンツ何を載せてほしい?
やはりヒーロー画像を載せたり、
スクロールしたらヘッダーは固定にしておいて、
スクロールするとそのヘッダーの下に半透明で流れていくようにする。
なのでヘッダーとにかくトップに固定するとかみたいな感じですね。
などなど、そんな感じでいろんな指定をしながらVZeroに書かせてます。
実は今公開しているホームページもVZeroに最初作らせていて、
最初見た時、これ全体的に悪くはないと実は思ったんですよ。
今はちょっと硬すぎるって印象がどうしてもついてしまったので、
あまり好きじゃなくなってきてしまったんですけど、
それでもVZeroでここまでのデザインまでやってくれて、
コードも実は入ってくれるんですね。
VZeroって基本リアクト.jsないし、
Next.jsをベースとしてコーディングしてくれるんですけど、
実は指定をするとちゃんとRiotのコードも書いてくれるんですよ。
拡張子.riotっていうファイルも作ってくれます。
ただですね、コードは書いてくれるんですけど、
画面上に表示することはできないんですね。
リアクトとかで書くと、画面じゃどんな風になってますかって見れるんですけど、
.riotっていうのはさすがにコンパイルしてくれなかったので、
見ることはできなくて、ソースコードを手元に持ってきて、
自分のローカル上で見てますと。
それでもちゃんと出してくれるのはすごくありがたいし、
自分で最初にスターターキットみたいなボイラープレートのリポジトリを用意してて、
この構成で作ってくれって投げてみたんですね。
それでやってくれるので、これは結構高装置なっていう感じはします。
ドメイン自体はもうすでにずっと取っていて、
moomドメインで僕はドメインを取ってます。
keys.meですね。
年間だったかな?1000円ちょっとだった気がしますね。
結構安く買えたんですよ。なのでそのまま使ってます。
ちなみにkeysっていうハンドルネームでやってますが、
keysって普通に考えるとk-i-e-t-hなんですけど、
僕はk-e-e-t-hなんですね。
なので他の人で多分奪われることあんまないのかなと思っています。
.meにするか。.ioにするか。.devにするかなど、
やはり僕はエンジニアリングに主軸を置いたポジションですので、
何のドメインにするかすごく悩んだんですけど、
自分の紹介ページなのでやっぱり.meなのかなっていう風な感じでやってます。
全体メインのカラーとしては緑が多いですね。
サブカラーとして青。
ちょっとグラデーションかけているみたいな感じです。
ページとしてもフォームとプログラムズっていう自分の番組合計6個持ってます。
6番組の紹介のページと自分の自己紹介のプロフィールページ。
最後コンタクトですね。
私へのお問い合わせとかポッドキャストに関するコメントなり感想とか要望なり、
あとお仕事の依頼とかも受け付けてます。
そのためのコンタクトページです。
コンタクトページって言ってますけど厳密に言うとこれ単なるgoogleフォームを置いてるだけですね。
本当はちゃんとここも自作して美しいお問い合わせページにしたかったんですけど、
バックエンド用意するのがちょっとあんまり今モチベーション高くないのでやめてますけどそんな感じです。
もちろん現時点でレスポンシブ対応しているのでちゃんとモバイルでも見れるように今も対応してます。
これが始めると意外と難しくはないんですけど大変なんですよね。
CSSってジェンガみたいな気分があって、
最初にやっぱりモバイルベースでサイトを作り上げてからやるのが良かったのかなって今更ちょっと反省はしてます。
あともう一個こだわってるというか頑張ってるのは言語対応ですね。
一応他言語対応として日本語と英語対応をしてます。
他の言語の対応も別にしても良いんですけどそんな僕のページ見ますかみたいなところちょっとあるので、
今は英語と日本語だけです。
画面のヘッダー部分の右端にですねこのスイッチャーのアイコンを置いててそこをクリックすると
じゃと円を選択できて円にしたらサイト全体が基本的には日本語対応しているページになります。
一部もちろん画像とか最初から文字組み込んでしまってあるものはもうそれを書き換えることはできないので一部だけ日本語が表示されてしまってのはちょっとしょうがないなというので受け入れてますけど。
着々できてきてますので遅くとも今月いっぱいには出せる早ければもう再来週には出せるのかなっていうところで今作ってますのでまたリリースしたら
ツイッターとかでXですね告知出すと思いますので興味あれば見てみていただけると嬉しいだと思いますし
ご意見なりぜひ叩いていただけると嬉しいなと思います。
そんな凝ったデザインとかではないしどシンプルだと思います。
よくあるようなサイト構成デザインで別に何の遊びとかもないので
敷いて遊びをつけるとしたらソースコードの中にASCIIアートをつけてブラウザから開発者ツールでコード見れると思うんでその辺見たら何かしら遊びがあるみたいな感じぐらいはしようかなと思ってますね。
ASCIIアートで遊ぶは結構いろんな会社さんもされてますのでその辺をやろうと思ってますっていう感じで。
ホームページの作成
ちょっと短いですけどね今回はそんな遊びをしてるっていうところでした。
ホスティングとしてはFirebaseをホスティングにしていてUIフレームワーク、UIじゃないCSSかスタイリングのためのフレームワークは今回なんか新しいの遊んでみたいなと思って
Tailwind CSSを使ってみようと思ってたんですけど一回やったことあるしそんなにTailwind好みではなかったんですね。
要はユーティリティ関数の塊ではあるので。
使い勝手は良いんですけどドームが長くなるのがどうしてもちょっと僕は受け入れがたいのと保守性そんな高くないなと思ったのでやめました。
で今は何のフレームワーク使ってるかというとシューレースってやつ。
フレームワークを見つけてシンプルだったし使いやすかったのでそのまま今使ってます。
ただまあメンテナンスがあんまされてなくてですね最終コミットも確かに年単位でなされてないので
まあちょっと古いからやめようかなと思ったりどっかで乗せ替える気はしますけど現時点はまだまだ使えるので一旦は残してますねっていうところです。
今回海外のサイトすごく参考にし始めて面白かったので皆さんもPodcasterさんのホームページ見に行ってみてください。
Podcast専用の公式サイトですね。
特にやっぱフッターとかに特徴だったり傾向みたいなのがありますね。
全面ヘッダーフッターもつけてないようなサイトもあればそういう独自なデザインのサイトもたくさんあって
まあ見るだけでなかなかアートを見る感触としては面白いと思うので参考になるというよりも
たまにこの部分だけのデザインはすごくパクりたいなって結構出てくるんですよね。
割と一覧表示されていてエピソード一個一個の表示もカードコンポーネントのこの部分のこだわり強いなとか
ここのマウスオーバーした時のアクションだけ特殊性があってとかあると思うんでね。
一部であれば全然パクっても大丈夫なはずですので。
サイト全体はさすがにAll Rights Reservedされているのでそれはダメでしょうというので
著作権に抵触してない限りの今もしサイトを持っている人とかこれから作りたいという人は
世界中の美しいもしくは面白いデザインのタイトルを見ていただくといいのかなと思いました。
ポッドキャストイベントの紹介
はいでは今回はこんなところで終わっていきたいと思います。
エンディングです。
今回もエンディングなんですけど
いつもだったら僕のこの番組の一番最後に今ずっと告知をしてます
ポッドキャストスターアワードがあるんですけど
それは今回も一番後ろに載ってくるので置いといて
もう一個別のイベントで今回ジャケ劇っていうものを僕は参加させていただいてます。
文字通り各ポッドキャストのジャケットを見てそれに対して自分の感じたこととかを語っていく
ついでにその番組の紹介もするみたいなやつです。
加えてもちろん自分の番組のジャケット自体もそうやって他の方がコメントしてくださるので
僕自身も僕自身のやってるこの番組のジャケットについて軽く語りつつっていう感じです。
加えてクラウドファンディングが今回も出されていて
いろんな方々のジャケットが見れたりとか
あとは推しのジャケットに対して投票ができたりとか
自分自身のジャケットを物理的に出力してあるキャンバスみたいなものに出力してあって
それを買うこともできるんですよ。
僕むしろこれが一番やりたくて
物理で持つのってめっちゃ楽しいんですよ。
ポッドキャストもしやってる人でも
自分のこのポッドキャストのアートワークっていうのを物理で持ってる人ってそんな多くないと思うので
やってみてください。全然何でもいいと思います。
コンビニとかで出力するやつでもいいと思うんですけど
やっぱり生で見ると全然話変わってきてテンション上がりますし
それを壁に貼っておくだけでも
気分が高揚するのでぜひやってみてください。
ジャケギギっていうイベントでした。
すみませんもう一個だけ宣伝があります。
ウェブクリエイターポッドキャストデイ2025というイベントが
今年の9月13日の土曜日
原宿はJWAVEアートサイドキャストってところで行われます。
合計何番組かちょっと忘れましたけど
12番組か。12番組がリレー形式で生配信を
ライブ配信をするんですね。
それぞれの番組は後で
多分収録して公開できるのかな?
ちょっとこの辺は確認しないですけどあります。
この12番組の出演する番組
大体テック系が多いですね。
ウェブクリエイターって書いてますので
テック系が多いですけど
デザイナーの方もいらっしゃったりとかしますので
Xのスペースか
FacebookライブもしくはYouTubeライブ
そしてボイシーの方ですね。
いくつかのやつがあるので
この中で無料で聞けるようになってます。
ライブ配信ですのでそこだけ注意してください。
この中だとテック系だとやっぱり一番有名なのは
ヒマチンプログラマーの週末エンジニアリングレッスンとかが
常に上位にいる番組ですので。
あと個人的に聞いてるのは
ゆるITエンジニア道場と
マナのウェブクリエイターカフェなどなど
いくつかですね
ランキングでも上位に来てるとか
皆さん見たことある番組たくさんありますので
ぜひぜひこちらも聞いてみていただければなと思います。
はい、じゃあ口も終わったので
クロージングにいきたいと思います。
この番組面白かったよという方は
ぜひチャンネル登録もお願いします。
もし聞いていて気になることや話してほしいトピック
感想などございましたら
Xでハッシュタグウェブ小話でつぶやいてください。
ウェブはアルファベット
小話は漢字でもひらがなでも大丈夫です。
それではまた雨宿りしに来てください。
今回もお聞きくださりありがとうございました。
雨宿りとウェブの小話
お相手はヒースでした。
さよなら。
今日も喋ってるそこのあなた
第2回ポッドキャストスターアワード2025
開催中です。
雑談でも語りでもゆる配信でも
あなたの声応募してみませんか?
対象には10万円ほか豪華特典も
詳しくはpodcaster.jpをご覧ください。
ナンバーワンポッドキャストクリエーターは誰だ?
