週刊Webテク通信

2013年1月第1週号1位は⁠2013年に注目すべきWebデザインのトレンド⁠気になるネタは⁠iPhone「おやすみモード」バグで元旦から「寝正月モード」

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

1. Web Design: 20 Hottest Trends To Watch Out For in 2013http://www.hongkiat.com/blog/web-design-trend-2013/

2013年に注目すべきWebデザインのトレンドを紹介しています。

  1. レスポンシブなレイアウト
  2. Retinaディスプレイのサポート
  3. スクロールしても固定されているヘッダバー
  4. 大きなサイズの背景画像
  5. CSSを使った透過性
  6. ミニマルなランディングページ
  7. QRコード
  8. ソーシャルメディアバッジ
  9. 詳細なイラスト
  10. 無限スクロール
  11. 機能紹介のツアー
  12. スライドするパネル
  13. 開閉するモバイル用ナビゲーション
  14. 画面いっぱいのタイポグラフィ
  15. APIとオープンソース
  16. ボックスシャドウ
  17. CSS3アニメーション
  18. 垂直メニュー
  19. 単ページ完結のWebデザイン
  20. 円形のデザイン要素

目新しいものはあまりないのですが、一時の流行ではなく定着してきている項目が多いということでしょう。

図1 2013年に注目すべきWebデザインのトレンド
図1 2013年に注目すべきWebデザインのトレンド

2. 12 Sources Of Outstanding Mobile Design Inspiration - Ahref Magazinehttp://www.ahrefmagazine.com/resources/12-sources-of-outstanding-mobile-design-inspiration

モバイル向けデザインの参考となるサイトをまとめています。モバイルアプリのデザインギャラリーサイトが中心です。

デザインからアプリを探すのに便利なサイトもありますね。

図2 モバイル向けデザインの参考となるサイトいろいろ
図2 モバイル向けデザインの参考となるサイトいろいろ

3. 15 Examples of Creative Website Navigation - NewEvolutionhttp://newevolutiondesigns.com/15-examples-of-creative-website-navigation

独創的なナビゲーションの事例を紹介しています。

「Small Changes Can Make a Big Impact(小さな変化が大きな影響を与えることができる⁠⁠」というフレーズもいいですね。ちょっとした追加部分がナビゲーションシステムを際立たせてくれます。

図3 独創的なナビゲーションのまとめ
図3 独創的なナビゲーションのまとめ

4. 25 Best Parallax Websites, Jquery plugins and tutorials | AnimHuThttp://www.animhut.com/tuts/parallax/

視差スクロールを使ったサイトのギャラリーと、関連するチュートリアル記事、jQueryプラグインのリストをまとめた記事です。

他のまとめでは見かけたことのないサイトが多く取り上げられているようです。

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

5. Top 20 Inspiring Examples of Illustrated Elements in Web Designhttp://collegegfx.com/top-20-inspiring-examples-of-illustrated-elements-in-web-design/

イラストが使用されたWebデザインのギャラリーです。

Illustratorなどのベクトル系ツールで描かれたようなイラストが中心でした。

図5 イラストが使わされたWebデザインのギャラリー
図5 イラストが使わされたWebデザインのギャラリー

そのほか、最近の記事の中から、ニュース記事などを紹介します。

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

PlaceIt by Breezi - Generate Product Screenshots in Realistic Environmentshttp://placeit.breezi.com/

PlaceItは、スマートフォンやタブレット、パソコンの画面の中に好きな画像をはめ込んだ合成写真を作れるWebサービスです。

類似のサービスやアプリもありますが、クオリティの高い写真がベースになっているところと、パースのついた画面に合成できるところが特徴でしょう。

端末を操作している手も含まれた、ぼやけた背景のついた写真が中心で、アプリ公式サイトのメインビジュアルに使えそうなものばかりです。端末だけが真っ直ぐこちらを向いている写真もあります。

手持ちの画像をドラッグ&ドロップすることで、簡単に合成写真を作れます。URLを指定して、サイトのスクリーンショットをはめ込むことも可能です。

なお、PlaceItは、レスポンシブなWebデザインが簡単に作成できるWebサービス・Breeziが提供しています。

図6 iPhoneなどの、はめ込み画像が簡単に作成できます
図6 iPhoneなどの、はめ込み画像が簡単に作成できます

おすすめ記事

記事・ニュース一覧