週刊Webテク通信

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

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

ネットで見かけた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へのアップロード用ページを作れるサービス

今週の気になるWebネタ

ストラップがつけられ,多彩になった第5世代iPod touch,2.48万円から - bizmash!:@niftyhttp://bizmash.jp/articles/30766.html

サプライズがなかったと言われるアップルのiPhone 5の発表でしたが,けっこういいかもと注目されているのが第5世代のiPod touchです。画面サイズがiPhone 5と同じ4インチになり,iPhone 5には及びませんが,スペック的にiPhone 4Sは超えているようです。

カラーバリエーション展開は事前のリーク情報の通りだったのですが,専用ストラップ「iPod touch Loop」の登場は予想外でした。iPadの風呂のフタ(スマートカバー)に続くサプライズ・アクセサリーですね。電話として使うiPhoneの方にこそストラップが必要な気もしますが,Wiiコントローラーのストラップ同様,激しいゲームでブンブンiPod touchを振り回してくれということでストラップが付いたのでしょうか。

iPod touchにストラップを取り付ける構造自体は単純なので,サードパーティからもいろんなストラップが出るのでしょう。また,iPhone 5をiPod touchのようにするカラーバリエーション豊富なカバーをどこかが出してきそうな予感がします。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入