ウェブデザインと開発: 新しい端末における 11 のウェブデザイントレンド

この記事の著者@小吉的宠物、デザインと開発の間には微妙な境界線がありますが、時代がさらに10年に入ると、この境界線はますます曖昧になり、その存在さえ感じられなくなります。

PS を使用して Web ページのレイアウトを設計するだけで十分でしょうか? 5 年前はそうだったかもしれません。今日のインターネット ユーザーの要件はますます多様化しています。実体のない華やかさはすぐに捨て去られるでしょう。派手なデザインを追い求めていると、すぐに時代遅れになってしまうと思います。

2011 年は、純粋な贅沢ではなく、機能性が重視されます。新年または次の 10 年間のデザイン トレンドは、レスポンシブ デザイン、常時接続、仮想現実です。

デザイナーとして、2011 年に何をしますか? 真のデザイナーは注目を集めるためにデザインするのではなく、芸術性と機能性の両方の長所を実現するようにデザインします。 。

表面的な賞賛は簡単に得られますが、表面的なデザインは忘れられやすいものでもあります。優れたデザイナーは夢を創造する人のようなもので、ユーザーが夢を見ていることにさえ気づかないほどリアルに感じられる夢を創造します。このような夢を実現するには、優れたカラーマッチング、直感的なデザイン、優れたインタラクティブ性、高速な応答速度など、いくつかの要素が必要です。

また、シンプルさの力を決して過小評価しないでください。 2011 年には、ラップトップやデスクトップ コンピューターだけでなく、スマートフォン、ネットブック、タブレット向けにもデザインする必要があります。準備はできましたか？

2011 年の Web デザイン トレンドの変化は何でしょうか? 注目の 11 の Web デザイン トレンドを見てみましょう。

1. CSS3 + HTML5 のさらなる発展

長い間待ち望まれていたことだ。ここ数年、デザイナーたちは CSS3+HTML5 に注目し、使い始めていますが、2011 年には CSS3+HTML5 がより広く使われるようになるでしょう。 Web デザイナーは最終的に Flash から離れていくでしょう。 Flash はもはやかつての王者ではなく、新しいテクノロジー (CSS3+HTML5 を参照) がそれに取って代わるでしょう。 2011年、Flashは消え去り、魔術師「HTML5」が舞台の主役となった。

もちろん、HTML5 が Flash に取って代わると言うのは時期尚早です。上記の 2 つのスクリーンショットから、Flash と HTML5 の間にはまだギャップがあることがわかります。したがって、2011 年も両者はそれぞれの地位を維持することになります。

しかし、2010 年までに、Web デザイナーが Flash を悪用する現象は徐々に減少するでしょう。現在、ウェブサイト全体を Flash でデザインするデザイナーはほとんどいません。ウェブサイトをよりシンプルにし、より高速に動作させるために、利用可能な場所では Flash ではなく HTML5 を使用します。しかし、現時点では HTML5 は Flash を置き換えることはできず、Flash の一部の効果は当面 HTML5 では実現できません。

しかし、最もエキサイティングなことは、CSS3 の応用がますます広まり、一部の領域では PS を上回っていることです (Adobe は、少しストレスがたまると述べています)。なぜなら、CSS3 を使用してテキストの影、画像の角丸、画像の透明化を実現するのは本当に簡単な作業だからです。まだ学んでいないなら、CSS3 と HTML5 を学んでみましょう。

2. シンプルな配色

単色の背景ほど直感的で簡潔なものはありません。純粋な色はさまざまな方法で表現できます。いつも黒、白、グレーなどの服を着るのはやめましょう。退屈すぎるからです。 Web ページのメインカラーとして、緑、黄色、または赤を使用することを検討してください。もちろん、色は 2 色か 3 色に抑えるのが最適です。色の透明度を調整すると、予期しない効果が得られる場合があります。例えば：

透明度を調整できるシンプルな緑色だけで、このような美しい Twitter 視覚化ツールを作成できます。ただし、このページでは XHTML/CSS と Javascript のみを使用していることに注意してください。すばらしい!

赤はまさに定番の色で、色の組み合わせが良ければ視覚的なインパクトはさらに大きくなります...上記のウェブサイトのユニークな赤い色とユーザーフレンドリーなテキストデザインは本当に印象的です。

3. モバイルインターネット時代の到来

スマートフォン、iPad、ネットブックはどこにでもあり、2011 年にはさらにそれが顕著になるでしょう。つまり、設計ではより多くのデバイスを考慮する必要があります。

