Advertisement

corona-sunset-festival

 

これからウェブサイト制作を行うひとが確認したい、創造力を高める最新ウェブデザインをまとめてご紹介します。さまざまな優れた実例サンプルを見ることで、デザイン案件のアイデアにも活用できます。

 

レイアウトや配色、フォント選びなどに加えて、最近ではアニメーションを有効活用したウェブデザインをさまざまな業種で見かけるようになっています。これからサイトを作成しようというひとや、打ち合わせでのきっかけ作りなどに活用してみてはいかがでしょう。

 

hypergiant
ウェブサイト制作におけるアイデア出しに困ったときに確認したい、最新ウェブデザインをまとめてご紹介します。 レイアウトや配色、書体などの見た目はもちろん
2018-design-trend-feat-img
あっという間に一年が過ぎ、2017年には多くの革新的なデザインが登場しましたが、2018年はどんな一年になるでしょう。今回は、2018年に注目したいデザイントレンド20個を

 

 

人を惹きつける美しいデザイン!参考にしたいウェブサイト厳選まとめ

 

Keus

水平方向へページが遷移していくウェブサイトで、オンラインショップもブログもどれも同じレイアウト。

keus

 

 

 

The Test Center by Volvo

オンライン上で車の安全セーフティーテストを体験できる新次元のウェブサイト。

the-test-center-by-volvo

 

 

 

Dot Lung

鮮やかな色使いにアニメーションやオリジナルイラストなど、2018年のグラフィックトレンドをふんだんに搭載しています。

dot-lung

 

 

 

B&O Play

コンテンツストーリーをタイムライン状にひと目で確認でき、最終的に商品購入までの導線をしっかり。

b-and-o-play

 

 

 

Jardins des Fleurs Capsule

花や植物をモチーフとしたボタニカルアート作品のオンラインストア。

jardins-des-fleurs-capsule

 

 

 

Grizzly Ranch

カリフォルニアにあるキャンプサイトの公式ページで、雄大な自然を感じる写真を随所に利用しています。

grizzly-ranch

 

 

 

Trampoline Park

テキサスを拠点に世界中に200箇所以上のトランポリン公園を作っている会社。

trampoline-park

 

 

 

Konstantopoulos S.A. Olymp

ギリシャ産オリーブの生産、販売を手がける会社で、ページするクロールに応じたパララックスエフェクトを使い表現しています。

konstantopoulos-sa-olymp

 

 

 

Koox

自然を基調としたフレンドリーな配色と手書きイラストがユニークなウェブサイト。

koox

 

 

 

RTE Le Voyage Electrique

オリジナルのアニメーション付き地図をドラッグし、数字をクリックしていくことで、どのようなことが行われているのか体感的に学ぶことができる体験型ウェブサイト。

rte-le-voyage-electrique

 

 

 

All Toyota Green Wave Project

親しみやすい手書きのイラストをモチーフに、プロジェクトの内容をわかりやすく伝えています。

all-toyota-gwp

 

 

 

おいしい大麦研究所

「おいしい大麦研究所」は、広く多くの方々に大麦のことを知っていただくことを目的に、大麦に関するさまざまな情報を集めたサイトです。

おいしい大麦研究所

 

 

 

ふくしま満天堂

ふくしま満天堂は、生産者と販売者が意見をかわしながら、商品に改良をかさねていくブランドです。
fukushima-mantendo

 

 

 

白馬山荘

大雪渓を抜けた白馬岳頂上直下に位置する石室を山小屋として開いたことから始まった白馬館グループ。

hakuba-sanso

 

 

 

島の病院おおたに

shimano-byoin-ootani

 

 

 

ましきラボ

“ましきラボ”は住民のみなさんと熊本大学の学生や教員が気軽に語り合える場として、2016年10月19日にオープンしました。

mashikilab

 

 

 

Endless Stories

まるでドキュメンタリー映画のようなつくりが印象的で、モハメド・アリの伝説の試合をたくさんの写真や動画で振り返ります。

endless-stories

 

 

20 Years Hip Hop

ブレイクダンスの歴史を20年前の1997年当時まで遡りながら、詳しい歴史を学ぶことができるウェブサイト。

20-years-hip-hop

 

 

 

Batenka

まるで新聞を見ているようなレイアウトやフォント選びがユニークなオンラインウェブマガジン。

batenka

 

 

 

Black Messiah

ユーザーがマウスをドラッグすることでストーリーが進んでいく体験型ウェブサイトで、今後ますます利用が拡大していくであろう分野のひとつ。

black-messiah

 

 

 

Fils Unique New York

ニューヨークでスーツ用のユニークなカフスボタンを作成しているデザイナーのウェブサイト。Cufflinksより作品を閲覧できます。

Fils Unique New York

 

 

 

Liberty London

魅力的なアイテムが揃う店内を360度見渡しながら、ショッピングを楽しむことができる新しいカタチのオンラインサイト。

