COLUMNコラム

コラム記事

独断と偏見で見る、2019年のWEBデザインのトレンド

独断と偏見で見る、2019年のWEBデザインのトレンド

どうも!
寒い日が続きますね!

今回は、僕の独断と偏見のみで判断と予測をする、2019年に流行りそうなWEBデザインのトレンド予想なんかを出来ればと思います。
トレンド予想なんてとてつもなくおこがましいとも思うのですが、今回は僕のチョーーー独断と変更でご紹介しようと思いますので、異論は認めます。笑

 

ブロークングリッドデザイン

ここ最近よくみかけるようになりましたが、ブロークリングリッドデザインとは、要素をあえて不規則に配置したりする事で、リズム感を生み出すようなデザイン手法の一つです。
グリッドデザインとは対照的で、デザインに遊び心があり、見ているユーザーにも楽しい印象などを与えられるデザインとなります。
このブロークングリッドデザインに対してグリッドデザインとは、要素を規則正しく整列させる事で、美しく見せるデザイン手法になります。
ただし、規則性を持って整列されている分、退屈さや、窮屈さを与える事もあります。
ブロークングリッドデザインでも、ただ不規則に並べてしまうとまとまりの無いデザインになりますので、どちらのデザインも余白などを意識して作成するにあたっては、デザイナーとしての腕の見せ所といったところでしょうか。

 

ブロークンデザインの参考サイト

星野リゾートウエディング
URL:https://wedding.hoshinoresorts.com/

ブロークンデザインの参考サイト

 

SONICJAM Inc.
URL:https://www.sonicjam.co.jp/

ブロークングリッドデザインの参考サイト

 

 

株式会社デンソーアイティーラボラトリ
URL:https://www.d-itlab.co.jp/

ブロークングリッドデザインの参考サイト

 

 

イラストを使ったデザイン

イラストを使ったWEBサイトの最近また良く見かける事が多いように思います。
特に町並みの一部をジオラマっぽいイラストを使ったメインビジュアルや、独自のイラストを使用する事でオリジナリティを出しているWEBサイト傾向が多く見かかるようになりましたね。
WEBサイトにイラストを使う事で、写真には無い独自の印象をユーザーに与える事が出来、また、情報を視覚的に見やすく分かりやすく見せる事が出来ます。

イラストを使ったデザインの参考サイト

株式会社サンゲツ 2020年度新卒採用サイト
URL:https://www.sangetsu.co.jp/recruit/

イラストを使ったデザインの参考サイト

 

 

株式会社名古屋エステイト社
URL:https://www.ngest.com/

イラストを使ったデザインの参考サイト

 

 

marchily(クラウドサービス)
URL:https://www.marchily.jp/

イラストを使ったデザインの参考サイト

 

 

手書き風フォントのキャッチコピー

こちらも最近よく見かけるようになりましたね。特に、手書き風フォントの良い点は、よりユーザーに語りかけてくるような印象を与えたり、温かさなどを与えます。
ですので、キャッチコピーなどのメッセージ性の強い文章を置く場所には、効果的なのかもしれませんね。

 

手書き風フォントのキャッチコピーを使ったWEBサイトの参考サイト

大阪美術専門学校
URL:https://www.bisen.ac.jp/

手書き風フォントのキャッチコピーのWEBサイト参考サイト

 

 

光岡自動車
URL:https://www.mitsuoka-motor.com/

手書き風フォントのキャッチコピーのWEBサイト参考サイト

 

三井住友銀行 2020年採用サイト

URL:https://www.smbc-freshers.com/

手書き風フォントのキャッチコピーのWEBサイト参考サイト

 

 

 

フラットデザイン2.0

そもそもフラットデザインとは、余計なシャドウや装飾を排除して、シンプルで美しく洗練された印象を与えるデザイン手法になります。
iOSで採用された事から、一気に広まり、今ではよく見慣れたデザインになりましたね。
ただし、フラットデザインはそのシンプルさが逆にユーザービリティに影響を与え、どこがボタンなのかが認識しずらいなどの課題も残りました。

フラットデザイン2.0は、平たく説明すると「フラットデザインの良さを残しつつ、かつフラットデザインのルールに縛られないデザイン」となります。
これまでは余計だとされてきたシャドウや装飾などを、フラットデザイン2.0では積極的に取り入れたりと、ユーザビリティの向上を考慮されたデザインとなります。
シャドウ以外にも、グラデーションやアニメーションを使う事で、従来のフラットデザインの印象を損なうことなく、かつユーザビリティを高めているので、より美しく分かりやすいデザインとなっていますね。

 

フラットデザイン2.0の参考サイト

株式会社リブセンス
URL:https://www.livesense.co.jp/

フラットデザイン2.0の参考サイト

 

 

GA technologies 新卒・中途採用サイト
URL:https://recruit.ga-tech.co.jp/

フラットデザイン2.0の参考サイト

 

WEBサイトの見やすさ・使いやすさが、より重要になってきています

僕は普段からよくWEBデザインを作る時に、参考サイトを眺めたりしているのですが、最近ではブロークングリッドのような枠にとらわれないデザインは多くなっているように思い、今年もこの流れば続くのかなと思いました。
また、フラッドデザインは、モバイルの登場から今やデザインの主流にもなりつつありますが、モバイルファーストの登場もあり、今年はよりユーザービリティを考慮したデザインが重要になってくるでしょう。

ではでは!

その他の記事はこちら

CONTACT
お問合わせ

WEBで気になる事など、まずはお気軽にご相談ください。

06-6354-7077

営業時間 平日9:30~18:30


お問合わせフォームはこちら