週刊Webテク通信

2011年5月第4週号1位は、少ない労力ですばらしいWebサイトを作るためのアイデア、気になるネタは、世界中のプレイ時間は1日2億分 Angry Birdsはミッキーマウスになれるか?

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

1. 9 Ideas for Building Great Websites With Lesshttp://www.hongkiat.com/blog/building-great-website-with-less/

少ない労力と費用で、すばらしいWebサイトを作るためのアイデアを解説しています。

以下に各項目を簡単に紹介します。

  1. アイコンデザインからプログラムまでを全てひとりでこなすのは難しいので、チームで作業したりWebサービスを利用したりする
  2. プログラマとデザイナーを引き合わせるコミュニティのような、フリーランサーのためのアウトソーシングサービスを利用する
  3. jQueryやMooToolsのようなオープンソースのJavaScriptライブラリ、WordPressのようなオープンソースのブログプラットフォームなどを活用する
  4. グラフィックスを無料で配布しているサイトは増えており、そういったところからダウンロードしたアイコンを使うことも、Webサイトを早く立ち上げるために役立つ
  5. バーゲンを利用するなど、ホスティングやファイル共有に費用をかけないようにする
  6. 無料のツールやサービスを利用して、Webサイトのパフォーマンスチェックを行う
  7. 安価な(または無料の)コードエディタを利用する
  8. フォーム要素やユーザーインターフェイスの要素には、ダウンロードして使えるスターターキットのものを使い、別のところで創造性を発揮する
  9. オンラインのチュートリアル記事などを利用して、常に勉強し続けることが必要
図1 少ない労力ですばらしいWebサイトを作るための9つのアイデア
図1 少ない労力ですばらしいWebサイトを作るための9つのアイデア

2. Elegant and Engaging Web Forms Part 2: Login and Registration Formshttp://webdesigncrowd.com/elegant-engaging-web-forms-login-registration/

ログイン/レジストレーションのフォーム画面に関するまとめ記事です。

実例を大量に紹介しているほか、作成に役立つチュートリアルやテクニックへのリンクもまとめられています。

図2 ログイン/レジストレーションのフォーム作成に役立つまとめ
図2 ログイン/レジストレーションのフォーム作成に役立つまとめ

3. クロスブラウザはもう古い! HTML5+CSS3時代のプログレッシブ・エンハンスメント (1/2)- @IThttp://www.atmarkit.co.jp/fwcr/design/tool/ichigeki15/01.html

プログレッシブ・エンハンスメントの考え方の紹介と実例、実装方法のサンプルを紹介しています。

知っている人には今さらという内容かもしれませんが、とてもわかりやすくまとめてあります。技術者以外の人に読んでもらうのにも、おすすめできる内容です。

面白法人カヤックの人が書いています。作例の紹介に、同社が運営するjsdo.it - share JavaScript, HTML5 and CSSを利用しているのですが、この見せ方はいいですね。

図3 プログレッシブ・エンハンスメントの解説と実例
図3 プログレッシブ・エンハンスメントの解説と実例

4. 15 Very Useful iPad Apps For Web Designers | Top Design Magazine - Web Design and Digital Contenthttp://www.topdesignmag.com/15-very-useful-ipad-apps-for-web-designers/

Webデザイナーに役立つiPadアプリを15個紹介しています。

手書きのスケッチツールやグラフィックツールも、iPadの画面サイズなら実用的でしょう。コードエディタやFTPツールもあります。

CSSを勉強するためのビデオチュートリアルやユーザビリティのガイドラインを閲覧するものなど、DVDや紙の書籍の代わりとなるものも多いですね。

パソコンの脇にiPadを置いて、iPadの画面を参照しながら作業をするというシーンが今後増えていくのかもしれません。

図4 Webデザイナーに役立つiPadアプリ15選
図4 Webデザイナーに役立つiPadアプリ15選

5. 32 Elegant and Minimalist Icon Packs | PSDFanhttp://psd.fanextra.com/articles/32-elegant-and-minimalist-icon-packs/

ミニマルなアイコンを32セット紹介しています。シンプルで汎用性の高いアイコンが多く、WebサイトやWebサービスで重宝しそうです。

ベクターアイコンや、小さなビットマップのアイコンもあります。

図5 シンプルなアイコンセットいろいろ
図5 シンプルなアイコンセットいろいろ

そのほか、先週の記事の中から、気になるニュース記事を3つ紹介します。

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

Fyels - The worlds simplest file sharing sitehttp://fyels.com/

Fyelsはファイル共有のためのWebサービスです。非常にシンプルなインターフェイスが特徴です。

ページへアクセスすると、ファイルをドラッグ&ドロップするための大きなエリアがあるだけで、迷いようがありません。ファイルをドラッグ&ドロップするとすぐにアップロードされ、完了とともにURLが生成されます。ログインも不要です。

アップロードした画像やPDFなどは、ブラウザ上でプレビューを見ることができて便利です。

Twitter IDでログインすると、専用URLで自分の領域(Fyels drive)を持つことができ、複数のファイルをアップロードできます。ファイルをアップロードすると、Twitterに自動で告知されます。秘密のファイルを貯めておく用途には使えませんね。

Facebook経由で「友達」に知らせるための「share」ボタンと、⁠いいね!」ボタンも付いています。

容量の制限は特にないようで、ログインすると「this is your own unlimited Fyels drive」と表示されます。ファイルをアップロードするときに「upto 9Gb」と表示されているのは、1ファイルの上限が9GBということでしょうか。

図6 非常にシンプルなファイル共有サービス
図6 非常にシンプルなファイル共有サービス

おすすめ記事

記事・ニュース一覧