週刊Webテク通信

2009年12月第2週号1位は、ミニマルなWebレイアウトを作るために必要なこと、気になるネタは、絶対に覚えたい iPhone+Google音声検索・10の

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

1. How to project a minimalist layout? attention to the details | Your Inspiration Webhttp://www.yourinspirationweb.com/en/how-to-project-a-minimalist-layout-attention-to-the-details/

ミニマルなWebレイアウトを作るために必要なことについての記事です。

ミニマルなデザインとは、必要最小限にそぎ落としたデザインといった意味でしょう。最小限に絞った分、タイポグラフィやホワイトスペースなどの細部にこだわりキッチリ仕上げないとアラが目立ちます。その分、制作には時間がかかるということです。

シンプルだから早く完成するかというとそうではなく、むしろ逆かもしれないということですね。クライアントには理解が得られにくいかもしれませんが。

ミニマルデザインに必要なものとして、以下の項目が挙げられています。

  1. よいロゴ
  2. 大きなオリジナルのフォント
  3. 色の選択
  4. よいタイポグラフィ
  5. アイコン、シール、吹き出し

とにかく文字が重要だということで、⁠読みやすいこと、調和が取れていること、美的であること」がポイントなのだそうです。

図1 ミニマルなレイアウトに必要なこと
図1 ミニマルなレイアウトに必要なこと

2. Styling HTML Lists with CSS: Techniques and Resources - Smashing Magazinehttp://www.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/

リストをCSSでデザインする方法のまとめ記事です。リスト(ul、ol、dl)をCSSで扱う際の注意点、ブラウザによる表示の違い、テクニックや実例紹介などがまとめられています。

  • リセット用CSSでマージンやパディングをゼロにしてブラウザごとの差異をなくす
  • 先頭の記号を画像にする場合は、list-style-imageを使わず背景画像にする

といった、リストを扱うときの定番となっているテクニックが、なぜ必要なのかの理由を復習することもできます。

メニュー、コメント表示欄、タグクラウド、グラフなど、実例紹介ではリストがいたるところに使われていることが分かります。

図2 HTMLのリストをCSSでスタイリングする方法
図2 HTMLのリストをCSSでスタイリングする方法

3. Famous Redesigned Logos of 2009 | Logo Design Bloghttp://www.logoblog.org/wordpress/redesigned-logos-2009/

今年リ・デザインされた有名なロゴのギャラリーです。リニューアル前と後とが並べて見られて、なかなか興味深いです。

よりシンプルに、親しみやすい感じに変化しているものが多いように見受けられました。

AOLはタイムワーナーから離れて「Aol.」とブランドを変更したようですが、⁠Aol」「あおい」に見えてしまいますよね。わたしだけ?

図3 2009年にリ・デザインされた有名なロゴ
図3 2009年にリ・デザインされた有名なロゴ

4. Bokeh Effect in Web Design: 30 Excellent Examples and Tutorials | Spyre Studioshttp://spyrestudios.com/bokeh-effect-examples-tutorials/

Webデザインに使われた「ぼけ」効果の作例とチュートリアルを集めたものです。

「Bokeh」は日本語の「ぼけ」のことで、写真用語で人物写真の背景のぼけなどをBokehというようです。ここでのサンプルを見るとそうではなく、光の乱反射のようなものをBokehと呼んでいるようですが。

木漏れ日の光とか、夜イルミネーションをカメラで撮ったときに写る光のようなイメージといいましょうか…。⁠説明がわかりにくいんじゃぼけ」と言われそうですが、実際にこの記事を見てもらえばどんなものか一発でわかるでしょう。

図4 Webデザインに使われたBokeh(ぼけ)効果
図4 Webデザインに使われたBokeh(ぼけ)効果

5. A Gold Mine of Adobe Illustrator Resources - Noupehttp://www.noupe.com/design/a-gold-mine-of-adobe-illustrator-resources.html

Adobe Illustratorのブラシ、パターンやベクター素材などが大量に紹介されています。

Illustrator関連として、The Best Vector Tutorials of 2009 | Web Design Ledgerというベクター画像を描くためのチュートリアル記事もありました。

図5 Illustrator向けの豊富な素材集
図5 Illustrator向けの豊富な素材集

そのほか先週の記事から、jQuery関連のチュートリアルやプラグインを紹介します。

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

nanapi [ナナピ] - みんなで作る暮らしのレシピ -http://nanapi.jp/

9月に公開されたサイトですが、いまさらながら「nanapi(ナナピ⁠⁠」を紹介します。

よい評価と悪い評価、公平につけるべきか? : ロケスタ社長日記という、nanapiの運営会社ロケットスタート社長のブログ記事が興味深かったからです。

nanapiはユーザー参加型のノウハウ共有サイトで、⁠7分であなたの生活を便利にしちゃうライフレシピ共有サイト」と謳っています。

投稿されたライフレシピ(ノウハウ記事)について、⁠いいね!(良い評価⁠⁠きょとん(悪い評価⁠⁠」という評価が付けられるのですが、悪い評価はログインしないと書けないとのことです。その理由や思想が気になる人は、ぜひブログ記事を読んでみてください。

ほかにもデザインを担当した人がデザインプロセスをブログで発表したりと、Webデザイナーには興味深いサイトとなっています。

サイト自体もライフレシピの数がかなり増えて、個別記事がいくつも「はてなブックマーク」で上位になったりと盛り上がりつつあるようです。

図6 ライフレシピ共有サイトnanapi(ナナピ)
図6 ライフレシピ共有サイトnanapi(ナナピ)

おすすめ記事

記事・ニュース一覧