週刊Webテク通信

2013年9月第1週号1位は、UIコンポーネントを探せるサービス、気になるネタは、Flickr、リニューアル後は成長を加速。参照元の7.2%はTumblr

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

1. UIBox - Curated HTML, CSS, JS UI Component Library>http://www.uibox.in/

UIコンポーネントを探せるサービスです。HTML、CSS、JavaScriptで作られたユーザーインターフェイスを検索できます。

以下のようなタグでも探すことができます。

  • accordion(アコーディオン)
  • carousel(カルーセル)
  • dropdown(ドロップダウン)
  • infinite-scroll(無限スクロール)
  • sidebar(サイドバー)
  • tab(タブ)
  • tooltip(ツールティップ)

各UIコンポーネントの詳細ページには、あっさりした説明文しかついていませんが、デモページやダウンロードページ、Githubなどへのリンクが用意されています。

図1 UIコンポーネントを探せるサービス
図1 UIコンポーネントを探せるサービス

2. Transitions for Off-Canvas Navigations | Codropshttp://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/

サイドメニューが出現するとともに既存のページがずれる「Off-Canvas」と呼ばれるナビゲーションのいろいろなパターンを紹介したチュートリアル記事です。

通常のOff-Canvasではサイドメニューの分横にスライドするのですが、このデモでは立体的にページが移動するものなど、CSSトランジションを使った面白い効果が用意されています。

もちろん、レスポンシブ対応です。

図2 Off-Canvasナビゲーションの効果いろいろ
図2 Off-Canvasナビゲーションの効果いろいろ

3. 60 free resources you really must try | Webdesigner Depothttp://www.webdesignerdepot.com/2013/08/60-free-resources-you-really-must-try/

Web制作に役立つ、画像素材やアイコン、jQueryプラグインなど各種スクリプト類やフレームワークなどを大量に紹介しています。

図3 Web制作に役立つ素材類
図3 Web制作に役立つ素材類

4. Long Shadow New Trend in Flat Design | Graphics Design | Design Bloghttp://blog.karachicorner.com/2013/08/long-shadow-new-trend-in-flat-design/

ロングシャドウのちょっとした解説と、参考になる実例を紹介しています。また、ロングシャドウのジェネレーターへのリンクも掲載してあります。

iOS 7で多くのモバイル向けユーザーインターフェイスはフラットデザインになり、次にくる大きなトレンドがロングシャドウとのことです。

図4 新たなトレンドであるロングシャドウについて
図4 新たなトレンドであるロングシャドウについて

5. 20 Blurred Backgrounds Packs to Enhance your Design Work - StarSunflower Studiohttp://starsunflowerstudio.blogspot.jp/2013/08/20-blurred-backgrounds-packs-to-enhance.html

ぼかした背景画像素材を紹介した記事です。

iOS 7のユーザーインターフェイスに、すりガラスを通したような、ぼんやりとボケたイメージが出てきますが、そういった感じのものを作るときに役立ちそうです。

図5 ぼかした背景画像素材集
図5 ぼかした背景画像素材集

そのほか、最近の記事の中から、気になる記事を3つ紹介します。

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

wri.pe - simple and smart notepadhttps://wri.pe/

wri.peはシンプルなオンラインメモ帳サービスです。メニューなど全て英語ですが、日本の人が作ったWebサービスです。

マークダウン記法に対応しており、メモをマークダウンで書きながらその横にプレビューが表示されるというマークダウンエディタのような見た目となっています。

メモ内に日付を入れると、カレンダー上にリンクが表示されるようになります。これは作成した日付かと思ったのですがそうではなく、メモ内に書いてある日付で複数OKとなっています。

ノートは作成されると「Notes」に保存され、アーカイブすると「Archive」に移動されます。アーカイブしたノートはカレンダーには表示されなくなります。

Gmailのような管理を考えているようで、使用済みのメモを削除するのではなくアーカイブしておくという感覚のようです。

図6 シンプルなオンラインメモ帳サービス
図6 シンプルなオンラインメモ帳サービス

おすすめ記事

記事・ニュース一覧