カヒブン

UIデザイナー👀

カヒブン

UIデザイナー👀

記事一覧

FigmaのAutoLayoutで折り返しできる「Wrap」と「Min/Max」の使い方

今回は2023年6月22日に開催されたFigmaが主催するイベント「Config 2023」で発表された。今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと…

カヒブン
11か月前
23

完璧な段落(行の長さ・フォントサイズ・行間)をデザインしましょう〜!

こんにちは。UIデザイナーのカヒブンです。 今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒に「完璧な段落をデザイン(行の長さ・フ…

カヒブン
1年前
13

Greenをリデザインしてみた〜第二弾〜

こんにちは。UIデザイナーのカヒブンです。 最近転職サイトの採用担当者向けの管理システムを使う機会があり、より良い転職サイトのデザインについて考えてみました。 先…

カヒブン
1年前
6

お互いのスキルセットを知ろう〜スキルマップを作成しよう!〜

こんにちは。UIデザイナーのカヒブンです。 今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒にスキルマップを作成しました。この一年…

カヒブン
1年前
5

Greenをリデザインしてみた

こんにちは。UIデザイナーのカヒブンです。 最近転職サイトの採用担当者向けの管理システムを使う機会があり、より良い転職サイトのデザインについて考えてみました。一つ…

カヒブン
1年前
13

Ant Designを使ってダッシュボードを作る

こんにちは。UIデザイナーのカヒブンです。 皆さんAnt Designが知っていますか? 中国のAlibabaが開発したUIフレームワークです。日本だとMaterial UI(MUI)がメジャーでよ…

カヒブン
2年前
14

デザインシステムの作り方 ~Text / Color / Effect Style編~

こんにちは。UIデザイナーのカヒブンです。 今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒にデザインシステムの中に「Text Style」…

カヒブン
2年前
4

日本と海外の求人コンテンツを考察してみた

こんにちは。UIデザイナーのカヒブンです。 最近は求人サイトのUIデザインを制作しています。求人サイトの参考を探すときに、日本のサイトの求人コンテンツは決まっていま…

カヒブン
2年前
6

マテリアルデザイン参考サイトまとめ

こんにちは。UIデザイナーのカヒブンです。 マテリアルデザインとは、Googleが推奨するデザインの一種です。マテリアルデザインで作成されたWebサイトは、ユーザーにとっ…

カヒブン
2年前
5

Figmaでよく使うショートカット

こんにちは。UIデザイナーのカヒブンです。 UIデザインする時にショートカットを使うと、効率良く時間をかけずに作業をすすめられますので、今週のデザトレ(弊社のデザイ…

カヒブン
2年前
5

実装しやすいFigmaファイルの作り方

こんにちは。UIデザイナーのカヒブンです。 UIデザイナーとして、見た目が綺麗、ユーザーの使いやすい画面を設計するだけではなくて、実装のしやすさ・工数も考えた上で設…

カヒブン
2年前
16

UIの状態について

こんにちは。UIデザイナーのカヒブンです。 今回はUIの状態について話したいと思います。 UIデザイナーにありがちな間違いは、理想的な状態のユーザーインターフェースだ…

カヒブン
2年前
11

デザトレ!之Aurora UI

今天我将用中文与大家分享一期デザトレ! (Design training) 你可能会问什么是 「デザトレ! 」,这是Goalist设计团队每周一次一小时的设计训练,届时团队成员之间分享彼此…

カヒブン
2年前
3

【Linkedin】魅力的な機能のUXUIデザイン考察

こんにちは。UIデザイナーのカヒブンです。 今回はLinkedinの第三弾ー求人以外で魅力的な機能のUXUIデザインを見ていきたいと思います。 前回の記事はこちらです。 Linke…

カヒブン
2年前
5

【Linkedin】会員登録フローでのUXUIデザインの考察

こんにちは。UIデザイナーのカヒブンです。 前回のLinkedin求人検索のフローの記事に引き続き、今回はLinkedinの会員登録フローについて見ていきたいと思います。 前回の…

カヒブン
2年前
6

【Linkedin】UXUIデザインの考察

こんにちは。UIデザイナーのカヒブンです。 今回のUXUIデザイン考察の対象はLinkedinです。 Linkedinとは? アメリカ生まれのビジネス向けSNSの1つで、企業向けの採用機能…

カヒブン
2年前
5

FigmaのAutoLayoutで折り返しできる「Wrap」と「Min/Max」の使い方

今回は2023年6月22日に開催されたFigmaが主催するイベント「Config 2023」で発表された。今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒にFigmaのオートレイアウトについての新機能ついて学んでみました。

Wrap(折り返す): フレームを縮小すると、オートレイアウト(Auto layout)という自動的にコンテンツを整列させる。

Min/Ma

もっとみる
完璧な段落(行の長さ・フォントサイズ・行間)をデザインしましょう〜!

完璧な段落(行の長さ・フォントサイズ・行間)をデザインしましょう〜!

こんにちは。UIデザイナーのカヒブンです。

今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒に「完璧な段落をデザイン(行の長さ・フォントサイズ・行間)」の作り方について学んでみました。

行の長さ

非常に長い行の文章を読むときに、目が疲れちゃいますので、改行によって提供される一定の休止を必要としています。次の行に移るときに、短い間ができるのです。短くても、長く続

もっとみる
Greenをリデザインしてみた〜第二弾〜

Greenをリデザインしてみた〜第二弾〜

こんにちは。UIデザイナーのカヒブンです。

最近転職サイトの採用担当者向けの管理システムを使う機会があり、より良い転職サイトのデザインについて考えてみました。
先月は Green(転職サイト)の「アプローチ管理画面」をリデザインして、今月は「求職者検索画面」のUIを改善してみました。

リデザイン前

リデザイン後

リデザイン前と比較してどうでしょうか?実際に作成したUIの解説を見ながらポイン

もっとみる
お互いのスキルセットを知ろう〜スキルマップを作成しよう!〜

お互いのスキルセットを知ろう〜スキルマップを作成しよう!〜

こんにちは。UIデザイナーのカヒブンです。

今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒にスキルマップを作成しました。この一年に新しいメンバーが増えたので、改めてお互いを知る機会にしてみって、共通点を探したいと思います!

スキルマップとはやったこと/次にやってみたいことをLIKE / HATE / GOOD / WEAK(スキ・キライ・得意・苦手)という4つ

もっとみる
Greenをリデザインしてみた

Greenをリデザインしてみた

こんにちは。UIデザイナーのカヒブンです。

最近転職サイトの採用担当者向けの管理システムを使う機会があり、より良い転職サイトのデザインについて考えてみました。一つの事例として、実際に Green(転職サイト)のアプローチ管理画面ををリデザインして、UIの改善をやってみました。

リデザイン前

リデザイン後

リデザイン前と比較してどうでしょうか?実際に作成したUIの解説を見ながらポイントをまと

もっとみる
Ant Designを使ってダッシュボードを作る

Ant Designを使ってダッシュボードを作る

こんにちは。UIデザイナーのカヒブンです。

皆さんAnt Designが知っていますか?
中国のAlibabaが開発したUIフレームワークです。日本だとMaterial UI(MUI)がメジャーでよく使われています。

今回はAnt Designを使ってダッシュボードを作ってみました。

新型コロナウイルス感染症情報について架空のダッシュボードを作りました。このダッシュボードを作るために、Ant

もっとみる
デザインシステムの作り方 ~Text / Color / Effect Style編~

デザインシステムの作り方 ~Text / Color / Effect Style編~

こんにちは。UIデザイナーのカヒブンです。

今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒にデザインシステムの中に「Text Style」「Color Style」「 Effect Style」の作り方について学んでみました。

デザインシステムの定義

目的:効率的でまとまりのあるプロダクト開発・運用。
用意するもの:Figmaを利用する上で、「Text St

もっとみる
日本と海外の求人コンテンツを考察してみた

日本と海外の求人コンテンツを考察してみた

こんにちは。UIデザイナーのカヒブンです。

最近は求人サイトのUIデザインを制作しています。求人サイトの参考を探すときに、日本のサイトの求人コンテンツは決まっていますが、海外のサイトの求人コンテンツは決まっていないことに気づきました。

今回は日本と海外の求人コンテンツを考察していきたいと思います。

まずは日本の求人サイトです。

マイナビ

エン転職

タウンワーク

日本の求人サイトをまと

もっとみる
マテリアルデザイン参考サイトまとめ

マテリアルデザイン参考サイトまとめ

こんにちは。UIデザイナーのカヒブンです。

マテリアルデザインとは、Googleが推奨するデザインの一種です。マテリアルデザインで作成されたWebサイトは、ユーザーにとって見やすく、扱いやすいとされています。

今回の内容は、私がFigmaでマテリアルデザイン制作の際に参考にしていたサイトのまとめです。ご参考にしていただければ幸いです。( ほぼ備忘録のようなものです。ご了承ください。)

Mat

もっとみる
Figmaでよく使うショートカット

Figmaでよく使うショートカット

こんにちは。UIデザイナーのカヒブンです。

UIデザインする時にショートカットを使うと、効率良く時間をかけずに作業をすすめられますので、今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒にFigmaでよく使うショートカットを学んでみました。

今回の内容は、Figmaを操作しながら学ぶとわかりやすいので、下記のFigmaリンクを参考にしていただければ幸いです。

もっとみる
実装しやすいFigmaファイルの作り方

実装しやすいFigmaファイルの作り方

こんにちは。UIデザイナーのカヒブンです。

UIデザイナーとして、見た目が綺麗、ユーザーの使いやすい画面を設計するだけではなくて、実装のしやすさ・工数も考えた上で設計するのが大事です。今回は実装しやすいデザインデータの作り方ついて話したいと思います。

ここでは、私がFigmaを使う際、実装側の立場に立って考える癖を説明します。

実装しやすいデザインデータ・レイヤーがGroupだらけではない。

もっとみる
UIの状態について

UIの状態について

こんにちは。UIデザイナーのカヒブンです。

今回はUIの状態について話したいと思います。

UIデザイナーにありがちな間違いは、理想的な状態のユーザーインターフェースだけを作ることに集中してしまうことです。すべてが整えられたコンテンツで構成されると、デザインするのは簡単です。 しかし、UIの状態を設計するのは決して簡単ではありません。多くのユーザーは、データが欠落していたりエラーが発生したりとい

もっとみる
デザトレ!之Aurora UI

デザトレ!之Aurora UI

今天我将用中文与大家分享一期デザトレ! (Design training)

你可能会问什么是 「デザトレ! 」,这是Goalist设计团队每周一次一小时的设计训练,届时团队成员之间分享彼此的技能、知识和想法。每周我们都会轮流安排「デザトレ! 」的训练内容,并促使会议顺利进行。

今天我将和大家分享这周我们「デザトレ! 」的主题 : Aurora UI。

2007年一度盛行的高度材质化的拟物化

もっとみる
【Linkedin】魅力的な機能のUXUIデザイン考察

【Linkedin】魅力的な機能のUXUIデザイン考察

こんにちは。UIデザイナーのカヒブンです。
今回はLinkedinの第三弾ー求人以外で魅力的な機能のUXUIデザインを見ていきたいと思います。

前回の記事はこちらです。

LinkedInは他の求人サイトと比較すると、単なる求人情報サイトではなく、実名で登録するビジネス向けSNSサービスであることが特徴的です。

特徴① つながり機能

自分がつながっているユーザーのことを、Facebookでは

もっとみる
【Linkedin】会員登録フローでのUXUIデザインの考察

【Linkedin】会員登録フローでのUXUIデザインの考察

こんにちは。UIデザイナーのカヒブンです。
前回のLinkedin求人検索のフローの記事に引き続き、今回はLinkedinの会員登録フローについて見ていきたいと思います。

前回の記事はこちらです。

Linkedin会員登録のユーザーフロー

特徴① LPのファーストビューという一番目にしやすい場所に会員登録のボタンを設置しています

Linkedinを知っているユーザーが多いと思いますので、L

もっとみる
【Linkedin】UXUIデザインの考察

【Linkedin】UXUIデザインの考察

こんにちは。UIデザイナーのカヒブンです。
今回のUXUIデザイン考察の対象はLinkedinです。

Linkedinとは?
アメリカ生まれのビジネス向けSNSの1つで、企業向けの採用機能があり、ユーザーが求人を探せる機能もあります。

「求人」はLinkedinのユーザー向けの主要機能なので、求人検索のフローについてのUXUIデザインを考察したいと思います。
下記の図は求人を検索するときのユー

もっとみる