週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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 レスポンシブな埋め込みコードを生成

今週の気になるWebネタ

朝日新聞デジタル:(ニュースQ3)モラルなきアルバイト店員の悪ふざけ,対策は?http://www.asahi.com/shimen/articles/TKY201308050612.html?ref=nmail

アルバイト店員などの「不適切写真」がネットで出回り,お店が謝罪するという出来事が相次いでいます。

それについて朝日新聞の記事(会員でないと全文読めません)に,⁠若者にはソーシャルメディアを『仲間だけのメディア』だと誤解する傾向がある」デジタルネーティブ』と呼ばれながら使い方をしっかり学ぶ機会がなかったのではないか」という明治学院大の宮田加久子教授(社会心理学)のコメントが載っていました。

たしかに最近のツイッターでの炎上事例などを見ていても,デジタルネイティブ世代は古い世代とネットに対する姿勢が違うんじゃないかと感じていました。カジュアルというか屈託がないというか,ネットで全世界に見られる状態で投稿することへのリスクを想定していない感じがします。

一方で旧世代の中には危機意識を持ちすぎている人も多く,ソーシャルメディア推進派のわたしとしては,そっちはそっちで問題だとも感じているんですけどね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入