webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)

      2021/02/16

今回は、お仕事で対応したWebサイトの事例があって、お取引先さまより『ぜひ紹介してくれ』といわれたので、ご紹介いたします。 バンドなど音楽活動に役立てられるコンテンツを、今後追加していける&読みやすいようにしてみました。

■作ったサイト~enjoy your bandえんばん(ミュージックサロンp+luckさま)

本サイト(音楽教室サイト)の姉妹サイトという位置付けです。教室ブログが基本的にレッスン実施内容に特化なのに対し(内部・すでに受講してる方向け)、外部の方にも、『バンドやり方情報・ギターやベースなど楽器の弾き方などの動画コンテンツ』などをお届けする狙いで提案しました。

また、1記事あたりの密度を上げてメインのアメブロなどが拾いきれなかったバンドや楽器関連のキーワードも、将来的に記事を増やして対応できるようにしました。

現在のところ『ギターやベース弾き方動画・バンドのリハーサルや打ち上げ、控え室・音楽活動向けツール』などを取り上げています。

enjoy your bandえんばんURL https://blog.p-plus-luck.com

■技術情報(レイアウトや動画読み込みなど)

■レスポンシブワードプレスサイト・見出しなどで読みやすさ上昇

将来的にはどんどん関連情報を追加していくオウンドメディアサイトにするため、更新しやすいワードプレスタイプにしました。

それに伴い、スマホ対応レスポンシブに。モバイル環境下でもサクッと読める&見出しなども大きめにつけて、視認性や検索ユーザーへの届きやすさも向上できたかと思います。

■動画読み込みエラーを避けるため、videoタグにpreloadを

楽器を弾く手元の動画があると、よりわかりやすくなります。そこで、代表さまより送っていただいた動画などもサーバーアップし、HTML5・videoタグで埋め込みました。 そのまま埋め込むと、サーバーの関係か、再生テスト時に動画が少し止まる感じがあったので、パラメーターに『preload』をつけて読み込んでおくようにしました。autoで自動で、事前読み込みをする感じになります。

これにより『読み込みが間に合わなくて途中で止まる』みたいな点が解消されました。少しトリミングをして、サイズを小さくしておくと、読み込み速度低下を避けられます。 (コード例<video src="動画ファイル.mp4" preload="auto"></video>)

今後も音楽活動情報があがると思うので、興味ありましたらみていただけると幸いです。

enjoy your bandえんばんURL https://blog.p-plus-luck.com


【カテゴリ】 - wpサイト制作事例
【タグ】 -

  関連記事

【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント

今回は以前、管理人が『お取引先の会社のサイト(静的HTMLは持っ ...

【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)

今回は、管理人がお仕事のWPサイト開発で使ってみたテクをご紹介し ...

bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】

今回は、bulma.cssが、お仕事で扱ったお取引先のWordP ...

WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説

今回は、需要があるかもしれない『WordPressのカスタムフィ ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...

WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう

今回は、以前にちょっとお仕事で扱った、『ログインした会員が、コン ...

WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト

今回は、(twitterにもちょっと書いたんですけど)管理人が、 ...