こんにちは。制作のかんのです。

今年より少しずつ関わるようになったウェブデザインですが、日々目の前の案件をこなしていくだけで誠意いっぱいなもので、なかなか勉強する機会が無かったので、ブログを書く機会を活用してウェブデザインのテクニックやトレンドを調べてみました！

これってそういう名前なんだ〜活用できたらカッコいいな〜と思ったものをご紹介いたします！

パララックス

パララックスは、スクロールによって、サイト内のレイヤーに別々の動きをさせて、平面でありながら遠近感を表現する手法です。

近年では主流の、スクロールしていくと色んな方向から情報を表示したりする

スクロールが心地よいサイトですね！

画面内で階層を作ることで、背景もしっかり見せつつ平面的なWebサイトに奥行きを持たせることが出来るのが特徴です。

デザインや動き次第ではにぎやかさも静けさも表現出来るのが奥深いですね。

スマホ幅スクロール

大きな画面サイズでも、中央にモバイル版のデザインを配置し、左右にスペースをあけているデザインの事を指します。

中央のスクロール部分に情報が詰め込まれていますが、左右に大きなスペースが取られているため、窮屈さを感じないのが特徴です。

PCで見てもスマホで見ても、全体がまとまっていてオシャレですね！

このようなデザインのサイトが2022年では大きく増えているようです。

制作サイドとしては、PCサイト制作分の工数を減らす事ができるというメリットもあります。

フラットデザイン

現在では主流となっている、装飾を出来るだけ省略した平面的でスッキリとしたシンプルなデザインのことです。

情報がスッキリ見やすくまとめられており、企業サイトなどにおいては誠実さが伝わってくるデザインですね。

ボタンひとつのデザインにとっても、以前は立体的で装飾が施されたデザインが多く見られましたが、最近ではただ四角で囲んでいるだけのボタンも多く見られます。

サイト全体の配色も、色数は可能な限り少なく、単色でまとめていることが多いようです。

ヒーロー

「ヒーロー（ヒーロー画像）」とはトップページのファーストビューで画像を大きく見せる手法のことです。画像に限らず、動画で見せているパターンもよく見かけますね。

伝えたいイメージや、商品画像など一番に押し出したいものを載せることが多いようです。

ファーストビューにどーんと大きく表示することで、見た人にインパクトを与えつつ、商品やサービス、または企業の持つイメージを全面に打ち出す効果があります。

画面の綺麗なスマホや、大画面PCの普及により出てきたテクニックと言われているようです。

デュオトーン

デュオトーンは、その名の通り、2つの色の組み合わせで表現したデザインのことです。
使用する色は、一般的にコントラストの強い2色が選ばれます。

コントラストが効いた写真でバチっと決めるとカッコいいですね！

POPで明るい印象になりがちなため、BtoCサービス向きのような印象がありますが、色の使い方次第ではBtoB向けのWebサイトにも応用は可能そうです！

配色のテクニックとして、2色のどちらかに彩度や明度の低いトーンの色を採用すれば、落ち着いた雰囲気や、締まった印象を表現することもできます。

コーポレートサイトなどを制作する場合、支給された写真がそのままだとイマイチ…？！な状況でも、写真の色味を加工することで、雰囲気のある写真に仕上げることができそうですね。

まとめ

モバイルファーストのこの時代、いかにスマホでのデザインをうまく作るかが課題という印象でした。

LPとコーポレートサイトでもまたアプローチは違うかと思いますが、総じて、最近の人は分かりやすくてシャレたもんしか見る気にならないのでないか？というのを感じています。ファーストビュー の重要性を改めて認識しました。