週刊Webテク通信

2013年3月第1週号1位は、Twitter、Amazon、Facebook、YouTubeなどを作り直したコンセプトデザインいろいろ、気になるネタは、プロ用お絵描きタブレットのWacomが“コンピュータの周辺機器ではない”自立型製品を予告

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

1. 25+ awesome redesign concepts | Webdesigner Depothttp://www.webdesignerdepot.com/2013/02/25-awesome-redesign-concepts/

有名サイトを作り直したコンセプトデザインを集めて紹介した記事です。Twitter、Amazon、Facebook、YouTubeなどが、いろいろなデザイナーの手によりリ・デザインされています。

ゴージャスに生まれ変わっているものもありますが、基本的にはシンプルにすっきりとレイアウトされたものが多いようです。

DribbbleやBehanceのような、クリエイターが作品を公開して他のクリエイターと交流するSNSが海外では流行っているようですが、そういったサイトで発表された作品からピックアップされています。

図1 有名サイトのリ・デザイン例いろいろ
図1 有名サイトのリ・デザイン例いろいろ

2. White Space In Web Design | Splashnologyhttp://www.splashnology.com/article/white-space-in-web-design/8215/

ホワイトスペースの使い方が参考になるサイトのギャラリーです。

余白をうまく使うことで、上品で優雅な印象を与えているサイトがそろっています。

図2 ホワイトスペースの使い方が参考になるサイトのギャラリー
図2 ホワイトスペースの使い方が参考になるサイトのギャラリー

3. Sidr - A jQuery plugin for creating side menushttp://www.berriart.com/sidr/

開閉するサイドバーを作ることができるjQueryプラグインです。最近のモバイルアプリ/モバイルサイトでよく見かける、横からスライドして現れるメニューを作ることができます。

サイドバーとともにコンテンツ全体が横にスライドするのがポイントで、一時的にメニューが現れていることを認識しやすくなる効果を狙っているのでしょう。隠れている領域がスライドして現れるこういったレイアウトを、オフキャンバスレイアウト(Off-Canvas Layouts)と呼ぶ場合もあるようです。

図3 開閉するサイドバーを作ることができるjQueryプラグイン
図3 開閉するサイドバーを作ることができるjQueryプラグイン

4. How To Create Unique jQuery-Based Tooltips | DesignWoophttp://designwoop.com/2013/02/how-to-create-unique-jquery-based-tooltips/

ツールチップを作るjQueryプラグインを3種類紹介しています。

紹介されているのはTipTip、Tipsy、Bubbletipで、どれもシンプルかつデザイン性の高いものです。

図4 ツールチップを作るjQueryプラグインの紹介
図4 ツールチップを作るjQueryプラグインの紹介

5. 20 Beautiful Examples of Illustrated Elements in Web Designhttp://www.webdesignfact.com/2013/03/illustrated-elements-in-web-design.html

Webデザインで使われているイラストのギャラリーです。

キャラクターとしてのイラストだけでなく、アイコンやイメージとして使われているものも取り上げられています。

図5 Webデザインで使われているイラストのギャラリー
図5 Webデザインで使われているイラストのギャラリー

そのほか、最近の記事の中から、フォントやjQueryプラグインを紹介します。

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

Skimr | Skim the web!http://www.skimr.co/

Skimrは非常にシンプルなRSSリーダーのWebサービスです。センター揃えで1カラムのすっきりしたデザインで軽快に閲覧でき、スマートフォンなどモバイルでの利用を第一に考えられているようです。

ユーザー登録なしでも、最初から登録されているTechCrunch(英語版ですが)などのフィードが見られます。ユーザー登録すると、新たなサイトが登録できるようになります。

右下にある「Directory」のリンク先では、テクノロジー関連のサイトが大量に紹介されています。下の方に日本語、中国語、韓国語のサイトも登録されていました。ここに登録されているサイトは、フィードを表示した後、右上の「+」ボタンで簡単に自分のリストに追加することが可能です。

図6 シンプルなRSSリーダー
図6 シンプルなRSSリーダー

おすすめ記事

記事・ニュース一覧