週刊Webテク通信

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

ネットで見かけた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で様々な図形を作るためのジェネレーター

おすすめ記事

記事・ニュース一覧