週刊Webテク通信
2009年11月第2週号 1位は,WebデザインをGoodからGreatに変える6つの方法,気になるネタは,Gmailのフォントが変に
ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2009年11月2日~11月8日の間に見つけた記事のベスト5です。
1. 6 Ways To Take Your Webdesign From Good To Greathttp://www.myinkblog.com/2009/11/02/6-ways-to-take-your-webdesign-from-good-to-great/
WebデザインをGoodからGreatに変える6つの方法を紹介しています。GoodからGreatへの,ほんのわずかな差に気付くヒントとなる内容です。
- グラデーションは微妙に使う
- ホワイトスペースを追加する
- グリッドに添わせる
- 文字をうまく扱う
- わかりやすく効果的なナビゲーションを作る
- すばらしく役に立つフッタを用意する
1~4は見た目について,5,6は機能面も含んでの内容となっていますね。
2. Web Design Trends for 2010 | Web Design Ledgerhttp://webdesignledger.com/tips/web-design-trends-for-2010
2010年のWebデザインの流行となりそうなポイントを14項目紹介しています。
文字の扱いに凝ったものや大きなフッタは,1位で紹介した項目と共通していますね。
大きなロゴ,大きなイメージ,大きなフッタといろんな要素を大きくするのがはやりのようで,モニタサイズが大きくなっているのと関係があるのかもしれません。
「2010年に備えて,知っておきたいウェブデザインのトレンド | コリス」として,この記事を翻訳したエントリーもありました。
3. Best Practices for 6 Common User Interface Elements | Webdesigner Depothttp://www.webdesignerdepot.com/2009/11/best-practices-for-6-common-user-interface-elements/
6つのよく使われるユーザーインターフェイス要素に関して,ベストな表現方法を考えた記事です。
- 検索ボックスの見た目
- コンテンツの折畳み/展開のためのマーク(ボタン)
- Ajaxでのローディング中を表す表示
- カート,ログイン,登録のリンクやボタンの位置
- クレジットカードの入力フォームでの有効期限の日付のフォーマット
- 通常テキストとリンクテキストの区別
の6つのインターフェイスについて考察しています。
4. とっても使えるoverflowプロパティ。その使い方色々。|CSS HappyLifehttp://css-happylife.com/log/css-template/000751.shtml
CSSの「overflow: hidden」を使ったテクニックを5つ紹介しています。
clearfixの代わりに使ったり,フロートした画像の横のテキストが画像の下に来ないようにしたりと,目からうろこのテクニックがそろっていますね。
IE5対策と印刷用にCSSの調整が必要な場合がありそうという点には注意が必要でしょう。
5. The Future Of The Web: Where Will We Be In Five Years? - Noupehttp://www.noupe.com/trends/the-future-of-the-web-where-will-we-be-in-five-years.html
Webの未来について,5年後を予想した15の予言です。
1つ目の項目に小額決済(マイクロペイメント)を取り上げているのが意外ですが,たしかにWebの未来を考える上で重要なのは間違いないでしょう。
デザイン面では,モニタの巨大化により横スクロールのコンテンツが増えるのではないかと予想しています。横スクロールのサイトばかりになることはないでしょうが,横スクロールが選ばれるケースも増えていくんでしょうね。
Webが共同作業の場としてより利用されるようになる,リアルタイム性が高まるといった予想は,まさに今のトレンドの延長線上にあることです。モバイルが重要になってくるというのもそうですね。
最後は,Webが情報配信やコンテンツ配布の中心となるだろうと締めています。
そのほか先週の記事から,Webデザインのギャラリー記事を紹介します。
- 30 Unique and Artistic Website Designs | Showcases | PelFusion.com
個性的で芸術的なWebデザインのギャラリーです。 - Outlaw Design Blog ≫ 50 Clean, Sleek, and Modern Website Designs
クリーンでイマ風のWebデザインのギャラリーです。 - 50 Beautiful and Creative Blog Designs - Smashing Magazine
美しくクリエイティブなブログデザインのギャラリーです。
先週の気になるWebサービス
Bookmarks, Images, Files - Gkeeperhttp://www.gkeeper.com/
Gkeeperはオンラインブックマークなのですが,ページに含まれる画像やファイルもブックマークできるのが特徴です。
画像は大/中/小の大きさごとに,ファイルはオーディオ/ビデオ/その他のタイプごとに閲覧できます。画像はAltテキスト,ファイルはアンカーテキストがファイルの名称となり,検索も可能です。日本語での検索もできました。
画像やファイルはGkeeperのサーバーに保存されるわけではなく,URLが保存されているだけのようです。Webで見つけた画像やファイルの保管場所にするという使い方はできませんね。
デザインも含め,まだまだ発展途上のように見受けられますが,発想は面白いサービスだと思います。
「Webページ上のあらゆるコンテンツをワンクリックでブックマークできるサイト「Gkeeper.com」*二十歳街道まっしぐら」に登録の仕方や使い方が詳しく紹介されています。
今週の気になるWebネタ

