週刊Webテク通信

2010年9月第2週号 1位は,永久保存版!?携帯コーディング,これだけ読めばすぐできる!,気になるネタは,Google Instantローンチ―タイプするにつれて次々に検索結果が表示される

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

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

1. 永久保存版!?携帯コーディング,これだけ読めばすぐできる!(テンプレートのおまけつき) | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話http://design.kayac.com/topics/2010/09/mobile-template.php

携帯電話用ページのコーディングのための,押さえておきたい基本の知識がまとめられています。

docomo,au,softbankの3キャリア向けのコンテンツを作るための,実践的なノウハウばかりです。

携帯コーディングの専門家には当たり前のことが多いのかもしれませんが,PC向けサイト制作しかやっていない人には,新鮮に感じられることが多いんじゃないでしょうか。

iPhoneなどのスマートフォンへの対応が海外ではトレンドのようですが,日本ではまだまだ携帯向けの需要が多いはず。携帯向けの案件があったときのために,このページをブックマークした人が多いのか,はてなブックマーク数が2000を超えた人気エントリーとなっています。

図1 携帯コーディングの実践的ノウハウ集

図1 携帯コーディングの実践的ノウハウ集

2. 12 Common CSS Mistakes Web Developers Makehttp://sixrevisions.com/css/12-common-css-mistakes-web-developers-make/

CSSコーディングでのありがちなミスをまとめた記事です。

  1. 正しいCSSリセットが使われていない
  2. 必要以上のセレクタ
  3. ショートハンドプロパティ(省略,一括表記)を使わない
  4. 値が「0」の場合にも「0px」と単位を付けて表記する
  5. 16進数のカラーコード(例:#FF0000)ではなくカラーネーム(例:red)を使う
  6. 冗長なセレクタ
  7. 冗長なプロパティ
  8. 代替のフォントを指定しない
  9. 不要な空白
  10. CSSをルール立てて整理しない(あとからの編集がしにくいコーディング)
  11. すべてを1つのCSSファイルだけでまかなおうとする
  12. 印刷用スタイルシートを用意しない

といった内容です。

守らなくても間違いではないだろうという項目も多いですが,一応チェックしておきたい内容です。

図2 ありがちなCSSのミス12選

図2 ありがちなCSSのミス12選

3. Showcase of Interesting Navigation Designs - Smashing Magazinehttp://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/

面白いナビゲーションデザインのショーケースです。驚くようなナビゲーションではなく,わかりやすくちょっとした動きのあるものが多いですね。

ボタン操作でスクロールするものやカルーセルが,あいかわらずトレンドのようです。

図3 面白いナビゲーションのショーケース

図3 面白いナビゲーションのショーケース

4. Commit Lab | 女子のための情報サイトデザイン21+4http://commitlab.com/20100906/female_design2101.html

日本の女性向け情報サイトのデザインショーケースです。

ツイッターで情報を募集した結果をまとめたそうです。コメント欄に寄せられた情報も追加されていますね。

女性向けといえばピンクが連想されますが,意外と落ち着いた色使いが多いようです。

図4 女性向けサイトデザインのショーケース

図4 女性向けサイトデザインのショーケース

5. 30 CSS and Javascript Tabs Solutions :Speckyboy Design Magazinehttp://speckyboy.com/2010/09/08/30-css-and-javascript-tabs-solutions/

CSSとJavaScriptでタブナビゲーションを実現するソリューションを多数紹介しています。ほとんどのものがjQueryを利用しているようです。

アニメーション効果のあるものや,スクロールするものなど,いろんな種類のものがありますね。

図5 CSSとJavaScriptでタブを作るソリューション

図5 CSSとJavaScriptでタブを作るソリューション

そのほか先週の記事から,気になるニュース記事を紹介します。

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

Evernote Site Memory | Evernote Corporationhttp://www.evernote.com/about/developer/sitememory/

ブログ記事などをEvernoteに簡単に保存するための,Site Memoryというサービスがスタートしました。

自分のブログ上にSite Memoryボタンを設置すると,本文部分など指定した範囲だけをEvernoteにクリッピングできるようになります。

ボタンのデザインは選ぶことができますが,日本では「クリップ」と文字の入ったボタンが多く使われそうです。ゾウのアイコンだけのボタンもありました。

gihyo.jpの記事にも,さっそく「ツイートする」ボタンの横に「クリップ」ボタンが登場していますね。

クリップする範囲を「<div id="content">…</div>」の中にしたいときは,⁠Content to clip」という欄に「content」と入れればいいようです。入れなくても自動でなんとかしてくれるといった記述もあります。

Site Memoryボタンを作るためのページは英語ですが,ユーザーが目にする画面はちゃんと日本語になっています。ところが,Evernoteにログインしていない人に対して出るメッセージ部分は英語のままなのが残念です。

Evernoteを知らない人がこのボタンを押すこともあると思うので,そこで日本語のメッセージを出してユーザー獲得につなげたいところですよね。

以下,Site Memoryについて解説したページです。上はEvernote公式のもの(英語)⁠下は日本語の記事です。

図6 Evernoteへのクリップボタンを作れるSite Memory

図6 Evernoteへのクリップボタンを作れるSite Memory

今週の気になるWebネタ

画像

Google Instantローンチ―タイプするにつれて次々に検索結果が表示されるhttp://jp.techcrunch.com/archives/20100908google-instant-its-search-before-you-type/

1文字入力するごとに検索結果(検索語候補じゃなくキーワード検索の結果)が表示される,Google Instantがスタートしました。

今のところ,対応ブラウザはChromeかSafariのようです。日本語でも一文字ごとに検索結果が表示されますね。

Google InstantはGoogle検索のオプション機能の一つで,通常ONになっているという扱いのようです。OFFにすることもできます。

1文字ごとに検索結果が素早く切り替わっていく様は,新感覚です。大量の検索結果を見ることになるので,検索しようと思っていたものとは別のキーワードに反応するケースも増えそうです。

数文字打った時点で上位に表示させるためのSEOが流行るかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入