calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

Webデザイナーが捗る!知識を増やす最近のトレンドまとめ

WebDesignTrends

Webデザインの流行りを知るために、トレンド感のある配色や洗練されたレイアウトをつくり上げるために、知っておきたいことや方法など。他に、Web制作において今後積極的に挑戦してみたいものをまとめました。

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

もくじ

配色

模様

背景

一部に動きをつける

UI・他

レイアウト

配色

1.ネオンカラー

1-neon-color_webdesign

InCub

ネオンカラーのように明度の高い発光色も今年の流行りだということでチェック。目立つ色なので図形(円や六角形)などの一部に取り入れたり透過させたり。のっぺりとした印象にならないように少し変化をつけるのがポイントです。こちらのサイトによるとInCubはネオンカラーを取り入れ世界観を表現しているとのことです。

Create Digital Media

Pokke

2.washed out

2-washedout_webdesign

Solasié

フラットカラーは自然界に存在しない色が多く、高彩度・大きい塗りを多様するので必要以上に目立つものが多いです。でも、トレンドを意識しながら刺激を抑えた配色にしたい。

そんな時は、明度(明るさ)が高く、彩度(鮮やかさ)が低い中間色のパステルカラー。淡い色を使うことで刺激の少ない柔らかい、落ち着いた印象を出すことができます。パステル系の配色を使ったサイトも増えているということで。こちらは洗いざらしといいますか色あせたような配色を使ったサイトギャラリー。

3.グラデーション

3-gradation_webdesign

Marvel

ベタ塗りから脱却したい時。フラットデザインの良さをそこなわせず、複数の色(色相)を組み合わせたグラデーションを取り入れたいときはこちらを参考に。グラデーションを取り入れることで他とは違った印象を残すことができます。同じ色相で明度差をつけます。

4.マテリアルデザイン

4-materials-design_webdesign

グーグル提唱のマテリアルデザイン。こちらはアンドロイド・Webサイトなどで使えそうなカラーパレット一覧。マテリアルデザインの詳細については(Google の新しいデザインガイドライン「Material Design」 | Developers.IO)を参考に。

模様

5.ジオメトリー

5-geometry2_webdesign

UNUS™

ジグザグ線、ひし型や三角形などで構成された模様を背景やパーツの一部に使うサイトも、少しだけ見かけるようになりましたね。まだまだ新鮮な印象なので、ロゴなどの一部に使うだけでも注目させられてしまう。Illustratorによる幾何学模様の作り方はこちらの(How To Create an Icy Blue Vector Geometric Design)を参考に。

5-geometry_webdesign

背景

6.背景色を時間の経過で変化させる

6-time-background_webdesign

Webクリエイターボックスさんがご紹介されていたWinShape Campsのように背景色を時間経過で動かす仕組み、ループさせるような同じ動きを繰り返すアニメーションであれば、CSS Animations を使います。キーフレームの定義は、「@-webkit-keyframes」+「任意の名前」、始まりと終わりの状態は「%」を使います。

7.スクロールで背景固定、コンテンツだけ動かす

7-bgfixed-scroll_webdesign

たまに見かける、スクロールすると背景固定でコンテンツが持ち上がる仕組み。background-attachment: fixed;を使うだけ。スクロールしても動かないようにfixedで背景を固定します。

モバイル:ある程度スクロールした後、検索ボックスをヘッダーに固定する方法。

一部に動きをつける

8.シネマグラフ

8-cinema-graph_webdesign

Gilgul Culinary Productions

背景に写真を大きく使うだけでは物足りない。一部分を注目させたいときは、GIFアニメーションの一つである、写真の一部だけ動きをつけループさせるシネマグラフも有効かと思います。Photoshopを使った今流行りのシネマグラフの作り方まとめ | 株式会社LIGに作り方が載っています。

9.線画 (SVG)

9-linedrawing_webdesign

SVGからアニメーションを作るLazy Line Painterを使った方法。作成した線画をSVG形式で読み込み、0から徐々に線画が完成されていくような過程をアニメーションで実現します。確実に視線が止まりそうです。

10.グリッチ

こちらはテキストにグリッチ・アートのようなエフェクトをつけたCSSテクニック。あまり見かけないのでロゴやテキストの一部に使うと面白そうです。

UI・他

11.ゴーストボタン

11-ghost-button_webdesign

Bilder

画面いっぱいの写真背景の上に、細めの白い線のボーダーで囲んだ大きめのボタンを見かける機会が増えました。テキストのみかアイコンを入れ余白を取ります。以下の情報によると、ボタンの背景が透過しているように見えるから、そう呼ばれるようになったとのこと。背景色がないので写真の邪魔にならないなどの理由があります。

とはいえ分かりやすくないとボタンの意味がないので、ボタン自体は視認性とか操作性をハッキリさせ、ボタン内の文字は可読性を高めて見せることが第一優先かと思います。

12.プレースホルダー

12-placeholder_webdesign

フォームの入力箇所で、メール・パスワード・URLなど灰色の文字で入力のヒントを表示する仕組み。フォームの周囲にテキストを置かなくてよくなります。見栄えもスッキリし場所をとらないなどのメリットがあります。プレースホルダーの解説と作成方法はこちら。

13.ローディングエフェクト

13-loading-effects_webdesign

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

14.pushState

14-pushstateform_webdesign

pjaxのようにページ遷移なしでURLを変更、ページの一部だけ更新しながらURLも変更する方法です。コンテンツを表示するまでの時間を短縮。

15.ドロアー

15-drawermenu_webdesign

最近増加傾向にあるスペースの制限を解決するUI。すでに多いですけど、これからもガンガン増えていくと思います。横からスライドして出てくるメニューの実装方法。

レイアウト

16.タイルレイアウト

16-tile-layout_webdesign

Wookmark jQuery Plugin

パネル要素をタイルのように敷き詰めた見せ方をします。タイルレイアウトを取り入れたWebサービス・キュレーションサイトもよく見かけるということで。タイルレイアウトを簡単に実現すべくjQueryプラグインを用いた使い方。

17.エディトリアル風デザイン

雑誌のような見せ方をするサイトを作る前に読んでおきたい情報。紙面と比べるとレイアウトの自由度は少ないものの、動画や音声を使えるのも強み。こちらは読み手の視線や意図を考えて効果的な図や写真等を整理・配列・編集あるいは計画するエディトリアルデザインについて。どういった工夫をすればガーリーな雰囲気を出せるのかわかります。動きのある雑誌風なサイトも増えそうなので一度おさらい。

スポンサード リンク

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

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

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

Comments

Leave a Comment

コメントする