週刊Webテク通信

2009年1月第5週号1位はWebタイポグラフィのためのデザインツール50/気になるネタはオフラインGmailを使うための設定方法

ネットで見かけた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である程度は叶えられそうです。

図1 このロボットもjQueryで動きます
図1 このロボットも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 」にモバイル向けサイトのキャプチャー画像が多数紹介されています。

図2 ケータイ向けサイトデザインの参考に
図2 ケータイ向けサイトデザインの参考に

4. [CSS]フロートしたナビゲーションを中央に配置するスタイルシート | コリスhttp://coliss.com/articles/build-websites/operation/css/css-centering-float-navigation.html

グローバルメニューなどでよく使う、リスト要素をフロートさせて作ったメニューを成り行きで中央揃えにするCSSテクニックの紹介です。

簡単に言ってしまうと、親要素は左から50%のところに配置して、その子要素を今度は右から50%の位置に配置しているようです。

このエントリーは海外サイトで見つけたテクニックを紹介した記事なのですが、公開後に独自の新たな情報も追加され、元ネタから離れてパワーアップしています。もらったコメントを元にアップデートされているところが「集合知」って感じがしていいですよね。

図3 ナビゲーションを中央揃えにするテクニック紹介
図3 ナビゲーションを中央揃えにするテクニック紹介

5. Het webdesign schetsboek - Webdesign Inventis Web Architectshttp://www.inventis.be/blog/het-webdesign-schetsboek

プリントアウトしてWebページのデザインスケッチ用紙として使える、グリッド付きブラウザ画面の入った用紙データがダウンロードできます。

このサイト、ドメインが「be」とあまり見慣れないものですがベルギーのサイトなんですね。言葉はオランダ語のようです。ちなみにbeドメインは日本でも取得できるようです。

図4 Webデザインスケッチ用紙を配布しています
図4 Webデザインスケッチ用紙を配布しています

以上、メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

先週のWebテク記事の中からほかに、メールアドレスを知られずにメールを受け取れるというWebサービスwhspr! | Get Emails Without Revealing Your Email Addressが気になったので紹介します。

図5 期間限定メール送信フォームが作れます
図5 期間限定メール送信フォームが作れます

あなた専用のメール送信フォームを簡単に作れるというサービスで、利用する期間は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テク関連の情報をお届けしています。くわしくは、この記事の最後にある著者プロフィールをご覧ください。

おすすめ記事

記事・ニュース一覧