よりリッチで、よりフレンドリーになったウェブデザインの現状 -2010年のトレンド
Post on:2010年5月11日
sponsors
最近見かけるウェブデザインの新しいトレンドをSmashing Magazineから紹介します。
The Current State of Web Design: Trends 2010
下記は記事の意訳と実例をいくつか抜粋したものです。元記事では他にも多数の実例が紹介されています。
はじめに
ウェブデザインとは移り変わりが激しい業界です。他のすべての芸術的な表現とまったく同じように、ウェブデザインは絶え間なく、そして驚くほど早いスピードで進化を遂げてきました。
そして現在、私たちはウェブデザインの黄金時代を経験しているところです。それはこれまでのところ、少なくとも最も良い期間です。主要なブラウザで利用できる新しいツール（CSS3, HTML5, 埋め込みフォントなど）、自由に利用が可能な多くのリソース、デザインコミュニティなど、ウェブのスタンダードの信頼性が高いサポートを持っています。
私たちはより良いインタラクションなデザインや審美的なデザインを見ています。そして同様に個人的で魅力的で印象的なサイトも見ています。これらの差は何でしょうか？ ウェブデザインは今日どんな新しい方向に向かっているのでしょうか？ どんな新しいテクニックや概念とアイデアが重要になるのでしょうか？
この記事で私たちはウェブデザインの最新の状況とその所見をだしました。私たちは既存の、そして気たるトレンドがどのように進展するかもしれないか説明します。ウェブデザイナーとして新しいチャレンジとチャンスを逃さない準備に簡単に触れることができるでしょう。
1. Design For Delight
デザイナーとして、私たちの仕事は効果的にアイデアを伝えることです。伝えるべき全ての個々のメッセージのために、私たちはタスクを達成して信頼を得るか、あるいは確信させることにユーザーを導いて、最も良いメッセージが機能するであろうコンテクストを作成します。もちろん、このコンテクストを作成するには多くの方法があります。その一つに、楽しむためのデザイン（ビジュアルの美学、驚き、喜び、幸せ）は印象的で、注目に値するデザインです。
魅力的なものは良く機能し、興味をひき、ユーザーの注意を保持します。印象的なデザインはプロダクトやブランドを一層エキサイトなものにします。これはあなたのキャリアの中でも、クライアントとそのユーザーの間に強く、信頼性の高いエモーショナルな関係が築けるという最も良いものとなるでしょう。
brizk designは美しいタイポグラフィ、クリーンなレイアウト、繊細なアニメーションを使用した審美的で魅力的なサイトです。フッタのあたりをマウスでホバーすると、赤い小鳥のパネルがスライド表示されます。これが純粋に、楽しめる、というデザインです。
このようなデザインは見て楽しく、ナビゲートするのが楽しいですが、最も重要なことは印象的であるということです。
ウェブデザインに楽しめるエッセンスを加えることで、他のサイトより際立った印象をユーザーに与えることができます。そして、それは良いスタートとなるでしょう。
楽しませる方法にはいろいろなものがあります。404などのエラーページ、メンテナンス用のページ、読み込み時のローダーなどさまざまな箇所に可能です。
BountyBevは美しい１ページレイアウトを採用したサイトです。その繊細なホバーエフェクトとアニメーションは別として、このサイトには素敵な仕掛けがあります。マウスのホイール操作でTOPからスクロールをすると、コンテンツが無くなり線路だけが表示されますが、しばらくすると、ページを自動スクロールできるリフトが必要かというポップアップが表示されます。
デザインは遊び心に溢れていて、タイポグラフィは力強く忘れがたいものとなっています。シンプル、クリアー、パーソナル、こういったキーワードがウェブサイトの強いポジティブな印象として残ります。
analog
キャプチャはイースターエッグ。
analogはユーザーに非常にパーソナルなエクスペリエンスを与えるサイトです。サイトを見ただけでは目に見えない二つの素敵なイースターエッグを持っています。こういったページは探求するのが楽しいものです。
2. Keypressナビゲーション
デザインをいっそう直感的にしようとする際、ウェブサイトがすぐ応答するようにすることは意外ではありません。単にこれはデスクトップのアプリケーションと同じく強靱でスマートな最新のウェブアプリケーションのユーザーインターフェイスに当てはまるだけではありません。同様に、JavaScriptのライブラリを採用することで、クラシックなウェブサイトがいっそう強靱で、インタラクティブなものになっています。ウェブサイトをよりすぐに応答させる一つの方法は、これまであまり採用されていなかったキーボードを使用した「Keypressナビゲーション」です。
「Keypressナビゲーション」は一般的に、ブログのポストやスライドショーの画像など、セクション間の移動のような退屈なタスクを行うために使用します。「Keypressナビゲーション」はFlashベースでも、CSSベースでもはまります。Google Readerは「Keypressナビゲーション」の良い例です。しかし他にも同じく素晴らしいウェブサイトがあります。
2ヵ月ほど前に、このサイトではクラシックなスクロールによる操作に代わるキーボードナビゲーションの選択を提供しはじめました。これはページのメインナビゲーションでモードを切り替えることが可能で、矢印キーでコンテンツ間のナビゲート、リターンキーで詳細なビューを表示、エスケープキーでメインページに戻るものでした。しかしながら、このナビゲーションは現在では利用可能ではありません。
FetaはFlashベースのサイトで、矢印キーのみで操作を行います。セクションの移動は矢印キーの左右で、上は戻る、下は申し込みの非常にシンプルな操作です。
これまでの中で最も目立ったデザインの一つであることは別として、このサイトでもKeypressナビゲーションを採用しています。ナビゲーションの全ての項目は数字のショートカットで遷移することができます。これはとても面白いです。
3. 印刷デザインの活用
デザインに楽しみを与えることは、主にデザインに意外性や楽しいタッチでユーザーに強い印象を与えるものです。モダンなウェブデザイナーはさらに一歩すすみ、いっそう創造的にそしてユニークなレイアウトを作り出します。その仕事の基礎となるディテールを使って、実験をします。ここで紹介するウェブにおける伝統的な印刷デザインのテクニックはエキスポートでなくてもよいです。
印刷デザインを活用したウェブサイトのレイアウトは、しばしば雑誌やポスターのレイアウトに似ていて、見出しの使い方、マルチカラムのテキスト、引用、字下げなどが使用されています。デザインは通常グリッドを採用しており、力強くてビビッドなタイポグラフィを使用するのも特徴的です。
The Bold Italic: Dr. Feel Good
このサイトは多くの縦列のカラムと画像と見出しとサイドバーがあり、非常に強い印象を与える雑誌風のレイアウトを採用しています。もし、このページのプリントアウトを見ただけなら、あなたはこれがウェブデザインとして認識できないでしょう。
A Way Back: Revised Font Stack
とても長いページで、きめ細かい入念なデザインのサイトです。大きい画像がしばしばレイアウトの境界線として使用されたアートに方向づけられたデザインとなっています。使用されている画像はレイアウトの幅を満たすもので、800～1000pxのものとなっています。
伝統的な印刷デザインです。このような大きいビジュアルとテキストが雑誌に使用されていたことを覚えていますか？
このビジュアルの上に、見出しなどのテキストがうまく配置されていることに気が付いてください。シンプルだけど、素敵なオリジナルのデザインです。
4. Horizontalism
若干のデザイナーは伝統的な素直方向のスクロールを好みます。ここで紹介するのは、垂直と水平の両方、もしくは水平のみにスクロールする「Horizontalism」と呼ばれるものです。
水平方向のスクロールは、マウスが垂直のスクロールをするために設計されているため、ナビゲートすることが難しいものでした。しかし、マルチタッチデバイスの登場により、このデザインのユーザビリティを再考する必要があります。
このデバイスは、ユーザーがこれといった目的もなく見回す時には垂直でも水平でも相違を生じさせません。そして、jQueryのプラグインなどを使用することで、マウスの垂直方向のスクロールを水平方向に代用することも簡単にできるようになりました。
水平方向のスクロールバーは今までずっと、ブラウザのそこに存在していました。そして、今日それは新しいコンテクストを得ていると感じます。水平方向のスクロールバーを使用した動きは今までは別のユーザーエクスペリエンスを提供するデザイナーの試みとなります。
「Horizontalism」を使用したデザインは、主にポートフォリオやEコマースサイトで見られ、慎重で精巧な細工がほどこされています。「Horizontalism」がもっと多くのウェブサイトで使用されるかは今後数ヶ月見守る必要があります。
このワインリストのウェブサイトはユニークで面白い水平方向のナビゲーションを採用しています。それはワインカタログをブラウザするときに動作します。
背景画像とワインの説明テキストがアニメーションで移動します。美しく、見栄えのあるデザインです。
多くのエレメントに垂直な線がないことに気がついてください。
水平方向に関するリーダビリティの有利な点と不利な点を論じているだけではありません。このサイト自身の多数のテキストコラムに、素敵な水平なレイアウトを採用しています。
5. リッチでストロングなタイポグラフィ
タイポグラフィは何年もの間、ウェブデザインで主要な役割を果たしてきました。「bold」「strong」「heavy」な見出しはEコマースサイトやポートフォリオサイトで効果的に目的を伝えることができます。また、繊細な見出しはコンテンツを組み立てて、明瞭性を改善するのを手伝います。
今日、私たちが見ている大きな変化は部分的にフォントの埋め込みを使用していることです。タイポグラフィのエレメントはリッチになり、それは選択してコピーすることも可能です。
これからのタイポグラフィは「big」と「bold」です。リッチなフォントファミリーをウェブで使用し、見出しだけではなく、ボディコピーにも使用されるようになるでしょう。
また、ウェブデザイナーはCSS3のtext-shadowを使用して、タイポグラフィにもっと多くの深さを加えています。当然、このような繊細さはレイアウトの選択にも密接に関係があります。これらタイポグラフィのデザインの多くはグリッドベースであり、印刷デザインからテクニックを使用します。
このサイトではセリフ系のフォントが特徴的に使用されています。CSSで指定しているのも「Palatino, "Palatino Linotype", "Book Antiqua", Constantia, Times, "Times New Roman", serif」となっています。
このサイトではテキストの多くを大文字にしていることに気がついてください。ナビゲーション、イントロのテキスト、コンタクトのアドレスなどは全部大文字表記となっています。
それでもこのデザインは落ち着きがあり、クリーンで洗練されています。
このサイトではセリフフォントのベストなものを見せてくれます。フォントはサイトのテーマを補完し、そしてレイアウトに完璧にはまっています。
美しいビジュアルデザインと伝統あるタイポグラフィがどれだけうまく一緒に機能するか気がついてください。
まとめ
最新のウェブデザインは、より良く、よりリッチで、そしてよりフレンドリーになっています。私たちは美学と楽しめるユーザーエクスペリエンスのためにビジュアルデザインのもっと良い使い方を見ています。
レイアウトのテクニックやリッチで多目的に利用できるタイポグラフィなど、印刷デザインの伝統的なテクニックはますますウェブに適用されています。水平や対角線を使用したデザインも新鮮で、テキストベースでもFlashベースのページでもフラットな2Dのデザインをもたらします。
これらの開発はデザイナーが多くの可能性に新しいツールとテクニックを使うことができる、ウェブデザインの来たるべき時代のサインとなります。
ウェブデザイナーはこれらのエキサイティングで前途有望な年を楽しみにするべきです。
sponsors
