Advertisement

latestwebdesign2018april

 

さまざまな想いやメッセージ、コンセプトを伝えるウェブサイトは、クリエイティブなアイデアを表現するのに最適です。2018年のデザイントレンドを採用したり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイト、レイアウトや配色の参考にしたいサイトなどさまざま。

 

この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。アイデア出しに困ったときなど、デザイン見本として活用することができます。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。

 

2018-design-trend-feat-img
あっという間に一年が過ぎ、2017年には多くの革新的なデザインが登場しましたが、2018年はどんな一年になるでしょう。今回は、2018年に注目したいデザイントレンド20個を
graphic-design-trend-2
「流行は繰り返す(英: Everything old is new again)」と言うように、2018年は過去のグラフィックデザインのトレンドをよりモダンにし、ここ数年人

 

 

Webデザイン見本に最適!実例で学ぶ最新トレンド、スタイルまとめ

 

Chobani

カラフルな果物のイラストを利用することで、ブランドイメージをうまく伝え、魅力的な見た目を演出しています。

chobani

 

 

 

4Digit Recruit

水彩絵の具が広がるように写真が表示されるアニメーションエフェクトなど印象的なリクルート求人ページ。

4digit-recruit

 

 

 

Basic Culture Manual

フォントを大胆に使用したレイアウトに、落書きの様なハンドペイントを加えたシンプルで印象に残るサイトデザイン。マウスの動きに反応する背景も素敵です。

basic-culture-manual

 

 

 

Antoni

動画の制作実績をまとめたポートフォリオサイトで、ヒーローイメージにインパクトのある動画と巨大な文字テキストを配置したデザイン。

antoni

 

 

 

Red Bull Racing Citrix

redbull-racing

 

 

 

Teatrilalka

独自のユニークでカラフルなイラストと、テーマカラーの鮮やかな青色が印象的で、一貫性のあるデザインを実現しています。

teatrlalka

 

 

 

YouTube Rewind 2017

2017年に世界で人気となったYouTubeビデオ動画をまとめて時系列タイムライン形式で紹介したサイト。

youtube-rewind-2017

 

 

 

Webflow Ecommerce

ショッピングサイトのデザインを自由にカスタマイズできる良さを伝えるために、プロトタイプとマウススクロールアニメーションを組み合わせたデザインが印象的。

webflow-ecommerce

 

 

 

MAJOLICA MAJORCA|資生堂

黒の背景にゴールドの文字テキストを使った、高級感があり製品にもマッチしたデザイン。

majolica-majorca

 

 

 

湖池屋 プライドポテト

ヘッダー部分に大きく商品を表示したスライダーで、旗がゆらゆらと揺れている様子が視線をうまく集め、商品パッケージとマッチした背景パターンも素敵。

pridepotato

 

 

 

どんぐり

札幌にある焼きたてパンのお店で、パンのかわいいイラストや手書き文字を使うことで、親しみやすい雰囲気を表現しています。

donguri-bake

 

 

 

Tully’s

思わずクリックしたくなるヘッダー用スライダーに使い、コーヒーにまつわるコンテンツをひとまとめにした、初めてのひとでも分かりやすいページデザイン。

tullys

 

 

 

にっぽん丸

日本中をクルーズ船で巡ることができるサービス内容やプランなどを、迷わずに探すことができる親切なサイト設計、青色で統一したサイトカラーも◎。

nipponmaru

 

 

 

Fessi ダンススクール

軽やかにダンスを踊るイラストが特徴で、目的に応じて分割されたトップページや、クラスごとに動画使って説明するなど分かりやすいデザインの参考に。

fessi-dance

 

 

 

美濃吉

お店で提供している京懐石料理の写真をフルスクリーンで見せたサイトで、和柄の落ち着いた配色カラーパレットはデザインの参考に。

minokichi

 

 

 

Creme Guides

食にまつわるブログサイトで、シンプルなレイアウトながら余白スペースをうまく取り入れることで、豊富な情報をすっきりと整理、まとめています。

creme-guidese

 

 

 

Greenhouse Juice

グリッドをずらして文字と写真を組み合わせた、2018年に入ってよく見かけるデザイントレンド。

greenhousejuice

 

 

 

Brontide

マウススクロールに合わせて、水平方向にコンテンツが移動し、グリッドを無視したレイアウトによって、コンテンツのつながりをうまく表現しています。

brontide

 

 

 

Coura Azul

グリッドを無視した自由なレイアウトに、セリフとサンセリフ書体の組み合わせが高級感を演出したサイト。配色の参考として、個人的にメモ。

couro-azul

 

 

 

Khenpo Sodargye

世界各地で行われている、チベット仏教の教えを説くトークイベントなどをまとめて確認できます。単一ページに情報をまとめ、知りたい情報をわかりやすくレイアウトしています。

khenpo-sodargye

 

 

 

