*

yabai

ヤバいウェブデザインのトレンド2014

公開日: : web ,

流行り廃りの激しいwebデザイン。トレンドを追いかけているだけで疲れます。ちょっとフラッシュを勉強したら、『フラッシュは時代遅れだよね〜』などとケチをつけられ、ちょっとリアルなグラフィックを作ったら『時代はフラットデザインだよね〜』などとぬかしやがります。こんな小難しいことを誰が毎度毎度言い出すのか知りませんが、webデザインに関しては日本が遅れをとっているなんていう話をよく聞きます。そこで、私たちが気づいたのは、日本のウェブサイトで情報を収集せずに、海外のウェブサイトで情報収集すればいいんじゃないのか、ということでした。

しかし、僕が知りたい情報はみつかりませんでした。しかし、面白い記事をみつけることができたのでここにご報告致します

以下、対訳。

ださいウェブサイトのトレンド

Terrible Web Design Trendsを訳します。

From puka shell necklaces to planking, the power of trends is undeniable. In a digital age dominated by social media, memes, and an audience with an ever-shortening attention span, trends have become a part of Internet life.
And as the Web continues to adolesce, web design is subjected to rapidly changing trends as well.

Continuously developing design and development technologies mean that trends in our industry quickly come and go.
I’ll discuss some of the worst web design trends we have seen throughout the Internet’s history, many of which are — thankfully — not that common anymore.

プカ・シェルのネックレスから死体ごっこまで、流行の力を否定することはできない。ソーシャル・メディアやミーム、そして空前の集中力の持続時間の短さを誇るオーディエンスに支配されるデジタル時代において、流行はインターネット・ライフの一部となっている。
ウェブが思春期を迎え、ウェブデザインの流行り廃りも目まぐるしく変わっている。
デザイン開発と開発技術の変遷はこの業界の移り変わりの早さそのものだ。
インターネットの歴史上現れ、幸運にも現在ではあまり見られなくなってきたダサいウェブデザインのトレンドについて見てみよう。

Splash Pages

We’ve all seen a site that loads with sliding photography, illuminating status bars, and a cacophony of visual excess. The thought behind a splash page is “Watch this long ‘short intro’ video to discover how wickedly-awesome our website is!”

Hoping for a strong first impression, sites that adopt this practice of showing a splash page definitely make an impact. Unfortunately, it’s usually an overly negative one.
Splash pages waste time and delay people from accessing the content of the website. Site users just flock to the “click to skip” link, or, in some cases, can’t even find it and decide to bounce instead of waiting.
Conclusion: A good homepage, information architecture and content strategy are all you need. Don’t waste precious time by showing users pointless filler content.

スプラッシュページ

写真のスライドやキラキラしたステータスバー、過剰装飾の不協和音を延々と読み込もうとするサイトを誰もが目にしているはずだ。スプラッシュページの裏には「この長い「短い紹介ムービー」を観て、私たちのサイトがどれほど素晴らしく意地悪いかを分かって欲しい!」なんてメッセージが隠されている。
d96d2208c6192777dcbe26683fb28ceb

強烈な第一印象を受け付けるためにスプラッシュページを導入しているサイトは、確かにインパクトがある。ただ、残念ながら完全に駄目なインパクトだ。
スプラッシュページは時間を浪費させ、ユーザーがサイト上の情報へのアクセスが遅くなってしまう。ユーザーは皆「スキップ」に大挙して押し寄せるか、「スキップ」を見つけられないまま待つのを止めて「戻る」を選択することになる。

結論:良心的なホームページ、情報アーキテクチャ(分かりやすさのためのデザイン)、コンテンツ戦略さえあればそれで十分。ユーザーの貴重な時間をまとまりのないつなぎコンテンツで浪費させるな。

Web 2.0 Design

Rounded corners, reflections, drop shadows and gradients say one thing: 2005.

As the Web moves toward a flatter, harder-edged aesthetic, don’t let your site get stuck with an outdated look.

These days, dimensionality and drop-shadowing look soft and tentative. Skeuomorphism for skeuomorphism’s sake doesn’t really accomplish anything, other than potentially confusing your viewer with an overcomplicated design.

You can do better. Simplify your designs to make your interfaces more user-friendly and to improve UX.
Conclusion: Though some argue that flat is not the right direction, with major tech companies like Apple, Microsoft, Google and others going flat, the reality is that this is what Web users will come to expect.

Web2.0的デザイン

角丸、反射、ドロップシャドウ、傾きが物語るものは1つ、2005年。
ウェブがフラット化、ハードエッジ化していく時代に、時代遅れのデザインに凝るのは無しにしよう。

c633a7f4fb7e3282ffb9d18b25c4a777

最近、2次元化とドロップシャドウは柔らかく自信なさげに見える。スキューモーフィズムのためのスキューモーフィズムは何も生み出さないばかりか、複雑になりすぎてユーザーを困らせることになりかねない。

