Advertisement

upcomingtrend2010

 

気は早いですが、2010年も残すところおよそ3ヶ月半となりました。

上半期を振り返ることで、ウェブデザインも多くのテクニック、アイデアが利用されているように感じます。

 

今回は、現在のデザイントレンドに加え、これから利用機会の増えてきそうなトレンドを13個まとめたエントリー「Upcoming and OnGoing Web Design Trends of 2010」が、海外デザインブログ1st WebDesignerで公開されていたのでご紹介します。

 

これからウェブデザインを作成しようとしている方やウェブサイトやホームページをリニューアルしたいとお考えの方は、アイデア、インスピレーションの参考にしてみてはいかがでしょう。

 

 

詳細は以下から。

 

 

いま、そしてこれからのウェブデザイントレンド2010まとめ


 

1. 巨大なテキストやイメージを利用しよう

 

多くのウェブサイトは最近利用しているデザインのひとつが、巨大なフォント、タイポグラフィー、イメージ写真などをヘッダーにデザインしています。

これによってユーザー、訪問者の注目を集めることができ、インパクトのある印象を与えることができます。

さらにウェブサイトに個性、トーンを表現することも可能となります。

 

71

by Elysium Burns

 

61

by Carsonified

 

41

by Second & Park

 

 

2. カスタマイズされたタイポグラフィーを利用しよう

 

ウェブフォントの登場によってこれまでの平凡なテキストをデザイン性ゆたかなタイポグラフィーとして利用することができるようになりました。

日本語に関しては利用までに時間がかかりそうですが、ショッピングサイトやポートフォリオサイトなどのタイトル見出しなどに利用してみてもよいかもしれません。

 

110

by brizk design

 

31

by tap tap tap

 

 

3. 印刷用レイアウトを意識しよう

 

プリント、印刷媒体で利用されている、グリッドライン、飾りのあるセリフフォント、ダイナミックなイメージ写真などをウェブデザインで表現するケースが多くなっているようです。

レイアウトが通常のブログやホームページとは異なり、ユーザー、訪問者の注目を惹くことができます。

 

grid

by Grid Based Web Design, Simplified

 

211

by Alan Rickman

 

 

4. CSS3、HTML5を活用しよう

 

CSS3とHTML5の登場によって、読み込み時間を速くしたり、よりよいナビゲーションを作成することができるようになりました。

CSS3では、これまであらかじめPhotoshopなどでの画像処理が必要であった角丸ボックス枠やテキスト、ボックスシャドウなどを簡単に設定することが可能。

HTML5に関しては、表示画面をカンバスに見立て、ダイナミックで自由度の高い動きなどを組み込むことができるようになっています。

 

atebits

by atebits

 

24ways.org

by example five

 

 

5. インパクトのある背景デザインをつかおう

 

最近の傾向として、背景デザインに継ぎ目のない背景パターンやテクスチャ素材などを利用、レイアウトしているウェブサイトをよく見かけます。

モダンでオシャレに見えるだけではなく、ホームページやウェブサイトのデザインコンセプトをより鮮明に表現することができます。

 

101

by odosketch

 

161

by Duirwaigh

 

 

6. スマートフォンに対応したウェブサイトを作成しよう

 

私たちの周りにも利用している人の多いiPhoneなどのスマートフォン携帯。

モバイル端末で表示した場合に、パソコン表示とは異なるシンプルでわかりやすく表示することで、より閲覧に関するユーサビリティを向上することができるのではないでしょうか。

 

mobile-website-h-m

by H&M

 

mobile-website-design-procab-studio

by Procab Studio

 

mobile-site-alex-buga

by Alex Buga

 

 

7. すくない情報はシングルページにまとめよう

 

「掲載する情報、事項が少ないけど、会社のサービス情報などをまとめておきたい。」

このような場合は、何ページにも分けてレイアウトせずに一つのシングルページにまとめてみましょう。

