週刊Webテク通信

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

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

ネットで見かけた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

今週の気になるWebネタ

mixi新機能相次ぎ休止,笠原社長が謝罪 - ITmedia Newshttp://www.itmedia.co.jp/news/articles/1012/03/news127.html

Facebookの「いいね!」ボタンと類似した「mixiチェック」を提供開始したり,mixiがFacebookに影響を受けた機能強化を進めているように見えます。しかし,⁠友人のメールアドレスから探す」⁠最近の動き(アクティビティ情報)⁠といった機能は,ユーザーの反発を受けてすぐに休止することになりました。

メールアドレスからマイミクのリクエストをすることは従来からできたのですが,相手のマイページにアクセスできるように仕様変更したことが反発を受けたようです。また,ユーザーがマイミクを追加したりコミュニティに参加したことを他のマイミクに自動で知らせるアクティビティ通知も,mixiのユーザーには受け入れられませんでした。

Facebookではこれらと同様の機能は,新たな出会いのきっかけとなるものとして評価されています。Facebookにはこういった繋がりを広げていく仕掛けが豊富で,mixiとは違った文化だと言えるのでしょう。

mixiは,すでに文化が確立している中に新たな文化を持ち込もうとして失敗したように思えます。

この騒動を見て,Facebookはやっぱり日本じゃ流行らないと思った人もいるようです。でも,相容れない文化があるからこそ,この二つのSNSは両立していけるとも考えられますね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入