週刊Webテク通信

2011年2月第4週号1位は、大きく目立つボタンのショーケース、気になるネタは、ニンテンドーDSi用のBASICが登場

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

1. Showcase of Big, Bold and Beautiful Call to Action Buttons | Web Designer Aidhttp://webdesigneraid.com/showcase-of-big-bold-and-beautiful-call-to-action-buttons/

大きく目立つボタンのショーケースです。

ユーザーの次のアクションをうながすボタン(Call to Action Buttons)を作る上で、サイズを大きくすると目立つというのは当たり前ですが有効なことです。

ここで紹介されているボタン類を単体で見るだけでなく、ページ内での配置された位置や配色を確認することで、より参考になるでしょう。

全体の傾向を見てみると、相変わらず緑のボタンが多いようですね。

図1 大きく目立つすばらしいボタンのショーケース
図1 大きく目立つすばらしいボタンのショーケース

2. The Art of the Facebook Page Design | Webdesigner Depothttp://www.webdesignerdepot.com/2011/02/the-art-of-the-facebook-page-design/

Facebookページのデザインを大量に紹介しています。

タブが上にある古いレイアウトでキャプチャー画像は統一されていますが、すでに左にメニューがある新レイアウトに移行しているページもあります。ざっと見たところ、ここで紹介されているFacebookページの半分くらいが新しいレイアウトに変更しているようです。

海外の事例ですが、有名企業がどこも立派なFacebookページを開設しているという資料にもなりますね。左のアイコン画像の使い方もみどころです。

新旧レイアウトの違いなどについては、デザインで訴えかけるFacebookページ - SINAPlogでも解説されていました。

図2 米企業のFacebookページデザインいろいろ
図2 米企業のFacebookページデザインいろいろ

3. スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ:phpspot開発日誌http://phpspot.org/blog/archives/2011/02/post_540.html

国内外のスマートフォン向けサイトのデザインギャラリーを多数紹介しています。

アプリのユーザーインターフェイスの紹介サイト、アプリアイコンのギャラリーサイトなども紹介されていました。

図3 スマートフォン向けサイトのデザインギャラリーなど
図3 スマートフォン向けサイトのデザインギャラリーなど

4. Impressive Typography Sites - Noupe Design Bloghttp://www.noupe.com/fonts/impressive-typography-sites.html

タイポグラフィが印象的なサイトを集めたギャラリーです。各サイトについて、ちょっとした解説文もあります。

図4 タイポグラフィが印象的なサイトギャラリー
図4 タイポグラフィが印象的なサイトギャラリー

5. 30 Creative And Unique Personal Portfolio Websiteshttp://stylishwebdesigner.com/30-creative-and-unique-personal-portfolio-websites/

デザイナーによるポートフォリオサイトのデザインギャラリーです。

誰もがユニークでベストなものにしたいと思って作るポートフォリオなので、細部まで気を遣ったデザインのものが多いですね。

図5 クリエイティブでユニークなポートフォリオサイト30個
図5 クリエイティブでユニークなポートフォリオサイト30個

そのほか、先週の記事の中から、気になるニュース記事を3つ紹介します。

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

3D Ribbon Generator - CSS3d.nethttp://www.css3d.net/ribbon-generator/

海外のサイトでよく見かける、立体的なリボンを作るジェネレーターです。このジェネレーターのページ自体でも多用されています。

設定項目が多くて分かりにくいので、まず「Examples」にあるサンプルからイメージに近いものを選んで、それをベースにカスタマイズしていくといいでしょう。

リボンは、画像を全く使わずにCSSだけで実現しています。Internet Explorerは7以上に対応しているようです。

図6 立体的なリボンを作るジェネレーター
図6 立体的なリボンを作るジェネレーター

おすすめ記事

記事・ニュース一覧