週刊Webテク通信

2009年9月第2週号1位は、CSS3で簡単に実現できるようになった代表的なCSSテクニック/気になるネタは、Blogger の Navbar に「共有」ボタンが登場

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

1. 11 Classic CSS Techniques Made Simple with CSS3 - Nettuts+http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/

代表的なCSSテクニックについて、CSS3での新機能を使った記述方法とこれまでの記述とを比較しています。CSS3でこれだけ簡単になったんだということが分かりますね。

角丸、影、透明度、背景画像などのテクニックが取り上げられています。CSSだけでの実装が難しかった角丸や影は、従来の方法ではjQueryのプラグインを利用して簡単に解決していますね。

CSS3の普及はまだ先でしょうし、この両方の方法を併用していくのが現実的でしょう。CSS3と従来の方法の両方を合わせたTips集として、この記事はとても参考になると思います。

図1 CSS3と従来の方法とのCSSテクニックの比較
図1 CSS3と従来の方法とのCSSテクニックの比較

2. Horizontal Navigation Menus: Trends, Patterns, and Best Practices | Design Showcase | Smashing Magazinehttp://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/

水平方向のナビゲーションメニューのトレンドや傾向、事例などをまとめた記事です。

水平方向のナビゲーションメニューのユーザビリティを向上させるには、以下のような点に気をつけるといいそうです。

  1. Use Familiar Names For Links
    リンクにはよく使われる名称を用いる(例:About us,Services,Products)
  2. Clearly Distinguish Primary And Secondary Sections
    主要なリンクと補助的なリンクとを明確に区別する
  3. Put ⁠Action⁠⁠ Links On Right
    機能を動作させるためのリンク(ログインボタンなど)を右側に置く
  4. Avoid ⁠Surprise⁠⁠ Drop-Down Menus
    ビックリさせるドロップダウンメニューは避ける

4番目の項目は、ドロップダウンメニューを否定しているのではありません。下向きの三角形を入れるなどドロップダウンすることが分かるようにすることが必要だと指摘しています。

図2 水平方向ナビゲーションのトレンドや事例集
図2 水平方向ナビゲーションのトレンドや事例集

3. 30+ Examples of Big, Bold, and Beautiful Website Navigation Menus | FreelanceFolder http://freelancefolder.com/30-examples-of-big-bold-and-beautiful-website-navigation-menus/

大きくグラフィカルなメニューが最近のトレンドということで、大きくて目立つ美しいナビゲーションメニューを集めたショーケースです。

図3 大きく目立つナビゲーションメニューのショーケース
図3 大きく目立つナビゲーションメニューのショーケース

4. 9 Things You Can’t Forget When Designing a Blog | Tutorial9http://www.tutorial9.net/web-tutorials/9-things-you-cant-forget-when-designing-a-blog/

ブログをデザインするときに忘れてはならない9つのことを紹介しています。実例も豊富です。

  1. ファビコン
  2. 繊細なグラデーション、テクスチャー、影、1ピクセルのライン
  3. アイコン
  4. ホワイトスペース(空白部分)
  5. 揃え
  6. 書体
  7. 強調
  8. リスト、引用部分のデザイン
  9. コメントとトラックバックを分ける

という、見落としがちだけど気をつけた方がいいことの解説でした。

図4 ブログデザインで忘れてはならない9つのこと
図4 ブログデザインで忘れてはならない9つのこと

5. 20 Useful Fireworks Tutorials for Designershttp://sixrevisions.com/graphics-design/20-useful-fireworks-tutorials-for-designers/

Fireworksの能力を感じさせるチュートリアルを多数紹介しています。

この記事の最初の一文にはちょっと笑ってしまいました。

「Adobe Fireworks is the neglected cousin of Illustrator and Photoshop.」
⁠Adobe Fireworksは忘れられたIllustratorとPhotoshopのいとこだ)

Fireworksをよく使うわたしは、ImageReadyは消えたけどFireworksは残ったことだけでもありがたいと思っています。Fireworksはやればできる子です。ツールとしての洗練さに欠けるのも愛嬌と思いましょう。

掲載されているチュートリアルの半分くらいが同じAbduzeedoというサイトのものというのも、マイナー感を感じさせていますね。

図5 デザイナーのためのFireworksチュートリアル集
図5 デザイナーのためのFireworksチュートリアル集

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

そのほか先週の記事から、インスピレーションを受けられそうな記事を紹介します。

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

Free Online PDF Editor - Edit PDF on the Web - PDF Hammerhttp://www.nitropdf.com/free/hammer/

複数のPDFファイルをひとつにまとめたり、不要なページを削除したいというケースは意外とあると思います。そんなとき、オンラインで簡単にPDFの加工ができる「PDF Hammer」というWebサービスが役に立ちそうです。

PDFの結合、ページの並び替え、削除、パスワード設定がオンライン上で簡単に実現できます。Mac OS Xでは標準ソフトの「プレビュー」で同様のことが可能なので、Macユーザーにはこのサービスは不要かもしれません。

[ウェブサービスレビュー]PDFのページ並び替えや結合・削除がオンラインでできる!「PDF Hammer」:レビュー - CNET Japanという記事で紹介されていました。

図6 PDFをオンライン上で簡単に編集
図6 PDFをオンライン上で簡単に編集

おすすめ記事

記事・ニュース一覧