じゅん

ゆるゆるWEBデザイナー ゆるく勉強したことをゆるく記していきます。 pintere…

じゅん

ゆるゆるWEBデザイナー ゆるく勉強したことをゆるく記していきます。 pinterest→https://pinterest.jp/junjun96677/

バリアブルを使ってモックアップ作成 -ラジオボタン-

バリアブルを使用してモックアップを作成する練習をします。まずは簡単なラジオボタンを作成してみます。 1.ラジオボタンのコンポーネントを作成する バリアントで選択さ…

じゅん
じゅん
1か月前

バリアブルを使ってダークモードを設定

こちらの記事でバリアブル機能について学んだことを応用して、ダークモードの場合に自動的に切り替えができるように設定していきます。 Free Banking Mobile App Ui Kit W…

じゅん
じゅん
1か月前

ポケモンでFigmaバリアブルを学ぶ

バリアブル（variable）とはバリアブルとは2023年6月にFigmaに追加された新機能の一つで、オブジェクトに割当てることのできる変数の事です。 バリアブルとして設定できる…

じゅん
じゅん
1か月前

ヒーローセクションってなに？メインビジュアルとは何が違うの？

最近ヒーローセクション、ヒーローエリアなどの言葉を耳にしますが、恥ずかしながら意味がよくわかっていなかったので調べ、、、ChatGPTに聞いてみました。 ヒーローセク…

じゅん
じゅん
1か月前
1

アイトラッキング調査できるツール「clueify」をつかってみた

①サインアップするhttps://app.clueify.com/login にアクセスし、サインアップします。 ②調査したい画像をアップロードするお試しとしてビズリーチのLPを検証してみます…

じゅん
じゅん
3か月前
3

XDでガラスっぽい表現をしたい。【グラスモーフィズム】

こんばんは。最近暇な時間にdribbbleを見ているのですが、ガラスのような透き通ったシェイプの表現が多かったので少し気になり、自分でも作れないかと思い挑戦してみました…

じゅん
じゅん
2年前
1

上司の嫌いなところを箇条書きでまとめるとなんだかすっきりする

社会人として働いていると上司にイライラして爆発しそうな瞬間があります。そんな時、私は 「嫌いなポイントを箇条書きにしてまとめる」 ということをしました。 これがな…

じゅん
じゅん
4年前
12

偶然見つけたおしゃれなフリー素材

ネットサーフィンしたら偶然見つけたので備忘録としてここに記しておきます。 無料写真素材「O-DAN」 おしゃれな写真しかない。 入口の検索バーで商用利用可の素材を絞る…

じゅん
じゅん
4年前
4

おうち時間で挑戦！手書きイラストを素材サイトに投稿してみた

おうち時間、暇ですね。 私は少し絵が描けるので、このスキルを活かして、手書きイラストからaiデータを作成し、素材サイトに投稿してみました！ 準備したもの ●adobeイ…

じゅん
じゅん
4年前
9

学生・金欠クリエイター必見！無料で使える！イラレとフォトショっぽいソフト

Adobeのソフトって高いよね… 私は金欠社会人なので、Adobeのソフトは手を出しずらい価格であると思ってしまいます(´;ω;｀) そこでクリエイターには欠かせないソフト…

じゅん
じゅん
4年前
6
じゅん

じゅん

バリアブルを使ってモックアップ作成 -ラジオボタン-

バリアブルを使ってモックアップ作成 -ラジオボタン-

バリアブルを使用してモックアップを作成する練習をします。まずは簡単なラジオボタンを作成してみます。

1.ラジオボタンのコンポーネントを作成する

バリアントで選択されている状態と選択されていない状態のラジオボタンを作成します。
選択された状態→「true」
選択されていない状態→「false」
と値を設定します。

2.バリアブルを作成し、値を保存する

バリアブル作成のボタンをクリックし、「ブ

もっとみる
じゅん

じゅん

バリアブルを使ってダークモードを設定

バリアブルを使ってダークモードを設定

こちらの記事でバリアブル機能について学んだことを応用して、ダークモードの場合に自動的に切り替えができるように設定していきます。

Free Banking Mobile App Ui Kit With light & Dark Mode High Quality Ui 43+ Screen template
こちらのUIキットを使用します。

1.バリアブルモードを作成

light / dar

もっとみる
じゅん

じゅん

ポケモンでFigmaバリアブルを学ぶ

ポケモンでFigmaバリアブルを学ぶ

バリアブル（variable）とはバリアブルとは2023年6月にFigmaに追加された新機能の一つで、オブジェクトに割当てることのできる変数の事です。

