週刊Webテク通信

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

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

ネットで見かけた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 ファイル共有サービスいろいろ

今週の気になるWebネタ

グーグル,電子メールソフト新興企業Sparrowを買収--「Gmail」チームに編入 - CNET Japanhttp://japan.cnet.com/news/business/35019459/

MacおよびiOS用のメールクライアント「Sparrow」を開発するSparrowがGoogleに買収されました。Sparrowは会社名でもあったんですね。

わたしはGmailをブラウザ上で使いつつ,Sparrowも併用していました。MacとiPhoneで使っていたのですが,特にMac上のSparrowが好きでした。いや,まだ過去形にしなくてもいいのですが,もう新機能の開発がストップということで,事実上終わってしまった商品ということでしょう。

Sparrowの基本機能はもちろん気に入ってるのですが,わたしの心をくすぐっていたのはFacebook&Dropboxと連携する機能です。

Facebookアカウントで認証しておくと,メール送信者がFacebookユーザーのときにはFacebookのユーザーアイコンが表示されます。メールのやりとりをしている相手がFacebookをやってるかどうか分かるわけで,賛否あるかもしれませんが便利です。

ファイルを添付する場合,Dropbox経由で送れる機能も気が利いています。メール作成画面にファイルをドラッグ&ドロップするだけで,自動でファイルがDropboxのパブリックフォルダにコピーされ,Dropboxへのリンク先URLが記述されます。もちろんDropboxのアカウントを持っていて,Sparrowの環境設定でDropboxを認証しておく必要があります。

Facebookに対抗したGoogle+,Dropboxに対抗したGoogle Driveと,どちらも競合したプロダクトをGoogleは持っています。今後Sparrow開発チーム中心に新たなGmailクライアントが登場したとしても,Facebook&Dropbox連携機能は付かないのかなと思うと残念ですね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入