トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。
もくじ
ファーストビューで使いたいエフェクト
脱ビットマップ画像
配色・フォント
効果
- １２．Infinite Scroll(無限スクロール)
- １３．今後増えそうなCSS3 テクニック
- １４．遅延効果
- １５．パララックスエフェクト＋縦
- １６．パララックスエフェクト＋横
- １７．横スクロール
コンテンツ
レイアウト
ファーストビューで使いたいエフェクト
１．ロングシャドウ
影さえも様式化してしまったロングシャドウ。45度傾けた長い影のようなデザインでアイコンやロゴなどで流行となりました。イメージとして日本語サイトではWEMAKE の仕組み – Wemake（ウィーメイク）がわかりやすいかと思います。以下は、ロングシャドウがどういった仕組みで作られているかとツールなどを使った作り方です。
- 流行るかどうかは別としてロングシャドウデザインを考察してみたら意外と深かった｜Olein〜オレのインタレスティングなこと〜
- CSSでロングシャドウを作る – CodePen
- 今流行のフラットデザインに一工夫！ロングシャドウ作成ツールまとめ | 株式会社LIG
- 「ロングシャドウ」エフェクトをPhotoshopの3D機能で簡単に作る方法 | 株式会社LIG
２．ポリゴン
写真をセルの大きいポリゴン風に加工したような表現。フラットデザインによく合うということで、少しづつではありますが増えてきています。ポリゴンにする方法ではLow Poly Text Effectのテキストにエフェクトを加える方法が一番取っ付き易いと思います。
- 静かに流行り始めているポリゴン風デザインに挑戦！ | Webクリエイターボックス
- イメージ写真をモザイク状ポリゴンスタイルに加工するPSチュートリアルPhotoshopVIP |
- 秘かに流行『ポリゴンスタイル』の制作方法 〜 illustrator 〜 | 株式会社レジット
３．ラージフォトスタイル
タイポグラフィやイラストのみだとフラットデザインはのっぺりした感じになりますが、ファーストビューに横幅いっぱいの写真を使うと「奥行き」さを感じさせることができるようになります。
タイポグラフィを載せる余白を想定した写真を使うのがポイント。そうすることで文字と写真の中の物が被らずに済み、スッキリ見えます。
background-size:cover;で背景画像のアスペクト比（縦横比）を保ちつつ、常にその画像1枚だけでウィンドウいっぱいに表示させています。
- background-size:coverで背景画像をフルスクリーンにフィットさせたレスポンシブウェブデザイン | Dress Cording
- ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
４．ブラーエフェクト
背景写真を思い切ってぼかしてみるのも方法の一つです。以下はサービス系サイトで使えそうなVague.js。写真にぼかしを入れるプラグイン。ブラウザによっては非対応もありますが、ぼかしを調節できます。
cssのみでボカシたい場合は-webkit-filter: blur(10px);、白黒にする場合は-webkit-filter: grayscale(1);を使います。
５．フルスクリーン動画
ウェブページの背景で動きを出すトレンドの一つで、最近は背景に動画を埋め込む国内のサイトも増えてきました。画像よりユーザーの滞在時間が増えそうですね。実際に視線やマウスが止まりませんか？こちらは比較的簡単にリピート再生も可能なjQuery プラグインの「jquery-tubular」を使った方法。
もうひとつはvideoタグを使う基本的な実装方法。背景に動画を入れ、theQ cameraのような動画フルスクリーンサイトを構築する手順。オフィスやスタッフの作業光景などを入れると、より親近感も増えそうです。ドット画像などを埋め込み、荒れた画質をオシャレに見せる方法など。
６．画像シーケンス
画像シーケンスは映像を複数の連続した画像に分け、マウスホイールすると画像が動いているように見せる手法。通常は連続した画像を１箇所に重ねて配置し、１点以外を非表示にします。
脱ビットマップ画像
画像ファイルには高解像度が求められるようになりましたが、回線・速度などの問題もあるので、どこにでも大きな画像を使うわけにはいけません。拡大・縮小に対応した制作フロー効率化の方法。
７．SVG
ベクター画像ファイル形式のSVGは拡大・縮小に強く、テキスト編集、Illustratorで書き出しも可能です。SVGの描画をサポートしてくれるライブラリではSnap.svgが有名かと思います。
写真のような複雑な形状を持つ画像には不向きですが、テクスチャやアイコン、ロゴ、イラストなどには積極的に使いたいところです。
- SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました！ 114個 – 聴く耳を持たない(片方しか)
- Photoshop CCの画像アセット機能でSVGを書き出す裏技 | Stocker.jp / diary
SVGを使ったラインアニメーションの実装方法はこちらが参考になります。
８．Webフォントを円で囲む
こちらのサイトが解説しているように商品の特徴やメリットなどをアイコンで表現した見せ方が増えています。
ファーストビュー下のコンテンツに円を取り入れると見栄えがよくなります。Font Awesomeをborder-radius:50%で囲むだけでOKです。アイコン一覧はこちら。画像ではなくテキストとして表示されるので、色やサイズ変更が驚くほど簡単。
写真を円で囲む場合はborder-radiusを使って切り抜きます。
配色・フォント
９．配色(フラットデザイン)
最近よく使われるフラットカラーは自然界に存在しない色が多いので必要以上に目立ちます。コントラストを強める配色はマルチデバイスのUIを向上させるため。高彩度・パステルカラーを使うことも多いです。配色の参考になるサイトを2つチョイスしました。
- フラットデザインなWebサイトで使われている色ってどんな色？配色パターン事例・カラーコード付き｜Tips*Blog｜株式会社コプロシステム
- 今年流行のフラットデザインで使われているカラーコード – W3Q
１０．タイポグラフィ(フラットデザイン)
フラットデザインで使われるタイポグラフィは、周囲に余白をとったサンセリフのシンプルな書体を使うのがポイント。ファーストビューでは情報を少なく、スクロールにより少しずつ情報を出していく見せ方が多いです。
以下は小文字を使用した Mike Joyce 氏のポスターやフライヤーのデザイン集。もう一つはブルーノートのジャケット一覧集。フラットデザインで使用するタイポグラフィの参考になります。
立体的でないグラフィックデザインの、タイポグラフィとスペースの使い方がフラットデザインのヒントになると思います。（参考：Lessons From Swiss Style Graphic Design）
１１．フォント(フラットデザイン)
太字を上手く活用するのは難しいので、日本語で使えるタイプと、細字スタイルベースのサンセリフ調フォントをメモしておきます。LightやNormal、Boldなど数タイプのフォントウェイト。
和文によってフラットデザインを作成するときは、欧文よりサイズを下げたり、行間を広げるなどの工夫が必要になってきます。
効果
１２．Infinite Scroll(無限スクロール)
ブラウザのスクロールに対応しコンテンツを表示していくinfinite scroll（無限スクロール)。下部まで移動すると次のページを表示してくれるプラグイン。ページ遷移を行うことなく大量のコンテンツをユーザーに提供できます。無限スクロールはTwitterやFacebookなどのサービスで使われていますね。
１３．今後増えそうなCSS3 テクニック
コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。画像ホバーキャプション、回り込み解除の新しい方法や、透過処理、洗練されたマスクの動き、画像切り抜き方法などひと通り揃ってます。
１４．遅延効果
transitionプロパティを使いレイヤーや動きをゆっくり変化させる手法は、いろいろなサイトで見かけるようになりました。
１５．パララックスエフェクト＋縦
パララックスはブラウザをスクロールする際に、スクロールする速度が異なるレイヤー画像などを配置し、奥行きを表現する視差効果。
パララックスを簡単に実装できるプラグインではskrollrが有名かと思いますが、以下は実際に自分で構築するときの実装方法。
１６．パララックスエフェクト＋横
縦スクロールは多いですけど、横スクロールを実現するjQuery プラグインjInvertScrollを解説してあるサイトは少ないので。
１７．横スクロール
トレンドというわけではないですが昔より見かけるようになってきたので。jQueryでサイト全体を横や縦にスクロールさせる方法も。もう一つは、マウスホイールで横に移動と、ナビゲーションボタンをクリックで指定位置までスライドする方法。
コンテンツ
１８．HTML5ビデオプレイヤー
動画再生するプレイヤーはVideo.jsが有名かと思います。以下はvideo要素の基本的な記述方法とその他プレイヤーまとめです。
- 絶対に覚えておきたいHTML5の『video要素』超基本を知る!! | HTML5でサイトをつくろう
- iPhone・iPadでも動画コンテンツを見れるようにするHTML5 Video Player集めました。 | Webデザインクリップ
１９．CSSのみで3Dエフェクト
CSS3を使用し空間的な動きなどを表現しているサンプル。フラットデザインが進む中、サイドバーなどにこういった動きをワンポイントで取り入れるサイトも増えてきています。
- CSS3Dで作られたリアルな“雲”、チュートリアル付き 【増田 @maskin】 : TechWave
- Pure CSS 3D Box – CodePen
- ASCII.jp：CSS Transitionsを使った3Dロールオーバーのアイデア (1/2)｜先端サイトに学ぶCSS3/jQueryアニメーションデザイン
２０．スクロールで画像読み込み
サイトの読み込み速度を改善するための施策であり、インターフェイスもいいということで。スクロールで画像読み込みをさせるjQuery プラグインLazy Loadの使い方。
２１．ページローディングエフェクト
トップページのファーストビューで大きな画像や動画を使った場合、ページ表示が完了するまでに時間がかかる場合があります。こちらは、SVGを使ったページ遷移のアニメーション処理とjQueryで簡易版のローディング画面を作る方法。
２２．円形プログレスボタン
こちらはボタンを押すことで、円形のプログレス表示をしてくれるエフェクト。
レイアウト
２３．メイソンリー
Masonryはブラウザの幅に合わせてコンテンツをタイル状に配置していくライブラリ。表示領域のサイズが変更されたとしても対応可能なので、様々なデバイスでのデザイン構築に活用できます。
２４．メガナビゲーション
フルスクリーン動画や画像に伴い、ナビゲーションメニューも広いスペースを使ったメガナビゲーションを多く見かけるようになりました。次に紹介するスティッキーヘッダーと組み合わせることで、UIもよくなります。
２５．スティッキーヘッダー
ページを分割せず、1ページのストーリーで見せるページが多くなりました。ウィンドウのスクロールに応じてヘッダーを移動させるスティッキーヘッダーはどれだけページが長くなっても、ウェブページの上部に検索フォームやナビゲーション・メニューを配置されるので、ナビをおけばいつでもページ遷移ができるようになります。横幅ピッタリに配置させるのが今風です。
２６．シングルページ完結型
すべてのコンテンツや情報を1ページに集約させた、シングルページ完結型のレイアウト。文字や画像だけでは退屈で離脱されるので、アニメーションや様々なエフェクトを盛り込んで工夫されているのが多いです。
スポンサード リンク