We Are Pollen

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

1. 最小限の装飾
2. 多くとられた余白
3. シンプルなデザインのための整頓

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

• Tweet
• 

最小限の装飾と大きく取られた余白で、クリーンかつシンプルにまとめられたポートフォリオサイトのWebデザインをレビュー。大きな文字や写真でガツンと決めて、その間にしっかりと設けられている余白とが混じりあって、シンプルでいながらインパクトのあるWebデザインに仕上がっています。

大きな余白-引き算のWebデザイン

「シンプルさの秘訣は、ずばり引き算の思考ができるかどうか」これはデザインする上において非常に有名で有益な言葉です。伝えたいことが沢山ある。けど、全てを伝えたいがために様々な要素を小さなページに詰めてしまって、逆見づらくなってしまうのは、デザイナーのエゴだ。という話にもつながっていきます。

ですが、この引き算の思考ってとても難しいんですよね。「どこまで余白をとっていいのか」「伝えたいことの半分も詰め込めてないけど、これで良いのだろうか」そんな不安がよぎるもの。そんな難しい引き算のWebデザインですが、それをこのポートフォリオサイトのWebデザインは見事に修めていると思います。

必ず、写真・文章の周りには比較的大きな余白が設けられています。トップページのファーストビューも然りです。「WE ARE」の文字下には大きな余白が設けられていますよね。ここに何か文字列や写真が入った場合を想像してみればおわかりになりますが、それだけでとてもごちゃごちゃすることになるでしょう。それを見事に「シンプル」に仕上げているこのWebデザインは、とても上手いですよね。

ずらして魅せる。重ねることで写真を活かす。

トップページの大きなスクリーンショットには、「WORK」という文字が半分重なっています。そこからポートフォリオサイトとして今まで携わってきたデザイン事例が連なっていきますが、この「WORK」の文字の場所、面白いと思いませんか？

普通だったら、「整頓」の気持ちから、サイトトップロゴと「WR ARE」と同一線上に「WORK」の文字を配置しているところ。それをかなり右にずらし、そして写真に重ねています。

一見全然まとまりがないように見えますが、実は他要素との整合性が取られています。

上図は中断の要素を抜かして文字のみの整合性を確認したものです。文字だけをみるとご覧のように一つの線上に合わさって要素が配置されていることがわかります。一見バラバラの要素ですが、全体をみるとまとめられており、そのおかげでごちゃごちゃしているという感覚がなくなっているのです。

シンプルなデザインを、引き算と整頓で表現しているWebデザイン。勉強になりました。

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

• ツイート
•