2014年 ウェブデザインのトレンド トップ10

shunichi shiga

昨年は多くの新しいアイデアが生まれ、ウェブデザイナーにとって有意義な年でした。あるものは消え、あるものは成功して今後も影響を与え続けることになりました。

2013年に大ヒットしたトレンドは2014年には目新しさを失い、その一方で世界中のデザイナーが新しいトレンドに磨きをかけ続けるでしょう。

では、2014年はどんなウェブデザインのトレンドが待っているのでしょうか? これからそれを紹介します。ご意見を、ぜひコメントに残してください。

1.フラットデザインの繁栄

フラットデザインの繁栄

Website: wistia.com

フラットデザインなど一時的な流行に過ぎなかった思うなら、それは間違いです。フラットデザインは強力なミニマリストデザインです。デザインをシンプル、クリーン、現代的に保つ、ということです。これらは、ほとんどのクライアントからいつも聞かされる言葉です。

皆がフラットデザインを使う理由は、それに意味があるからです。無駄を削り、空白を有効利用し、全体として優れたユーザ体験を提供します。デザイナーは多くを使わずに大きな成果を達成することを余儀なくされ、フラットデザインは2014年の第1のトレンドになると私は考えます。

2.レスポンシブデザインは必須

レスポンシブデザイン

Website: KasraDesign

これは、間違いなく標準になります。クライアントは応答型デザインを要求し、開発者はコーディングに必要なものを学び、それを追求します。理由は単純に、「需要」です。スマートフォンやタブレットが飛ぶように売れている今、マーケティングの可能性は巨大です。あなたのクライアントが零細事業のオーナーであったとしても、他社のサイトで応答型の動作を目にすれば、このデザインを話題にするでしょう。

3.ウェブサイトの画質が向上

ウェブサイトの画質が向上

Website: Portraits

長年、デザイナー達は優れた画像を追求してきましたが、クライアント側では必ず問題が生じてきました。2014年には、より高品質で創造的でユニークな画像が手に入ります。その理由は、手ごろな価格にローディング速度の高速化、そしてどこからでも高画質の画像にアクセスできることです。

4.視差効果ウェブサイトの人気

視差効果

Website: Hot Dog

遠い昔、960画素ウェブサイトの時代には、IE6で効果的に機能しなければなりませんでした。インパクトと効果的な文言がすべてでした。視差効果デザインはそれを、スクローリングの効果、パワフルな画像、力強く創造的なタイポグラフィで実現します。2014年には、特に有名ブランドが視差効果デザインを多用するようになるでしょう。

5. インフォグラフィックスは、やはり最良のデータ表現方法

インフォグラフィック

Website: Gabriel Gianordoli

インフォグラフィックスは小さなスペースに多くの情報が入り、人目を引きますが、低コストです。事業主がインフォグラフィックスを依頼する理由はそこにあります。エンドユーザがこれを好む理由は、インフォグラフィックスにはそれぞれ独自の個性があるからです。タイポグラフィや大胆な色づかいと形の組み合わせなど、少し風変わりで見る人の興味を引きます。

真面目に取り組むクリエイターなら必ず、正確な事実と数値を元にストーリーを作り上げます。視聴する人は子供時代の漫画の世界に入り込み、見ているだけで楽しめるかも知れません。でも、実はそのとき人はたくさんの情報を吸収しており、そして、人は情報が大好きなのです。インフォグラフィックスは大量のデータを伝えるための非常に効果的な方法であり、2014年には間違いなく、ますます多用されるようになるでしょう。

6.タイポグラフィが主役

タイポグラフィ

Website: Crop The Block

さよならGeorgia、さよならTimes New Roman、さよならHelvetica。2014年にようこそ。タイポグラフィに真面目に取り組むときが来ました。これまでも真面目に扱われていましたが、今ではタイポグラフィは主流になりました。人々は雪崩のように押し寄せるモバイルアプリケーションの中を泳ぎながら、ありとあらゆる素晴らしいタイポグラフィを見せつけられ、それが大きな要因となってフォントの使われ方への期待が高まっています。

