週刊Webテク通信

2012年5月第4週号 1位は，日本のWebデザインはなぜ2003年風なのか，気になるネタは，楽天，Pinterestに出資・提携 国内展開に協力

Webテク, Webデザイン, Web広告, レスポンシブWebデザイン, CSS, SASS, LESS, ソーシャルメディア

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

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

1. Japanese Web Design: Why You So 2003?http://www.tofugu.com/2012/05/15/japanese-web-design-why-you-so-2003/

「日本のWebデザインはなぜ2003年風なのか」について考察した記事です。

楽天，ニコニコ動画，Gigazineを例に挙げ，なぜ日本のWebサイトの多くは2003年くらいの技術・デザインなのかを考えています。

特徴として挙げられているのが以下の項目です。

  • たくさんの文字を詰め込んでいる
  • 画像が小さい
  • 3段組（3カラム）が一般的
  • ホワイトスペースが少ない
  • リンクテキストが青
  • カオス

そして，以下のようなことが理由ではないかと書かれています。

  • 携帯電話によるネット閲覧が古くから普及していたため，細いカラム，テキスト中心，小さい画像が一般的となったから
  • コンピュータの買い換えがあまり進まず，IE6を無視できないため

わたしも考えてみたのですが，Yahoo! JAPANの影響力が大きいというのも理由のひとつなんじゃないかと思いますね。

最後は，日本のWebデザインにもすばらしいものはたくさんあるということを紹介するため，ユニクロなどいくつかのサイトが掲載されています。

この記事，「⁠日本のWEBデザイン糞すぎワロタwなんで2003年ぽいんだよwww」といった，あおり気味の意訳タイトルが付けられて，2ちゃんねる界隈で話題となっていました。

図1　日本のWebデザインはなぜ2003年風なのか

図1　日本のWebデザインはなぜ2003年風なのか

2. 5 Useful CSS Tricks for Responsive Designhttp://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

レスポンシブWebデザインのための，CSSテクニックが5つ紹介されています。

動画や画像を可変サイズで配置する方法や，マージンやパディングを可変にすることで柔軟なレイアウトを実現するテクニックなどが掲載されています。

画像サイズの可変に関しては，以下の記事も参考になります。

図2　レスポンシブWebデザインのためのCSSテクニック集

図2　レスポンシブWebデザインのためのCSSテクニック集

3. 20 Excellent 3D Buttons With Pure CSS3 | CollegeGFXhttp://collegegfx.com/20-excellent-3d-buttons-with-pure-css3/

CSSだけで実装した立体ボタンを各種紹介しています。

ボタンの一部だけがへこむもの，押されたときに奥にめり込んでいるように見えるものや，CSSだけでアニメーションするものなど，バラエティ豊かなラインナップとなっています。

図3　CSSだけで実装した立体ボタンいろいろ

図3　CSSだけで実装した立体ボタンいろいろ

4. 23 Essential iPad Apps for Web Designers and Developershttp://www.awwwards.com/23-essential-ipad-apps-for-web-designers-and-developers.html

Webデザイナーやデベロッパーのための，iPadアプリ集です。

描画，画像編集，モックアップ作成，カラーパレット作成，コードエディターなどなど，iPadで一通りの作業ができてしまいそうな気がしてきます。

図4　WebデザイナーやデベロッパーのためのiPadアプリまとめ

図4　WebデザイナーやデベロッパーのためのiPadアプリまとめ

5. SASS vs. LESS | CSS-Trickshttp://css-tricks.com/sass-vs-less/

CSSメタ言語のSASSとLESSを比較した記事です。最初に結論が書いてありますが，この記事ではSASSの方がおすすめとしています。

なお，CSSメタ言語とはCSSを拡張したもので，色や値の指定に計算式が使えたり，複数個所で同じ記述を使いたい場合は変数のように定義できたりと，効率的かつ高度にCSSの記述ができるものです。

SASSはCompassというフレームワークが使えるところも魅力とのことです。Compassについては以下の記事が参考になります。

図5　SASS対LESS

図5　SASS対LESS

そのほか，先週の記事の中から，Google関連の話題を紹介します。

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

Interaction Design In The Cloud | Smashing UX Designhttp://uxdesign.smashingmagazine.com/2012/05/10/interaction-design-in-the-cloud/

今回は，実際に操作することが可能なプロトタイプやワイヤーフレームを，クラウド上でデザインできるWebサービスを集めた記事を紹介します。

掲載されているのは以下のツールです。

プロトタイプ作成ツール
  • InVision
  • FieldTest
  • ClickDummy
ワイヤーフレーム作成ツール
  • Balsamiq
  • Mockingbird
  • Mockup Builder

いずれも簡単な操作で，メニューを選んだりページ遷移したりといった，インタラクションのあるプロトタイプ／ワイヤーフレームを作ることが可能です。

作成したものは共有してブラウザ上で見てもらえるのも，Webサービスならではの利点ですね。

この記事では，白黒のパーツを組み合わせて作るものをワイヤーフレーム，自分で作ったグラフィックを取り込むなど，最終的なサイトに近いイメージで作れるものをプロトタイプと読んで区別しています。

図6　プロトタイプやワイヤーフレームの作成ツールを紹介

図6　プロトタイプやワイヤーフレームの作成ツールを紹介

今週の気になるWebネタ

楽天，Pinterestに出資・提携 国内展開に協力 - ITmedia ニュース

ソーシャル雑誌アプリ「Flipboard」に日本語版 「日本の出版社と協力したい」 - ITmedia ニュース

楽天がPinterestに出資しました。国内展開を支援するそうで，当然サイトの日本語化も進めるんでしょう。Pinは「ピン⁠」⁠，RePinは「リピン」とカタカナになるんでしょうか。

Pinterestは画像によるソーシャルメディアということで，言葉の壁をあまり感じずに海外の人と交流できるところも面白さのひとつです。日本の人たちばっかり集まって交流してしまう「日本語の壁」を作ってしまうともったいないので，その辺を考慮した多言語展開になるといいと思います。

また，ソーシャル雑誌アプリFlipboardに日本語版が登場しました。来日したCEOが，「⁠日本の出版社や広告代理店と協力して日本語コンテンツを取り込んでいきたい」と語ったようです。

特に設定しなくても日本語のコンテンツが見られるようになったので，これまで使っていなかったライト層も取り込めそうですね。

Webテク, Webデザイン, Web広告, レスポンシブWebデザイン, CSS, SASS, LESS, ソーシャルメディア

著者プロフィール

芦之由（あしのよし）

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

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

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