週刊Webテク通信

2010年11月第4週号1位は、FireworksのTips紹介サイト「Fireworksマニア」、気になるネタは、マルチタスクに対応! iOS 4.2でiPadはどう変わる

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

1. Fireworksマニア | FireworksでのWebデザインのTipsや便利な使い方をご紹介します♪http://fw.v-colors.com/

FireworksのTipsをブログ形式で紹介する日本語サイトの登場です。

女性好みのラブリーなデザインのサイトで、パーツ類はすべてFireworksのみで作られているとのこと。まずはこのサイトで使われている、かわいいパーツの作り方がいくつか紹介されています。

わたしも⁠Fireworks派⁠なのですが、このサイトの作者のようにマニアというほど使いこなせていないなと実感しました。今後に期待したいサイトです。

図1 FireworksのTips紹介サイト
図1 FireworksのTips紹介サイト

2. Tips and Trends on Creating Depth in Web Designhttp://slodive.com/web-development/tips-and-trends-on-creating-depth-in-web-design/

奥行きのあるWebデザインのTipsとトレンドを紹介しています。

デザインに立体感を与える要素として、以下の項目に分けてサンプルとともに紹介しています。

  • Perspective(遠近法)
  • Plan View(平面図 - 真上から見た図)
  • Shadows(影)
  • Wraps(くるむ、折りたたむ)
  • Illustration(イラスト)
図2 奥行きのあるWebデザインのTipsとトレンド
図2 奥行きのあるWebデザインのTipsとトレンド

3. 5 Hot Design Trends for Aspiring Bloggershttp://mashable.com/2010/10/04/blog-design/

意欲的なブロガーのためのホットなデザイントレンドの紹介です。

  1. より複雑なレイアウト
  2. Webフォントを多数使用
  3. 大量のホワイトスペース
  4. よりソーシャルメディアへ注力
  5. ウィジェットを利用する

といった内容が解説されています。

これらを見ると、デザイン的には、より凝ったものとシンプルなものとの二極化が進み、機能的にはソーシャルメディアをうまく利用することが重要になってくると思われます。

図3 ブロガーのためのホットなデザイントレンド
図3 ブロガーのためのホットなデザイントレンド

4. Slide-Down Mega Drop-Down Menus with Ajax and jQueryhttp://www.impressivewebs.com/mega-menus-ajax-jquery/

AjaxとjQueryでメガドロップダウンメニューを実現するコードを公開しています。

ドロップダウンしたエリアが大きく選択肢が大量にあるメガメニューは、個人的には使い勝手が悪いんじゃないかと思うのですが、ここで紹介されているものはよさそうです。

わたしがいいなと思ったポイントを以下に挙げます。

  1. クリックでサブメニューが出てくる
  2. サブメニューはcloseボタンを押すまで表示され続ける
  3. サブメニューが表示されても他のコンテンツを隠さない

ロールオーバーでサブメニューが表示され、エリアからカーソルが外れると消えてしまうメニューは、マウス操作に慣れていない人には操作が難しいと思われます。なので、クリックでサブメニューが出てくる方が操作しやすいはずです。タッチスクリーンのデバイスでも操作できるという利点もあります。

Overlay Effect Menu with jQuery | Codropsで紹介されているようなメガメニューも格好良くて、こういうのが求められるケースも多いのでしょう。

図4 AjaxとjQueryによるメガドロップダウンメニュー
図4 AjaxとjQueryによるメガドロップダウンメニュー

5. 20 Outstanding Tools to Maximize Your Time | Design Shackhttp://designshack.co.uk/articles/business-articles/20-outstanding-tools-to-maximize-your-time

オンラインのGTDツールやWeb制作に役立つジェネレーターなど、時間管理や時間短縮のためのツールを多数紹介しています。

作業時間を記録して統計などを出せる時間管理ツールがアメリカではいろいろあるのですが、日本ではこの手のツールってあまり見ないですね。

図5 時間短縮につながるツールいろいろ
図5 時間短縮につながるツールいろいろ

そのほか先週の記事から、気になるニュース記事を紹介します。

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

Aviary's HTML5 Photo Editorhttp://www.aviary.com/html5

Aviary's HTML5 Photo Editorは、HTML5で作られたオンライン画像編集ツールです。誰でも自分のページに埋め込むことができる、画像編集ツールというアプローチになっています。

明るさ/リサイズ/回転などの機能の中から、必要なものをセレクトした画像編集ツールを、自分のページに埋め込むことが可能です。

サイトのURLとメールアドレスを入れてAPIキーを取得するのですが、それ以外にユーザー登録などは不要のようです。

CMSやブログシステムと組み合わせて、アップする画像に簡単な編集を加えるという利用方法の需要が多そうです。

Aviaryのブログでの紹介記事Aviary - Creation on the fly / blog / Aviary Launches HTML5 Photo Editor!の下の方に、パートナー企業による実際の使用例の画面ダンプが掲載されていました。

AviaryはFlashベースのオンライン画像編集ツールなどで有名なのですが、同じものをHTML5化するのでなく、違ったアプローチのツールに仕上げたことが面白いですね。

HTML5化したことにより、スマートフォンへの対応にも取り組んでいくようです。

図6 他サイトに埋め込みができる画像編集ツール
図6 他サイトに埋め込みができる画像編集ツール

おすすめ記事

記事・ニュース一覧