高品質なフォントが手ごろな価格で入手できるようになり、もうArialでは不十分です。ユーザは相変わらずのHelvetiaを見ると何かが足りないと感じるようになり、事業主はフォントファミリー全体に高い料金を支払わなくなっています。

7.ウェブサイトはコンテンツを重視して単純化

コンテンツを重視

Website: The New York Times

ニューヨーク・タイムズは最近、ウェブサイトのデザインを一新しました。このデザインは、そのシンプルでクリーンな手法によって最新のトレンドの多くを語っています。新しい手法ではありませんが合理的な次のステップとして、ますます多くのウェブサイト、特に「重い」コンテンツのサイトがこの例に倣うでしょう。余計な飾りを取り払えば実質のコンテンツが輝いて見え、デザインが脚光を浴びようとするのではなく、本来の役目を果たすようになります。

8.ショートプレゼン動画の再来

ショートプレゼン動画の再来

Website: Goldee

2014年には、Vineの爆発的拡がりによって、プレゼンテーション動画が再来すると思われます。この6秒の動画には大流行の気配があり、簡単に作成でき、誰が見ても面白いようです。ここ数年、動画は短くなり続けていて、来年には30秒未満で要点を伝えるビデオクリップが躍進するでしょう。Vineに感謝です。

9.ニュースレターのデザインが引き続き向上

ニュースレターのデザイン

Newsletter: Miniboden

Eメールはもはや視聴者への唯一の伝達手段ではありませんが、ユーザにコンテンツへの興味を持ち続けてもらうためのメディアとして健在です。2014年には、ニュースレターはさらに創造的・刺激的に進化して生き残るでしょう。好んで使われるチャネルではなくなっているとはいえ、Eメールがすぐに絶滅するわけではありません。賢い事業主は、この変化に気付いています。

10.固定されたナビゲーションが好まれる

固定されたナビゲーション

Website: TheoryDesign

ページの中のあらゆるものに過剰なデザインが必要だとデザイナーが思っていた時代がありました。その時代は去り、ありがたいことに、もう画面の端のどこかに隠されたフラッシュメニューを探さなくてもよいのです。

2014年には、いつでもナビゲーションバーを使えるようになります。「重い」コンテンツをもつウェブサイトをデザインする場合の合理的な手法は、固定位置のサイドバーまたはトップメニューを使うことです。

さらに新しい、これからのトレンドを2015年のロゴデザイン、10のトレンドを予測でご紹介します。

関連記事

テックスタートアップ向けロゴデザインの5つの方法

テックスタートアップ向けロゴデザインの5つの方法

