週刊Webテク通信

2012年5月第3週号1位は、レスポンシブWebデザインのツールキット、気になるネタは、リアルを狙うソフトバンクとPayPal提携

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

1. Ultimate Responsive Web Design ToolKithttp://smashinghub.com/ultimate-responsive-web-design-toolkit.htm

レスポンシブWebデザインのフレームワーク、グリッドシステム、スターターキットなどを、まとめて紹介しています。

以下のカテゴリーに分けて、いろいろなツールが紹介されています。

  • 初心者向けツール
  • 可変幅グリッドのフレームワーク
  • 画像サイズを可変させるツール
  • テキストを可変させるツール
  • メディアクエリー関連のツール
  • よく使われるコード類
  • WordPressのプラグイン
図1 レスポンシブWebデザインのツールキット
図1 レスポンシブWebデザインのツールキット

2. Collection of Great Resources for Bootstrap by Twitter - REPUBLICOF3 | REPUBLICOF3http://www.republicof3.com/collection-of-great-resources-for-bootstrap-by-twitter/

Twitterの提供するフレームワーク、Bootstrapの関連ツールをまとめた記事です。

  • ジェネレーター
  • テーマ
  • Bootstrapで作られたサイトのギャラリー
  • モックアップ作成のためのBootstrapのUIパーツ
  • その他

に分けて、Bootstrapの利用を手助けするツール類が紹介されています。

図2 Bootstrapの関連ツールいろいろ
図2 Bootstrapの関連ツールいろいろ

3. 15 Thorough & New CSS3 Tutorials | Design Woop | The Web Design and Development Bloghttp://designwoop.com/2012/05/getting-started-with-css3-animations/

CSS3のチュートリアルを15個紹介しています。

CSSとjQueryとを組み合わせたテクニックの紹介も多いですね。

図3 CSS3のチュートリアルいろいろ
図3 CSS3のチュートリアルいろいろ

4. Showcase Of 30 Stunning Parallax Scrolling Websites | Lava360http://lava360.com/showcase-of-30-stunning-parallax-scrolling-websites/

視差スクロールを使ったWebサイトのショーケースです。

スクロールに合わせて、視差効果や場面の切り替わりのような効果が加わっているのが、最近の1ページ完結サイトの定番のようです。

図4 視差スクロールを使ったWebサイトのショーケース
図4 視差スクロールを使ったWebサイトのショーケース

5. 40 Beautiful & Functional Search Box Designs | inspirationfeed.comhttp://inspirationfeed.com/inspiration/design-elements/45-beautiful-functional-search-box-designs/

検索窓(サーチボックス)のデザインギャラリーです。

サイトのテイストや検索の目的に合わせてデザインされている、個性的な検索窓が大量に掲載されています。

図5 検索窓のデザインギャラリー
図5 検索窓のデザインギャラリー

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

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

hakolog.heroku.comhttp://hakolog.heroku.com/

hakologは、Dropboxと連動したブログサービスです。

Markdown記法で書いたテキストを、拡張子「md」でDropbox内の決められたフォルダに保存すると、自動でブログ記事としてアップされます。

また、hakologのサイト上から記事を書くことも可能です。その場合は投稿と同時にDropbox上にもファイルが生成されます。

Dropbox上のファイルを扱える環境なら、どこでも編集できるのは便利ですが、同期されるまでにはタイムラグがあるようです。

図6 Dropboxと連動したブログサービス
図6 Dropboxと連動したブログサービス

おすすめ記事

記事・ニュース一覧