週刊Webテク通信

2012年8月第3週号 1位は，レスポンシブな画像を実現する方法について，気になるネタは，［ケンタッキーフライドチキン］アプリで“火を吹く”キャンペーン

Webテク, Webデザイン, Web広告, Photoshop, Illustrator, WordPress, CSSスプライト, Dropbox, AR

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

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

1. How to Choose a Responsive Images Tool - DesignModohttp://designmodo.com/responsive-images-tool/

レスポンシブな画像を実現する方法について考察した記事です。

モバイル端末からのWebの閲覧は高速なネット環境とは限らないことから，画像の容量が大きいことが問題になるケースがあります。そのため，閲覧環境に合わせてサイズが可変するレスポンシブな画像の扱いが必要であり，それを実現するテクニックはいろいろと登場しています。

そういったことを前提として，それらのテクニックの問題点や考慮すべき点などについて解説しています。

図1　レスポンシブな画像を実現する方法について

図1　レスポンシブな画像を実現する方法について

2. 30 Adobe Photoshop & Illustrator Tutorials for Web Designers | SpyreStudioshttp://spyrestudios.com/30-adobe-photoshop-illustrator-tutorials-for-web-designers/

Webデザイナーのための，Photoshop＆Illustratorのチュートリアルを多数紹介したまとめ記事です。

CS6向けのものなど，新しめのチュートリアルを中心にまとめられています。

図2　WebデザイナーのためのPhotoshop＆Illustratorチュートリアル集

図2　WebデザイナーのためのPhotoshop＆Illustratorチュートリアル集

3. CSS3 Transition Tutorials to Create a Single Page Websitehttp://medleyweb.com/resources/css3-transition-tutorials-create-single-page-website/

単ページ完結サイトを作るときに役立つ，CSS3トランジションのチュートリアルを7つ紹介した記事です。

HTML上は1ページに記述してあるコンテンツを，複数ページを切り替えるように閲覧していくものが多く，ページ切り替え時にCSS3でアニメーション効果を加えています。

図3　単ページ完結サイトを作るときのためのCSS3トランジションいろいろ

図3　単ページ完結サイトを作るときのためのCSS3トランジションいろいろ

4. 6 infographics to help you better understand WordPresshttp://www.designer-daily.com/6-infographics-to-help-you-better-understand-wordpress-28101

WordPress関連のインフォグラフィックスを多数紹介しています。

データベース構造やテーマの構成の解説など，インフォグラフィックスやチートシートがいろいろ掲載されていました。

図4　WordPress関連のインフォグラフィックスを6つ紹介

図4　WordPress関連のインフォグラフィックスを6つ紹介

5. Using CSS Sprites to optimize for Retina Displays | Front-End Magazinehttp://front-endmagazine.com/using-css-sprites-to-optimize-for-retina-displays/

Retinaディスプレイに対応したCSSスプライトの作り方を解説しています。通常用とRetina用の2枚の画像を用意して，JavaScriptなどを使わずにCSSだけでRetina対応する方法です。

CSSスプライトを使える部分においては，比較的簡単にRetina対応ができますね。

図5　Retinaディスプレイに対応したCSSスプライトの作り方

図5　Retinaディスプレイに対応したCSSスプライトの作り方

そのほか，最近の記事の中から，デザインショーケースの記事を3つ紹介します。

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

Top 10 Clever Uses for Dropboxhttp://lifehacker.com/5933884/top-10-clever-uses-for-dropbox

今回は，クラウドストレージサービスの定番Dropboxの，変わった使い方についてまとめた記事を紹介します。

  1. アプリケーションの設定ファイルやパスワードを複数PC間で同じに保つ
  2. ファイルを自動処理してフォーマット変換やSNSでのシェアを行う
  3. リモートで自宅PCのアプリケーションを起動したりコマンドを実行する
  4. クラウドベースの音楽ライブラリを構築する
  5. Webサイトやスタートページをホスティングするサーバーとして使う
  6. どのコンピューターからでも自宅のプリンタでプリントできるようにする
  7. Androidアプリを素早くインストールする
  8. BitTorrentのダウンロードを管理する
  9. セキュアにファイルを共有する
  10. タスクの実行状況や不正アクセスなどをモニタリングする

といった10個の賢い使い方が紹介されています。サードパーティのツールや高度なテクニックを使ったものが多いですね。

わたしがなるほどと思ったのは10番目のモニタリングに使うという方法です。一定間隔で画面キャプチャーを撮ってDropboxに保存するように設定しておけば，他のマシンから状況が逐一確認できるというわけですね。

図6　Dropboxの賢い使い方十選

図6　Dropboxの賢い使い方十選

今週の気になるWebネタ

［ケンタッキーフライドチキン］アプリで“火を吹く”キャンペーン | エンタメ | マイナビニュースhttp://news.mynavi.jp/news/2012/08/14/072/index.html

ケンタッキーフライドチキンのキャンペーンで，スマートフォンアプリでAR機能を使ったものがあります。テレビのCMで見たことのある人も多いと思いますが，辛口チキンのセットを買うと付いてくる指輪をARカメラで撮影すると，火を吹いているような写真が撮れるというものです。

CMではさらっとしか説明されていないのですが，ARというのは結構一般の人にも浸透しているものなんでしょうか？ このCMを見る度に，「⁠これはARを利用したものでうんぬん…」とうんちくを語りたくなるのを我慢しているわたしです。

ところで，この夏花火大会に行くたびに思ったのですが，スマートフォンのカメラをかざすと，どのあたりに花火が打ち上げられるのかが分かるアプリがあると場所取りのときに便利でしょう。金環日食のときに，ARで位置と時間が分かるアプリがあって，大変重宝したことを思い出しました。まだまだ花火大会はあるようなので，ぜひ誰かアプリの開発をお願いします。

Webテク, Webデザイン, Web広告, Photoshop, Illustrator, WordPress, CSSスプライト, Dropbox, AR

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote