週刊Webテク通信

2013年4月第4週号1位は、スクロール効果に特色があるサイトのまとめ、気になるネタは、iOS版「Facebook」、チャットヘッド機能に対応、「LINE」風スタンプ機能も追加

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2013年4月15日~4月21日の間に見つけた記事のベスト5です。

1. 20 Fresh Sites With Amazing Scrolling Effectshttp://cssmatter.com/blog/20-fresh-sites-with-amazing-scrolling-effects/

スクロール効果に特色があるサイトをまとめています。

パララックス(視差)スクロールや、スクロール位置をトリガーとした動きなど、最近おなじみの効果がうまく使われているサイトが多数紹介されています。

MailChimp Annual Reportは、アニュアルレポート(年次事業報告書)を、スクロールで見ていく1ページ完結型にまとめたものです。そのセンスの良さに感心しました。

図1 スクロール効果に特色があるサイトのリンク集
図1 スクロール効果に特色があるサイトのリンク集

2. Beautiful Examples of Flat Icons Design - Designmodohttp://designmodo.com/flat-icons-examples/

フラットデザインのアイコンのギャラリーです。ネタ元はDribbbleです。

Windows 8のMetro UI風というよりもGoogle風の、ビビッドな色使いでポップなアイコンが目立ちますね。フラットではありつつもシンプルになりすぎない陰影の付け方など参考になります。

図2 フラットデザインのアイコンギャラリー
図2 フラットデザインのアイコンギャラリー

3. Flat Design Devices With PSD Mockups | Freebies | Graphic Design Junctionhttp://graphicdesignjunction.com/2013/04/flat-devices-with-free-psd-mockups/

iPhoneやiMacなどのデバイスをフラットデザインで作ったPSD素材を多数紹介しています。こちらもDribbbleからセレクトしていますね。

ダウンロードできるファイルはPhotoshop形式ですが、フラットデザインなだけあってベクトルデータとして作られているものが多いようです。

図3 フラットデザインのPSD素材いろいろ
図3 フラットデザインのPSD素材いろいろ

4. Web Design: Awesome Responsive Websites | Abduzeedo Design Inspiration & Tutorialshttp://abduzeedo.com/web-design-awesome-responsive-websites

レスポンシブWebデザインのギャラリーです。シンプルなデザインのものが多めです。

PCサイズとスマートフォンサイズの2つの画面キャプチャーが掲載されています。

図4 レスポンシブWebデザインのギャラリー
図4 レスポンシブWebデザインのギャラリー

5. 15+ shades of black in web design | Admire The Web - The Very Best Web Design Inspirationhttp://admiretheweb.com/articles/15-shades-black-web-design-inspiration/

黒ベースのWebデザインのギャラリーです。大きなタイポグラフィを使ったサイトが多く、黒地に白文字だとやはり目立ちますね。

図5 黒ベースのWebデザインのギャラリー
図5 黒ベースのWebデザインのギャラリー

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

先週の気になるWebサービス

Do Not Touchhttp://donottouch.org/

今回は、Webサービスではないのですが、ユーザー参加型のミュージックビデオを紹介します。あなたが映像ビデオに合わせて動かしたマウスポインタが記録され、ビデオに反映されるというものです。

「緑のゾーンから出るな」などと表示される画面の指示に従ったり従わなかったりしながらポインタを動かしていくのですが、これまで参加した数多くの人たちと同時に動かしているように感じられて面白いです。

マウスポインタが記録されるというアイデアを活かした映像が、本当によくできています。すでにポインタが多すぎて自分のを見失いがちですが、ぜひお試しを。

図6 みんなのマウスポインタが記録されるミュージックビデオ
図6 みんなのマウスポインタが記録されるミュージックビデオ
図7 画面にいろいろと指示が出ます
図7 画面にいろいろと指示が出ます

おすすめ記事

記事・ニュース一覧