WebGallery

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

*

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

      2015/12/15

名称未設定 1

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

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

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

 - 動きで表現 , ,

Message

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

  関連記事

まるで本当の雑誌を読んでいるかのようなレイアウト

クラフトタイムズが運営するウェブマガジンです。ビールを題材に取り上げ、様々な内容 …

大豆を使った商品を取り扱っているサイトのデザインが、大豆の形を使ったデザインでおしゃれ!

岡山県岡山市に本社を構える「913  NEUF UN TROIS(ヌフアントロワ …

舌でも目でも石巻を楽しむことができる、「泳ぎ寿司 石巻」

今年の3月6日・11日に東京都にある「代々木ビレッジ code kurkku」で …

要所で動きを使い、注目度を上げる

エステサロンクレジットカード決済導入「株式会社ジェイ・シー・エス」のホームページ …

折り紙の発想から生まれたオフィスチェア「FLIP FLAP」の特設サイトが、オフィスチェアのデザインを使ったレイアウトでカッコいい!

折り紙の発想から生まれたオフィスチェア「FLIP FLAP」の特設サイトです。 …

ワンちゃん・ネコちゃんをメインに作られたサイトが、どれもオシャレで可愛い!

今年でうちの愛猫も2歳になるのですが、大きくなるのは早いですね… 大きくなっても …

見る人を飽きさせず、旅の目的ごとにお勧めスポットが分かる構成

  利賀芸術公園の特設サイトです。大きく3つの写真を用いたブロックで分 …

配色をカラフルにするだけでなく、アニメーションもたくさん使ったサイトのデザインが可愛い!

熊本県熊本市にある食のテーマパーク「株式会社フードパル熊本」のホームページです。 …

「Golden」にかけた黄金のアニメーションがとても幻想的!フェレロ ロシェのキャンペーン公式サイト

「Ferrero Rocher(フェレロ ロシェ)」のキャンペーン公式サイトです …

もうすぐバレンタイン!2019年バレンタイン特設サイトを集めました!

明日はいよいよバレンタインデーですね! 皆さんはもう誰かにチョコレートを上げまし …