週刊Webテク通信

2010年7月第4週号 1位は,ブランディングとWebサイトのためのスタイルガイドライン,気になるネタは,Graffiti入力,Androidに復活

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

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

1. Designing Style Guidelines For Brands And Websites - Smashing Magazinehttp://www.smashingmagazine.com/2010/07/21/designing-style-guidelines-for-brands-and-websites/

デザインに関するガイドライン(スタイルガイド)についてまとめた記事です。

Webサイトの制作と同時にロゴも作ったり,新たに配色やフォントのルールを決めることも少なくないと思います。そういうときにガイドラインをしっかり作りたいという人には,とても参考になると思います。

この記事からリンクされている,Zopa,BBCのPDF版スタイルガイドは特に興味深いですね。ロゴや配色のルールのほか,Webサイトでのカラムやマージンの数値なども細かく決められていることが分かります。

Skypeのガイドラインは電子ブックのような形式で公開されていて,ステキです。当然と言えば当然ですが,スタイルガイドは美しいデザインで作られているものばかりで,とても刺激になりますね。

図1 スタイルガイドラインを作るための情報源いろいろ

図1 スタイルガイドラインを作るための情報源いろいろ

2. A Guide on Layout Types in Web Designhttp://sixrevisions.com/web_design/a-guide-on-layout-types-in-web-design/

Fixed(横幅固定,横幅をピクセルで指定)⁠Liquid(横幅可変,横幅を%で指定)⁠Elastic(横幅伸縮,横幅をemで指定)の3つは昔からよく話題に上る代表的なレイアウトの手法です。この記事では新たな手法も加えた10種類ものWebデザインのレイアウト形式が紹介されています。

  • iPhoneなどに対応した,縦画面か横画面かでレイアウトを変える「Scaled Layout」
  • CSSの新たな機能「calc」を使って,⁠width: calc(50% - 200px)」のような感じで指定する「Equated Layout」
  • min-width/max-widthやmin-height/max-heightを使って指定する「Fluid-Min/Max Layout」
  • ユーザーの環境によってCSSを切り替える「Conditional Layout」

などのレイアウト手法が簡単に解説されています。

iPhone/iPadといった新たなデバイスおよびCSS3の登場により,CSSレイアウトの手法として覚えておくべきことが増えているように感じます。

図2 Webデザインのレイアウト手法のガイド

図2 Webデザインのレイアウト手法のガイド

3. 20+ Free CSS3 Code Generators | Design Shackhttp://designshack.co.uk/articles/css/20-free-css3-code-generators

無料で使えるCSS3のコードジェネレーターを多数紹介しています。

CSS3の新機能である角丸,ドロップシャドウ,グラデーション,段組などを,ブラウザ上で簡単に設定できるツールが揃っています。

図3 CSS3のコードジェネレーターを20個紹介

図3 CSS3のコードジェネレーターを20個紹介

4. jQueryの日本語の解説サイトと国産のプラグイン集 | コリスhttp://coliss.com/articles/build-websites/operation/javascript/jquery-for-japanese.html

jQueryの日本語によるリファレンス,日本発のプラグイン,日本の作者による書籍を紹介した記事です。

図4 日本発のjQueryに関する情報源の紹介

図4 日本発のjQueryに関する情報源の紹介

5. 30+ Inspiring Website Navigation Menus | Naldz Graphicshttp://naldzgraphics.net/inspirations/30-inspiring-website-navigation-menus/

優れたデザインのナビゲーションメニューを多数紹介しています。アイコンを入れる,数字を入れる,小さく補足の文字を入れるといったパターンが多いようですね。

図5 Webデザインの参考に見ておきたいナビゲーションメニューいろいろ

図5 Webデザインの参考に見ておきたいナビゲーションメニューいろいろ

そのほか先週の記事から,気になるニュース記事を紹介します。

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

Browser Cover βeta 2http://www.browsercover.me/

写真などにブラウザの枠を付けて,ブラウザ上で開いているような画像が作れるWebサービスです。

設定できるのは,枠に使うブラウザの種類,横幅,アドレスバーに表示される文字列,タイトル部分に表示される文字列です。影をつけるかどうかと,ステータスバーの表示/非表示のオプションがあります。

なんてことはない単純なサービスですが,写真にブラウザの枠が付くだけで,ちょっと違ったイメージになるのが面白いです。

プロトタイプデザインのテンプレート用のブラウザ枠を生成したり,一枚絵で作ったページデザインにブラウザ枠を付けるのに便利かもしれません。

図6 Browser Coverの画面ダンプにBrowser CoverでChromeの枠を付けてみました

図6 Browser Coverの画面ダンプにBrowser CoverでChromeの枠を付けてみました

今週の気になるWebネタ

Graffiti入力,Androidに復活http://japanese.engadget.com/2010/07/20/graffiti-android/

その昔PalmというPDAが流行しました。Graffiti入力という独自の手書き文字認識方法を使っていて,それなりに快適に文字入力ができていました。

そのGraffiti入力をAndroid上で実現するアプリが登場しました。かつてPalm OSを買収したところからのリリースということで,公式版といえる存在のようです。もっとも,日本語入力には対応していないそうですが。

AndroidはiPhone/iPadと違い,文字入力のIMEなどもサードパーティが開発できるところがいいですね。Android版親指シフト入力が出れば,勝間和代さんなど親指シフター(親指シフト愛好者)が喜ぶんじゃないかな。スマートフォンで親指シフト入力はちょっとサイズ的に厳しいかもしれないけど…。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入