OUTDOOR GUILD MURACO ECサイト
URL：https://muracodesigns.com/collections/all
URL：https://muracodesigns.com/collections/all
今回はECサイトを選んでトレースしました。
muraco（ムラコ）は⼩さな⾦属加⼯の⼯場から⽣まれた、アウトドア製品のブランドです。
スタイリッシュでとてもかっこいいデザインなのでアウトドアをする機会があれば使ってみたいです。
■構成
----------------左固定メニュー---------------
・ロゴ
・メニュー
------------------------------------------------------
・商品一覧
・フッター
このサイトを選んだのは、デザインが素敵だったこともありますが、自分のポートフォリオサイトと似た部分があるからという理由もあります。使用しているカラーやフォントが似ているのですが、他のサイトではどのようなデザインにしているのか気になり、あえてトレースしてみることにしました。
フォントは自分のサイトと同じNeue Haas Grotesk Display Proを使用していて、普通はHelveticaを使用するかと思うので驚きました！こちらのサイトでもあえて使用しているのでしょうか。
ECサイトはユーザビリティが一番大切な要素だと考えられます。
・商品の見やすさ
・検索のしやすさ
・商品の情報
商品一覧の部分はグリッドレイアウトになっていて、整理されていて見やすいです。
このグリッドと他の部分（Nextなどのテキスト、区切り線など）を合わせると綺麗に整列された印象になるのではと思います。
商品画像は3:4くらいの比率にしているようです。
また、商品写真の背景は全てグレーっぽいですが、商品によって微妙に色が違いますが、全体の雰囲気やトーンが統一感あるので綺麗に見えると思いました。
商品のマットな質感にサイトのデザインがとても合っていて、こういう風に商品やブランドに合ったデザインを作りたいと思いました。
ぜひ実際のサイトもご覧ください。
muraco（ムラコ）は⼩さな⾦属加⼯の⼯場から⽣まれた、アウトドア製品のブランドです。
スタイリッシュでとてもかっこいいデザインなのでアウトドアをする機会があれば使ってみたいです。
■構成
----------------左固定メニュー---------------
・ロゴ
・メニュー
------------------------------------------------------
・商品一覧
・フッター
このサイトを選んだのは、デザインが素敵だったこともありますが、自分のポートフォリオサイトと似た部分があるからという理由もあります。使用しているカラーやフォントが似ているのですが、他のサイトではどのようなデザインにしているのか気になり、あえてトレースしてみることにしました。
フォントは自分のサイトと同じNeue Haas Grotesk Display Proを使用していて、普通はHelveticaを使用するかと思うので驚きました！こちらのサイトでもあえて使用しているのでしょうか。
ECサイトはユーザビリティが一番大切な要素だと考えられます。
・商品の見やすさ
・検索のしやすさ
・商品の情報
商品一覧の部分はグリッドレイアウトになっていて、整理されていて見やすいです。
このグリッドと他の部分（Nextなどのテキスト、区切り線など）を合わせると綺麗に整列された印象になるのではと思います。
商品画像は3:4くらいの比率にしているようです。
また、商品写真の背景は全てグレーっぽいですが、商品によって微妙に色が違いますが、全体の雰囲気やトーンが統一感あるので綺麗に見えると思いました。
商品のマットな質感にサイトのデザインがとても合っていて、こういう風に商品やブランドに合ったデザインを作りたいと思いました。
ぜひ実際のサイトもご覧ください。
