▼トレース元サイト様
株式会社ヴィーコ webサイト
URL：https://vico-co.jp株式会社ヴィーコ webサイト
コーポレートサイトのメニュー部分をトレースしました。
株式会社ヴィーコは大阪府 寝屋川、兵庫県 芦屋の工務店です。
今回はメニュー部分のみですが、サイト全体が綺麗なサイトです。
※トレースするにあたってメニュー部分の写真は別の写真に変えて作っているので、実際の写真とは異なります
こちらの工務店の手がけている家が、今っぽいモダンで上質な印象でありながら、木の温かみを感じられる雰囲気で、そのイメージに合うデザインになっていて素敵です。
落ち着いた配色やフォントで、白地の余白をバランス良く広めにとっていて、コーポレートサイトらしい、上質で信頼感のあるサイトになっています。
フォントは英字がFutura PT、日本語が源の角ゴシックJPを使用していました。
メニュー部分と写真部分は6:4くらいの比率。ホバーで写真が変わるようになっています。そのセクションのイメージがもっと伝わるようにしたい時に、テキスト+写真にすることで、視覚的にもイメージを伝えることができると思いました。
メニューを開いた際のアニメーションもごちゃごちゃしていなくてとても滑らかです。（テキストが下から現れるアニメーションはXDで再現がむずかしいため、トレースではなしにしています。）
コーポレートサイトに大切な要素（今回のような雰囲気をつくる場合）
・余白やレイアウトの整ったバランス
・写真（手がけている商品)の上質さ
・モダン、洗練された雰囲気で見やすいフォント
・白、黒、無彩色を使用した落ち着いた配色
・滑らかな動きのアニメーション
・誠実さの伝わるコンテンツの質
ぜひ実際のサイトもご覧ください。
