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

gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2009年9月第2週号 1位は,CSS3で簡単に実現できるようになった代表的なCSSテクニック/気になるネタは,Blogger の Navbar に「共有」ボタンが登場

週刊Webテク通信

2009年9月第2週号 1位は,CSS3で簡単に実現できるようになった代表的なCSSテクニック/気になるネタは,Blogger の Navbar に「共有」ボタンが登場

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

1. 11 Classic CSS Techniques Made Simple with CSS3 - Nettuts+http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/

代表的なCSSテクニックについて,CSS3での新機能を使った記述方法とこれまでの記述とを比較しています。CSS3でこれだけ簡単になったんだということが分かりますね。

角丸,影,透明度,背景画像などのテクニックが取り上げられています。CSSだけでの実装が難しかった角丸や影は,従来の方法ではjQueryのプラグインを利用して簡単に解決していますね。

CSS3の普及はまだ先でしょうし,この両方の方法を併用していくのが現実的でしょう。CSS3と従来の方法の両方を合わせたTips集として,この記事はとても参考になると思います。

図1 CSS3と従来の方法とのCSSテクニックの比較

図1 CSS3と従来の方法とのCSSテクニックの比較

2. Horizontal Navigation Menus: Trends, Patterns, and Best Practices | Design Showcase | Smashing Magazinehttp://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/

水平方向のナビゲーションメニューのトレンドや傾向,事例などをまとめた記事です。

水平方向のナビゲーションメニューのユーザビリティを向上させるには,以下のような点に気をつけるといいそうです。

  1. Use Familiar Names For Links
    リンクにはよく使われる名称を用いる(例:About us,Services,Products)
  2. Clearly Distinguish Primary And Secondary Sections
    主要なリンクと補助的なリンクとを明確に区別する
  3. Put “Action” Links On Right
    機能を動作させるためのリンク(ログインボタンなど)を右側に置く
  4. Avoid “Surprise” Drop-Down Menus
    ビックリさせるドロップダウンメニューは避ける

4番目の項目は,ドロップダウンメニューを否定しているのではありません。下向きの三角形を入れるなどドロップダウンすることが分かるようにすることが必要だと指摘しています。

図2 水平方向ナビゲーションのトレンドや事例集

図2 水平方向ナビゲーションのトレンドや事例集

3. 30+ Examples of Big, Bold, and Beautiful Website Navigation Menus | FreelanceFolder http://freelancefolder.com/30-examples-of-big-bold-and-beautiful-website-navigation-menus/

大きくグラフィカルなメニューが最近のトレンドということで,大きくて目立つ美しいナビゲーションメニューを集めたショーケースです。

図3 大きく目立つナビゲーションメニューのショーケース

図3 大きく目立つナビゲーションメニューのショーケース

4. 9 Things You Can’t Forget When Designing a Blog | Tutorial9http://www.tutorial9.net/web-tutorials/9-things-you-cant-forget-when-designing-a-blog/

ブログをデザインするときに忘れてはならない9つのことを紹介しています。実例も豊富です。

  1. ファビコン
  2. 繊細なグラデーション,テクスチャー,影,1ピクセルのライン
  3. アイコン
  4. ホワイトスペース(空白部分)
  5. 揃え
  6. 書体
  7. 強調
  8. リスト,引用部分のデザイン
  9. コメントとトラックバックを分ける

という,見落としがちだけど気をつけた方がいいことの解説でした。

図4 ブログデザインで忘れてはならない9つのこと

図4 ブログデザインで忘れてはならない9つのこと

5. 20 Useful Fireworks Tutorials for Designershttp://sixrevisions.com/graphics-design/20-useful-fireworks-tutorials-for-designers/

Fireworksの能力を感じさせるチュートリアルを多数紹介しています。

この記事の最初の一文にはちょっと笑ってしまいました。

「Adobe Fireworks is the neglected cousin of Illustrator and Photoshop.」
(Adobe Fireworksは忘れられたIllustratorとPhotoshopのいとこだ)

Fireworksをよく使うわたしは,ImageReadyは消えたけどFireworksは残ったことだけでもありがたいと思っています。Fireworksはやればできる子です。ツールとしての洗練さに欠けるのも愛嬌と思いましょう。

掲載されているチュートリアルの半分くらいが同じAbduzeedoというサイトのものというのも,マイナー感を感じさせていますね。

図5 デザイナーのためのFireworksチュートリアル集

図5 デザイナーのためのFireworksチュートリアル集

以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか先週の記事から,インスピレーションを受けられそうな記事を紹介します。

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

Free Online PDF Editor - Edit PDF on the Web - PDF Hammerhttp://www.nitropdf.com/free/hammer/

複数のPDFファイルをひとつにまとめたり,不要なページを削除したいというケースは意外とあると思います。そんなとき,オンラインで簡単にPDFの加工ができる「PDF Hammer」というWebサービスが役に立ちそうです。

PDFの結合,ページの並び替え,削除,パスワード設定がオンライン上で簡単に実現できます。Mac OS Xでは標準ソフトの「プレビュー」で同様のことが可能なので,Macユーザーにはこのサービスは不要かもしれません。

[ウェブサービスレビュー]PDFのページ並び替えや結合・削除がオンラインでできる!「PDF Hammer」:レビュー - CNET Japan」という記事で紹介されていました。

図6 PDFをオンライン上で簡単に編集

図6 PDFをオンライン上で簡単に編集

今週の気になるWebネタ

クリボウの Blogger Tips: Blogger の Navbar に「共有」ボタンが登場http://www.kuribo.info/2009/09/blogger-navbar.html

Googleのブログサービス「Blogger」によるブログには上部に共通のバーが表示されるのですが,このバーに「共有」ボタンが追加されました。共有ボタンから,メールで送信,Twitter,Facebookに投稿,Googleリーダーで共有ができるようになっています。

エントリーごとにTwitterやソーシャルメディアへの登録ボタンを付けているブログも多いですが,共通のメニューに入っているのもありですね。それならいっそのこと,ブラウザの標準機能として共有ボタンを付けるというのはどうでしょう。

主要なサービスはあらかじめ登録されていて,自分で追加もできるといいです。使わないサービスは表示されないようにカスタマイズもしたいですね。

Firefoxのアドオンを探してみたところ,ShareThisShareaholicで同様なことができそうです。機能としてはアドオンで十分でしょうが,普通のユーザーはアドオンを探したりしないでしょうし,ブラウザの標準機能に採用されることがポイントだと思います。

RSSボタンの次は,ブラウザに「共有ボタン」を。あ,RSSボタン同様,共有ボタンもロケーションバーの中にあったほうがいいな。

著者プロフィール

芦之由(あしのよし)

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