週刊Webテク通信

2012年3月第2週号 1位は,これからの未来を見据えたWeb制作について,気になるネタは,アドビの新ツール「Shadow」は,モバイル用Webアプリ開発者必須のツール

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

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

1. For a Future-Friendly Web | Brad Frost Webhttp://bradfrostweb.com/blog/web/for-a-future-friendly-web/

これからの未来を見据えたWeb制作についての,スライドとセミナー動画を公開しています。

以下のようなことが説明されています。

  • パソコンだけでなくスマートフォン,タブレットなどいろんな環境で見られることを前提とする
  • レスポンシブWebデザインは万能薬ではないが,正しい方向に向かう重要なステップ
  • モバイルファーストとレスポンシブWebデザインを組み合わせるのはいい考え
  • プログレッシブエンハンスメントはFuture-Friendlyデザインにおいて必要不可欠
  • 多様なユーザーに向けてデザインする

それほど目新しいことが述べられているわけではありませんが,これからのWeb制作に必要な考え方が,うまくまとめられていると感じました。

図1 Future-FriendlyなWeb制作について

図1 Future-FriendlyなWeb制作について

2. Principles for Successful Button Design | Webdesigntuts+http://webdesign.tutsplus.com/articles/design-theory/principles-for-successful-button-design/

ボタンデザインにおける原則やルールについて解説しています。

  1. ブランドとマッチさせる
  2. サイトのスタイルとマッチさせる
  3. ボタンに他との十分なコントラストをつける
  4. ボタンを角丸にするかどうかは,よく考える
  5. 優先順位の低いUI要素を,それほど強調しない
  6. 枠線の色をマッチさせる
  7. ぼけた影をつけるときは注意する
  8. ちょっとしたアイコン要素で意味を与える
  9. 優先順位によってのスタイルの区別の付け方をよく考える
  10. 状態によってのフィードバックを常に反映させる

図1 ボタンデザインにおける原則やルール

図1 ボタンデザインにおける原則やルール

3. 6 Best HTML5/CSS3 Presentation Frameworks | ZoomZumhttp://zoomzum.com/6-best-html5css3-presentation-frameworks/

プレゼンテーションなどに使えるスライドを,HTML5/CSS3で作成するためのフレームワークを6種類紹介しています。

「html5 Slides」はGoogleが提供するフレームワークで,結構有名なものです。

「Impress.js」は,拡大/縮小や回転を使った,動きにインパクトのあるスライドを作れます。スライドのページが切り替わるときに立体的な動きをする「Reveal.js」も面白いですね。

図3 スライド作成のためのHTML5/CSS3フレームワーク

図3 スライド作成のためのHTML5/CSS3フレームワーク

4. 15+ Top CSS3 Generator Softwareshttp://www.ispsd.com/03/15-top-css3-generator-softwares/

CSS3のジェネレーターを各種紹介しています。

CSS3の新機能を網羅したものもあれば,グラデーション/シャドウ/角丸など特定の効果に特化したものもあります。

図4 CSS3のジェネレーターいろいろ

図4 CSS3のジェネレーターいろいろ

5. Less is More: 32 Clean & Minimal Websiteshttp://designm.ag/design/less-is-more-32-clean-minimal-websites/

クリーンでミニマルなWebサイトのギャラリーです。

アイコンやイラストを中心に構成したものや,大きな写真を効果的に使ったものなど,シンプルながら印象に残るサイトが豊富に紹介されています。

図5 クリーンでミニマルなWebサイトのギャラリー

図5 クリーンでミニマルなWebサイトのギャラリー

そのほか,先週の記事の中から,気になるニュース記事を紹介します。

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

URL指定可能なレスポンシブWebデザイン対応確認ツール・responsive.isと似たようなやつ何個か | かちびと.nethttp://kachibito.net/web-service/responsive-is.html

今回は,レスポンシブWebデザインの表示確認用Webサービスを紹介している記事を取り上げます。

この記事のメインの話題としては,表示確認のURLを生成できるサービスを2つ取り上げています。ほかにも,以前取り上げたツールとして5個のリンクが紹介されているので,あわせて7つのサービスが紹介されていることになりますね。

「Responsinator」は,複数デバイスの表示チェック結果が,まとめて1ページで見られるのが便利そうです。各デバイスを模したそれぞれの画面の中は,ちゃんとスクロールして表示を確認できます。

図6 レスポンシブWebデザインの表示確認用サービスの紹介

図6 レスポンシブWebデザインの表示確認用サービスの紹介

今週の気になるWebネタ

アドビの新ツール「Shadow」は,モバイル用Webアプリ開発者必須のツール - Publickeyhttp://www.publickey1.jp/blog/12/shadowweb.html

アドビシステムズのAdobe Labsで「Adobe Shadow」というツールが公開されました。iOS/Androidデバイスでの動作/表示チェックを手助けするものです。

同じネットワーク上のパソコンとiOS/Android端末とを接続することができ,パソコンのブラウザで表示しているページを各デバイスにも表示することができます。各端末にパソコン側から自動的にURLが送られ,それぞれの端末でURLを入力したりリンクをクリックする手間が省けるわけです。

また,Chrome上でデベロッパーツールのようなウィンドウを開き,ページのソースを変更して各デバイスに反映させることも可能です。

エミュレーターも便利ですが,やはり実機でのテストが必要なケースも多いわけで,これは目の付け所が良いツールだと思いました。

iOS/Androidには無料の専用アプリが提供されています。パソコン側はMac/Windows用のShadowアプリケーションと,Chromeの拡張機能が必要です。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入