週刊Webテク通信

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

Webテク, Webデザイン, Web広告, UIコンポーネント, メモ, Tumblr

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

ネットで見かけた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　シンプルなオンラインメモ帳サービス

今週の気になるWebネタ

Flickr，リニューアル後は成長を加速。参照元の7.2%はTumblr | TechCrunch Japanhttp://jp.techcrunch.com/2013/08/30/20130829flickr-grows-post-relaunch-tumblr-now-7-2-of-sites-referral-traffic/

先日大きなリニューアルをしたFlickrですが，訪問者数は着実に伸びているとのことです。日本ではそれほど話題とならなかったような気もしますが，リニューアルの効果があったんでしょうか。

そして，この記事で気になったのが，Flickrにとって最大の参照元となっているのがTumblrだという指摘です。PinterestじゃなくTumblrなんですね。

著作権表示に気をつかっているFlickrと，その辺をあいまいにしてしまっているTumblrとでは相性が良くない気もするのですが，おなじYahooのサービスということもあり，今後もうまくやっていくのでしょう。

Webテク, Webデザイン, Web広告, UIコンポーネント, メモ, Tumblr

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote