週刊Webテク通信

2011年7月第5週号1位は、フッタデザインのトレンド、テクニックとショーケース、気になるネタは、佐賀県武雄市、市のページをFacebookに完全移行へ

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

1. Website Footers: Modern Trends, Tips, Best Examples | Moto CMS Templatestemplates.motocms.com/blog/inspiration/website-footers-trends-tips-best-examples/

フッタデザインのトレンド、テクニックとショーケースをまとめた記事です。

以下のカテゴリに分けてフッタデザインを紹介しています。

  • 情報を提供する大きなフッタ
  • 独創的なグラフィックを使ったフッタ
  • サイトマップが入ったフッタ
  • 問い合わせフォーム、ニュースレターの購読フォームなどが入ったフッタ
  • ソーシャルメディアボタンの入ったフッタ

また、クリエイティブでかわいいフッタデザインを紹介した12 Creative and Cute Website Footer Designsという記事もありました。

図1 フッタデザインが多数紹介されています
図1 フッタデザインが多数紹介されています

2. Designer's Ultimate Resource Collection | MediaLoothttp://medialoot.com/blog/designers-ultimate-resource-collection/

デザイナーのためのいろいろな素材コレクションです。無料のものと有料のものが半々くらいのラインナップとなっています。

  • アイコンセット
  • ユーザーインターフェイス
  • Photoshopファイル
  • Webテンプレート
  • テクスチャ&パターン

に分けて掲載されています。このMediaLootというサイトでは、まだまだ多くの素材を提供しています。その中から人気のある素材を集めて紹介した、宣伝用の記事ということですね。

図2 デザイナーのためのすばらしい素材コレクション
図2 デザイナーのためのすばらしい素材コレクション

3. 40+ Web Sites with Ribbon Style in Their Design | Designing Mallhttp://www.designingmall.com/2011/07/web-sites-with-ribbon-style/

リボンの要素を使ったWebデザインのギャラリーです。リボンを使ったデザインは、サイトのテイストによらず使えてアイキャッチ効果が高いところから、アメリカのサイトでは以前から流行っています。

リボンに立体感とテクスチャが加わると、Webデザインのトレンド的要素が詰まっている印象になりますね。

図3 リボンの要素を使ったWebデザインのギャラリー
図3 リボンの要素を使ったWebデザインのギャラリー

4. 20 Impressive Illustrator & Photoshop Icon Tutorials | Tutorials Share | Tutorials, Resources & Tips for Designers!http://tutorials-share.com/2011/07/20-impressive-illustrator-photoshop-icon-tutorials/

IllustratorとPhotoshopによる、アイコン作成のチュートリアルを20個紹介しています。

図4 印象的なアイコンチュートリアルいろいろ
図4 印象的なアイコンチュートリアルいろいろ

5. 35 Inspiring Examples Of Texture In Web Design | SpyreStudioshttp://spyrestudios.com/35-inspiring-examples-of-texture-in-web-design/

テクスチャをうまく使ったWebデザインのギャラリーです。

キャプチャ画像ではよくわからないものも多いですが、微細なテクスチャが効果的に使われているサイトが多いですね。

図5 テクスチャを使ったWebデザインの実例集
図5 テクスチャを使ったWebデザインの実例集

そのほか、先週の記事の中から、インスピレーションの素となりそうなギャラリーページを2つ紹介します。

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

Screenfly by QuirkTools ? Test Your Website at Different Screen Resolutionshttp://quirktools.com/screenfly/

Screenflyは、様々な画面サイズでサイトの見た目をチェックできるWebサービスです。

任意のURLのページを指定したピクセル数のフレームで開くだけですが、画面サイズによってCSSを切り替えているページのチェックに役立ちそうです。画面は90度回転させることも可能です。

デスクトップ、タブレット、モバイル、テレビの4つのカテゴリで、代表的なスクリーンサイズが登録されているので、そこから選ぶだけでサイズを切り替えられます。

iPhone向けのサイズを選択するとiPhone用ページが表示されるようなので、ユーザーエージェントの切り替えも行われているのでしょう。

図6 様々な画面サイズでサイトの見た目をチェックできるサービス
図6 様々な画面サイズでサイトの見た目をチェックできるサービス

おすすめ記事

記事・ニュース一覧