2011年、押さえておきたいウェブデザインの11のトレンドとテクニック

Post on:2011年1月11日

1. HTML5 + CSS3

HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。
多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。

Harmony(HTML5)

Scribblertoo(Flash)

ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、2010年まではデザイナーがFlashを誤って使用していたということです。例えば、よほどのことがない限り、サイト全部をFlashで作るべきではありません。
HTML5は、私たちがFlashに対して与えていた負担のいくらかを軽減するでしょう。しかしながら、HTML5は非凡なデザインエレメントをつくるためにFlashに取って代わることはまだできません。

そして、CSS3です。これはさらに私たちにとって面白いものとなるでしょう。Photoshopでさまざまな面白いデザインを創ってください。なぜなら、CSS3はテキストシャドウ、角丸、不透明度など面白い仕事を担います。
もし、あなたがHTML5, CSS3に手をつけてなかったら、今がまさに勉強する時です。

2. シンプルなカラースキーム

メッセージは、シンプルほど強く影響を与えることは他にありません。
これはブラック、ホワイト、そしてグレーのことを言っているのではありません。グリーン、イエロー、そしてレッドでさえも、プライマリーカラーとして考えられます。ここで重要なのは、カラーパレットを2色、あるいは3色に制限することです。少ないカラーをサイトに使用することで、メッセージが本当の意味で注目されるでしょう。

Tori's Eye

Collisionlabs

3. モバイル対応

あなたのウェブサイトは、iPhone, Android, iPad, Netbookなどに対応していますか？
これは、あなたのウェブデザインが多くのビューポートに対応していることを意味しています。

これらの専用のページを用意する必要はありません。幸いなことに、技術で簡単にカバーできます。そうです、CSS3のMedia Queriesを使用すると、ユーザーの使用するデバイスに合わせたウェブでサイトを提供できます。
モバイル専用のサイトを設けることは誘惑的であるかもしれません。しかし、それではもうユーザーを満足させることはできないかもしれません。

もし、あなたがこの選択をせず、モバイル用に最適化をしないのであれば、それは2011年の準備ができていない、ということです。
今年は、デスクトップパソコンより、モバイル端末が数多く売れると予測されています。ユーザーの欲求を満たすためにあなたのウェブサイトも準備をしておいてください。

4. 視差効果

2011年のホットなウェブデザインのトレンドの一つに、パララックス（視差効果）を使ったスクロールがあります。これは例えば、3つのレイヤーを異なるスクロールで動かし、スペースの錯覚を提供するために使用します。実装するには、CSSでもjQueryでも可能です。

スクロールさせるものは、ヘッダやフッタ、背景などウェブデザインで第二のエレメントに適用すると効果的です。
ナビゲーションなど重要なエレメントに適用してしまうと、ユーザーを失望させるかもしれないので注意してください。

Row of the Pole

5. タッチスクリーン

マウス操作ではなく、タッチスクリーン用にウェブサイトを設計します。現在、タブレットやスマートフォンをはじめ、いくつかのデスクトップのデバイスがタッチスクリーンを採用しています。これはユーザーをナビゲートする際に使うものは、マウスではなく指先自身であるということです。あなたのナビゲーションは、指先での操作に向いていますか？

おそらく、多くのデザイナーはマウス志向でデザインを行っているでしょう。例えば、リンク箇所にホバーを指定していませんか？　タッチスクリーンにはホバーがありません。
あなたのデザインはどのようにユーザーにリンクを示すでしょうか？　ドロップダウンは使ってませんか？　それもタッチスクリーンではダメです。
同様に、ユーザーはサイトをどのようにざっと読むでしょうか？　一般的なウェブページのブラウジングと同じくいくかの意見はありますが、水平スクロールはタッチスクリーンにとって好ましい可能性があります。ちょうど、雑誌をパラパラめくるようなレイアウトがいいです。

2011年のウェブデザインはフレキシブルである必要があります。

アップル - iPad

6. 奥行き

これは、何年か前に流行ったコーヒーカップやキーボードを真上から見たデザインのことではありません。奥行きをもたせたデザインを利用し、ウェブデザインに次元をつくりだすことです。

ベストセラーとなった3D映画「Avatar」を見ましたか？　エレメントはスクリーンから文字通りジャンプしていました。3Dの技術はまだウェブデザインにおいては達成できませんが、あなたのデザインで奥行きをつくり、魅力的にすることはできます。

Plántate

Jordan History of Flight

7. 大きい写真の背景

大きい写真画像を使用した背景は、2011年いっそう増えるでしょう。画像は高精細で、サイトの全部をカバーするものを使用します。

使用する写真は、コンテンツの内容に対して適切なものにします。何のコンテクストもなしで、単に美しいという理由だけで写真を使用することは、ユーザーを混乱させることになります。

Somewhere le film - Accueil

iFly Magazine

背景画像をブラウザの枠いっぱいに表示するテクニックの考察

8. 素敵なドメイン名

ウェブデザインもそうですが、ドメイン名も非常に重要です。過去に皆が欲しがるようなドメインはその魅力を失っています、現在は誰も思いつかないようなドメイン名が魅力的です。
これは、.comではなく、.me, .us などそういった中から素敵なドメイン名を見ることができます。ドメイン名を考えて、それが取られる前に取ってください。

http://joshsullivan.me/

http://www.photosheep.me/

9. QRコード

雑誌や名刺に正方形のバーコードがあることに気がついたなら、あなたはすでに2011年のホットなトレンドを既に知っているかもしれません。このバーコードは、QRコードと呼ばれるもので、QRはQuick Responseの略です。
QRコードはケータイのカメラで撮影すると、バーコードに登録されているウェブサイトを簡単に呼び出すことが可能です。QRコードの使い道は、他にもいろいろあります。

もし、あなたがモバイルサイトを運営しているなら、QRコードをうまく利用してみてください。登録したURLに特別なコードを与えると、QRコードを通じてユーザーの追跡も可能です。
2011年はモバイル抜きには語れません。そして、この新しいメディアを巧く利用してください。