週刊Webテク通信

2015年3月第2週号1位は、Webサイトに使われる写真のトレンド、気になるネタは、「Google+」、「Photos」「Streams」分割へ

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

1. 6 essential website photography trends for 2015 | Webdesigner Depothttp://www.webdesignerdepot.com/2015/03/6-essential-website-photography-trends-for-2015/

Webサイトに使われる写真のトレンドをまとめています。以下の6つの項目に分けて、豊富な実例とともに解説していました。

  1. とても大きな背景画像
  2. 背景画像をメインのコンテンツとして扱う
  3. モノクロの写真
  4. 色調を弱めた画像
  5. トーンや雰囲気のための写真
  6. グリッドに合わせたようにモノを並べた写真

6つ目に紹介されている、モノをきれいに並べて上から撮影した写真は、Knollingと呼ぶそうです。たしかに、KnollingでGoogle画像検索やPinterest上での検索をしてみると、その手の写真がたくさん見つかります。

図1 Webサイトに使われる写真のトレンド
図1 Webサイトに使われる写真のトレンド

2. Tips for Designing Vertical Website Navigation Menus | Tipshttp://webdesignledger.com/tips/design-vertical-website-navigation-menus

垂直ナビゲーションメニューをデザインするためのテクニックについて解説しています。

以下の4つの項目で紹介されていました。

  1. シングルページレイアウト
  2. シングルカラムメニュー
  3. 小さくシンプルなメニュー
  4. スライドして登場するナビゲーション
図2 垂直ナビゲーションメニューをデザインするためのテクニック
図2 垂直ナビゲーションメニューをデザインするためのテクニック

3. 50 Examples of Colorful Web Design For Inspiration - Smashfreakzhttp://smashfreakz.com/2015/01/colorful-web-design-inspiration/

カラフルなWebデザインを集めたギャラリーです。はっきりした色を使っていることで、活発な感じの出ているサイトが多いですね。

イラストを使ったサイトが、カラフルで目を引きやすいとも感じました。

図3 カラフルなWebデザインのギャラリー
図3 カラフルなWebデザインのギャラリー

4. 500+ Free Pure CSS Iconshttp://www.designzzz.com/free-pure-css-icons/

CSSだけで作ったアイコンを12セット(500個以上)紹介しています。

フリーのアイコンフォントも増えて気軽に使えるようになっていますが、アニメーションするアイコンや多色使いのアイコンが作れるところはCSSアイコンのメリットのようです。

図4 CSSだけで作ったアイコンいろいろ
図4 CSSだけで作ったアイコンいろいろ

5. 25 Tools for Dribbble Lovers ~ Creative Market Bloghttps://creativemarket.com/blog/2015/03/03/25-tools-for-dribbble-lovers

デザイナーのためのソーシャルメディアであり、色々な作品を見ることができるDribbbleを、便利に使うためのツールを紹介しています。

Dribbbleの作品を探したり閲覧するためのWebサービス、モバイルアプリ、デスクトップアプリなどが掲載されていました。

図5 Dribbbleを活用するためのツールまとめ
図5 Dribbbleを活用するためのツールまとめ

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

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

UX Archivehttp://uxarchive.com/

UX Archiveは、iPhoneアプリのユーザーインターフェイスを、キャプチャ画像でアーカイブしているサービスです。

「Tumblrでのシェア」⁠Pinterestで検索」など、一連の画面遷移を順を追って見られるところが便利です。同じ作業のユーザーインターフェイスでも、アプリのバージョンが古いときのものが掲載されている場合もあります。

メニューから、作業内容別(Tasks⁠⁠/アプリ別(App)に絞り込むことができます。ログインのインターフェイスだけをまとめて見たり、Facebookアプリのインターフェイスをまとめて確認するといったことが可能です。

最近アニメーションに対応したようで、⁠Animated」のマークの付いたものは、カーソルを重ねると画面が動き出します。

図6 iPhoneアプリのユーザーインターフェイスをアーカイブしているサービス
図6 iPhoneアプリのユーザーインターフェイスをアーカイブしているサービス

おすすめ記事

記事・ニュース一覧