週刊Webテク通信

2009年8月第4週号 1位は,ウェブデザインのユーザーインターフェースに使えるサイトまとめ/気になるネタは,Googleマップの世界の地名を日本語で

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

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

1. ウェブデザインのユーザーインターフェースに使えるサイトまとめ | DesignWalkerhttp://www.designwalker.com/2009/08/user-interface.html

ユーザーインターフェースパターンに関するギャラリーサイトなどのリンク集です。

ユーザーは今まで使ったことのあるインターフェースの方が使いやすいので,既にポピュラーとなっているパターンをベースに,ユーザーインターフェースを設計した方がいいとされています。その際に,こういったパターン集は力強い味方となることでしょう。

ユーザーインターフェースパターンの通称を知っておくと,検索するときに便利です。

「あー,あの写真がスライドして入れ替わっていくヤツを作りたいんだけど」という場合,「carousel jQuery」「carousel javascript」で検索すれば色々出てきます。しかし,「carousel(カルーセル)」という言葉を知らないと調べるのは大変ですよね。

「カルーセル」だけで検索すると,上位はカルーセル麻紀のことが出てきて「カルーセル」というのは勤めていた店名から取ったという豆知識を仕入れてしまいました。必要な情報にたどり着くためには,複数の検索ワードを組み合わせるなどの「検索力」も重要だといえるでしょう。

図1 ユーザーインターフェースを集めたサイト集

図1 ユーザーインターフェースを集めたサイト集

2. 16 Great Photoshop Light Effect Tutorials | Design Shardhttp://www.designshard.com/video-tutorials/16-great-photoshop-light-effect-tutorials/

光の効果をうまく使ったPhotoshopテクニックのチュートリアル集です。

海外のサイトで背景画像に使われていそうな,最近のトレンドに乗った画像が作れそうですね。

Photoshop関連では,Photoshopの動作を軽快にするための10のポイント | コリスという記事も役に立つことでしょう。

図2 光の効果のPhotoshopチュートリアル集

図2 光の効果のPhotoshopチュートリアル集

3. 13 Super Useful jQuery Content Slider Scripts and Tutorials | Web Design Ledgerhttp://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

決まったサイズのエリア内でコンテンツをスライドさせるユーザーインターフェースは,最近すっかりおなじみになった感があります。そういったスライダー,カルーセルとよばれる見せ方を,jQueryで作るためのスクリプトやチュートリアルのリンク集です。

図3 jQueryでコンテンツをスライドさせるスクリプトとチュートリアル集

図3 jQueryでコンテンツをスライドさせるスクリプトとチュートリアル集

4. Google Maps Mania: Design Portfolios on Google Mapshttp://googlemapsmania.blogspot.com/2009/08/design-portfolios-on-google-maps.html

GoogleマップのAPIを使って,Googleマップと同じようにスクロールや拡大して見ることのできるポートフォリオサイトの紹介です。

Image CutterAutomatic Tile Cutterというツールを使うと,Googleマップと同じ仕組みのカスタム地図を作ることができるそうです。

ふたつ目に紹介されているBlaubo Designは日本のサイトですね。フキダシで解説が出てきて,しっかりポートフォリオとして完結しています。

図4 GoogleマップAPIを利用したポートフォリオのショーケース

図4 GoogleマップAPIを利用したポートフォリオのショーケース

5. Website Background Images : Examples and Implementation | [Re]Encoded.comhttp://www.reencoded.com/2009/08/23/website-background-images-examples-and-implementation/

印象的な背景画像のショーケースです。背景だけの画像と実際のWebページを並べて見られるようになっています。大きな写真を背景画像として使うことが海外では流行っているようですね。

Twitterの自分のページも背景画像を変えると印象が変わります。Twitterの背景画像をカスタマイズするための情報源がResource Kit To Create, Customize & Find Twitter Backgrounds | W3Avenueという記事にまとめてありました。

図5 Webサイトで使われている背景画像のギャラリー

図5 Webサイトで使われている背景画像のギャラリー

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

そのほか先週の記事から,知っておくと役に立ちそうな記事を3つ紹介します。

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

NAVERフォトエディターhttp://photoeditor.naver.jp/

検索サービス「NAVER」を提供しているネイバージャパンから,画像編集のWebアプリケーション「NAVERフォトエディター」が登場しました。

オンラインの無料画像編集ツールはいろいろありますが,ユーザー登録などが一切不要で,メニュー類がすべて日本語なところがNAVERフォトエディターの特長といえるでしょう。

落ち着いた色合いで洗練された印象のユーザーインターフェースに好感が持てます。

ブログに載せる写真をちょっといじりたいという人にはオススメできそうですね。ブログ用と考えると,プリクラ感覚で使えるスタンプツールがあるといいと思いました。

Flickr画像の直接読み込みにも対応する予定なので,今後のアップグレードに期待しましょう。AIRアプリ化しても便利そうですね。

図6 Flashベースの画像編集サービス「NAVERフォトエディター」

図6 Flashベースの画像編集サービス「NAVERフォトエディター」

今週の気になるWebネタ

Google Japan Blog: 世界の地名を日本語でhttp://googlejapan.blogspot.com/2009/08/blog-post_28.html

Googleマップの世界の地名を日本語で見ることができるようになりました。これで世界地図を見るのがますます楽しくなりそうです。子供やお年寄りにも親しみやすくなりますね。

たとえば「パリ」と検索すると,パリの地図が日本語併記で出てくるようになったそうです。日本語で検索できるようになったことも便利ですね。「凱旋門」とか「セーフコ・フィールド」など,地名じゃなくても大丈夫なようです。

今回,英語圏,フランス語圏,ドイツ語圏,イタリア語圏,スペイン語圏,オランダ語圏の地域がカタカナ化されたそうです。60カ国の詳細地図で80%以上のカバー率を実現したそうですが,日本から旅行に行く人の多い韓国,中国に対応しなかったのは,ちょっと残念に思います。

いろんな国の言葉で日本の地図が見られるようになっても面白そうですね。Googleだからこそできる大規模なプロジェクトだと思いますが,今後も地域の拡大などに期待したいと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入