A Book Apart

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

1. 元祖レスポンシブWebデザインが魅せる可憐なレスポンシブ
2. スクリーンショットが画像かと思ったら画像じゃない
3. Webデザインの集大成。細部で光る要素要素。

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

• Tweet
• 

Webサイトを作るための指南書やWebデザイナー向けの優良書籍が揃った電子書籍のECサイトのWebデザインをレビューします。Webデザインの巨匠たちが集うECサイトのWebデザインには、やはり沢山の学びがありました。

サイトでは、Webデザイナーなら一読しておくこと間違いなしの書籍が販売されています。例えば、今流行のレスポンシブWebデザイン。それに関する書籍『Responsive Web Design』は良書として有名。なんとレスポンシブWebデザインの提唱者と言われているEthan Marcotte氏が執筆しています。

そんな優れたWebデザインに関する書籍が集ったサイト。そのWebデザインからは沢山のことを学ぶことが出来ます。

華麗なレスポンシブWebデザイン

上図はタブレット端末に対応した際の表示。トップの大きいスクリーンショットが小さくなりました。

デスクトップサイズのものと比べると大きな変化が現れています。デスクトップサイズでは大きく左に表示されていた本が、随分と小さくなっています。スクリーンショットについて他の要素は変化はしていません。なるほど、ここで重要なのは確かに「本の説明」ですよね。何も考えずにレスポンシブを実現しようとしたらデスクトップサイズのまま縮小したかもしれません。

また、このレスポンシブWebデザインの見どころは、”リサイズした際の挙動”です。こればっかりはぜひ観てくだい。なるほど、こんな表現の仕方もあるのかと感動します。

スクリーンショット画像と思ったら要素

上図はトップページのスクリーンショット画像と思われる画像。これひとつが、ひとつの画像に見えませんか？

ですが、違います。

これは、左に擬似要素を作成し、バックグラウンドに本の画像を指定。そしてそれを拡大表示されています。

そして右では画像は一切使わず、文字要素のみとなっています。

このくらいのスクリーンショットなら、画像を使わずに作成出来るのかと目からウロコ。なによりレスポンシブWebデザインでネックになるのは、処理時間です。それを最低限に抑えるために画像などは必要以上に使わないのが良いとされています。まさにこの要素を使う方法を用いることによって、ページの減量化を実現しています。

各所で光るWebデザイン

細部にこだわりを感じます。そしてそれぞれが光り、まとまり、ひとつのWebサイトとして機能していますよね。

上図はヘッダーの画像。サイト一番トップには明るいブルーで引き締めています。また選択されたメニューのバックをサイト最上部まで伸ばすことでさり気なくも、大きく存在感を示してしています。

また、ヘッドバーと、アクティブ時の配色、とても馴染んでいて見事だと思いませんか？

上図はカートのイメージ。可愛いアイコンでわかりやすく表示させています。

また、いくつの商品が入っているか表す数字には緑の背景が。これはサイト全て通して、「BUY 」の色とリンクさせています。統一感がありますよね。

最後に上図はフッターです。ボーダー、ナビゲーション、文字色、それぞれの配色が絶妙だと思いませんか。とても優しい色で落ち着いていています。この程度の色のみだと淡くなり過ぎてしまう。そこを先ほどのヘッダーのトップバーで引き締めている。と考えると、非常に意図されたWebデザインだと納得させられます。

流石は、Webデザインの巨匠たちが集うECサイトのWebデザイン。とても学ぶところがあります。

他にも沢山の見どころがありますので、ぜひ一度観てみてはいかがでしょうか。

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

• ツイート
•