週刊Webテク通信

2011年10月第5週号 1位は,CSS3を基礎からレクチャーしてくれるスライド,気になるネタは,話題のワコム製デジタルスケッチペン「Inkling」

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

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

1. CSS3 in practice, maddesigns (Sven Wolfermann) #css3http://maddesigns.de/css3/css3-in-practice.html

CSS3を基礎的なところからレクチャーしてくれるスライドです。WebDevCon 2011というカンファレンスで使われた資料のようです。

角丸やドロップシャドウなどについて,初歩から詳しいところまでわかりやすく解説してくれます。英語ではありますが,そのまま日本の勉強会に使えそうなわかりやすさです。ブラウザごとのサポート状況や,IE対策に触れられているのもうれしいところです。

border-radius,box-shadowにはベンダープリフィックス(-webkit-や-moz-)は今や不要というのは知りませんでした。ただし,iPhoneとAndroidに適用させるには,box-shadowのプリフィックスは必要とのことです。

なお,シンプルで見やすいこのスライドは,Googleのhtml5slidesというスライドテンプレートを使っています。フルスクリーン表示もできますし,iPadでも横置きでなら問題なく見ることができました。

図1 CSS3をレクチャーしてくれるスライド

図1 CSS3をレクチャーしてくれるスライド

2. Rapid Prototyping For Any Device With Foundation - Smashing Codinghttp://coding.smashingmagazine.com/2011/10/25/rapid-prototyping-for-any-device-with-foundation/

Foundationというプロトタイプ作成用フレームワークを紹介した記事です。

Foundationの特長は以下の通りです。

  • 任意の最大幅で作れる12カラムのパーセントベースの可変グリッド
  • ピクセル数によらずグリッドによって可変する画像
  • UIやレイアウトのパターンが用意されている
  • デバイスに合わせて見た目を変えられる

やはり,タブレットやモバイル端末を強く意識したものとなっています。

図2 プロトタイプ作成用フレームワークの紹介

図2 プロトタイプ作成用フレームワークの紹介

3. Webデザイナーならば必ず一度は憧れる,余白が美しいWebデザインまとめ60個 - W3Qhttp://w3q.jp/t/105

余白が美しいWebデザインをまとめて紹介しています。

この記事が掲載されているのは,⁠Web制作者のためのQ&Aとまとめサービス」をうたったW3Qというサイトで,最近オープンしたようです。記事もどんどん充実しているようで,今後に期待したいサービスです。

図3 余白が美しいWebデザインのまとめ

図3 余白が美しいWebデザインのまとめ

4. 25 jQuery Plugins to help with Responsive Layoutshttp://speckyboy.com/2011/10/24/25-jquery-plugins-to-help-with-responsive-layouts/

レスポンシブWebデザインに役立つjQueryプラグインをまとめています。

画面サイズに合わせて画像やテキストのサイズを調整するもの,画面サイズによって可変するスライドショーなどのjQueryプラグインが紹介されています。

図4 レスポンシブWebデザインに役立つjQueryプラグインいろいろ

図4 レスポンシブWebデザインに役立つjQueryプラグインいろいろ

5. 電子書籍を自分で出版してみよう! | Webクリエイターボックスhttp://www.webcreatorbox.com/webinfo/publish-your-ebook/

電子書籍をいろいろなツールで実際に作ってみたレポート記事です。EPUB中心であっさりした内容ですが,入門編として面白いと思います。

なんとなく作れそうだと思っている人は多いでしょうが,実際にやってみて記事にまとめた行動力がすばらしいですね。

図5 電子書籍を実際に作ってみたレポート

図5 電子書籍を実際に作ってみたレポート

そのほか,先週の記事の中から,jQuery関連の記事を3つ紹介します。

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

Webデザインや配色をサポートする新サービス | Croppy(クロッピィ)http://croppy.org/

Croppyは,Webデザイナーのためのパーツ別スクラップブックサービスです。

ブックマークレットを使うことで,見ているWebページの任意の場所を切り抜いてスクラップできることが特長の一つです。切り抜かれた画像を分析して,使われている色が表示されるのも便利そうです。

「ヘッダー」⁠バナー」⁠ボタン」などカテゴリに分けられたパーツの画像は,ほかの人がスクラップしたものも見ることができます。

パーツだけが一人歩きしないように,どこのサイトから切り抜かれたかが目立つように表示されるのもいいですね。そのサイトの評判をはてなブックマークやTwitterから表示する機能も気が利いています。

Webデザイナーなど制作者が参考にクリップするという用途はもちろん,発注者が作ってもらいたいサイトのテイストやイメージを伝えるのにも役立ちそうです。

図6 Webデザイナーのためのパーツ別スクラップブックサービス

図6 Webデザイナーのためのパーツ別スクラップブックサービス

今週の気になるWebネタ

【レポート】話題のワコム製デジタルスケッチペン「Inkling」,その使い心地は?? | クリエイティブ | マイコミジャーナルhttp://journal.mycom.co.jp/articles/2011/10/24/waink/index.html

ワコムからデジタルスケッチペン「Inkling」が発売されました。

専用のボールペンで紙に描いた文字や絵をデジタルデータとして取り込めるというものです。類似の商品もいくつかありますが,1024レベルの筆圧感知やAdobe Photoshop/Illustratorにエクスポートできるなどプロのクリエイターをターゲットにしているところがポイントのようです。

Illustratorではベクター形式で開くことができるそうで,FlashやFireworksにもベクターデータのまま持って行けそうですね。Photoshop/Illustratorにはレイヤー分けされたデータを渡せるとのこと。描いているときにボタンを押すごとに新規レイヤーが作られるという仕組みだそうです。

iPad用のスタイラスを作ったかと思ったら今度はデジタルスケッチペンと,最近のワコムの動きは面白いですね。Inklingは第一世代の商品ですが,今後どう機能強化されていくのかも楽しみです。

なお,11月2日現在ワコムストアでは品切れ中となっています。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入