週刊Webテク通信

2013年5月第4週号1位は、Chromeデベロッパーツールの使い方入門、気になるネタは、Google+のハングアウトがリニューアル―GmailやG+のチャットを統合したクロスプラットフォームのビデオチャットサービスが誕生

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

1. Web Design: Getting Started With Chrome Developer Toolshttp://www.hongkiat.com/blog/chrome-developer-tools/

Chromeのデベロッパーツールの使い方入門です。Elementsタブ、Consoleタブ、User Agentの変更方法の3つの項目に分けて簡単に解説しています。

選択したエレメントの「:hover」などのステートを変更できることや、User AgentをIEやiPhoneなどに変更したり、スクリーン解像度も設定できることなど、知らないことがいろいろありました。

ちなみにSafariの場合は、環境設定で「開発メニュー」を表示するようにすれば、その開発メニューからUser Agentを簡単に変更できます。

図1 Chromeデベロッパーツールの使い方入門
図1 Chromeデベロッパーツールの使い方入門

2. 15 Best Parallax Scrolling Tutorialshttp://inspiretrends.com/parallax-scrolling-tutorials/

視差スクロールのチュートリアルを多数紹介した記事です。デモとチュートリアルへのリンクが用意されています。

視差スクロール効果が楽しめるコンテンツスライダーや、スクロールによって変化するギミックを盛り込んだ縦スクロールのサイトを作る手助けとなります。

図2 視差スクロールのチュートリアルを各種紹介
図2 視差スクロールのチュートリアルを各種紹介

3. 10 Responsive Jquery Navigation Menu Resourceshttp://www.net-kit.com/responsive-jquery-navigation-menus/

jQueyを利用した、レスポンシブなナビゲーションメニューを10個紹介しています。

スマートフォンサイズのときにはメニューが隠れ、三本線ボタンで展開されるというのがお決まりのパターンです。展開のされ方としては、タテに展開されるものと、スライドしてヨコから出現するものがありました。

図3 レスポンシブなナビゲーションメニューいろいろ
図3 レスポンシブなナビゲーションメニューいろいろ

4. 20 Best UX design and Wireframing Tools for Mobilehttp://smashinghub.com/20-best-ux-design-and-wireframing-tools-for-mobile.htm

モバイル向けのUXデザインやワイヤーフレームを作成するためのツールを多数紹介しています。ある程度の動きのあるモックアップを作れるツールが、最近の主流のようです。

図4 モバイル向けのワイヤーフレーム作成ツール20選
図4 モバイル向けのワイヤーフレーム作成ツール20選

5. 21 Beautiful Examples of Using White in Web Design | Inspirationhttp://webdesignledger.com/inspiration/21-beautiful-examples-of-using-white-in-web-design

白地やホワイトスペースをうまく使った、きれいなデザインのWebサイトのギャラリーです。

ホワイトスペースが十分でエレガントな感じに仕上がっているサイトは、見ていて気持ちがいいですね。

図5 白地やホワイトスペースをうまく使ったサイトのギャラリー
図5 白地やホワイトスペースをうまく使ったサイトのギャラリー

そのほか、最近の記事の中から、Google関連のニュースを紹介します。

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

CloudConvert - convert anything to anythinghttps://cloudconvert.org/

CloudConvertは、クラウド上でファイルのフォーマット変換を行えるサービスです。

123種類ものフォーマットに対応しており、クラウド上だけで処理を完了できます。モバイルにも対応しているようです。

対応しているクラウドストレージはDropboxとGoogle Driveです。クラウドを利用せずに、デスクトップ上のファイルをアップロードして、変換後のファイルはメールで受け取るといった使い方もできます。

ファイル変換時のオプションも充実しているようで、画像をリサイズしたり、動画の開始時間と終了時間を設定してトリミングすることなどが可能です。Amazon Kindle用のazw3フォーマットやepub、mobiなどの電子書籍フォーマットに対応しているのも気になるところです。

図6 ファイルのフォーマット変換をクラウド上で行えるサービス
図6 ファイルのフォーマット変換をクラウド上で行えるサービス

おすすめ記事

記事・ニュース一覧