週刊Webテク通信

2010年7月第3週号1位は、時間の節約になるWeb制作関連ツール 12+1、気になるネタは、iPad人気で新ビジネス 本のスキャン代行、違法?

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

1. 時間の節約になるWeb制作関連ツール 12+1 | Webクリエイターボックスhttp://www.webcreatorbox.com/tech/timesaver-website-tools/

Web制作の際に、知っておくと時間短縮になりそうな便利ツールをまとめた記事です。先週紹介した「Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選」と似た企画ですね。

オリジナルのPhotoshopテンプレートも配布してくれています。それ以外はWebサービスの紹介で、それぞれの使い方を簡単に説明してあります。

クライアントの環境を勝手に調査してメールするサービスというのは面白いですし、とても役に立ちそうですね。

ワイヤーフレーム作成のツールとしてmockingbirdが紹介されていますが、ほかにも多数あるワイヤーフレーム作成ツールをまとめた10 Free Wireframing Tools for Designersという記事も参考になると思います。

図1 時間の節約になるWeb制作関連ツール
図1 時間の節約になるWeb制作関連ツール

2. The 960 Grid System Made Easyhttp://sixrevisions.com/web_design/the-960-grid-system-made-easy/

960 Grid Systemの解説と関連サイトの紹介です。

960 Grid Systemを使う上でのポイントがまとめてあったので、意訳してみました。

  1. 12カラム版を使う場合はcontainer_12、16カラム版はcontainer_16というクラスを付けた領域で全体を囲む
  2. grid_1、grid_2、grid_3…といったクラスを使って領域を作る。数字は何カラム使った幅かをあらわす。12カラム版の時は足して12、16カラム版の場合は16になるように水平方向に領域を並べる
  3. push、pullというクラスを使って領域を左右に移動できる。これを利用してマークアップの順番にとらわれずに配置を換えることができる
  4. prefix、suffixというクラスを使って空白のカラムを作ることができる
  5. alpha、omegaというクラスを使って、入れ子にした領域のマージンを調整できる
図2 960 Grid Systemの解説と関連サイト
図2 960 Grid Systemの解説と関連サイト

3. 誰でも作れる! “崩れない”HTMLメルマガ作成術(1/4)- @IThttp://www.atmarkit.co.jp/fwcr/design/tool/ichigeki12/01.html

問題のないHTMLメールの作り方を、非常に丁寧にイチから解説してあります。

Webデザインをやっている人でも、HTMLメールの作り方はよく分からないという人も多いんじゃないでしょうか。そういう人のためといえる記事です。

メーラーのCSSへの対応は進んでいるものの解釈にはバラつきがあるということで、昔ながらのテーブルレイアウトで作成するのが確実ということです。いまさらではありますが、昔格闘したテーブルレイアウトのノウハウが活かされることもあるのかも…。

図3 崩れないHTMLメールの作り方入門
図3 崩れないHTMLメールの作り方入門

4. Excellent Examples Of Icons In Navigation Menu Design | SpyreStudioshttp://spyrestudios.com/20-great-examples-of-icons-in-navigation-design/

ナビゲーションメニューに使われているアイコンのショーケースです。

ホームは家の形、コンタクトやフォーラムはフキダシの形など、パターンを知るのにも役立ちそうですね。

図4 ナビゲーションメニューに使われているアイコンいろいろ
図4 ナビゲーションメニューに使われているアイコンいろいろ

5. 10 Best And Useful CSS Tutorials For Web Designershttp://resources.savedelete.com/10-best-and-useful-css-tutorials-for-web-designers.html

CSSの理解を深める解説記事を10個紹介しています。派手なテクニックではなく、知っておくとよりCSSを使いこなせそうな知識を学べるものが中心です。

図5 CSSの理解を深めるチュートリアル
図5 CSSの理解を深めるチュートリアル

そのほか先週の記事から、Webデザイン関連の電子書籍に関する話題を紹介します。

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

TwiTraqhttp://twitraq.userlocal.jp/

TwiTraqは、ツイッターの自分の発言に対するほかのユーザーの反応(RT やコメント)を自動的に収集し、解析する無料のサービスです。フォロワー/フォローしている人の解析もできます。

任意のキーワードやハッシュタグを登録しておき、そのキーワード/ハッシュタグに関する分析をウォッチすることもできるようです。

「UserHeat」「なかのひと」といった解析ツールでおなじみの、ユーザーローカルが提供いています。

Twitter解析をしたい全ての人へ。無料ツイッター解析ツール「TwiTraq」レビュー - リアルアクセス解析という記事を参考にさせていただきました。

図6 無料のTwitter解析ツールTwiTraq
図6 無料のTwitter解析ツールTwiTraq

おすすめ記事

記事・ニュース一覧