週刊Webテク通信

2012年9月第3週号1位は、EvernoteとFireworksでパターンライブラリを作ろう、気になるネタは、ストラップがつけられ、多彩になった第5世代iPod touch

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

1. Creating A Pattern Library With Evernote And Fireworks - Smashing Magazine | Smashing Magazinehttp://fireworks.smashingmagazine.com/2012/09/13/create-pattern-library-with-evernote-fireworks/

EvernoteとFireworksを使って、UIデザインのパターンライブラリを作る方法を解説した記事です。

Evernoteでパターンライブラリを管理しようという発想だけでも「なるほど」と思いましたが、ポイントはFireworksと組み合わせているところです。FireworksのPNGファイルをEvernoteに貼り付けておけば、必要なときにドラッグ&ドロップでEvernoteからFireworksのドキュメントに使いたいパーツを配置することができるのです。

もちろん、そのパーツはFireworks上で再編集できるというのが便利なところです。Fireworksで描いた図形なら、ベクターデータのまま拡大・縮小できます。EvernoteにFireworks PNGを貼るなんて発想はなかった…。ともかく、記事の最後の方にあるムービーを見てください。2分20秒くらいのところで、EvernoteからFireworksへのドラッグ&ドロップが行われています。

図1 EvernoteとFireworksでパターンライブラリを作ろうという記事
図1 EvernoteとFireworksでパターンライブラリを作ろうという記事

2. 10 Free Pure CSS UI Kits - Speckyboy Design Magazinehttp://speckyboy.com/2012/09/09/10-free-pure-css-ui-kits/

CSSで作られたUIキットを紹介しています。CSS3を使ってキレイにデザインされた、ボタンやフォームのパーツなどがまとまったセットです。Windows 8のメトロスタイル(この名称はもう使えないようですが)のUIキットもありますね。

図2 CSSで作られたUIキット10選
図2 CSSで作られたUIキット10選

3. 15 Special Parallax Scrolling Examples that are "Object-Oriented"http://medleyweb.com/inspiration/special-parallax-scrolling-examples/

視差スクロールを使い、スクロールによって全体のコンテンツを見せていくタイプのサイトのショーケースです。

ちょっと前に、日産NOTEのキャンペーンサイトが話題になりましたが、あの手のサイトがいろいろ紹介されていて楽しめます。

図3 視差スクロールを使ったサイトいろいろ
図3 視差スクロールを使ったサイトいろいろ

4. 25 Beautiful Responsive Web Design Examples for Inspirationhttp://sixrevisions.com/design-showcase-inspiration/responsive-webdesign-examples/

レスポンシブWebデザインを使ったサイトのショーケースです。

8番目に紹介されているThese Are Thingsは、3位で取り上げた視差スクロールのショーケースにもあったサイトです。ウィンドウ幅を狭くすると背景の一部が見えなくなりますが、必要なところは最初からスマートフォンの幅を考えてデザインされてたわけですね。

図4 レスポンシブWebデザインを使ったサイトのショーケース
図4 レスポンシブWebデザインを使ったサイトのショーケース

5. 10 Extremely Minimal Web Designs | Pixel Cloudshttp://pixelclouds.com/2012/09/08/10-extremely-minimal-web-designs/

非常にシンプルなWebデザインのショーケースです。

ミニマルデザインのショーケースはよく取り上げていますが、今回のこれは「超」が付くほどシンプルなサイトばかりです。TOPページは文字だけのサイトばかりですね。

図5 極端にミニマルなWebデザインのショーケース
図5 極端にミニマルなWebデザインのショーケース

そのほか、最近の記事の中から、役に立ちそうなチュートリアルとWebサービスを紹介します。

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

dbinboxhttp://dbinbox.com/

dbinboxは、自分のDropboxにファイルを送ってもらうためのWebページを作ることができるサービスです。

そのページにアクセスした人がファイルをアップロードすれば、自分のDropboxに自動的に保存されるという仕組みです。

メール以外でファイルを受け取る必要がある場合、相手もDropboxを使っていれば共有フォルダを作ったり、共有用のリンクを作ってもらえば大丈夫です。しかし、相手がその手のサービスを使っていない場合、自分のDropboxにアップロードしてもらうこの方法は、なかなか便利そうです。

図6 Dropboxへのアップロード用ページを作れるサービス
図6 Dropboxへのアップロード用ページを作れるサービス

おすすめ記事

記事・ニュース一覧