もっといい方法がある。シンプルなデザインにすることでインターフェースをより使いやすくし、ユーザーエクスペリエンスを向上させることができる。

結論:フラット化がウェブの正しい方向性なのかどうかは賛否両論だが、AppleやMicrosoft、Google、その他の大手テクノロジー企業はフラットに移行しており、これこそがユーザーが求めているというのが現実だ。

Stock Photos

Good stock photos don’t actually look like a stock photo, but they can be astronomically expensive.
So, instead, we’re often shown cold, lifeless photos of people who are smiling on the outside, but crying on the inside.
(Visit Awkward Stock Photos if you’d like to explore to dark, twisted world of stock photography.)

Conclusion: If photos are needed on your site, try and produce them yourself. If this is not an option, be selective with your stock photography. Use a critical eye to determine if adding the photo is actually going to improve the look of your site or make it look like a joke.

ストックフォト

ストックフォトっぽくない写真こそが本当に良いストックフォトだが、べらぼうに高い。
実際に僕らが目にするのは、息吹を感じない冷ややかな人間が表面上笑っていて心では泣いている写真だ。

086b05630918480421d83cc807de4485

(暗く歪んだストックフォトの世界を探検したいのなら、是非 Awkward Stock Photosを訪れてほしい。)
結論:サイトに写真を載せたいのであれば、自分で用意しよう。それができないのであれば、ストックフォトから慎重に選ぼう。目をしっかりと見開いて、その写真を載せることでサイトの見栄えが良くなるか、はたまた冗談みたいなサイトになるのかを見極めよう。

MySpace-ification

In the mid-2000s, the average Web-savvy user was defined by the amount of personalization on their MySpace profile.

Some designers picked up on this trend, over-designing their sites to the point of complete chaos, whether the site was designed by a team of 10 different people, or 1 eager-beaver designer wanting to prove their worth by adding every kind of design element/texture/animation/etc. into one page.

Conclusion: Just because you can, doesn’t mean you should. Less is more.

マイスペースのパクリ

2000年代中頃、マイスペースのカスタマイズの度合いがネットに精通したユーザーかどうかの判断基準になっていた。

そのトレンドに乗っかるデザイナーもおり、デザイナー10人がかりで作ったか、もしくは一人の物好きが、腕自慢であらゆるデザイン要素・テクスチャ・アニメーションなどを全部詰め込んで作ったのかと思うような完全なカオスと化した過剰デザインのサイトが作られていった。

6c2e1b6b5ff75b5b4a2ae724af0e179b

結論:できるからといっても、やるべきでないことがある。過ぎたるはなお及ばざるがごとし。

Flash Sites

The strength of Flash is also its weakness. Though animations and movement enhance the look of your site and definitely get attention, they are also incompatiblewith many Web devices (such as those that use, ahem, iOS).
What good is a large amount of visually-stimulating content if many of your users can’t even see it?
Who doesn’t hate seeing web pages like this?:

With the maturation of CSS3 transitions and HTML5 standards, we can create impressive animated sites without the use of proprietary, closed-source software.
Even the company that owns Flash agrees that it’s an outdated technology and that HTML5/CSS3 is the future.
If you’re still in the Flash bandwagon and are wanting to jump off, these posts might inspire you to take the plunge:

* 10 Interesting CSS3 Experiments and Demos
* How to Create an HTML5 3D Engine
* HTML5 Canvas Element Guide – allows for dynamic, programmatic drawing like ActionScript
* Introduction to HTML5 Web Storage – analogous to ActionScript’s shared object/local storage

Conclusion: It’s time to stop relying on Flash and get on board HTML5, CSS3 and JavaScript which accomplish many of the same things as Flash with less compatibility and performance issues.

フラッシュ

フラッシュの強みは弱みにもなりうる。アニメーションや動きはサイトの見栄えを良くしてくれるし、確かに注目を集める。しかしながら、フラッシュ非対応のデバイス(なんちゃらiOSの機種)も多い。
視覚的効果の高いコンテンツは、ユーザーが見ることができなくてもなお素晴らしいものだろうか。
こんなページ、誰だって見たくはない。

49a321eb60c877d3b9b78f1ea4fecfce

CSS3やHTML5への移行が進み、専売特許のソフトウェアなしでも様々なアニメーションを盛り込んだサイトが作れるようになった。
Flash開発した企業でさえFlashがHTML5やCSS3に比べて時代遅れの技術であると認めてしまっている。
まだFlashを使っていて止めたいと思っているなら以下の記事を読むと思い切りがつくはずだ。

結論:もうFlashからHTML5・CSS3・JavaScriptに乗り換える頃合いだ。Flashと同じぐらい色んなことができる上に、互換性や再生の障害も少ない。

Background Music

