00:08
鎌倉ふたり暮らしラジオ、パーソナリティを受け止めます、ともちんとえりなです。
この番組では、鎌倉でふたり暮らしをする30代の夫婦、ともちんとえりなが、鎌倉での暮らしを通してパートナーシップや家族のあり方について考え、ゆるく語り合っていきます。
本日は第40回です。よろしくお願いします。
よろしくお願いします。
おー、40回。
すごいですね。もうそんなに回数なったんだ。
はい。ま、本題入っていきましょうか。
そうですね。はーい。
毎週聞いてくださってる方は、先週の放送を聞いて、今ホームページ作りたくなっているところだと思うんですよ。
怖い怖い。なんか怖いよな。
はい。ということで、前回、鎌倉ふたり暮らしラジオのホームページを作りましたっていうものの、きっかけとか参考にしたサイトとか、こだわりポイント、今後こういうことやっていきたいっていう話をしたので、
じゃあどうやって作ったのかっていうのを今日はね、話していきましょうか。
はーい。じゃあ具体的にこう作っていった流れというか、そういう部分ですね。
はい。の前に、いやホームページ作ってみたいなーって思ったけど、いや別にそうでもないなーって人もまだいると思うので。
そうなの?なんか難しいなー。
やっぱ人って複雑な心境だと思うので。
まあそうね。心のね、こう動きをね。
なので、いやでもホームページ作るのいいよっていうのをちょっと教えてください。
私が?
うん。
あーなるほどなるほど。そっか。
自分がやってるポッドキャストに対してちょっと興味を持った人とかがこうホームページに来てくれて、具体的にどんなポッドキャストなのか、どんな人がやってるのかとか、おすすめエピソードだったりとかっていうのがこうまとまったところがね、情報まとまったところがあることによって良さを知ってもらえる。
でそれによってまた新たなリスナーを獲得できたりっていうチャンスがね、生まれたりするっていうところだと思いますね。
それってなんかノートとかブログサービスじゃダメなんですか?
いいですよ。
いいんだ。
はい。
4,3回の答えだった。
いいじゃん。え、ダメなの?
じゃあ一応私的なブログサービスとかとのホームページ1から作るのの違いで言えば、ホームページだと前回も話したんだけど細かく分析できますと。
えーそうね。
そう。なんていうキーワードでホームページに来たのかとか、どこがクリックされてるのかとかっていうのをもとに、あ、じゃあ今度はこういうことしてみようかとか。
その分析から次のホームページを変えるであったりだとか、次こういう何かポッドキャストにも活かせることにもつながるのかなって思ってるのが一つと、あとはやっぱ世界観を表現できるっていうのかな。
やっぱり何かこうブログサービスとか、そういう既にあるサービスからもちろん楽で簡単にできていいんだけど、操作のデメリットとしてやっぱこう決まったテンプレートのものになっちゃうっていうのがあるから、
03:04
まあ一から作ることによって、なんか自分たちの好きな世界観、デザイン?
うーん。
まあそうですね。自分たちのポッドキャストの世界観とかをそこでもまたビジュアルとして表現することができる。
そうね。どんなポッドキャストなのか。ゆるふわ系なのか、結構がっつり学び系なのか、ビジュアル系なのか。
ビジュアル系?
ビジュアル系ポッドキャスト聞いたことないから。
うん、あんのか。
ポッドキャストでビジュアル系って意味がわかんない。
意味わかんないよね。え?みたいな。
はい、そんな感じです。
はい、わかりました。
ここまで聞いて改めて皆さんね、ホームページ作りたくなってると思うので、ないかな。
はい、じゃあそのままなった人は最初に何をしたらいいですか?
うーん、そうですね。熱い情熱を燃やす。
大丈夫ですか?ありがとうございます。
キックオフミーティングですね、私たちはしました。
はーい。
まあ、言い方を変えると、要件定義とかも言ったりするし、
あとこう、誰かにお願いするんだったら、じゃあ最初に一回ヒアリングさせてくださいみたいな感じになるのかなっていうことだよね。
具体的に言うと、何のためにサイトを作るのかとか、
どんな、例えば目標がありますかとか、誰に向けて作るんですかとか、
なんかコンセプトはありますか?みたいなこと?
うん。
で、じゃあ今回自分たちの場合で言うと、どうしてサイトを作るんですか?
はい。一番分かりやすいのは、もうかまふたの認知度拡大ですね。
はい。
そのために、あの、記事を作って、記事からのそのホームページへの流入と、
あと、まあそれを読んでかまふたのことをより知ってもらうみたいなことがメインになってくるかなと思っています。
はい、そうですね。
やっぱりまだまだポッドキャストって聞いてる人が少ないっていうのかな、そもそも。
うん、そうだね。
だからちょっと違うところで言うと、YouTubeにも配信できるようにもしたし、
今回こうホームページ作ることによって、
本当に聞いたことない人が、なんかこういう番組あったんだとか、
なんか面白そうだなって思うきっかけになるといいかなっていうことかな。
うん、そうだね。
なので、ポッドキャストのプラットフォームでないところから、
新たなリスナーを獲得していくっていうことを狙いとしてるね。
はい。
はい。
で、じゃあもうちょっと具体的に言うと、
次ターゲット、誰にどんな価値を提供するのかっていうところで考えましたね。
そうですね、一つ目が、すでにリスナーの人、かまふた聞いてくれているリスナーの方に向けては、
音声だけじゃ伝わりにくいこととか、
画像があったほうがもっと分かりやすいよねとか、
文章でもっと見たいなみたいな時に見てもらえるように、
06:03
画像と文章で記事を作るっていう。
そうだね。
なんか両方あることでやっぱいいのかなっていう、
長らぎきで聞ける音声は音声の良さがありつつ、
文字でとか画像で見たほうが分かりやすいこともあったりするからね。
あるある。自分たち聞いてても思うこととかある。
家具の紹介とかさ、
どんな家具か具体的に見せてほしいみたいな。
画像みたいなとかあるからね。
あとは結構自分たちだと、
そういうカップル、今付き合っている人とか、
これから同棲結婚する人とか、
あとは結婚して、ライフイベントについて話しているので、
そこに共感する人というか、
同じような感じ、もしくはこれから自分たちもそうなるなみたいな人に、
体験談としてね、読めるもの、聞けるものを提供していけるといいかなと思ってます。
そうですね。
コンセプトっていうのも考えたんだけれども、
だいたいその通りで、
鎌倉で二人暮らしをする30代夫婦が、
パートナーシップや家族のあり方について考えるメディアっていうのに対して、
興味を持ったりとか、共感してもらえる人に、
音声や文字で情報を届けていきたらいいなっていう感じですね。
そうですね。あとは、
目標とかも決めたけど、これ結構難しかったですよね。
まあそうだね。目標ね。
そうですね。私たちは割と仕事で、
じゃあこれやりますってなったら、
必ず結構明確な目標を決めてやるゴールというか、
やるけど、うーんみたいな。
まあでも一応仮でね、こういう風になったらいいかなみたいなね、
裏の目標として設定しましたね。
そうですね。しましたね。
あとはコンテンツもね、結構やりたいはたくさんあったよね。
こういうの作りたいとか、たくさんあったけど、
じゃあ自分たちの決めた期間に対してできそうなもの、
必要なもので整理していって、
厳選していった感じね。
そうだね。
やってるのと、
あとは最後そのミーティング、打ち合わせ、スタバで話したのが、
最後、トンマナ?
言い換えるとデザインのコンセプト。
っていうのをどうしようかなっていうので、
最初はピンク色がいいよねとか言ってたよね。
あーそうだね、ピンク良くない?みたいな。
なんだその。
でも私たちのやってる、そもそもポッドキャストって、
鎌倉二人暮らしラジオで、
今使ってるアートワークが、
二人で浴衣を着て、
鶴ヶ岡八幡宮に行った時に撮った後ろ姿の写真。
09:00
なんだよね。だから結構和風。
で、色もビビッドな感じ。
だからアートワークとあんまりかけ離れてない感じがいいかなって最初思ってたから、
メインカラーは赤かなって思ってたけど、
ちょっと赤だと結構きついかなっていうのもあって、
いろんなサイトをね、
二人でそういうサイトのギャラリーとかを見ながら、
ピンク良くない?みたいな。
ピンク可愛いねみたいな。
ピンク良いじゃんみたいな言いながら見たりとかしてたから。
ピンク可愛いんだけど、
ピンクから考えるのもちょっと違うのかなと思って。
結論、最終的にピンク色に近いものを使ってるんだけれども、
なんでピンクを使うのかっていうところで、
どんなキーワードで言うと何が良いって聞いたら、
ハーモニー、優しい、可愛い。
そうだね、それはもう迷うことなくパーって出てきた。
出てきたね。
ちなみにハーモニーってどんな感じなんだっけ?
ハーモニーは、私たちのサイトって一色じゃなくて、
複数の色を使ってるんだけど、
そういうパートナーシップとか家族とかがうまくいくのって、
一つの要素だけじゃないから、
いろんな要素が合わさってバランスを取ることによって、
家族とかパートナーシップでできていくよね、みたいなのを表現する。
っていう意味合いがあります。
素晴らしいですね。
ありがとうございます。
素敵です。
っていうのが、2時間くらいかな、スタバで話して決まったことかな。
そうだね。
かかってる時間としてはこの後の工程、
ワイヤーフレームとかデザインとかコーディングの方がかかっているんだけれども、
結構大事なのはやっぱり最初なのかなっていう気はしてる。
でもそれは言うよね。
やっぱり一番最初の決めることをどれだけがっちり決められるか、
具体的に決められるかで、やっぱりその後変わってくる。
一人だったらそれでもいいにしてもさ、
2人でやってたらさ、
出来上がったのが私が思ってたのと違うとかさ、
そのピンクじゃないんだけど、
とかなったりするわけじゃん。
だから結構大事かなとは思う。
そうだね。
ここが合ってると、
その先をデザインで決める時も、
配色に迷わないとか、
これだったら、このコンセプトだったら、
ピンク単色じゃなくて、
他のいろんな複数の色を使っていこうかとか、
そうだね、みたいな感じで決まりやすいのかなって感じですね。
そうだね。
あとは、ザザッと流れで言うと、
ワイヤーフレーム。
言い換えるとデザインのラフっていうものを作って、
12:00
デザインしてコーディングすると、
サイトは完成みたいな感じになっていて、
ザザッと詳細話すと、
通称ワイヤーフレームっていう、
だいたいモノクロで、
ここにこういう要素を置いて、
次はこの要素、このコンテンツがあって、
みたいなのを、
ページに何があるのかを決めるみたいな感じかな。
うん、そうだね。
デザインとかね、カラーとかは、
まだそこでは決めずに、
とにかくどんな内容、どんな順番で見せていくのか、
みたいなところをね、
メインで作っていって、
まずはそれをビジュアル化して、
ビジュアル化して、
2人でチェックして、
みたいなところだよね。
で、まあだいたいこんな感じだよね、
っていうのはそこはササッと決まって、
次デザインね、やっぱ難しいよね。
うん、難しいね。
結構トモチにいろんなの見てたよね。
そうだね。
ただこの時も、
一から考えるんじゃなくて、
今の世の中、便利なんですよね。
はい。
ウェブデザイン、ギャラリーサイトって調べると、
いっぱい出てくるんだよね。
出てくるね、たくさんね。
ちょっとありすぎるくらいだけれども、
何見たかな?
ちょっと名前覚えてないので、
概要欄とか、
Xのリンク貼っておこうかなと思うんだけれども、
すごい見やすいなっていう、
自分の中で思ってるサイトがいくつかあって、
その中から、
キーワード検索できて、
優しいっていう雰囲気のサイト、
ぱぱぱって、
もう何百個か出てくる中で、
それを一つ一つチェックしていって、
これのここ参考にできるなとか、
このフォントいいなみたいな感じで、
選んでいったっていう感じですね。
はい、そうだね。
これもね、一個一個、
この部分どうしようかなーっていって、
ギャラリーサイトいろいろ見てて、
これはじゃあ、
ここのこれ真似しようみたいな感じでね、
やってたね。
そうそうそうそう。
なので本当に、
ゼロイチで作るっていうよりは、
ほとんどが、
やっぱ何かと何かの組み合わせっていう感じ、
なっていて、
特にやっぱりポイントは、
3つあるとしたら、
配色、フォント、レイアウト。
で、配色は今回は、
主にメインとしたサイトがあるんだけど、
そこが結構多色で、
和っぽい感じでもあるのかな。
そうだね、和だね。
和だけど、
あんまりかわいい感じだよね。
だからそこからちょっと、
色は真似させてもらったりとか、
あとフォントは、
つくしA丸ゴシックっていうね、
丸みを帯びた字を使っていて、
これが結構やっぱサイト全体の柔らかい、
優しい印象になってるのかなっていうの。
癖ないしね、
使いやすい、かわいい感じかな。
普通のゴシック体とも民調体とも違う、
この丸ゴシック体とかいうカテゴリーはあるんだけど、
それが結構よかったのかなっていう。
15:02
あと最後、レイアウトとしては、
前回もちらっと話したんだけども、
Podcast、Spotifyとかのこのアートワークが、
角っこが丸い四角形。
だからそれを全体に統一するモチーフとして、
結構使うようにしてみました。
はーい。
では、次はコーディングですね。
この辺は専門知識でもあるので、
ざざっといくと、
聞いたことあるかなっていうので言うと、
HTMLとか、CSSとか、
あとJavaScriptとかっていうね、
ものを書いていきます。
はい。
と、いつの間にかに完成してます。
いつの間にかは完成しないんだね。
地味に時間かかるんですけど、
個人的にともちんは割とパズルを組んでるような感覚。
で、結構楽しくできるかなっていうので、
夢中になってやってました。
だね、だけどこれね、大変なのが、
デバイスによって大きさ違うから、
パソコン、タブレット、スマホ、
スマホもいろんなサイズがあるから、
やっぱそこがね、今大変ですよね。
そうなんですよ。
これが、なんか画面が一つ、
パソコンの自分が使ってる、
ともちんだったらMacBook Airの画面、
横幅が1440ピックスっていうサイズの、
使ってるから、
それで綺麗に表示するだけだったら、
そんなに難しくないというか。
それはね、できる。
まだいいんだけど、
ちょっと手間なのが、
スマホもいろんな画面のサイズがあるし、
またiPadがあったり、
パソコンもWindowsとMacでちょっと違ったりとか、
あとはそのブラウザによっても、
Google ChromeなのかSafariなのか、
Firefoxなのかとかでも、
ちょっと違ったり、
崩れちゃったりすることがあるよっていうね。
なのでそこは、
それぞれ最終的には、
どのブラウザ、デバイスとかでも、
崩れないように確認しました。
はい、ありがとうございます。
はい。
あとはドメインとかサーバーの話ですかね。
はい。
お願いします。
はい。
サーバーに関しては、
そうだね、もともと私が使ってたものがあるので、
それを流用するっていう形にはしたんだけど、
ちょっと前提から話すと、
ホームページって、
家の建築で例えると分かりやすいかなと思っていて、
自分たちこのドメインサーバーってもうなじみがありすぎてさ、
今その前行こうと言ったけどさ、
全然初めて聞く人は何って感じかなと思ったときに、
サーバーっていうのがまず土地かな。
家で言うときの土地買う必要があるよねって、
借りてもいいんだけれども、
で、ドメインっていうのは、
土地に名前を付けましょうっていう。
住所みたいな。
のが必要で、
それぞれ調べるとレンタルサーバーとか、
ドメイン取得のサービスがあるから、
そこから選んできたっていう感じですね。
そうですね。
そうですね。
サーバーは、もともと使ってたのがあって、
18:01
これもいろいろ調べたけど、
やっぱり安く使えるもので、
っていうので探していって、
とにかくコスパ優先にしました。
で、もともと使っていたロリポップのギャス弁のプラン、
プランどれだったか忘れちゃったけど、
を使っています。
で、ドメインもね、結構2人話したよね。
そうだね。
金額だったりとか、どのサービス使うかもそうだけど、
ドメインっていうのがURLみたいなもの?
そうだね。
なんとかかんとか、
ドットコムとかね。
よくあるね。ドットコムとかドットCEO、ドットJPってあるものの、
その前の部分を何にするかっていうね。
で、ここがね、同じ文字でもドットコムなのか、
ドットJPなのか、ドットラジオなのかとか、
結構いろんな選択肢はあるんだけど、
それによって金額が違うっていうのがありまして、
一番やっぱりオーソドックスならドットコムだけど、
ただドットコムはちょっと金額が高かったりっていうのが
ものによってある。
とかもう既に使われていたりとかね。
そうだね。会社さんで使われてたりとかっていうのがあるよっていう感じで、
私たちが選ぶ、決める際に大事にしたのは、
やっぱポッドキャスト内で音声で自分たちのホームページのことを伝えることもあるから、
その音声で言っても伝わりやすいのがいいかなっていう話はしたかな。
そうだね。
はい。
最後に分析のサービスを設定しましたよっていうんだけれども、
まあそんなのがあるんだなぐらいに聞いてもらえばよくて、
GoogleのサービスでGoogleタグマネージャーっていうのとか、
Googleアナリティクスとか、Googleサーチコンソールとか、
あとマイクロソフトのクラリティっていうのとかで入れて分析ができます。
はい。そうですね。
まあそういうこともありますっていうだけ、
またこの辺は割愛しようかなと詳しく言ってもあれなのかなっていう。
まあそうだね、あんま詳しく言っても、
こういうの入れとくとどの記事がね、いっぱい読まれてるとかっていうのが分かったりするので、
そういうのをやりたい人はちょっと一個ずつできるときに入れてみると面白いかもよ。
一つ面白いエピソードとしては、
このマイクロソフトクラリティっていうのだと録画機能があって、
誰かがこのサイト内でどういうスクロールしてクリックしたのが見れますよっていうもので、
基本的に個人情報は取れないというか、
誰がっていうのは分からないんだけれども、
どの地域かっていうのが分かるんですよね。
はい、国。
国がね、分かって、
なんかアメリカから見てくださってる方がいるんだなと思って、
ちょっと見てみたら、
21:00
ここでスクロールして、
一回戻って、
ここクリックしてるんだみたいな。
ここめちゃくちゃ見てるじゃんとかね、
2人で見ながら爆笑してたよね。
面白い。
アメリカの、某アメリカに住んでる方ありがとうございます。
ありがとうございます。
逆にそれもね、興味深かったけどね。
面白かったね。
面白かった。
そうですね。
はい、こんな感じでしょうか。
そうですね。
はい。
ポッドキャスターさん、
ホームページ、
こんなガッタリで一から作らなくてもね、
何かWixっていうサービスとか、
あとスタジオっていう、またそれも、
こういうコーディングとかしなくていいツールが、
最近便利なものいろいろあるので、
出会ったりとか、
何かしらそういうのを使って作ってみるのはいかがでしょうか。
そうだね、最初のステップとしては、
できるだけ手間がかからず、
お金もかからない、
そういうWixとかスタジオだと、
そもそもドメインサーバー、
自分で取る必要もないし、
テンプレみたいなものがあったりするから、
自分たちの入れたい情報をバーって入れていくだけで、
ある程度形ができたりとかするので、
まずは情報をまとめたところを作りたいよっていう場合は、
そういうのを使ってみるのもいいかなと思ってます。
何か気になることがあったらDMください。
はい。
具体どうするか考えてないんですけど、
相談気軽にしてもらえたら何か答えたいなと思ってます。
はい、分かりました。
この番組は毎週水曜日夜6時に配信しています。
ここまで聞いてみて役に立ったなとか、
面白かったなと思ったら、
Spotifyはチャンネルのフォローと星5の評価を、
YouTubeはチャンネル登録と高評価をお願いします。
また概要欄のGoogleフォームや
エックスツイッターから感想や質問をもらえると嬉しいです。
ハッシュタグはひらがなでかまふたでお願いします。
皆さんと交流できるのを楽しみにしています。
お便りもお待ちしております。
それではまた来週。
バイバイ。
