ShimoQuiRadioのサイトをリニューアル。制作における4つのポイントを解説します。クルマ仕事リモートワークフリーランス会社経営プロフィールお問い合わせホームWeb制作ShimoQuiRadioのサイトをリニューアル。制作における4つのポイントを解説します。2019/02/03SHAREツイートシェアはてブGoogle+PocketLINEツイートシェアはてブPocketLINE毎月配信しているPodcast、#ShimoQuiRadioのWebサイトをリニューアルしました。aboutページこのサイトのリニューアル自体は2回目になるのですが、前回作ったときはこちらの記事にも書いているとおり、WordPressのサイトをちゃんと開発した経験が少なく、未熟なものでした。最近、実務や個人的な制作でちょこちょこWordPressのサイトを扱えるようになってきたので、「ShimoQuiRadioのサイトをもっといい感じにしたい」と思うようになり、リニューアルに着手しました。与件/制作におけるポイントWordPressの習熟ウェブサイトからPodcastへの導線を強化なにかしらの「ライブ感」を出すスマホで気持ちのいいUIにするその他の気づきや学び最後に与件/制作におけるポイント個人的なサイトを作るときは毎回いくつかのポイントを念頭に置きながら作るのですが、今回の与件/制作におけるポイントは以下のとおり。WordPressの習熟ウェブサイトからPodcastへの導線を強化なにかしらの「ライブ感」を出すスマホで気持ちのいいUIにするそれぞれ解説していきます。WordPressの習熟これまでWordPressのサイトを1〜2個作ったり、実務でちょっとしたページの改修してきたりしましたが、まだまだ「慣れている」というレベルには達していないと思っています。WordPressに慣れるために、「とにかくWordPressでサイトを作るしかない」ということを考え、今回も迷いなくWordPressで作ることにしました(もともとWordPressで作られたサイトなので、別のCMSで作ると移行が面倒だったというのもあります)。ここでは詳しく書きませんが、今後のキャリアパスを考えたときに「WordPressで難なくサイトを構築できるようになる」というスキルセットは少なからず武器になると思うので、そういった意味でもマスト要件としてWordPressの使用を盛り込みました。実際、静的なコーディングからWordPressへの組み込みは実質7時間くらいだったので、初期のころに比べるとずいぶんスピードは上がったように思います。WordPressはクエリの考え方や、テンプレートなど独自の要素が大きいので、作れば作るほど作業スピードがあがっていきますね。WordPressの構築には、ずっとこの本にお世話になっています。実践的かつわかりやすい内容なので、めちゃくちゃ助かっています。上記の記事に書いたのですが、ShimoQuiRadioは2018年10月にPodcastでの配信に対応しました。それまではWebサイト上のプレーヤーで直接聴くか、音源をダウンロードして聴くしかなかったので、Podcast対応することで使いやすさは劇的に向上しました。Podcastに対応したことで、再生回数も細かく取得できるようになり、配信のモチベーションも上がりました。「どれくらい聴かれているか」は自分たちで把握するだけじゃなく、第三者にも説明しやすい客観的な数値なので、取得できるに越したことはありません。「もっとPodcastで聴いてくれる人を増やしたい」という思いがありました。極論、Webサイト上で再生する人はゼロでもいいくらい。取得できない再生回数はノーカウントなので、あまり意味がないからです。いうことで、今回のリニューアルにおいては、ShimoQuiRadioのサイトからPodcastの配信ページへの導線を強化しました。具体的には、PC版ではちょっとスクロールすると右下にひょこっとポップアップでPodcastへのリンクを表示させ、スマホ版では、画面下部に位置固定でボタンを表示するようにしています。これで、ほとんどの初見の人に「あっ、このラジオPodcastでも聴けるんだ」と気付いてもらえるかなと。このポップアップのアイデアは、BtoBのWebメディアの資料請求のCVボタンを参考にしました。技術的な話このポップアップは、×ボタンかリンクをクリックすると、同じ環境からは1日間は表示されないようにしています。これはcookieのデータを取得して実装しているのですが、「ここが一番むずかしいだろうな」という当初の予想より簡単で、ちょっと拍子抜けしました。プラグイン等も特に使っていません。なにかしらの「ライブ感」を出すShimoQuiRadioは、毎月1日更新するというルールで配信しています。このWebサイトはアーカイブ性もある、活きたコンテンツともいえます。「ちゃんと定期的に更新している」ことを効果的に伝えたい、そう思いました。ShimoQuiRadioは「毎月1日更新」という点はかなりアイデンティティの形成のウェイトを多く占めていますし、実際世の中のPodcast/ネットラジオは不定期のものが多いので、そことの差別化を図りたいと思ったのです。そこで、超シンプルに次回の配信予定日を掲出することにしました。トップページおよび詳細ページのいちばん目立つ位置に出すことで、「このPodcastは定期的に配信されているんだな」と思ってもらうことを狙っています。毎月1日配信ということは決まっているので、実装自体はカンタン。月の数字だけ取得して数字に1を加えて、常に翌月の数字を出すようにしています。スマホで気持ちのいいUIにするこのサイトを見る場面って、自宅でゆっくり椅子に座ってPCで「ん〜」って見るという感じよりは、僕らの会話のなかで「実は、こういうPodcastをやってて〜」みたいな流れで見ることのほうが多いような気がします。このサイトに限らず、ウェブサイト全体がそうなってきているのかもしれませんが。そんなわけて、スマホファーストのサイトにしようということで、デザインはスマホ版から作りました。下の画像でいうと、左側のスマホ版から作り始め、モジュールを拡張してPC版を作りました。下にスクロールしたら隠れるヘッダーとか、文字やボタンのサイズ感とか、スマホで見たときに気持ちのいいサイトになるように調整しました。画像の角丸の感じとかは、最近ハマっている麻雀のMリーグのサイトなどを見て参考にしました。その他の気づきや学び今回、Pug(htmlのテンプレートエンジン)もscssもjsも、できるだけ機能ごとにモジュール化して作っていったのですが、ちょっとした修正の際に、エディタ内でパッと検索して修正できる点がすごい便利だなと感じました。VSCODEの検索機能がめっちゃ優秀ってのもありますね。それから、jsを書くのがもっと楽しくなりました。これまでは、自分ができる範囲のhtmlとcssを書いて満足していたのですが、ちょっとそれに慣れて、次のステージに移行したのかもしれません。htmlやscssよりjsを書いてる時間の方が楽しかったです。いくつかの機能ごとのjsファイルをバンドルしてちゃんと動いたときの感動がすごかったです。昨年末にJavaScriptを体系的に学ぶために『JavaScript本格入門』という本をじっくり1周やったのですが、これがじわじわボディブローのように効いてますね。このタイミングでやっててよかった。この本は机に置いて、常に開けるようにしています。Amazon調べ-詳細)KindleAmazon楽天市場Yahooショッピングまた、できる限りjQueryを使わずにピュアなjsで記述していったのですが、それっぽい「感じ」が出てちょっと気持ちよかったです。fadeIn/fadeOutとか、圧倒的にjQueryのほうがな場面もあるので、都度使い分けるのがいちばん賢いとも思いました。最後にWordPressのサイト制作には少しずつ慣れてきたので、一旦このあたりで学習の意味合いの制作はストップし、次のステップに進みたいと思います。Vue.js、Nuxt.jsをやってみる予定です。ちなみに、これまでの学習の軌跡はこちらからどうぞ。これをお読みの方で、ちょっとした制作の相談とか、お仕事のご依頼などがありましたらお気軽にご連絡ください。制作のポートフォリオはこちらです。ネットラジオのはじめかたを解説します【年齢制限なし】地方移住前に得るべきオススメスキルはプログラミングとブログ【これからはじめる】バス釣り完全初心者向けオススメ記事まとめバス釣り初心者が0から始めるのに必要な予算と道具まとめ【10万円あればOK】こちらの記事もおすすめこの記事を書いた人shimotsu1993年生まれのフロントエンドエンジニア。2017年に東京から鹿児島にUターンし、バス釣りにハマり、2年半後再度関東へ移住。このブログでは、趣味のバス釣りや、Web制作、Podcast配信などのテーマについて書いています。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。「麻雀がめちゃくちゃ好き」ではなかった僕が「Mリーグ」にめちゃ...プロフィールshimotsu1993年生まれのフロントエンドエンジニア。2017年に東京から鹿児島にUターンし、バス釣りにハマり、2年半後再度関東へ移住。このブログでは、趣味のバス釣りや、Web制作、Podcast配信などのテーマについて書いています。