今日のデザイン#041 雑誌のようなレイアウトがかっこいい!ロンドンの建築デザイン事務所Michaelis BoydのWebサイト

ロンドンの建築デザイン事務所「Michaelis Boyd」のオフィシャルサイト。
全面写真のトップページや、各ページの写真のレイアウトが”雑誌”みたいで、とてもオシャレなサイトです。

スクリーンショット 2015 02 26 1 27 54
▲トップページは背景全面写真にロゴのみのシンプルなレイアウト。メニューバーにもアイテムはありません。

スクリーンショット 2015 02 26 1 28 14
▲スクロールするとコンテンツが表示。雑誌を思わせるグリッドデザインになっています。上部メニューもここで表示されます。

スクリーンショット 2015 02 26 1 28 34
▲各アイテムにはホバーエフェクトも実装。モバイルでは実現しにくいホバーエフェクトは、PC向けのリッチさを演出するポイントになります。

スクリーンショット 2015 02 26 1 28 48
▲メニューをクリックするとサブメニューが展開。白背景に黒文字のシンプルなものですが、背景の透明レイヤーのおかげなのか上品さを感じるデザインです。

スクリーンショット 2015 02 26 1 30 41
▲文章を読ませるページは、ホワイトスペースをさらに贅沢に使ったレイアウト。使用しているフォントはGT Walsheimに統一されています。フォントが変わるとWeb空間の中で独立したサイトという印象になり、より”雑誌”っぽい雰囲気が出しやすいように感じます。

スクリーンショット 2015 02 26 1 29 57
▲地図ページもカスタマイズ。ベースはGoogleマップですが、サイトのテイストに合うように、しっかりとデザインされています。

ここ数年でWebサイトのターゲットデバイスがPCからスマホに移行しており、今Webデザインを考える場合は”モバイルファースト”で考えることが多いと思います。
これから先、Webの閲覧環境はますますモバイルに移行していくと、PC向けのデザインは「スマホ版をそのまま拡大」「モバイルファーストのレスポンシブデザインでぱっと見整列していればOK」といったものがふえてくるかもしれません。
ただ、「今、あえてPCで閲覧してくれる人によりリッチな体験を!」ということで、贅沢なレイアウトで”魅せるデザイン”を狙い、Michaelis Boydのサイトのような世界観を持ったサイトを作りたいですね!

[ via Michaelis Boyd ]

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です