週刊Webテク通信

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

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

ネットで見かけた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などの,はめ込み画像が簡単に作成できます

今週の気になるWebネタ

iPhone「おやすみモード」がバグで元旦から「寝正月モード」に | ICT Headline directed by P検http://ict.pken.com/2013/01/iphone_neshogatsu/

iOS 6の「おやすみモード」が解除されない不具合が,元旦から発生したようです。指定した時間にもアラームが鳴らなくなったということで「寝正月モード」などと言われて話題になりました。

Apple Storeの福袋「Lucky Bag」を始発で買いに行こうとした人には,アンラッキーなバグだったかもしれませんね。今年のLucky Bagは列の先頭に近い人に当たりが連発していたようで,来年はさらに徹夜組が増えそうです。

この「寝正月モード」のニュースで「おやすみモード」を知ったという人も多いのかもしれません。夜中に通知で音を鳴らしたくないという人には便利なこのモードに気づけてもらえて,アップルにとってはラッキーなバグとも言えるのかも。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入