テックスタートアップが99designsで最も成長著しい顧客層の1つであることをご存知でしたか?テックスタートアップの優れたロゴをデザインする方法を知っていることは、重要なスキルです。 都合の良いことに、大抵のテックスタートアップは、ロゴデザインに対して同じ考えを持っています。99designsのクライアントは皆、オリジナリティを求めながらも、同時に、デザイナーがテックスタートアップの好みを知り尽くしていることを期待しています。例えば、サンセルフ体のフォント、鮮やかな色と刺激などです。 すぐにテックスタートアップの優れたロゴをデザインできる5つの方法を、詳しく見ていきましょう。 1. 社名を描く — これらの企業ロゴは、事業内容を非常に直接的かつ人目を引く方法で表しています。単純である理由:皆忙しく、ロゴを分析する暇などないからです。 大抵のテックスタートアップは、非常に明確で具体的な製品やサービスを提供していて、その製品やサービスがしばしば社名に表れています。CityCliqはオンラインのビジネスページ、Soundcloudは音楽保存、thredUPは、母親をターゲットとした古着を扱っています。 ロゴデザインは、スタートアップの社名を知ってもらえるようなシンボル、あるいはシンボルの組み合わせを考えるところから始めてください。どのような事業を行っているのか、どのようなサービスを提供しているのかが明確でなければなりません。 この特定の方法を使う際、一般的か独創的かは紙一重です。ありきたりなイメージを避けつつ、社名を覚えてもらえるようななじみやすいシンボルを見つけるのが腕の見せ所です。 例えば、上のCityCliqのロゴを考えてみましょう。見慣れた手のカーソルを使っていますが、これはクリックと都市の風景の両方を創造的に表しています。都市の風景の上に手を置いただけでは、ありふれたロゴとなるでしょう。 2. ひねりを利かせる — これらの企業はすべて、ひときわ目立たせるために一ひねり加えたロゴを使っています。キャラクターのようなものをロゴに入れることによって、独自性を出しているものが多いことが分かるでしょう。 各企業は、競合他社から差別化を図ろうとしています。しかし、多くの企業にとって、ひねりを利かせるというのは、選択肢ではありません(一ひねりあるロゴを持つ銀行がどれくらい成功するか、少し考えてみてください)。幸運にも、Web関連企業やスタートアップは、ひねりをよく利用しているか、従来とは異なるサービスを提供しています。 どうすれば製品やサービスを、斬新な方法か奇抜な方法、あるいは予想外の方法で表現できるか、時間をかけてブレインストーミングしましょう。 この戦略の優れた例は、Electric Monkのロゴです。これは、この99designsでデザインされたものです。このロゴコンペの優勝作品は、修道士の格好をしたコンセントでした。 デザイン by Peter Vukovich 99designsでデザインされたElectric Monkのロゴは、”ひねりを利かせる”方法の良い例です。これは、Douglas Adamsの著作に登場した装置に基づいていますが、もしそれを知らなかったとしても、全く問題ありません。何を表しているのかが分かるのは一部の人々だけです。それが、魅力を増す秘訣です。 このようなものを思い付くのは難しいと思うかもしれませんが、これが正攻法です。ひねりの利いたロゴをデザインする一方で、自由に自分にとって面白いデザインを考えれば良いのです。それは、すべての人にとって面白いものではないかもしれませんし、理解できない人もいるかもしれませんが、それが、ひねりというものなのです。そして、多くのテックスタートアップは、単純にこのような発想を好むのです。 3. スーパーヒーローのロゴを創造する — スーパーヒーローのロゴは、テックスタートアップのロゴデザインに取り組むのに優れた方法です。これらの企業は、そのメリットを認識しています。スーパーヒーローのロゴの成功の鍵は何でしょう? もし、ひねりたくないけれども、面白いロゴにしたいと思っているならば、スーパーヒーロースタイルを検討してください。企業の事業内容と、ロゴをスーパーヒーローの象徴に見せる方法を考えるのです。 スーパーマン、バットマン、それともワンダーウーマンのようにしますか? 洗練されたものにしますか? それとも、ヘルボーイのようにはっきりした感じにしますか? こういった思考を通して、優れたロゴのアイデアが出来上がっていくのです。 スーパーヒーローのロゴを創造するには、できるだけシンプルに、頭文字かシンボルを型にはめ込んでデザインします。 ロゴの図は、社名自体を視覚化して、記章のように見えるようにしてください。それが、スーパーヒーローのロゴ特有の特徴です。 4. Twitterに似せる — これらのロゴは、Twitterに影響を受けていながら、見た目と印象が独創的です。ロゴを” Twitterに似せる”なら、これがあなたの目指すべきものでもあります。 時には、単に適当な” Twitterのような”フォントを見つけて、ほんの少し調整するだけで十分なのです。その理由を説明するのは難しいですが、多くのWebスタートアップは、ロゴデザインに関して、Twitterを尊敬しています。 インターネット上で少し検索してみれば、TwitterのロゴがWeb2.0におけるロゴデザインの”代表作”であることが分かるでしょう。この事実を覚えておいて利用すると強みになります。 ロゴをTwitterに似せるための最善の方法は、少し技巧的で、丸味を帯びていて、非常に読みやすい、というTwitterのロゴの特徴を持った、見た目の優れたフォントを見つけ、それで試してみることです。 こういったフォントは、すぐには見つかりません。プロジェクトの重要性によって、Font Squirrelで無償のフォントを探すこともできますし、オンラインフォントライブラリでプロ用のフォントを購入することもできます。もちろん、自分でロゴフォントをデザインするという選択肢もあります。 Font Squirrelは、Twitterのようなフォントを無償で豊富に提供しています。 ロゴをTwitterに似せるのは、Twitterからひらめきを得るためであって、コピーするためではないということを忘れないでください。Twitterの兄弟や姉妹がどのようなものかを想像してみれば、恐らく、似たもの同士でありながらお互い全く違っているでしょう。 5. 3Dにする — 3Dロゴは、見栄えがしますが、それは当然のことです。それらしく見えるデザインができるようになるまでには、数多くの経験が必要です。テック企業は、特に、アイコンやアバタと組み合わせた3Dを好みます。 テックスタートアップのロゴに関しては、これからは3Dの図や文字が一般的です。これは驚くべきことではありません。適切に使えば、3Dロゴは、間違いなく強烈なインパクトを与えます。 しかし、この種のロゴには、精密さと熟練が求められます。光が見た目にどのような影響を与えるのかを理解し、その原理を応用してリアルで美しいロゴを創造する必要があるのです。 優れた3Dアイコンは、明確で、理解しやすく、一ひねりあり、どんな大きさでもはっきり見えるものでなければなりません。このようなものを作るのは容易ではありませんが、参考になるリソースやチュートリアルがたくさんあります。…

