2011年6月第4週号　1位は、デザインの原則をWebデザインの実例とともに解説、気になるネタは、あなたがつくるデジタルAKB48「AKB48推し面メーカー」

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年6月20日～2011年6月26日の間に見つけた記事のベスト5です。

デザインの原則について、豊富なWebデザインの実例とともに解説した記事です。

といった項目について、説明とサンプルが紹介されています。

単ページ完結のWebサイトのショーケースです。ただ1ページだけをスクロールで見せるページもあれば、非同期の読み込みを使って豊富なコンテンツを表示するページもあります。

シンプルながらもアイデアが光るページも多く、いろいろと参考になります。

レトロ＆ビンテージデザインのHTML5サイトを多数紹介しています。

レトロ感のあるデザインとHTML5＆CSS3の使用は、どちらも海外でのWebデザインの流行のようです。

フォームデザインのショーケースです。Twitter、Facebook、MobileMeなど有名サイトのログイン画面やコンタクトフォームなどを集めています。

既存のサイトをモバイル向け（スマートフォン向け）にリ・デザインする方法を解説した記事です。

具体的なコーディングなど技術的な解説はありませんし、あっさりした内容です。

コンテンツを取捨選択し、モバイル向けに必要なものだけを掲載するのが大切としています。

そのほか、先週の記事の中から、特に興味深かったものを3つ紹介します。

Nizo for iPhone
スクロールするとパーツが寄ってきます。
pxt | 考察：Appleはスマホサイトを作らない。
ダブルタップで情報を見ていけるようにブロック化されているということですね。
Webデザイナーの皆さん、iPadでコーディングができちゃいます。iPad用高機能エディタ「Textastic⁠」⁠ | ryodesignblog
iPadでHTMLやCSSを編集するのに便利そうなエディタの紹介です。

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

前回につづきDropbox関連のWebサービスです。FileStorkを使うと、Dropboxを利用して人からデータを受け取ることができるようになります。

FileStorkにDropboxへのアクセス許可をした後、相手のメールアドレスやファイルを保存するフォルダなどの設定をして「リクエスト」を作成します。その際に受け取りを許可するファイル形式やパスワードを指定することもできます。

「リクエスト」を作成すると相手にメールが送られます。受け取った相手はメールの「Upload」のリンクからアップロード用のページに移動し、ファイルをアップロードします。

1つのリクエストは1回限りのやりとりが前提のようで、ファイルをアップロード完了した後、再度アップロード用ページに行こうとしても「not found」になります。ファイルを受け取る側が先にアクションを起こすファイル転送サービスといったところでしょうか。

なお、Dropboxユーザー同士なら、共有フォルダを設定すると常にファイルのやりとりができるようになります。また、「⁠パブリックリンク」「⁠共有リンク」を使って、自分のDropbox上のファイルを人にダウンロードしてもらうことも可能です。Dropbox便利ですね。

グリコ「アイスの実」のCMで、AKB48の新メンバーとして登場した「江口愛美⁠」⁠。実はメンバーの顔のパーツを合成して作ったCGだったというネタばらしとともに「AKB48推し面メーカー」がネットで公開されました。

これは、AKB48のメンバーから髪型＆輪郭、目、鼻、口の各パーツを選んで、自分好みのメンバーを作成しようというもの。やってみると組み合わせによってはバランスが難しいですが、なかなかはまります。

完成した「推し面」には、候補から選んだ名前を付けます。作った「推し面」をTwitterとFacebookで「推す」ことができるのもイマ風ですね。実際わたしもTwitterに流れていた誰かの「推し面」を見てこのサイトを知りました。

アーカイブや投票で盛り上げる仕掛けがあったり、「⁠推し面」画像をプロフィール画像形式か壁紙形式でダウンロードできるなど、見事に作り込まれています。

なお、パーツの組み合わせを「江口愛美」と同じにすると、江口愛美の登場する特別ムービーが見られ、壁紙がダウンロードできるようになっていました。うーん、よくできてるなぁ。