Advertisement

latestweb2017feb-1

 

目まぐるしく変化するウェブデザインは、技術の発達によりこれまでは難しかった表現も可能になってきています。ユーザー主体とした体験型サイトなども増え、アニメーションやレイアウトなど新しいデザイン要素を利用することで、より魅力的でインタラクティブなサイトデザインに仕上げることができます。

 

 

そんなウェブデザイン制作アイデアの参考にしたい、クオリティの高いWebサイトをまとめてご紹介します。Webデザインやホームページ作成を勉強したいという人にもオススメです。

 

web-design-gallery-2017
PhotoshopVIP編集部: 2014年5月6日に公開した記事を再編集、追記しています。 Webサイトのデザインがなかなか決まらな
design-trend-guide-2017
2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンド

 

 

Webデザイン勉強の参考にしたい、魅力的なサイト35選まとめ

 

North 2

カラフルな配色でヒーローイメージが切り替わるインパクトのあるデザイン。

north2

 

 

 

Adison Partners

デュオトーンエフェクトのネオン系配色カラーパレットを採用したサイトで、コンテンツの切り替わりにアニメーションを利用したサンプル例として。

adison-partners

 

 

 

Radoor & Co.

radoor-and-co-1

 

 

 

Proud and Punch

南国トロピカルなイラストが印象的なウェブサイトで、各商品のパッケージに合ったイラストと煙が消えるようなアニメーション付きページ遷移にも注目。

3-proud-and-punch

 

 

 

Pocket Mustang Ford

ページに表示されたQRコードをスキャンすると、ポケットサイズのスポーツカーが3Dバーチャルで蘇ります。

pocket-mustang-ford

 

 

 
Fotonaut

鮮やかな黄色と太字のサンセリフ書体のバランスが絶妙なポートフォリオサイトで、ミニマルデザインのお手本にもどうぞ。

fotonaut

 

 

 

Big Youth

発色の良い青色に大きく表示された巨大タイポグラフィー、たっぷりの余白スペースなどトレンドデザインの参考にしたいミニマルデザイン。

big-youth

 

 

 

Rainforest Foods

マウスカーソルに合わせて画面がグリグリと動き出し、ユニークなアニメーションを駆使したスライダーなどインタラクティブなデザイン。

rainforest-foods-experience

 

 

 

Caava Design

サンディエゴにあるデザイン事務所のポートフォリオで、配色とフォントの組み合わせで魅せるシンプルなサイト。

caava

 

 

 
Famigliacecchi

動画を背景に利用したヒーローヘッダーにセリフ書体が高級感を演出したダーク系ウェブデザイン。

588218329aaab

 

 

 

Secondary Gree Project

HTML5のCanvasを利用したヒーローヘッダー部分は、スクロールに応じてアニメーション遷移するインタラクティブなデザイン。

secondary-gree-project

 

 

 

Yatzer

グリッドをずらしたレイアウトを採用し、写真と文字テキストのバランスを工夫したミニマルサイト。

yatzer-newsletter

 

 

 

Panerabread

panera-bread-website

 

 

 

A is for Albert

各アルファベットをアニメーションで表現しており、美しい配色とかわいいキャラクターがポイント。

a-for-albert

 

 

 

A-Dam Underwear

パステルカラーの美しい配色に、グリッドを崩してデザイン要素をレイヤー状に重ね、スクロールによるアニメーションを追加するなど、細かいギミックをたっぷりたっぷり採用しています。

a-dam-underwear

 

 

 

Phil Casabon

プロスノーボーダー Phil Casabonの公式サイトで、グリッチエフェクトを加えた動画をうまく利用したウェブサイト。

phil-casabon

 

 

 

Vermont

スクロールすることでリンクを切り替えることができ、アニメーションとイラストを見事に組み合わせた作品。

vermont

 

 

 

Wills World

下にスクロールするにつれてグラデーションカラーで変化する背景に、グリッドを無視した無造作なレイアウトをアニメーション付きで表示します。

willsworld

 

 

 

翠江堂

隅田川のほとりにある創業80年の和菓子店さんのウェブサイト。画面を2分割したスプリットレイアウトに、美しい日本語と美味しそうな和菓子が並びます。

suikoudou

 

 

 

913 | ヌフアントロワ オフィシャル

細いラインのアニメーションや大豆の形をモチーフにしたイメージスライダーなどの仕掛けが目を引く縦に長いレイアウト。

neufuntrois-com_

 

 

 

重三陶器株式会社

たっぷりの余白スペースに美しい配色がシンプルなレイアウトで、文字と写真の重なり方などトレンドも取り込んだナチュラル感が素敵。

jyuzan-1

 

 

 

Bouguessa

高級感のあるブランドイメージを損なわないレイアウトやフォント選びが魅力的な作品のひとつ。

bouguessa

 

 

 

Sound in Color

マイクから聞こえてくる声や音に反応して、水彩ペイントのような美しいグラデーションが変化していくユニークなサイト。パソコンを販売しているとは思えないアイデアに脱帽です。

sound-in-color-hp

 

 

 

Syria Stories

テロリストとの激しい戦いが続くシリアの現状を、実際に街なかで撮影されたビデオ動画を利用して伝える体験型ウェブサイト。どの建物もボロボロに破壊されているのが分かります。

syria-stories

 

 

 

Abema TV Recruitment

ライブストリーミング形式によるインターネットテレビ Abema TV の求人情報をまとめたサイト。

abematv-recruit

 

 

 

Addidas Never Follow

アクティブなスポーツ関連の商品イメージを見事に表現したデザインで、統一感のあるカラーリングとレイアウトの参考として。

addidas-never-follow

 

 

 

Pomerleau

奥行き感のあるアニメーションで切り替わるイメージスライダーで、ページ遷移を感じさせないシームレスなウェブ体験を実現しています。

pomerleau

 

 

 

IGK Hair

スクロールに応じてアニメーション付きで写真イメージが展開し、こちらでもグリッドを崩したレイアウトが採用されています。

igk-hair

 

 

 

Kazunaga Sakashita

美しい写真イメージが魅力的なポートフォリオサイトで、各リンクへのページ遷移にアニメーションが活用されています。

critiba-com_

 

 

 

Don’t Drink It, Explore It

動画を利用し商品の良さを伝えるコンテンツは、ユーザーに新しいウェブ体験を提供できる新しいテクニックと言えるでしょう。

dont-drink-it-expolore-it

 

 

 

Horological Smartwatch

時計板の丸さをうまくレイアウトに利用しており、セリフ書体と細いライン線が高級感のある美しさを表現しています。

the-horological-smartwatch
 

 

 

料亭きりん

コンビニで購入でき、ビールと一緒に食べたくなる料理のレシピを公開しており、縦書きで書かれた日本語の美しさを表現できるレイアウト。

ryotei-kirin

 

 

 

JFKC

jfkc

 

 

 

Jonathan Patterson

各リンクをカラフルな配色で分かりやすく整理しているポートフォリオサイト。

jonathan_patterson

 

 

 

Switched

これ前のデザイン制作実績を紹介するポートフォリオサイトで、背景イメージと文字テキストの組み合わせを楽しむサイト。

switched-au

 

 

サムネイル@ : 15 Years of SB Dunk – Nike.com