週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入