週刊Webテク通信

2011年4月第4週号 1位は,新しいCSSテクニックとツール,気になるネタは,雑誌『WIRED』日本版が6月に復活

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

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

1. Powerful New CSS Techniques and Tools - Smashing Magazinehttp://www.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/

最近公開されたCSSテクニックとツールを多数紹介した記事です。

CSSテクニックで紹介されているものの一部

  • 複数の背景画像をタイリングすることで不規則な模様を作る
  • CSS3による3Dホログラム
  • CSS3のグラデーションを使ったパターンいろいろ
  • CSS3によるドロップシャドウいろいろ

CSSツールで紹介されているものの一部

  • CSS3の新機能を設定するジェネレーター
  • パターンのジェネレーター
  • CSSフレームワーク
  • CSS3ボタンのソリューション

似たような記事として,CSS3の実例を35個紹介した35 Awesome CSS3 Examples And Helpful Resources For Web Designersという記事もありました。

図1 新しいCSSテクニックとツール

図1 新しいCSSテクニックとツール

2. CSS3 Buttons ? 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)http://www.webresourcesdepot.com/css3-buttons-10-awesome-ready-to-use-solutions-all-related-tutorials-you-need/

CSS3を利用したボタンのソリューションが多数紹介されています。ラベルの文字などを変えて,自分のサイトで簡単に使うことが可能です。

CSS3で角丸,グラデーション,ドロップシャドウが使えるようになり,表現力の高いボタンがCSSだけで作れるようになりました。マウスオーバー時,押されたときの変化もうまく考えられているボタンが多いです。

図2 CSS3ボタンのソリューションいろいろ

図2 CSS3ボタンのソリューションいろいろ

3. ASCII.jp:Dreamweaver CS5.5でスマホアプリ作ってみたhttp://ascii.jp/elem/000/000/600/600424/

Dreamweaver CS5.5のベータ版を使っての,スマートフォン向けサイト作成の実践レポートです。

作成したサイトをiOS/Android用のネイティブアプリとして書き出す機能もあるため,記事タイトルとしては「スマホアプリ作ってみた」となっています。

jQuery Mobileを利用することで,スマートフォンらしいUIを実現しています。作ったサイトはPhoneGapを使ってネイティブアプリにするのですが,連携機能によりDreamweaverから簡単に利用できるようです。

Adobe CS5.5でのFireworksはCS5.1になるそうですが,アップグレードされた点を紹介した1の強化点">Fireworks CS5.1の強化点という記事もありました。

図3 Dreamweaver CS5.5でのスマートフォン向けサイト/アプリ作成

図3 Dreamweaver CS5.5でのスマートフォン向けサイト/アプリ作成

4. Facebookページにオリジナルコンテンツを追加できるアプリ7個|skuare.nethttp://www.skuare.net/2011/04/facebook7.html

Facebookページに独自デザインのページや他のソーシャルメディアのコンテンツを追加する,Facebookアプリの紹介記事です。

独自デザインの「Welcomeページ」をFacebookページのトップページにしているところが多いのですが,そういうページを作るにはFacebookアプリを使うと簡単です。

「いいねによる切り替えあり」というのは,⁠いいね」をしてフォローしてくれているファンとそれ以外の人とで,違ったページを見せることができるということです。

図4 Facebookページにオリジナルコンテンツを追加できるアプリいろいろ

図4 Facebookページにオリジナルコンテンツを追加できるアプリいろいろ

5. Showcase of Excellent Graphic Email Newsletter Designs - Noupe Design Bloghttp://www.noupe.com/how-tos/showcase-of-excellent-graphic-email-newsletter-designs.html

Eメールによるニュースレターのデザインショーケースです。

通常のWebサイトより,印刷物に近いデザインのものが多いですね。

図5 ニュースレターのデザインショーケース

図5 ニュースレターのデザインショーケース

そのほか,先週の記事の中から,気になる記事を3つ紹介します。

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

BO.LT | A Page Sharing Networkhttp://bo.lt/

BO.LTは既存のWebページを複製し,内容を変更して共有できるWebサービスです。

複製したWebページは,文字の変更,画像の削除や変更,リンク先の変更が簡単にできるようになっています。このインターフェイスのサイト更新ツールがあったらいいなと思うほど使いやすいです。

ページに別レイヤーでコメントを書き込むのとは違い,コンテンツそのものを変更してしまうので,悪用されないかが気になるところです。文字と画像は変えられても,リンク先の変更ができなければフィッシング用途には使えないのになと思いました。

役に立つ使い方としては,勝手に翻訳したページを作るというのはありかもしれません。海外のWebサービスの入り口のページだけ日本語化するなんてことができます。有志で共同して翻訳していけば,結構いいものができると思うのですがどうでしょう。

既存ウェブページの複製を自由に編集して共有できるBO.LTという記事を参考にしました。

図6 Webページを複製,共有するサービスBO.LT

図6 Webページを複製,共有するサービスBO.LT

今週の気になるWebネタ

雑誌『WIRED』日本版が6月に復活,「教養学部必読書50」の投票も募集 -bookニュース:CINRA.NEThttp://www.cinra.net/news/2011/04/19/210557.php

「WIRED」の日本語版が6月に復活するそうです。最初聞いたときは電子版で登場するのかと思いましたが,紙の雑誌での復刊なんですね。休刊する雑誌が多い昨今に,復刊するというニュースはなんだかうれしくなります。

1994~1998年に発行されていた日本版の「ワイヤード」が復刊するというより,別モノの日本版「WIRED」が創刊すると考えた方がいいのかもしれません。とはいえ,日本版「ワイヤード」の編集長だった小林弘人がエディトリアル・アドバイザーとして関わるそうです。

英語版の「WIRED」は,最近iPad向けの電子版にも力を入れています。日本版「WIRED」を出版するコンデナスト・ジャパンの「GQ JAPAN」⁠VOGUE JAPAN」などもアプリ版が登場していることから,⁠WIRED」も紙だけではない展開になりそうです。そっちのほうが楽しみな人の方が多いかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入