週刊Webテク通信

2011年5月第1週号1位は、6つのCSSレイアウトパターンの長所と短所、気になるネタは、iPadで使える「ニンテンドー ワイヤレスキーボード」安くて素晴らしいBluetoothキーボードだった

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

1. Pros And Cons Of 6 CSS Layout Patterns | Van SEO Designhttp://www.vanseodesign.com/css/css-layout-patterns-part-1/
www.vanseodesign.com/css/css-layout-patterns-part-2/">http://www.vanseodesign.com/css/css-layout-patterns-part-2/

CSSによるWebページのレイアウトパターンを6つに分類し、それぞれの長所と短所を解説した記事です。パート1と2に分かれています。

Fixed(横幅固定、横幅をピクセルで指定⁠⁠、Fluid/Liquid(横幅可変、横幅を%で指定⁠⁠、Elastic(横幅伸縮、横幅をemで指定)の従来からの定番以外に、さらに3つのレイアウト形式が紹介されています。

Hybridは、Fixed、Fluid/Liquid、Elasticを組み合わせたものです。コンテンツ幅は固定で背景がブラウザの幅に合わせて伸縮、ヘッダとフッタだけが横幅可変、などのパターンがあります。

Responsiveは、デバイスや解像度などによって複数のCSSを切り替えるというもの。スマートフォンなどへの対応ができますが、その分複数のレイアウトを用意するのに手間がかかります。このレイアウトパターンは、Conditional Layoutという呼び方もあるようです。

Fluid/Elastic Gridsは、グリッドを使った横幅可変のレイアウト。グリッドシステムを使った横幅可変のCSSフレームワークが最近多いですが、それらはこのレイアウトパターンに当てはまるのでしょう。

スマートフォンやタブレットの台頭により、見る側の環境に合わせてレイアウトが最適化されるResponsiveのような作り方が、今後ますます必要となってくるんでしょうね。

図1 6つのCSSレイアウトパターンの長所と短所
図1 6つのCSSレイアウトパターンの長所と短所

2. Laker compendium ? Designing digital publications in HTML5http://www.lakercompendium.com/

HTML5を使って、iPhone/iPad向けの電子書籍アプリを作るためのソリューションです。

Baker Ebook Framework、Less FrameworkなどのフレームワークとjQueryなどのスクリプト、CSSなどのファイル群とを組み合わせたパッケージとして提供されています。

HTMLとCSSの知識がありMacとXcodeを持っていれば、プログラミングの知識はなくてもiPhone/iPad向け電子書籍アプリが作れるとのことです。

写真をスライドショーとして見せたり、ムービーや音声を埋め込んだりできます。電子マガジンを作るのに向いているようですね。

図2 HTML5で電子書籍アプリを作るソリューション
図2 HTML5で電子書籍アプリを作るソリューション

3. Mega Web Buttons Pack #1 | Codropshttp://tympanus.net/codrops/2011/04/17/mega-web-buttons-pack-1/

アイコン付きのCSSボタンを簡単に作れるソリューションです。42種類のボタンが作れます。

HTMLコードを煩雑にしないためにjQueryを使っていますが、ボタン自体はCSSだけでデザインされています。

図3 簡単に適用できるCSSボタンのセット
図3 簡単に適用できるCSSボタンのセット

4. 25 ECommerce Web Designshttp://slodive.com/inspiration/showcase/ecommerce-web-designs/

ECサイトのデザインショーケースです。部分的にトリミングして掲載されているので、迫力がありますね。

ECサイトはメインのビジュアルの入れ替えが激しいのか、サイトに行ってみるとキャプチャー画像とはもう違っているものが多いようです。

図4 ECサイトのデザインショーケース
図4 ECサイトのデザインショーケース

5. 未来を考えるために、これだけは押さえておきたい海外ソーシャル系サービス50個 | little_shotaro's bloghttp://www.littleshotaro.com/archives/595

ソーシャル系のサービスを大量に紹介しています。ちょっとした解説と関連リンクもついている便利なリストです。

個人的にはこの中では、位置情報系と写真共有のサービスに注目しています。この記事を参考に、いろいろと試してみたいですね。

図5 海外ソーシャル系サービス50個
図5 海外ソーシャル系サービス50個

そのほか、先週の記事の中から、気になるWebサービスに関する記事を3つ紹介します。

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

Create stories using social media - storify.comhttp://storify.com/

Storifyは、最近はやりのキュレーションサービスの一種です。

情報を取捨選択してまとめる行為のことをキュレーションと呼ぶのが最近はやっているようで、そのためのWebサービスをキュレーションサービスと呼びます。TogetterやNAVERまとめのようなサービスといった方がわかりやすいかもしれません。

StorifyもTogetterやNAVERまとめと似たようなツールで、ソーシャルメディアのコンテンツを引用して並べ、自分なりの文脈を持たせた「まとめ」を作ることができます。TwitterやYoutube、Flickrやブログなどから、簡単にコンテンツを取り出すことが可能です。

操作も簡単でデザインも洗練されています。ツイート内にTwitpicやyfrogなどへのリンクがあると、写真がインラインで表示されるのも便利ですね。

作ったまとめをstoryと呼ぶのですが、このstoryを自分のサイトやブログに埋め込むためのコードも用意されています。

storyにはツイートボタンや「いいね!」ボタンも付いているほか、引用された各ツイートに対してリプライ/リツイートができるようになっています。

図6 ソーシャルメディアを引用してまとめページが作れるStorify
図6 ソーシャルメディアを引用してまとめページが作れるStorify

おすすめ記事

記事・ニュース一覧