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

      2021/02/16   1220文字

今回は、お仕事で対応した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

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


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

  関連記事

【wordpress制作事例】自社著作権フリー音楽サイト、ロゴ付きおしゃれ1カラムデザインにリニューアル
WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう
WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説
WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト
【オリジナルWPサイト】スターターテーマ&フレームワーク・Materializeでオリジナルデザイン(レストラン風)
【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)
【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント
【WordPress】複数、任意のフィールド取得、記事出力する方法(foreach回し/get_post_custom/記事内出力)
サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)
【WordPress】カスタム投稿・カスタムフィールドでオプション項目を作り、管理画面から操作する方法
別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)
WordPressサイトに、Microsoft Azureを使って、シングルサインオン機能(パスワードベース・プラグイン無し)を実装してみる