週刊Webテク通信

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

ネットで見かけた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サービス

おすすめ記事

記事・ニュース一覧