新しげなサイトまとめメモ

海外デザイン

海外サイトのWebデザイン|ズロック
かっこいいWebデザインのリンク集「ズロック」 の 海外サイトページです。Webデザインの参考に。

はやりのデザイン

2016年 WEBデザイン & 2017年 流行デザインを考える! - UNIEARTHブログ
WEBデザインの移り変わりは早いもの。今流行のデザインを導入することは当然ですが、置いてきぼりを食らわない為にはそれだけではいけません。というこで、今年のデザインを振り返りながら、2017年のデザインを考察しました。

 

VR

パノラマ撮影・制作3D-pace | 最も自然な形に見える3D特殊パノラマの撮影・制作
3D-paceは写真と動画の良さを越えた特殊パノラマです。3D-pace上に様々な仕掛けを組み込めるので、ストーリー性のあるプロモーションが可能です。このパノラマはタブレット端末で営業支援ツールとしても活用でき、営業コスト等の削減もできます。

 

Web Design Gallery

WEBデザイナーの為のWEBデザインギャラリー - WEB DESIGN GALLERY for WEB DESIGNERS
美しいデザインのホームページを集めたWEBデザインギャラリー。デザインのインスピレーションの参考にどうぞ。

2015〜2016年のWebデザイントレンドまとめ

2015〜2016年のWebデザイントレンドまとめ(前編) | 東京上野のWeb制作会社LIG
技術の進歩とともに表現が変わるWebデザイン。トレンドの移り変わりも早くなってきましたね。今回は2016年のWebデザイントレンドを探ってみようと思います。なぜ流行ったのかを考えることで、新しい表現にも挑戦していきましょう!

UIデザインにおける12のトレンド

PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト(以下、PCサイト)に対する注目度は下がっています。しかし、BtoBの...

Web Design Trend 2016 by Oshimamasara

Hero アイキャッチ

GARY VAYNERCHUK

世界トップクラスのブロガーサイトを見ていると、アイキャッチのレイアウトに新たなトレンドを巻き起こしていることが分かります。

従来アイキャッチ画像は、記事リストと該当記事のトップ(body や ContentInner 内など)に配置されるのが常ですが、こちらのアイキャッチは投稿内に大きく表示もしくは背景画像として表示させる手法を採用しています。

Heroイメージを意識したアイキャッチ・デザイン、カッコいいですね。

PC など大画面で見る場合は、こちらのデザインの方が、記事がキレイに見えます。上記サイト以外にこちらのサイトのデザインも参考になります。

 

ストーリーテリング

ストーリーテリング

CyberAgent

ストーリー性のあるコンテンツを表現する方法に『ストーリーテリング(Storytelling)』があります。

ストーリーテリングは、近頃 web デザイン・トレンドして注目されており、スッキリとしたデザインが特徴的です。紹介したいストーリーに最大限焦点を合わせて、他の表示物を一切削除しています。

サンプルでご紹介させて頂いています NEGO® さんと中田ヒデさんの対談レポは、まるで取材現場にいるような迫力を感じることができます。動画ではなく、静止画像ならではの 迫力が特徴的な web デザインです 。

他には、こちらのサイトも参考になると思います。

 

Gif アニメ

Divi

デバイスレスにスムーズな動きを表現ができる方法として、Gif 画像を用いた web デザインが流行っています。

用途としては、商品紹介をするページでのシステム説明画像やキャンペーン・ページでのユーザー滞在時間充実化など使い方は様々です。

ビデオや CSS アニメーションなどとうまく組み合わせて Gif デザインを楽しみたいですね。

 

動画デザイン

adidas Climazone

ハイセンスなweb サイトに、YouTube という文字や余計なアイコンは不要ですよね。

近頃は、YouTube API を活用したシームレスな動画デザインが流行っています。こちらのサイトは凄くハイセンスで、オートループの動画を流しつつ、クリックされると用意しておいた YouTubeが再生されます。

見せたい動画と web ページの読み込み速度、デザイン性を両立したデザイン方法になります。

 

動きのあるゴーストボタン

Avada

2015年ごろからよく使われるようになったゴーストボタンに、アニメーションを加えるデザインがトレンドとなりつつあります。特にシングルページなど長いページでボタンが見過ごされそうな web デザインに有効ですね。

 

ローディング・アイコン

piratecode

国内の web サイトでローディング・アイコンはあまり見かけませんが、海外のサイトではよく見かけます。特に最近では、SVG アニメや画像に gif を重ねるような複雑なアニメ・デザインなど、ハイテク化してきています。

ローディング・アイコンは、デザイン性を高めるだけでなく、ユーザーの直帰率減少にも効果が期待できるなど、SEO 的にも期待できる重要なデザイン要素ですね。

 

チョットアニメーション

AWWWARDS ハート部分

これからトレンドとなりそうな web デザインにアイコン・アニメーションがあります。通常 SNS アイコン周辺は動きのないデザインが多く、ユーザーに見過ごされがちになると思います。

しかし、サンプルページにあるようなアニメーション・アイコンがあると、ちょっとシェアしようかどうか考えさせられますよね。こちらのアニメは CSS で作成されていますので、スマホでも問題なく表示することができます。

 

 

不揃いな縦ライン

B&O Play

パララックス・デザインをはじめ、縦長ページの平凡なカラム・レイアウトは、ユーザーの離脱率を高めてしまいます。

今年になって増えてきているデザインに『不揃いな縦ライン』があります。

商品紹介をはじめ、ブログやニュースサイトなど様々ジャンルで増えてきています。これからパララックス・デザインを考える方は、参考にしたいですね。

こちらのポータルサイトの縦ラインも斬新です。

 

割り込み的なキャッチフレーズ or 引用タグ

design-insert-blog

WIRED

単調になりがちな縦ラインのアクセントに『割り込みデザイン』を採用するケースが増えてきています。ユーザーが見慣れている小見出し(<h2>タグなど)に比べると、『んっ、何だろう』と思わせるきっかけになり、SEO的にも期待できるデザインの一つです。

ちょっとした CSS テクニックでできるトレンドデザインになります。

 

とにかく長いページ

design-long-long

Bloomberg Code(Size 9MB)

一つの情報を徹底的に解説する web ページが、にわかに人気を呼んでいます。

通常は1枚の HTML シートにたくさんの情報を記載するとファイルサイズが重くなって読み込み負荷を向上させますが、画像の最適化や JavaScript & CSS コードの最適化で読み込み負荷を改善してきています。

長いページは、コンテンツの充実度からリピーター率や滞在時間増加など、新たなビジネスチャンスを生もうとしています。

上記以外にも、ニューヨークタイムズ紙(Size 31.1MB)の長いページも見ごたえがあります。

コメント