gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2009年11月第2週号 1位は,WebデザインをGoodからGreatに変える6つの方法,気になるネタは,Gmailのフォントが変に

週刊Webテク通信

2009年11月第2週号 1位は,WebデザインをGoodからGreatに変える6つの方法,気になるネタは,Gmailのフォントが変に

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

1. 6 Ways To Take Your Webdesign From Good To Greathttp://www.myinkblog.com/2009/11/02/6-ways-to-take-your-webdesign-from-good-to-great/

WebデザインをGoodからGreatに変える6つの方法を紹介しています。GoodからGreatへの,ほんのわずかな差に気付くヒントとなる内容です。

  1. グラデーションは微妙に使う
  2. ホワイトスペースを追加する
  3. グリッドに添わせる
  4. 文字をうまく扱う
  5. わかりやすく効果的なナビゲーションを作る
  6. すばらしく役に立つフッタを用意する

1~4は見た目について,5,6は機能面も含んでの内容となっていますね。

図1 Webデザインをグッドからグレートに変える方法

図1 Webデザインをグッドからグレートに変える方法

2. Web Design Trends for 2010 | Web Design Ledgerhttp://webdesignledger.com/tips/web-design-trends-for-2010

2010年のWebデザインの流行となりそうなポイントを14項目紹介しています。

文字の扱いに凝ったものや大きなフッタは,1位で紹介した項目と共通していますね。

大きなロゴ,大きなイメージ,大きなフッタといろんな要素を大きくするのがはやりのようで,モニタサイズが大きくなっているのと関係があるのかもしれません。

2010年に備えて,知っておきたいウェブデザインのトレンド | コリス」として,この記事を翻訳したエントリーもありました。

図1 2010年にはやりそうなWebデザインのトレンド

図2 2010年にはやりそうなWebデザインのトレンド

3. Best Practices for 6 Common User Interface Elements | Webdesigner Depothttp://www.webdesignerdepot.com/2009/11/best-practices-for-6-common-user-interface-elements/

6つのよく使われるユーザーインターフェイス要素に関して,ベストな表現方法を考えた記事です。

  1. 検索ボックスの見た目
  2. コンテンツの折畳み/展開のためのマーク(ボタン)
  3. Ajaxでのローディング中を表す表示
  4. カート,ログイン,登録のリンクやボタンの位置
  5. クレジットカードの入力フォームでの有効期限の日付のフォーマット
  6. 通常テキストとリンクテキストの区別

の6つのインターフェイスについて考察しています。

図3 よく使われるインターフェイスについての考察

図3 よく使われるインターフェイスについての考察

4. とっても使えるoverflowプロパティ。その使い方色々。|CSS HappyLifehttp://css-happylife.com/log/css-template/000751.shtml

CSSの「overflow: hidden」を使ったテクニックを5つ紹介しています。

clearfixの代わりに使ったり,フロートした画像の横のテキストが画像の下に来ないようにしたりと,目からうろこのテクニックがそろっていますね。

IE5対策と印刷用にCSSの調整が必要な場合がありそうという点には注意が必要でしょう。

図4 overflowプロパティの便利な使い方いろいろ

図4 overflowプロパティの便利な使い方いろいろ

5. The Future Of The Web: Where Will We Be In Five Years? - Noupehttp://www.noupe.com/trends/the-future-of-the-web-where-will-we-be-in-five-years.html

Webの未来について,5年後を予想した15の予言です。

1つ目の項目に小額決済(マイクロペイメント)を取り上げているのが意外ですが,たしかにWebの未来を考える上で重要なのは間違いないでしょう。

デザイン面では,モニタの巨大化により横スクロールのコンテンツが増えるのではないかと予想しています。横スクロールのサイトばかりになることはないでしょうが,横スクロールが選ばれるケースも増えていくんでしょうね。

Webが共同作業の場としてより利用されるようになる,リアルタイム性が高まるといった予想は,まさに今のトレンドの延長線上にあることです。モバイルが重要になってくるというのもそうですね。

最後は,Webが情報配信やコンテンツ配布の中心となるだろうと締めています。

図5 5年後のWebはどうなっているかの予言

図5 5年後のWebはどうなっているかの予言

そのほか先週の記事から,Webデザインのギャラリー記事を紹介します。

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

