自分の履歴を敷き詰めるレスポンシブポートフォリオWebデザイン

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

自分の仕事歴をマルチカラムで敷き詰めるポートフォリオWebデザイン。レスポンシブで尚且つ配色にすごく気を使っているので、気持よく見ることができます。そして徹底的に考えられたインタラクションデザイン。

こんなWorkの魅せ方も良いですね！自分のWorkをマルチカラムで敷き詰めて、そしてレスポンシブWebデザインを付加することで、どのデバイスでも同じ感覚でポートフォリオサイトを観ることができるようになっています。

このマルチカラムで、更にカラムごとに余白や枠がない敷き詰めをする場合、配色で各項目の堺を表現しなければなりません。そこをこのWebデザインはうまくこなしている。

全てベースカラーはグレーですが、そのグレーが上からだんだんとグラデーションが濃くなっています。一見全て同じに見えるんですが、この微妙な色の違いがユーザーを迷わせない、戸惑わせない、大きな役割を果たしています。

グレーと水色のシンプル配色

主にこのWebデザインでは、グレー、水色、白の三色しか使われていません。黒などが個別ページで使われることもありますが、それはそれぞれに合わせての配色。基本はこの三色です。

これを徹底して統一することで、普通だったら見づらいような配色もとても好感的に見ることができます。

上キャプチャのようなそれぞれのWorkページでは、タイトルと説明文が水色で表記されています。水色って、普通リンク色であったり、文字全部のカラーにはなりづらい色。それをしっかりと色の統一をすることで、水色でも見やすくしているんですね。

流石インタラクティブディレクター！と思ったのですが、ユーザーの導線をしっかりと考えられて作っていると素直に思いました。

例えば個別のカラムをクリックした際、それぞれのページが表示されますが、実はこれページ遷移をしていません。ただその下にコンテンツを展開しているだけで、ユーザーを迷わせないように工夫されているんですよね。

当然、ページには閉じるボタンや、前後ページへのリンクも貼られているんですが、遷移をしない、いつでも元のページがあるという状況を作り出しているWebデザインは素晴らしい。

で、更に見たコンテンツは、×印がカラムに表記されます。これで一度見たコンテンツはもう観ないで済みますよね。

小さいところなんですが、それぞれの役割をしっかりと考えられているWebデザインでした。勉強になりました！

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

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！