週刊Webテク通信

2013年3月第2週号 1位は，サイトをレスポンシブWebデザインにリニューアルしたレポート，気になるネタは，アップルがiBookstoreを日本でもオープン

Webテク, Webデザイン, Web広告, レスポンシブWebデザイン, WordPress, Illustrator, Facebook, iBookstore

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

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

1. Building A Better Responsive Website | Smashing Mobilehttp://mobile.smashingmagazine.com/2013/03/05/building-a-better-responsive-website/

サイトをレスポンシブWebデザインにリニューアルしたレポートです。

1つのWebサイトで各デバイスに適用でき，将来登場する様々なデバイスのディスプレイサイズにも対応することを目指してデザインしたようです。

ナビゲーション部分は，上部の水平メニューがモバイル時にはページ一番下の垂直メニューに変わるというアプローチです。その際，上部にメニューへのボタンが表示され，ページ内スクロールで下部のメニューへと移動します。

ExpressionEngineという海外では結構メジャーというCMSで構築されており，モバイル時には1ページに表示されるニュースの件数を減らすなどの作り込みがされているそうです。

図1　レスポンシブWebデザイン構築のレポート

図1　レスポンシブWebデザイン構築のレポート

2. Start Up Guide to Responsive Web Designhttp://www.theartimes.com/start-up-guide-to-design-responsive-websites/

レスポンシブWebデザインを始める人へのガイド的な記事です。紹介されている実例が，どれもデザイン性が高く興味深いですね。

図2　レスポンシブWebデザインを始める人へのガイド記事

図2　レスポンシブWebデザインを始める人へのガイド記事

3. 10 Metro WordPress Themes Inspired by Windows 8http://designrshub.com/2013/03/metro-wordpress-themes.html

Windows 8のメトロデザインに影響を受けたWordPressテーマをいろいろ紹介しています。フラットデザインのサンプル集とも言えますね。

図3　メトロデザインに影響を受けたWordPressテーマいろいろ

図3　メトロデザインに影響を受けたWordPressテーマいろいろ

4. Uniqlo Stripe Hovers | CSS-Trickshttp://css-tricks.com/uniqlo-stripe-hovers/

画像にロールオーバーしたときに，アニメーションするストライプの枠を付けるテクニックを実現するチュートリアル記事です。

ユニクロのUSサイトで使われている効果を再現したものですが，ユニクロではアニメーションGIFを使っているのに対し，ここでは画像を使わずCSSだけで実現しています。ストライプは，CSS3のグラデーションで描いています。

図4　動くストライプの枠を作るテクニック

図4　動くストライプの枠を作るテクニック

5. 25 Illustrator Tutorials Every Graphic Designer Should Learn | Tutorials | Design Magazinehttp://urdu-mag.com/blog/2013/03/25-illustrator-tutorials-every-graphic-designer-should-learn/

Adobe Illustratorを使ったイラスト作成のチュートリアルを25個紹介しています。

難しそうなところが意外と簡単なテクニックで実現できていたり，逆に単純そうなところに手がかかっていたりと，いろいろな発見がありますね。

図5　llustratorでのイラスト作成チュートリアル集

図5　llustratorでのイラスト作成チュートリアル集

そのほか，最近の記事の中から，Facebookのニュースフィードリニューアルに関する記事を紹介します。

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

Am I Responsive?http://ami.responsivedesign.is/

複数デバイスの画面サイズで，サイトがどう見えるかをチェックできるWebサービスです。

モニタ，ラップトップ，タブレット，スマートフォンが格好良く配置された画像に，はめ込み合成のようにサイトが表示されるところが，同様のサービスとの差別化ポイントでしょう。

サイト部分は画像ではなくiframeで表示しているので，スクロールなども行えます。このサービスの仕組みについて解説してある記事も興味深いです。

レスポンシブなサイトを作ったときに，クライアントにプレゼンするときに使うとインパクトがありそうですね。

図6　複数デバイスでのサイトの見え方をシミュレートするサービス

図6　複数デバイスでのサイトの見え方をシミュレートするサービス

今週の気になるWebネタ

アップルがiBookstoreを日本でもオープン ≪ マガジン航[k]http://www.dotbook.jp/magazine-k/2013/03/06/apple_launches_ibookstore_in_japan/

アップルの電子書籍ストア「iBookstore」の日本版がオープンしました。これで，アマゾン，グーグル，アップルの電子書籍ストアがすべて日本でもオープンしたわけですね。

iBookstoreは書籍やコミックが中心で，Newssandは新聞や雑誌などの定期刊行物が中心ということですが，ちょっと分かりにくいような気もします。独自アプリになっている電子書籍もあるのが，さらに混乱を招くように思えます。

混乱といえば，iTunes Store，App Store，iBookstoreといろんなストア名があるのも分かりにくいですよね。そもそも「Tune」って「曲」のことだからiTunes Storeの現状の実態とそぐわないとか，コンビニでiTunesカードとApp Storeカードとを売ってるけど，どっちも実質同じものなのにまぎらわしいとか，いろいろと突っ込みたいところも多い今日このごろです。

Webテク, Webデザイン, Web広告, レスポンシブWebデザイン, WordPress, Illustrator, Facebook, iBookstore

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote