週刊Webテク通信

2013年7月第1週号1位は、2013年のWebデザインのトレンドのインフォグラフィックス、気になるネタは、Google Readerが終了

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

1. 2013 Web Design Trends Infographic | Enfuzedhttp://enfuzed.com/2013-web-design-trends-infographic/

2013年のWebデザインのトレンドを、インフォグラフィックスとしてまとめています。

取り上げられている項目は以下の通りです。

  • レスポンシブ
  • メトロ
  • ミニマリズム
  • タイポグラフィ
  • パララックス(視差)
  • 無限スクロール
  • 固定ヘッダ
  • シングルページ
  • 大きな背景画像
  • コンテンツファースト
図1 2013年のWebデザインのトレンドのインフォグラフィックス
図1 2013年のWebデザインのトレンドのインフォグラフィックス

2. Website Designs based on Solid Single Colored Background - Designmodohttp://designmodo.com/websites-single-color-background/

はっきりした単色の背景をベースとした、Webデザインの事例を多数紹介しています。

以下のような効果があるとのことです。

  • テキストが認識しやすい
  • 前面の要素の補足をする
  • 清潔さと精密さを追加する
  • バランスを取る
  • ミニマルなスタイルにする
  • 複数のエリアを区別する
図2 はっきりした単色の背景を使ったWebデザインのギャラリー
図2 はっきりした単色の背景を使ったWebデザインのギャラリー

3. Nifty Modal Window Effects | Codropshttp://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

いろいろな効果を使って開く、モーダルウィンドウを作成するチュートリアル記事です。

フラットデザインでシンプルながら、ちょっと面白みのあるモーダルウィンドウが作れます。

図3 効果付きで出現するモーダルウィンドウいろいろ
図3 効果付きで出現するモーダルウィンドウいろいろ

4. Terms of Service; Didn't Readhttp://tosdr.org/

各種Webサービスの規約から、ポイントになりそうな部分を抜き出して紹介しているサービスです。良い箇所、悪い箇所をピックアップして、その数からA~Eまでランク付けしています。

取り上げられているのは、Google、YouTube、Facebook、Twitterなどの規約です。

図4 各種Webサービスの規約を紹介
図4 各種Webサービスの規約を紹介

5. 適切に改行を行う - Weblog - hail2u.nethttp://hail2u.net/blog/webdesign/responsive-line-breaks.html

レスポンシブWebデザインの場合に、幅のサイズによって改行を入れたり無くしたりするCSSの例を紹介しています。

見出しをセンタリングにしている場合など、サイズによって改行をコントロールしたいというケースは確かにありますね。

図5 レスポンシブデザインのときに改行をコントロールする方法
図5 レスポンシブデザインのときに改行をコントロールする方法

そのほか、最近の記事の中から、いろいろと気になる記事を紹介します。

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

Creonomy Board: your visual inspiration folder - Welcomehttp://board.creonomy.com/

Boardは、Pinterestのような感じに画像をストックできるサービスです。Pinterestと違ってソーシャルメディア的な要素はなく、非公開の状態で使うものです。ちなみに、Pinterestも今では非公開のボードを作ることができるようになっています。

ローカルの画像をアップする際には、フォルダをドラッグ&ドロップして複数画像をまとめて追加できます。ブラウザ拡張機能を使って、閲覧しているページ内の画像を追加したり、任意の箇所をキャプチャーして追加、Webページ全体をキャプチャーして追加することが可能です。

インスピレーションのための参考画像をまとめたり、ビジュアルブックマーク的に使うと便利そうなサービスです。複数人で同じボードを管理することもできるので、サイト制作時の参考イメージを共有するケースなどで使えそうですね。

図6 プライベート版Pinterestといった感じのサービス
図6 プライベート版Pinterestといった感じのサービス

おすすめ記事

記事・ニュース一覧