mac/safariでのフォントの不具合 - Gmailヘルプhttp://www.google.com/support/forum/p/gmail/thread?tid=588d91dfe2db9b53&hl=ja
最近,MacのSafariユーザーの間で「Gmailの字が汚くなった」「中国語のフォントになった」と,ちょっとした騒ぎが起こりました。
「うちでも」「わたしのMacも」とTwitterで一気に話題となり,「Arial Unicode MS」というフォントを使用停止にすればいいという解決法もすぐにTwitterで共有されました。今はGoogle側で対処がなされたのか,Arial Unicode MSをオンにしても問題ないようです。
Arial Unicode MSは日本語,英語,韓国語,中国語,タイ語,ギリシャ語,など多言語が含まれたすごいフォントなのですが,日本語の文字がデザイン的に難があるんですね。
「っ」のような小さい仮名が上の方に表示されたり,一部の漢字が中国の漢字で表示されたりして,中国語っぽい雰囲気を出してしまうようです。
イラストネタの補足をすると,「サンシャイン牧場」は中国メーカーによる人気のmixiアプリで,日本語がおかしかったり中国の漢字が出てきたりすることでも有名なんです。
初期のころは,表示されるテキストが中国語フォントだったらしく,今回のGmail騒動でサンシャイン牧場を連想した人もいるんじゃないかと思ったわけです。
週刊Webテク通信
- 2009年11月第4週号 1位は,CSS3の新機能をデザインに活かす方法,気になるネタは,THE NORTH FACE タッチパネル対応のグローブを発売中
- 2009年11月第3週号 1位は,グリッドベースのWebデザインの手引き,気になるネタは,Google マップでトイレ検索!?
- 2009年11月第2週号 1位は,WebデザインをGoodからGreatに変える6つの方法,気になるネタは,Gmailのフォントが変に
- 2009年11月第1週号 1位は,今どきのCSSレイアウトの特徴,気になるネタは,日本版Twitter,「つぶやき」から「ツイート」に
- 2010年3月第2週号 1位は,CSSだけで実現するフキダシ作成テクニック,気になるネタは,Evernoteの日本語化や今後の展望について聞いてきた
- 2010年2月第3週号 1位は,リンクのスタイリングに関する手引き,気になるネタは,韓国で「iPhoneを操作できる」魚肉ソーセージが人気
- 2010年1月第1週号 1位は,実践的なCSS3の使い方,気になるネタは,鳩山首相がTwitterとBlogを開始
- 2009年12月第1週号 1位は,RGBAカラーの使い方,気になるネタは,思いどおりの日本語入力 - Google 日本語入力
- 2009年10月第1週号 1位は,検索結果ページのデザイン/気になるネタは,キー局がなぜ今,YouTubeに


