週刊Webテク通信

2009年11月第5週号 1位は,すばらしいWebデザインのための4つの重要な要素,気になるネタは,ポメラとiPhoneがついにつながった!

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

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

1. The Four Key Components of a Great Web Design | Web Design Ledgerhttp://webdesignledger.com/tips/the-four-key-components-of-a-great-web-design

すばらしいWebデザインのための4つの重要な要素の解説です。

その4つとは以下の通り。

  1. しっかりしたレイアウト
  2. 効果的な文字の扱い
  3. 正しい色彩設計
  4. 適切なデザイン要素

言われてみれば当たり前のものばかりですね。

ワイヤーフレームからきちんと設計する,ホワイトスペースを存分に使う,文字は読みやすいように,動作に一貫性を持たせる,細部に注意を払う,など細かい解説も当たり前ながら重要なことばかりです。

図1 Webデザインをすばらしいものにする4つの鍵

図1 Webデザインをすばらしいものにする4つの鍵

2. High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ | warikiruhttp://warikiru.blogspot.com/2009/11/high-performance-web-design.html

読み込みの速い(=パフォーマンスのよい)Webサイトにするために,デザイン段階から考えようという記事です。

なぜ読み込みが遅いとダメなのか,読み込み速度をどうやって計測・評価するのか,読み込みを速くするために有効と言われている方法にはどんなものがあるのかが,まず紹介されています。

この記事のメインディッシュはその後で,むずかしいテクニックを使わなくてもデザイン・設計の段階から意識すればパフォーマンスのよいサイトが作れるはずだとし,そのヒントを与えてくれます。

なんでも画像にしない,リッチインタラクションが本当に必要か考える,1ページに詰め込みすぎないといったことを考えてみることが第一歩のようですね。

図2 ハイパフォーマンスのWebサイトを考える

図2 ハイパフォーマンスのWebサイトを考える

3. How to avoid these common mistakes in blog design | DesignBumphttp://designbump.com/originals/how-avoid-these-common-mistakes-blog-design

ブログデザインでやりがちなミスを回避する方法を紹介しています。

  • 検索ボックスを用意しない
  • 広告を貼りすぎる
  • サイトのナビゲーションが見つけにくい
  • その記事の作者情報が見当たらない
  • 自信作の記事を前面に出さない
  • 作者への連絡方法が分からない
  • 記事をソーシャルサイトに共有する方法が用意されていない
  • SEOを無視する
  • 構造と秩序に欠ける
  • リピーターになるための道筋を用意してない

といった例に対し,解決法を案内しています。

図3 ありがちなブログデザインの失敗を避ける方法

図3 ありがちなブログデザインの失敗を避ける方法

4. ASCII.jp:Googleも採用!CSS3実践テクニックhttp://ascii.jp/elem/000/000/474/474810/

CSS3のグラデーション,ドロップシャドウ,アニメーション機能を使い,ナビゲーションメニューを作るチュートリアル記事です。

この例では,作成したナビゲーションが100%意図通りに動くのはSafari 4.0だけなのが残念ですが,これからのWebデザインはこういう方向に行くんだろうというのはよく分かりますね。

CSS3のそれぞれの機能に非対応のブラウザでも操作上の問題はないので,すぐにでも実用できるとは思います。ただ,日本語の場合はメニューの文字がテキストのままというのは厳しいんじゃないでしょうか。Mac OS X上では,アンチエイリアスも効いたヒラギノの太い書体で表示できるのでいいんですけどね。

図4 CSS3の実践方法のチュートリアル

図4 CSS3の実践方法のチュートリアル

5. InspirationTime - a Showcase of Beautiful Web Designhttp://inspirationti.me/

Webデザインのギャラリーサイトです。

「Clean , Colorful , Dark」といったスタイル,⁠Slideshows , Tabs , Illustration」といったエレメントなどを切り口にサイトを探していくことができます。シンプルながらデザイン性も高くステキなサイトだと思います。

図5 キレイなWebデザインのショーケース

図5 キレイなWebデザインのショーケース

そのほか先週の記事から,興味深いチュートリアル記事を紹介します。

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

… hello | Hot Gloo - The Online Wireframe App …http://hello.hotgloo.com/

最近オンライン作図ツールが次々と登場しているようですが,今回紹介する「Hot Gloo」はワイヤーフレーム作成のためのWebサービスです。

2009年11月第3週号のこのコーナーで紹介したMockingbirdと競合するサービスですね。

あらかじめ用意されたUI要素をドラッグ&ドロップで配置し,移動やリサイズでレイアウトできるのはMockingbirdと同様のようです。複数ページの管理も可能です。

コラボレーション機能を重視しているようで,複数のユーザーを作って権限を与えることができます。作ったワイヤーフレーム上に注釈メモを付けることによってやりとりできるそうです。

オンラインでワイヤーフレームが描画できる「HotGloo」がかなり便利:phpspot開発日誌で紹介されていました。

図6 オンラインワイヤーフレームツール「Hot Gloo」

図6 オンラインワイヤーフレームツール「Hot Gloo」

今週の気になるWebネタ

ポメラとiPhoneがついにつながった!:CloseBox and OpenPod:ITmedia オルタナティブ・ブログhttp://blogs.itmedia.co.jp/closebox/2009/11/iphone-a73f.html

キングジムのデジタルメモ「ポメラ」の新モデルDM20が発表されました。

書いた文章をQRコード化して画面に表示する機能が搭載され,携帯電話との連携が図れるとのことです。ケータイでQRコードを読み取り,テキストに復元させてメールしたりするわけですね。この発想には感心しました。

ということは,iPhoneでもQRコード読み取りアプリを使えば…と思った人はもちろんいるようで,実際にためした方のブログ記事を見つけました。

今のところほとんどのQRコードアプリで読み込みを失敗するそうで,認識可能だったアプリでも長文になると失敗するとのことです。

まだ完全なポメラとiPhoneの連携とはいかないようですが,新たなQRコードアプリが登場して問題解決する可能性は高いでしょう。そうなったときには,出かけるときにはiPhoneとポメラしかいらないとか主張する一派が登場しそうな気がしますね。

わたしの書いたkizasiジャーナル:新ポメラはケータイとつながる!?という記事もご参考に。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入