優れたWebデザインを仕事で活用する為の考察
Webデザインの参考にするため、色々とブログ記事や過去のアーカイブなどを漁っていると、「◯◯なWebサイト△選〜」という記事をよく目にします。
そこに貼られているサイトたちはどれも確かにキレイで大変参考になるのですが、個人的に知りたいのは、「なぜそのサイトが◯◯だと感じるか」であったりします。
間？タイポグラフィ？色使い？細かなテクスチャ？トータルバランス…？
日頃から自分なりにいいと思ったwebサイトはアーカイブに残すようにしていますが、それを実案件に上手く活かせていないのは、サイトのデザイン的に優れた部分を感覚だけで捉えていて、自分がいざデザインするときに参考にできる引き出しとして機能していないからではと感じました。
自身がこれまでアーカイブしたwebサイトから、改めてそのデザインの優れた点を考察し、きちんと理解を深めて引き出しを作っていくことが目的です。まずは5点、ピックアップしました。
東京、表参道のクラブフロア「ORIGAMI」のwebサイトです。
【注目した点】
全体を通してシンプルでかっこいいサイトという印象を受けたのですが、注目したいのはスケジュールのデザインで、イベントのあるマスには写真が貼られており視覚的にも美しく見やすいです。
ロールオーバーでサイドカラムが切り替わり、詳細が見れるのも流行のメガメニューの様で俯瞰的に見やすいです。
クラブイベントのスケジュールというと、派手なビジュアルとタイポグラフィでごちゃつきがちな印象なので、これだけ整理されて綺麗なのは斬新ですね。
【色使いを見る】
モノクロを基調としていて、色はTOP以外ほとんどありませんが、アーティストの写真にもカラフルな色が重ねられており、ただの写真ではなく、アートピースのような扱いになっています。このクラブのコンセプト「MUSIC×ART+YOU」を演出するものだと考えられます。
【装飾をみる】
全体的に装飾は少なく、シンプルに見えますが、並び合う要素の仕切りには波線、囲う要素には直線を使うといったルール決めが見られます。
また、TOPやフッターなどの細かな動きの演出によって単調さを感じません。
【書体を見る】
見出しに使用されているジオメトリックなフォントは「maven pro」という、google web fontです。サイズは14pxと24pxの2種類でほぼ構成されています。
無機質な印象のこのフォントは、添える程度のサイズで使用するのがクールさを演出するポイントでしょう。
反対に情緒のあるセリフ体は「Crimson Text」。こちらもgoogle web fontです。こちらは14pxで統一されています。
女性向けの福岡観光ポータルwebサイト「フクミミ」です。
【注目した点】
ポータルサイトというと、一般的には
・ 視認性重視で背景は白色
・ セクションごとに彩度の高い色分け
・ シンプルさを重視している
といった印象があったのですが、それに当てはまらなくても全体としてポータルサイトらしくまとまっています。
スマホやレスポンシブには対応していないのですが、TOPのバナーデザインも含めかわいくて魅力的なサイトだと思います。
【色使いを見る】
全体的に彩度を落としてあり、落ち着いた色使いですが、若い人にも抵抗のないかわいい印象を受けます。
【装飾をみる】
全体に調整んで構成されていますが、アイコンだけは円で差別化されています。
要素が多い分、細部にバランスを保つための細かいルール分けを感じました。
フォトグラファー、小林大輔さんの事務所のwebサイトです。
【注目した点】
フォトグラファーのwebサイトというと、一般的にモノクロを基調とした余白の多いシンプルなデザインで、落ち着いて写真を眺められるようデザインされていることが多いです。
こちらのサイトは逆に、様々な演出が目に飛び込んできて、アグレッシブで「かっこいい」という印象を受け、とても気に入りました。
【演出を見る】
トップから小林氏の活動の様子が音声ありの動画という形でバックグラウンド再生されます。
スクロールすると今度は無音になり、WORKSの写真が大量に散りばめられますが、不規則に並んでいる写真たちと、その後ろから見え隠れする背景の動画が退屈させない工夫になっています。
【色を見る】
透過になっている青色のテキストなども背景と混ざり合って光の効果をを感じさせます。
少し彩度を落とした青と、白の2色のみに絞ることで、全体を通して強い統一感があります。
プロフィール・ブログなども細かな演出が加えられており、1ページ完結型のWebサイトですが、完成度の高さと充実感を感じました。
パリのデジタルクリエイティブチーム、Immersive gardenのポートフォリオサイト。
【注目した点】
同じレイアウトの制作実績が淡々と流れるだけなのですが、有無を言わさぬ美しさがあります。
セクションごとに変わる淡いカラーリングや背景の作品ナンバーも理由なのでしょうが、
これはやはり「間」の取り方がとても綺麗なのだと思います。
【マージンを見る】
セクションタイトル、タイトルからビジュアルなどのマージンがきちんと統一されており、背景の数字が切り替わる間も完璧に合わせてあります。動かしていてとても気持ちがいいです。
寄せるところはぎゅっとまとめてブロックにして、空けるところは思い切って空けるバランス感覚も参考になります。
【書体を見る】
テキストに使用されているフォントはgoogle web font で「lato」（サンセリフ体）と「tions」（セリフ体）。
上述の「ORIGAMI」のデザインでもそうでしたが、セリフとサンセリフの組み合わせは、こういったアート色の強いサイトではとても魅力的です。他の装飾がない分、見出しには34pxと、比較的大きいサイズを指定しています（本文は13px）。
Apple Watchの充電ドックのコンセプトサイト。製品化に向けプレオーダー中の様
【注目した点】
注目点は最初のTOPビジュアルに尽きるのですが、うまいパララックスの使い方です。
パララックスは2013年からのトレンドでしたし今更感もあります。
しかし、装飾的であったり、遊び心で使われる事の多いこの技術は、こういう深い構造を見せるような演出の際に一番効果を発揮するのではないかと思いました。
