Whiteboard

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

1. 見せつつ魅せつつスクロール｜background-attachment:fixedが魅せる
2. 内容を１ページに収めている
3. 収める！ための工夫！いや、執念！！そして綺麗。

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

• Tweet
• 

文字数の多い内容を、１ページになんとしても収める！という試みを行なっているWebデザイン。見せつつ魅せつつスクロールする演出が効果的です。秘訣はbackground-attachment！

文字数を多く「感じさせない」Webデザイン

このサイトの特徴はスクロール。見せつつ魅せつつスクロールする演出は面白いですよね。退屈にさせない工夫がそこにはあります。

ただちょっと観るだけだと、そのスクロールの演出により「軽い」印象を与えることに成功しています。が、実はこのサイト、文字量が沢山あります。こういったポートフォリオサイトとして１ページに収める分量と考えると、非常に多い文字量ですよね。

ランディングページやポートフォリオサイトは、沢山伝えたいことがあるがゆえに、文字量が多くなってしまって逆に見る気が失せてしまったりすることが多々あります。それを軽減するためにキーワード選びやそんなに多くのコンテンツを詰めないことなどが重要になってくるのですが、このサイトはそんな常識を軽く打ち破っています。

ご覧のようにメニューには沢山のコンテンツが並び、文字数も多い。

一見、理に叶っていないかと思われます。が、それをページングには欠かせない「スクロール」をうまく表現することによって、「軽く”魅せている”」んですね。

で、どうやるの

一見このWebデザインでは途中に写真が入るだけ、というよくあるデザインのようですが、違いますよね。スクロールすると写真の隠れている箇所が見えたりする演出をかけています。

HTMLとしては、普通に段組で配置されています。が、CSSのbackground-attachmentがこのWebデザインの重要なポイントでした。

background: url(../img/bg-about.jpg) no-repeat center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5);
font-size: 26px;
width: 100%;

実際にはこのように設定されています。このサイトにアクセスして実際に要素検証していただき、background-attachment:fixed;をオフにしてもらうと一目瞭然ですが、写真がそのままスクロールされます。

こちらがわかりやすいかな。画面の途中の要素だけを指定することによってこんな演出をかけられるのですね。

１ページに積み込む工夫

唯一「WORKS」のコンテンツのみが別ページに設定されています。流石に情報量が多いこのコンテンツは別ページに。しかし、そのページも１ページで完結しています。

通常であれば、作品ごとにページをつくるもの。それを上図のように全て一枚のページに要素配置しています。こんなドドンと配置する思い切ったレイアウトは初めて観ました。ちょっと斜めにすることで作品ごとの区切りがわかりやすくなっています。

また、全ての作品をみるためのUIも欠かしていません。右上のメニューボタンをクリックすると作品群がタイルづめで表示されます。これで一枚にまとめてスクロールが長くなったものを、簡単に全部観ることが可能になりました。jQueryをうまく利用しています。

スクロールの演出といい、このjQueryの利用といい、１ページに情報を抑えこむ執念を感じるWebデザインでした。background-attachmentってこんな利用法があったのかと感心。勉強になりました。

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

• ツイート
•