週刊Webテク通信

2014年3月第1週号1位は、レスポンシブなWebデザインに対応するための4つの戦略、気になるネタは、LINEがスタンプをオープン化、ユーザーのオリジナル作品が販売可能に

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

1. Responsive Strategy | Brad Frost Webhttp://bradfrostweb.com/blog/post/responsive-strategy/

レスポンシブなWebデザインに対応するための戦略についてまとめた記事です。

  1. 既存のPC用サイトをレスポンシブに改造
  2. レスポンシブなモバイルサイトを別で作り、将来的にはそれをメインのサイトにする
  3. モバイルファーストの考え方でレスポンシブデザインで作る
  4. 少しずつ対応する

といった、4つの戦略について、良い点・悪い点を挙げて解説しています。

図1 レスポンシブなWebデザインに対応するための戦略
図1 レスポンシブなWebデザインに対応するための戦略

2. Understanding Masonry Layout - SitePointhttp://www.sitepoint.com/understanding-masonry-layout/

Pinterestのような、レンガ組みのレイアウトについてまとめた記事です。

実際にレンガ組みが使われているサイトの実例、実装するのに利用するプラグイン、プラグイン「Masonry」を使ったコーディングの仕方などが紹介されています。

図2 レンガ組みのレイアウトについてのまとめ
図2 レンガ組みのレイアウトについてのまとめ

3. The ultimate guide to logo design | Webdesigner Depothttp://www.webdesignerdepot.com/2014/02/the-ultimate-guide-to-logo-design/

ロゴデザインについてのガイドです。実例が豊富で眺めているだけでもインスピレーションが得られそうです。

いろいろなロゴデザインが見られるギャラリーサイトや、オンラインでロゴを作れるツールも多数紹介されています。

図3 ロゴデザインの完全ガイド
図3 ロゴデザインの完全ガイド

4. 25 Free Tools and Sites For Creating Presentationshttp://dizyne.net/25-free-tools-sites-creating-presentations/

プレゼンテーションを作るためのツールが25個紹介されています。オンラインツールが中心ですが、デスクトップアプリやモバイルアプリも掲載されていました。

Preziは日本語化もされているのでオススメだと思います。Juxというサービスが、とてもオシャレな感じのスライドショーが作れそうで、使ったみたいと思いました。

図4 プレゼンテーション作成ツールいろいろ
図4 プレゼンテーション作成ツールいろいろ

5. Flat Website Design Examples For Inspiration | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2014/03/flat-website-design-examples-for-inspiration/

フラットデザインのWebサイトのギャラリーです。

フラットデザインといえばイラストを使ったサイトが多いですが、このギャラリーでは写真を使ったものが中心に紹介されています。

図5 フラットデザインのWebサイトのギャラリー
図5 フラットデザインのWebサイトのギャラリー

そのほか、最近の記事の中から、iPhone関連のニュース記事を3つ紹介します。

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

yourbrowser.is - check your customer's web browsing environment in secondshttp://yourbrowser.is/

「yourbrowser.is」は、アクセスしたブラウザやネット接続の環境について表示してくれるサービスです。

この手のサイトは昔からいろいろありますが、表示の仕方がシンプルで分かりやすく、デザイン性もあるところが特長です。

ブラウザの種類とバージョン、OSとそのバージョン、画面サイズとブラウザの表示サイズ、JavaScript/Flash/クッキーが有効かどうかなどを調べることができます。

こういったツールは、Web制作者がクライアントの環境を知るために使うケースが多いと思いますが、そういった目的のために診断結果をメールで送る機能が付いています。さすが考えられていますね。

図6 ブラウザやネット接続の環境について表示するサイト
図6 ブラウザやネット接続の環境について表示するサイト

おすすめ記事

記事・ニュース一覧