週刊Webテク通信
2009年1月第5週号 1位はWebタイポグラフィのためのデザインツール50/気になるネタはオフラインGmailを使うための設定方法
2009年2月5日
ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2009年1月26日~2月1日の間に見つけた記事のベスト5です。
1. 50 Useful Design Tools For Beautiful Web Typography | CSS, Fonts | Smashing Magazinehttp://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
Webでタイポグラフィを扱うためのツールのリンク集です。リファレンスやテクニック,デザインギャラリーもあり,かなりのボリュームになっています。
英語だとCSSのフォント指定でそれっぽい見出しも作れますが,日本語だとなかなかそうもいかないので「英語だと使えそうね」という情報が多いのはしょうがないところですね。
HTML上のテキストをJavaScriptでFlashムービーによる文字に置き換える「sIFR」は英語圏では結構メジャーな存在のようで,関連ツールなどとともに1コーナーとして紹介されています。 「Web Design Trends For 2009 」(2009年のWebデザイントレンド)でも,5つめの項目にsIFRなどを使ったフォントの画像置換が挙げられていました。
タグ付きのダミーテキストを提供している「HTML Ipsum」というサイトが紹介されていますが,これの日本語版があったらぜひ利用したいですね。
2. 13 Excellent jQuery Animation Techniques | Web Design Ledgerhttp://webdesignledger.com/tutorials/13-excellent-jquery-animation-techniques
jQueryを使ってのアニメーションテクニックがいろいろ紹介されています。
複数枚の画像でできたロボットがアニメーションする様子も面白いですが,メニューバーにちょっとしたアニメーション効果を与えるような実用的サンプルが多いです。
Flashで作ったようなアニメーションするメニューにしたいというクライアントのわがままも,jQueryである程度は叶えられそうです。
3. case:MobileDesign! モバイルサイトのデザインhttp://d.hatena.ne.jp/mobile_design/
ありそうで(多分)なかった,ケータイ向けサイトデザインのギャラリーサイトです。
日本のケータイサイトの多くはPCからアクセスできないようになっていますが,このサイトの画像はPCでキャプチャーしているようです。
ケータイサイトのQRコードが載っているので,気になるサイトはすぐにチェックできますね。 ケータイコンテンツはFlashなど動きのあるものが多いので,画像だけで見たときと実際に携帯電話でアクセスしたときとでは感じが違うケースも多いのかもしれません。
海外のモバイルサイトのデザインに関しては,「Mobile Web Design Trends For 2009 | Design Showcase | Smashing Magazine 」にモバイル向けサイトのキャプチャー画像が多数紹介されています。
4. [CSS]フロートしたナビゲーションを中央に配置するスタイルシート | コリスhttp://coliss.com/articles/build-websites/operation/css/css-centering-float-navigation.html
グローバルメニューなどでよく使う,リスト要素をフロートさせて作ったメニューを成り行きで中央揃えにするCSSテクニックの紹介です。
簡単に言ってしまうと,親要素は左から50%のところに配置して,その子要素を今度は右から50%の位置に配置しているようです。
このエントリーは海外サイトで見つけたテクニックを紹介した記事なのですが,公開後に独自の新たな情報も追加され,元ネタから離れてパワーアップしています。もらったコメントを元にアップデートされているところが「集合知」って感じがしていいですよね。
5. Het webdesign schetsboek - Webdesign Inventis Web Architectshttp://www.inventis.be/blog/het-webdesign-schetsboek
プリントアウトしてWebページのデザインスケッチ用紙として使える,グリッド付きブラウザ画面の入った用紙データがダウンロードできます。
このサイト,ドメインが「be」とあまり見慣れないものですがベルギーのサイトなんですね。言葉はオランダ語のようです。ちなみにbeドメインは日本でも取得できるようです。
以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。
先週のWebテク記事の中からほかに,メールアドレスを知られずにメールを受け取れるというWebサービス「whspr! | Get Emails Without Revealing Your Email Address」が気になったので紹介します。
あなた専用のメール送信フォームを簡単に作れるというサービスで,利用する期間は1日から365日の間で指定するようになっています。締切のあるメールフォームとしてしか使えませんが,作ったまま放置しても期限が来ると使えなくなるのは便利とも言えるでしょう。CAPTCHAも付いているのでスパムメールに悩まされる心配もなさそうです。
URLが「http://whspr.me/(Whisper me)」というのもシャレてますよね。
また,オープンソースアプリケーションのリスト「30 Useful Open Source Apps for Web Designers 」や,Mac用アプリケーションのリスト「15+ Incredibly Useful Mac Apps For Freelance Web Designers」といったWebデザイナーのためのソフトウェア紹介記事もぜひチェックしてみてください。
デイリーWebテクでは,(ほぼ)デイリーでこういったWebテク関連の情報をお届けしています。くわしくは,この記事の最後にある著者プロフィールをご覧ください。
今週の気になるWebネタ

オフラインGmailを使うための設定方法 | Google Mania - グーグルの便利な使い方http://google-mania.net/archives/1127
ついにGmailにオフライン環境でもメールの読み書きができる機能が追加されました。まだLabs(ラボ=実験室)機能ですし,英語版のみでの提供のようですが,話題になっているようです。
Googleの便利な使い方などを紹介するサイトGoogle Maniaでは,オフラインモードでGmailを利用するための設定方法をくわしく解説しています。
それによると,一旦表示言語を英語にして機能をONにした後は,日本語に戻してもオフラインモードは使えるそうです。
オフライン機能はまだ使ってないわたしですが,設定画面に出るケーブルの外れたGmailアイコンのイラストが「ウマイなぁ」と気に入っています。
Googleといえば,先週は全結果結果に「コンピュータに損害を与える可能性」と表示してしまったのも話題になりましたね。実際問題が起きていたのは40分くらいだったようですが,一般紙の新聞でも取り上げられるほどの大ニュース扱いでした。
「もしかして○○」機能がGoogle東京オフィス主導でパワーアップしたというネタは,もしかしなくてもこれらのニュースですっかりかすんでしまいましたね。
週刊Webテク通信
- 2009年2月第3週号 1位は,効率的にWebデザイン作業をするための10のTips/気になるネタは,Mozilla,ブラウザ上で動くコードエディタ発表
- 2009年2月第2週号 1位は,JavaScriptを使ったイメージギャラリー17個/気になるネタは,浜崎あゆみの新作「NEXT LEVEL」をUSBメモリで発売
- 2009年2月第1週号 1位は,5つの有名なCSSフレームワーク/気になるネタは,メールアドレスを掲載するときはすぐそばに「広告お断り」の注意書きを
- 2009年1月第5週号 1位はWebタイポグラフィのためのデザインツール50/気になるネタはオフラインGmailを使うための設定方法

