2011年、押さえておきたいウェブデザインの11のトレンドとテクニック
テーマ：仕事術・ネット関連2011年、押さえておきたいウェブデザインのトレンドやマスターしておきたいテクニックを紹介します。
以下、各ポイントを意訳したものです。
- 1. HTML5 + CSS3
- 2. シンプルなカラースキーム
- 3. モバイル対応
- 4. 視差効果
- 5. タッチスクリーン
- 6. 奥行き
- 7. 大きい写真の背景
- 8. 素敵なドメイン名
- 9. QRコード
- 10. サムネイルデザイン
- 11. Life Stream
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に手をつけてなかったら、今がまさに勉強する時です。
関連情報：プレゼント実施中
現在、当サイトではHTML5とCSS3の本をプレゼントしています。ご応募、おまちしています。
締切は、2011年1月13日です。
2. シンプルなカラースキーム
メッセージは、シンプルほど強く影響を与えることは他にありません。
これはブラック、ホワイト、そしてグレーのことを言っているのではありません。グリーン、イエロー、そしてレッドでさえも、プライマリーカラーとして考え
られます。ここで重量なのは、カラーパレットを2色、あるいは3色に制限することです。少ないカラーをサイトに使用することで、メッセージが本当の意味で
注目されるでしょう。
3. モバイル対応
あなたのウェブサイトは、iPhone, Android, iPad, Netbookなどに対応していますか？
これは、あなたのウェブデザインが多くのビューポートに対応していることを意味しています。
これらの専用のページを用意する必要はありません。幸いなことに、技術で簡単にカバーできます。そうです、CSS3のMedia Queriesを使用すると、ユーザーの使用するデバイスに合わせたウェブでサイトを提供できます。
モバイル専用のサイトを設けることは誘惑的であるかもしれません。しかし、それではもうユーザーを満足させることはできないかもしれません。
もし、あなたがこの選択をせず、モバイル用に最適化をしないのであれば、それは2011年の準備ができていない、ということです。
今年は、デスクトップパソコンより、モバイル端末が数多く売れると予測されています。ユーザーの欲求を満たすためにあなたのウェブサイトも準備をしておいてください。
関連記事：
4. 視差効果
2011年のホットなウェブデザインのトレンドの一つに、パララックス（視差効果）を使ったスクロールがあります。これは例えば、3つのレイヤーを異なるスクロールで動かし、スペースの錯覚を提供するために使用します。実装するには、CSSでもjQueryでも可能です。
スクロールさせるものは、ヘッダやフッタ、背景などウェブデザインで第二のエレメントに適用すると効果的です。
ナビゲーションなど重要なエレメントに適用してしまうと、ユーザーを失望させるかもしれないので注意してください。
関連記事：
5. タッチスクリーン
マウス操作ではなく、タッチスクリーン用にウェブサイトを設計します。現在、タブレットやスマートフォンをはじめ、いくつかのデスクトップのデバイ スがタッチスクリーンを採用しています。これはユーザーをナビゲートする際に使うものは、マウスではなく指先自身であるということです。あなたのナビゲー ションは、指先での操作に向いていますか？
おそらく、多くのデザイナーはマウス志向でデザインを行っているでしょう。例えば、リンク箇所にホバーを指定していませんか？ タッチスクリーンにはホバーがありません。
あなたのデザインはどのようにユーザーにリンクを示すでしょうか？ ドロップダウンは使ってませんか？ それもタッチスクリーンではダメです。
同様に、ユーザーはサイトをどのようにざっと読むでしょうか？ 一般的なウェブページのブラウジングと同じくいくかの意見はありますが、水平スクロールはタッチスクリーンにとって好ましい可能性があります。ちょうど、雑誌をパラパラめくるようなレイアウトがいいです。
2011年のウェブデザインはフレキシブルである必要があります。
6. 奥行き
これは、何年か前に流行ったコーヒーカップやキーボードを真上から見たデザインのことではありません。奥行きをもたせたデザインを利用し、ウェブデザインに次元をつくりだすことです。
ベストセラーとなった3D映画「Avatar」を見ましたか？ エレメントはスクリーンから文字通りジャンプしていました。3Dの技術はまだウェブデザインにおいては達成できませんが、あなたのデザインで奥行きをつくり、魅力的にすることはできます。
7. 大きい写真の背景
大きい写真画像を使用した背景は、2011年いっそう増えるでしょう。画像は高精細で、サイトの全部をカバーするものを使用します。
使用する写真は、コンテンツの内容に対して適切なものにします。何のコンテクストもなしで、単に美しいという理由だけで写真を使用することは、ユーザーを混乱させることになります。
関連記事：
8. 素敵なドメイン名
ウェブデザインもそうですが、ドメイン名も非常に重要です。過去に皆が欲しがるようなドメインはその魅力を失っています、現在は誰も思いつかないようなドメイン名が魅力的です。
これは、.comではなく、.me, .us などそういった中から素敵なドメイン名を見ることができます。ドメイン名を考えて、それが取られる前に取ってください。
9. QRコード
雑誌や名刺に正方形のバーコードがあることに気がついたなら、あなたはすでに2011年のホットなトレンドを既に知っているかもしれません。このバーコードは、QRコードと呼ばれるもので、QRはQuick Responseの略です。
QRコードはケータイのカメラで撮影すると、バーコードに登録されているウェブサイトを簡単に呼び出すことが可能です。QRコードの使い道は、他にもいろいろあります。
もし、あなたがモバイルサイトを運営しているなら、QRコードをうまく利用してみてください。登録したURLに特別なコードを与えると、QRコードを通じてユーザーの追跡も可能です。
2011年はモバイル抜きには語れません。そして、この新しいメディアを巧く利用してください。
カラフルなQRコードを作成するフリーソフト「ColorfulQRCodeMaker」 のキャプチャ
10. サムネイルデザイン
一般的なユーザーは、Googleの検索でサムネイルブラウジングを初めて経験したことでしょう。ウェブサイトのコンテンツを見るために、クリックの必要が日々なくなってきています。最近、このホバーと拡大鏡が多くなってきていませんか？
もしあなたのデザインがFlashベースであるなら、これは問題があります。プレビューであなたのデザインでそれらのエレメントは表示できないでしょう。
2011年、さらに多くの人がこれらの手段によってナビゲートして見ることを想定してください。
11. Life Stream
最後はLife Streamなど、繋がることにフォーカスをおきます。
2011年の個人ブログやポートフォリオはTwitterのFeedによるライブが注目されるでしょう。人々は自分の活動をリアルタイムに伝えることができます。
そして2011年、これはきっと身の毛がよだつようなストーカー事件がおきるでしょう。それについては疑い無しです。
1 ■あほなん？
http://coliss.com/articles/build-websites/operation/design/web-design-trends-in-2011-by-webdesignledger.html
これ、コリスの記事だろ
通報しよう。そうしよう
みなさーーん！超★有名なコリスの記事もぱくっとりまっせーー!!!!!!.!!.www
コリス見てる人が見たら絶対わかんのにw
コリス有名なの知らないんか？