マガジンスタイルを１ページに収める！ページ遷移が一切ない技が詰まりまくったWebデザイン

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

うーん。凄い。このようなレイアウトのWebデザインは初めて見ました。

一見トップページの始めだけを見るとマガジンスタイルのWebデザインなのですが、その正体は、ペラ１。なんと１カラムのWebデザインでした。

そしてなんとページ遷移を行いません。記事１つずつ、１つずつを丁寧に扱っている印象を受けました。そのWebデザインには沢山の技が詰まっています。ちょっとずつですが、観ていきましょう。

１カラムで記事をどんどん紹介していくといっても、ただ同じレイアウトでずーっと表示されてたら飽きてしまいますよね・・・。それを解消しているのが、この配置を変更する手法です。

どちらも同じページ内ですが、上の記事は写真が右に、下の記事は写真が左に配置されています。

写真が右に、左には大きなタイトルと抜粋

こちらは写真は左に。右にはタイトルと抜粋。

この画像だけ見ると、どちらも同じページ内にあるとは思えませんが、このようにベースは変わらず配置だけを各所で変更しているため、飽きがきませんね。

また、この記事部分だけをとってみても、実はとてもおもしろいレイアウトだと思います。一般には、アイキャッチ写真と同じ高さや幅を、タイトルなどの文字組みの背景にも使用しますが、どちらも異なります。重ね合わせることによって、魅せている。

こういったちょっと変わった記事の紹介方法もあるんだなぁと思いました。キレイ。

ちょっとこれ凄いなと思いました。ページをスクロールすることによって、既にページ遷移が行われています。

上からスクロールしていくと、アドレスが勝手に変更。

更にスクロールして、違う記事の上までいくと、またアドレスが変わります。

こうすることによって、URLの紹介もしやすいし、どこにいるのか訪問者がわかって良いですね。これどうやるんだろう。

また、スクロールでページ遷移が行われたという言葉どおり、「READ MORE」をクリックすると、その場で記事の中身が閲覧出来、「CLOSE」をクリックすると、また先ほどのページに。

ここまで、ユーザーが実感する「ページ遷移」はほぼ一切ありません。サムネイルを見ようとするとちょっとだけ感じますが、それもほんの少し。うーん。作りこまれている。

また、下へスクロールするのが大変という場合に備えて、画面右に表示されている「＞」をクリックすると、サムネイル一覧が表示されます。

これで、ユーザーの操作を簡易に行わせることを可能にしています。

んー、他にも紹介しきれないWebデザインの見どころが沢山あります。ぜひ一度サイトを観てもらって、ページ遷移のないマガジンスタイルを体験してみてください。

こんなサイトを作ってみたいなー！

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！