制作実績

ハイレゾPRESS [ sonymusicハイレゾ特設サイト ]

 

音楽業界では、音質の良い「ハイレゾ」が話題になっていますね。
人気アーティストが高音質の楽曲配信をスタートさせていますし、昔聴いた懐かしいポップ・ミュージックがハイレゾ版として再配信されたり、ハイレゾ対応のウォークマンが発売されたり、いろいろなメディアでも取り上げられています。
今回制作を担当させていただいたこのサイトは、ハイレゾの作品のリリース情報やハイレゾに関連する各種イベントをトピックスとして取り上げる情報サイトです。

私はディレクション&デザインを担当し、WordPressのカスタマイズを大串肇さん宮崎優太郎さんにお願いしました。

ハイレゾPRESStop

検索機能とレスポンシブ対応

smartphone
50音検索にアルファベット検索、ジャンル検索に無限スクロールに、しかもレスポンシブ対応が必要です。

スマートフォンで音楽を聴く人が多いのは当然の事実ですが、最近ではさらにハイレゾ対応のスマホも登場しています。

スマートフォンで閲覧できて使いやすいレスポンシブにするために、CSSフレームワークのFoundation5を採用しました。

しかし、「私の技術レベルでは、このサイトをひとりで全て作るのは不可能!」と早々に判断して、エンジニアさんに頼む事にしたのは、懸命な判断だったと思います。

幸いなことに、WordPressコミュニティでエンジニアの知り合いが増えたおかげで、こういうカスタマイズができる人にもツテがありました。今年に入って何度か一緒にお仕事する機会のあった大串肇さんに声をかけて、一緒に制作をしていただけるようお願いすることにしました。

Backlogでタスク管理をし、Gitでバージョン管理しながらFoundationとSassとCompassを使うという、デザイナーにしてはちょっと敷居の高い環境でしたが、制作時に何かつまづいたりした時には相談できる相手がいるというのは、本当に心強かったです。

チームで制作することの楽しさを再認識

後半は宮崎優太郎君にも手伝ってもらって、深夜のFacebookチャットが賑やかになりました。
この3人のチーム、お互いの足りないところを補い合うことができて、最高によかったです!
こういうチーム制作ができるのが、ものづくりの醍醐味だよな・・・と実感しました。

WordPress4.0の機能:投稿記事の表示順を複数指定する

後半のいよいよオープン日が迫って来た時、ひとつ問題点が浮上しました。

記事の公開日はWordPressの基本機能を使っているんですが、別途「配信日」というものを数字の羅列で作っています。

wordpress4new
50音順やアルファベット順で並べた時に、一人のアーティストが同じ配信日に複数のアルバムをリリースした場合だと、まず配信日が同じものが抽出されるところまではいいんですが、さらにその中ではWordPressの登録IDの順番で並んでしまうという問題がありました。

この問題をできるだけ簡単にクリアするためには、同日同アーティストの作品が並ぶ順番は、記事の公開日時の新しい順番に並ぶようにする、ということが必要です。
そこで使ったのがWordPress4.0からできた機能。

「オーダーが array で複数指定できる」A more powerful ORDER BY in WordPress 4.0 | make.wordpress.org

ここに斎木さんの詳しい記事があります。
【WordPress 4.0】新機能を試す – 投稿記事の表示順を複数の条件で指定!

これも、チャットの中で優太郎くんが解決方法を見いだし、最終的には大串さんがコードを書いてくれました。

優秀なエンジニアのおかげで、私は進行管理に専念できて、後半の実作業としては、CSS部分の調整をしたり、画像の修正をする程度でした。自分のフリーランス生活の中でも、わりと大きな案件だったので、最後までやり遂げることができて本当にホッとしました。
深夜のチャットもいい思い出です。


URL
http://hr.sonymusic.co.jp/
ページ数
-
業種
エンターテイメント
公開時期
2014年12月
機能
  • トピックスはWordPressのブログ機能を使用
  • カスタム投稿タイプで商品とアーティストを作成し、管理画面上でヒモ付を行なうことで検索機能を実現
  • トップページの注目アーティスト・最新のリリースは、AdvanceCustomFieldsの投稿オブジェクトを使ってIDを引っ張ってくることで実装
  • アーティスト検索は、50音検索とアルファベット検索の2種類を可能にする
  • ジャンル検索での商品一覧画面では、一週間の間にリリースされたジャケットにNewマークをつける
  • ジャンル検索での商品一覧画面では、「もっと見る」ボタンをクリックすると次ページを画面遷移なしで自動読込み(jQueryのautopagerを使用)
  • スマートフォンでも閲覧可能にするためレスポンシブにする。Foundationを使用。
制作のポイント
ユーザーが使いやすいものにするため、デザイン・機能を整理し、直感的に操作できるインターフェースにしました