2024年のトレンドになるかも？今年登場したWebデザインのアイデア7選

Webデザインに関するトレンドは毎年変遷を繰り返しており、トレンドの移行スピードは早まっています。
2016年にはデュオトーンやヒーローイメージを大きく使ったサイト、2017年にはスプリットスクリーンやブルータルなデザインが台頭してきました。
2018年は、どんなWebデザイントレンドがやってくるのでしょうか。

今回は、2018年に試してみたいWebデザインのアイデアをご紹介します。
これから流行しそうなトレンドをいち早く取り入れたいと考えている方はぜひチェックしてみてください。

2018年に試してみたいWebデザインのアイデア7選

1. アシンメトリーなスプリットスクリーン

Odai / スクリーンショット：2017年10月

2017年は数多くのホームページがスプリットスクリーンを採用しました。
スプリットスクリーンとは、画面を中央で2分割したように見せ、左右で別々のコンテンツを見せるレイアウト手法です。

スプリットスクリーンの人気のレイアウトは、左右を対称的・均等に分けるものです。
しかしながら、2017年後半からは、徐々に左右非対称の大きさで表示するサイトが多くなっています。

Station / スクリーンショット：2017年10月

左右非対称にする場合、右か左のどちらかに画像を配置し、その画像を大きく見せるように工夫しているサイトが多いようです。
写真が画面の3分の2を占めるので、版面率や図版率が高くなる傾向があり、まるで雑誌でも見ているかのような感覚になります。

最近は通信速度の向上により多少高解像度の画像であっても数枚であれば素早く表示することができるようになってきたので、写真がメインコンテンツとなるのであれば、このレイアウトを使ってみてはいかがでしょうか。

2. ホワイトエッジ＆レイヤードタイトル

アソビュー株式会社 / スクリーンショット：2017年10月

白背景に自由に画像を配置するレイアウトが増えてきました。

白背景に画像、というのは、Web技術がまだ原始的だったころにタイムスリップしたかのようなシンプルな構成だと言えますが、ここにちょっとした工夫があります。
それは、「タイトルやヘッダーを写真からずらして配置する」ということです。

[Zoomanity] / スクリーンショット：2017年10月

デザインのコストがほとんどかからない上に、特別なタイポグラフィを使わなくとも簡単に躍動感を演出することができます。

3. マスク

株式会社インキュビット / スクリーンショット：2017年10月

色付きのレイヤーを重ねてオーバーレイをかけたようなマスク効果は、洗練された印象を与えたい時に役立ちます。
オーバーレイ部分は、時には単色で使ったり、あるいはグラデーションをかけて表現することもあるようです。

EXERON / スクリーンショット：2017年10月

マスクをかけると、単に画像を配置しただけでは得られないようなメトロポリタンな雰囲気を演出できます。
「最先端」「都会」といったキーワードと相性がいいと言えます。

マスクをかけた部分は、文字を切り抜きにして表示してみたり、あるいは人物の輪郭を切り抜いてみたりと、そのあたりも実験的になっています。
iPhone Xのホームページでは、X字に切り抜かれたグラデーションが非常にインパクトが強く、スクロールエフェクトと合わせて眼球を捉えるようなデザインになっています。

4. フォトコンテンツ

North East / スクリーンショット：2017年10月

大きな写真をアバブザフォールドの位置(スクロールしなくても見える「折り目」の上の位置)に持ってくる*「ヒーローヘッダー」は昨年から大きく流行を見せています。
一方で2018年を境に、ビローザヘッダー(スクロールしないと見えない位置)にも大きな写真をまるでカタログの全面写真のように配置して「フォトコンテンツ」*を主役にするのが、コマースサイトを中心に起こりそうです。

[はじめかた研究所]/ スクリーンショット：2017年10月

実際のところ、Mereheadによれば、Amazonなどのコマースサイトで物品を購入するユーザーのうち60％以上が、購入の決め手として写真を挙げています。
コマースサイトは実際の店頭で購入するのとは違い、写真やレビューを見て判断するしかないので、写真が充実しているほど購買のきっかけとなるのです。

[Amazon Echo] / スクリーンショット：2017年10月

Amazon Echoのページでは、存在感のある大きな写真が何枚も使われています。
利用シーンや使い方、内部構造などを豊富に写真で説明することで、まるで手元にあるかのような想像さえできてしまいます。

5. スキュードブロック

BAKE / スクリーンショット：2017年10月

単調なレイアウトから脱却したいのであれば、斜めにブロックやレイヤーを重ねてみてはいかがでしょうか。
写真を一枚ぺたりと貼るだけではあまり動きがなくても、斜めの直線を差し込むだけで、躍動感を演出できます。

株式会社パレンテ / スクリーンショット：2017年10月

ブラウザはどうしても縦の線・横の線がはっきりとしてしまうので、これまでも多くのデザイナーがその秩序を「壊そう」と、さまざまなレイアウトに挑戦してきました。
その中でも「斜め」の直線を一箇所に取り入れるのは非常にシンプルで、デザイナーとしても採用しやすいでしょう。

6. ダークパステル

HARUKI MURAKAMI / スクリーンショット：2017年10月

シンプルなパステルカラーのフラットデザインは2017年もいまだに健在でしたが、現在では落ち着きのあるトーンダウンしたパステルカラーが好まれています。

作家・村上春樹さんの海外向け英語サイトでは、作品ごとにさまざまなダーク調のパステルカラーが多用されています。
明るめのパステルカラーは若々しくてエネルギッシュなイメージを与えますが、明度を落として少し暗くすることで、落ち着いた、安心感のある雰囲気になります。

Bobby / スクリーンショット：2017年10月

サブスクリプションを管理するiPhoneアプリのBobbyも、UIこそビビッドでカラフルですが、デモで表示されているiPhoneの背景として敷かれている色は、若干落ち着きのある色となっています。

明度を落とすことによって、前面の明るい画面や文字の可視性が上がるという効果も期待できます。
単色ではなく、複数の色を交互に見せていくのもデザインとしては面白そうです。

7. ポップなジオメトリー

Manifold / スクリーンショット：2017年10月

幾何学図形を効果的に使うようなデザインも増えています。
写真がなくとも、さまざまな種類の幾何学模様を使うことで、「多様性」や「汎用性」を演出することができます。

AWSをはじめとしたクラウドサービスの管理を行うManifoldと呼ばれるサービスでは、明度を落とした形で、丸や三角、四角といったさまざまな図形を細いラインを使いながら表現をしています。
色々なサービスをこうした図形に見立て、サービスのラインナップをアピールしたデザインとなっています。

Digital Asset / スクリーンショット：2017年10月

ファイナンスアプリケーションのセキュリティに強いDigital Assetのホームページは、資産である不動産のようなものを立方体に見立て、アニメーションでそれらを守っているように見せています。

幾何学模様が具体的なイメージを表現しているにせよ、あくまでも象徴的なものにせよ、数学的な「お堅い」イメージというよりも、親近感を示すためにあえて幾何学的な図形を採用しているケースが多いでしょう。