週刊Webテク通信

2011年1月第3週号 1位は,2011年のWebデザインのトレンド,気になるネタは,モノとiPhone/iPadアプリを組み合わせた商品が続々登場

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

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

1. The real design trends for 2011 « Web Design Blog ― WebDesignShockhttp://www.webdesignshock.com/review/design-trends-for-2011/

2011年のWebデザインの流行に関する記事です。先週の1位で紹介した記事と同じテーマですが,29項目もありサンプル画像も多く,かなりボリュームのある記事となっています。

背景画像について触れている項目が多く,無地やめてテクスチャーを使うこと,写真を使うこと,さらに進んだことをやりたいなら,アニメーションにすることを薦めています。

デザイン要素に関しては,大きなアイコン,角丸,縞模様,いろいろな影の付け方,縫い付けたようなバッジやバナーなどが流行すると予想しています。

Twitterの新インターフェイスでは,ページの一番下まで行くと次の項目が読み込まれて延々スクロールしていけます。そういった,ページ分割の代わりにプログレッシブなローディングを使うことも,これからのトレンドのようです。その際には,固定されたスクロールされないボタンなどがあると便利ということにも触れられています。

一方で,以下のものは消えていくだろうと予想されていました。

  • ボケ(bokeh)を使った背景
  • 3Dのインターフェイス
  • レトロな感じのデザイン(レトロなフォントは生き残る)

HTML5とFlashに関しては,HTML5がFlashを消し去ってしまうわけではないと強調した上で,多くの領域でHTML5が使われるようになっていくだろうと予想しています。

図1 2011年のデザイントレンド

図1 2011年のデザイントレンド

2. Webportio | Graphical resource of Adobe Fireworkshttp://www.webportio.com/

Fireworks向けグラフィック素材の無料配布サイトです。Webデザインに使用される,ボタンやメニュー,ダイアログのようなレイアウト要素がダウンロードできます。

Fireworksで編集・加工ができるベクターベースの素材ファイルが用意されています。

全てのファイルは商用/非商用ともにフリーで利用できるとのことです。

Fireworks用のウェブデザインの無料素材がダウンロードできる -Webportio | コリスという記事で紹介されていました。

図2 Fireworks向けグラフィック素材の無料配布サイト

図2 Fireworks向けグラフィック素材の無料配布サイト

3. 29 Free CSS Frameworks and Tools for Web Developers | DesignBeephttp://designbeep.com/2011/01/12/29-free-css-frameworks-and-tools-for-web-developers/

CSSフレームワークを集めたリストです。29種類ものフレームワークを紹介していて,それぞれに細かい解説が付いています。

図3 CSSフレームワークをまとめて紹介

図3 CSSフレームワークをまとめて紹介

4. 10 Ideas for Creating Innovative and Unique Web Designshttp://sixrevisions.com/web_design/10-ideas-for-creating-innovative-and-unique-web-designs/

革新的で独創的なWebデザインを作るヒントを紹介した記事です。

以下の10個のアイデアが挙げられています。

  1. 白紙のキャンパスから始めてみる
  2. グリッドデザインの枠組みを取り払って考える
  3. CMSを使わない
  4. オンラインからのインスピレーションを避ける
  5. 今までやったことのないことを最低一つやってみる
  6. 自分がコーディングする必要がないと想定する
  7. 古きに学ぶ
  8. 新しいことを学ぶ
  9. 変わった制約を与えてみる
  10. 他の人と共同作業する

図4 革新的で独創的なWebデザインを作るための10のアイデア

図4 革新的で独創的なWebデザインを作るための10のアイデア

5. 40 Beautiful Web Page Templates in Photoshop PSDhttp://www.hongkiat.com/blog/really-beautiful-psd-web-templates/

Photoshopファイル形式の,美しいWebデザインのテンプレートを数多く紹介しています。

図5 美しいWebデザインテンプレートいろいろ

図5 美しいWebデザインテンプレートいろいろ

そのほか,先週の記事の中から,デザインのインスピレーションになりそうな画像が数多く紹介されている記事を4つ紹介します。

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

ずるっこ!http://zurukko.jp/

「ずるっこ!」は,英語の語彙力を強化する手助けとなるWebサービスです。

このサービスを使うと,英文サイトの各単語の上に,ルビ(よみがな)として日本語訳を表示させることができます。自分の覚えた(知っている)単語をクリックすると,その単語はすでに覚えたものとしてルビが表示されなくなります。

覚えた英単語の数が表示されることで学習意欲がかりたてられそうです。ルビが減るほど見た目がすっきりして読みやすくなるという効果もあるようです。

複数のPCやブラウザで,覚えた単語リストを共有化できるようになっています。

図6 英語サイトに日本語のルビを振るサービス

図6 英語サイトに日本語のルビを振るサービス

今週の気になるWebネタ

モノとiPhone/iPadアプリを組み合わせた商品が続々登場。

クレヨン型のタッチペンと専用アプリを組み合わせたデジタル塗り絵や,手書きメモと専用アプリによりメモのデジタル化を簡単に実現するものなど,物理的なモノとiPhone/iPadアプリとを組み合わせた商品が続々登場しています。

iPadの画面に貼り付けるジョイスティックも開発されていますし,今後ゲームアプリとコントローラーとをセットにしたものも出てくるんじゃないでしょうか。

iPhone/iPad用のワンセグチューナーもハードとアプリの組み合わせですし,その手の商品は今後どんどん増えそうです。アプリは無料だけどモノは有料,モノは無料だけどアプリは有料など,いろんなビジネスモデルが考えられそうです。

キングジムのメモ帳+アプリは,メモ帳は有料でアプリは無料です。メモ帳は消耗品なので継続して売れていくので,無料iPhoneアプリでガッチリ儲かった例となるかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入