週刊Webテク通信

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

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

ネットで見かけた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

今週の気になるWebネタ

iPhone/iPadで使える「ニンテンドー ワイヤレスキーボード」は安くて素晴らしいBluetoothキーボードだった! | トブ iPhonehttp://applembp.blogspot.com/2011/04/iphoneipad-bluetooth.html

ニンテンドーDS用「バトル&ゲット! ポケモンタイピングDS」に付属するワイヤレスキーボードが,iPhoneやiPad用にも使えてなかなかいいと話題になっています。

Bluetoothキーボードなので,iPhone,iPadやAndroid端末,MacやPCにも使えるようです。ちなみに,ニンテンドーDS自体にBluetoothは付いてないため,ゲームカートリッジ内にBluetooth通信機能が内蔵されているとのこと。

そんなゲームカートリッジとセットなのに5,800円という安さ,JIS配列だけどカナの刻印がなくてすっきりしている,白くてシンプルなデザインなど,たしかに魅力的です。

ネットでの反響を見ていると,キーボード目当てに買っている人も結構いるようで,ニンテンドーDSは持ってないけど買おうかどうか迷っている人も見うけられました。

この人気に,任天堂もキーボードだけの販売も考えているかもしれませんね。そのうちアップルストアで売られたりして。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入