コーポレートサイトのメニュー部分をトレースしました。
株式会社ヴィーコは大阪府 寝屋川、兵庫県 芦屋の工務店です。
今回はメニュー部分のみですが、サイト全体が綺麗なサイトです。

※トレースするにあたってメニュー部分の写真は別の写真に変えて作っているので、実際の写真とは異なります


こちらの工務店の手がけている家が、今っぽいモダンで上質な印象でありながら、木の温かみを感じられる雰囲気で、そのイメージに合うデザインになっていて素敵です。
落ち着いた配色やフォントで、白地の余白をバランス良く広めにとっていて、コーポレートサイトらしい、上質で信頼感のあるサイトになっています。
フォントは英字がFutura PT、日本語が源の角ゴシックJPを使用していました。


メニュー部分と写真部分は6:4くらいの比率。ホバーで写真が変わるようになっています。そのセクションのイメージがもっと伝わるようにしたい時に、テキスト+写真にすることで、視覚的にもイメージを伝えることができると思いました。
メニューを開いた際のアニメーションもごちゃごちゃしていなくてとても滑らかです。(テキストが下から現れるアニメーションはXDで再現がむずかしいため、トレースではなしにしています。)


コーポレートサイトに大切な要素(今回のような雰囲気をつくる場合)
・余白やレイアウトの整ったバランス
・写真(手がけている商品)の上質さ
・モダン、洗練された雰囲気で見やすいフォント
・白、黒、無彩色を使用した落ち着いた配色
・滑らかな動きのアニメーション
・誠実さの伝わるコンテンツの質



ぜひ実際のサイトもご覧ください。
Back to Top