週刊Webテク通信

2010年1月第4週号1位は、CSSの総合的な情報サイト「CSS HappyLife ZERO」、気になるネタは、週刊ダイヤモンドでツイッター特集

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

1. CSS HappyLife ZEROhttp://css-happylifezero.com/

人気ブログ「CSS HappyLife」の作者・平澤さんが運営するCSSの総合的な情報サイトです。

CSSの基本からのレクチャーやプロパティのリファレンス、セレクタ一覧などのコーナーが用意されています。現時点でもかなりの情報量なのですが、今後も随時情報が追加されていくとのことです。

このサイト自体もCSSを使いこなしたデザインとなっていて、ソースを見ると参考になる箇所が多そうです。CSS3のマルチカラムも使われていますね。

広告を貼りすぎて使いにくいサイトになるより潔いと、カンパを募集している試みも面白いです。Amazonギフト券、口座振込、PayPalによる方法が案内されています。

図1 CSSの総合的な情報サイト「CSS HappyLife」
図1 CSSの総合的な情報サイト「CSS HappyLife」

2. 15 Resources for Easily Creating Web Forms | Vandelay Design Bloghttp://vandelaydesign.com/blog/tools/web-forms/

問い合わせ、レジストレーション、決済などで使用するフォームをオンラインで作って公開できるサービスを多数紹介しています。

有料のものが中心ですが、プランによって料金が分かれていて、無料のプランもあるというパターンが多いようですね。

日本ではこの手のサービスはあまりないなと思っていたのですが、調べてみると有料のASPサービス中心にいろいろあるようでした。

無料で使えるものとしては、まぐまぐ!かんたんフォームや、Googleドキュメントのスプレッドシートにあるフォーム作成機能が有名ですね。

図2 フォームをオンラインで作って公開できるサービスいろいろ
図2 フォームをオンラインで作って公開できるサービスいろいろ

3. Great Free Software for Web Designers « Boagworldhttp://boagworld.com/reviews/free-software

Webデザイナー向けのフリーソフトを紹介した記事です。オンラインサービスをのぞけば、基本的にMac向けのソフトが紹介されています。

プロジェクトのプランニングから画像編集、コーディング、FTP、デバッグとテスト、請求書作成までの流れに沿って、それぞれのシーンで使えるフリーソフトをいくつか取り上げています。

図3 Webデザイナー向けのフリーソフトをシーンにあわせて紹介
図3 Webデザイナー向けのフリーソフトをシーンにあわせて紹介

4. ブログにSNSへの共有ボタンを加える方法まとめ - nulldesignhttp://nulldesign.jp/blog/?p=166

最近日本のブログでもよく見かけるようになった、ソーシャルメディアへの共有ボタンのコードをサービスごとに掲載しています。

はてなブックマーク、delicious、Tumblr、Twitterなどで使えるものが紹介されています。

わたしも以前調べたことがあるのですが、ソーシャルメディアのサービス自体が用意している、公式のもの以外にもいくつかのバリエーションがあったり、公式のものがなかったりと、これが正解というコードがあるわけでもなさそうでした。

この記事ではPosterousへのリンクはmailtoになっていますが、Posterous公式のブックマークレットのコードをそのままリンクに入れるという方法もあります。

図4 ソーシャルメディアへの共有ボタンのコードいろいろ
図4 ソーシャルメディアへの共有ボタンのコードいろいろ

5. 11 Colorful Website Design | Orphicpixelhttp://www.orphicpixel.com/2010/01/16/11-colorful-website-design/

カラフルなWebデザインのギャラリーです。派手な色や多くの色を使いながらも、うまくバランスの取れているサイトばかりですね。

図5 カラフルなWebデザインのギャラリー
図5 カラフルなWebデザインのギャラリー

そのほか先週の記事から、jQueryのプラグインを紹介したエントリーを3つ紹介します。

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

Wireframe Software - Free website wireframe software by Gliffyhttp://www.gliffy.com/wireframe-software/

Gliffyというフローチャートやダイヤグラムなどを作図するサービスに、ワイヤーフレーム向けの機能強化がされたようです。

使える素材ライブラリにユーザーインターフェイスという項目が加わり、フォームの要素や画像ボックス、グラフ、地図のダミーとして使えるパーツなどが用意されています。

従来のダイヤグラム向けの素材も使えるので、パーツの数はかなり豊富なようです。ほかのワイヤーフレーム作成サービスにはないことが多い、画像をアップロードして使える機能もあります。ロゴなどを画像で扱えるので便利ですね。

作ったワイヤーフレームを人と共有したり、グループで作業したりできるようです。書き出せる形式はSVG、PNG、JPEGでした。

Basicプランは無料で使えるのですが、30日間のお試し用プランのようです。1ユーザーで月$5と安いですが、基本的には有料サービスのようです。

図6 ワイヤーフレームを作るのにも使えるようになったGliffy
図6 ワイヤーフレームを作るのにも使えるようになったGliffy

おすすめ記事

記事・ニュース一覧