週刊Webテク通信

2012年7月第4週号1位は、ワイヤーフレーム作成についてのまとめ、気になるネタは、グーグル、電子メールソフト新興企業Sparrowを買収

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

1. Wireframing: Build Websites Like a Pro | Articles | instantShifthttp://www.instantshift.com/2012/07/19/build-websites-like-a-pro-using-wireframing/

Webサイトのワイヤーフレーム作成についてまとめた記事です。作成用のツールも多数紹介されています。

良いワイヤーフレームは、以下のような異なる内容について解答を導くことができるとのことです。

  • レイアウト
  • 優先順位
  • ページ内のコンテンツ
  • ナビゲーション
  • 機能と動作

また、ワイヤーフレーム作成のためのツールをまとめたTop 14 Excellent Free Wireframe Tools Designers/Developers Must Tryという記事もありました。

図1 ワイヤーフレーム作成についてのまとめ
図1 ワイヤーフレーム作成についてのまとめ

2. 50 Useful Responsive Web Design Tools For Designershttp://www.hongkiat.com/blog/rwd-tools/

レスポンシブWebデザインのためのツールを各種紹介しています。

以下の項目に分けて掲載されています。

  • グリッドとフレームワーク
  • スケッチシートとワイヤーフレーム
  • JavaScriptとjQueryプラグイン
  • テストとプレビュー
  • スライダー
  • その他
図2 レスポンシブWebデザインのためのツールいろいろ
図2 レスポンシブWebデザインのためのツールいろいろ

3. CSS3を使って美しく装飾されたテーブルの作り方|Webparkhttp://weboook.blog22.fc2.com/blog-entry-329.html

CSSセレクタをうまく使って、テーブルをCSSで装飾する方法を詳しく説明しています。一行おきの色付けや、角丸、グラデーションなどをCSSだけで実現していて参考になります。

CSSによるデザインが適用されなくても、普通に表としてレンダリングされればそれほど問題はないので、CSS3未対応の環境をそれほど気にせず採用できるテクニックだと思いました。

図3 CSS3でテーブルをデザインする方法の紹介
図3 CSS3でテーブルをデザインする方法の紹介

4. 15 Useful jQuery Parallax Plugins and Tutorials to Create a WOW Factorhttp://medleyweb.com/resources/tools/15-useful-jquery-parallax-plugins-and-tutorials/

jQueryを利用してパララックス効果を実現するプラグインとチュートリアルを紹介しています。

1ページ完結型サイトで最近よく使われる視差スクロールを簡単に実装できそうです。

図4 パララックス効果を実現するjQueryプラグインとチュートリアル
図4 パララックス効果を実現するjQueryプラグインとチュートリアル

5. A Showcase of Geometrical Shape as a Web Design Trend - Bloom Web Design Blog | Bloom Web Design Bloghttp://bloomwebdesign.net/myblog/2012/07/16/a-showcase-of-geometrical-shape-as-a-web-design-trend/

図形を使ったWebデザインのショーケースです。

丸、三角、四角、多角形をうまくデザインに取り入れたサイトが紹介されています。

図5 図形を用いたWebデザインのショーケース
図5 図形を用いたWebデザインのショーケース

そのほか、先週の記事の中から、商品関連の記事を紹介します。

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

20 Ridiculously Simple File-Sharing Web Toolshttp://www.hongkiat.com/blog/file-sharing-tools/

今回は、ファイル共有のためのWebサービスをまとめた記事を紹介します。容量の大きなファイルを誰かに送りたい場合に、DropboxやGoogle Driveで共有する方法もありますが、ほかにも簡単に使える便利なサービスがいろいろあります。

この記事では、おすすめベスト5とそれ以外に分けて、全部で20のサービスが掲載されています。

ファイル共有先が英語のサイトだと、受け取った人が拒否反応を示すケースがある点は注意した方がよさそうです。しかし、余計な広告などのないシンプルで分かりやすいデザインのサービスが多いので、ちょっと解説してあげれば大丈夫だとも思います。

おすすめの1番目に紹介されているMinusは、わたしも好きでよく使っています。無料で10GBの容量がもらえて、1ファイルの制限も1GBなので、あまり容量を気にせずファイルを共有できます。PDFやムービーなどはブラウザ上でプレビューできるのも便利です。

最近インターフェイスが変わって、個人的にはちょっと使いにくくなったと思うのですが、シンプルで見やすいデザインを目指している点は共感できます。

Minusについては、週刊Webテク通信:2012年2月第3週号でも紹介しましたので、興味のある方はそちらもご覧ください。

図6 ファイル共有サービスいろいろ
図6 ファイル共有サービスいろいろ

おすすめ記事

記事・ニュース一覧