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

gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2010年1月第1週号 1位は,実践的なCSS3の使い方,気になるネタは,鳩山首相がTwitterとBlogを開始

週刊Webテク通信

2010年1月第1週号 1位は,実践的なCSS3の使い方,気になるネタは,鳩山首相がTwitterとBlogを開始

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

1. Practical Uses of CSS3 | Viget Inspirehttp://www.viget.com/inspire/practical-uses-of-css3/

実践的なCSS3の使い方をレクチャーした記事です。

角丸,透明度,背景画像の複数指定,ドロップシャドウ,段組,ボーダーの枠に画像を指定といった機能について,シンプルなサンプルをコードとともに詳しく解説しています。

CSS3つながりとして,変形,移動,アニメーションに関しての記述例を詳しくまとめた記事「What You Need To Know About Behavioral CSS - Smashing Magazine」も興味深いです。

図1 CSS3の使い方のレクチャー

図1 CSS3の使い方のレクチャー

2. Crafting Subtle & Realistic User Interfaces - Flyosity: Mac & iPhone Interface Designhttp://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php

繊細でリアルなユーザーインターフェイスを作るために気をつけることをまとめた記事です。

Subtle(= 微妙な,かすかな,繊細な)というのがポイントのようで,最後に「Reality Is Subtle」という見出しで以下のようなポイントがまとめてありました。

  • ぼやけないはっきりした線やエッジを使う
  • 常に透明度の調整を行う
  • できる限りベクター画像で作る
  • レイヤースタイルで実験する
  • ドロップシャドウは正しく使わないとデザインを壊してしまう
  • 複雑なシェイプをPNGかGIFに保存するときは,レイヤーをスマートオブジェクトに変換してからにする
  • 文字を乗せるときは,1pxの黒か白のドロップシャドウを使う
  • 微妙に角を丸めた方がリアルに見える
  • ものには微妙に影をつけた方がリアルに見える

図2 リアルなユーザーインターフェイスのための考察

図2 リアルなユーザーインターフェイスのための考察

3. Headers and Footers that Grab You Coming and Going | Web Design Ledgerhttp://webdesignledger.com/inspiration/headers-and-footers-that-grab-you-coming-and-going

すばらしいヘッダとフッタを多数紹介しています。フッタのショーケース記事は最近多いのですが,ヘッダとフッタをセットでというのはありそうでなかったですね。

クリエイティブでスタイリッシュなフッタデザインの2009年まとめといった,「65 Creative And Stylish Footer Designs of 2009 | Graphic and Web Design Blog -Resources And Tutorials」にもステキなデザインがいっぱいです。

図3 ヘッダとフッタのデザインギャラリー

図3 ヘッダとフッタのデザインギャラリー

4. The Beautiful Art of Japanese Web Design - woorkup.comhttp://woorkup.com/2009/12/30/the-beautiful-art-of-japanese-web-design/

美しいデザインの日本のサイトをまとめた海外の記事です。

ほとんどがFlashサイトというのは,日本でのデザインを重視したサイトの特徴なのかもしれません。

この記事のコメント欄が「beautiful」「excellent」「 I love Japan」といったメッセージで盛り上がっていたり,リツイート数が800件近いことは,日本人としてちょっとうれしいですね。

図4 美しい日本のサイトのギャラリー

図4 美しい日本のサイトのギャラリー

5. A UI Design and Prototyping Treasure Chest | Web Design Ledgerhttp://webdesignledger.com/freebies/a-ui-design-and-prototyping-treasure-chest

ユーザーインターフェイスをデザインしたり,プロトタイプを作るときに便利な素材を配布しているサイトを多数紹介しています。

ブラウザやOSのインターフェイスのパーツや,ブラウザの枠などを画像ファイルとしてダウンロードすることができます。iPhoneの画面設計のためのパーツもありますね。

Free Sketching & Wireframing Kit」というユーザーインターフェイスのパーツをベクターファイルで配布している記事もありました。

図5 UIデザインとプロトタイプ作成のための素材集

図5 UIデザインとプロトタイプ作成のための素材集

そのほか先週の記事から,フォーム関連の記事を紹介します。

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

仕事がはかどるフリーウェブサービス10選:ニュース - CNET Japanhttp://japan.cnet.com/news/media/story/0,2000056023,20405855,00.htm

今回は,「仕事がはかどるフリーウェブサービス10選」として2009年の注目のWebサービスをまとめた記事を紹介します。

Google Calenderなどメジャーなものは外して紹介したとのことですが,Dropbox,Evernote,「あとで読む」はネット通の間ではかなり有名なサービスですよね。この3つはわたしも便利に利用させてもらっています。

図6 2009年のフリーのWebサービスから10個を紹介

図6 2009年のフリーのWebサービスから10個を紹介

今週の気になるWebネタ

鳩山首相がTwitterとBlogを開始 - livedoor ニュースhttp://news.livedoor.com/article/detail/4529550/

1月1日に鳩山由紀夫首相がツイッターとブログ「鳩cafe」を開始しました。

「1日1ツイート」が目標だと言ってみたり,秘書官付に送信を依頼しているものの「基本的に私が書いています」と説明したりと,ツイッターを活用している人から見るとちょっとズレた印象を持たれそうです。

とはいえ,ツイッターやブログで首相個人として情報発信にチャレンジする姿勢はいいですよね。今後の展開に期待したいです。

豊富な芸能人ユーザーを武器に「Amebaなう」が追い上げてくる中,首相の登場はツイッターにとってはいい宣伝材料になりそうですね。

著者プロフィール

芦之由(あしのよし)

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
  • 組込みプレス