週刊Webテク通信

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

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

ネットで見かけた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 リンクの情報鮮度を診断してくれるサービス

今週の気になるWebネタ

「Google+」にブランドページが登場へ--ハンドルネーム制も導入か - CNET Japanhttp://japan.cnet.com/news/service/35009426/

Google+のビジネス用ページがいよいよ登場するようです。Facebookページ,mixiページに相当するページですね。日本ではmixiページ開始時の盛り上がりが収まったタイミングなので,丁度いいのかもしれません。

また,ハンドルネームをサポートする予定とも報じられています。ハンドルネームを単に認めるだけならOKと発表すればいいだけなので,もしかするとハンドルネームを別途設定するような機能が付くのかもしれません。

個人的には,実名+ハンドルネームが使い分けられるようになることを期待しています。また,1つのアカウントで複数ハンドルネームが使い分けられると便利ですよね。Twitterで複数アカウントの切り替えを面倒に感じている人には,特に魅力が感じられると思います。

Google+はGoogle ReaderやBloggerとも連携するようなので,ハンドルネーム制の導入は自然な流れのようにも思えます。実名でしか書けないブログサービスなら使わないという人も多いでしょうからね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入