週刊Webテク通信

2012年10月第5週号 1位は，Photoshopからスライス画像を書き出すプラグイン，気になるネタは，iPad miniが発表，Kindleが日本上陸，Windows 8が発売

Webテク, Webデザイン, Web広告, Photoshop, CSS, iPad mini, Kindle, Windows

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

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

1. Cut&Slice me - FREE Photoshop plugin to export your assetshttp://www.cutandslice.me/#jp

Photoshopから画像をスライスして書き出すプラグインです。Photoshopのスライスツールを使うのとは違い，レイヤーごとに自動でPNG画像を生成できます。

レイヤーのグループ名が，書き出されるファイル名となります。グループ名の最後に「@」を付けると透過PNGになるなどのルールがあります。ボタンの場合は，normal，hover，selectedといった状態ごとにグループを分けておけば，全ての状態を個別に書き出せます。Retina用の2倍サイズの画像も生成できます。

同じようなことのできるツールとして，MacRabbitのSlicy（旧商品名LayerCake）という29ドルのアプリケーションがあります。Cut&Slice meと同様に，決められたルールに従って名前を付けたレイヤーグループを用意します。そのファイルをPSDとして保存し，Slicyにドラッグ＆ドロップするとスライスされた画像が生成されるという仕組みです。Retina用の画像も生成できます。

図1　Photoshopからスライス画像を書き出すプラグイン

図1　Photoshopからスライス画像を書き出すプラグイン

2. Basic Ready-to-Use CSS Styleshttp://tympanus.net/Tutorials/BasicReadyToUseCSSStyles/

シャドウやグラデーションなど，よく使われるパターンのCSSコード集です。

  • ボックスの上部に1ピクセルのラインを入れてエンボスにする
  • 角丸を利用して円を描く
  • ロールオーバーしたらジワッとアニメーションして色が変わるボタン
  • フォーカスされると枠や背景が変わる入力欄

といったCSSの記述例が掲載されています。

図2　よく使われるパターンのCSSコード集

図2　よく使われるパターンのCSSコード集

3. これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer | コリスhttp://coliss.com/articles/build-websites/operation/javascript/bookmarklet-viewport-resizer.html

モバイル，タブレットなど複数の画面サイズでページをプレビューできる，ブックマークレットを紹介した記事です。

ブックマークレットを起動するとメニューバーが登場し，そこから，iPhone，iPhone5，small tablet，table，widescreenとサイズを変更できます。もちろん，縦画面，横画面の切り替えも可能です。

図3　複数の画面サイズでプレビューするブックマークレット

図3　複数の画面サイズでプレビューするブックマークレット

4. Responsive CSS Frameworks You Will love - Creative Beaconhttp://www.creativebeacon.com/responsive-css-frameworks-you-will-love/

レスポンシブなCSSフレームワークを紹介した記事です。

Bootstrap，Foundationを始めとして，多数のフレームワークが掲載されています。

図4　レスポンシブなCSSフレームワークいろいろ

図4　レスポンシブなCSSフレームワークいろいろ

5. 100 Smashing Websites with Full Size Image Background | Design Web Kithttp://designwebkit.com/inspiration/100-smashing-websites-with-full-size-image-background/

背景いっぱいに写真が使われたサイトのギャラリーです。100個ものサイトが掲載されています。

ビジュアルに力を入れているだけあって，インターフェイスやページ遷移の仕方が面白いサイトも多いようです。

図5　背景いっぱいに写真が使われたサイトのギャラリー

図5　背景いっぱいに写真が使われたサイトのギャラリー

そのほか，最近の記事の中から，気になる記事を紹介します。

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

Typeform | Create awesome forms & surveys that function seamlessly across deviceshttp://www.typeform.com/

Typeformは簡単に使いやすいフォームを作成できるサービスです。マルチデバイス対応に力を入れた設計で，タッチデバイスで使いやすいように考えられています。

よくあるWebページ上のフォームより，ビジュアル中心で直感的に操作できるフォームが作成できます。並んだ星マークを選んでレーティングするようなパーツ類が，あらかじめ用意されています。

Typeformでどんなことができるかを紹介したムービーの中では，タブレットを使った街頭アンケートの場面があるのですが，まさにそういった用途で威力を発揮しそうです。

現在ベータ版で，使ってみたい人は申請するようになっています。申請すると個別のURLが生成されて，3人以上からクリックされると使えるようになるそうです。わたしもURLをFacebookでシェアして3人以上にクリックしてもらい数日経ったのですが，今のところ招待は届いていません。

図6　マルチデバイスで使えるフォーム作成サービス

図6　マルチデバイスで使えるフォーム作成サービス

今週の気になるWebネタ

iPad miniが発表，Kindleが日本上陸，Windows 8が発売

先週は，ついにiPad miniが発表され，同日Kindle端末の日本発売も発表されました。そして翌日Kindleストア日本版がオープンし，さらにその翌日にはWindows 8の発売が開始されました。

いろんなニュースが集中したわけですが，ネットでの反響はKindle＞iPad mini＞Wndows 8，テレビ・新聞での取り上げられ方はiPad mini＞Kindle＞Windows 8といったところでしょうか。

Kindleの日本上陸で，iPad miniには逆風かと思いましたが，そうでもないかもしれません。iPad miniにKindleアプリを入れればKindleストアの本を読むことができます。iPadよりiPad miniの方が電子書籍を読むのに適したサイズなので，iPad miniにとってはいいタイミングでのKindleストアのスタートだったようにも思えます。

Webテク, Webデザイン, Web広告, Photoshop, CSS, iPad mini, Kindle, Windows

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote