calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

Web制作者が捗る!知識が増える2014年トレンドまとめ

2014_Web_Design_Trends

トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

ファーストビューで使いたいエフェクト

脱ビットマップ画像

配色・フォント

効果

コンテンツ

レイアウト

ファーストビューで使いたいエフェクト

1.ロングシャドウ

long-shadow_2014_trend

影さえも様式化してしまったロングシャドウ。45度傾けた長い影のようなデザインでアイコンやロゴなどで流行となりました。イメージとして日本語サイトではWEMAKE の仕組み - Wemake(ウィーメイク)がわかりやすいかと思います。以下は、ロングシャドウがどういった仕組みで作られているかとツールなどを使った作り方です。

2.ポリゴン

polygon_2014_trend

写真をセルの大きいポリゴン風に加工したような表現。フラットデザインによく合うということで、少しづつではありますが増えてきています。ポリゴンにする方法ではLow Poly Text Effectのテキストにエフェクトを加える方法が一番取っ付き易いと思います。

3.ラージフォトスタイル

large-photo-style_2014_trend

タイポグラフィやイラストのみだとフラットデザインはのっぺりした感じになりますが、ファーストビューに横幅いっぱいの写真を使うと「奥行き」さを感じさせることができるようになります。

タイポグラフィを載せる余白を想定した写真を使うのがポイント。そうすることで文字と写真の中の物が被らずに済み、スッキリ見えます。

background-size:cover;で背景画像のアスペクト比(縦横比)を保ちつつ、常にその画像1枚だけでウィンドウいっぱいに表示させています。

4.ブラーエフェクト

blur-effect_2014_trend

背景写真を思い切ってぼかしてみるのも方法の一つです。以下はサービス系サイトで使えそうなVague.js。写真にぼかしを入れるプラグイン。ブラウザによっては非対応もありますが、ぼかしを調節できます。

cssのみでボカシたい場合は-webkit-filter: blur(10px);、白黒にする場合は-webkit-filter: grayscale(1);を使います。

5.フルスクリーン動画

fullscreen-video_2014_trend

ウェブページの背景で動きを出すトレンドの一つで、最近は背景に動画を埋め込む国内のサイトも増えてきました。画像よりユーザーの滞在時間が増えそうですね。実際に視線やマウスが止まりませんか?こちらは比較的簡単にリピート再生も可能なjQuery プラグインの「jquery-tubular」を使った方法。

もうひとつはvideoタグを使う基本的な実装方法。背景に動画を入れ、theQ cameraのような動画フルスクリーンサイトを構築する手順。オフィスやスタッフの作業光景などを入れると、より親近感も増えそうです。ドット画像などを埋め込み、荒れた画質をオシャレに見せる方法など。

6.画像シーケンス

image-sequence_2014_trend

画像シーケンスは映像を複数の連続した画像に分け、マウスホイールすると画像が動いているように見せる手法。通常は連続した画像を1箇所に重ねて配置し、1点以外を非表示にします。

脱ビットマップ画像

画像ファイルには高解像度が求められるようになりましたが、回線・速度などの問題もあるので、どこにでも大きな画像を使うわけにはいけません。拡大・縮小に対応した制作フロー効率化の方法。

7.SVG

svg_2014_trend

ベクター画像ファイル形式のSVGは拡大・縮小に強く、テキスト編集、Illustratorで書き出しも可能です。SVGの描画をサポートしてくれるライブラリではSnap.svgが有名かと思います。

写真のような複雑な形状を持つ画像には不向きですが、テクスチャやアイコン、ロゴ、イラストなどには積極的に使いたいところです。

SVGを使ったラインアニメーションの実装方法はこちらが参考になります。

8.Webフォントを円で囲む

circle-web-fonts_2014_trend

こちらのサイトが解説しているように商品の特徴やメリットなどをアイコンで表現した見せ方が増えています。

ファーストビュー下のコンテンツに円を取り入れると見栄えがよくなります。Font Awesomeborder-radius:50%で囲むだけでOKです。アイコン一覧はこちら。画像ではなくテキストとして表示されるので、色やサイズ変更が驚くほど簡単。

写真を円で囲む場合はborder-radiusを使って切り抜きます。

配色・フォント

9.配色(フラットデザイン)

color-scheme-flat_2014_trend

最近よく使われるフラットカラーは自然界に存在しない色が多いので必要以上に目立ちます。コントラストを強める配色はマルチデバイスのUIを向上させるため。高彩度・パステルカラーを使うことも多いです。配色の参考になるサイトを2つチョイスしました。

10.タイポグラフィ(フラットデザイン)

typography_2014_trend

フラットデザインで使われるタイポグラフィは、周囲に余白をとったサンセリフのシンプルな書体を使うのがポイント。ファーストビューでは情報を少なく、スクロールにより少しずつ情報を出していく見せ方が多いです。

