週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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である程度は叶えられそうです。

図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テク関連の情報をお届けしています。くわしくは,この記事の最後にある著者プロフィールをご覧ください。

今週の気になるWebネタ

オフラインGmailを使うための設定方法 | Google Mania - グーグルの便利な使い方http://google-mania.net/archives/1127

ついにGmailにオフライン環境でもメールの読み書きができる機能が追加されました。まだLabs(ラボ=実験室)機能ですし,英語版のみでの提供のようですが,話題になっているようです。

Googleの便利な使い方などを紹介するサイトGoogle Maniaでは,オフラインモードでGmailを利用するための設定方法をくわしく解説しています。

それによると,一旦表示言語を英語にして機能をONにした後は,日本語に戻してもオフラインモードは使えるそうです。

オフライン機能はまだ使ってないわたしですが,設定画面に出るケーブルの外れたGmailアイコンのイラストが「ウマイなぁ」と気に入っています。

Googleといえば,先週は全結果結果に「コンピュータに損害を与える可能性」と表示してしまったのも話題になりましたね。実際問題が起きていたのは40分くらいだったようですが,一般紙の新聞でも取り上げられるほどの大ニュース扱いでした。

「もしかして○○」機能がGoogle東京オフィス主導でパワーアップしたというネタは,もしかしなくてもこれらのニュースですっかりかすんでしまいましたね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入