👌

【チームプロジェクトReview2】UX/UIデザイン(Responsive WEB、4倍数デザイン、12 grids、工夫した点など)

2024/02/09に公開

JavaScript

frontend

tech

はじめに

今日は、プロジェクトのUX/UIデザインについてお話したいと思います。
ITスクールはバックエンドを中心のスクールでしたが、本来UX/UIデザインにも興味があり、フロントエンドがとても重要だと考えましたので、綺麗な画面を作成することに力を入れました。

見栄えが良くて、ユーザーが使いやすいサービスが人の注目を集めたり、より使ってみたい気分になることは当たりだと考えたからです。

マークアップは塾で2日しか学んだなかったので、一人で独学し、優秀卒業作品として受賞した経験があったので、その時、勉強したものを活かす努力をしました。

未熟ですが、当時の記事のURLを添付します。

Responsive Web

WEBマーケティングを担当した際に、Google Analyticsからよくカスタマーのデーターを観察しました。
その際に得たインサイトとして、ほとんどの購買、ページの流入ルートがパソコンではなく、モバイルから行われることがわかりました。
メンターさんのアドバイスによると通信販売はMobile First　のような傾向にあり、我々のターゲットもスマートフォンをよく使う若い男性でしたので、設計の段階からレスポンシブWEBサイトを具象することを視野に入れました。

練習として、以前768pxを基準にレイアウトが変わるサイトを作った経験はありますが、この度はレイアウトを3つに分け、4～5つの分岐点から、paddingが調節され、gridでレイアウトの配置が変わるデザインを目標にしました。

@media screen and (max-width: 1440px) {
    .new-items__container{
        width: 100%;
        height: 55%;
    }
}


@media screen and (max-width: 1024px) {
    .new-items__container{
        padding: 0 8rem;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2,1fr);
    }
    .address__time{
        display: block;
        margin-bottom: 3rem;
    }
}


@media screen and (max-width: 768px) {
    .new-items__container{
        padding: 0 4rem;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2,1fr);
    }
    .banner__logo{
        width: 3rem;
    }
    .banner__text{
        font-size: 1.25rem;
    }
    .btn--index{
        width: 5rem;
        height: 3rem;
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 600px) {
    .new-items__container{
        padding: 0 4rem;
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(4,1fr);
    }
}

実際は、メンターさんのフィードバックによりますと、Mobile firstのサイトはmobileのレイアウトを作成することが多い、場合によってmin-widthで調節する場合もあるようですが、実力が足りなかったことで、それを知らず Desktop firstを基準にし、デザインをしたことがは少し惜しかった点でした。

改善できなかった点もあります。
本来なら以前のプロジェクトのように、こちらのイメージの通り、NavigationをToggleボタンを押すことで隠したり、表示したりする機能を作りたいと思ったのですが、、、

下にあるdrop downメニューの位置をcssのhoverで処理する際に、position:absoluteを入力し、Navigation要素とdrop downの要素が異なる階層（レイヤー） であったことで、サイズが小さくなる場合、上記のイメージのよう、Toggleボタンを付けたレイアウトに変更されることができず、

これは解決できなかった点でより経験が重なったらもう一度チャレンジしたいと思います。

4倍数デザイン、12 grids

YoutubeからFigmaを独学し、初めてワイヤフレームを作成してみました。
慣れていないツールを使うことで不安もありましたが、デザインの基礎知識などを調べ、チーム員1人と力を合わせ、役割を分担しつつ、デザインを行いました。
私の場合、クライアントページを、チーム員は管理者ページをデザインし、Figmaからプロトタイプとうい機能を活用して、ユーザーフローをシェアしました。

プロジェクトを準備しながら、結構色々なレファレンスを参照したのですが、8倍数・4倍数デザインの存在が分かり勉強をしてみました。今は4倍数デザインが柔軟なレイアウトだと認識されているようで、remの値を設定する場合、0.25rem＝4pxを意識しつつ、デザインしました。

また、WEBページ基準、中身があるcontainerが1320pxで全体的に12つのgridsで分けることかわかり、レイアウトを作成する際に12 gridsを守りながら、デザイン自体よりはシンプルで綺麗に整えてるデザインをすることを意識しました。

参考にしたサイトの一覧をシェアします。

UXデザイン

通信販売の場合、購買プロセスと商品も見るプロセスがシンプルな方が購買に繋がる可能性が高いらしいです。ユーザーの無駄な動きを減らす、得られる情報（商品情報）をより便利にアクセスできるUXを意識しました。
session（depth）を減らす工夫した結果、上段のNavigationからマウスの矢印を動かしますと、cssのhoverと連携し、すぐ商品のカテゴリを表示されたり、ページのheight（縦）が長かったので、横に<aside>タグとJSのクリックイベントを活用して、ユーザーが欲しいsectionにすぐ移動できる機能を追加しました。

(WEB標準のため、<div>のみならず、<nav>,<header>,<aside>を活用しました。）

JQueryを使わず、JavaScript（Vanilla JS）でコーデイングをしました。
こちらのコードはEvent Delegation（イベント移譲）を意識しつつ作成したコードの一部です。

item-detail

'use strict'


const itemContainer = document.querySelector('#item__info')
const itemDetails = document.querySelector('#item__detail');
const itemQna = document.querySelector('#item__qna');
const itemReviews = document.querySelector('#item__reviews');

/*itemDetails, itemQna, itemReviewの親要素にイベントを追加*/
const itemNavs = document.querySelector('.item__navs')
const itemAside = document.querySelector('.item__aside');

itemNavs.addEventListener('click',event =>{
   if(event.target.className.includes('detail')){
       itemDetails.scrollIntoView({ behavior: 'smooth' });
   }
   else if(event.target.className.includes('qna')){
       itemQna.scrollIntoView({ behavior: 'smooth' });
   }
   else if(event.target.className.includes('review')){
       itemReviews.scrollIntoView({ behavior: 'smooth' });
    }
});

itemAside.addEventListener('click',event => {
    if(event.target.className.includes('info')){
        itemContainer.scrollIntoView({ behavior: 'smooth' });
    }
    else if(event.target.className.includes('detail')){
        itemDetails.scrollIntoView({ behavior: 'smooth' });
    }
    else if(event.target.className.includes('qna')){
        itemQna.scrollIntoView({ behavior: 'smooth' });
    }
    else if(event.target.className.includes('review')){
        itemReviews.scrollIntoView({ behavior: 'smooth' });
    }
})