週刊Webテク通信

2013年10月第4週号1位は、スライドして表示/非表示されるメニューを作るjQueryプラグイン集、気になるネタは、Amazon.co.jp、連載形式で電子書籍を自動配信する「Kindle連載」開始

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

1. 20 jQuery Side Sliding Panel Plugins (show-hide) For Your Website - Designbeephttp://designbeep.com/2013/10/22/20-jquery-side-sliding-panel-plugins-show-hide-website/

レスポンシブWebデザインでよく見かける、スライドして表示/非表示されるメニューを作るjQueryプラグインが大量に紹介されています。

最初はメニューが隠れていて、ボタン(3本線の場合が多い)を押すとメニューがスライドして出現するという、モバイルアプリでよく見かけるインターフェイスです。FacebookやGoogle+のアプリで有名ですね。

Facebookのモバイルアプリのように、メニューが出現するとともに表示されていたページ内容が全部スライドして画面の外に出て行くのをオフキャンバス(off-canvas)と言ったりします。この記事では、Sidr、Mmenu、jPanelMenu、PageSlideなどがオフキャンバスですね。

個人的にはオフキャンバスの動きが好きなのですが、オフキャンバスにこだわる必要もないのかなと最近思い始めています。

図1 スライドして表示/非表示されるメニューのためのjQueryプラグイン集
図1 スライドして表示/非表示されるメニューのためのjQueryプラグイン集

2. Build a Clean Website Design - Examples, Tips and Templates | Design Web Kithttp://designwebkit.com/web-and-trends/build-clean-website-design-examples-templates-tips/

クリーンなWebデザインに関する作例やテクニック、テンプレートなどをまとめた記事です。

  • レイアウト
  • グラフィックス、テクスチャーとパターン
  • ナビゲーション
  • タイポグラフィ
  • ホワイトスペース
  • アイコン

といった要素について解説した後、アイコンやテンプレート素材を紹介しています。

図2 クリーンなWebデザインに関する作例やテンプレート
図2 クリーンなWebデザインに関する作例やテンプレート

3. 25+ Best jQuery Tabs Plugins of 2013 | Coderopshttp://coderops.com/2013/10/jquery-tabs-plugins/

タブナビゲーションを実現するjQueryプラグインを多数紹介した記事です。

レスポンシブなものや、アニメーション効果があるものなど、色々なタブが掲載されています。

図3 タブを実装するQueryプラグインいろいろ
図3 タブを実装するQueryプラグインいろいろ

4. 10 Tools that will Revolutionize your Workflow as a Web Designerhttp://szaboka.hu/articles/10-tools-will-revolutionize-workflow-web-designer/

Webデザインに役立つツールを10個紹介した記事です。

有名なツールが多いのですが、ただ闇雲に数を揃えたまとめ記事ではなく、本当に自分が使っているツールをセレクトした感じが気に入ったので紹介します。

図4 Webデザインに役立つツール10選
図4 Webデザインに役立つツール10選

5. CMS導入前にしておきたい質問 : couldhttp://www.yasuhisa.com/could/article/before-implimenting-cms/

CMSを選別する前に、本当にCMSの採用が適切かどうかを考える必要性を訴えた内容なのですが、記事中で「Micro CMS」として紹介されているCMSが興味深かったので取り上げました。

特定の用途に特化した分、機能は少ないけどシンプルで軽量・高速というCMSがまとめてあり、試してみたいものばかりです。既に話題になったものもありますが、こうしてまとめてある記事はありがたいですね。

図5 Micro CMSがまとめて紹介されています
図5 Micro CMSがまとめて紹介されています

そのほか、最近の記事の中から、Webデザインのギャラリーを3つ紹介します。

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

Your designs - Canvahttps://www.canva.com/

Canvaは、デザイナーじゃない人でも簡単にチラシやポスターなどをデザインできるサービスです。あらかじめ用意されたテンプレートをベースに、文字や写真を変更するだけで、それなりに見栄えのいいものが作れるようになっています。

作るドキュメントの種類は、A4ドキュメント、ポスター、カード、名刺など用途(サイズ)別に用意されています。Facebookカバー画像サイズもありました。

テンプレートはやはりアメリカっぽいデザインが多いのですが、おとなしめのデザインもそれなりに見つけられます。テンプレートの種類はそれほど多くないのですが、デザインの要素として使える素材は膨大に用意されています。

この、写真やイラストなどの素材は検索できるのですが、100万以上用意されていると書いてあります。どうやら無料の素材は数百ほどで、ほかは有料のようです。有料といってもほとんどが1ドルなので、ついつい買ってしまう人も多そうですね。

操作感もいいですし、非デザイナーにはおすすめできそうだと感じました。個人的には、コマンド+Zでのアンドゥに対応しているところが気に入りました。

図6 非デザイナー向けのデザインツール
図6 非デザイナー向けのデザインツール

おすすめ記事

記事・ニュース一覧