3分でわかる!フラットデザインとマテリアルデザインの違い

3分でわかる!フラットデザインとマテリアルデザインの違い

フラットデザインとマテリアルデザインは一見似たようなグラフィックデザイン手法に思えますが、実は根本的な考え方、表現の仕方が異なります。それぞれにメリット・デメリットが存在し、シーンに合わせて使用していくことで、効果的に魅せることができます。ここでは、簡単にフラットデザインとマテリアルデザインの違いについて述べていきます。 フラットデザインのメリット フラットデザインはリッチデザインと呼ばれる立体的でリアル感のあるデザインの流行が後退した頃に注目され始めました。スマートフォンのアイコンやロゴタイプでもフラットデザインを用いるケースが増えています。 フラットデザインのメリットについて考えてみましょう。フラットデザインはさまざまな媒体に浸透しているため、抵抗なく受け入れることができるということ、人の目に優しくストレスを与えにくいデザインであること、そして、無駄な装飾をそぎ落としシンプルに磨きをかけているため洗練された都会的な印象を与えること、これらがフラットデザインの持つメリットと言われています。また、リッチデザインに比べ、ファイルの容量を小さく抑えることができるという点もフラットデザインのメリットと言えます。 フラットデザインのデメリット 一方、フラットデザインのデメリットに挙げられるのが、酷似したグラフィックデザインが生まれやすいという点です。 それはフラットデザインが、限りなくシンプルに仕上がるがゆえに起こる問題で、そういった点に関しては細心の注意が必要になってきます。また、フラットデザインには影という概念がないため、Webでボタンとして使用する場合、クリックできるのかどうかわからないという操作性における課題が生まれる危険性があります。   マテリアルデザインのメリット マテリアルデザインは広義でフラットデザインの一部とも言われますが、大きな違いがあります。 マテリアルデザインは「視覚」ではなく「触覚」に語りかけるようなグラフィックデザインで、実際に操作しているかのような効果を演出するデザインです。フラットにデザインされたものに意味のあるモーションを加えることで、ストレスなく操作方法等をガイドすることに長けています。影を利用するなど多少のリアリティがある表現もマテリアルデザインの範囲内で、Google社より制作ガイドラインが設けられているため、迷うことも少なく制作することができるでしょう。   マテリアルデザインのデメリット 一方、ガイドラインが設けられているということはデメリットとも言えます。マテリアルデザインのガイドラインに沿っての制作となるため、グラフィックデザインとしての差別化を図ることが難しく、オリジナリティの追求という点では苦戦する可能性があります。また、フラットデザインと比べると必要とする容量が大きく、場合によっては工夫しながら制作していく必要があります。 デザイナーは、フラットデザインのメリット・デメリット、マテリアルデザインのメリット・デメリットを理解しながら、上手に活用していく必要があります。   それぞれを効果的に使う参考情報 それぞれを効果的に使うには特徴を理解することが大切です。グラフィックデザイン制作を進めていく中で、フラットデザイン・マテリアルデザインともに、どちらが何に適しているのかを的確に判断しながらデザインを考えていきましょう。 動きがありすぎるとユーザーの視覚に疲れを引き起こしてしまい、動きがなさすぎるとユーザーに飽きをもたらしてしまうかもしれません。両社のデザインの良い面を上手に生かし組み合わせていくスキルが、今後必要になってくるのではないでしょうか。 平面であることを極めたフラットデザインと、平面でありながら立体の要素を取り入れたマテリアルデザイン、これらのデザインにおける違いを理解することで、シーンに合わせてデザインを使い分けることが可能になります。そうしたデザインの知識があなたのグラフィックデザインの幅を広げていくことでしょう。