バリアブルとして設定できる属性

カラー

数値

文字列

ブーリアン

カラー
色の数値（Hex値）を保存できます。塗りやストロークに適用できます。

数値
数値を保存できます。横幅や高さ、マージンやパディング、角丸などの数値に適用できます。

もっとみる
じゅん

じゅん

ヒーローセクションってなに？メインビジュアルとは何が違うの？

ヒーローセクションってなに？メインビジュアルとは何が違うの？

最近ヒーローセクション、ヒーローエリアなどの言葉を耳にしますが、恥ずかしながら意味がよくわかっていなかったので調べ、、、ChatGPTに聞いてみました。

ヒーローセクションとは？メインビジュアルと意味が似ているように感じますが意味は同じなのでしょうか？

メインビジュアルとは？つまり、ヒーローセクションはウェブページの入り口であり、訪問者を引きつけるための重要な「部分」、そしてメインビジュアルは

もっとみる
じゅん

じゅん

アイトラッキング調査できるツール「clueify」をつかってみた

アイトラッキング調査できるツール「clueify」をつかってみた

①サインアップするhttps://app.clueify.com/login
にアクセスし、サインアップします。

②調査したい画像をアップロードするお試しとしてビズリーチのLPを検証してみます。

③調査結果を確認するこのような結果が出ました。

色による指標はこのような感じみたいです。

人の顔や数字は数値が高いみたいです。

モード切替もできる画像の上部にあるタブでモード切替ができます。

もっとみる
じゅん

じゅん

XDでガラスっぽい表現をしたい。【グラスモーフィズム】

XDでガラスっぽい表現をしたい。【グラスモーフィズム】

こんばんは。最近暇な時間にdribbbleを見ているのですが、ガラスのような透き通ったシェイプの表現が多かったので少し気になり、自分でも作れないかと思い挑戦してみました。
どうやらこの表現はグラスモーフィズムというみたいです。
XDで作成することが可能！ということで作ってみました。

①シェイプを作る

②背景のぼかしという項目にチェックを入れる

③質感を出すための数値の設定

感想

このよう

もっとみる
じゅん

じゅん

上司の嫌いなところを箇条書きでまとめるとなんだかすっきりする

上司の嫌いなところを箇条書きでまとめるとなんだかすっきりする

社会人として働いていると上司にイライラして爆発しそうな瞬間があります。そんな時、私は
「嫌いなポイントを箇条書きにしてまとめる」
ということをしました。

これがなかなかスッキリしたのです。
なぜよかったのかというと

①まとめる自分の気持ちを整理することで、なぜモヤモヤイライラしているかを理解することができ、気持ちを落ち着けることができました。

②考えるさらに箇条書きをもとに嫌いポイントに
ど

もっとみる
じゅん

じゅん

偶然見つけたおしゃれなフリー素材

偶然見つけたおしゃれなフリー素材

ネットサーフィンしたら偶然見つけたので備忘録としてここに記しておきます。

無料写真素材「O-DAN」
おしゃれな写真しかない。

入口の検索バーで商用利用可の素材を絞ることができます。

線画イラスト素材「Linustock」
シンプルで使い勝手良さそー。

ベクターデータ＋線画をアウトライン化していないそうなので
加工もしやすい！

PNG、EPSデータでダウンロード可能。
線画のみと思いきや

もっとみる
じゅん

じゅん

おうち時間で挑戦！手書きイラストを素材サイトに投稿してみた

おうち時間で挑戦！手書きイラストを素材サイトに投稿してみた

おうち時間、暇ですね。
私は少し絵が描けるので、このスキルを活かして、手書きイラストからaiデータを作成し、素材サイトに投稿してみました！

準備したもの
●adobeイラストレーター

●スマートフォン、携帯
●コピー用紙、画用紙などの白い紙
●黒いマジックペン※コピックマルチライナーっぽいものを使いました

手順①白い紙にイラストを描くパソコンデータに取り込みやすくするために
周りに余白をあけ

もっとみる
じゅん

じゅん

学生・金欠クリエイター必見！無料で使える！イラレとフォトショっぽいソフト

学生・金欠クリエイター必見！無料で使える！イラレとフォトショっぽいソフト

Adobeのソフトって高いよね…

私は金欠社会人なので、Adobeのソフトは手を出しずらい価格であると思ってしまいます(´;ω;｀)

そこでクリエイターには欠かせないソフト、Illustrator、Photoshopに代わるソフトをまとめました。

イラレっぽいソフト「Inkscape」
▼「Inkscape」ダウンロードサイト

WindowsかMacか黒いメニューから選択してダウンロード

もっとみる