週刊Webテク通信

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

Webテク, Webデザイン, Web広告, レスポンシブWebデザイン, フラットデザイン, iPhone, LINE

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

ネットで見かけた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　ブラウザやネット接続の環境について表示するサイト

今週の気になるWebネタ

LINEがスタンプをオープン化，ユーザーのオリジナル作品が販売可能に | TechCrunch Japanhttp://jp.techcrunch.com/2014/02/26/jp20140226linestamp/

LINEのオリジナルスタンプを作って販売できる「LINE Creators Market」が4月からスタートし，個人・企業を問わずLINEユーザーなら誰でもオリジナルスタンプを販売できるようになるそうです。

販売価格は100円に決められており，売り上げの50％は制作者に配分されるとのこと。それなりの金額を得るのは難しそうですが，それでも大ヒットして一攫千金を手に入れる人は出てくるでしょう。

自分オリジナルのスタンプを使うために，自分で作ったスタンプを自分で購入して使うという人も多いはずです。40個のイラストが必要ですし審査もあるので，ある程度のやる気と技術がある人でないと販売にこぎつけるのは難しそうです。それでも大勢の人が自分で作って自分で買うことで，LINE側はかなり儲かると思いますね。

Webテク, Webデザイン, Web広告, レスポンシブWebデザイン, フラットデザイン, iPhone, LINE

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote