週刊Webテク通信

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

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

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

今週の気になるWebネタ

週刊ダイヤモンド1月23日|バックナンバー|週刊ダイヤモンドhttp://dw.diamond.ne.jp/contents/2010/0123/index.html

「週刊ダイヤモンド」1月18日発売の1月23日号で,⁠2010年ツイッターの旅 140字,1億人の「つぶやき」革命』という特集が掲載され,ツイッターユーザーを中心に話題になりました。

表紙に並んだ1500人のユーザーアイコンが圧巻ですが,これは編集部が開設したツイッターアカウントで募集をかけたそうです。そのへんの経緯が紹介されている記事が,一番ツイッターの面白さを伝えていたように思います。

ハッシュタグに関するアドバイスが寄せられたり,フォロワーの人が善意で表紙掲載募集アイコンを100件ごと並べるサイトを作ってくれたりと,ツイッターの輪でこの特集ができていく様は臨場感がありました。

企業でツイッターを利用したいという場合にも,この記事はヒントになると思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入