モバイルフレンドリーなウェブサイトを作成するということは、単に元のデザインから派手な要素を取り除くということではありません。それでは魂のないデザインになってしまいます。既存のデザインに基づいてモバイルフレンドリーな Web サイトを設計するのは骨の折れる作業です。幸いなことに、新しいテクノロジーによってすべてが簡単になりました。

CSS3 を使用すると、モバイル Web ページの設計がはるかに簡単になります。最も重要なことは、CSS ファイルを変更して、さまざまなデバイスを使用して Web を閲覧するユーザーに合わせて Web サイト全体を変更できることです。

モバイルデバイス専用の Web サイトを設計することもできますが、テクノロジー製品の開発スピードを考えると、その Web サイトはすぐに改良する必要があると思います。オリジナルサイトの閲覧オプションを備えたモバイル サイトが増えています。

このオプションを提供していない場合、または元の Web サイトがモバイル Web 標準に最適化されていない場合は、モバイル インターネットに対応できていません。関連予測によれば、スマートフォンの販売台数は個人用パソコンの販売台数を上回るだろう。モバイルデバイスの大群に備えましょう。

4. パララックススクロール

まずパララックス スクロールについて説明します。パララックス スクロールでは、複数の背景レイヤーを異なる速度で動かして、モーション パララックス 3D 効果を作成できます。これは純粋に視覚効果ですが、コンテンツがスクロールするときに作成される視覚体験は依然として優れています。

2011 年の Web デザインのトレンドは、すべてこのような奥行きのある視覚効果を生み出すことです。パララックス スクロールは、いくつかの簡単な CSS テクニックまたは jQuery プラグインを使用して実現できます (デモ サイト: サイト 1 サイト 2)。

パララックス スクロールは、ヘッダー、フッター、背景など、Web デザインの二次的な要素に大きな効果をもたらします。ただし、少し場違いに見えるため、Web サイトのナビゲーションには使用しないことをお勧めします。

Old Pulteney Row to the Pole は、ウェブサイトの背景にパララックス スクロールを使用しています。ウェブサイトを開いて下にスクロールすると、その効果を確認できます。

5. デザインはタッチスクリーンデバイスをより考慮する必要がある

タッチスクリーン技術はますます広く使用されるようになり、タッチスクリーンデバイスはあらゆる場所で見られるようになりました。つまり、ナビゲーション デザインはマウス ナビゲーションだけに限定されるものではなく、タッチ デバイスのデザインも考慮する必要があります。あなたのデザインは指先での操作が可能ですか?

デザイナーとして、私たちはマウスを好みます。リンクの上にマウスを置くとリンクがハイライト表示されますが、タッチ スクリーンではマウスを置くことはできません。タッチスクリーン デバイスの訪問者に対して、デザイン内のリンクをどのように提示しますか?

同様に、訪問者がサイトを閲覧しやすくするにはどうすればよいでしょうか。これはブラウザの標準について議論されるかもしれませんが、タッチスクリーンの場合は水平スクロールの方が適しているかもしれません。ウェブサイトを雑誌のレイアウトに似せてデザインすると、訪問者がウェブサイトを閲覧しやすくなります。

最後に、Web デザインでは流動的なレイアウトの使用を検討する必要があります。 2011 年に注目すべき点は、画面解像度ではなく、訪問者が縦でも横でも読みやすい Web サイトを作成する方法にあります。あらゆる課題に対応できるよう、設計は柔軟でなければなりません。さもなければ、あなたは過去のものになってしまうでしょう。

赤ちゃんがiPadの魔法を見る、著作権：Steve Paine、Flickr

6. 詳細な分析

深度分析とは、Web デザインで次元を使用して、Web ページをよりリアルにすることです。正しく使用すれば、3D映画「アバター」のような仮想3D効果が得られます。 3D テクノロジーはまだ Web サイトのデザインに導入されていませんが、次元を使用してデザインしてみることはできます。

Plántate は、影やレイヤーなどのツールを柔軟に使用できる回転可能な 3D 地球儀を提供します。

Jordon イベント ページでは、3D 要素が明確かつシンプルで、デザインが非常に目を引くものになっています。 （削除されたようです）

7. 大きな背景画像

2011 年には、Web デザインにおける大きな背景画像の応用がより顕著になるでしょう。これらの背景画像は通常高解像度で、Web サイト全体を覆います。高解像度の写真は、読者の注目を素早く引き付け、強力な視覚効果を生み出すのに最適です。訪問者の目は、無意識のうちに大きな背景に留まります。

