週刊Webテク通信

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

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

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

1. A Graphic Design Primer, Part 2: The Principles of Design - Noupe Design Bloghttp://www.noupe.com/design/a-graphic-design-primer-part-2-the-principles-of-design.html/

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

  • バランス
  • 比率
  • 優先順位
  • 対比
  • リズムと流れ
  • 調和とまとまり

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

図1 Webデザインのサンプルとともにデザインの原則をレクチャー

図1 Webデザインのサンプルとともにデザインの原則をレクチャー

2. 50 Beautifully Designed Single Page Websites ≪ Artatm - Creative Art Magazinehttp://artatm.com/2011/06/50-beautifully-designed-single-page-websites//

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

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

図2 単ページ完結Webサイトのショーケース

図2 単ページ完結Webサイトのショーケース

3. 20 Awesome Examples of Retro And Vintage HTML5 Websiteshttp://smashingwall.com/inspiration/retro-and-vintage-html5-websites//

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

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

図3 レトロ&ビンテージデザインのHTML5サイトのショーケース

図3 レトロ&ビンテージデザインのHTML5サイトのショーケース

4. 80+ Excellent Examples of Creative Contact And Web Form Designs | Inspiration | instantShifthttp://www.instantshift.com/2011/06/20/80-excellent-examples-of-creative-contact-and-web-form-designs//

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

図4 フォームデザインのショーケース

図4 フォームデザインのショーケース

5. Redesigning a Site For Mobile: What's Involved?http://www.elated.com/articles/redesigning-a-site-for-mobile-whats-involved//

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

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

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

図5 サイトをモバイル向けにデザインし直す方法

図5 サイトをモバイル向けにデザインし直す方法

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

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

FileStork - Request files from anyone using Dropboxhttps://filestork.net/

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

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

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

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

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

図6 誰からでもDropboxでファイルを受け取れるサービス

図6 誰からでもDropboxでファイルを受け取れるサービス

今週の気になるWebネタ

AKB48推し面メーカー|あなたがつくるデジタルAKB48http://www.icenomi.com/oshimen/index.html

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

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

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入