New Article

マネしたくなるWEBサイトの動きやデザイン11選

Advertisement

WEBサイトをデザインしたり、制作する際、又は提案する場合など、参考サイトを探す事、多々多々、多々あると思います。

参考サイトをまとめたギャラリーサイトはありがたいですが、デザイン以外の動きまではパッと見れなかったり、又は見てる余裕がないという事ないですか?

今記事では、筆者が参考サイトのギャラリーなどを見て、「この動きおもしろい」、「このデザインが良い」「このテクニック、いつか制作の時に使ってみたい」と思った内容のWEBサイトを勝手ながらピックアップして紹介します。

ニッセイ みらいのカタチ NEWin1

「ニッセイ みらいのカタチ NEWin1(入院総合保険)」|日本生命保険相互会社
「日帰り入院から入院給付金を一時金で受取れる新しい保険。」
マネしたいポイント

イメージキャラクターの綾瀬はるかさんと賀来賢人さんが、gifではなくて背景画像をパラパラ漫画のようにアニメーションさせて動かしている。

gifを使うと、結構容量が重たくなったり、画像が荒くなったりして、イラストじゃなかったり色数が多い場合、正直、サイト内では使いにくいですよね。。

このサイトでは徐々に動いた被写体を並べた画像を、CSSで背景画像に設定し、その画像をアニメーションbackground-positionを変更し、パラパラ漫画のように動きのある要素を実装されています。

だんだん丸が大きくなる場合の例

芸能人を素材に使えるって最高ですよね。羨ましいですよね。

僕がこのサイトを作りたかったー!

ようこそ!MY VERMICULARへ

「My Vermicular」サイトスクリーンショット
ようこそ!MY VERMICULARへ | Vermicular(バーミキュラ)公式サイト
バーミキュラオリジナルの「サンクスコイン」を貯めながら、毎日の料理がもっと楽しくなる、全く新しいカタチのアプリです。
マネしたいポイント

背面のcanvasで描かれてる紙吹雪のアニメーションが可愛い。
男女問わず、見てて楽しくなるようなデザイン。

アニメーションの動き、イラストのデザイン、画像、ランディングページとして次を見たくなる(スクロールしたくなる)パララックス・コンテンツ、全てにおいてオシャレで見てて楽しくなるデザインのサイトだなと思いました。

Canvasは以前に仕事で使用したことがあるのですが難しくて苦手です。
でも、このサイトを見て「Canvas勉強してみたいな」と思いました。

僕がこのサイトを作りたかったー!

エコー画 | エコー写真イラスト変換サービス

エコー画 | エコー写真イラスト変換サービス
エコー写真を同じ構図・同じサイズで、イラストレーターが描き起こすサービス。
マネしたいポイント

生命感を感じる、ふわふわした動きのアニメーション

印象的なコンテンツばかりを制作されている株式会社ブルーパドルさんのサービス。
サービス自体、面白くて、エコー写真をイラストにしてくれるサービスのサイト。

心臓の鼓動のように動く要素は、まるで妊婦さんのお腹の中にいてるような感覚に陥ります。
まさに製作された方の思うがまま。

僕がこのサイトを作りたかったー!

Rollie – Spending Tracker

Rollie - Spending Tracker
Track your spending with up-to-date transactions, balances and helpful insights. Connect up to 3 banks today.
マネしたいポイント

ところどころ散りばめられた素材のgifが、手書きな感じで動きもかわいい

海外の家計簿アプリのサイト。
手書きのデザインを使う事で面倒くさそうな「家計簿」を簡単にできる印象を与えれます。

気難しそうなサイトを作る際は、いいかもしれないですね。

僕がこのサイトを作りたかったー!

Mansi, fresh pasta producer in London

Mansi, fresh pasta producer in Londonサイトスクリーンショット
Mansi
London loves fresh pasta and we've been supplying it since 2012. Get fresh pasta every day!
マネしたいポイント

ヘッダー中央のロゴが、スクロールで小さくなるのがかわいい

イギリスの生パスタのサイト。
海外のサイトらしく、シンプルな構成でオシャレです。

ロゴの箇所はラインなど細かく要素を分けて作成されてます。
スクロールでクラスが付与されて、要素のサイズが変わる仕組みです。

ロゴに限らず、応用できる部分も多いかなと思いました。

僕がこのサイトを、、、あっこれは別にです。(海外のサイトだから本音はバレないでしょう)

森山直太朗オフィシャルサイト

森山直太朗オフィシャルサイトスクリーンショット
森山直太朗オフィシャルサイト
森山直太朗オフィシャルサイト
マネしたいポイント

スクロールで背景画像と要素が重なるところ

個人的に森山直太朗さんは、あんまり。。。なところもあるのですが、サイト可愛くて素敵です。

こういう遊び心あるサイトはマネしたいです。

