週刊Webテク通信

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

ネットで見かけた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を写真中心で見るサービス

おすすめ記事

記事・ニュース一覧