週刊Webテク通信

2013年7月第1週号 1位は,2013年のWebデザインのトレンドのインフォグラフィックス,気になるネタは,Google Readerが終了

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

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

1. 2013 Web Design Trends Infographic | Enfuzedhttp://enfuzed.com/2013-web-design-trends-infographic/

2013年のWebデザインのトレンドを,インフォグラフィックスとしてまとめています。

取り上げられている項目は以下の通りです。

  • レスポンシブ
  • メトロ
  • ミニマリズム
  • タイポグラフィ
  • パララックス(視差)
  • 無限スクロール
  • 固定ヘッダ
  • シングルページ
  • 大きな背景画像
  • コンテンツファースト

図1 2013年のWebデザインのトレンドのインフォグラフィックス

図1 2013年のWebデザインのトレンドのインフォグラフィックス

2. Website Designs based on Solid Single Colored Background - Designmodohttp://designmodo.com/websites-single-color-background/

はっきりした単色の背景をベースとした,Webデザインの事例を多数紹介しています。

以下のような効果があるとのことです。

  • テキストが認識しやすい
  • 前面の要素の補足をする
  • 清潔さと精密さを追加する
  • バランスを取る
  • ミニマルなスタイルにする
  • 複数のエリアを区別する

図2 はっきりした単色の背景を使ったWebデザインのギャラリー

図2 はっきりした単色の背景を使ったWebデザインのギャラリー

3. Nifty Modal Window Effects | Codropshttp://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

いろいろな効果を使って開く,モーダルウィンドウを作成するチュートリアル記事です。

フラットデザインでシンプルながら,ちょっと面白みのあるモーダルウィンドウが作れます。

図3 効果付きで出現するモーダルウィンドウいろいろ

図3 効果付きで出現するモーダルウィンドウいろいろ

4. Terms of Service; Didn't Readhttp://tosdr.org/

各種Webサービスの規約から,ポイントになりそうな部分を抜き出して紹介しているサービスです。良い箇所,悪い箇所をピックアップして,その数からA~Eまでランク付けしています。

取り上げられているのは,Google,YouTube,Facebook,Twitterなどの規約です。

図4 各種Webサービスの規約を紹介

図4 各種Webサービスの規約を紹介

5. 適切に改行を行う - Weblog - hail2u.nethttp://hail2u.net/blog/webdesign/responsive-line-breaks.html

レスポンシブWebデザインの場合に,幅のサイズによって改行を入れたり無くしたりするCSSの例を紹介しています。

見出しをセンタリングにしている場合など,サイズによって改行をコントロールしたいというケースは確かにありますね。

図5 レスポンシブデザインのときに改行をコントロールする方法

図5 レスポンシブデザインのときに改行をコントロールする方法

そのほか,最近の記事の中から,いろいろと気になる記事を紹介します。

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

Creonomy Board: your visual inspiration folder - Welcomehttp://board.creonomy.com/

Boardは,Pinterestのような感じに画像をストックできるサービスです。Pinterestと違ってソーシャルメディア的な要素はなく,非公開の状態で使うものです。ちなみに,Pinterestも今では非公開のボードを作ることができるようになっています。

ローカルの画像をアップする際には,フォルダをドラッグ&ドロップして複数画像をまとめて追加できます。ブラウザ拡張機能を使って,閲覧しているページ内の画像を追加したり,任意の箇所をキャプチャーして追加,Webページ全体をキャプチャーして追加することが可能です。

インスピレーションのための参考画像をまとめたり,ビジュアルブックマーク的に使うと便利そうなサービスです。複数人で同じボードを管理することもできるので,サイト制作時の参考イメージを共有するケースなどで使えそうですね。

図6 プライベート版Pinterestといった感じのサービス

図6 プライベート版Pinterestといった感じのサービス

今週の気になるWebネタ

Google Readerが終了 「代替サービスを同じように愛してほしい」 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1307/02/news121.html

ついに7月1日でGoogle リーダーが終了しました。移行先としては今のところFeedlyが一歩リードしているようです。Feedlyは,ユーザーが登録したRSSフィードにほかのアプリからアクセスできるAPIを公開したので,まずはFeedlyに移行しておけば安心という状況です。

また,DiggリーダーやAOLリーダーといった,⁠アメリカでは)メジャーなところから新たなRSSリーダーが登場したのも興味深い流れです。FacebookもRSSリーダーを出すというウワサもあるようですし,Google リーダーの終了で,次期リーダー(Reader)のリーダー(Leader)争いが激しくなってきました。

なお,購読しているRSSフィードをバックアップも移行もしていないという人も,まだ間に合います。Google リーダーに登録していた購読リストは,7月15日までGoogle Takeoutを利用してバックアップできるとのことです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入