週刊Webテク通信

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

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

ネットで見かけた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ページ内の任意の場所をクリッピングできるサービス

今週の気になるWebネタ

SUBARU,初の公式「まとめサイト」をオープン #宣伝会議 | AdverTimes(アドタイ)http://www.advertimes.com/20120530/article69469/

NAVERまとめが企業向けサービス「公式まとめ」を始め,富士重工業が「SUBARU公式まとめ」ページをオープンしました。

ちなみに,公式まとめの販売価格は3カ月で1000万円からとのことです。LINEの有料スタンプといい,最近のNAVERはマネタイズがうまいですよね。

2012年の元旦にNHN Japan,ネイバー,ライブドアの3社が経営統合したわけですが,そのときの「まずはスマートフォン事業でNo.1」というのを聞いても「ふーん」としか思わなかった人も多いと思います。しかし,LINEが大ヒットしてスマートフォン事業は大成功。NAVERまとめ,Nドライブも好調のようです。

もともとのネットオークション(ビッターズ)はヒットしなかったDeNAが,モバゲーで大ブレイクするなど,ネット業界はリベンジが成功するケースが結構あるのかも。あきらめないことが,肝心なのかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入