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

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

■作ったサイト～enjoy your bandえんばん（ミュージックサロンp＋luckさま）

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

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

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

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