カテゴリー別アーカイブ: Web(Design)

iPhoneから音楽を30秒間試聴できる「30sec.fm」

30sec.fm
iPhoneで楽曲が30秒間試聴出来るサービス「30sec.fm」をリリースしました。
iPhoneに標準搭載されているiTunes Storeアプリと違い、Wi-Fi環境の無い場所からも利用出来る点が大きな特徴です。
(iPhoneのブラウザから http://30sec.fm にアクセスしてご利用ください。)

…実はコレ、新サービスではなく2010年にリリースした「Music Preview 3G」をリニューアルしたものですw(当時の記事はコチラ
なぜ作り直したのかというと、Music Preview 3Gには以下のような改善の余地があったからなのでした。

1.UIの改善


旧サイトは機能がシンプルな割に、「タッチすれば音楽が再生される」という主機能を説明するデザインが出来ておらず、ユーザを迷わせてしまう可能性がありました。
そこで新サイトでは、曲のアートワークに再生ボタンの画像を重ねて、そこに触れれば再生される事が直感的に分かるデザインにしました。
更にjQuery Mobileを採用した事で、使い心地(滑らかなアニメーション等)が改善したのも個人的には大きなポイントですw

2.処理速度の改善

旧サイトでは、iPhoneの性能が追いつかずにスクロールの途中でひっかかるような感覚がありました。
これには、HTML5の<audio>タグの使い方が大きく影響していたようです。

旧サイト(Music Preview 3G)の場合


このサービスは検索結果の行をタッチするとその曲が再生され始める仕組みなのですが、Music Preview 3Gでは「曲:audio要素=n:n」の関係になっています。
つまり、検索結果の数だけaudio要素が必要なわけです。

新サイト(30sec.fm)の場合


30sec.fmでは「曲:audio要素=n:1」の関係になっています。
つまり、検索結果が何件あろうと、一つのaudio要素を全曲で共有するような仕組みになっています。
この改善策を採った結果、新サイトではスルスルとスクロールしてくれるようになりました。

どうやらaudio要素は「再生していなくても配置しているだけで負荷がかかる」みたいなので、極力audio要素の数を抑えるのが動作を重くしないコツのようです。

3.読み込み時間の改善

スマートフォンはPCに比べて回線速度が遅いため、その読み込みに時間がかかる傾向があります。
そこで、とり~たのチームメイトでモバイル向けウェブサービスに詳しい@BoBppくんに最適化をお願いしました。

詳細は正直よく分かっていないのですがw、Closure Compilerを使って「CSSとJavaScriptの難読化・結合」をしてくれたみたいです。
その結果、ページの表示にかかる時間が以下のように改善しました。
 最適化無し:約10.8秒
  ↓
 最適化有り:約7.4秒
 (手動で3回計測した時間の平均値)

と、いうわけで

もともとは僕がTSUTAYAにCDを借りに行った時に気になった曲を聞くために作ったサービスですが、ぜひ皆さんにも使って頂ければ幸いです!
http://30sec.fm

HD Search

HD Search
4分割された画面それぞれに、検索結果のページそのものが表示される仕組みが特徴の検索サービス。
URL:http://hdsearch.blk.jp

HD Search
キーワードを入力して「search」ボタンを押すと、4つのエリアに検索結果のページが表示される。
そのため本サービスは、画面上にウェブサイトを4つ並べても違和感の少ない、幅1920px以上の高解像度ディスプレイでの利用を想定している。

とり〜た

とり〜た
学生時代の友人たちと結成した開発チーム「とり〜た」のプロモートサイト。
URL:http://tri-ta.com

とり〜た - つぶやき
トップページには、メンバーのTwitterフィードやブログのRSSフィードをまとめて表示している。

とり〜た - メンバー表示
チームメンバーの並び順はメンバー構成が変わる度に変更され、その順番は「ジャンケン」「グランツーリスモのタイムアタックが速かった順」等で決まる。