週刊Webテク通信

2014年11月第3週号1位は、2015年に向けての7つの重要なWebデザインのトレンド、気になるネタは、Facebookが「ありがとう」伝えよう動画企画を開始

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

1. 7 Crucial Web Design Trends For 2015 | Sponsoredhttp://webdesignledger.com/sponsored/7-crucial-web-design-trends-for-2015

2015年を迎えるにあたっての、7つの重要なWebデザインのトレンドについて解説した記事です。

  1. タイポグラフィに柔軟性を
  2. Webコーディングの衰退
  3. 進化したレスポンシブデザイン
  4. フラットデザインがピクセルの世界を制覇する
  5. 画像は大きいほどいい
  6. スクロールによるアニメーション、視差効果、ちょっとしたインタラクション
  7. Webグラフィックスの夜明け

1は、どんなプラットフォーム上でも読みやすく表示されるテキストにすべきということで、レスポンシブなテキストをということですね。

7は、インフォグラフィックスをWeb向けに進化させた、インタラクティブな要素が加わったグラフィックス要素が主流になっていくだろうとのこと。この、Webグラフィックスの今後の動向には、個人的にも注目したいと思います。

図1 2015年に向けてのWebデザインのトレンド
図1 2015年に向けてのWebデザインのトレンド

2. Current Design Trends for Digital Shops and E-commerce Websites - DesignM.aghttp://designm.ag/web-designs/trends-for-digital-shops-ecommerce-websites/

ECサイトの最近のデザイントレンドを解説しています。

  • 市場性のあるホームページ
  • 固定ヘッダ
  • 切り替わるコンテンツ(スライダーなど)
  • なめらかで美しいタイポグラフィ

また、実際のサイトのデザインギャラリーも載っており、最近の海外ECサイトのデザインのトレンドが分かります。

図2 ECサイトの最近のデザイントレンド
図2 ECサイトの最近のデザイントレンド

3. 知っておくと便利!あのサイトでさりげなく使われていたCSS小技集 | コムテブログhttp://commte.net/blog/archives/4861

CSSの新しい要素などを使ったテクニック集をまとめています。

CSSを使いこなすことで、実はけっこう簡単に実装できるという小技が多数紹介されていました。

図3 さりげなく使いたいCSSテクニック集
図3 さりげなく使いたいCSSテクニック集

4. Lychee ― Self-hosted photo-management done righthttp://lychee.electerious.com/

自分のサーバーにインストールして、写真ギャラリーを作れるツールです。自分の管理するサーバー上でFlickrのような感じで画像を管理することができ便利そうです。

写真をソーシャルメディアでシェアすることもできますし、公開ギャラリーとしても使えるようです。

図4 写真ギャラリーを作れるツール
図4 写真ギャラリーを作れるツール

5. 30 Inspiring Dark Web Designshttp://sixrevisions.com/web_design/30-inspiring-dark-web-designs/

モノクロ写真など、暗い色をベースとしたWebデザインのギャラリーです。

モノクロ写真の一部がカラーという表現や、モノクロの中に一色だけ差し色を使った表現は、定番ではありますがやはり目を引きます。

図5 暗い色をベースとしたWebデザインのギャラリー
図5 暗い色をベースとしたWebデザインのギャラリー

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

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

7 Helpful Tools To Identify Font | SmashingApps.comhttp://www.smashingapps.com/2014/11/12/7-helpful-tools-to-identify-font.html

今回は、フォントを識別するためのWebサービスをまとめた記事を紹介します。フォントを探す際に役に立つツールが7つ掲載されていました。

大きく以下の2つのパターンに分かれています。

  • 画像をアップロードするか画像のURLを指定することで、何のフォントかを調べてくれる
  • いくつかの質問に答えていくことでフォントを絞り込む

Webサービスとはちょっと違いますが、フォントの画像を投稿すると誰かがフォント名を答えてくれる(かもしれない)という人力のアプローチも面白いですね。

ここで紹介されているFlickrのグループがそうですし、この記事では「What The Font」サービスが紹介されているMyFontsにも「WhatTheFont Forum」というフォーラムコーナーがあって、多くの質問と答えのやり取りが行われています。

図6 フォントを識別するためのWebサービス7選
図6 フォントを識別するためのWebサービス7選

おすすめ記事

記事・ニュース一覧