さらにグリッドデザインを一緒に利用することで、テキスト、イメージ写真をシンプルに整理することができ、効果的にユーザーに情報を伝えることが可能となります。

 

psd-web-layout-design-by-Respiro-Media-design-agency-20100916

by Respiro Media Design Agency

 

Jason-Reed-Smart-Innovative-Web-Design-Development-for-Santa-Rosa-Sonoma-County-the-San-Francisco-Bay-Area-and-Beyond-20100916

by Jason Reed

 

2010-09-16_00.20.15

by Creative People

 

 

8. ミニマルデザインでクリエイティブに

 

数年前まで画面にびっしりと表示されていた複雑でごちゃごちゃしたデザインの変わりに、余白スペースをたっぷりと使ったシンプルでミニマルなデザインコンセプトが最近のトレンドとなっています。

クリーンな印象はもちろん、エレガントで、印象に残りやすいクリエイティブなデザインを作成することができるのではないでしょうか。

 

Greetings-and-Salutations-FINCH-Adventures-in-Design-20100916

by finch

 

81

by chengis.me

 

wine

by Jax Vineyards

 

 

9. グリッドラインを使ってマルチカラムにレイアウトしよう

 

グリッドラインを利用したウェブサイトはすでにたくさん公開されていますが、このシステムを応用し、ページを表示したパソコンの解像度に応じてレイアウトの変化するリキッドレイアウトが利用されるようになっています。

画面全体にまとめてコンテンツを表示することで、ユーザーが直感的にコンテンツを選択することができます。

以前のエントリー「グリッドを使ったウェブレイアウトのデザイン方法&具体的サンプル」なども参考にしていただくとよいかもしれません。

 

Leiden-International-Film-Festival-Leids-Film-Festival-20100916

by Leids Film Festival

 

2010-09-16_00.06.58

by Pretty Production

 

2010-09-15_23.59.37

by 新ヤマハ銀座ビル

 

 

10. オリジナルのイラストやアイコンをレイアウトしよう

 

ウェブサイトのデザインを制作する際、ユーザーの気を惹くことが必要となります。

会社のコンセプトにあわせてデザイン制作するのはもちろんですが、最近はイメージ写真の代わりにオリジナルのイラストやアイコンなどを利用するケースが徐々に増えています。

91

by Skype

 

51

by Forrst

 

201

by Biola Undergrad

 

 

11. ソーシャルメディアを活用しよう

 

最近のウェブサイトでよく見かけるtwitterやfacebookなどのソーシャルメディア用アイコン。

日本だけに限らず世界中の人たちとつながることのできるツールでもありますので、疲れない程度に登録しておくとよいかもしれないですね。

 

181

by Old Loft

 

191

by Edgepoint Church

 

 

12. 紹介文(イントロダクション)をレイアウトしよう

 

興味のある内容を書いている著者、ライターに興味を持つことありませんか。

より安心してウェブサイトを閲覧してもらうためにも、ヘッダーなどに紹介、あいさつテキストなどをレイアウトしておくとよいかもしれません。

 

151

by Kyle Standing

 

171

by Alessandro Cavallo

 

121

by Zach Klein

 

 

13. ポップアップ、ライトボックスをより活用しよう

 

LightBoxなどのポップアップページにはテキストだけでなく、イメージ写真や動画、購入ボタンなどをレイアウトすることが可能です。

シンプルでユーザーや訪問者に情報を的確に伝えることができ、今後さらに利用されていくのではないでしょうか。

 

111

by Frespiration

 

131

by Digg

 

141

by istockphoto

 

 2010年1月終わりに公開した以下のエントリーの流れを引き継いで、応用したテクニックやアイデアが多いように感じます。

よろしかったらこちらも一緒に合わせてどうぞ。

2010年に流行しそうなウェブデザインのトレンド大予想&具体例 

designtrendsin2010

 

[参照元 : Upcoming and OnGoing Web Design Trends of 2010 – 1st WebDesigner]