ブログ

海外と日本のホームページを見て触って体験してみた

webdesign

こんにちは、デザイナーのTantanです。
エム・フィールド広島オフィスでは、かっこいいホームページや新しい技術を目にすると、みんなで共有してあーだこーだ盛り上がります。特にWeb業界では最新トレンドは海外から伝わってきますので、海外のネタにもアンテナを張ってなくてはいかんと先輩方はおっしゃいます。

海外のデザインは日本とどう違うか?

「海外はかっこいい、日本はダサい、遅れている」と言う人も少なからずいます。今回は海外と日本のWebデザインを比べてみて、海外のデザインは進んでいるのか、日本のデザインはどこか問題があるのかを自分なりに考えてみたいと思います。
使わせていただいたのは海外と日本のWebデザインギャラリーです。最新のホームページの中から無作為に選んだホームページのデザインを見て、それぞれの総評をまとめたいと思います。

海外Webデザインギャラリー

webdesignfile
webdesignfile
世界中の素敵なホームページが紹介されています。どれもクオリティの高いものばかりで、とても勉強になります。
たくさん見た中で、いくつか印象的だったものを紹介します。

ぴょんぴょん動く!

http://www.grosselanterne.com/en/
webdesign01

野外フェスの告知ホームページのようですが、動きがとにかく楽しい!マウスオンすると文字がぴょんぴょん跳ねるので、思わず何度も動かしてしまいました。ボタンやアイコンもそれぞれ動いてくれて触るのが嬉しくなるサイトでした。

飛ばされる!

http://www.iwc-skywriter.com/
webdesign02

英語がわからないまま中に入って行くといきなりフライトさせられて、おお〜っとなりました。かなりお金がかかってそうなホームページなのでとても真似はできませんが、雲で書いたメッセジーを誰かにシェアしたくなる仕掛けは参考になりました。

次元が違う凄さ

https://www.nextrembrandt.com/
webdesign03

「ネクスト レンブラント」というプロジェクトのホームページです。レンブラントというのはオランダの画家で、肖像画をたくさん描いたことで知られているそうです。もちろんすでに亡くなっているのですが、なんと人工知能が新作を描いたそうです!彼の絵をたくさん解析して、画家の画風を再現しながら新しい肖像画を作ったのです。このプロジェクトはカンヌの広告賞もとったようで、もうWebデザインがかっこいいとかいう次元の話ではありません。とはいえ、ホームページの動きも面白かったです。スクロールすると目がにゅっと拡大されて思わず「Wow!」となりました。

気持ち良い浮遊感

https://www.plumewifi.com/
webdesign04

家庭内Wi-Fiルータの製品ホームページのようです。スマホやゲーム機がふわふわと動き、スクロールするとふんわり落ちてきます。3DCGなのか動画なのか、どうやっているのかわかりませんが作るのは大変そうです。

動かせるインフォグラフィック

http://sparetime.arkivert.no/
webdesign05

目的はよくわかりませんが、ホームページに入るとアンケートが始まります。「一日の時間の使い方を、バーを動かして答えて下さい」とか「何分ぐらいの行列なら並ぶか人のイラストを動かして下さい」という感じです。ちょっとしたゲームを作るくらいの手間がかかってそうです。

国内Webデザインギャラリー

http://81-web.com/
81-web.com
こちらは国内のWebデザインが紹介されています。こちらも気になったホームページを紹介します。

くるくる回る!

http://www.tombow.com/sp/monoair/
webdesign06

こちらのサイト、先ほどの海外ギャラリーサイトでも紹介されていました。トンボの修正テープのホームページです。この修正テープが従来品と違ってどう改良されているのか、アニメーションでわかりやすく解説してくれます。テクニカルな事柄を親しみやすく表現しているので好感が持てます。アニメーションを装飾目的ではなく説明用途でがっつり使っていて、説得力があります。

芸が細かい

https://www.cab-station.com/
webdesign08

バスや旅行関係の会社のホームページです。タイムラプス動画で街の表情が変わり、ページ下部ではバスや人間が行き来するアニメーションが動いています。バス、車、人間、自転車、犬などたくさんのアニメーションが細かく描かれています。それぞれ進む速さが違ったりして、よくできています。

さりげない見せ方

http://meet-and-meet.com/
webdesign07

広告制作会社のホームページです。作品のサムネイルが切り替わる一瞬のチリチリっとしたアニメーションが印象的です。

作りこまれたビジュアル

http://www.donbei.jp/ew/
webdesign09

どん兵衛の特設サイト。ラップで東西対決する動画が面白い。浮世絵風のイラストがよく描かれていてよく見るとヒョウ柄服のおばちゃんがいたりして楽しいです。スプレーで落書きしたようなグラフィティ・アート風の表現も融合して細部まで世界観を作り上げています。

総評

結局海外にも日本にも良いホームページがたくさんある!という身も蓋もない感想です。本当にどれを見ても勉強になるばかりでした。
一応これらのホームページを見た限りで海外と日本の違いを自分なりに考察してみました。

海外はテンションが上がる、日本は細部のこだわりに唸る

海外は「なにこれ!すごいどうなってんの」とテンションがあがりました。それぞれのサイトに驚きがあり、ワクワクさせられました。
日本は「なるほど〜よくできてる」とじっくり見て説得力を感じました。細部の作り込みやさりげない見せ方にこだわりを感じました。

海外はインパクト、日本は手数

海外は軸となるアイデアをシンプルに大胆に見せていて、日本は細かいアイデアの積み重ねで隅々まで完成度を高めているという気がしました。個人的に、手数を積み重ねて完成度を上げるやり方は共感できます。一方で、ワンアイデアにインパクトがあるデザインにも憧れます。

海外はフリーダム、日本はきっちり

海外は比較的レイアウトがフリーダムでゆるくて伸びやか、日本はしっかりきっちり配置している気がしました。きっちり配置するのは綺麗でわかりやすいですが、一方でデザインが小さく固く見える場合もありそうです。左右中央揃えだけではない変則的な配置は面白味を感じます。その分、コンテンツを絞ったり余白を十分とったりしてわかりやすくする工夫が必要かもしれません。

海外にも日本にもすばらしいホームページがたくさんあるので、できるだけたくさん見てなんでも吸収したいです。トップページのデザインを眺めるだけでなく触って体験するとより深くホームページの魅力を感じられるので、英語がわからなくても臆せず飛び込んでいきたいと思います。みなさんもぜひやってみてください!

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. news_study 第0回 Webデザイナー女子会「デザどき」に参加してきました。
  2. DSC_0072 広島フロントエンド勉強会デザイン部 Vol.5レポート
  3. Hirofuro-logo-8 「広島フロントエンド勉強会Vol.8」開催レポート
  4. Hirofuro-logo-8 勉強会?飲み会??「ヒロフロカフェ」開催レポート&ヒロフロのイベ…
  5. consaru エム・フィールド 広島オフィスで「広島フロントエンド勉強会 Vo…
  6. hanami3 オフィスでエア花見をしたよ
  7. lig_10 「いいオフィス 広島」のオープニングパーティーに参加してきました…
  8. Hirofuro-logo-8 広島フロントエンド勉強会 & 広島Unity勉強会 特…

最近の記事

  1. DSC_0072
  2. Hirofuro-logo-8
  3. carp9
  4. carp8
  5. carp7
PAGE TOP