週刊Webテク通信

2013年8月第1週号1位は、Webデザインの5つのトレンド、気になるネタは、相次ぐアルバイト店員などの「不適切写真」

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

1. 5 web-design trends tech companies should watch ? Tech News and Analysishttp://gigaom.com/2013/07/25/5-web-design-trends-tech-companies-should-watch/

Webデザインのトレンドについて、5つの項目をピックアップしています。

  1. はっきりしたアイコン
  2. 大胆な色
  3. データの可視化
  4. Webフォント
  5. パララックス(視差)スクロール

3番目のデータの可視化ですが、これはデータを元にビジュアル化した画像をあらかじめ作るのではなく、データを元にインタラクティブにその場でビジュアル化することです。画像ではないので検索エンジンにインデックスされるというメリットもあるとのことです。

図1 Webデザインの5つのトレンド
図1 Webデザインの5つのトレンド

2. Best New Features in Bootstrap 3.0http://antjanus.com/blog/web-design-tips/web-design-elements/best-new-features-in-bootstrap-3-0/

Bootstrap 3の新機能について、以下の項目に分けて解説しています。

  • フラットデザイン寄りのはっきりしたUI
  • アイコンフォント
  • 新しくなったグリッドシステム
  • 制御しやすくなったフォームのレイアウト
  • リストグループ
  • コンテキストパネル

また、Bootstrap 3を利用した実例やチュートリアルをまとめた8 useful bootstrap 3 examples and tutorialsという記事もありました。

図2 Bootstrap 3の新機能
図2 Bootstrap 3の新機能

3. Free Flat Design PSD Files for Designers | Freebies | Graphic Design Junctionhttp://graphicdesignjunction.com/2013/07/free-flat-design-psd/

フラットデザインのPhotoshop素材をまとめた記事です。

25+ Flat Design Inspiration for Designers - Tutorials-Share.comというフラットデザインの実例をまとめた記事も参考になりそうです。

図3 フラットデザインのPhotoshop素材いろいろ
図3 フラットデザインのPhotoshop素材いろいろ

4. UIkithttp://www.getuikit.com/

BootstrapのようなWebサイト制作のベースとなるフレームワークで、WordPressのテーマなどを作っているYOOthemeというところが開発しています。

用意されているコンポーネントが豊富で、個人的に気になったのはJavaScriptコンポーネントで用意されているOff-canvasです。スマートフォンアプリでよくある、サイドメニューがスライドして現れるとともに画面全体が横に移動するものなのですが、フレームワークに標準で用意されているのを初めて見ました。

図4 UIコンポーネントが充実したフレームワーク
図4 UIコンポーネントが充実したフレームワーク

5. Google Nexus Website Menu | Codropshttp://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/

GoogleのNexusサイトで使われているサイドメニューを実現するためのチュートリアルです。

ボタンにロールオーバーしたときにアイコンだけが表示されて、さらにアイコンにロールオーバーするとメニューがスライドして登場します。

図5 Google Nexusサイト風スライドメニューの実装方法
図5 Google Nexusサイト風スライドメニューの実装方法

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

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

embedresponsively.comhttp://embedresponsively.com/

レスポンシブな埋め込みコードを生成するためのWebサービスです。

YouTubeやGoogleマップをサイトやブログに埋め込む際、標準で生成できる埋め込みコードはサイズがピクセルで決まっています。それではレスポンシブなサイトで利用するときに不便なのですが、このサービスを使うと横幅に合わせてサイズが可変するコードが生成できます。

YouTube、Vimeo、Googleマップ、インスタグラム、iFrameに対応しています。レスポンシブにするためのCSSの記述部分は基本同じなので、対応していないサービスでもCSS部分を流用して使えそうです。

図6 レスポンシブな埋め込みコードを生成
図6 レスポンシブな埋め込みコードを生成

おすすめ記事

記事・ニュース一覧