週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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 画面にいろいろと指示が出ます

今週の気になるWebネタ

iOS版「Facebook」,チャットヘッド機能に対応,「LINE」風スタンプ機能も追加 - bizmash!:@niftyhttp://bizmash.jp/articles/43491.html

iOS版のFacebookアプリがアップデートし,LINE風のスタンプが登場しました。スタンプを選ぶ画面,新しいスタンプをダウンロードする画面など,本家LINEにそっくりです。

Facebookとスタンプといえば,そういうサービスを発表していたところが最近あったような…と思ったIT情報通の人もいるでしょう。そう,Facebookのアプリアップデートの5日前に登場した「スタンプメッセンジャー」がそれです。

まるでネタのようなタイミングの悪さ(良さ)ですが,心が折れかけているところではあるのですが,諦めない感じで開発は続けていきます!と宣言する開発元に応援の声があがっているようです。

また,アメリカでは結構有名なソーシャルメディアPathにもLINEスタンプ風のものが登場したようです。それだけ海外でもLINEの存在感が大きいということでしょうか。やはり見慣れているからか,LINEのスタンプのイラストが一番センスがいい感じがします。Facebookが本気を出せば,ハリウッドクラスのキャラクタースタンプとか登場しそうですが。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入