はむちゃん🐹

美容系の会社でインハウスデザイナーしてます🎀UX勉強中！動画もつくりたい…🥺

はむちゃん🐹

美容系の会社でインハウスデザイナーしてます🎀UX勉強中！動画もつくりたい…🥺

  • コーディング

  • デザイン

    PhotoshopやIllustratorを用いてできたことをまとめていきます。バナトレもこっちに載せようかな🤔🧡

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

1.アコーディオンでCVRが改善した話ECサイトの作成をしているのでが、その中でも目に見えてCVRが上がったのがこのアコーディオンの導入でした✨商品の説明などをすべて見せているときよりもアコーディオン形式で検討したい方だけ見れる形にするだけでユーザーさんにとっては使いやすいサイト（＝購入したくなる）につながるんですね～～！サイトもすっきりするので、ほしい情報を見つけやすいということのようです！導入するのもとってもカンタンでした😊💕 ▼こんな感じです～～ 2.body<bo

はむちゃん🐹

    • イラレのブレンドツールがめっちゃ使える話

      日々もくもくと気になるデザイン探しを行っているのですが、最近胸熱なのがAiのブレンドツールで作る文字です！！長く伸びた影って感じなのですが、文字で使うと立体感がカワイイのです、、、♡ ▼今回作ってみたのはこんなバナー 影が立体的でどーん！って感じ✨これだけでめっちゃ主張してくれてるので、余計な装飾なしのシンプルな構成でもお得感伝わってきますよね！影の色とか変えたら何にでも使える万能くんでは、、、🥺？！ 1.イラストレーターで文字の入力使用ツール：illustrator

      はむちゃん🐹

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

        読み物系コンテンツでよくあるスクロールしていったら下線が動くやつ！視線の誘導がスムーズにできるしユーザーさんにとってもうるさくなく、得たい情報を最短で見つけられる！最高！なのでやってみました♥その際に視線誘導の重要性も再確認したので、そのあたりもまとめてみました～～ 1.視線誘導の重要性デザインにおいて重要とされる情報の整理をする際にとっても重要なのが、視線の流れやユーザーの動きを誘導してあげることです！ユーザーの視線を意識していないと、情報が埋もれてしまって次の動作につな

        はむちゃん🐹

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

          お仕事では自社ECサイトの制作をしているのですが、割引系等のタップでク―ポンコードをGET！のボタンは、そのボタンをクリックした人数と実際に使われた数がわかったりするのでよく使います。 ▲こんなのの下部分を目標に作ってみます～ 1.まずは完成図から FontAwesomeのFree版でアイコンも設定してみました！タップするとアラートが出る仕様です。 2.css<style>/* コピーターゲット */input[type="submit"] { /* inputタグの

          はむちゃん🐹

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

        はむちゃん🐹

        マガジン

        • コーディング
          4本
        • デザイン
          5本

        記事

          覚えておきたい！ギザギザ円の作り方

          バナーやLPにも頻出のギザギザの円！素材サイトにもたくさんありますが、Photoshop でちょいっと出来るので、覚えておくと便利です😘 1.使い勝手抜群のギザギザ円はこんなところにも... よく見るAdobe広告にもある！！SALE系の広告には赤×黄の組み合わせでよく使われていますよね！スーパーの安売りのイメージがあって、この形をみると自分にとって有益な情報かも！とつい注意を向けてしまいます ▼スーパーのお惣菜に貼られてるシール バナーやアイキャッチに使う場合は、主

          はむちゃん🐹

          覚えておきたい！ギザギザ円の作り方

          はむちゃん🐹

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

          Flexboxってこんなに使えるの？！と思ったのでまとめ☺️できることがめちゃめちゃ多いので難しそう、、、と手を出せずにいたのですが、基本だけ覚えてもめちゃくちゃ使える優れものです。 1.Flexboxとは？Flexboxとは、CSSで行う要素の「配置」を短いコードで柔軟に行えるレイアウトモードです。今まで使っていた「float」「display」「margin」などもレイアウトを変えられて便利なのですが、それぞれの癖を理解して利用しないとレイアウトが崩れたり、『何ガ起コッ

          はむちゃん🐹

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

          はむちゃん🐹

          躍動感のある文字の作り方

          即戦力で使える！バナーに使うと購買意欲やクリックしたくなるような躍動感(スピード感)のある文字の作り方の備忘録です～🙋🏻‍♀️ 今回はイラストレーターのペンツールを使うのですが、直線だけなのでペンツール苦手な私でもできました！ちょっとずつペンツール慣れて、使えるようになっていかなきゃ 1.躍動感があって購買意欲が高まりそうな文字 ↑文字にしっぽがついてる（？）文字っていかにも”今届いた情報だよ”感があるなーと思い挑戦してみました！ 2.実践！躍動感のある文字の作り方使

          はむちゃん🐹

          躍動感のある文字の作り方

          はむちゃん🐹

          【Photoshop】3色グラデーションの作り方

          1.グラデーションを2色以上でつくりたい！！先日はじめて挑戦した3色のグラデーション！バナートレースの画像の背景がきれいな3色のグラデーションになってました。 2色ならPhotoshopのグラデーションツールでなんとかできたりするのですが、3色だと馴染ませるのがとってもむずかしい。。。すっごく苦戦したので備忘録としてやりかたを書き留めておきます！ ▼挑戦したのはこのバナートレース 2.Photoshopのグラデーションツール一方向へのグラデーションならいい感じに作成可能

          はむちゃん🐹

          【Photoshop】3色グラデーションの作り方

          はむちゃん🐹