• DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • CLOUD COMPUTING STAGE
gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2010年5月第2週号　1位は，ミニマルなWebデザインのための法則，気になるネタは，i文庫HDとiBook

週刊Webテク通信

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

2010年5月20日

, , , , , , , , , ,

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

ネットで見かけた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　国内初のウェブフォントサービス「デコもじ」

今週の気になるWebネタ

i文庫HDとiBook - Drift Diary XIIIhttp://blog.drikin.com/2010/05/ibunkohdibook.html

「i文庫HD」というiPadアプリが登場し，話題となっています。ドキュメントビューアとして人気のiPhoneアプリ「i文庫」のiPadバージョン。青空文庫，PDF，連番画像ファイルなどを，本を読むように閲覧できるアプリです。

元Microsoftのプログラマーでブロガーとしても有名な中島聡の作ったiPadアプリ「CloudReaders」も，PDFや連番画像を読むためのビューアです。中島さんはブログに「PDF・マンガリーダーがiPadの普及・成功の鍵を握る」とも書いていました。

本や雑誌を裁断・解体してスキャニングし，PDF化している人の話をネットでよく見かけます。そういう人たちにとっては，今までせっせと作ってきた自家製電子ブックを見るためのマシンとして，iPadが注目されているようです。

iPadのブックストアiBooksやKindleで日本語の本が買えるようにならなくても，日本での書籍の電子化は自家製電子ブックが牽引するのかも。買ったCDの曲をパソコンに取り込むのと近いといえば近いし。

しかしそうなると海賊版が心配…となってくるはずなので，出版社も正規品を販売していくしかないでしょう。

雑誌に関しては，すでにパソコン／ケータイ／iPhone向けに電子化は進んでいるので，iPadで読める雑誌もどんどん増えるはずです。紙の書籍をそのまま電子化したものと，iPad向けに動画などの付加価値を付けたアプリ版との両方を出す雑誌も出てくるんでしょうね。

, , , , , , , , , ,

著者プロフィール

芦之由（あしのよし）

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

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

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

コメント

コメントの記入