サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロン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のカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説
【オリジナルWPサイト】スターターテーマ&フレームワーク・Materializeでオリジナルデザイン(レストラン風)
【WordPressサイト製作】レスポンシブ左右ボックスとaudioで、音楽素材サイトを作る
【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント
【WordPress】プラグイン無し、カンタンページネーション作成・パラメータ指定例も紹介(paginate_links)
WPカスタムフィールド~記事にthe_metaでフィールド出力&評価つける・get_post_metaとの違い
WordPressサイトに、Microsoft Azureを使って、シングルサインオン機能(パスワードベース・プラグイン無し)を実装してみる
サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)
【wordpress制作事例】自社著作権フリー音楽サイト、ロゴ付きおしゃれ1カラムデザインにリニューアル
【WordPress】カスタム投稿タイプのカテゴリ/タグ取得ファンクション『get_the_term_list』『get_the_terms』挙動の違い
WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト
【WordPress】複数、任意のフィールド取得、記事出力する方法(foreach回し/get_post_custom/記事内出力)