週刊Webテク通信

2012年11月第1週号1位は、Webデザインのトレンドまとめ、気になるネタは、iPad miniの実機に触れた人からは好評の声ばかり

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

1. Web design trends we love ? Weavora | Our Bloghttp://weavora.com/blog/2012/10/21/web-design-trends-we-love/

Webデザインのトレンドについてまとめた記事です。

以下の項目に分けて、実例サイトへのリンクとともに解説しています。

  • 1ページ完結のWebサイト
  • 背景全面に写真を使用
  • ブロックを並べたレイアウト
  • 特大の画像の使用
  • シンプル
  • レスポンシブWebデザイン
  • 視差スクロール
  • タイポグラフィ
図1 Webデザインのトレンド
図1 Webデザインのトレンド

2. Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeletonhttp://responsive.vermilion.com/compare.php

レスポンシブなCSSフレームワークの比較表です。Twitter Bootstrap、Foundation v2/v3、Skeletonの4種類を、かなり詳細に比較しています。

  • 制作者、ライセンスやブラウザサポートなどの概要
  • CSSリセットの種類とLESS、SACC/SCSSの対応状況
  • グリッドのサイズやカラム数、コードの記述方法
  • 用意されているUIコンポーネントやJavaScriptウィジェット

の4つのカテゴリーに分けて、比較表が掲載されています。

図2 CSSフレームワークの比較表
図2 CSSフレームワークの比較表

3. 40 CSS3 Button Tutorials For Designershttp://www.hongkiat.com/blog/css3-button-tutorials/

CSS3を使ったボタンのチュートリアルが多数紹介されています。

立体感もグラデーションも控え目でシンプルなものが主流ですが、中にはシンプルながらも立体感のかなりある表現もあって面白いですね。

図3 CSS3ボタンのチュートリアル40個
図3 CSS3ボタンのチュートリアル40個

4. deCSS3 - a bookmarklet for graceful degradation.http://davatron5000.github.com/deCSS3/

CSS3の新機能だけを無効にする、ブックマークレットを配布しています。

角丸やシャドウなどCSS3からの新しい機能をオフにすることで、CSS3非対応のブラウザでの見え方をシミュレーションすることが可能となります。

図4 CSS3の新機能を無効にするブックマークレット
図4 CSS3の新機能を無効にするブックマークレット

5. 30 Responsive Portfolios For Your Inspirationhttp://www.hongkiat.com/blog/responsive-portfolios-for-inspiration/

レスポンシブWebデザインで作られた、ポートフォリオサイトのギャラリーです。

PCでのブラウザ画面とiPhoneの画面とを並べた、サムネイルの見せ方もいいですね。

図5 レスポンシブなポートフォリオサイトのギャラリー
図5 レスポンシブなポートフォリオサイトのギャラリー

そのほか、最近の記事の中から、iPad miniに関する記事を紹介します。

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

Chrome リモート デスクトップhttps://chrome.google.com/webstore/detail/chrome-remote-desktop/gbchcmhmhahfdphkhkmpfmihenigjmpp

Chrome上で動くChromeアプリケーションの「Chrome リモートデスクトップ」は、ほかのパソコンの画面共有と遠隔操作を行うものです。

両方のマシンのChromeにこのアプリをインストールすれば、片方のChrome上でもう片方のパソコンを共有して操作することができます。もちろんChromeだけでなく、パソコン上の操作全般をリモートで操るためのものです。

誰かのパソコンに一時的につなぎ遠隔サポートすることを想定した「リモートサポート」と、自分の所有する複数のパソコン間で遠隔操作をするための「マイパソコン」の2つの機能が用意されています。マイパソコンでは、同じGoogle IDでログインした各パソコンが自動で表示されるので、そこから共有するマシンを選ぶだけです。もちろん各パソコンでChrome リモートデスクトップでの共有をONにしておく必要があります。

なお、このアプリはすでにベータ版として公開されていたもので、今回正式版としてリリースされました。ベータ版から追加された機能は、オーディオのリモート再生(Windowsのみ)とクリップボードの共有(共有したマシンとの間でコピー&ペーストができる)です。

図6 Chrome上で動くリモートデスクトップアプリ
図6 Chrome上で動くリモートデスクトップアプリ

おすすめ記事

記事・ニュース一覧