Bookmarks, Images, Files - Gkeeperhttp://www.gkeeper.com/

Gkeeperはオンラインブックマークなのですが,ページに含まれる画像やファイルもブックマークできるのが特徴です。

画像は大/中/小の大きさごとに,ファイルはオーディオ/ビデオ/その他のタイプごとに閲覧できます。画像はAltテキスト,ファイルはアンカーテキストがファイルの名称となり,検索も可能です。日本語での検索もできました。

画像やファイルはGkeeperのサーバーに保存されるわけではなく,URLが保存されているだけのようです。Webで見つけた画像やファイルの保管場所にするという使い方はできませんね。

デザインも含め,まだまだ発展途上のように見受けられますが,発想は面白いサービスだと思います。

Webページ上のあらゆるコンテンツをワンクリックでブックマークできるサイト「Gkeeper.com」*二十歳街道まっしぐら」に登録の仕方や使い方が詳しく紹介されています。

図6 画像やファイルもブックマークできるサービスGkeeper

図6 画像やファイルもブックマークできるサービスGkeeper

今週の気になるWebネタ

mac/safariでのフォントの不具合 - Gmailヘルプhttp://www.google.com/support/forum/p/gmail/thread?tid=588d91dfe2db9b53&hl=ja

最近,MacのSafariユーザーの間で「Gmailの字が汚くなった」「中国語のフォントになった」と,ちょっとした騒ぎが起こりました。

「うちでも」「わたしのMacも」とTwitterで一気に話題となり,「Arial Unicode MS」というフォントを使用停止にすればいいという解決法もすぐにTwitterで共有されました。今はGoogle側で対処がなされたのか,Arial Unicode MSをオンにしても問題ないようです。

Arial Unicode MSは日本語,英語,韓国語,中国語,タイ語,ギリシャ語,など多言語が含まれたすごいフォントなのですが,日本語の文字がデザイン的に難があるんですね。

「っ」のような小さい仮名が上の方に表示されたり,一部の漢字が中国の漢字で表示されたりして,中国語っぽい雰囲気を出してしまうようです。

イラストネタの補足をすると,「サンシャイン牧場」は中国メーカーによる人気のmixiアプリで,日本語がおかしかったり中国の漢字が出てきたりすることでも有名なんです。

初期のころは,表示されるテキストが中国語フォントだったらしく,今回のGmail騒動でサンシャイン牧場を連想した人もいるんじゃないかと思ったわけです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入

パスサポ

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

ピックアップ

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

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

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

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

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

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

一行クイックアンケート

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

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

その他の連載

2010年版SEO体得講座

本連載では,いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて,最新トレンドからすぐに使えるTipsまでを紹介します。

小型Linuxサーバの最高峰 OpenBlockS 600活用指南

搭載メモリの増加,CPUクロックの向上など,あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から,活用するためのさまざまなノウハウを紹介していきます。

はじめMath! Javaでコンピュータ数学

プログラミング言語入門者向けに,知っていると役立つ数学的トピックスを紹介します。簡単な演習問題と解説で,即活用できる知識を目指します。

教科書には載っていない ネットワークエンジニアの実践技術

ネットワークエンジニア,インフラエンジニアのトラブル対応には,時には「教科書通りにいかない」テクニックが必要となります。資格試験では得られないこうした実践的な技術について,実例を元に紹介します。

Googleケータイ,世に現る

2008年9月,Googleが中心となって開発されている「Android」を採用した携帯電話「T-Mobile G1」が発表されました。本連載ではT-Mobile G1を中心にGoogleケータイに迫ります。

モバゲーオープンプラットフォームに挑戦!――面白法人カヤック流モバゲーオープンプラットフォーム企画と開発のイロハ

2010年1月にリリースとなったモバゲーオープンプラットフォーム。その制作企業であるカヤックが,アイデアを企画に落とし込み,開発までのノウハウを紹介します。

プロトタイピングツールSketchFlowを用いた,Silverlightアプリ開発

SketchFlowプロトタイプ作成からアプリケーション開発までをExpression Blend 3を使って実践的に解説します。

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

連載一覧

gihyo.jp

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

書籍案内

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

定期刊行物一覧

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

最近のコメント