レスポンシブデザイン:秘策とアプローチ法

レスポンシブデザイン:秘策とアプローチ法

少し前まで、デザイナーは、本の表紙であれ、ポスターであれ、新聞であれ、作っている物の明確な寸法を把握していました。 しかし、スマートフォン、iPad、その他様々なアスペクト比や解像度を持つモニタの出現により、ビジュアルのコントロールが難しくなりました。 レスポンシブデザインが新しく話題になったことは当然でしょう。これはファッションなどのトレンドとは異なります。インターネット閲覧に様々なデバイスが使われるようになったために持ち上がった、ユーザビリティの問題を解決しようとする試みです。 この記事では、様々なデバイスに合わせた、デザインのアプローチ法を紹介します。スクリーンサイズや解像度を含め、レスポンシブデザインはどのように機能するのかをデザイナーの視点から見ていきましょう。 Photo: Brad Frost (via flickr) レスポンシブデザインのアプローチ法 すべてのモニタスクリーンにフィットするウェブサイトを作る場合、最も一般的な方法は標準的なスクリーンの幅と高さの範囲内でデザインすることです。モニタスクリーンの標準サイズは1024 x 760ピクセルなので、Webのセーフエリアはそれ以下、989 x 548ピクセルということになります。 ウェブサイトがそれよりも大きなモニタで表示された場合は、ページレイアウトに占める背景が大きくなります。90%以上のウェブサイトはこの方法で作られていますが、モバイルデバイス向けにデザインする場合は適切ではありません。320 x 2000ピクセルのスクリーンで、同じレイアウトを使うことはできないのです。 複数のデバイスのためにデザインする別の方法をいくつか挙げます。 メディアクエリ:CSSを使って、サイトが表示されるデバイスの特徴によってページのスタイルを変えることができます(コンテンツを隠すことも含む)。 可変グリッド:ページ要素を相対的な(%)ユニットとグリッドカラムの数でサイズ設定すれば、スクリーンの幅によって表示が変わります。 最もよく使われるテクニックは可変グリッドに基づいたものです。これはレスポンシブデザインの動きの原型であり、adobeもサポートしています。Dreamweaverの最新バージョンでは、可変テンプレートを使って自動的にレイアウトを作成、編集できます。 Website: Lancaster University ランカスター大学のウェブサイトでは、コンテンツセクションの幅は960ピクセルより広がることはありませんが、400ピクセル以下まできちんと縮小されます。トップのコンテンツがどのように徐々に小さくなるか、スクローラの動きに注目してください。ページ幅は420ピクセル以下になります。 モバイルデバイススクリーンの解像度(それらをターゲットにする場合の問題点) 世間には多様な解像度のグラフィックディスプレイが出回っています。以下はウェブデザイナーにとって重要な、いくつかのデバイスの解像度一覧です。 見て分かるとおり、解像度(1インチ内のピクセル数)だけでなく寸法にも多くの種類があります。解像度(ppi)は、重要な要素です。例えば、iPhone 5のアイコンはデスクトップモニタで表示した場合、4倍のサイズになります。 コンテンツを小さなサイズに合わせる時に、いくつかの問題にぶつかるはずです。以下のことを覚えておきましょう。 可読性を保つ:2000ピクセル幅のスクリーン上の14ピクセルのフォントは、300ピクセル幅のスクリーンでは2ピクセルまで小さくなります。これでは読めません。逆に、10ピクセルのテキストを7倍にすると、常識を超えた大きさになってしまいます。閲覧しているスクリーンの幅に合わせてレイアウトを調整することで、どのデバイスにおいても、合理的で読みやすいフォント比を保たなければなりません。 閲覧のしやすさを保つ:閲覧者にたくさんスクロールさせるのは絶対に避けましょう。膨大な量のコンテンツを1カラムに押し込むと、ページが長くなり過ぎ、目的のコンテンツにたどり着きにくくなります。 タップのしやすさを保つ: モバイルスクリーンはタッチで動かすことができ、それは大抵、人間の指で行われます。ですから、ボタンは小さ過ぎてはいけません。Appleが提示している、快適にタップできるUI要素の最小サイズは44 x 44ピクセルです。しかし、現実にはこの限りでないことが多く、実際の目安は約25ピクセルとなっています。 可読性があり、閲覧しやすく、快適にタップできるインターフェースを達成する方法が分かりました。次は、レスポンシブデザインの作成に必要なことを見ていきましょう。 レスポンシブデザインを作る秘策 レスポンシブデザインを作る際、いくつか気を配るべきことがあります。特に重要なのは次の点です。 Webデザインは、複数のブラウザ幅に合わせた3つのバージョンを用意する:320-480ピクセル、480-768ピクセル、768ピクセル以上。これらの幅の間でコンテンツが自由に拡大縮小されるようにする、あるいはレイアウトが固定されるようにします。3つ(またはそれ以上)の固定レイアウトに必要に応じてマージンを加える方法は、大抵の場合、可変スケーリングと比べて、デザインと実装が簡単です。しかし、可変スケーリングの方が多くのデバイスでより良いエクスペリエンスを提供できます。 解像度によって、どのコンテンツを表示するかを決める:例えばある記事のリード部分を隠したり、ボックス全体を1つのボタンにまとめたり、コンテンツを完全に隠してしまう、などです。 CSSの制約に注意する:多くのページ要素が純正なCSSの制御下にあるようにデザインしましょう。そうすることで、ページ要素をリサイズする際に柔軟に対応ができ、読み込み時間を減らすことができます。CSSに慣れていない多くのデザイナーにとっては簡単なことではないかもしれませんが、これはつまり「標準」以外のオーバーレイモードの使用を避け(レイヤーを統合できる場合は除く)、単純にシャドウとグラデーションを使うことです。 すべての解像度に、同じコンテンツと全く同じHTMLを使う:同じグラフィック要素をすべてのページバージョンに使い回すべきだということです。多くの場合、最大のスクリーン用のデザインを最初に作り、その後に必要ならば小さい解像度のために要素を減らすことが多いでしょう。 優れたレスポンシブデザインを作るには、これらの秘策とあなたの想像力、そしてコーダーのスキルが必要です。以下の例でレスポンシブデザインを作る様々な方法を紹介します。 レスポンシブデザインの例 Website: Fork Forkは、固定レイアウトに可変スケーリングを組み合わせた驚くべきサンプルです。固定レイアウトは4つ(ピクセル数は、ブロック要素のサイズです)。波のイメージの背景は可変スケーリングで、ページを770ピクセル以上にすると見ることができます。コンテンツが適宜隠れることに注目してください。 Website: Daniel Vane Daniel Vaneの個人サイトは可変の四角モジュラーグリッドをうまく活用しています。これはどんなサイズのスクリーンにも対応します。768ピクセルほどの小さめのスクリーンでは、レイアウトは5カラムから3カラムになります。480ピクセル以下では、1カラムです。 Website:…

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。
0%