週刊Webテク通信

2011年1月第4週号　1位は，IllustratorでのWebデザインのススメ，気になるネタは，W3CがHTML5のロゴを発表

Webテク, Webデザイン, Web広告, llustrator, Windows, IE, HTML5, ECサイト, アンケート, W3C

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2011年1月17日～2011年1月23日の間に見つけた記事のベスト5です。

1. Productive Web Design With… Adobe Illustrator? - Smashing Magazinehttp://www.smashingmagazine.com/2011/01/17/productive-web-design-with-adobe-illustrator/

Adobe IllustratorでのWebデザインのススメ。WebデザインにはPhotoshopやFireforksを使う人が多いけど，Illustratorの方がいいよという理由とテクニックが紹介されています。

以下に，Illustratorのオススメポイントの一部を紹介します。

  • シンボル機能を使ってGUIなどのパーツを登録しておけば，効率化につながる
  • ボタンなどの色や形をシンボル化しておけば，簡単に一貫性のあるデザインを保てる
  • テクスチャー，グラデーション，角丸，テキストの扱いなどの機能が充実している
  • 正確なピクセルベースでのデザインを作れる

四角形などを描画したときの枠線に，アンチエイリアスがかかってぼけてしまうときがありますが，これをクリアな線にするテクニックも紹介されていました。

Fireworks使いとしては気になる，なぜFireworksではダメなのかについても解説しています。

  • Fireworksのインターフェイスがなじまない
  • シンボル（スタイル）の使い勝手がIllustratorにくらべると劣っている
  • 過去のバージョンではバグが多くてよくクラッシュした
  • テキストの扱いが弱く「段落スタイル」機能がない

この記事の著者は，新バージョンが出るたびにFireworksを試したけど，まだIllustratorから乗り換えるには至らないと判断しているようでした。

Illustrator関連で，「⁠The Ultimate Collection Of Tutorials For Mastering The Mesh Tool | Creative Nerds」というメッシュツールをマスターするための記事もありました。

図1　Illustratorを使ってのWebデザイン

図1　Illustratorを使ってのWebデザイン

2. 50 Free Tools and Apps for Web Designers and Developers | Speckyboy Design Magazinehttp://speckyboy.com/2011/01/19/50-free-tools-and-apps-for-web-designers-and-developers/

WebデザイナーやWebデベロッパーに役立つオンラインのツールを多数紹介しています。

「20 Free Web Apps for Freelancer Web Designers | DesignModo」「⁠5 Upcoming Web Apps for Designers | Inspired Magazine」という似たような記事もありました。

図2　Web制作に役立つツールいろいろ

図2　Web制作に役立つツールいろいろ

3. IE6/IE7/IE8/IE9の共存まとめ: 小粋空間http://www.koikikukan.com/archives/2011/01/17-005555.php

Windows 7やWindows VISTAでInternet Explorerの6／7／8／9を共存させる方法の解説です。

  1. IETesterを使う。IETesterに標準で入っていないIE9を別途追加する
  2. Microsoft Expression Web SuperPreview for Windows Internet Explorer と Internet Explorer 9 Platform Preview を併用する
  3. IE9のブラウザーモードとドキュメントモードを利用する（IE6には非対応）

の3つの方法について詳しく紹介しています。

4. 日本語で学べるHTML5関連資料15個まとめ*二十歳街道まっしぐらhttp://20kaido.com/archives/2266374.html

プレゼン共有サイト「SlideShare」で見つけた，HTML5に関する日本語の資料を大量に紹介しています。

今もっともHTML5が活かせると思われる，iPhoneアプリ制作関連の資料もあります。

面白法人カヤックによる「HTML5のメリットを活かしたコンテンツアイデア」というスライドがオススメです。後半はiPhone向けWebアプリの作り方に関する内容でした。

図3　HTML5に関する日本語の資料をまとめて紹介

図3　HTML5に関する日本語の資料をまとめて紹介

5. 30 Outstanding Ecommerce Websites | Vandelay Design Bloghttp://vandelaydesign.com/blog/galleries/ecommerce-sites/

いろいろなジャンルから集めた，ECサイトのデザインギャラリーです。日本のECサイトにくらべてシンプルなデザインが多いように感じました。

図4　ひと味違うデザインのECサイトいろいろ

図4　ひと味違うデザインのECサイトいろいろ

そのほか，先週の記事の中から，興味深い内容のものを三つ紹介します。

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

GoPollGohttp://gopollgo.com/

「GoPollGo」はアンケート調査などに使える投票システムのWebサービスです。

質問内容と答えの候補を記入するだけで，簡単に投票ページを作ることができます。日本語も問題なく使えるようです。

投票ページにはTwitterやFacebookのボタンもあり，簡単に告知できるようになっています。

また，投票を自分のブログなどに埋め込むためのコードも生成できます。

投票システムは以前からいろいろありますが，ソーシャルメディアとうまく連動しているので，一気に広まるかもしれませんね。

プレミアム会員になると，投票してくれた人の地域情報などから，投票結果を分析することができるようです。

図5　簡単に投票ページが作れるサービス

図5　簡単に投票ページが作れるサービス

図6　投票ページ例

図6　投票ページ例

今週の気になるWebネタ

W3CがHTML5のロゴを発表！ ホームページに貼ろう！ － Publickeyhttp://www.publickey1.jp/blog/11/w3chtml5.html

W3CがHTML5のロゴを発表しました。まだ正式なロゴというわけではなく，コミュニティに受け入れられれば公式ロゴとして採用したい意向とのことです。関連するテクノロジーを表す8つのアイコンも用意されています。

ロゴの発表後すぐに，HTML5の仕様を開発中のWHATWG（Web Hypertext Application Technology Working Group）からは，HTML規格のバージョン番号を廃止する方針が発表されました。

なんだかよく分かりませんが，ロゴ発表が混乱を招いたとW3Cが謝罪しているんだとか。このHTML5のロゴの立場はどうなるんでしょうね。

Adobeの「CS5」が登場したころ「CSS」と見間違うという指摘がありましたが，このロゴの「5」も「S」っぽく，スーパーマンの胸のマークみたいという指摘もあるようです。

Webテク, Webデザイン, Web広告, llustrator, Windows, IE, HTML5, ECサイト, アンケート, W3C

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote