要素を斜めに整列させた刺激的なWebデザイン

Sandra-Lovisco-斜め-Webデザイン_001

Sandra Lovisco

ヘアーメイクアップアーティストSandra Lovisco氏のポートフォリオサイトです。コンテンツを斜めに仕切り整列させているのが特徴的。なんとなく刺激的な印象を受けます。そしておしゃれ☆

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

  1. コンテンツを斜めに整列させて刺激的に
  2. 読込中も斜めにローディング
  3. ギャラリーも斜めに区切ることで全体の印象を統一

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

メニューもギャラリーも斜めに区切ったWebデザイン。なかなか珍しいですよね!恐ろしくおしゃれでクールな演出に感じます。

ですが、実際作ってみると、けっこうギャラリーの配置の兼ね合いが難しいのだろうなー!と感じました。一度このWebデザインを観てしまうと斜めが「普通」に感じてしまいますが、通常、全ての要素を斜めに区切るという配置は行わないですよね。

そんな思考の檻をぶち破って、全てを斜めにして初めて、「綺麗」と思えるWebデザインが出来上がっているのではないでしょうか。

 

ギャラリーメニューとナビゲーション、斜めに整列

Sandra-Lovisco-斜め-Webデザイン_002

メニューのいずれかをクリックするとギャラリーを観ることが出来ます。メニューの区切り線、コンテンツの並び、全てが斜めに整列されています。

Sandra-Lovisco-斜め-Webデザイン_003

同じくギャラリー閲覧中に右下に表示されるナビゲーション。前後の画像へと移動することが出来るのですが、ここを斜めに配置していることで全体との統合性がすごくとれているんだなぁという印象を受けました。

だって、Webデザイナーが、「ナビゲーションは通常のスライドショーのように画像の左右に設置する」という判断も出来たわけです。もしかしたらこのレイアウトが当然だ!と感じる方もいるのかもしれませんが、実際に”ゼロ”の状態から始める際には、凄い決定だったのではないでしょうか。コーディング技術も問われますし。

全て私の勉強不足から生じる発想なのかもしれませんが、私はこのような「常識を打ち破る」ようなWebデザインの姿勢にも感心しました。(常識など端からないものなのかもしれませんが)

 

ローディングも斜めに演出

Sandra-Lovisco-斜め-Webデザイン_004

もうここまで来ると徹底していますね!このサイトの欠点はローディング時間がちょっと長くなってしまうところなんですが・・・、その読み込み時、クルクルーっというありきたりなローディング画像を表示させるのではなく、選択したメニューが斜めに色づいていく演出をつけています。

こんなところまで斜めに視覚効果を出されたら、嫌でも「斜め」というものを無意識の内に意識して、「刺激的」な、つまり「印象に残りやすい」Webデザインになるのではないでしょうか。

 

これらは全て私の感じた印象ですが、私にとってはデザイン、技術、意味ともにとても参考になるWebデザインでした!

ちなみにこのWebデザイン、全画面表示で閲覧するとすっごいカッコいいですよ!o(> <)o

今日参考にさせて頂いたサイト

Sandra Lovisco

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

  • このエントリーをはてなブックマークに追加

関連するWebデザイン

コメントをどうぞ。

1日1Webデザイン

あなたにとっての素晴らしいWebデザインが見つかりますように。

Webデザインレビュータグクラウド

ホバーしてね