以下は小文字を使用した Mike Joyce 氏のポスターやフライヤーのデザイン集。もう一つはブルーノートのジャケット一覧集。フラットデザインで使用するタイポグラフィの参考になります。

立体的でないグラフィックデザインの、タイポグラフィとスペースの使い方がフラットデザインのヒントになると思います。(参考:Lessons From Swiss Style Graphic Design

11.フォント(フラットデザイン)

font-flat_2014_trend

太字を上手く活用するのは難しいので、日本語で使えるタイプと、細字スタイルベースのサンセリフ調フォントをメモしておきます。LightやNormal、Boldなど数タイプのフォントウェイト。

和文によってフラットデザインを作成するときは、欧文よりサイズを下げたり、行間を広げるなどの工夫が必要になってきます。

効果

12.Infinite Scroll(無限スクロール)

infinite-scroll_2014_trend

ブラウザのスクロールに対応しコンテンツを表示していくinfinite scroll(無限スクロール)。下部まで移動すると次のページを表示してくれるプラグイン。ページ遷移を行うことなく大量のコンテンツをユーザーに提供できます。無限スクロールはTwitterやFacebookなどのサービスで使われていますね。

13.今後増えそうなCSS3 テクニック

css3-technique_2014_trend

コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。画像ホバーキャプション、回り込み解除の新しい方法や、透過処理、洗練されたマスクの動き、画像切り抜き方法などひと通り揃ってます。

14.遅延効果

delay-effect_2014_trend

transitionプロパティを使いレイヤーや動きをゆっくり変化させる手法は、いろいろなサイトで見かけるようになりました。

15.パララックスエフェクト+縦

parallax-effect-vertical_2014_trend

パララックスはブラウザをスクロールする際に、スクロールする速度が異なるレイヤー画像などを配置し、奥行きを表現する視差効果。

パララックスを簡単に実装できるプラグインではskrollrが有名かと思いますが、以下は実際に自分で構築するときの実装方法。

16.パララックスエフェクト+横

parallax-effect-width_2014_trend

縦スクロールは多いですけど、横スクロールを実現するjQuery プラグインjInvertScrollを解説してあるサイトは少ないので。

17.横スクロール

horizontal-scroll_2014_trend

トレンドというわけではないですが昔より見かけるようになってきたので。jQueryでサイト全体を横や縦にスクロールさせる方法も。もう一つは、マウスホイールで横に移動と、ナビゲーションボタンをクリックで指定位置までスライドする方法。

コンテンツ

18.HTML5ビデオプレイヤー

html5-videoplayer_2014_trend

動画再生するプレイヤーはVideo.jsが有名かと思います。以下はvideo要素の基本的な記述方法とその他プレイヤーまとめです。

19.CSSのみで3Dエフェクト

3d-effects-css_2014_trend

CSS3を使用し空間的な動きなどを表現しているサンプル。フラットデザインが進む中、サイドバーなどにこういった動きをワンポイントで取り入れるサイトも増えてきています。

20.スクロールで画像読み込み

imagescroll_2014_trend

サイトの読み込み速度を改善するための施策であり、インターフェイスもいいということで。スクロールで画像読み込みをさせるjQuery プラグインLazy Loadの使い方。

21.ページローディングエフェクト

page-loading_2014_trend

トップページのファーストビューで大きな画像や動画を使った場合、ページ表示が完了するまでに時間がかかる場合があります。こちらは、SVGを使ったページ遷移のアニメーション処理とjQueryで簡易版のローディング画面を作る方法。

22.円形プログレスボタン

circular-progress_2014_trend

こちらはボタンを押すことで、円形のプログレス表示をしてくれるエフェクト。

レイアウト

23.メイソンリー

mason-lee_2014_trend

Masonryはブラウザの幅に合わせてコンテンツをタイル状に配置していくライブラリ。表示領域のサイズが変更されたとしても対応可能なので、様々なデバイスでのデザイン構築に活用できます。

24.メガナビゲーション

mega-navigation_2014_trend

フルスクリーン動画や画像に伴い、ナビゲーションメニューも広いスペースを使ったメガナビゲーションを多く見かけるようになりました。次に紹介するスティッキーヘッダーと組み合わせることで、UIもよくなります。

sticky-header_2014_trend

ページを分割せず、1ページのストーリーで見せるページが多くなりました。ウィンドウのスクロールに応じてヘッダーを移動させるスティッキーヘッダーはどれだけページが長くなっても、ウェブページの上部に検索フォームやナビゲーション・メニューを配置されるので、ナビをおけばいつでもページ遷移ができるようになります。横幅ピッタリに配置させるのが今風です。

26.シングルページ完結型

single-page-contained_2014_trend

すべてのコンテンツや情報を1ページに集約させた、シングルページ完結型のレイアウト。文字や画像だけでは退屈で離脱されるので、アニメーションや様々なエフェクトを盛り込んで工夫されているのが多いです。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

  1. […] 4. Web制作者が捗る!知識が増える2014年トレンドまとめ […]

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください