週刊Webテク通信

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

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

ネットで見かけた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 他サイトに埋め込みができる画像編集ツール

今週の気になるWebネタ

マルチタスクに対応! iOS 4.2でiPadはどう変わる? - デジタル - 日経トレンディネットhttp://trendy.nikkeibp.co.jp/article/pickup/20101122/1033698/

iPadのOSが「iOS 4.2」にアップデートし,iPhoneに追いついてマルチタスクやフォルダ管理に対応したほか,AirPlay/AirPrintといった新機能も搭載されました。

AirPlayを使うと,iPadの中の写真や動画を無線LANとApple TV経由でテレビ画面に映すことができます。Apple TVは安いものなのですが,我が家のテレビにはHDMI端子が付いてないので導入に至らず,ブログでの人のレポートを指をくわえて見ています…。

個人的に今回のアップデートで注目したのが,日本語の五十音順ソフトウェアキーボードの搭載と,なぜか対応していなかった韓国語をサポートしたことです(iPhoneでは最初から韓国語を使えていた)⁠

iPadの日本語ソフトウェアキーボードはアルファベット入力だけだったので,老人や子供には使いにくいだろうと思っていました。五十音順キーボードのほかにも,いろいろな日本語入力方法が選べるようになるといいですね。無印良品のメモアプリ「MUJI NOTEBOOK」では実現している手書き入力も,標準でサポートして欲しい機能のひとつです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入