gihyo.jpサイトのロゴ

週刊Webテク通信

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

2012-08-23

ネットで見かけた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の賢い使い方十選

おすすめ記事

記事・ニュース一覧