WebGallery

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

*

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

      2015/12/15

名称未設定 1

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

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

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

 - 動きで表現 , ,

Message

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

  関連記事

動きやフォントを工夫して高級感を表現する

明治38年から続いている特集雑誌「婦人画報」の110周年記念サイトです。 トップ …

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

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

タイトル部分に動きをつけて目立たせる

愛知県名古屋市にある和菓子屋「一朶」のホームページです。 縦長のシングルページの …

パララックス効果を使ったデザインの、建設会社のサイトがカッコいい!

熊本県熊本市にある建設会社「快建設」のホームページです。 全体のレイアウトがとて …

フラットデザインで見やすい

  大阪経済法科大学のサイト。フラットデザインのイラストがとてもおしゃ …

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

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

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

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

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

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

カーソルを乗せると動くボタン

愛知県碧南市松江町にある歯医者「あだち歯科クリニック」のホームページです。 歯を …

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

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