Maersk Fleet

Webデザイン３つの良いとこ : 3 Good Point!

1. スクロールしないWebデザイン
2. 1ページに情報を詰め込む技術
3. HTML5を駆使してビジュアルをリッチに。

私はWebデザインのココを見た！

• Tweet
• 

すっごいスクロールしたくなるｗ

まずサイトに行くと、「どうしよう」って気分になってしまったのは私だけでしょうか？(； ･`ω･´)

ですが、スクロールしなくても十分閲覧が可能で、逆にこれは面白い試みだなと思ったので、スクロールをしない（ほんと一部だけします！）Webデザインをレビュー。

スクロールを一切しないWebデザイン – 1ページに情報をうまく詰める

「スクロールをしない」そのデザインは「New builds」のページ以外一貫しています。例えばトップページ。上図はトップページ下部のキャプチャですが、やはり他の情報を見せるときは、スライドを活用しています。この情報は普通に長いページにして、スクロールさせて見せることもできますよね。こんな感じでページ各所でスクロールをさせない工夫をしているのが、このWebデザインの面白いところ！

横にスライドさせるこの演出も「工夫」ですよね。

HTML5を駆使！フラット、遠近法、、各所に観る細部に宿るデザイン！

「Timelines」の左右スライドのページ。遠近感覚をうまく利用したこのデザイン、とても良い！「なんでこんなに自然に横にスライド出来るのだろう」と思ったのですが、こちらに近づくほど線幅が広がり遠近を感じられます。

これ凄いですよ！全てHTML5を利用して、画像は使用せずにborder線を引いています。これはぜひ要素を解析して観てもらえればと思います。いつかこのtipsを書きたいな。

ポップアップ表示も良い。widthと四角形の角をあわせることによって、まとまりが生まれています。ポップアップをはじめ、各要素はfadeInとfadeOutが秀逸です。

また、この「Live map」もGoogle Map APIを使った良い使用例ですよね。とてもわかりやすいインタラクション。

と、スクロールをしないWebデザインを観て来ましたが、いかがでしょうか。実際にご覧になってその使いやすさ、もしくは使いにくさを実感してみて下さい。これは良い経験になると思いますよ！人によっては「スクロールはしない」、とわかっていても、何度もスクロールしたくなるかもしれません！

ですがいずれにしても、HTML5を駆使したWebデザインは参考になることばかり。勉強になりました。

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•