マガジンのカバー画像

コーディング

4
運営しているクリエイター

#webデザイン勉強中

CVRが上がるアコーディオンタグの作り方

CVRが上がるアコーディオンタグの作り方

1.アコーディオンでCVRが改善した話ECサイトの作成をしているのでが、その中でも目に見えてCVRが上がったのがこのアコーディオンの導入でした✨商品の説明などをすべて見せているときよりもアコーディオン形式で検討したい方だけ見れる形にするだけでユーザーさんにとっては使いやすいサイト(=購入したくなる)につながるんですね~~!サイトもすっきりするので、ほしい情報を見つけやすいということのようです!導入

もっとみる
視線誘導の重要性&スクロールで動く!下線を引くjsまとめ

視線誘導の重要性&スクロールで動く!下線を引くjsまとめ

読み物系コンテンツでよくあるスクロールしていったら下線が動くやつ!視線の誘導がスムーズにできるしユーザーさんにとってもうるさくなく、得たい情報を最短で見つけられる!最高!なのでやってみました♥その際に視線誘導の重要性も再確認したので、そのあたりもまとめてみました~~

1.視線誘導の重要性デザインにおいて重要とされる情報の整理をする際にとっても重要なのが、視線の流れやユーザーの動きを誘導してあげる

もっとみる
タップでコピー!ユーザーに優しいボタンの作り方

タップでコピー!ユーザーに優しいボタンの作り方

お仕事では自社ECサイトの制作をしているのですが、割引系等のタップでク―ポンコードをGET!のボタンは、そのボタンをクリックした人数と実際に使われた数がわかったりするのでよく使います。

▲こんなのの下部分を目標に作ってみます~

1.まずは完成図から

FontAwesomeのFree版でアイコンも設定してみました!タップするとアラートが出る仕様です。

2.css<style>/* コピーター

もっとみる
【完全攻略】超便利なFlexboxを使いこなそう

【完全攻略】超便利なFlexboxを使いこなそう

Flexboxってこんなに使えるの?!と思ったのでまとめ☺️できることがめちゃめちゃ多いので難しそう、、、と手を出せずにいたのですが、基本だけ覚えてもめちゃくちゃ使える優れものです。

1.Flexboxとは?Flexboxとは、CSSで行う要素の「配置」を短いコードで柔軟に行えるレイアウトモードです。今まで使っていた「float」「display」「margin」などもレイアウトを変えられて便利

もっとみる