週刊Webテク通信

2011年10月第4週号1位は、ワイヤーフレームを作成するためのツール10選、気になるネタは、「Google+」ブランドページが登場へ

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

1. What is WireFrames Web Design And 10 Tools To Create Wireframeshttp://smashinghub.com/wireframes-web-design-and-10-tools-to-create-wireframes.htm

Webデザインのワイヤーフレームを作るためのツールが10個紹介されています。

Adobe IllustratorやVisio(Windows用⁠⁠、OmniGraffle(Mac用)を使って作るのもいいですが、ワイヤーフレーム制作に特化したツールのほうが便利なケースも多いはずです。

実際にリンクを設定してページ遷移できたり、プルダウンなどの動きが確認できる、サイトのモックアップが作れるツールもあります。

紹介されているうちの一つCacooは日本発のプロダクトで、どんどん機能も充実してきているオンラインドローツールです。メニューや解説も日本語なので、安心して使えるでしょう。

Adobeからタブレット端末用のワイヤーフレーム/プロトタイプ作成ツールが登場するようですし、この分野もまだまだ発展しそうですね。

図1 ワイヤーフレームを作成するためのツール10選
図1 ワイヤーフレームを作成するためのツール10選

2. 20 Useful Tools for Responsive Web Design | Design Woop | The Web Design and Development Bloghttp://designwoop.com/2011/10/20-useful-tools-for-responsive-web-design/

レスポンシブWebデザインのための便利なツールを紹介しています。

グリッドシステムやHTML5・CSS3のフレームワーク、画像を自動リサイズするソリューション、表示確認ツールなどが掲載されています。

図2 レスポンシブWebデザインのための便利なツール各種
図2 レスポンシブWebデザインのための便利なツール各種

3. 30 Excellent CSS3 Buttons Tutorials & Resources | Web Design Habitshttp://webdesignhabits.com/30-excellent-css3-buttons-tutorials-resources/

CSS3ボタンのチュートリアルやフレームワークを紹介しています。似たような角丸ボタンが多いので、ロールオーバー時とボタンを押したときの効果を元に選ぶといいかもしれません。

図3 CSS3ボタンのチュートリアルやリソース
図3 CSS3ボタンのチュートリアルやリソース

4. 30 Free Adobe Photoshop Patterns Sets - DesignModohttp://designmodo.com/adobe-photoshop-patterns/

フリーのパターン素材を30個紹介しています。シンプルでページ全体の背景に使えそうな繰り返しパターンが揃っています。記事タイトルを見るとPhotoshop用パターンファイルのようですが、データはPNG画像でした。

すべてSubtle Patterns | Free textures for your next web projectというサイトで配布されている素材です。このサイト上では、画像にカーソルを合わせると「Preview」ボタンが表示され、パターンを背景に使用した状態を簡単に確認できます。

図4 パターン素材ファイルいろいろ
図4 パターン素材ファイルいろいろ

5. Showcase of Amazing Personal Websites (40) | IdentyMe - Bloghttp://blog.identyme.com/showcase-of-amazing-personal-websites-40/

自己紹介(自社紹介)ページのショーケースです。よくある「About」⁠About me」といったメニューで表示されるページを集めています。クリエイティブな自己紹介ページを作ることが、Webデザインの世界で流行しているとのことです。

図5 自己紹介ページのショーケース
図5 自己紹介ページのショーケース

そのほか、先週の記事の中から、フリーのPhotoshop素材の記事を2つ紹介します。

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

Is It Old?http://isitold.com/

「Is It Old?」はURLを入力するとそのページの情報鮮度を教えてくれるサイトです。

ソーシャルメディアなどでブログ記事などを紹介するときに、⁠それもうとっくに話題になってるよ」という出遅れた情報を自慢げに投稿するのを防ぐために使うのでしょう。

そのページについて、古い情報には「OLD⁠⁠、新しい情報には「KINDA OK」⁠KINDAはKind ofの略らしいです)といったような診断結果が表示されます。最初にツイートされた日とツイートされた数もわかります。

単純なアイデアですが、シンプルかつセンス良くサイトに仕上げているのがいいですね。

この「Is It Old?」自体のURLを入力すると、⁠MAD FRESH !(むちゃくちゃフレッシュ!)古いかどうかに関わらず、いつでも共有すべきリンクだ」といったメッセージが出るのも面白いです。

図6 リンクの情報鮮度を診断してくれるサービス
図6 リンクの情報鮮度を診断してくれるサービス

おすすめ記事

記事・ニュース一覧