もちろん、背景画像の色と内容は非常に特殊です。いかなる状況でもユーザーエクスペリエンスを損なわないようにしてください。そうしないと、写真がどれだけ美しくても無駄になってしまいます。画像の種類は、ウェブサイトのテキストの読みやすさに影響を与えないように、柔らかく、わずかに透明になる傾向があります。それらは調和がとれていて読みやすいものでなければなりません。

上記のウェブサイトでは、ウェブサイトの背景に高解像度の画像を使用しており、ウェブサイトのメインカラーは黄色です。

このサイトは、壮大なスケールの画像に遊び心のあるアニメーションを加えています。警告: 音楽は自動再生されます。

8. トップレベルドメインにこだわりすぎない

厳密に言えば、これは Web デザインとは何の関係もありませんが、これは増加傾向にあり、よりクリエイティブなドメイン名が登場するでしょう。 .com ドメイン名の魅力は低下していますが、主な理由は、より短い .com ドメイン名を見つけるのが難しいためです。 2011 年、人々は .me、.co、.cc に注目し始めました。ドメイン名の開発について考えて、先手を打ってください。そうしないと、再びチャンスを逃してしまう可能性があります。

.me は個人の展示ページやブログに最適です。

.meドメインのもう一つの例

9. QR: クイックレスポンス

名刺や雑誌、その他の場所で正方形のバーコードがますます多く見られるようになったことに気づいたなら、このトレンドが 2011 年に人気になったことがわかります。しかし、これは Web デザインとどう関係があるのでしょうか? 本当に驚くべきことです。

この四角いバーコードはQRと呼ばれ、Quick Responseの略です（「QRコードリーダー QuickMark」で紹介）。

携帯電話を使用して固有のバーコードの写真を撮ると、魔法のように、携帯電話の QR 読み取りソフトウェアがバーコードに関連付けられた Web サイトを開きます。一番良い点は、QR をさまざまな場所に適用できることです。

ウェブサイトに QR コードを適用して、訪問者にモバイル ページへのショートカットを提供します。 URL に特別な紹介コード QR を配置して、訪問者を追跡することもできます。

QR をアバターとして使用し、他の人の Web サイトにメッセージやコメントを残すことができます。 2011 年にはモバイル メディアの利点がさらに顕著になり、この利点を生かす Web デザインが最も賢明な選択であり、将来の発展のトレンドとなります。

上記はSoft Mine BlogのQRコードです。作成したい場合はここをクリックしてください。

10. サムネイルのデザイン

Google はすでにブラウザ プレビュー テクノロジーをブラウザ ユーザー向けに展開しています。以前は、リンクをクリックすることによってのみ Web ページのコンテンツを表示できました。今では、虫眼鏡をクリックしてリンクの上にマウスを置くだけで、リンクされた Web ページのコンテンツをプレビューできます。

デザインが Flash に基づいている場合、プレビューでデザイン要素が表示されないという問題が発生します。

2011 年の平均的なインターネット ユーザーはより知識が深まり、よりユーザー フレンドリーなナビゲーション デザインを求めるようになりました。

11. コンスタントコンタクト/ライフストリーム

Lifestreaming は、ビデオ フィードを通じて直接、またはブログ、ソーシャル ネットワークの更新、オンライン フォト アルバム、チャット コンテンツ、お気に入りの Web サイトへのリンクなど、個人のオンライン コンテンツに焦点を当てて、個人の日常活動をオンラインで記録する Web アプリケーションです。

最後になりましたが、Web デザインは、Life Stream など、人々の間の継続的なつながりに重点を置いています。インターネット自体は原始的で退屈ですが、このオープンなプラットフォームを通じて人間が持っているものすべてを共有するため、カラフルになります。

今後もライフストリーミングなどの形を通じて、人と人の間のコミュニケーションや交流が強化されていくでしょう。 Web デザイナーとしては、この傾向を理解し、それに対応する必要があります。

2011 年には、Twitter フィードで個人ブログがより活発に活動するようになり (Twitter ページへのリンクだけではなく)、人々は Foursquare 経由で、どこにいるのか、何をしているのかを互いにインスタント メッセージを送信していました。 2011 年は、より親密なインターネット時代を迎えることになることは間違いありません。

ライフストリーミングを使用した個人ウェブサイト。

多くの情報を 1 つのページにまとめたビジネス ウェブサイト。

原題: ウェブサイトのデザインと開発: 新しい端末における 11 のウェブデザイントレンド

キーワード: ウェブサイト、開発、11、新しい端末、ウェブページ、トレンド、この記事、著者、Xiaoji、ウェブマスター、ウェブサイトのプロモーション、収益化