Gucci SS 2018

ブランドの表現したいコンセプトを、アニメーションを使って見事に表現したファッションサイトで、思わずスクロールしたくなってしまいます。

gucci-ss-18

 

 

 

Niika

ヘッダーに立体的な浮遊感を表現したパララックスエフェクトを使用、グリッドを無視したユニークなレイアウトにも注目。

niika

 

 

 

Everyday Needs

CSS GridやFlexboxが普及したおかげで、グリッドを無視した大胆なレイアウトが可能となっています。

everyday-needs

 

 

 

Okappi

スライダーを進めるたびに、万華鏡のようなビジュアルエフェクトを実現し、アニメーションテキストやグラデーションなどトレンドもうまく採用しています。

okkapi

 

 

 

Fubiz Studio

fubiz-studio

 

 

 

Blend Creative Agency

ページのスクロールに合わせて、アニメーション豊かに表示されるコンテンツは、ブランドイメージともうまくマッチしたエレガントな雰囲気に。

blend-creative

 

 

 

Oollee

水を扱う会社らしく、水の流れを感じることができるアニメーションエフェクトが目を引くサイトデザイン。

oollee

 

 

 

Stinkmoji

カメラで自分の顔を認識すれば、表情に合わせて絵文字をアニメーションできる体験型サイト。

stinkmoji

 

 

 

International Harlem Festival

クロールに合わせてコンテンツが表示されるエフェクトやアニメーションなど、シンプルなレイアウトをより魅力的にする仕掛けが随所に。

international-harlem-festival

 

 

 

Keego

絞り出して飲むタイプのアスリート向けボトルを開発中で、現在Kickstarterより申し込みできます。マウスの長押しでボトルがへこむユニークな仕掛けも。

keego

 

 

 

Lyon Urban Trail

スクロールするたびにアニメーション付きで表示されるコンテンツや、グリッドを無視したレイアウト、マウスカーソルのカスタマイズなどトレンド満載。

lyon-urban-trail

 

 

 

Patrick Heng

コンテンツが切り替わるたびに、画面が乱れるグリッチエフェクトを文字テキストに採用するなど、動きを楽しむサイトデザインに注目。

patrick-heng

 

 

 

Love Lost

浮遊感たっぷりに表示される文字やデザインをクリックして楽しむ、新しい形の体験型ウェブサイト。ドクンドクンといった心臓の鼓動が、。

love-lost

 

 

 

Mustafa Celik

水面が波打つようなアニメーションを採用したスライダーが印象的なポートフォリオサイト。

mustafa-celik

 

 

 

Mutt

最近よく見かけるページ遷移エフェクトの他に、アニメーションを駆使したナビゲーションメニューも魅力的なミニマルデザイン。

mutt

 

 

 

Oberig Jewellery

淡いグラデーションを使ったエレガントな印象の背景デザインに、SVGアニメーションを盛り込んだストーリーテリング性の高いサイトデザイン。

oberig-jewellery

 

 

 

PopCorn TV

ページの読み込みに、古いテレビ番組をザッピングしているような砂嵐エフェクトを使用したユニークなサイト。

pocorn-tv

 

 

 

Roto

フルスクリーンで表示されるビデオ動画によって、ブランドイメージをうまく伝え、シンプルなカテゴリ分けで目的のコンテンツを探しやすくしています。

roto

 

 

 

Space 10

シンプルなグリッドレイアウトに、ヘルベチカフォントを利用したミニマルなブログサイト。アクセントにアニメーションを利用することで、ユーザーの視線をうまく誘導します。

space10-io

 

 

 

Tokyo Illustrators Society

イラストレーター同士の情報交換や親睦にとどまらず、その存在や仕事ぶりを、社会に向けて発信していくために結束されたイラストレーターの団体。

tis-home

 

 

 

Two Twenty Two

マウスに合わせて動かすことができるトップページ以外にも、ページをスクロールすると文字やコンテンツが滑るようなアニメーションエフェクトもポイント。

twotwentytwo

 

 

 

Who Cares

リンクにかーそうを合わせて電子音が鳴る、アニメーションを随所に利用したSFチックなサイトデザイン

who-cares

 

 

 

Yelvy

マウススクロールすることで、写真が素早く移動しているようなエフェクトや、ページ遷移アニメーションなどを使ったミニマルスタイル。

yelvy

 

 

 

Row 7 Seeds

水彩ペイントにサンセリフ書体を利用した、やさしいナチュラルな雰囲気のウェブサイトで、扱っている商品への愛情を感じることができるデザイン。

row7seeds

 

heros
ウェブサイトのアイデア出しに困ったり、これからサイトを作成しようというときに参考にしたい、最新の良質ウェブデザインをまとめてご紹介します。 配色やレイ

 

サムネイル@ : HOSHINOYA Luxury Hotels Official Site. Best Rate Guaranteed.