週刊Webテク通信

2009年5月第4週号 1位は,デザインからコーディングまでのチュートリアル/気になるネタは,MSの新検索サービス「Bing」

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

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

1. Design and Code a Slick Website from Scratch -- Part I - Nettuts+http://net.tutsplus.com/tutorials/design-tutorials/design-and-code-a-slick-website-from-scratch-%E2%80%93-part-i/

デザインからコーディングまでのWebページ制作を,ゼロから全部教えてくれるというチュートリアルのシリーズです。パート1はPhotoshopによるデザインまでで,続くパート2で,XHTML/CSSのコーディングが紹介されています。パート2に出てくる,Photoshopの画像をWeb用にパーツ化していく作業も参考になるでしょう。

パート1,パート2とも紹介されている素材やコードは,まとめてダウンロードできるようになっています。

このエントリーの作者はコーディングにはDreamweaverを使っているそうですが,デザインビューは使わずコードビューを使っているようです。また,普段はOperaを愛用しているけれど,開発に使うブラウザはFirefoxとのこと。Firebugが使えるからというのが大きいようです。

先週は,Photoshopでのデザインをコーディングしていくチュートリアルがいろいろ公開されていました。

How to Convert a Photoshop Mockup to XHTML/CSSは,Create a Clean Modern Website Design in Photoshopで作ったデザインからパーツを準備し,XHTML/CSSコーディングしていくチュートリアルです。コードがテキストとしてではなく画像でしか紹介されてないのが残念ですね。

同様にCoding a Clean Web 2.0 Style Web Design from PhotoshopHow to Create a Clean Web 2.0 Style Web Design in Photoshopで作ったイメージをコーディングしていく内容です。こちらは素材やコードをダウンロードできます。

ところで,これら全てのチュートリアルにおいて,jQueryを使ったJavaScriptのコーディングにも触れられています。ライブラリを使ったJavaScriptコーディングは,Webデザイナーには必須のスキルという時代なのかもしれません。

図1 キャプチャー画像が豊富の充実したチュートリアルです

図1 キャプチャー画像が豊富の充実したチュートリアルです

2. 30 Examples of Attractive Navhttp://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/

魅力的なナビゲーションのサイトを多数紹介しています。最近のトレンドともいえる,Flash風の動きをJavaScriptで実現したものが多いですね。

それぞれのサイトのナビゲーションについて,ちょっとした解説が載っています。それを読んでからサイトを訪れると,どこが優れたポイントなのかの理解が深まると思います。

なお,ナビゲーションの実装については,先週公開された記事に36 Eye-Catching Jquery Navigation Menus | 1stwebdesigner - Love In Designというのがありました。jQuery限定ですが,様々なナビゲーションメニューのライブラリやチュートリアルへのリンク集です。

図2 ナビゲーションの発想のもとになりそうなサイトばかりです

図2 ナビゲーションの発想のもとになりそうなサイトばかりです

3. The 960 Grid System Toolbox & Resources | Webdesigner Depothttp://www.webdesignerdepot.com/2009/05/the-960-grid-system-toolbox-and-resources/

CSSのフレームワーク「960 Grid System」に関連するチュートリアルや作例集です。また,その他のCSSフレームワークについてもまとめてあります。

4. 22 CSS Button Styling Tutorials and Techniques : Speckyboy Design Magazinehttp://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

CSSでボタンをデザインするためのチュートリアルやテクニックがまとめられています。

ラベルはテキストで,背景に画像を配置するというのが基本のパターンですね。あとは文字数やサイズの可変にどう対応するかと,ロールオーバーのときの見せ方がポイントでしょう。

なお,CSS3を使えば角丸でドロップシャドウがついたボタンは簡単に作れますが,IEは非対応なんですよね。

図3 ボタンデザインのショーケースという見方もできます

図3 ボタンデザインのショーケースという見方もできます

5. 10 Intelligent Ways of using [FORM] Elements | Noupehttp://www.noupe.com/css/10-intelligent-ways-of-using-form-elements.html

フォーム要素を使った優れたソリューションの紹介です。投票システム,アップローダー,CAPTHAなどが紹介されています。

タグを入力するときのインターフェイスで最近よく目にする便利な機能を実現する「4. TextboxList」は使ってみたいと思いました。

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

そのほか先週の記事から,jQueryを使った役に立ちそうなテクニックを紹介します。

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

めいしったー : あなたのTwitter画面を名刺にhttp://yumeka.to/meishitter/

「めいしったー」は,TwitterのユーザーIDを入れると,プロフィール情報と最近のつぶやきの入った名刺画像を作成してくれるサービスです。もちろんユーザーアイコンと背景画像もそのユーザーのものが反映されます。

IDを入れるだけなので,人の名刺を勝手に作るという楽しみ方もあります。オバマ大統領(BarackObama)とか中川翔子(strawberry2)など有名人の名刺を作ってみるのも面白いかも。

標準ではブログなどに貼る用に幅500ピクセルの画像が生成されますが,印刷用に幅1280ピクセルの画像も作ることができます。

なお,類似サービスとして,ついったー名刺ジェネレータというサイトもありました。

図3 Twitterを模した画面になっています

図3 Twitterを模した画面になっています

今週の気になるWebネタ

MSの新検索サービス「Bing」は意思決定を支援 - @IThttp://www.atmarkit.co.jp/news/200905/29/bing.html

マイクロソフトの新検索サービス「Bing」が5月29日(米国時間5月28日)に発表されました。意思決定のための検索エンジンというコンセプトだそうです。

日本語の雲,蜘蛛が由来の「Kumo」というコードネームだったのですが,最終的には「Bing」という名前に決まってしまい,日本人としてはちょっと残念ですね。なお,「g」はほとんど発音しないと思いますが,公式日本語表記は「ビング」です。「ビン」なのか「ビング」なのかあいまいなところも日本人には微妙なところです。

「Google it(ググる)」のように「Bing it」と動詞として使われるようになるのを目指しているそうで,覚えやすく短く簡単な言葉としてBingが選ばれたようです。まあ,「クモる」というのは日本語ではだいたいネガティブなときに使われる言葉なので,Kumoじゃなくてよかったのかもしれません。

検索結果に「ビンゴ!」なものが見つかるということで,BingoからBingなのかしらとわたしは思ったのですが,Bingとはエレベーターが着いたときのベルの音など,到着や結末を表現する擬音語なんだそうです。

ところでBingの発表された日にはGoogleからも「Google Wave」の発表があり,すっかりそちらに話題をさらわれてしまったようです。Bingは「But Its Not Google」の頭文字なんて言われ方もしているようで,ちょっとクモりがちな船出となってしまったみたいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入