目次
どうも、駆け出しデザイナーのオオカミくんです。
今回も引き続き、WEBデザインのトレンドとメソッドを紹介したいと思います。
はじめに
先月の記事をまだ読んでない方は、是非合わせてお読みください。
前回は10選というボリューミーな内容だったのですが、まだまだ注目度が高いWEBデザインがありましたので、
今回は下記7つご紹介いたします。
1：パララックス（ズームスクロール）
2：ドラッグ・インタラクション
3：Y2K
4：ピクセルアート
5：ブルータリズム
6：クレイモーフィズム
7：ニューモーフィズム
※上記は全て正式な名称ではありません
それでは、さっそく見ていきましょう！
1：パララックス（ズームスクロール）
前回で紹介したパララックス（視差効果）を更に”z軸（奥行き）を効かせた手法”です。
パララックスには、ただ正面から見て擬似的に立体感を再現する役割だけでなく、
奥行きに向かって進んでいるかのような演出もすることが可能です。
また１点の方向に進んでいくのではなく、ジェットコースターのように上下左右に動いているかのような感覚になります。
【事例紹介】
食文化ミュージアム
スクロールするたびに、どんどん島の奥に進んでいきます。
Blue
重厚感万歳のサウンドとビジュアルの中でリングを潜りながら水の奥へと進みます。
左側に水深のようなメモリが表記されています。
その他の参考例
The Decentralized Social Blockchain
2：ドラッグ・インタラクション
ドラッグ操作を主軸としたWEBサイトであり、従来の「ヘッダーからフッターまでの縦長サイト」という固定観念を捨てた新しいレイアウトです。
任意な方向に動かしながら見ることが可能であり、サイト全体に遊び心があるデザインです。
【事例紹介】
アトリエはるか リクルートサイト
ギャラリーのように人物の写真が並んでおり、
ファーストビューという概念すらないページです。
株式会社アステックペイント採用サイト
大きい文字と写真に加えて、ビビットカラーを使用しているため、
採用ページとは思えないほどインパクトが大きいページです。
その他の参考例
3：Y2K
Y2Kとは「Year 2000（Kは”キロ=1000”）」の略称であり、2000年代初頭に流行した美学です。
すでにファッション業界では注目されていますが、WEBデザインにも１つの手法として取り入れられています。
【事例紹介】
NewJeans
コンピューター調のビジュアルとデジタルカメラやシールなどが懐かしいです。
SAUVENIR(サウベニア)
黒い枠線やビビットカラー、レトロ風のロゴなどが特徴的。
また次第に湯気で曇るFVをカーソルで拭き取ることができる面白いページです。
その他の参考例
4：ピクセルアート
パソコンの黎明期だった頃には、このようなドット絵が使われていました。
スーパーファミコンやwindows95などを彷彿とさせるような懐古感があるため、レトロ好きの人には刺さるデザインです。
ポートフォリオサイトにすると、個性が出て面白いかもしれませんね。
【事例紹介】
Yamauchi No.10 Family Office
斜めに進んでいくRPG感のあるサイト。
ドットを立体にさせることでポップで可愛いデザインになっています。
Software & Adventure
windows95のデスクトップのようなデザイン。
ファビコンまで懐かしいアイコンを使っています。
その他の参考例
Holiday Marketing Strategy Reboot
5：ブルータリズム
ブルータリズムとは、1950年代〜1970年代の建築形式であり、
「Brutal（ブルータル）」”冷酷で厳しい野生のような”手法を用いた表現主義です。
現代の洗練されたWEBデザインに対して、ブルータリズムはかなり野暮ったいデザインとなっています。
飾りのない背景、大胆な文字、彩度の高すぎる配色などといったデザインは、ある意味”前衛的なデザイン”と言ってもいいかもしれません。
【事例紹介】
ayond（アヨンド）
イレギュラーに並んだポスターのような画像をホバーするとその画像がめくれます。
任意な方向からめくることができます。
kemio store
高彩度の虹色や黒すぎる影、斜めのテキストは
まるでWORDで作ったような印象があり、かなり個性的なサイトです。
その他の参考例
ちなみに、爆速で読み込めることで有名な阿部寛さんのホームページもデザインの経緯は違っても、ブルータリズムのデザインといっても過言ではないですね。
6：クレイモーフィズム
前回のグラスモーフィズムに引き続き、
今回は粘土のような質感があるクレイモーフィズムのご紹介です。
丸みのある可愛らしさから、ユーザーに親しみやすい印象にしたいときや、
ボタンに凹凸をつけることで、先進的で未来感のある印象にしたいときに有効なデザインだと考えられます。
【事例紹介】
Panasonic Connect
スクロールすると、各プロダクトの場所にズームして詳細が表示されます。
機械的で先進的な印象があります。
コクヨのヨコク
アニメーションを加えており、とても楽しそうで可愛らしいサイトです。
その他の参考例
ブラザーグループSDGsスペシャルサイト | ブラザーSDGsストーリー
7：ニューモーフィズム
ニューモーフィズムとは、リアルな質感のあるスキューモーフィズムと、平面的なフラットデザインを組み合わせたデザインです。
イラストやUIの一部として使われることが多く、サイト全体のデザインとして使われていない印象です。
シンプルで直感的にわかりやすく、操作性を向上させる役割があります。
特にボタンに取り入れられている場合が多いです。
【事例紹介】
株式会社アーキタイプ
FVにある企業ロゴにニューモーフィズムを反映させています。
都会的な印象があります。
イオニアシリーズ（ion“e”air）
丸みのあるボタンにニューモーフィズムがあります。
全体的に白くてクリーンな印象があります。
その他の参考例
おまけ：「ビバ・マゼンタ」と「ルミナスイエロー」
画像引用：PANTONホームページ 画像引用：JAFCAホームページ
もう既にご存知かと思いますが、
「ビバ・マゼンタ」と「ルミナスイエロー」は、2023年の流行色として選定されている2色です。
トレンドカラーは、世界的な色見本帳のメーカー”PANTONE（パントーン）”と日本流行色協会の”JAFCA（ジャフカ）”の2つの組織によって決められます。
ビバ・マゼンタには、私たちにパワフルで活力を与えることで、よりよい未来を構築させる意味が込められています。
ルミナスイエローには、ほんのり光がさしこむような優しい意味が込められています。
対照的な印象ですが、どちらもポジティブで希望を与えてくれるような色になっています。
余談ですが、今回のサムネイルはビバ・マゼンタのカラーを使っています。
まとめ
いかがでしたか？
今回もさまざまなWEBデザインをご紹介いたしました！
トレンドを振り返ると、ユーザーに対するインパクト・没入感・洗練さ・懐古感・利便性といった設計意図が考えられたデザインでした。
私にとってトレンドを知るということとは、
デザイン製作する際に、非常に役に立つ情報だと考えております。
（もちろん”理由”まで知ることまでが必須だけど、最初はとりあえず知ることが大事）
ゲーム用語で例えるなら”環境”と同じですね！
昨今のWEBデザインでは、”ヘッダーとFVがあって下にスクロールするとコンテンツが見える”レイアウトではなく、上下左右・奥行きなどを使った幅広いデザインも使われるようになっていることに気がつきました。
最近では、綺麗なWEBサイトでも、”なんかワードプレスっぽいデザインだな”みたいな感覚で見られるようになった気がします。
ただ、見た目が良いだけではなく、”どのようにこのデザインができたのか”というデザインプロセス（コンセプト）に着目した記事も書けるようにしたいと思っています。
今後もリサーチを続けて、目が肥えたデザイナーになりたいですね！
参考
・トレンド、メソッド参考
参考サイト
・[2023年版] Webデザイン・UIデザインの注目最新トレンド30選！デザイン制作時に参考になる人気の手法やアレンジを総まとめ
・【2023年最新版】WEBデザインの注目すべきトレンド26選
・【2023】Webデザイナー厳選！2023年のWebデザイントレンド10選
・【最新版！2023年】Webデザイントレンド予測！
・2023年のUI UXデザインのトレンドはこれ！大きな流れを押さえておこう
・2022年に流行するWebデザインの最新トレンド10個まとめ
・デザイントレンド「ブルータリズム」
・2023年の流行色/トレンドカラー｢ビバマゼンタ｣と｢ルミナスイエロー｣！使いやすそうな色が可愛い
・WEBデザイン参考
参考サイト
・SANKOU!
・Web Design Clip | Webデザインギャラリー・クリップ集
・muuuuu.org
