週刊Webテク通信

2010年5月第2週号1位は、ミニマルなWebデザインのための法則、気になるネタは、i文庫HDとiBook

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

1. Principles Of Minimalist Web Design, With Examples - Smashing Magazinehttp://www.smashingmagazine.com/2010/05/13/principles-of-minimalist-web-design-with-examples/

ミニマルなWebデザインを行うためのポイントを、豊富なサンプルとともに紹介した記事です。

ポイントとして述べられているのは以下の通り。

  • より少ないことは、より豊かなこと(Less is more)
  • 不要なものをはぶく
  • 壊れるところまで引き算する
  • 細部すべてを計算する
  • 最小限の色を使う
  • ホワイトスペースが重要

最近のミニマルデザインの流行として、

  • グレー
  • 大きな文字
  • 背景にパターンや写真
  • シンプルなグリッド
  • 円を要素として使う

といった内容の解説とサンプルが紹介されています。透明度を使ったデザインにも触れられていますが、ミニマルとは言えなくなることも多いということでおまけ扱いになっていました。

図1 ミニマルなWebデザインのための法則
図1 ミニマルなWebデザインのための法則

2. Showcase of Blogs with Unique Post Designs | Webdesigner Depothttp://www.webdesignerdepot.com/2010/05/showcase-of-blogs-with-unique-post-designs/

ブログデザインのショーケースなのですが、トップページではなく記事ページに注目した切り口となっています。

ブログシステムを使いながらも記事ごとに大胆にデザインが変わるものなど、刺激的なブログばかりです。

個人的にはTrent Waltonの巨大なヘッダ画像の使い方が気に入りました。

図2 ブログデザインの記事ページのショーケース
図2 ブログデザインの記事ページのショーケース

3. RedLine Magazine : CSS セレクタ総復習 (2010年5月版)http://redline.hippy.jp/lab/css/css_20105.php

CSS3もいいけどその前に、セレクタをまとめて総復習しておこうという記事です。自分のためのまとめという意味合いもあるのでしょうが、かなりの手間がかかってそうな気合いの入った内容ですね。

それぞれのセレクタの使い方はもちろん、使い道についてもヒントが載っています。さらにサンプルページまで用意されているという至れり尽くせりっぷり。ありがたく利用させてもらいましょう。

図3 CSSセレクタをまとめた記事
図3 CSSセレクタをまとめた記事

4. Design Resource | 27 Free High-Quality UI Wireframe kits to Download | Dzine Bloghttp://dzineblog.com/2010/05/design-resource-27-free-high-quality-ui-wireframe-kits-to-download.html

フリーでダウンロードできる良質なユーザーインターフェイス素材を多数紹介しています。ワイヤーフレーム作成に使うためのUIパーツのPhotoshopファイルやベクターファイルです。

iPhone、iPad用アプリのためのUIパーツも多数用意されています。

図4 UI要素のフリー素材いろいろ
図4 UI要素のフリー素材いろいろ

5. 40 Creative Twitter Status Designs for Your Inspiration | Graphic and Web Design Bloghttp://www.1stwebdesigner.com/inspiration/creative-twitter-status-designs-inspiration/

Twitterでの最新/最近の自分のツイートをブログや自分のサイトにも表示させている人は多いと思います。この記事は、そういったツイートの表示の仕方がデザイン的に優れているものを集めています。

Twitterの提供しているウィジットを使うのもいいですが、サイトのトーンにあった独自のデザインで表示したいですよね。

図5 自分のサイトに埋め込んだツイートのデザインショーケース
図5 自分のサイトに埋め込んだツイートのデザインショーケース

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

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

デコもじで、ホームページが、ブログが、もっと楽しくなる♪http://decomoji.jp/

「デコもじ」は、前回紹介したFonts.com Web Fonts同様のウェブフォントサービスです。国内初の日本語対応ウェブフォントサービスとのことで、日本語フォントが豊富です。

サイトを見た感じでも分かるのですが、個人ブロガーがターゲットとなっています。商用サイトでの利用はできないそうです。利用プランには現在トライアル(無料⁠⁠/ライト/スタンダードの三種類があるのですが、⁠ビジネス」というプランが準備中となっていました。このビジネスプランで商用利用ができるようになるのでしょう。

Webデベロッパーではなく個人相手ということで、使い方も丁寧に説明されています。設定のためにセレクタを入力する必要があるということで、各種ブログサービスごとのセレクタ例がまとめてありました。

書体数が多いのはいいのですが、手書き風のラブリーなものが目立ちます。そんな中目を引くのは、字游工房の游ゴシック、游明朝が使えるということ。商用OKになったら字游工房の書体のために利用するという人も多いと思います。

図6 国内初のウェブフォントサービス「デコもじ」
図6 国内初のウェブフォントサービス「デコもじ」

おすすめ記事

記事・ニュース一覧