週刊Webテク通信

2009年7月第1週号 1位は,5分であなたのデザインをもっと良くする方法/気になるネタは,パスワード入力の「****」は不要? 研究者の間で激しい論議

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

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

1. Five Minute Upgrade -- Making Your Design Pop | Build Internet!http://buildinternet.com/2009/06/five-minute-upgrade-making-your-design-pop/

5分であなたのデザインをもっと良くする方法として,8つの項目が紹介されています。BEFOREとAFTERの比較画像が載っていて分かりやすいです。

内容について,項目を以下に簡単にまとめてました。

  1. 色の彩度を上げる
  2. 単色だけだと物足りないことがある(差し色を追加する)
  3. グリッドにそってレイアウトする
  4. 細部に手間をかける(影の追加,1pxの境界線,グラデーションの塗りなど)
  5. 境界線を無視する(ボックスからあえてはみ出させる)
  6. 余白の追加
  7. テクスチャー
  8. 境界線

既存のデザインのクオリティをアップする8つのポイント | コリスとして訳して紹介している記事もあるので,そちらもご覧ください。

また,似たような記事として,TutorialMagazine.com - 7 Ways to Improve Your Web Designsという,Webデザインを向上させる7つのテクニックの解説記事もありました。

図1 5分でデザインをアップグレード

図1 5分でデザインをアップグレード

2. RedLine Magazine : 印刷用CSSのお話http://redline.hippy.jp/lab/css/css_16.php

印刷用CSSに関して,具体的かつ非常に役立つ記事です。

CSSレイアウトだと背景画像を多用することになりがちですが,IEはデフォルトで背景画像は印刷しないので,プリント時におかしなことになってしまうケースが多々あります。

この記事では印刷用CSSを記述する際の考え方や実践的な対処方法が現場の視点で詳しく説明してあります。

フッタなどの要素は,印刷用の一枚絵の別画像を用意しておくという手法は特になるほどと感心しました。ブラウザ表示用のフッタは印刷時には全て非表示にして,代わりに用意しておいた別画像をプリントするようにすればいいというわけです。これはいろんなケースで応用がききそうですね。

3. 30 Exceptional Web Designs - Nettuts+http://net.tutsplus.com/articles/web-roundups/30-exceptional-web-designs-for-the-web/

ひと味違ったデザインのWebサイトのギャラリーです。

大きな背景画像が敷かれたものが多く,背景画像の作り込みがポイントのようですね。ブラウザの横幅を広げても,違和感なく背景がつながっているように見えるデザインが主流のようです。

コンテンツの見せ方としても,スライダー,カルーセルといった手法がよく使われています。ページ内スクロールをスクリプトで制御しているサイトもいくつかありました。

図2 サムネイルはサイトの一部分をトリミングした画像です

図2 サムネイルはサイトの一部分をトリミングした画像です

4. Web Design Trend Hunting - Fluid Grid Layout: 10+ Outstanding Examples & 1 Tutorial | Inspired Magazinehttp://www.inspiredm.com/2009/07/03/web-design-trend-hunting-fluid-grid-layout-10-outstanding-examples-1-tutorial/

ブラウザ幅によって可変するグリッドレイアウトのサイトのショーケースです。そういったページを作るためのチュートリアルも一つ紹介されています。

四角いブロックがたくさんグリッドに沿って並んでいて,ブラウザ幅を変えると一行に入るブロックの個数が可変するようなサイトが紹介されています。Flashで作られているサイトも1つだけありましたが,他はCSSのみかCSS+JavaScriptで制御されているようです。

図3 似たようなグリッドレイアウトのサイトを12個紹介

図3 似たようなグリッドレイアウトのサイトを12個紹介

5. JPEG画像をより美しく,より軽量に最適化するテクニック | コリスhttp://coliss.com/articles/build-websites/operation/design/howto-jpeg-optimization-techniques.html

Clever JPEG Optimization TechniquesというSmashing Magazineの記事を訳して紹介しています。

8ピクセルのグリッドに揃えて画像を配置するなど,知らなかった人には目から鱗のテクニックが3つ紹介されています。

図4 JPEG最適化のテクニックを3つ紹介

図4 JPEG最適化のテクニックを3つ紹介

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

そのほか先週の記事から,必見のまとめ情報を紹介します。

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

3 apps to check username availability across all sites at once -- The Next Webhttp://thenextweb.com/2009/06/30/check-username-availability-sites/

各種ソーシャル系サービスのアカウント名が既に使われているかどうかをチェックしてくれるWebサービスがあるそうです。そういったサービスを3つ紹介している記事があったので,今回はその記事を紹介します。

それらのサービスでは,Twitter,Facebook,MySpace,delicious,YouTube,
Tumblrなどで,アカウント名が使用可能かどうかを横断的に検索できます。

自分のハンドルネームが使えるかしらという確認に使う人も多いでしょうが,企業名,商品名,ブランド名が使われているかどうかをチェックするビジネスツールといった意味合いの方が強いのかもしれません。

アメリカの企業はきっと,ブランド名を決めるときにTwitter,Facebookのアカウントはちゃんと取れるかどうかをチェックしたりするんでしょうね。

日本でも企業名,商品名,ブランド名のTwitterアカウントは早く取っておいた方がよさそうですね。Twitterアカウントがネットバブルのころのドメイン名のようになってしまっている気もします。

なお,3つ目に紹介されている「Friends Call Me」というサービスは,アカウント名をチェックすることもできますが,自分が使っているWebサービスをまとめたポータルページ(例:Friends Call Me dariusmonsefを作ることが目的のサイトのようです。

図5 3つのWebサービスが紹介されています

図5 3つのWebサービスが紹介されています

今週の気になるWebネタ

パスワード入力の「****」は不要? 研究者の間で激しい論議 - ITmedia Newshttp://www.itmedia.co.jp/news/articles/0907/01/news033.html

パスワード入力の際に「****」じゃなくてふつうに文字を表示した方が入力ミスが減っていいんじゃないかと, Webユーザビリティ研究の第一人者ヤコブ・ニールセンが言っているそうです。

それに対して当然ながら反論もあって,パスワードをのぞき見される危険性があること,パスワードを人に教えてはいけないというメッセージをユーザーに投げかける意味もあるということから「****」の方がいいということです。

どちらの意見も一理ありますね。パスワード入力時にcaps lockが有効になっていたり,日本語入力になっていたりで入力ミスする人も初心者には多そうです。人に見られていない環境なら,パスワードをふつうに表示するオプションがあってもよさそうですね。

Macだと,パスワード入力時にcaps lockが有効になっていると,入力欄にマークが表示されて分かるようになっています。Safariにも同様の機能があって,Windows版のSafariでもちゃんと表示されていました。この機能,ユーザビリティ的に非常にいいですよね。

なお,iPhoneではソフトウェアキーボードの押した文字が大きく表示されるので,のぞき見されていたらバレバレですよね。モバイル機器のパスワード入力のセキュリティに関しては,もっといろいろ技術が進歩するのを期待したいと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入