WEBサイトをデザインしたり、制作する際、又は提案する場合など、参考サイトを探す事、多々多々、多々あると思います。
参考サイトをまとめたギャラリーサイトはありがたいですが、デザイン以外の動きまではパッと見れなかったり、又は見てる余裕がないという事ないですか？
今記事では、筆者が参考サイトのギャラリーなどを見て、「この動きおもしろい」、「このデザインが良い」「このテクニック、いつか制作の時に使ってみたい」と思った内容のWEBサイトを勝手ながらピックアップして紹介します。
随時、気になったサイトがあれば、このページに増やしてはあーだこーだ書いてます。
- ニッセイ みらいのカタチ ＮＥＷｉｎ１
- ようこそ！MY VERMICULARへ
- Maiella BEER マイエッラビール
- OCA大阪デザイン&IT専門学校
- デジタルクリエイティブカンパニー W3G合同会社
- MENYA BIBIRI：メンヤ ビビリ – 奈良市のラーメン屋
- 株式会社アリシア | 大阪｜こだわりの看板デザイン｜サイン製作
- ご当地ブランド・ご当地イベントのライセンス管理・商品化・Eコマースの天創堂株式会社
- エコー画 ｜ エコー写真イラスト変換サービス
- Rollie – Spending Tracker
- Mansi, fresh pasta producer in London
- 森山直太朗オフィシャルサイト
- 株式会社Faber Company インターン募集ページ
- 株式会社ON
- 三重県のデザイン会社 エコムクリエーション
- West Coast Tasmania
- Sea Harvest | Fresh Seafood Market
- Jazz FM Romania
- マネしたくなるWEBサイトまとめ
ニッセイ みらいのカタチ ＮＥＷｉｎ１
イメージキャラクターの綾瀬はるかさんと賀来賢人さんが、gifではなくて背景画像をCSSスプライトを使いパラパラ漫画のようにアニメーションさせて動かしている。
gifを使うと、結構容量が重たくなったり、画像が荒くなったりして、イラストじゃなかったり色数が多い場合、正直、サイト内では使いにくいですよね。。
このサイトでは、徐々に動いた被写体が並んだ画像を、CSSで背景画像に設定し、その画像をアニメーションでbackground-positionを変更し、パラパラ漫画のように動きのある要素を実装されています。
芸能人を素材に使えるって最高ですよね。羨ましいですよね。
僕がこのサイトを作りたかったー！
ようこそ！MY VERMICULARへ
背面のcanvasで描かれてる紙吹雪のアニメーションが可愛い。
男女問わず、見てて楽しくなるようなデザイン。
アニメーションの動き、イラストのデザイン、画像、ランディングページとして次を見たくなる（スクロールしたくなる）パララックス・コンテンツ、全てにおいてオシャレで見てて楽しくなるデザインのサイトだなと思いました。
Canvasは以前に仕事で使用したことがあるのですが難しくて苦手です。
でも、このサイトを見て「Canvas勉強してみたいな」と思いました。
僕がこのサイトを作りたかったー！
Maiella BEER マイエッラビール
サイト内のグラフィックやグラデーションが、カラフルなのに爽やかな感じでオシャレ。
イタリアの地ビールのサイトですが、「とりあえずビール」感は全くない爽やかなサイトです。
爽やかで可愛い感じなのに、途中でビールの液体の背景もあり、ビールのサイトという事を忘れさせません。
ちなみにこのサイトは「Snow Monkey」という有料のワードプレステーマで作製されてるみたいです。
僕がこのサイトを作りたかったー！
OCA大阪デザイン&IT専門学校
文字の型を抜いた流れる背景が、インパクト強くてかっこいい。
専門学校のホームページというのが雰囲気ですぐわかるにも関わらず、インパクトのある背景は派手なようで下品さ等は感じず、ターゲット層を狙った若い人たちにも好感を持てるような爽やかな印象を受けるホームページだと思いました。
僕がこのサイトを作りたかったー！
デジタルクリエイティブカンパニー W3G合同会社
ダイナミックな背景動画と動く要素が忘れられない
動画を使ったサイトはいっぱいありますが、このサイトほど、動画とデザインがまとまっているサイトって見たことないです。
日本のサイトぽくないところが、おしゃれですし、インパクトもあるし、かっこいいです。
僕がこのサイトを作りたかったー！
MENYA BIBIRI：メンヤ ビビリ – 奈良市のラーメン屋
食欲そそる湯気のエフェクト
ページ遷移時のアニメーション
飲食店のサイトってだけで少しテンション上がりますよね？あれ、僕だけでしょうか。
食べログとかホットペッパーがあるから、WEBサイトは作らなかったり、場合によっては不要というようなイメージがあります。
だからテンション上がるのか、食べ物だからテンション上がるのか。
食べ物だからですね。
このメンヤビビリさんのサイトは、湯気が出てくる表現を使うことによって、ラーメンの暖かいイメージは残しながらも、ダイナミックな写真の配置とデザインで暑苦しくなくオシャレ、印象残りまくりです。
ページ遷移のアニメーションも、「のれん」をイメージしてるのかなって、勝手に思ってます。
僕がこのサイトを作りたかったー！
株式会社アリシア | 大阪｜こだわりの看板デザイン｜サイン製作
大阪の会社らしい「オチ」のあるストーリーで構成されたパララックス
ユーモアとオシャレ、大阪らしい看板の会社のサイトです。
一件、看板の会社とはわかりにくいかもしれませんが、スクロールせずにはいられないサイトデザインで、一度見ると「なるほど」となるはず。
また面白そうな会社だなと好感も持てると思います。
ちゃんとオチもあるので、ストーリー構成の参考になると思います。
百聞は一見に如かず、一度見てみてください。
僕がこのサイトを作りたかったー！
ご当地ブランド・ご当地イベントのライセンス管理・商品化・Eコマースの天創堂株式会社
船の動きがマッチした「ニュー葛飾北斎」な日本を表現したデザイン。
ご当地ブランド等のサービスされている会社さん。
新しい、現代の葛飾北斎って感じのデザインとふわふわ揺れている船がマッチしてるのがいいですよね。
日本がギュッとつまったファーストビューが、海外からめちゃくちゃ好かれそう。
僕がこのサイトを作りたかったー！
エコー画 ｜ エコー写真イラスト変換サービス
生命感を感じる、ふわふわした動きのアニメーション
印象的なコンテンツばかりを制作されている株式会社ブルーパドルさんのサービス。
サービス自体、面白くて、エコー写真をイラストにしてくれるサービスのサイト。
心臓の鼓動のように動く要素は、まるで妊婦さんのお腹の中にいてるような感覚に陥ります。
まさに製作された方の思うがまま。
僕がこのサイトを作りたかったー！
Rollie – Spending Tracker
ところどころ散りばめられた素材のgifが、手書きな感じで動きもかわいい
海外の家計簿アプリのサイト。
手書きのデザインを使う事で面倒くさそうな「家計簿」を簡単にできる印象を与えれます。
気難しそうなサイトを作る際は、いいかもしれないですね。
僕がこのサイトを作りたかったー！
Mansi, fresh pasta producer in London
ヘッダー中央のロゴが、スクロールで小さくなるのがかわいい
イギリスの生パスタのサイト。
海外のサイトらしく、シンプルな構成でオシャレです。
ロゴの箇所はラインなど細かく要素を分けて作成されてます。
スクロールでクラスが付与されて、要素のサイズが変わる仕組みです。
ロゴに限らず、応用できる部分も多いかなと思いました。
僕がこのサイトを、、、あっこれは別にです。（海外のサイトだから本音はバレないでしょう）
森山直太朗オフィシャルサイト
スクロールで背景画像と要素が重なるところ
個人的に森山直太朗さんは、あんまり。。。なところもあるのですが、サイト可愛くて素敵です。
こういう遊び心あるサイトはマネしたいです。
株式会社Faber Company インターン募集ページ
※2018年度の募集ページの為、募集は終了されています。
スクロールで背景画像の人物（対象物）が変化していくところ。
森山直太朗さんのホームページと違い、こちらはどんどん変化が重なっていくLPです。
最後まで見れば、制作者としては「なるほどね」って思うはず。
株式会社ON
コーポレートサイトぽくなくて、普通にめちゃくちゃかっこいい。
「これって会社のサイト？」ってなるぐらい、かっこいいです。
僕の感性にはない若者ライクなデザイン、動画など、マネしたくてもマネできないです。
ページ遷移もかっこいい、いちいちかっこいいです。
僕がこのサイトを作りたかったー！
三重県のデザイン会社 エコムクリエーション
右側のサイドバーにコピーライトを置いている、サイドバーの使い方
こちらも、コーポレートサイト。
イラストが可愛く、シンプルなデザインで、右側のサイドバーが特徴的でオシャレです。
僕がこのサイトを作りたかったー！
West Coast Tasmania
サイト中央に表示される大胆なフォントのデザイン。
壮大な自然の画像を邪魔させない、上部ではなく左側サイドにメニューバーの設置。
オーストラリアの西海岸、タスマニアのサイト。
日本の観光地のサイトと違って、オシャレです。
大きな画像を表示させる際、ヘッダーに固定のメニューバーがあると、バーの色によっては画像の印象が変わるかもしれません。
サイドバーに設置する事によって、印象を損なわず見せれるのではと勝手に解釈。
僕が、行政から仕事もらって、このサイトを作りたかったー！
Sea Harvest | Fresh Seafood Market
新聞紙なインパクト！
オーストラリアのシーフードの市場のサイト。
「WEBページ」とはまさに、このサイトの事を言うんだろなと思います。
マネしようがありませんが、これほどのインパクトのあるサイト、いつか作ってみたいです。
ご一緒に！僕がこのサイトを作りたかったー！
Jazz FM Romania
とにかくデカい、全部デカい。
ルーマニアのジャズのFMラジオのサイト。
とにかく大きいです。こんな幅width50％のトップへ戻るボタンは見た事ないです。
見やすさは置いといて、これぐらい概念に縛られないようなデザインのサイト真似したいです。
I wanted to make this site, uh!
マネしたくなるWEBサイトまとめ
結構前から有名なサイトも含まれていますが、僕が最近思ったマネしたいと思ったサイトです。
特に一番上の「ニッセイ みらいのカタチ ＮＥＷｉｎ１」サイトの背景画像でアニメーションのある要素を実装する方法は、めちゃくちゃマネてみたいです。
というか、二回目ですが、芸能人を素材に使えるって最高ですよね。
気を付けたいのは、マネをしすぎると、「パクっている・盗んでいる」になってしまうことです。
参考にする際、必ず自分の考えは持ったまま参考にしないと、結局、良い物は生まれませんし成長もできにくいです。
うまく、マネではなく、カバー（徳永英明とかがよくやってる方）しましょう！
※2019年8月までに個人的に見て印象に残ったサイトを紹介しています。
サイトによってはキャンペーン等で終了しているサイトやリニューアルなどで変更されているサイトもあると思います、予めご了承ください。
コメント