週刊Webテク通信

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

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

ネットで見かけた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 ファイルのフォーマット変換をクラウド上で行えるサービス

今週の気になるWebネタ

Google+のハングアウトがリニューアル―GmailやG+のチャットを統合したクロスプラットフォームのビデオチャットサービスが誕生 | TechCrunch Japanhttp://jp.techcrunch.com/2013/05/16/20130515google-hangouts-messaging-app/

Google+のハングアウトがリニューアルし,Googleが提供する統合メッセージングサービスとなりました。Android/iOS向けに「ハングアウト」というアプリが登場し,これらモバイル端末とパソコンとのクロスプラットフォームで利用することができます。

単独のアプリが出たことで,LINEやSkypeと競合する存在になったとも言えるでしょう。もちろん,Facebookメッセンジャーもライバルですね。そういえば国内の話題としては,mixiもメッセージングサービスに参入するという報道もありました(mixiは「参入決定」ではないと否定していましたが)⁠

ところで新生ハングアウトは,850以上の絵文字が用意されているというのがアピールポイントの一つとなっています。英語でも「emoji」として紹介されていましたが,この絵文字がとても日本人好みなポップでかわいいテイストです。

気になって調べてみると,日本のIC4DESIGNというデザイン事務所が制作していました。

日本の絵文字がemojiとして世界で使われるというのはうれしいことです。しかもこのIC4DESIGNは広島が拠点のようで,広島から世界へとemojiが広がっていくというのはスゴイことだと思いました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入