週刊Webテク通信

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

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

ネットで見かけた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と連動したブログサービス

今週の気になるWebネタ

「財布を持ち歩くのはかっこ悪いという時代がくる」─⁠─リアルを狙うソフトバンクとPayPal提携 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1205/09/news074.html

ソフトバンクとPayPalが新会社「PayPal Japan」を設立して,新サービス「PayPal Here」を国内展開していくそうです。PayPal Hereはスマートフォンをクレジットカード決済端末として使うことができるサービスで,中小の飲食店などが安価に導入できるところが売りとなっています。

iPhoneに三角形の装置を取り付けた写真が印象的なので,あれを自分のスマートフォンに付けるのかと勘違いした人もいるようですが,カードリーダーが必要なのはお店側だけです。PayPalのアカウントを持っているお客さんは,スマートフォンを使っての決済もできるようです。

IT系の情報を追っている人なら,スマートフォンにクレジットカードリーダーを付けて決済するというサービスが以前もニュースになったことを覚えている人も多いでしょう。米Squareの「Square」というサービスがこの手のサービスの元祖で,PayPal Hereなど後追いのサービスが増えてきているようです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入