If you’re considering this, keep in mind two things: 1) some of your viewers have their sound muted and will thus miss out on your awesome jams, and 2) those that do have the sound on are likely listening to something else or looking to hear something specific.
Not to mention the potential issues with site loading speed, licensing, user experience, etc.
Conclusion: Unless you’re a DJ company or a radio station, skip the music.

BGM

ユーザーの感性に訴えかけたいと音楽を流してユーザーとの関係を築こうと音楽を流そうとするデザイナーがいる。

もし音楽を流そうと考えているのなら、ちょっと覚えておいて欲しいことがある。(1)パソコンをミュートにしていてせっかくの素晴らしい演奏に気づかない場合がある。(2)ミュートにしていないユーザーはたいてい他のものを聴いているか、既に聴きたい音楽が決まっている。

言うまでもないが、ロードの速度や権利、UXなど多くの問題が潜んでいることも忘れないように。

結論:音楽事務所かラジオ局でもない限り音楽のことは忘れろ。

Popup Windows

We’ve all experienced the frustration of loading a webpage and immediately being bombarded with a gazillion un-closable pop-up windows. It truly harms our experience on the site and makes us wary of coming back.
Unfortunately, today, popup windows are being reincarnated in the form of modal window overlays that open automatically and interrupt our reading experience. Check out Tab Closed; Didn’t Read to see a showcase of disruptive window overlays.
Conclusion: Ads are a part of life, and they’re an important way for many sites to generate revenue. That being said, no one likes an ad that’s overly disruptive.

ポップアップウィンドウ

私達の誰もがウェブページを開いた瞬間現れる簡単に引っ込まない無数のポップアップにイライラさせられた経験があるはずだ。絶対的にUXを悪化させるものであり、最悪の場合「戻る」ボタンをクリックさせるシロモノだ。

不幸なことにポップアップは勝手に登場してはページを読むのを邪魔をするモーダルウィンドウに転生した。邪魔なウィンドウの重ね技の見本はこちら

f1203d35b5ff61126c7fa80f2749c047

結論:広告は人生の一部。たくさんのサイトが収益をあげるための重要な手段だ。広告が好きな人なんていやしないし、邪魔で邪魔で仕方ない。

Wrapping Up
Like any trend, what’s popular in web design comes and goes with the times. If you have a robust development and design team, incorporating current trends can make your site look fresh and relevant.

Just remember that trends have a shelf-life, and be prepared when it’s time to make a change. What’s hot right now could soon go the way of sparkly mouse pointers and site visitor counters.
For those who are more risk-averse (or strapped for time), it’s best to focus on more evergreen design ideas that will always look professional and be effective.

まとめ

どのトレンドでもそうだが、ウェブデザインは時間とともに変わっていく。冴えない開発・デザインチームを抱えてしまっているのであれば、流行りを採用してしまえばそこそこ見栄えの良いサイトにはなる。
ただ、流行には寿命があること、変化を加えるときに備えておく必要があることを覚えておこう。今流行っているものも、すぐに火花のようなマウスカーソルや訪問者カウンターと同じ運命になる。
リスクを避けたい人(または時間がない人)はいつまでも色褪せない定番のデザインを採用したほうが信用も得られるし時代遅れにならない分効果が上がるはずだ。

日本にも負けないサイトがたくさんあるんだゾ

イケてるウェブデザインを作ってくる国が、何を偉そうにダサいを騙ってんだよ。日本なめんなよ

以上

Ad

関連記事

itbusinessnogenri

ウェブ進化論以来。数年ぶりにツボった本『ITビジネスの原理』感想

本当はネット以外のことを書きたいんですが、自分つまらん人間で、語彙もないのでネットのことしか書い

記事を読む

unity

ド素人のデブでも出来た!超初心者がUnityでクソゲー作ってみた

コンピューターゲームを作るのは、人生で5回目になります。最初にゲームを作ったのはマリオペイントで

記事を読む

facebook_hacking

【警告】facebookのアカウントを乗っ取るのが想像以上に簡単な件

たぶん、犯罪です。何の法律にふれるとかは知らないけど犯罪な気がする。不正アクセス禁止法かなんかか

記事を読む

wppp

wordpressでショートコードが動かない場合の対処法(読了22秒)

バカみたいなミスをして、1時間かかっても解決できなかったけど解決できたので 全角になっ

記事を読む

google

【超訳】Google様から『SEO対策()』とか抜かしとるクソサイトへ警告

1/27付でグーグル様の公式ブログでクソサイトへの警告がございましたのでご報告差し上げます。

記事を読む

wpheader

wordpressで画像を投稿した時に、デフォルトでリンクさせない方法

別にプログラマじゃないのに、wordpressとそれに付随したphpが少し触れるだけでプログラマ

記事を読む

ossan

ネット慣れしてないおっさんの顔文字の使い方の気持ち悪さについて

おっさんでもおばさんでも、インターネットをかんたんに使える時代になりました。さて、皆さんご機嫌い

記事を読む

Ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ad

PAGE TOP ↑