週刊Webテク通信

2013年12月第2週号 1位は，Bootstrapを使ったサイトをデザインするための便利なツールのまとめ，気になるネタは，番号そのままで発信できる――フュージョン，30秒10.5円の「楽天でんわ」開始

Webテク, Webデザイン, Web広告, Bootstrap, jQuery, Tumblr, Photoshop, CSS, スマートフォン

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2013年12月2日～12月8日の間に見つけた記事のベスト5です。

1. 10 best bootstrap design tools for 2014http://smashinghub.com/10-best-bootstrap-design-tools-for-2014.htm

Bootstrapを使ったサイトをデザインするための便利なツールをまとめた記事です。

UIのパーツをドラッグ＆ドロップで配置してサイトのモックアップを簡単に作成できるツールなど，オンラインでレイアウトを調整できるツールが各種紹介されています。

ボタンのジェネレーターや，KeynoteやPowerpointでサイトのデザインを行うためのBootstrapのUI素材が揃ったテンプレートもありました。

図1　Bootstrapでデザインするためのツールいろいろ

図1　Bootstrapでデザインするためのツールいろいろ

2. 10 free scrolling plugins for awesome experiences | Desizn Worldhttp://www.desiznworld.com/2013/12/free-scrolling-plugins-for-websites.html

スクロール関連のjQueryプラグインを紹介しています。視差スクロールや，スクロールに合わせてフル画面のコンテンツが1ページ毎表示されるものなどが掲載されています。

スクロールで見せていくタイプのWebサイトの実例も紹介されています。

図2　スクロール関連のjQueryプラグインやサンプル

図2　スクロール関連のjQueryプラグインやサンプル

3. Beautiful Examples of Login Forms for Websites and Apps - Designmodohttp://designmodo.com/login-forms-websites-apps/

Webサイトやモバイルアプリのログインフォームのデザインギャラリーです。

フラットでシンプルなログインフォームが集まっている印象を受けました。

図3　ログインフォームのデザインギャラリー

図3　ログインフォームのデザインギャラリー

4. Get The Most Out of Tumblr: 20 Tips, Tricks & Toolshttp://www.hongkiat.com/blog/tumblr-tips-tricks-tools/

Tumblrのちょっとしたテクニックを20個紹介しています。

  • ダッシュボードでのキーボードショートカット
  • フォローボタン，シェアボタンのカスタマイズ
  • 以前のテンプレートに戻す
  • 記事の一括編集
  • スケジュール投稿

上記のようなテクニックや，ブラウザアドオン，カスタマイズのためのスクリプトなど，Tumblrを拡張するための情報も掲載されていました。

図4　Tumblrのテクニックを20個紹介

図4　Tumblrのテクニックを20個紹介

5. 230+ Free PSD Templates {UI, Icons, Mockups, Flyers & Web Templates} | Ginvahttp://ginva.com/2013/12/230-free-psd-templates/

Webデザインに使えそうなPhotoshop素材のテンプレートファイルを大量に集めています。

UIデザインやアイコン，モバイル機器のモックアップなどが紹介されています。

図5　Photoshop素材のテンプレートファイルいろいろ

図5　Photoshop素材のテンプレートファイルいろいろ

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

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

CSS Shapes Generatorhttp://coveloping.com/tools/css-shapes-generator

CSSで図形を作るためのジェネレーターです。四角形をはじめ，平行四辺形，三角形，円形，パックマンのような形やリボン風の形などを作れます。

あらかじめ用意されたテンプレートをベースに，大きさや色などをカスタマイズするのが作りやすいと思います。三角形をCSSで実現する場合などは，おなじみのボーダーを使ったテクニックを使用しているので，ボーダーをいじることでカスタマイズできます。CSSでの図形作成テクニックの勉強にもなりそうです。

作成できたらHTMLとCSSをコピーして使用します。最近はFireworksだけでなくIllustratorでも描いた図形のCSSが取得できる機能が付きましたが，この手のツールはまだまだ必要とされるケースも多いと思います。

図6　CSSで様々な図形を作るためのジェネレーター

図6　CSSで様々な図形を作るためのジェネレーター

今週の気になるWebネタ

番号そのままで発信できる――フュージョン，30秒10.5円の「楽天でんわ」開始 - ITmedia Mobilehttp://www.itmedia.co.jp/mobile/articles/1312/05/news139.html

国内どこでも30秒10.5円という「楽天でんわ」が開始されました。電話番号はそのままで，スマートフォンの通話料を半額にするお得な電話アプリとのことです。

仕組みとしては，相手の電話番号の頭に「0037-68-」を付けて発信することで，楽天でんわの回線（フュージョン・コミュニケーションズの回線）を経由して電話をかけるというものでした。登録ユーザーなら電話番号の頭に「0037-68-」を付けるだけで，専用アプリがなくても通話できるんだとか。似たようなサービスとして，G-Callというのもあります。

ところで楽天って，「⁠PayPal Here」や「Square」のようなモバイル決済の「楽天スマートペイ」をいつのまにか始めていたり，イー・モバイルのポケットWiFiルーターを使った「楽天スーパーWiFi」を提供したりと，話題の領域にはいろいろ手を出しているように思えます。「⁠楽天スマートペイ」はグッドデザイン賞を取っていて驚いたんですが，カードリーダーのデザインではなくサービスそのものが評価されたそうです。

Webテク, Webデザイン, Web広告, Bootstrap, jQuery, Tumblr, Photoshop, CSS, スマートフォン

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote