週刊Webテク通信

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

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

ネットで見かけた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のジェネレーター

今週の気になるWebネタ

iPhone版「LINE」,電話番号かFacebook認証が必須に - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1212/03/news038.html

iOS版のLINEアプリがアップデートし,電話番号かFacebookアカウントによる認証が必須になりました。これまでも電話番号での認証は必要だったはずだと思ったのですが,⁠いまは登録しない」を選んで認証なしで使い始めることができたそうです。

認証が必須になり,iPod touchユーザーからの「使えなくなった」という不満の声が続出しているようです。iPod touchでLINEを使ってる人は意外と多いんですね。なお,別の携帯電話で認証番号を受け取れば,iPod touchやiPadでも使用できるとのこと。Facebookアカウントによる認証でもOKなんですが,若者はあまりFacebookを使ってないようですね。

ところで,iPod touchはマイクが本体の上部についているので,iPhoneのように電話スタイルで通話することはできないそうです。考えてみれば用途が違う端末なので当然なのですが,LINEなどの通話機能でiPod touchを携帯電話としても使おうと思っている人は要注意です。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入