週刊Webテク通信

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

ネットで見かけた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 | DesignModo5 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 投票ページ例

おすすめ記事

記事・ニュース一覧