グリッドを崩した印象的なデザインのサイトを集めてみた

Webデザインの世界で、レスポンシブWebやコンテンツファーストの考えがスタンダードとなって久しいです。
スマホが重要なデバイスになった環境では、スクロールして読み進めやすい、縦にコンテンツを積むデザインが主流となりました。
こうしたデザインは1カラムが主体となりますが、そのシンプルなレイアウト構造は、コンテンツに集中させるという意味では効果的ですが、デザインの差別化は難しいものです。

1カラムのレイアウトは、シンメトリー（左右対称）になりやすく、 単調さを避けるために取り入れられる複数カラムのセクションは、グリッドで整然とレイアウトされがちです。

この記事で紹介したいのは、レスポンシブWebという現在のデザインの主流に対応しつつ、同時にアシンメトリー、フリーレイアウトと呼べる手法で差別化を図るサイトです。

DRAFT

DRAFT

日本のインテリアデザイン会社のコーポレートサイト。
背景の単色の色面を、あえて大きくずらした、大胆なアシンメトリーデザインになっています。
写真や文字といった要素も、自由度が高く配置され、インテリアデザイン会社らしい遊び心が表現されています。
フラットデザインを踏まえつつ、視差効果やドロップシャドウで奥行きを作り出しているのが、うまいですね。

クラーチ　新卒採用

クラーチ　新卒採用

介護・看護事業の会社の新卒採用サイト。
見出しや写真のあしらいが細かく、差し色のゴールド調とあいまって醸し出される上品さが、デリケートな領域を扱う事業によくなじんでいます。
デザインが上品な一方で、canvasのアニメーションなどを利用した大胆な演出が、採用サイトに求められるインパクトを勝ち取っています。
コンテンツ部分のレイアウトは、本当にフリーに近いですが、あしらいの一貫性やアニメーションの小気味よさで、よくまとめています。

山陽

山陽

姫路にある、タンナー（皮革製造）の会社のコーポレートサイト。
背景で軽やかに舞う、カラフルななめし革のビジュアルが、とにかくインパクト大で、クリエイティブの肝になっています。
縦長のページをスクロールさせる構成は、そのインパクトを最大限に活かすために採用されており、質の高いアートディレクションに感心します。
そして、自由度が高くレイアウトされた各要素や、ヌケ感のある余白が、軽やかさの演出に一役買っています。

Tokyo Cat Specialists

Tokyo Cat Specialists

東京港区にある、猫専門の動物病院のサイト。
上品な白木調で、ゆったりとしたホスピタリティ溢れる待合室の写真に、まず目を奪われます。
サイトデザインは、そうした施設の雰囲気を反映した、上品でゆったり落ち着いたものになっています。
ボックス要素を少しずらしたレイアウトは、猫らしい動きのある様を表現していますが、気品をどこか忘れていないのが、愛らしいですね。

自分薬局

自分薬局

奈良にある、地域密着型の薬局のサービスサイト。
処方せん調剤だけでなく、セルフケアの考えも提案する、新しい形の薬局サービスのようですね。
白ベースで、余白をしっかりとったデザインが、清潔感のある薬局施設にマッチしています。
シーンを切り取った写真をコラージュしたレイアウトが、時間軸やストーリーを予感させ、引き込まれますね。

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

お問い合わせはこちら