週刊Webテク通信

2012年6月第1週号1位は、レスポンシブWebデザインの5つのパターン、気になるネタは、SUBARU、初の公式「まとめサイト」オープン

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

1. 5 Patterns To Rearrange Responsive Layouts | Van SEO Designhttp://www.vanseodesign.com/web-design/responsive-layout-patterns/

レスポンシブWebデザインの5つのパターンを紹介し、より高度なレスポンシブなデザインについて解説しています。

挙げられている5つのパターンは以下の通りです。

Mostly fluid
  • モバイルサイズではカラムが縦に並ぶ
  • ブラウザサイズによって複数カラムの段組になる
  • エレメントとコンテナは可変し、ブレイクポイントによって拡大されたり縮小されたりする
  • センター揃えの固定幅レイアウトに見える
Column drop
  • Mostly fluidと似ているが、コンテナが可変しない
  • ブレイクポイントによってサイズを変えるので、ブレイクポイントが多く必要
Layout shifter
  • サイズに合わせて単にカラムが落ちるだけでなく、高度にレイアウトが調整される
Tiny tweaks
  • シングルカラムでデバイスによって横幅が変わるなど、ちょっとだけ変化するもの
Off canvas
  • ブラウザサイズによって、サイドバーなど一部の情報が隠れる
  • 隠れた情報はクリックすると現れるなど、別の手段でアクセスできる
図1 レスポンシブWebデザインの5つのパターン
図1 レスポンシブWebデザインの5つのパターン

2. 50 jQuery Function Demos for Aspiring Web Developers - Smashing Coding | Smashing Codinghttp://coding.smashingmagazine.com/2012/05/31/50-jquery-function-demos-for-aspiring-web-developers/

jQueryのデモコードを50個紹介しています。その場でデモを確認し、コードを見ることができます。

プラグインを使うまでもないようなケースで、ちょっとしたコードは自分で書きたいという人のリファレンスとして役に立ちそうです。

図2 jQueryのデモいろいろ
図2 jQueryのデモいろいろ

3. Animated Logo Design Process Showcase - Inspirationhttp://favbulous.com/post/1004/animated-logo-design-process-showcase

アニメーションGIFで紹介したロゴデザインの過程が、多数掲載されています。

あえてムービーでなく、アニメーションGIFという見せ方も面白いですね。

ソーシャルメディアに貼り付けたときに目立つということで、アニメーションGIFが今さらながら流行っているようにも感じます。

図3 ロゴデザインの過程をアニメーションで紹介
図3 ロゴデザインの過程をアニメーションで紹介

4. New And Awesome Designs Of Websites For Inspiration - X Siteshttp://www.designyourway.net/blog/inspiration/new-and-awesome-designs-of-websites-for-inspiration-40-sites/

最近公開された、デザインが優れたサイトのギャラリーです。

こういうところで紹介される気合いの入ったデザインのサイトは、1ページ完結型のものが多いですね。

図4 デザインが優れたサイトのギャラリー
図4 デザインが優れたサイトのギャラリー

5. WordPress vs MovableType という疑問 : Web Design KOJIKA17http://kojika17.com/2012/05/wordpress-and-movabletype.php

WordPressとMovable Typeとを比較した記事です。ニュートラルな視点でそれぞれを比べて、双方の良い点が分かるようにまとめてあります。どちらが優れているかという議論にはあまり意味がなく、ケースバイケースで使って欲しい(今やマイナーとなってしまったMovable Typeのことも忘れないでね)ということを訴えたいようです。

ちなみに、有名ブログの「ネタフル」はずっとMovable Typeを使っていますね。やはり静的生成というところがポイントのようです。

図5 WordPressとMovableTypeとの比較
図5 WordPressとMovableTypeとの比較

そのほか、先週の記事の中から、Adobeサービス関連の話題を紹介します。

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

Clipboardhttp://clipboard.com/

ClipboardはWebページ内の任意の場所をクリッピングできるWebサービスです。

クリッピング版Pinterestといった感じのサービスで、フォロー/Like/コメントといった、お決まりのソーシャル要素も用意されています。

クリップしたもの(以下クリップ)は、画像になるわけではなくHTMLのままのようで、テキストや画像を選択してコピーすることもできます。Webデザインのパーツギャラリーのようなものも作れそうです。

Pinterestのようなボードを作ることができ、クリップに付けたタグがボード名となります。タグは複数付けられるので、一つのクリップが複数のボードに入る場合もあるわけです。

クリップは公開か非公開かも選ぶことができます。

Pinterestを使い慣れている人にはすんなり理解できて、なかなか面白いサービスです。しかし、Pinterestと同様に、メジャーになったときには著作権的にどうなのかといった議論になりそうですね。

図6 Webページ内の任意の場所をクリッピングできるサービス
図6 Webページ内の任意の場所をクリッピングできるサービス

おすすめ記事

記事・ニュース一覧