galleryやworksがあるサイトを集めました【第3弾】

第3弾です!

galleryやworksのページがあるサイト(webサイトのデザイン)を集めてみました。

自分の備忘録のようなものです。

 

DNP INNOVATION PORT

galleryやworksのページがあるサイトと言いながら、しょっぱなから該当しないサイトです。

該当はしませんが、フラットな色使いやイラストが可愛らしい。

動きのあるアイコンたちがとても良いなと思いました。

全体的に動かすんじゃなく、小さなアイコンに動きを入れるだけでいいんだな、なんて思ったり。

youtubeの動画の埋め込み方というか、施し方も参考になります。

visit site:https://www.dnp-innovationport.com/

 

 

Tribal Media House, Inc.

背景に流れるカラフルな図形が面白くて素敵です。(worksページの背景は白色ですが、、)

追従してくるメニューの出現方法もいいなって思いました。(下にスクロールしている間はコンテンツの邪魔にならないように非表示に。その隠れ方のアニメーションがいい感じです。上側にスクロールすると、隠れた動きの逆のアニメーションで出現します。)

動かし方ひとつで印象が全然違いますよね。

worksページ自体はシンプルな構成ですが、要素のデザインが参考になります。

visit site:https://www.tribalmedia.co.jp/works

 

 

GOOD LUCK CORPORATION 採用サイト

ここも、ギャラリーやワークスのページがあるわけではありませんが、このサイト綺麗なんですよね。

全体の雰囲気が自分の好みで。繊細なんです、線とか、文字とか。

リゾート挙式を国内外で(ハワイ・グアム・バリ・沖縄)扱っておられるとのことで、きれいな海の動画が使用されているんですが、使い方うますぎない?っていう感じです。なるほどな〜と感嘆です。

ここはサイト右上のメニューを開いた時のデザインも素敵で。

ちなみに先ほど挙げた海の動画が表示されます。透明感と、黒で締めてあり素敵です。

このGOOD LUCK CORPORATIONさん、採用サイトだけでなく、コーポレートサイトも大変綺麗です。

visit site:https://recruit-goodluck-corp.com/

 

 

GOOD LUCK CORPORATION コーポレートサイト

上記の採用サイトのコーポレートサイトになります。

やはりこちらも、文字と線と写真が繊細かつ綺麗に組み合わさっています。

このサイトで一番驚いたのは、画面左側にコンテンツの量に沿って変化する(スクロール量に連動する)アニメーションです。

黒がコンテンツの残量を表していて、ヘッダーの部分は黒ではなくグレーで表されています。なんとこの黒、ほんとにコンテンツの部分だけを表していて、ずーっと下にスクロールしていくとフッターの始まりでぴったりと黒が終わるんです。

別に、この要素自体はすっごく重要な要素とかでは無いと思うんですが、こういう、計算され尽くしてる感のある仕掛けを見るとぐはっときます。

事業紹介の、地図を使った要素もかっこいいです。こういう表現やってみたいです。

あと、見出し(見出しだけでは無いですが)のアニメーションが素敵でした。すごく雰囲気が出てて。

とにかく全体が綺麗なんですよね。情報もすごく見やすいです。

visit site:https://goodluck-corp.com/

 

 

sanwacompany ltd. 40周年サイト

サンワカンパニーさんの40周年サイトです。

このサイトのギャラリーは、写真が綺麗なので、一つ一つを大きく扱っています。

形自体は独特であるとかそういうことは無いんですが、直感的で触りやすく、ストレス無く閲覧することができます。ユーザーにストレスの無いアニメーションやエフェクト、大事ですね。

visit site:https://info.sanwacompany.co.jp/40th/

 

 

sanwacompany RECRUIT 2020

採用つながりで、サンワカンパニーさんの採用のページです。

やはり、採用のところだけデザインを変えていて専用のサイトというわけでは無いですが、人材採用に力を入れているんだなぁとしみじみ感じます。

こちらの場合は、採用のページからさらに下層にページを用意していてコンテンツが充実していますが、一般的の採用単体の1ページのみでも、デザインを変えて力を入れて作り込むのに参考にしたいです。

visit site:https://info.sanwacompany.co.jp/recruit/

 

 


 

【第4弾】に続く!