新しいものが大好きなグッドパッチで8月に話題になったアプリ、サービス、デザインまとめ(2013)

8月もそろそろ終わりますね。まだ少し暑いですが、みなさんいかがお過ごしでしょうか?夏が終われば秋が来て、秋になるとiOS 7が一般リリースされるので今からわくわくです。
今月もGoodpatchで共有された新しくておもしろいデザインやアプリ、Webサービスをご紹介します!

7月のまとめ→新しいものが大好きなグッドパッチで7月に話題になったアプリ、サービス、デザインまとめ
6月のまとめ→新しいものが大好きなグッドパッチで6月に話題になったアプリ、サービス、デザインまとめ
5月のまとめ→新しいものが大好きなグッドパッチで5月に話題になったアプリ、サービス、デザインまとめ

 

Webサイト

Wallpaper

http:=//www.wallpaper.com/
ファッションやデザイン、ライフスタイルに関するWebマガジン。トップページにさりげなく広告が入っているのですが、その見せ方が斬新でかっこいいです。

DIVERSE SYSTEM – JAPAN

http://japan.diverse.jp/
とても不思議で三次元的な動きをするWebサイト。スクロールにより展開される画面は5画面のみですが、動きが魅力的で引き込まれます。

ANÚNCIOS FACEBOOK

http://www.agenciamestre.com/anuncios-facebook/
Facebook用広告を打ち出している会社のWebサイト。フラットなキャラクターや、パララックスで展開されるアニメーションのアイデアがおもしろいです。

STARTUPVITAMINS.COM

http://startupquotes.startupvitamins.com/
スタートアップやリーダーシップに関するいろいろな言葉を次々読むことができるサイト。

 

アプリケーション

Estimote

http://estimote.com/
これはiOSアプリとガジェットを連携させて使うものです。かわいい石の様なガジェットを壁にはり、それに専用アプリを立ち上げたiPhoneをかざすことで、クーポンや商品の情報をプッシュ通知で受け取れるというもの。ガジェット自体がかわいいので、お店にあったら興味をそそられそうです。

Cloudup

https://cloudup.com/
動画や写真、音楽、ファイルを簡単に共有できるクラウドアプリ。すぐに共有できるのがウリのようです。

Latte

http://gotlatte.com/
友達や家族と一緒にブログを書くアプリ。マグカップのようなアイコンがかわいいです。

Composite

http://www.getcomposite.com/
Photoshopのレイヤーに特定の名前を付け、iPhoneとWi-Fiで接続することで実際にモックアップとして操作することができるアプリ。Photoshopから画像を書き出さずに実際に触って遷移を確かめられるのは便利ですね。

aero

http://www.aeroapp.co/
天気アプリ。フラットできれいなデザインなのですが、注目したいのは背景。現在の天気が背景にアニメーションで表示されているのがとてもおもしろいです。表示される天気は雲や雨、雷などです。

 

ツール

Canva

https://www.canva.com/
ブラウザからグラフィックデザインができるサービス。まだローンチされていないので触れていないのですが、紹介動画を見る限り、画像のはめ込みが楽であったり、プリセットのオブジェクトが多数用意されているので手軽におしゃれなグラフィックが作れそうです。

TRIDIV

http://tridiv.com/
ブラウザ上で立体のオブジェクトを積み重ねて、3Dモデルを作ることができるツールです。なんと作った3DモデルはHTMLとCSSで書き出すことも可能。書き出したHTMLはとてつもないdivの数ですが、画像を使わずに自分の作った3Dモデルをブラウザに表現できるのはおもしろですね。

EVERYTHING KIT

http://store.stickyjots.com/product/everything-kit
iPhone、iPad用のペーパープロトタイピングツール。ペーパープロトタイプした紙を木製のiPhoneやiPadに入れることで、より実機に近い感覚で検証することができそうです。

mockupphone

http://mockuphone.com/
iOS, Android, Windows Phoneの様々なデバイスのはめ込み画像が作れるツール。生成される画像は床に置いてあるようなものや、立っているものなど全部で6種類のはめ込み画像をダウンロードすることができます。

 

フロントエンド

parallax.js

http://wagerfield.github.io/parallax/
手前に見えるオブジェクトと奥の方に見えるオブジェクトが異なるスピードで動くので遠近感を感じられ、とても三次元的に見えます。

NProgress.js

http://ricostacruz.com/nprogress/
MediumYoutubeではブラウザの最上部にプログレスバーを置くことでローディングを表しています。このNProgress.jsはそれらと同じローディングが使えるプラグインです。

Creative Link Effects

http://tympanus.net/Development/CreativeLinkEffects/
リンクをhoverした時のエフェクト集。おもしろい動きがたくさんあります。上手に案件で使いたいですね。

Header Effects

http://tympanus.net/Development/HeaderEffects/
スクロールしたときのヘッダーの動きのサンプル集。このページ自体をスクロールしていくことでいくつかの動きをみることができます。

SCROLL


こちらはCODEPENに上がっていた作品。スクロールするとぷにぷに動くのが気持ちいいですね。

Emmet LiveStyle

 

http://livestyle.emmet.io/
こちらはブラウザとテキストエディターをつなぐプラグイン。ブラウザの要素の検証からCSSを編集すると、それがテキストエディターにも反映されるというすぐれもの。現在の対応ブラウザはGoogle ChromeとSafari、対応テキストエディターはSublime Textとなっていますが、まだBeta版なので今後対応ブラウザやテキストエディターが増えていくことが期待できます!

Circular Navigation

http://tympanus.net/Tutorials/CircularNavigation/
半円をクリックまたはタップすることで展開されるサークルナビゲーション。スマートフォン用のWebサイトで使ったらおもしろそうです。

 

スライド

そして今月はアプリやツールだけではなく、勉強になるスライドもいくつか共有されたのでそちらもご紹介します!

Startup Metrics for Pirates

有名サイトのGrowth hackテクニック色々〜Quora、facebook、twitterなど〜

Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜

情報推薦システムとユーザー体験

以上です!
今月は社長の誕生日があり、iOSデザインの勉強会と見せかけて、サプライズパーティーをしました!こちらがその時にみんなからのメッセージを使って作ったムービーです!社長も「すばらしいユーザーエクスペリエンスだった」と話してました。

Goodpatch CEO Birthday Message Movie from tsuyoshi higuchi on Vimeo.

MEMOPATCHでは今後も新しい情報をキャッチアップして、記事にしていくので今後もチェックよろしくお願いします!