株式会社ON

株式会社ONサイトスクリーンショット
株式会社ON | ON CO.LTD. | 東京・原宿のWEB制作会社
「世界をもっと楽しく、おもしろくセットアップする。」株式会社ON(オン)は東京・原宿を拠点にWEBサイト制作・映像制作・UI/UX設計・グラフィックデザイン制作を行い、実際にクリエイティブ特化転職エージェントとして、また、クリエイターをチーミングして企業様のクリエイティブに関する問題を解決するサービスを行なっています。
マネしたいポイント

コーポレートサイトぽくなくて、普通にめちゃくちゃかっこいい。

「これって会社のサイト?」ってなるぐらい、かっこいいです。
僕の感性にはない若者ライクなデザイン、動画など、マネしたくてもマネできないです。

ページ遷移もかっこいい、いちいちかっこいいです。

僕がこのサイトを作りたかったー!

三重県のデザイン会社 エコムクリエーション

三重県のデザイン会社 エコムクリエーションサイト、スクリーンショット
三重県のデザイン会社 エコムクリエーション | 広告デザイン・WEB制作・企画からコンサルまでトータルにサポート | 菰野町・四日市市・桑名市・鈴鹿市・いなべ市・東員町
エコムクリエーションは、山と自然とクリエイティビティを愛するデザイン・WEB制作会社です。 三重県(桑名市・菰野町)と渋谷区に事業所があります。商品やサービスのPRに課題を感じているクライアントに寄り添って、高品質のデザインとWEBの技術で事業を成功に導くお手伝いをしています。
マネしたいポイント

右側のサイドバーにコピーライトを置いている、サイドバーの使い方

こちらも、コーポレートサイト。
イラストが可愛く、シンプルなデザインで、右側のサイドバーが特徴的でオシャレです。

僕がこのサイトを作りたかったー!

West Coast Tasmania

West Coast Tasmaniaサイトスクリーンショット
West Coast Tasmania
Your official guide to the West Coast of Tasmania, Australia - just outside of your comfort zone.
マネしたいポイント

サイト中央に表示される大胆なフォントのデザイン。
壮大な自然の画像を邪魔させない、上部ではなく左側サイドにメニューバーの設置。

オーストラリアの西海岸、タスマニアのサイト。
日本の観光地のサイトと違って、オシャレです。

大きな画像を表示させる際、ヘッダーに固定のメニューバーがあると、バーの色によっては画像の印象が変わるかもしれません。
サイドバーに設置する事によって、印象を損なわず見せれるのではと勝手に解釈。

僕が、行政から仕事もらって、このサイトを作りたかったー!

Sea Harvest | Fresh Seafood Market

Sea Harvest サイトスクリーンショット
Sea Harvest | Fresh Seafood Market | Canberra
Sea Harvest is a Canberra-based fresh seafood market at Belconnen and Fyshwick markets, offering a wide variety of seafood at the very best prices.
マネしたいポイント

新聞紙なインパクト!

オーストラリアのシーフードの市場のサイト。
WEBページ」とはまさに、このサイトの事を言うんだろなと思います。

マネしようがありませんが、これほどのインパクトのあるサイト、いつか作ってみたいです。

ご一緒に!僕がこのサイトを作りたかったー!

Jazz FM Romania

Jazz FM Romaniaサイト、スクリーンショット
Jazz FM Romania
Ascultă Jazz FM România în Sibiu 98.3 FM, Brașov 91.9 FM sau online pe www.jazzfm.ro!
見出し

とにかくデカい、全部デカい。

ルーマニアのジャズのFMラジオのサイト。

とにかく大きいです。こんな幅width50%のトップへ戻るボタンは見た事ないです。

見やすさは置いといて、これぐらい概念に縛られないようなデザインのサイト真似したいです。

I wanted to make this site, uh!

マネしたくなるWEBサイトまとめ

結構前から有名なサイトも含まれていますが、僕が最近思ったマネしたいと思ったサイトです。

特に一番上の「ニッセイ みらいのカタチ NEWin1」サイトの背景画像でアニメーションのある要素を実装する方法は、めちゃくちゃマネてみたいです。
というか、二回目ですが、芸能人を素材に使えるって最高ですよね。

気を付けたいのは、マネをしすぎると、「パクっている・盗んでいる」になってしまうことです。
参考にする際、必ず自分の考えは持ったまま参考にしないと、結局、良い物は生まれませんし成長もできにくいです。

うまく、マネではなく、カバー(徳永英明とかがよくやってる方)しましょう!

※2019年7月までに個人的に見て印象に残ったサイトを紹介しています。
サイトによってはキャンペーン等で終了しているサイトやリニューアルなどで変更されているサイトもあると思います、予めご了承ください。

コメント

タイトルとURLをコピーしました