週刊Webテク通信

2012年12月第1週号1位は、視差スクロールをWebデザインに取り入れるメリット、気になるネタは、iPhone版「LINE」、電話番号かFacebook認証が必須に

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

1. 15 Reasons Why Parallax Scrolling In Web Design Is Awesome - The Usabilla Bloghttp://blog.usabilla.com/15-reasons-why-parallax-scrolling-in-web-design-is-awesome/

視差(パララックス)スクロールをWebデザインに取り入れるメリットを紹介しています。

スクロールによって動きが展開する視差スクロールを使うことで、以下のような効果が期待できるということです。

製品紹介
製品を3Dで見せたり、製品の良さをストーリーだてて紹介することができます
ストーリーを語る
宇宙旅行をしたり、漫画の世界を体験しているような気分を味わってもらえます
エンゲージメント
面白い見せ方や、変わった見せ方によって、訪問者に愛着心を持ってもらえます
アクションのきっかけ
スクロールという簡単な操作により、訪問者をコンテンツに誘導しやすくなります
デザイン
サイトを他と差別化し、特別な体験を与えるのに役立ちます
図1 視差スクロールを使うメリット
図1 視差スクロールを使うメリット

2. Professional Web Design Techniques for Minimalist Layouts - DesignM.aghttp://designm.ag/design/professional-web-design-techniques-for-minimalist-layouts/

ミニマルなレイアウトのWebデザインを作るテクニックを紹介した記事です。

以下の項目に分けて解説しています。

  • 取り除いても問題ない要素を減らす
  • 大きなブロックを並べたレイアウト
  • ホワイトスペース
  • ミニマルなレイアウトの実例集
図2 ミニマルなWebデザインのテクニック
図2 ミニマルなWebデザインのテクニック

3. The Novice Web Designers Guide to Colors | Web Design | instantShift - Web Design Magazinehttp://www.instantshift.com/2012/11/21/the-novice-web-designers-guide-to-colors/

Webデザイナー初心者のために、色の選び方を解説しています。

色それぞれが持つ意味合いや、色のコンビネーションとテーマカラー、色を選ぶためのツールなどが紹介されています。

図3 初心者のための色の選び方ガイド
図3 初心者のための色の選び方ガイド

4. How to Create Retina Graphics for your Web Designshttp://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Retinaディスプレイに対応した画像の作り方を紹介しています。

原寸サイズで作ったイメージを2倍にして利用するため、Illustratorを使うか、Photoshopのシェイプを使うかなど、ベクター形式で作成するのがポイントとのことです。

JavaScript、CSS、HTMLそれぞれのコーディング例も載っています。

図4 Retinaディスプレイに対応した画像の作り方
図4 Retinaディスプレイに対応した画像の作り方

5. Huge Collection of Cool Looking Yellow Colored Web Designs - Graphic Design Inspiration Bloghttp://www.graphicdesigninspiration.net/2012/11/20/huge-collection-of-cool-looking-yellow-colored-web-designs/

黄色を使ったWebデザインを大量に集めたギャラリーです。

このサイト自体もキーカラーに黄色を使っていますね。

図5 黄色を使ったWebデザインのギャラリー
図5 黄色を使ったWebデザインのギャラリー

そのほか、最近の記事の中から、気になるツールやガジェットの記事を紹介します。

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

HTML5 & CSS3 Tools and Tutorialshttp://webdirections.org/tools/

今回紹介するのは、HTML5とCSS3のジェネレーターです。チュートリアル記事へのリンク集とセットになっています。

HTML5のツールでは、video要素、audio要素の各種属性を簡単に設定することができます。

CSS3のツールでは、ボックスの角丸やシャドウ、テキストのプロパティ、グラデーションなどを設定できます。

シンプルながら設定できる項目が多く、便利に使えそうです。チェックボックスひとつでベンダープレフィックスの有無を設定できたり、サポートブラウザが表示されるのもうれしいですね。

図6 HTML5とCSS3のジェネレーター
図6 HTML5とCSS3のジェネレーター

おすすめ記事

記事・ニュース一覧