プログラミング

プログラミング

Web上のメディアプレーヤーをデザインするHTML&CSSソースコード例10選 海外のクールなデザイン

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、10 Creative Code Examples of Media Player Design
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

237 views

読了時間 : 約4分10秒

HTML5やWordPress oEmbedが開発されて以来、誰でも簡単にビデオやオーディオなどのマルチメディアをウェブサイトに掲載することができるようになってきました。既存のメディアプレーヤーでも十分な機能が備わっているのですが、ユーザー体験を改善する余白は限りなくあるといえます。

 

デフォルトのメディアプレーヤーには基礎的な機能しか含まれていないため、ブランドによっては合う合わないがあります。ここでは、デザイナーたちが創った、斬新でより充実した機能が備わったクリエイティブなメディアプレーヤーを紹介していきます。

 

おすすめオーディオプレーヤー5選

 

丸くて綺麗なデザイン

 

See the Pen
Music Player by Sebastian Beltz
by Boylett (@boylett)
on CodePen.

 

Sebastian Beltzが開発した丸い形をしたオーディオプレーヤーは、普通の角ばった形のメディアプレーヤーとは一味違います。他のスタンダードなものと比べて見た目がいいだけでなく、共有やお気に入り機能まで備わっているのが魅力です。

 

マウスで動かせるプレイリスト

 

See the Pen
Audio Player
by Antoinette Janus (@internette)
on CodePen.

 

スクリーン上で動かせるオーディオプレーヤーって聞いたことありますか?Antoinette Janusが創ったこのオーディオプレーヤーは、動かせるだけでなくシンプルでスマートなUIです。プレイリストをスクロールして選択した曲を再生するのが手軽にできてしまいます。

 

アクセシビリティーが設置されているオーディオプレーヤー

 

See the Pen
Accessible HTML5 Audio Player
by Joe Watkins (@joe-watkins)
on CodePen.

 

このとてもシンプルなオーディオプレーヤーはJoe Watkinsが創ったものです。誰でも使えるようにアイコンは全て文字で表示されており、トランスクリプトも見ることができます。

 

マテリアルデザインがオーディオに

 

See the Pen
Material Design UI Audio Player
by Michael Zhigulin (@michael-zhigulin)
on CodePen.

 

Michael Zhigulinはマテリアルデザインをオーディオに応用させてこのプレーヤーを創りました。「カード」という人気なレイアウトからアニメーションの円滑さまで、グーグルの基準に合ったオーディオプレーヤーです。

 

まるでレコードをかけているようなオーディオプレーヤー

 

See the Pen
UI Challenge – Week 6 – Audio Player
by Matt Stvartak (@mattstvartak)
on CodePen.

 

レコードを回しているかっこいいコンセプトのオーディオプレーヤーは、Matt Stvartakが創ったものです。機能性はスタンダードですが、レコードが回るデザイン性はずば抜けています。

 

おすすめビデオプレーヤー5選

 

スムーズで早い反応

 

See the Pen
HTML Video Player (+UI +Responsive)
by Simon Goellner (@simeydotme)
on CodePen.

 

Flashとは反対に、ケータイでもデスクトップと同じコンテンツを楽しむことができるようHMTL5メディアが生まれたのはご存知ですか?Simon Goellnerのビデオプレーヤーは反応が早くシンプルなCSSでデザインできてしまうところがありがたいです。

 

ラベル付けされたコントロール

 

See the Pen
HTML5 Video Player
by Tadaima (@tadaima)
on CodePen.

 

TadaimaのHTML5ビデオプレーヤーの良いところは、マウスを重ねたらコントロールバー上のアイテムが全てラベル表示されるというところです。ビデオコントロールは直感的な部分もあるのですが、この機能が備わっていることでユーザーは何が起こっているのかを目で見て確かめることができます。

 

アクセシビリティーの最上級

 

See the Pen
Accessible Video Player – Able Player test
by Joe Watkins (@joe-watkins)
on CodePen.

 

上でJoe Watkinのオーディオプレーヤーを紹介しましたが、彼のビデオプレーヤーも優秀なんです。トランスクリプト、クローズドキャプション、手話などのオプションが完備されており、アクセシビリティー化を目指しているブランドには最適のメディアプレーヤーです。

 

YouTubeのためのプレイリスト

 

See the Pen
jQuery Youtube Channels Playlist
by bachors (@bachors)
on CodePen.

 

もちろん全員がオリジナルのビデオを発信している訳ではないため、YouTubeなどのビデオを使う人も多いですが、bachorsのYouTube Channels Playlistを使うことで簡単にサイトでYouTubeのプレイリストを作ることができます。色々なカスタマイズのオプションが豊富なのも魅力の一つです。

 

ユーザーと一緒に動くビデオ

 

See the Pen
Sticky Sidebar Video Player
by Charley Pugmire (@puglyfe)
on CodePen.

 

最近の流行りの機能の一つは、ユーザーのスクロールに合わせてビデオも一緒に動くものです。Charley Pugmireが創ったSticky Sidebar Video Playerでは、ページの最初にはフルサイズのYouTubeビデオが表示され、スクロールすると小さくなった画面がサイドバーに表示されます。

 

メディアは大切

 

ここではシンプルなものから機能性の高いものまで幅広い種類のメディアプレーヤーを紹介しました。自分のスタイルや機能性に合ったメディアプレーヤーをつくることができるということってすごいですよね。また、アクセシビリティーのマインドセットを持っているデザイナーが存在するということもすごく勇気付けられます。平凡なメディアプレーヤーをオリジナルでかっこいいものにするには様々な方法があります。ベーシックなものでは物足りないと感じている方は、ぜひここで紹介したものを試してみてください。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
【Uber初回利用2000円オフクーポン】
130v4g

プロモーション コードを追加するで「130v4g」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

【UberEats初回1000円オフクーポン】
【UberEats初回1000円オフクーポン】
ins6je2v

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