週刊Webテク通信

2013年9月第1週号 1位は,UIコンポーネントを探せるサービス,気になるネタは,Flickr,リニューアル後は成長を加速。参照元の7.2%は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デザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入