WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

アリのマークを用いて様々な仕掛けを作る

      2015/12/15

名称未設定 1

東京都にある株式会社「Alfanet(アルファネット)」のホームページです。

まず、大きく二つに分かれた赤と白のインパクトのある画面が印象強いサイトです。「WORKS」の部分にカーソルを置くとそのコンテンツの幅が広がり、「OVERVIEW」のコンテンツが後ろに下がる仕組みになっています。この時点でとても凄いのですが、何よりも驚いたのが「OVERVIEW」のコンテンツです。

背景にあるドットで描かれたようなアリは、カーソルを置くと分裂?する仕組みになっています。さらにそれを散り散りにさせると社名に切り替わるという何ともかっこいい演出です。そして「FIELD」や「POSITION」などのボタンの下にあるアリにカーソルを置くと、アイコンだったアリに目が出現しカーソルを目で追うようになっているんです。さらにそのアリをクリックするとマップのボタンが表示されるという…本当にすごいです。

 - 動きで表現 , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

映像の切り替わるモーションが面白い!「TAO TAJIMA」さんのwebサイト

TANGRAM co. ltd.に所属する映像ディレクター「TAO TAJIMA …

ひし形のグリットを使って、授業風景などの写真を紹介している倉敷芸術科学大学のサイトがおしゃれ!

岡山県倉敷市にある大学「倉敷芸術科学大学 芸術学部」のサイトです。 ファーストビ …

特殊なアニメーションを使って展示された作品を紹介している美術展のサイトが、ユニークな動きで面白い!

2018年の4月14日(土)から7月8日(日)まで、東京都美術館で開催されている …

作品の雰囲気を損なうことなく、イラストを上手く配置した「ムーミン展」のサイトがかわいい!

2019年の4月9日(火)から6月16日(日)まで、六本木ヒルズ森タワー52階に …

各コンテンツに飛ぶボタンを作り、読む側に優しいデザイン

  東京都にある留学サポートを行っている会社です。全体的に色をあまり使 …

背景を道に見立てたデザインの地図アプリのサイトがおしゃれ!

株式会社Strolyが制作した地図アプリ「Stroly」のホームページです。 フ …

ロゴマークの表示を統一することで、ページにアクセントをつける

福岡県福岡市にある「がんこクリニック」のホームページです。 まず初めに、画面いっ …

どの言語で閲覧してもデザインが崩れない

東京のデザインやファッション、食べ物や観光地・宿泊施設などを世界に紹介するWeb …

トップの部分だけでなく、色々な場所で背景に動画を使用する

毎年夏に東京ビッグサイトで行われるアートイベント「万国學生藝術展覧祭 學展」のホ …

多彩なアニメーションを使ったサイト

  私が言っていいものかどうか分かりませんが、懐かしきCyndi La …