liberty-london

 

 

 

ESPN Body 10

さまざまなスポーツのトップアスリートの鍛え上げられた肉体をコレクションし、インタビュー対話と一緒にまとめています。

body10

 

 

 

World Champion Amsterdam

コンテンツごとにページ全体がアニメーション付きで切り替わる、ユニークで思わずスクロールしたくなる仕掛けが満載。

world-champion-amsterdam

 

 

 

World Cup In Pattern

スペースバー長押しでページが開始され、2018FIFAワールドカップの出場国にインスパイアされた、デザインパターンをコレクションしています。

world-cup-in-pattern

 

 

 

Packlane

配送用のパッケージ、ダンボールを自由にカスタマイズ、作成できるサービス。海外のパッケージが好きな人にとって嬉しいサービスかもしれません。

packlane

 

 

 

Cuberto

ウェブサイトやアプリの開発を行う会社のポートフォリオで、ページ遷移にマイクロインタラクションを多用したミニマルデザイン。

cuberto

 

 

 

Agence Me

agenceme

 

 

 

Buzzworthy Studio

ページの切り替えやローディングアニメーション、制作実績ページなどどれもオリジナル性に富んだユニークなデザインが目白押し。

buzzworthy-studio

 

 

 

Outdoor Voices

女性向けのレギンスやトレーニング用ウェアを販売しているサイトで、ブランドイメージを明確にする写真の使い方は参考に。

outdoorvoices

 

 

 

Fleisher Ollman Gallery

fleisher-ollmangallery

 

 

 

Jveb Studio

グリッドを無視したユニークなレイアウトが目を引くサイトで、スクロールに合わせて文字テキストが出現するなど、視線を特定の要素に見事に誘導します。

jveb-studio

 

 

 

Camille

iPhoneでのカメラ撮影に特化したモバイルアプリ用ランディングページで、セクションごとに背景色が淡いパステルカラーで変化していきます。

camille

 

 

 

Swallowtail Tea

世界中のお茶を販売しているサイトで、それぞれのお茶っ葉を比較しやすいように撮影にも一工夫が。

swallowtailtea

 

 

 

Handsome

水平方向に展開するスライダーナビメニューから各コンテンツに移動します。どのページもなめらかなアニメーションが採用されている点もポイント。

handosme

 

 

 

Maman Corp

maman-corp

 

 

 

Grand Image

1ページにコンテンツを集約していますが、水平方向にアニメーション付きで展開するなど、個性とユニークさを演出したサイト。

grand-image

 

 

 

Gym Box

イギリスにある新しいカタチのフィットネスセンターで、動画背景からも魅力的なビジュアルがうまく伝わります。

gymbox

 

 

 

USNA Golf

ページを半分に分割したようなグリッドレイアウトに、信頼感や高級感を演出する配色やフォント選びが特長のウェブサイト。

usna-golf

 

 

 

Vincent Tavano

制作実績を開くと、縦横縦横無尽にスクロールできるユニークなつくり。

vincent-tavano

 

 

 

United States Institute of Peace

united-states-institute-of-peace

 

 

 

Beni Rugs

シンプルな作りのウェブサイトですが、ヘッダーに動画を配置したり、ブランドイメージに合った配色、フォント選びなどデザインの参考としてメモ。

beni-rugs

 

 

 

Nova

鮮やかでポップな色使いや、コンテンツを重ねたようなレイアウトなど2018年を代表するデザイントレンドを盛り込んだサイト。

radio-nova

 

 

 

リブセンス

オリジナルのイラストアニメーションを使うことで、伝えたいメッセージを的確にユーザーへと届けます。

livesense

 

 

 

タクベル

Uberとタクシーの配車サービスを組み合わせたユニークなアプリで、現在神奈川県で試験利用されています。

taxibell

 

 

 

 

SixPad Station

15分という短時間で全身の筋肉を効率よく、バランスよく鍛えるトレーニングを実現。

sixpad-station

 

 

 

Mathis Biabiany

マウススクロールに応じて画面が爆発するように変化しながら、制作実績を閲覧できるユニークすぎる、フランス人デベロッパーのポートフォリオサイト。

mathis-biabiany

 

 

 

The History of Connection

赤い光る場所をドラッグしながらストーリーが進んでいく体験型ウェブサイト。

tim-the-history-of-connection

 

 

 

Pastificio Felicetti

コンテンツ遷移になめらかなアニメーションを組み合わせるなど、マイクロインタラクションが随所に光ります。

pastificio-felicetti

 

 

 

Myfood

スクロールでコンテンツを移動するたびに、ユニークなアニメーションと一緒に展開するなど、見てて飽きないサイトと言えます。

myfood

 

 

 

Not Another Bill

シンプルで見やすいオシャレなオンラインショップで、手書きブラシ文字とサンセリフ書体の組み合わせが、お店の雰囲気にもぴったり。

not-another-bill

 

 

サムネイル@ : Corona Sunsets Festival