週刊Webテク通信

2012年10月第1週号1位は、2013年のWebデザインのトレンドの予想、気になるネタは、日本のGoogle PlayにもNexus 7が登場、電子書籍サービスも日本語対応

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

1. Six Expected Web Design Trends in 2013http://smashinghub.com/web-design-trends-in-2013.htm

2013年のWebデザインのトレンドを予想した記事です。

  1. レスポンシブWebデザイン
  2. タイポグラフィ
    タイポグラフィを画像に置き換えるのはやめて、タイポグラフィを使ってWebサイトを美しくデザインするようになる
  3. 縦スクロール
    メニューやボタンが画面スクロールに追従するのもトレンドになる
  4. 巨大なボタン
  5. ブランディング
  6. 視差スクロール

予想と言いつつ、すでに流行っているものが中心ですね。

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

2. Exquisite Sidebar Design in Website Layouts / Design Ticklehttp://www.designtickle.com/2012/09/sidebar-design-website-layouts/

サイドバーのデザインギャラリーです。デザイナーのコミュニティサイト・dribbleに掲載された作品からセレクトされた、美しいデザインが揃っています。

ヘッダやフッタのギャラリーはよく見かけますが、サイドバーのギャラリーというのは珍しいですね。

図2 サイドバーのデザインギャラリー
図2 サイドバーのデザインギャラリー

3. Adobe Fireworks CS6 Features and Tutorials - DesignModohttp://designmodo.com/fireworks-tutorials/

Fireworks CS6の新機能と主要な機能を紹介し、最後にチュートリアルのリンク集も掲載されています。

新機能としては、やはりFireworks上でデザインしたエレメントから、CSSのコードが簡単に作成できるようになったことが一番目に挙げられています。CSSプロパティパネルにより、CSS要素とその値(カラー、フォント、グラデーション、角丸の半径など)が抽出できるので便利です。

図3 Fireworks CS6の新機能と主要な機能、チュートリアル
図3 Fireworks CS6の新機能と主要な機能、チュートリアル

4. 40 Examples Of Web Design Sketches And Wireframes | Free and Useful Online Resources for Designers and Developershttp://www.smashingapps.com/2012/09/26/40-examples-of-web-design-sketches-and-wireframes.html

Webデザインのワイヤーフレームやアイデアスケッチのギャラリーです。すべて手書きで描かれているもので、それぞれに味があります。手書きでここまで書き込んでると思うと、驚くようなものが多いですね。

赤ペンで説明を書き込むと分かりやすいとか、グレーの塗りを加えると絵が締まるなど、参考になる点がいろいろ見つかりそうです。

図4 Webデザインの手書きスケッチ
図4 Webデザインの手書きスケッチ

5. Clean and Creative Mobile Websites and Apps | UnderWorld Magazineshttp://www.underworldmagazines.com/clean-and-creative-mobile-websites-and-apps/

モバイルサイト/アプリのデザインギャラリーです。

iPhoneの画面にアプリが表示されている美しい画像ばかりで、ユーザーインターフェイスのデザイン性だけで使ってみたくなるようなアプリがもりだくさんです。

図5 モバイルサイト/アプリのデザインギャラリー
図5 モバイルサイト/アプリのデザインギャラリー

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

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

PassKit - Powering Apple Passbook - Create, Distribute and Manage Passbook Passes for All Mobile Platformshttp://passk.it/

iOS 6の新機能Passbook用のパスを簡単に作成・管理できるサービスです。

Pass Designerの画面で、プレビューを見ながら作っていくことができます。

クーポン、ストアカード、イベントチケットなど、6種類のパスのタイプを選び、色を選んだり画像をアップロードしたりしてデザインしていきます。

言語設定に「日本語」もあり、日本語を入力することもできました。

なお、調べてみると同様のツールが大量にありましたので、以下にリストアップします。

以下は日本のものですが、どちらもまだサービスは始まっていません。

図6 Passbook用のパスを簡単に作成・管理できるサービス
図6 Passbook用のパスを簡単に作成・管理できるサービス

おすすめ記事

記事・ニュース一覧