週刊Webテク通信
2009年9月第3週号 1位は,ブログのトップページで記事をどう見せるか/気になるネタは,Google,記事の“高速閲覧”を可能にする「Fast Flip」立ち上げ
2009年9月24日
Webデザイン, Adobe AIR, CSS, JavaScript, Twitter
デザイン, スクリーンショット, 2009, HootSuite, Twitter, Flip
ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2009年9月14日~9月20日の間に見つけた記事のベスト5です。
今週のWebテク記事ベスト5
1. How to Display Your Content on a Blog’s Front Page | Webdesigner Depot http://www.webdesignerdepot.com/2009/09/how-to-display-your-content-on-a-blogs-front-page/
ブログのトップページに,記事への誘導をどのように入れるかについてまとめたものです。
- 記事全文を載せる
- 記事の一部を載せる
- 雑誌スタイル(ただ時系列に記事を並べるのではなく,カテゴリ別などに分けて記事の一部を載せる)
といった見せ方について,それぞれの特長を解説しています。実際の事例もたくさん紹介されているので,それを見るだけでも参考になるでしょう。
トップページデザインのためのWordPressチュートリアルのリンク集もあります。
2. CSS: Design Out Of The Box http://www.webdesignerwall.com/tutorials/css-design-out-of-the-box/
段組のカラムからはみ出した要素を使ったWebデザインを,作例とともに紹介しています。
全てがカラムの中にきっちり収まっていると面白みがないということで,わざと画像をはみ出して配置したり,背景にかっちりしていない画像を配置したりといった工夫が有効のようです。
CSSを使って,背景画像に重なるように文字を配置したり,カラムからはみ出して画像を配置するテクニックも紹介されています。
3. 10 Amazing Tools for Sharing Visual Inspiration through Screenshots | Inspired Magazine http://www.inspiredm.com/2009/09/14/10-amazing-tools-for-sharing-visual-inspiration-through-screenshots/
Webサイトのスクリーンショットを共有するサイトやツールを紹介しています。スクリーンショットに特化した画像共有サイトや専用アプリケーションです。
デザインの参考になると思ったサイトのスクリーンショットを整理しておくのに便利ですし,誰かの登録したスクリーンショットを見てインスピレーションを得るのにも使えるでしょう。
4. 150 Free PSD Buttons For Every Day Use | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net http://www.graphicmania.net/150-free-psd-buttons-for-every-day-use/
フリーのボタン素材のPSDファイルを多数紹介しています。光沢のあるWeb2.0デザイン風のボタンが多いですね。
5. 22 Awesome Adobe AIR Applications for Designers http://sixrevisions.com/tools/22-awesome-adobe-air-applications-for-designers/
デザイナーのための便利なAdobe AIRアプリケーションが紹介されています。
画像編集ソフト,マインドマップ作成ソフトのような大物から,画面上でサイズを測るツールやスクリーンショットを撮るツールなどのちょっとしたお役立ちツールまで,いろんなものがありますね。
以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。
そのほか先週の記事から,とても役に立ちそうなまとめ記事を紹介します。
- Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
IE6のバグ対策がまとめられています。 - JavaScript Framework Matrix - Overview with functions and examples
JavaScriptのフレームワークの比較表です。それぞれの記述法などがまとめられています。 - 30 CSS Best Practices for Beginners - Nettuts+
初心者のために,段階を踏んでCSSをレクチャーした記事です。
先週の気になるWebサービス
Welcome to HootSuite - The Professional Twitter Clienthttp://hootsuite.com/
HootSuiteは,Twitterをビジネスで利用する企業やヘビーユーザー向けのWebサービスです。
複数のTwitterアカウントを管理できるだけでなく,複数のユーザーを設定して誰がどのアカウントで投稿できるかを設定することもできます。URLを含むつぶやきに関しては,クリック数の統計機能が付いているようです。
TweetDeckという有名なTwitterクライアントと似たような感じで,複数のカラムでタイムラインを見ることができます。さらにタブ分けもできるので,フォロー数の多い人や,いろんなキーワードでの検索結果を追いかけている人には特に便利でしょう。
時間を指定してのつぶやき機能もあるのですが,みんながこの機能を使い出したらTwitterのリアルタイム性の面白さが薄れるような気もしますね。
以下のブログ記事を参考にさせていただきました。
- [N] ツイッターのウェブクライアント「HootSuite」が高機能すぎてヤバい!!
- スロースターターハウス5: TweetDeck から HootSuite に乗り換えた6つの理由
- ウェブベースのTwitterクライアントはHootSuiteが使いやすい。 | Welcome to BOL2
今週の気になるWebネタ

New York Timesほか39メディアと提携:Google,記事の“高速閲覧”を可能にする「Fast Flip」立ち上げ - ITmedia エンタープライズ http://www.itmedia.co.jp/enterprise/articles/0909/15/news030.html
Google Fast Flipは,本のページをパラパラめくるようにニュースサイトの記事をブラウズできるサイトです。あらかじめ記事ページを画像として用意しておくことにより,高速な閲覧を可能にしています。
用意された画像は文字を読むには十分なサイズなのですが,記事の1ページ目の決まったサイズしかキャプチャーされていません。画像はあくまでもサムネイル的位置づけで,全文を読むには元記事のページを見て欲しいということですね。
米国のNew York Times,Washington PostやNewsweek,英国のBBCなどがGoogleと提携して記事を提供しているそうです。日本の新聞社サイトは記事単独ページへのリンクを嫌っているので,日本版Fast FlipのためにGoogleが新聞社と提携するのは難しいんでしょうね。
週刊Webテク通信
- 2009年9月第3週号 1位は,ブログのトップページで記事をどう見せるか/気になるネタは,Google,記事の“高速閲覧”を可能にする「Fast Flip」立ち上げ
- 2009年9月第2週号 1位は,CSS3で簡単に実現できるようになった代表的なCSSテクニック/気になるネタは,Blogger の Navbar に「共有」ボタンが登場
- 2009年9月第1週号 1位は,効果的なWebデザインのための重要なテクニックと優れた事例/気になるネタは,iPhoneゲームBaseball SluggerがTwitterに対応
- 2009年8月第4週号 1位は,ウェブデザインのユーザーインターフェースに使えるサイトまとめ/気になるネタは,Googleマップの世界の地名を日本語で
- 2010年3月第2週号 1位は,CSSだけで実現するフキダシ作成テクニック,気になるネタは,Evernoteの日本語化や今後の展望について聞いてきた
- 2010年1月第4週号 1位は,CSSの総合的な情報サイト「CSS HappyLife ZERO」,気になるネタは,週刊ダイヤモンドでツイッター特集
- 2009年12月第3週号 1位は,CSS3を使うことで,より素晴らしく,より短時間にデザインされた実践的テクニック,気になるネタは,バイドゥ,日本語入力システム「BaiduType」公開
- 2009年12月第1週号 1位は,RGBAカラーの使い方,気になるネタは,思いどおりの日本語入力 - Google 日本語入力
- 2009年11月第1週号 1位は,今どきのCSSレイアウトの特徴,気になるネタは,日本版Twitter,「つぶやき」から「ツイート」に


