週刊Webテク通信

2012年2月第1週号 1位は,あまり他で見かけないデザインやインターフェイスのWebサイト,気になるネタは,Facebook,IPOを申請―50億ドル調達を計画

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

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

1. 30 Highly Unusual Web Designshttp://speckyboy.com/2012/02/05/30-highly-unusual-web-designs/

あまり他では見かけない,デザインやインターフェイスのWebサイトのギャラリーです。

  • 横スクロールでコンテンツが展開していくサイト
  • 縦長で1ページ完結のサイト
  • 横並びのコンテンツが開閉するサイト
  • キーボードで操作するサイト

など,いろいろな仕掛けや凝ったデザインで,楽しませてくれるサイトの数々が紹介されています。

23+ Unique One-Page Interface Designs | MediaLootという,独創的なインターフェイスの1ページ完結サイトのギャラリー記事もありました。

図1 変わったWebデザインのサイトギャラリー

図1 変わったWebデザインのサイトギャラリー

2. How to create animated tooltips with CSS3 | Codropshttp://tympanus.net/codrops/2012/02/01/how-to-create-animated-tooltips-with-css3/

アニメーションして出現する,ツールチップのチュートリアル記事です。4種類の動きが紹介されています。

CSSトランジションと「:before」⁠:after」疑似要素を使って実現しており,JavaScriptは使っていません。

図2 アニメーションするツールチップのチュートリアル

図2 アニメーションするツールチップのチュートリアル

3. Free CSS3 Pricing Table - HTML5 CSS3 Pricing Tablehttp://webdesignergeeks.com/tutorials/html-css-tutorials/free-css3-pricing-table/

CSS3を使って価格表をデザインするチュートリアル記事です。サービスプランの比較表をイメージしたもので,ロールオーバーした列が拡大して表示されます。

テーブルではなく,リストとしてコーディングされていますが,このケースの場合はそれもありですね。

図3 価格表をCSS3でデザインするチュートリアル記事

図3 価格表をCSS3でデザインするチュートリアル記事

4. Land-of-web - All about web design ≫ 55 Website Designs With Awesome Pictured Peoplehttp://www.land-of-web.com/inspiration/web-design/55-website-designs-with-awesome-pictured-people.html

人物イラストを使ったWebデザインのギャラリー記事です。サイトの顔であるトップページに,文字通り顔をあしらったサイトが揃っています。

逆効果じゃないかとも思えるチープなイラストもありますが,どっちにしろ印象に残りやすいことは確かなようです。

図4 人物イラストを使ったWebデザインのギャラリー

図4 人物イラストを使ったWebデザインのギャラリー

5. 13 Sketching,Mockup and Wireframing iPad Apps for Designers/Developers | Design Inspirationhttp://designbeep.com/2012/02/03/13-sketchingmockup-and-wireframing-ipad-apps-for-designersdevelopers/

モックアップやワイヤーフレームを作るのに役立つiPadアプリを13個掲載しています。

モックアップ作成に特化したアプリや,スケッチアプリが紹介されています。

図5 モックアップやワイヤーフレーム作成に役立つiPadアプリいろいろ

図5 モックアップやワイヤーフレーム作成に役立つiPadアプリいろいろ

そのほか,先週の記事の中から,気になる記事を3つ紹介します。

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

scriptogr.amhttp://scriptogr.am/

scriptogr.amは,Dropboxを使ってブログが作れるサービスです。

Markdown形式で書いたテキストをDropboxに入れるだけでブログの更新ができるので,場所やデバイスを選ばずにブログを書くことができそうです。

似たようなサービスとして,EvernoteのノートブックをWeb上で公開できるEverWikiというサイトもあります。こちらもDropbox同様にスマートフォン用アプリも充実していますし,画像を貼ることもできます。

ほかにも簡単にブログを作れるサービスは数多く存在しますが,普段利用しているサービスを使って簡単に作れるというのは,面白いアプローチではありますね。

図6 Dropboxを使ってブログが作れるサービス

図6 Dropboxを使ってブログが作れるサービス

今週の気になるWebネタ

Facebook,IPOを申請--50億ドル調達を計画 - CNET Japanhttp://japan.cnet.com/news/business/35013685/

Facebook社が新規株式公開(IPO)を申請したことが,大きなニュースになっています。GoogleのIPO時の19億ドルを大きく超える50億ドルを調達する計画とのことです。

IPO申請書類に添付したマーク・ザッカーバーグCEOの株主への手紙も話題になっています。

「TECH SE7EN」⁠セブンの表記は韓国のシンガーの真似ですよね)の記事は,⁠はてなブックマーク」やTwitterで大いに広まりました。そのあと,日本経済新聞にも日本語訳と英文の全文が掲載されました。

いろいろと名言のちりばめられた文章なのですが,個人的には「Done is better than perfect」が気に入りました。⁠素早い実行は完璧に勝る」⁠日本経済新聞)⁠⁠完璧を目指すよりまず終わらせろ」⁠TECH SE7EN)と2つの記事で訳し方が違いますが,後者の方がいいと思います。Macintoshの開発にあたって,スティーブ・ジョブズが,⁠出荷するのが真のアーティスト」と言ったというのも,ちょっと似ていますね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入