週刊Webテク通信

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

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

ネットで見かけた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上で動くリモートデスクトップアプリ

今週の気になるWebネタ

iPad miniの実機に触れた人からは好評の声ばかり

iPad miniが発売されました。ネット上では賛否両論のようで,⁠Retinaじゃない」⁠値段が高い」⁠iPad2と同じスペックというのがどうも」といった声が,代表的な否定的な意見のようです。

とはいえ,実物を触ったり入手した人には,やけに好評なのが興味深いところです。7インチ程度のサイズということでライバル視されるNexus 7と比べても,やはりモノとしての質感や感触が圧倒的に優れているようです。

ジャーナリスト本田雅一さんが,発表当時に実機に触れて大絶賛していた勝負あった!?”,iPad miniが与えるインパクトという記事は話題になりましたが,今度はジャーナリスト林信行さんが手のひらタブレットの王,⁠iPad mini」の魅力を徹底検証という記事を発表しました。

その記事では,日本テレビ系の朝の情報番組「ZIP!」でiPad miniを取り上げたときのスタッフたちが,iPad miniの実機に触れた瞬間に表情が変わり興奮し始めた様子が紹介されています。

有名ブロガー小飼弾さんも,実際に入手してみて「所詮小さなiPad 2じゃないか」という考えを改めたらしく,褒めまくっています。どうやらiPad miniは,実際に触れてみるとそのとりこになってしまう魔力がありそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入