週刊Webテク通信

2013年4月第2週号1位は、2013年のWebデザインのトレンド10個、気になるネタは、「Facebook Home」“人が中心”ホーム画面

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

1. 10 Hot Web Design Trends You Should Followhttp://smashinghub.com/10-hot-web-design-trends.htm

2013年のWebデザインのトレンドを10個紹介しています。

  1. コンテンツが常に優先される
  2. Webサイトはシンプルな方向に向かっている
  3. デザインはとにかくユーザー体験のために
  4. アプリのインターフェイスに合わせる
  5. モバイルとデスクトップ版とのデザインの融合
  6. SVGとレスポンシブへの対応方法
  7. 虹色はやめてフラットデザインへ
  8. 長いページ
  9. デバイスによる特性を考える
  10. 大きな写真

とくに目新しいことはなく、やはりシンプル、モバイル、レスポンシブあたりが最近のWebデザインのキーワードとなっているようです。

図1 2013年のWebデザインのトレンド
図1 2013年のWebデザインのトレンド

2. Flat Web Design: Trend Or Revolution? - The Usabilla Bloghttp://blog.usabilla.com/flat-web-design-trend-or-revolution/

フラットWebデザインが新しい良い慣習である5つの理由をまとめています。

  1. ウソがない
  2. 流行っている
  3. 使いやすい
  4. 早い
  5. スケーラブル

作り手側のメリットが、ユーザー側にも好意を持って受け入れられているのがフラットWebデザインなのではないかと感じました。

図2 フラットWebデザインのいいところ
図2 フラットWebデザインのいいところ

3. Useful Tips For Learning Web Design : Creative Beaconhttp://www.creativebeacon.com/useful-tips-for-learning-web-design/

Webデザインを学ぶ方法や学べるサイトをまとめた記事です。オンラインで動画で学べるサイトも海外では充実しているようですね。

図3 Webデザインを学ぶ方法や学べるサイトいろいろ
図3 Webデザインを学ぶ方法や学べるサイトいろいろ

4. Essential tools for every web designer | Webdesigner Depothttp://www.webdesignerdepot.com/2013/04/essential-tools-for-every-web-designer/

Webデザイナー必須のツールを大量に紹介した記事です。オンラインツール、デスクトップアプリケーションなどが、カラー、タイポグラフィ、ワイヤーフレーム、レイアウト、CMS、コードエディタ、FTPなどの項目に分けて掲載されています。

図4 Webデザイナー必須のツールいろいろ
図4 Webデザイナー必須のツールいろいろ

5. 10 Wireframing Tools for Increased Productivityhttp://smashinghub.com/10-wireframing-tools-for-increased-productivity.htm

ワイヤーフレーム作成用のツールを10個まとめています。最近はモバイルにも対応したものや、モバイルに特化したものが増えました。

図5 ワイヤーフレーム作成用ツール10選
図5 ワイヤーフレーム作成用ツール10選

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

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

Instacodehttp://instacod.es/

HTMLなどのソースコードを画像化し、Instagramっぽく加工できるサービスです。

立体的に角度を付けたり、周りをぼかしたりして、おしゃれな感じの画像が作れます。

別にコードでなくてもテキストならなんでも画像化できるのですが、プログラム言語を選んで構文がカラーリングされるのがポイントです。なお、日本語は表示されませんでした。

モニタにコードが表示されている写真はストックフォトでも見かけますし需要があるはずです。そういった写真のようなイメージが簡単に作れるので、意外と実用的なツールではないかと思いました。

図6 コードをInstagramっぽく画像化するサービス
図6 コードをInstagramっぽく画像化するサービス

おすすめ記事

記事・ニュース一覧