週刊Webテク通信

2012年7月第3週号 1位は,レスポンシブな画像を実現する3つの方法,気になるネタは,Dropbox が料金そのままで容量倍増

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

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

1. 3 Types Of Solutions To Work With Responsive Images | Van SEO Designhttp://www.vanseodesign.com/web-design/responsive-images/

レスポンシブな画像を実現する方法3タイプを紹介しています。

レスポンシブWebデザインにおいて,画像の扱いについての完璧なソリューションは現状ありません。大きな画像を幅100%でグリッドに合わせて表示するのが一つの方法ですが,モバイル端末にも大きなサイズの画像をダウンロードさせることになり,ベストな手段とは言えません。

アップルのRetinaディスプレイ向けには,よりピクセル数の多い画像が必要になるなど,レスポンシブな画像の取り扱いは最近ホットな分野ですね。

この記事によると,現在考えられている対処法は,以下の通りです。

  1. 新しい要素または属性をHTML上に追加する方法
  2. 新しい画像フォーマットを使う方法
  3. 他のテクノロジーを使って解決する方法

上の二つは将来的なことで,今のところはすぐに使えるテクノロジーを利用して対処するしかありません。

JavaScriptとサーバー側の処理との組み合わせで最適な画像を表示させる方法が,今のところのベターな方法として紹介されていました。

図1 レスポンシブな画像を実現する3つの方法

図1 レスポンシブな画像を実現する3つの方法

2. CSS3のボックスシャドウを使って写真のフチの装飾をするサンプル作りました。【サンプルコード付き】 | HTML5でサイトをつくろうhttp://www.html5-memo.com/webtips/boxshadow/

CSS3を利用して写真に様々な影を付ける方法を紹介しています。

この手のテクニックは既にいろいろと出回っていますが,日本語で丁寧に解説してある記事なのでおすすめです。

図2 CSS3による写真の影付けの実例いろいろ

図2 CSS3による写真の影付けの実例いろいろ

3. 20 New jQuery Image Slider and Slideshow 2012http://www.freshdesignweb.com/20-new-jquery-image-slider-and-slideshow-2012.html

jQueryを使っての,画像スライダーやスライドショーを集めた記事です。

はやりのレスポンシブなものや,パララックス効果を付けられるものなど,全部で20種類紹介されています。

図3 jQueryを利用した画像スライダーやスライドショー

図3 jQueryを利用した画像スライダーやスライドショー

4. 20 Examples of Effective Image Usage in Web Design | Inspirationhttp://webdesignledger.com/inspiration/20-examples-of-effective-image-usage-in-web-design

画像を効果的に使ったWebデザインのショーケースです。

背景画像として大きな写真を使ったものや,サムネイルとして写真を並べたものなど,写真が印象的に使われているサイトが紹介されています。

図4 画像を効果的に使ったWebデザインのショーケース

図4 画像を効果的に使ったWebデザインのショーケース

5. 20 Minimal Web Designs For Your Inspiration - Downgrafhttp://www.downgraf.com/inspiration/20-minimal-web-designs-for-your-inspiration/

ミニマルなWebデザインのショーケースです。シンプルでインスピレーションを刺激するサイトが20個紹介されています。

図5 ミニマルなWebデザインのショーケース

図5 ミニマルなWebデザインのショーケース

そのほか,先週の記事の中から,仕事にはあまり関係ないけど興味深い記事を紹介します。

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

Quick Introduction to Moqups - Moqupshttps://moqups.com/

Moqupsはサイトやアプリのモックアップを作ることができるWebサービスです。シンプルで操作も分かりやすく,機能も結構充実しています。

必要なパーツ(Stencils)をドラッグして配置し,位置やサイズを調整していきます。グリッドへのスナップや,整列/均等配置もでき,きっちりとレイアウトできるようになっています。

パーツはそれぞれカスタマイズが可能です。ボタンの文字の変更や,テーブルの行/列の数を指定するなど,かなり思い通りの調整が可能です。日本語もOKです。パーツによっては色を付けられます。

ユーザー登録をすると,画像をアップロードして利用できるようになります。なお,使用できるのはPNGかJPEGだけで,GIFはアップロードできません。

複数ページの作成が可能で,リンクの設定もできます。作ったモックアップは個別のURLが生成され,誰でもブラウザで閲覧できます。

iOS用のパーツも充実していて,iPhoneアプリのモックアップ作成にも使えます。

図6 モックアップ作成サービス

図6 モックアップ作成サービス

今週の気になるWebネタ

Dropbox が料金そのままで容量倍増,500GBプランも追加 - Engadget Japanesehttp://japanese.engadget.com/2012/07/10/dropbox-500gb/

Dropboxの有料プランが変更され,従来の50GB/100GBプランの容量がそれぞれ倍増しました。わたしは50GBプランを使っていたのですが,料金はそのままで100GBとなってうれしいですね。

Dropboxには,とにかく自分が作業する全てのファイルを入れておくのがポイントと考えて実行しています。わたしの場合だと,100GBあればあと3年くらいは大丈夫そうですね。

古くから有料プランを使っているユーザーに,今後課金しないというお知らせが届いたというニュース(⁠Dropbox が初期からの有料プラン利用者に感謝,永久無料化」⁠もありました。とはいえ,このニュースをよく読んでみると,かつての25GBプランの利用者が無料になったということです。それらのユーザーが100GBプランを使いたかったら,やっぱり有料という事なんでしょうか。無料はうらやましいと思いましたが,わたしは結局100GBプランの方がいいですね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入