週刊Webテク通信

2013年12月第3週号1位は、2013年のWebデザインのトレンド10個、気になるネタは、「ドコモメール」iPhoneに対応 受信のリアルタイム通知も

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

1. Top 10 Web Design Trends of 2013 | Skillcrushhttp://skillcrush.com/2013/12/10/top-10-web-design-trends-2013/

2013年のWebデザインのトレンドを10個紹介しています。

  1. 大きなテキスト
  2. インライン編集
  3. フルスクリーンのWebアプリ
  4. 左エリアのナビゲーション
  5. とても長ーいセールスページ
  6. 友達からのメールようなメールマガジン
  7. 視差効果
  8. モーダルウィンドウでのメールマガジンへのサインアップ
  9. GIFがハイブローに
  10. ブログの投稿/Facebookの更新情報/ツイートに見せかけた広告

友達からのものと見せかけた広告など、嫌な感じのトレンドについても取り上げられています。

図1 2013年のWebデザインのトレンド10個
図1 2013年のWebデザインのトレンド10個

2. What’s new for designers, December 2013 | Webdesigner Depothttp://www.webdesignerdepot.com/2013/12/whats-new-for-designers-december-2013/

Webデザインに役立つアプリやツール、素材などの新作を紹介しています。

レスポンシブなフロントエンドフレームワークのFoundationでおなじみZurbから、レスポンシブなHTMLメール用フレームワークが登場していました。

ほかにもマークダウンエディタやSVGアイコンなど興味深いものが揃っています。

図2 Webデザインに役立つアプリやツール、素材など
図2 Webデザインに役立つアプリやツール、素材など

3. White: Why to Use in Web Design? - MotoCMShttp://www.motocms.com/blog/project-news/white-use-in-web-design/

Webデザインに白色を使う理由を8つ解説しています。

  1. 明るい背景に暗い文字が目に心地いい
  2. 白はHTML、CSSでのデフォルトの色でそれには理由がある
  3. イメージは白地で効果的に見える
  4. 自然で文化的な配慮をしなくていい
  5. Webサイトは白の濃淡使いでエレガントに見える
  6. 白の濃淡は他のどの色の濃淡より優れている
  7. 白は乱雑さを軽減させる
  8. 白背景だとサイトに個性を持たせるのが簡単
図3 Webデザインに白色を使う理由
図3 Webデザインに白色を使う理由

4. 30 Beautiful Examples Of Parallax Scrolling Websiteshttp://www.inspireyourway.com/parallax-scrolling-sites-collection/

視差スクロールを使ったWebサイトのギャラリーです。

日本の東急エージェンシーのサイトも紹介されていました。

図4 視差スクロールを使ったWebサイトのギャラリー
図4 視差スクロールを使ったWebサイトのギャラリー

5. Using Square Blocks in Web Design - Designmodohttp://designmodo.com/square-blocks-design/

四角いブロックで区切られたWebデザインについて、その目的やコンテンツの整理の仕方などについて解説した記事です。

実例として紹介されているサイトもデザイン性に優れたものばかりです。

図5 四角いブロックで区切られたWebデザインについて
図5 四角いブロックで区切られたWebデザインについて

そのほか、最近の記事の中から、気になるニュース記事を3つ紹介します。

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

Digital Magazines That Work On Every Device - Beaconhttp://beacon.by/

BeaconはWebマガジンを簡単に作ることができるWebサービスです。月20ドルでいくつでも作ることができ、作ったWebマガジンを販売する場合は別途手数料などがかかるようです。

完成したWebマガジンのインターフェイスは、ページめくりボタンで見ていくか、クリックすると表示されるメニューから特定のページに移動するくらいのシンプルなものです。レスポンシブになっています。

大きな写真を背景に、ちょっとした文章を読ませるタイプのものに向いているようで、デザイン的には最近流行りの感じを取り入れているように感じました。

途中まで有料で、続きを読みたい場合には有料という仕組みが用意されているので、有料のWebマガジンのスタンドとして流行ってくると面白い存在になるかもしれません。

図6 簡単にWebマガジンを作れるサービス
図6 簡単にWebマガジンを作れるサービス

おすすめ記事

記事・ニュース一覧