WebGallery

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

*

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

      2015/12/15

名称未設定 1

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

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

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

 - 動きで表現 , ,

Message

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

  関連記事

動きのあるグローバルナビでサイトの雰囲気を暖かくする

秋田市にある写真館「岩田写真館」のホームページです。このサイトは何といってもグロ …

行ってうっとり!夏の鳥取の魅力がつまったサイト

観光スポットやグルメ情報など、四季折々の鳥取の「美」を紹介している「ANA 鳥取 …

ユーザーごとにデザインを切り替える

ヤマト運輸株式会社の公式ホームページです。 個人・法人・行政や自治体ごとのページ …

ファーストビューに動画を取り入れた神社・お寺のサイト5選

数年前から背景に動画を使用したデザインをよく目にするようになりました。 動画を効 …

2020年新卒採用サイトのトレンドをチェック!おしゃれなデザインをまとめてみました!

年始早々インフルエンザにかかってしまいました…皆様もお気をつけて… 久しぶりに高 …

コンテンツ毎にスクロールボタンを配置し、移動しやすく

高知県にある「サイバラ建設株式会社」のホームページです。 まず、中央に配置された …

自分が本を選んでいるかのようなスクロール

  丸善出版株式会社とジュンク堂書店が佐賀県とコラボレートした「ほんの …

一つのコンテンツで二つの情報が見れる

10月24日から行われるイベント「Any Tokyo 2015」のホームページで …

想像するだけでワクワクが止まらない「ハンズの夏準備」

「ハンズの夏準備」という東急ハンズの特設サイトです。 サイトのトップには、キャッ …

フルスクリーン動画が迫力ある水族館は、サメやエイに触ることも出来る!?

大阪府大阪市にある世界最大級の水族館で、平成25年の3月14日に開設された「海遊 …