最近のWEB業界のトレンドに全くついていけていない。個性的なWEBサイトが多く、デザインパターンが分からない。
少し油断するとWEBデザイナーは流行から取り残されてしまいます。日々の情報更新が超大切。
今日は最近のWEBサイトのデザインの特徴を僕なりに分析した結果と制作する際に注意する点も併せてご紹介したいと思います。
ズラし
最近のWEBサイトで多く見かけるのが写真と文字を揃えず、わざとズラして配置するレイアウト。
たとえばこちらのサイト。
写真が斜めに配置されてたり、文字が写真に重なってたり。最初から最後まで適当にズラしているわけではなく、単調なWEBサイトの中に部分的にズラしを使うとリズムが出ておもしろみのあるレイアウトになります。
ストーリー性
僕がWEBデザインを始めた頃はヘッダがあって、コンテンツがあって、フッタがある。正方形のブロックを順番に並べて、少し装飾して完成。
みたいな流れでしたが、最近のWEBサイトには型がなく、それぞれが個性的なサイトです。
WEBデザインを勉強する側になると、パターンが読めないのでどうすれば上手にサイトが作れるのか分からない。そんな気分に陥ってしまいます。
これは僕が意識していることですが、それぞれのWEBサイトには独自のストーリー性があります。もっと砕いた表現だと絵本を書くイメージでサイトを作ってます。（絵本は作ったことありませんがw）
まずヘッダで物語の始まりを予感させます。
次に序章で企業のスローガンだったり、商品のコンセプトだったり、物語の結論を少し匂わせます。
それから具体的なストーリーが順番に展開され、フッターで余韻に浸る。
みたいなイメージです。
こんな作り方なので、型がないのは当たり前でそれぞれのサイトに独自のストーリーがあります。その感覚を掴めればLPもコーポレートサイトもデザインが楽に感じられるようになると思います。
デザイン要素一つを使い回す
統一感のあるデザインは最初から最後まで一貫性が感じられます。
たとえばこちらのサイト。
青い三角形の要素が至るところで使われています。このようにデザイン要素を絞って使用することで、デザインに統一感が生まれます。
デザインに迷った時ほど、いろんな要素を使ってしまいがちですが、シンプルに同じ要素を使い回すだけで纏まりや世界観が生まれ質の高いWEBサイトに仕上がります。
レスポンシブ
これは言わずもがな。
サイトの参考になる超有名なこちらのサイト
に掲載されているサイトはほぼレスポンシブです。
もはや、PC版とスマホ版を別々に作るのは時代遅れなのかも。bootstrapなどのフレームワークを使えば簡単に作れるので、もし習得していない人は要チェックです。
ヘッダーにインパクト
ヘッダーにサイトを印象づける動画だったり画像だったり。このサイトが何たるかを表現するためにフルスクリーン気味でインパクトを与える仕掛けがされているサイトを多く見かけます。
先ほどお話したストーリー性の部分にも重なるんですが、物語の始まりをどう演出するか。ここの作り込みがサイトのクオリティを決定づける大きな要素になっているのは間違いありません。
ストーリー性でほぼ決まる
WEBサイトの完成度はストーリー性で大きく左右されます。そのあとにUIとか、アニメーションとかで演出していく。
なんだか劇団みたいですがw
技術的なことばかりがクローズアップされがちですが、僕が大切にしているのはどう表現するか？っていうところです。
まだWEBサイトのデザインが苦手って人は固定概念に縛られず、今日紹介したことを頭の片隅に置いて、あなただけのストーリを描いてみてください。
でわ。
コメント