週刊Webテク通信

2012年9月第1週号 1位は,レスポンシブなサイトを作るのに役立つエミュレーターの紹介,気になるネタは,空いているCD/DVDドライブをケースにする,折り畳みマウスのコンセプトデザイン

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

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

1. Developing Responsive Designs With Opera Mobile Emulator | Smashing Mobilehttp://mobile.smashingmagazine.com/2012/08/30/responsive-designs-opera-mobile-emulator/

レスポンシブなサイトを作るのに役立つ,Operaモバイルエミュレーターの使い方を解説しています。

Operaモバイルエミュレーターは,スマートフォンやタブレット端末をエミュレーションするデスクトップアプリケーションです。Windows,Linux,Mac OS X版があります。

デバイス名を選ぶとその機種の画面サイズでエミュレーターが開きます。画面サイズをカスタマイズして指定することも可能です。縦画面,横画面の切り替えも簡単です。Opera Mobileをパソコン上で動かすものなので,残念ながらiOSやAndroidの標準ブラウザでの表示テストにはなりません。

タッチ操作ができるようになっており,トラックパッドでスクロール,ピンチイン,ピンチアウトなどの操作ができます。ダブルタップの操作にも対応しています。

図1 レスポンシブなサイトを作るのに役立つエミュレーターの紹介

図1 レスポンシブなサイトを作るのに役立つエミュレーターの紹介

2. Tools And jQuery Plugins To Help You Design A Website For Mobilehttp://www.designresourcebox.com/tools-and-jquery-plugins-to-help-you-design-a-website-or-a-web-app-for-mobile/

モバイル向けサイトを作成するのに役立つツールやjQueryプラグインをまとめた記事です。

モバイルサイトやレスポンシブなサイトを作る際に役立つフレームワークやツール,スクリプトが紹介されています。

iWebInspectorというiPhone/iPadのSafariのシミュレーターも載っていました。Operaモバイルエミュレーターと同様なアプリケーションですね。ただし,XcodeとiOSのSDKが必要ということです。

図2 モバイルサイト作成に役立つツールやjQueryプラグイン

図2 モバイルサイト作成に役立つツールやjQueryプラグイン

3. 11 Web Designs with Innovative Navigation - NewEvolutionhttp://newevolutiondesigns.com/11-web-designs-with-innovative-navigation

革新的なナビゲーションのWebデザインをまとめて紹介しています。

シングルページ完結の,スクロールで見せていくサイトが相変わらず目立っていますね。

図3 ナビゲーションが革新的なWebデザインいろいろ

図3 ナビゲーションが革新的なWebデザインいろいろ

4. Fun Examples of Cardboard Texture in Website Design / Design Ticklehttp://www.designtickle.com/2012/08/examples-cardboard-web-design/

ダンボールのテクスチャーを使った,Webデザインに使えそうな素材のギャラリーです。

UIエレメントやアイコンなど,ダンボールのテクスチャーを活かしたデザインが数多く紹介されています。

図4 ダンボールのテクスチャーを使ったデザインのギャラリー

図4 ダンボールのテクスチャーを使ったデザインのギャラリー

5. 15+ Free and Premium jQuery Scrolling Plugins - DesignModohttp://designmodo.com/jquery-scrolling-plugins/

スクロールに関するjQueryプラグインを多数紹介しています。

スクロールできるエリアを作るもの,視差スクロールを実装するものなどが掲載されています。

今流行のスクロールで見せていくシングルページサイトを作るときに,役立ちそうなまとめ記事です。

図5 スクロールに関するjQueryプラグインいろいろ

図5 スクロールに関するjQueryプラグインいろいろ

そのほか,最近の記事の中から,気になるガジェット関連の記事を3つ紹介します。

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

BootTheme : Web Design Tool and Theme Generator for Twitter Bootstraphttp://www.boottheme.com/

BootstrapのデザインカスタマイズができるWebサービスです。

色やサイズなどの変更が,プレビューを見ながら行えます。ボタン一つでスマートフォンやタブレットのサイズにプレビューを切り替えられるようになっているのも便利です。

カラーピッカーやセレクトボックスのようなものはなく,変更個所は全てテキストで入力するようになっています。そのへんは,Bootstrap公式サイトにあるカスタマイズページから特に進歩のない操作感ですね。

このページ自体がBootstrap,LESS,jQuery,アイコンフォントで作られたレスポンシブなサイトになっていて,今どきのスピーディに開発されたWebアプリの実例として見ても面白いです。

図6 BootstrapのカスタマイズができるWebサービス

図6 BootstrapのカスタマイズができるWebサービス

今週の気になるWebネタ

空いているCD/DVDドライブをケースにする,折り畳みマウスのコンセプトデザインhttp://developer.cybozu.co.jp/akky/2012/08/cddvd-aa90.html

一見CD-ROMのようで,折り曲げるとマウスになるという,斬新なマウスのコンセプトデザインが話題になっていました。こういうビジュアル的にインパクトのあるものは,ソーシャルメディアで共有されやすいネタですね。

ポイントは,ノートパソコンの光学ドライブに入れて持ち運べるというところなんですが,MacBook Airやウルトラブックように光学ドライブのないモバイルマシンが今後主流になっていくことを考えると,少々乗り遅れた感も。そもそも,スロットインのドライブに入れると,はき出されてしまいますよね。

また,これを見て「仮面ライダー響鬼」に出てきたディスクアニマルを連想した人も多いんじゃないでしょうか。CDのようなディスクの状態から,変形して鳥やオオカミなど動物の形になるもので,なかなかカッコよかったです。このディスクアニマルの玩具は2005年度グッドデザイン賞を受賞しました。このマウスも製品化されれば,グッドデザイン賞を狙えそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入