週刊Webテク通信

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

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

おすすめ記事

記事・ニュース一覧