【コラム】近頃のWEBサイトデザイン

最近のオシャレなWEBデザインのポイント

最近問い合わせで多いのが「WEB制作」。確かに、映像を作っても肝心の媒体となる自社サイトがなければ掲載のしようがないですよね。「とにかく安く」という要望から「見た目にこだわった」「集客につながる」サイト作りまで様々なご要望をいただきますが、いったいどこから手をつけていいのか迷われている方も多いのではないでしょうか?

まずは第一印象が肝心!ページを開いた瞬間に心躍るような「最近ハヤリのWEBデザイン」についていくつかまとめてみたいと思います。

 

■最近はやりの「フラットデザイン」

WindowsやiPhoneなど、少し前からアイコンのデザインが一新されたのを覚えてますでしょうか?

ios7-icon-580x309

左:最新アイコン 右:旧アイコン

 

旧アイコンはシャドウがついていたり、立体的でリアルなアイコンになっています。

それに対し新アイコンはシンプルです。今までは平面上にいかに立体的に物を表示させるかという技術に躍起になっていましたが、だんだんとユーザー目線に合わせて表示を抽象化し、シンプルで入り込みやすいデザインへと遷移していってます。ありふれた情報を極力コンパクトに伝えるという時代の流れなのかもしれません。

また、カラーもグラデーションは使わずに単色、フォントも明朝体のような字体より細めのゴシック体などクセのないシンプルな字体が好まれて使われることもポイントです。

0a971f7c4edce109591461f9fd25358d-589x400

 

■ページ幅いっぱいの「ストレッチデザイン」

spektrummedia-flat-portfolio-animation-jquery-css-webdesign_005

 

もともとはランディングページ(キャンペーンの際などに使われる1ページだけのWEBサイト)のデザインで多く用いられていた画面いっぱいのWEBデザインですが、近頃はこれをそのままWEBサイトにも使用している傾向が多く見られます。

見た目のインパクトもそうですが、あちこちクリックしなくても情報が1〜3ページほどで完結する手軽さから、こちらも情報をよりコンパクトにという流れで多く採用されているデザインです。

 

■見ていて気持ちいい「パララックス」

スクリーンショット 2015-04-06 18.57.36

また、ストレッチデザインに多い効果として【パララックス】というエフェクトが使われているのも見逃せません。スライドするごとにホームページがアニメーションのように動いたり、文字が順番に表示されたりと見ている人を飽きさせない工夫がされています。気持ちよくて思わず何度もスクロールしてしまいます。

参考サイト:Creativity Fluid

 

■インパクト抜群!「動画背景」

スクリーンショット 2015-04-06 19.02.11

パララックスも遊び心溢れるデザインで面白いのですが、一番インパクトを与える効果としては最近台頭してきた「動画背景」でしょう。制作した動画をWEBの一部に埋め込むだけではなく、背景として前面に動画を使用。まだ利用している企業も少なく、差別化のチャンスでもあります。もちろん動画の上に文字やアイコンを重ねてクリックさせるようにすることもできます。

参考サイト:theQ camera

 

いかがでしたでしょうか?

WEBサイトを作る際に担当者に「こういう効果で〜」と伝えられればより思い通りのWEBを作れること間違い無し!これから立ち上げる方、リニューアルする方もぜひ参考にしてみてくださいね。

株式会社Funusual

Instagram