週刊Webテク通信

2010年12月第1週号1位は、ミニマルなWebデザインの基礎、気になるネタは、mixi新機能相次ぎ休止

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

1. The Fundamentals of Minimalist Web Design | Design | PelFusion Design Magazinehttp://pelfusion.com/design/the-fundamentals-of-minimalist-web-design/

ミニマルなWebデザインの基礎についてまとめてあります。

それほど目新しい内容はありませんが、繰り返し話題となるミニマルなデザインについて、たまにおさらいしておくのもいいかと思います。

  1. ホワイトスペース
  2. タイポグラフィ
  3. わずかなエフェクト
  4. わかりやすい階層構造
  5. グリッドの使用
  6. 画像の使用

といった項目に分けて解説しています。

最後にヒントとして書いてあったことを以下にまとめてみました。

  • 不要なピクセルを全てなくし、本当に重要なものに目を向けさせる
  • 「このエレメントは本当に必要か?」と自分に問い、本当に必要なものだけを入れる
  • 色は見る側に多くのことを語ってしまうため、注意深く厳選して使う
  • アイコンの選択ミスでミニマルなデザインを台無しにしないように、適切なアイコンを選ぶ
図1 ミニマルなWebデザインの基礎
図1 ミニマルなWebデザインの基礎

2. HTML4から変化したHTML5のマークアップ ここが違う!サンプルで見るHTML5(2)(1/3):CodeZinehttp://codezine.jp/article/detail/5600

HTML5のマークアップについて、HTML4と比較しながら丁寧に解説しています。

HTML5の文書構造を表す新要素の意味や使い方など、サンプルを使って説明しており、とてもわかりやすいです。

連載記事の第2回で、⁠文書構造とセマンティクス」というタイトルが付いています。

HTML5についてはこの記事と重複している内容も多いですが、Getting to work with new web technologiesというHTML5やCSS3の新機能について解説した英語の資料も参考になると思います。

図2 HTML5のマークアップ入門
図2 HTML5のマークアップ入門

3. 100 Amazing Cartoonish Website Designs | Inspiration Mixhttp://www.inspirationmix.com/100-amazing-cartoonish-website-designs/

アメリカのアニメキャラクター風イラストを使ったWebデザインを、大量に紹介しています。

似たようなものとして、イラストを使ったWebデザインを集めたギャラリー31 Web Examples Creative And Inspiring of Using Illustration In Web Design | Artfans Designという記事もありました。

図3 漫画風のイラストを使ったWebデザインいろいろ
図3 漫画風のイラストを使ったWebデザインいろいろ

4. 25 Inspiring Slideshows In Web Design ? Web Design Firmhttp://www.cyberdesignz.com/blog/website-design/25-inspiring-slideshows-in-web-design/

スライドショーをうまく使ったWebデザインのショーケースです。

トップページのメインの領域にJavaScriptによるスライドショーを使ったサイトはよく見かけます。このショーケースでは、操作性や機能の違うスライドショーがいろいろ見られるので参考になりそうです。

図4 スライドショーを使ったWebデザインのショーケース
図4 スライドショーを使ったWebデザインのショーケース

5. jQuery Mobile: What Can It Do for You?http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/

スマートフォンなどのモバイル向けJavaScriptフレームワーク「jQuery Mobile」について、豊富なサンプルコードとともに解説しています。その名の通り、定番フレームワークのjQueryをベースにして開発されたものです。

デモページは、SafariあるいはChromeのウィンドウサイズを小さくして動作させればイメージはつかめますし、iPhoneなどでこのページを開いてデモを見ることも可能です。

図5 jQuery Mobileで何ができるのかの紹介
図5 jQuery Mobileで何ができるのかの紹介

そのほか先週の記事から、気になるニュース記事を紹介します。

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

Chrome Music Mixerhttp://www.morewithgoogle.jp/musicmixer/

4つのミュージック動画を同時に再生させることで、オリジナルの音楽セッションをつくることができるサービスです。⁠Googleで、もっと」というキャンペーンのコンテンツのようですね。仕組みは簡単で4つのウィンドウを開いて、それぞれ別のYouTube動画を再生させています。

タイトルにChromeと付いているように、Chromeブラウザで見ることが推奨されています。確かにChromeで見た方が読み込みが速いようです。

仕組みは単純なのですが、やってみると結構面白いですね。風船の割れる音や中華鍋を鳴らす音などの、おもしろ音源も用意されています。

図6 Googleによる音楽を楽しむコンテンツChrome Music Mixer
図6 Googleによる音楽を楽しむコンテンツChrome Music Mixer

おすすめ記事

記事・ニュース一覧