週刊Webテク通信

2010年9月第3週号 1位は,Webサイトプロジェクトの惨事を回避するための20の質問,気になるネタは,iPod nano を腕時計化するアイテムが続々登場

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

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

1. 20 Questions to Know for Avoiding Website Project Disastershttp://sixrevisions.com/project-management/20-questions-to-know-for-avoiding-website-project-disasters/

Webサイトプロジェクトの惨事を回避するために知っておくべき,クライアントへの20の質問です。

  1. あなた(御社)の組織や仕事を一文で説明するとしたら?
  2. あなた(御社)の組織や仕事を3つの単語で説明するとしたら?
  3. 独自性は何ですか?
  4. サイトの主な訪問者はどのような人ですか?
  5. 訪問者が訪れるたびに平均どのくらいの時間をサイト上で費やしていると思いますか?
  6. サイトの一番の目的は何ですか?二番目の目的は何ですか?
  7. 長期的なリピーターと一度だけ来る訪問者とどちらを優先しますか?
  8. 訪問者がサイトで2分を過ごした場合,どのような3点を知ってもらいたいですか(優先度順に)⁠
  9. 主なライバルは誰(どこ)ですか?
  10. 好きなサイトは?
  11. 嫌いなサイトは?
  12. サイトに含めたいと思う具体的な機能はありますか?
  13. 普段Webサイトを使っていて,もっともイライラさせられることは何ですか?
  14. 避けるべき色や機能はありますか?
  15. あなた(御社)自身でサイトのコンテンツを更新する必要がありますか?
  16. このプロジェクトをいつまで続けますか?
  17. ユーザー登録やデータの保存が必要ですか?
  18. 誰がこのプロジェクトの主要人物ですか?
  19. お問い合わせのフォームが必要ですか?
  20. 何か他にわたし(弊社)に伝えておきたいことはありますか?

といった内容でした。

クライアントへの質問シートを用意しておくといいという話はよく聞きますし,これを参考に独自の質問シートを作り上げておくのもいいでしょう。

図1 Webサイトプロジェクトの惨事を回避するための20の質問

図1 Webサイトプロジェクトの惨事を回避するための20の質問

2. Transparent Borders with background-clip | CSS-Trickshttp://css-tricks.com/transparent-borders-with-background-clip/

CSS3のbackground-clipプロパティを使ってボーダーを半透明にするテクニックを紹介しています。

ボーダー部分にRGBAカラーで透明度を指定しても,下のコンテンツが透けません。その領域の背景色がボーダー部分にも存在しているからです。

background-clipプロパティを使って,背景が表示される範囲をボーダーより内側に設定することで,ボーダーから下のコンテンツが透けるようになります。

関連情報として,背景画像の基準点を変更するbackground-originプロパティについても解説しています。

図2 background-clipを使ってボーダーを半透明に

図2 background-clipを使ってボーダーを半透明に

3. 100+ Excellent Examples of Well Designed Login Forms ― tripwire magazinehttp://www.tripwiremagazine.com/2010/09/100-excellent-examples-of-well-designed-login-forms-2.html

デザインがすばらしいログインフォームのギャラリーです。

実際に使われているログインフォームや,ログインフォームを作るチュートリアル,ほかのギャラリーなど色々なところから集められているようです。

どういうソースになっているんだろうと思ってリンク先にいってみても,ただの画像しか載ってないケースが多いのが残念です。あくまでもデザインを見て参考にするギャラリーと考えた方がいいでしょう。

図3 100個以上のすばらしいログインフォームのギャラリー

図3 100個以上のすばらしいログインフォームのギャラリー

4. Minimalism Design Pack ? 42 Beautiful Ads and 27 Creative Websites | Top Design Magazine - Web Design and Digital Contenthttp://www.topdesignmag.com/minimalism-design-pack-42-beautiful-ads-and-27-creative-websites/

ミニマルなデザインの広告とWebサイトのギャラリーです。広告42点とWebサイト27点が紹介されています。

Webサイトは画像をクリックして拡大表示されたときにURLが表示されますが,リンクはされていませんでした。

図4 ミニマルデザインのギャラリー

図4 ミニマルデザインのギャラリー

5. Amazing Collection Of Illustrator and Photoshop Tutorials | designrfix.comhttp://designrfix.com/resources/amazing-collection-illustrator-photoshop-tutorials

IllustratorとPhotoshopのチュートリアル記事が大量に紹介されています。

図5 IllustratorとPhotoshopのチュートリアル記事いろいろ

図5 IllustratorとPhotoshopのチュートリアル記事いろいろ

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

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

ProCSSor - Advanced CSS Prettifierhttp://procssor.com/

CSSのコードを整形してくれるWebサービスです。インデントの桁数の指定や,プロパティを一行で書くか複数行にするかなど,オプションが豊富です。

CSSはローカルのファイルを選ぶか,URLを指定してから処理をさせます。

面白いのは,セレクタ部分とプロパティ&値部分とを2段組のように分けてしまう機能です。全体がきれいに揃っていて,気持ちがいいです。

たとえば,JavaScriptのフレームワークに必要なCSSを自分のCSSに追加するときに,表記ルールを自分の書き方に合わせるといった場合に有効かもしれません。

CSSをProcess(処理)するということで,ProcessorをもじってProCSSorというネーミングがいいですね。

図6 CSSのコードを整形するサービスProCSSor

図6 CSSのコードを整形するサービスProCSSor

今週の気になるWebネタ

iPod nano を腕時計化するアイテムが続々登場

新しいiPod nanoを腕時計化するアイテムが続々登場しています。今回のiPodにはクリップが付いているので,リストバンドのようなものに挟むだけで,簡単に腕時計化はできるようですね。

最近電車の中でiPhoneを使っている人ばかりが目に付きますが,そのうちiPod腕時計の人ばかりなんてことになるのかも…。

冷静に考えれば,イヤホンをつなぐなら腕より洋服に付けた方がコードが邪魔にならないですよね。でも,腕時計型のアイテムに未来っぽさやロマンを感じてしまう人も多いのでしょう。

腕時計型アイテムの未来といえば,漫画やSF映画でおなじみの腕時計型テレビ電話でしょう。テレビ電話機能は,iPhoneやiPod TouchのFaceTimeで実現しています。iPod nanoクラスの大きさでできるようになる日も,そう遠くはないでしょう。

そう思ってイラストを描いたのですが,同じようなことを書いている記事を見つけてしまいました。iPod nanoの腕時計化と同様に,みんな考えること(=男のロマン?)は一緒のようです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入