No.067 IKEA 公式オンラインサイト – webサイト分析 - 雨とホットケーキ

IKEA 公式オンラインサイト(https://www.ikea.com/jp/ja/)分析

IKEAの公式オンラインサイトは、スクロールするとグリッドレイアウトで画像が並んでいます。
今回は勉強のために、デザインを分析しました。

“Noto IKEA”, “Noto Sans JP”, “Noto Sans”, “Roboto”, “Open Sans”, system-ui, sans-serif
白系・黒系

白系・黒色・グレー系・青系・緑系

PCは上部にヘッダーメニューがあり、クリックすると下にメニューボックスが開きます。
スマートフォンは右上にハンバーガーメニューがあり、クリックすると左からメニューが開きます。

フッターはPCは横5列にリンクが並んでいて、その下にプライバシーポリシー等が並んでいます。

グリッドレイアウト箇所一部抜粋
.hri-bento-box {
display: grid;
gap: .75rem;
}

.hri-bento-box>:nth-child(1) {
grid-area: a;
}

.hri-bento-box>:nth-child(2) {
grid-area: b;
}

.hri-bento-box>:nth-child(3) {
grid-area: c;
}

.hri-bento-box>:nth-child(4) {
grid-area: d;
}

.hri-bento-box>:nth-child(5) {
grid-area: e;
}

.hri-bento-box:has(>:nth-child(5):last-child) {
grid-template-areas: “a a” “b c” “d c” “d e”;
}

@media screen and (min-width: 56.25em) {
.hri-bento-box:has(>:nth-child(5):last-child) {
grid-template-areas: “a a b c” “a a d c” “a a d e”;
};
}

.hri-bento-box:has(>:nth-child(4):last-child) {
grid-template-areas: “a a” “b c” “d d”;
}

@media screen and (min-width: 56.25em) {
.hri-bento-box:has(>:nth-child(4):last-child) {
grid-template-areas: “a a b c” “a a d d”;
};
}

.hri-bento-box__usa-a:has(>:nth-child(4):last-child) {
grid-template-areas: “a a” “d d” “b c”;
}

IKEA 公式オンラインサイトは画像がとてもきれいです。

初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。