Webデザインの流行りを知るために、トレンド感のある配色や洗練されたレイアウトをつくり上げるために、知っておきたいことや方法など。他に、Web制作において今後積極的に挑戦してみたいものをまとめました。
もくじ
配色
模様
背景
一部に動きをつける
UI・他
レイアウト
配色
１．ネオンカラー
ネオンカラーのように明度の高い発光色も今年の流行りだということでチェック。目立つ色なので図形（円や六角形）などの一部に取り入れたり透過させたり。のっぺりとした印象にならないように少し変化をつけるのがポイントです。こちらのサイトによるとInCubはネオンカラーを取り入れ世界観を表現しているとのことです。
２．washed out＋パステルカラー
フラットカラーは自然界に存在しない色が多く、高彩度・大きい塗りを多様するので必要以上に目立つものが多いです。でも、トレンドを意識しながら刺激を抑えた配色にしたい。
そんな時は、明度（明るさ）が高く、彩度（鮮やかさ）が低い中間色のパステルカラー。淡い色を使うことで刺激の少ない柔らかい、落ち着いた印象を出すことができます。パステル系の配色を使ったサイトも増えているということで。こちらは洗いざらしといいますか色あせたような配色を使ったサイトギャラリー。
- パステルカラー配色の素敵Webサイトデザイン50個まとめ – Photoshop VIP
- flatuicolorpicker : Best Flat Colors For UI Design » new
３．グラデーション
ベタ塗りから脱却したい時。フラットデザインの良さをそこなわせず、複数の色（色相）を組み合わせたグラデーションを取り入れたいときはこちらを参考に。グラデーションを取り入れることで他とは違った印象を残すことができます。同じ色相で明度差をつけます。
４．マテリアルデザイン
グーグル提唱のマテリアルデザイン。こちらはアンドロイド・Webサイトなどで使えそうなカラーパレット一覧。マテリアルデザインの詳細については（Google の新しいデザインガイドライン「Material Design」 ｜ Developers.IO）を参考に。
模様
５．ジオメトリー／幾何学模様
ジグザグ線、ひし型や三角形などで構成された模様を背景やパーツの一部に使うサイトも、少しだけ見かけるようになりましたね。まだまだ新鮮な印象なので、ロゴなどの一部に使うだけでも注目させられてしまう。Illustratorによる幾何学模様の作り方はこちらの（How To Create an Icy Blue Vector Geometric Design）を参考に。
- Animated Background Headers | Codrops
- Personal Brand Insititute
- Make Me Pulse
- Ondo
- ポリゴン・ローポリゴン のWEBデザイン一覧 | WEBデザインギャラリー
- KUAD PRODUCTION
背景
６．背景色を時間の経過で変化させる
Webクリエイターボックスさんがご紹介されていたWinShape Campsのように背景色を時間経過で動かす仕組み、ループさせるような同じ動きを繰り返すアニメーションであれば、CSS Animations を使います。キーフレームの定義は、「@-webkit-keyframes」+「任意の名前」、始まりと終わりの状態は「%」を使います。
７．スクロールで背景固定、コンテンツだけ動かす
たまに見かける、スクロールすると背景固定でコンテンツが持ち上がる仕組み。background-attachment: fixed;を使うだけ。スクロールしても動かないようにfixedで背景を固定します。
モバイル：ある程度スクロールした後、検索ボックスをヘッダーに固定する方法。
一部に動きをつける
８．シネマグラフ
背景に写真を大きく使うだけでは物足りない。一部分を注目させたいときは、GIFアニメーションの一つである、写真の一部だけ動きをつけループさせるシネマグラフも有効かと思います。Photoshopを使った今流行りのシネマグラフの作り方まとめ | 株式会社LIGに作り方が載っています。
９．線画 (SVG)
SVGからアニメーションを作るLazy Line Painterを使った方法。作成した線画をSVG形式で読み込み、０から徐々に線画が完成されていくような過程をアニメーションで実現します。確実に視線が止まりそうです。
- ASCII.jp：流行のSVGアニメを手軽に作れるLazy Line Painter｜こうめの“これから使える”jQueryプラグイン
- ASCII.jp：SVG線画が美しいリッチアニメーションの作り方 (1/2)｜先端サイトに学ぶCSS3/jQueryアニメーションデザイン
１０．グリッチ
こちらはテキストにグリッチ・アートのようなエフェクトをつけたCSSテクニック。あまり見かけないのでロゴやテキストの一部に使うと面白そうです。
UI・他
１１．ゴーストボタン
画面いっぱいの写真背景の上に、細めの白い線のボーダーで囲んだ大きめのボタンを見かける機会が増えました。テキストのみかアイコンを入れ余白を取ります。以下の情報によると、ボタンの背景が透過しているように見えるから、そう呼ばれるようになったとのこと。背景色がないので写真の邪魔にならないなどの理由があります。
とはいえ分かりやすくないとボタンの意味がないので、ボタン自体は視認性とか操作性をハッキリさせ、ボタン内の文字は可読性を高めて見せることが第一優先かと思います。
- ゴーストボタンを使った新しいデザイントレンド＆参考Webサイトまとめ – Photoshop VIP
- Webデザイントレンド定点観測 背景が透けてみえる「ゴーストボタン」 | Adobe Pinch In
１２．プレースホルダー
フォームの入力箇所で、メール・パスワード・URLなど灰色の文字で入力のヒントを表示する仕組み。フォームの周囲にテキストを置かなくてよくなります。見栄えもスッキリし場所をとらないなどのメリットがあります。プレースホルダーの解説と作成方法はこちら。
１３．ローディングエフェクト
トップページのファーストビューで大きな画像や動画を使った場合、ページ表示が完了するまでに時間がかかる場合があります。こちらは、SVGを使ったページ遷移のアニメーション処理とjQueryで簡易版のローディング画面を作る方法。
- jQueryでhtmlの簡易ローディング画面をつくる | 2GRAVITY
- 30 Amazing Examples of Loading Bar Designs for Your Inspiration | Freebies
１４．pushState
pjaxのようにページ遷移なしでURLを変更、ページの一部だけ更新しながらURLも変更する方法です。コンテンツを表示するまでの時間を短縮。
- pushState / popStateの解説とQrefyにおける実践コード | milestoner
- js で URL を動的に変更できる pushState をイイカンジにさばいてくれる kazitori.js を作った | デブ ハゲ
- jQuery – pushStateとAjaxの組み合わせpjax – Qiita
１５．ドロアー
最近増加傾向にあるスペースの制限を解決するUI。すでに多いですけど、これからもガンガン増えていくと思います。横からスライドして出てくるメニューの実装方法。
- jqueryドロワーメニューはDrawer Slide Menuがいいかも。スマホ用左スライドリストメニューの作り方【デモあり】 | wryoku
- ASCII.jp：Facebook風ドロワーメニューが手軽に導入できる drawer｜こうめの“これから使える”jQueryプラグイン
レイアウト
１６．タイルレイアウト
パネル要素をタイルのように敷き詰めた見せ方をします。タイルレイアウトを取り入れたWebサービス・キュレーションサイトもよく見かけるということで。タイルレイアウトを簡単に実現すべくjQueryプラグインを用いた使い方。
- Pinterestのようにタイル状にコンテンツを配置できるjavascript「The Wookmark jQuery plugin」
- 可変グリッドレイアウトのプラグインjQuery Masonryを実装する | FSFIELD Labs
１７．エディトリアル風デザイン
雑誌のような見せ方をするサイトを作る前に読んでおきたい情報。紙面と比べるとレイアウトの自由度は少ないものの、動画や音声を使えるのも強み。こちらは読み手の視線や意図を考えて効果的な図や写真等を整理・配列・編集あるいは計画するエディトリアルデザインについて。どういった工夫をすればガーリーな雰囲気を出せるのかわかります。動きのある雑誌風なサイトも増えそうなので一度おさらい。
スポンサード リンク