アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2009年12月第2週号 1位は,ミニマルなWebレイアウトを作るために必要なこと,気になるネタは,絶対に覚えたい iPhone+Google音声検索・10の技

週刊Webテク通信

2009年12月第2週号 1位は,ミニマルなWebレイアウトを作るために必要なこと,気になるネタは,絶対に覚えたい iPhone+Google音声検索・10の技

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

1. How to project a minimalist layout? attention to the details | Your Inspiration Webhttp://www.yourinspirationweb.com/en/how-to-project-a-minimalist-layout-attention-to-the-details/

ミニマルなWebレイアウトを作るために必要なことについての記事です。

ミニマルなデザインとは,必要最小限にそぎ落としたデザインといった意味でしょう。最小限に絞った分,タイポグラフィやホワイトスペースなどの細部にこだわりキッチリ仕上げないとアラが目立ちます。その分,制作には時間がかかるということです。

シンプルだから早く完成するかというとそうではなく,むしろ逆かもしれないということですね。クライアントには理解が得られにくいかもしれませんが。

ミニマルデザインに必要なものとして,以下の項目が挙げられています。

  1. よいロゴ
  2. 大きなオリジナルのフォント
  3. 色の選択
  4. よいタイポグラフィ
  5. アイコン,シール,吹き出し

とにかく文字が重要だということで,「読みやすいこと,調和が取れていること,美的であること」がポイントなのだそうです。

図1 ミニマルなレイアウトに必要なこと

図1 ミニマルなレイアウトに必要なこと

2. Styling HTML Lists with CSS: Techniques and Resources - Smashing Magazinehttp://www.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/

リストをCSSでデザインする方法のまとめ記事です。リスト(ul,ol,dl)をCSSで扱う際の注意点,ブラウザによる表示の違い,テクニックや実例紹介などがまとめられています。

  • リセット用CSSでマージンやパディングをゼロにしてブラウザごとの差異をなくす
  • 先頭の記号を画像にする場合は,list-style-imageを使わず背景画像にする

といった,リストを扱うときの定番となっているテクニックが,なぜ必要なのかの理由を復習することもできます。

メニュー,コメント表示欄,タグクラウド,グラフなど,実例紹介ではリストがいたるところに使われていることが分かります。

図2 HTMLのリストをCSSでスタイリングする方法

図2 HTMLのリストをCSSでスタイリングする方法

3. Famous Redesigned Logos of 2009 | Logo Design Bloghttp://www.logoblog.org/wordpress/redesigned-logos-2009/

今年リ・デザインされた有名なロゴのギャラリーです。リニューアル前と後とが並べて見られて,なかなか興味深いです。

よりシンプルに,親しみやすい感じに変化しているものが多いように見受けられました。

AOLはタイムワーナーから離れて「Aol.」とブランドを変更したようですが,「Aol」が「あおい」に見えてしまいますよね。わたしだけ?

図3 2009年にリ・デザインされた有名なロゴ

図3 2009年にリ・デザインされた有名なロゴ

4. Bokeh Effect in Web Design: 30 Excellent Examples and Tutorials | Spyre Studioshttp://spyrestudios.com/bokeh-effect-examples-tutorials/

Webデザインに使われた「ぼけ」効果の作例とチュートリアルを集めたものです。

「Bokeh」は日本語の「ぼけ」のことで,写真用語で人物写真の背景のぼけなどをBokehというようです。ここでのサンプルを見るとそうではなく,光の乱反射のようなものをBokehと呼んでいるようですが。

木漏れ日の光とか,夜イルミネーションをカメラで撮ったときに写る光のようなイメージといいましょうか…。「説明がわかりにくいんじゃぼけ」と言われそうですが,実際にこの記事を見てもらえばどんなものか一発でわかるでしょう。

図4 Webデザインに使われたBokeh(ぼけ)効果

図4 Webデザインに使われたBokeh(ぼけ)効果

5. A Gold Mine of Adobe Illustrator Resources - Noupehttp://www.noupe.com/design/a-gold-mine-of-adobe-illustrator-resources.html

Adobe Illustratorのブラシ,パターンやベクター素材などが大量に紹介されています。

Illustrator関連として,「The Best Vector Tutorials of 2009 | Web Design Ledger」というベクター画像を描くためのチュートリアル記事もありました。

図5 Illustrator向けの豊富な素材集

図5 Illustrator向けの豊富な素材集

そのほか先週の記事から,jQuery関連のチュートリアルやプラグインを紹介します。

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

nanapi [ナナピ] - みんなで作る暮らしのレシピ -http://nanapi.jp/

9月に公開されたサイトですが,いまさらながら「nanapi(ナナピ)」を紹介します。

よい評価と悪い評価,公平につけるべきか? : ロケスタ社長日記」という,nanapiの運営会社ロケットスタート社長のブログ記事が興味深かったからです。

nanapiはユーザー参加型のノウハウ共有サイトで,「7分であなたの生活を便利にしちゃうライフレシピ共有サイト」と謳っています。

投稿されたライフレシピ(ノウハウ記事)について,「いいね!(良い評価)」「きょとん(悪い評価)」という評価が付けられるのですが,悪い評価はログインしないと書けないとのことです。その理由や思想が気になる人は,ぜひブログ記事を読んでみてください。

ほかにもデザインを担当した人がデザインプロセスをブログで発表したりと,Webデザイナーには興味深いサイトとなっています。

サイト自体もライフレシピの数がかなり増えて,個別記事がいくつも「はてなブックマーク」で上位になったりと盛り上がりつつあるようです。

図6 ライフレシピ共有サイトnanapi(ナナピ)

図6 ライフレシピ共有サイトnanapi(ナナピ)

今週の気になるWebネタ

ASCII.jp:絶対に覚えたい iPhone+Google音声検索・10の技http://ascii.jp/elem/000/000/482/482435/

音声でGoogle検索を使える「Google 音声検索」が日本語に対応し,iPhoneとAndroidで使えるようになりました。iPhoneでは,Google Mobile Appというアプリの一機能という扱いです。

試してみたのですが,かなり認識率はいいようです。いざ試そうと思っても別に検索したい言葉もなく,思わず口にした言葉が「はるなあい」。見事「はるな愛」と認識されました。

テレビを見ていて「さんじゅうにんさんじゅういっきゃく」を検索しようとしても「30人31脚」と見事に認識。「Google 日本語入力」と同様,よく検索される言葉が登録されているようですね。

日本語の会話はできるけど,漢字が得意じゃない日本在住の外国人にも便利かもしれません。検索結果がちゃんと読めないと意味ありませんが。耳で聞いて字がわからない単語を検索するのにも使えそうですね。

飲み会の席で「Google 音声検索」でサッと検索したら「すごーい」と興味を持たれるかもしれません。みんなで次々とiPhoneのマイクに話しかけて盛り上がるかも。盛り上がりすぎて終電を逃さないように,「(出発駅)から(到着駅) 終電」であらかじめ検索しておきましょう。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス