週刊Webテク通信

2012年3月第3週号 1位は，はやりすぎて蔓延しているWebデザインのトレンド，気になるネタは，iPad求め450人が並ぶ，アップル銀座はiPadフィーバー

Webテク, Webデザイン, Web広告, CSS, Pinterest, Facebook, iPad

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

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

1. Symptoms Of An Epidemic: Web Design Trends | Smashing UX Designhttp://uxdesign.smashingmagazine.com/2012/03/15/symptoms-of-epidemic-web-design-trends/

はやりすぎて蔓延しているWebデザインのトレンドについて，流行病に例えて解説しています。

トレンドとして挙げられているのは，以下のものです。

  • ステッチ（縫い目）
  • ジグザグボーダー
  • 曲がったリボン
  • テクスチャー
  • 型押し
  • 19世紀風のイラスト
  • 弱い色調
  • 両端揃え／中央揃えのタイポグラフィ
  • 筆記体と円形を組み合わせたロゴタイプ
  • ほかの物を模したデザイン

こういったトレンドの影響を全く受けずにデザインするのは難しいですが，流行に流されることを避けるためにどうすべきかは，以下の項目で解説されています。

  • なぜかを常に自問する
  • 努力を重ねる
  • 何か別のことを試す
  • いろいろなところからインスピレーションを得る
  • 基本を学ぶ

図1　Webデザインの流行病の兆候について

図1　Webデザインの流行病の兆候について

2. Use Pseudo Elements to Create an Image Stack Illusion | Design Shackhttp://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/

写真が数枚重なっているような効果を，CSSの疑似要素を使って実現するチュートリアルです。

「:before」「⁠:after」擬似要素を使って2つの図形を追加して重ねることで，3枚の写真が重なっているような描画を実装しています。位置や角度を変更することで，見せ方を変化させることができますね。

図2　写真が数枚重なってるような効果をCSSで実現

図2　写真が数枚重なってるような効果をCSSで実現

3. 7 new techniques every web developer should know | CatsWhoCode.comhttp://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

Web制作者が知っておくべき新テクニックを7つまとめています。

  1. CSS3のメディアクエリー
  2. rem（root em）によるフォントのサイズ設定
  3. HTML5でのページのキャッシュ
  4. サーバーサイドJavaScript
  5. HTML5によるドラッグ＆ドロップ
  6. HTML5によるフォーム
  7. CSSアニメーション

図3　Web制作者が知っておくべき新テクニック

図3　Web制作者が知っておくべき新テクニック

4. Web Throwback: Showcase of Vintage and Retro Web Designhttp://www.noupe.com/design/web-throwback-showcase-of-vintage-and-retro-web-design.html

ビンテージ＆レトロなWebデザインのショーケースです。

図4　ビンテージ＆レトロなWebデザインのショーケース

図4　ビンテージ＆レトロなWebデザインのショーケース

5. 20 Awesome Pinterest Toolshttp://thenextweb.com/socialmedia/2012/03/04/20-awesome-tools-which-will-have-you-pinteresting-like-a-pro/

Pinterestを活用するためのツール各種が掲載されています。

Pinterestの「Pin it」ボタンや「Follow Me」ボタンを追加するもの，モバイルアプリ，ブラウザの拡張機能などが紹介されていました。

図5　Pinterestのためのツールいろいろ

図5　Pinterestのためのツールいろいろ

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

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

Friendsheethttp://www.friendsheet.com/

Friendsheetは，Facebookの自分の友達や購読しているFacebookページの写真を一覧表示で見られるWebサービスです。

Facebookアカウントで認証するだけですぐに使えるようになります。最近はやりのPinterest風のインターフェイスですね。写真だけを一覧できることと，Facebook上でのフィードと違いフィルタリングがかかっていないので，新たな発見があることが多いのではないでしょうか。

Friendsheet上で「いいね！」やコメント，シェアが行えますし，写真の投稿も行えます。

自分のアルバムだけを見たり，ユーザー名で検索してその人のアルバムを見たりと，なかなか機能も充実しています。

図6　Facebookを写真中心で見るサービス

図6　Facebookを写真中心で見るサービス

今週の気になるWebネタ

iPad求め450人が並ぶ，アップル銀座はiPadフィーバー - ケータイ Watchhttp://k-tai.impress.co.jp/docs/news/20120316_519320.html

3月16日に新iPadが発売になりました。iPadの発売日には，アップルストア銀座の行列がテレビ中継されるのも恒例となりました。

あの行列を見て，発売日に手に入れるには行列に並ばなくてはいけないと思っている人も多いようですが，オンラインのアップルストアで予約していれば家にいながらにして手に入るんですよね。Facebookを見ていると，発売日に手に入れた「友達」がけっこういました。

テレビでのiPadやiPhoneに関する報道はピントがずれてることも多いのですが，今回はRetinaディスプレイによる画面の高精細化がメインなので，あまり違和感のある紹介のされ方はなかったように思います。

あと，発売日のアップルストアはスタッフの数が多すぎですよね。祭りを演出するためなんでしょうが，テレビを見ながら突っ込んでる人が多そうです。

Webテク, Webデザイン, Web広告, CSS, Pinterest, Facebook, iPad

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote