カヒブン

UIデザイナー👀

カヒブン

UIデザイナー👀

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

今回は2023年6月22日に開催されたFigmaが主催するイベント「Config 2023」で発表された。今週のデザトレ（弊社のデザイン部で毎週行われているデザイン勉強会）でチームと一緒にFigmaのオートレイアウトについての新機能ついて学んでみました。 Wrap（折り返す）： フレームを縮小すると、オートレイアウト（Auto layout）という自動的にコンテンツを整列させる。 Min/Max (最小幅と最大幅)： レスポンシブ対応などでフレームが決められた幅よりも小さ

カヒブン

    • 完璧な段落（行の長さ・フォントサイズ・行間）をデザインしましょう〜！

      こんにちは。UIデザイナーのカヒブンです。 今週のデザトレ（弊社のデザイン部で毎週行われているデザイン勉強会）でチームと一緒に「完璧な段落をデザイン（行の長さ・フォントサイズ・行間）」の作り方について学んでみました。 行の長さ 非常に長い行の文章を読むときに、目が疲れちゃいますので、改行によって提供される一定の休止を必要としています。次の行に移るときに、短い間ができるのです。短くても、長く続けるには十分な長さです。それは、常にフルパワーで動いているわけではないエンジンが

      カヒブン

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

        こんにちは。UIデザイナーのカヒブンです。 最近転職サイトの採用担当者向けの管理システムを使う機会があり、より良い転職サイトのデザインについて考えてみました。 先月は Green（転職サイト）の「アプローチ管理画面」をリデザインして、今月は「求職者検索画面」のUIを改善してみました。 リデザイン前 リデザイン後 リデザイン前と比較してどうでしょうか？実際に作成したUIの解説を見ながらポイントをまとめていきます。 ポイント1 構造 より効率的に求職者を検索するために

        カヒブン

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

          こんにちは。UIデザイナーのカヒブンです。 今週のデザトレ（弊社のデザイン部で毎週行われているデザイン勉強会）でチームと一緒にスキルマップを作成しました。この一年に新しいメンバーが増えたので、改めてお互いを知る機会にしてみって、共通点を探したいと思います！ スキルマップとはやったこと/次にやってみたいことをLIKE / HATE / GOOD / WEAK（スキ・キライ・得意・苦手）という4つの軸とその重複部分に分類していきます。 参考はこちらです↓↓↓ 今回の目的以

          カヒブン

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

        カヒブン

          Greenをリデザインしてみた

          こんにちは。UIデザイナーのカヒブンです。 最近転職サイトの採用担当者向けの管理システムを使う機会があり、より良い転職サイトのデザインについて考えてみました。一つの事例として、実際に Green（転職サイト）のアプローチ管理画面ををリデザインして、UIの改善をやってみました。 リデザイン前 リデザイン後 リデザイン前と比較してどうでしょうか？実際に作成したUIの解説を見ながらポイントをまとめていきます。 ポイント1 構造 既存のデザインでは、人事がある職種の選考状

          カヒブン

          Greenをリデザインしてみた

          カヒブン

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

          こんにちは。UIデザイナーのカヒブンです。 皆さんAnt Designが知っていますか？ 中国のAlibabaが開発したUIフレームワークです。日本だとMaterial UI(MUI)がメジャーでよく使われています。 今回はAnt Designを使ってダッシュボードを作ってみました。 新型コロナウイルス感染症情報について架空のダッシュボードを作りました。このダッシュボードを作るために、Ant Designで下記のコンポーネントを参考してみました。 ✨Layout A

          カヒブン

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

          カヒブン

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

          こんにちは。UIデザイナーのカヒブンです。 今週のデザトレ（弊社のデザイン部で毎週行われているデザイン勉強会）でチームと一緒にデザインシステムの中に「Text Style」「Color Style」「 Effect Style」の作り方について学んでみました。 デザインシステムの定義 目的：効率的でまとまりのあるプロダクト開発・運用。 用意するもの：Figmaを利用する上で、「Text Style」「Color Style」「Component」などの機能を活用すると作

          カヒブン

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

          カヒブン

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

          こんにちは。UIデザイナーのカヒブンです。 最近は求人サイトのUIデザインを制作しています。求人サイトの参考を探すときに、日本のサイトの求人コンテンツは決まっていますが、海外のサイトの求人コンテンツは決まっていないことに気づきました。 今回は日本と海外の求人コンテンツを考察していきたいと思います。 まずは日本の求人サイトです。 マイナビ エン転職 タウンワーク 日本の求人サイトをまとめてみました。求人詳細画面のコンテンツには 「仕事内容」「対象となる方」；募集要

          カヒブン

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

          カヒブン

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

          こんにちは。UIデザイナーのカヒブンです。 マテリアルデザインとは、Googleが推奨するデザインの一種です。マテリアルデザインで作成されたWebサイトは、ユーザーにとって見やすく、扱いやすいとされています。 今回の内容は、私がFigmaでマテリアルデザイン制作の際に参考にしていたサイトのまとめです。ご参考にしていただければ幸いです。（ ほぼ備忘録のようなものです。ご了承ください。） Material Design 2 Material Design 3（ 最新 ）

          カヒブン

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

          カヒブン

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

          こんにちは。UIデザイナーのカヒブンです。 UIデザインする時にショートカットを使うと、効率良く時間をかけずに作業をすすめられますので、今週のデザトレ（弊社のデザイン部で毎週行われているデザイン勉強会）でチームと一緒にFigmaでよく使うショートカットを学んでみました。 今回の内容は、Figmaを操作しながら学ぶとわかりやすいので、下記のFigmaリンクを参考にしていただければ幸いです。 最後に、弊社のデザイン部の他の方々が担当された回のデザトレも以下のリンクから見れま

          カヒブン

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

          カヒブン

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

          こんにちは。UIデザイナーのカヒブンです。 UIデザイナーとして、見た目が綺麗、ユーザーの使いやすい画面を設計するだけではなくて、実装のしやすさ・工数も考えた上で設計するのが大事です。今回は実装しやすいデザインデータの作り方ついて話したいと思います。 ここでは、私がFigmaを使う際、実装側の立場に立って考える癖を説明します。 実装しやすいデザインデータ・レイヤーがGroupだらけではない。レイヤーがきちんと整理されている ・ローカルコンポーネントが一ヶ所にまとめてあ

          カヒブン

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

          カヒブン

          UIの状態について

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

          カヒブン

          UIの状態について

          カヒブン

          デザトレ！之Aurora UI

          今天我将用中文与大家分享一期デザトレ! (Design training) 你可能会问什么是 「デザトレ! 」，这是Goalist设计团队每周一次一小时的设计训练，届时团队成员之间分享彼此的技能、知识和想法。每周我们都会轮流安排「デザトレ! 」的训练内容，并促使会议顺利进行。 今天我将和大家分享这周我们「デザトレ! 」的主题 : Aurora UI。 2007年一度盛行的高度材质化的拟物化设计风格在目前来看，不仅在视觉上显得过重，而且相应会导致极高的设计和开发成本。然

          カヒブン

          デザトレ！之Aurora UI

          カヒブン

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

          こんにちは。UIデザイナーのカヒブンです。 今回はLinkedinの第三弾ー求人以外で魅力的な機能のUXUIデザインを見ていきたいと思います。 前回の記事はこちらです。 LinkedInは他の求人サイトと比較すると、単なる求人情報サイトではなく、実名で登録するビジネス向けSNSサービスであることが特徴的です。 特徴① つながり機能 自分がつながっているユーザーのことを、Facebookでは友達と呼びますが、LinkedInでは「つながり（Connections）」と呼

          カヒブン

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

          カヒブン

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

          こんにちは。UIデザイナーのカヒブンです。 前回のLinkedin求人検索のフローの記事に引き続き、今回はLinkedinの会員登録フローについて見ていきたいと思います。 前回の記事はこちらです。 Linkedin会員登録のユーザーフロー 特徴① LPのファーストビューという一番目にしやすい場所に会員登録のボタンを設置しています Linkedinを知っているユーザーが多いと思いますので、LinkedinのLPではあまり紹介コンテンツを設定せずに、会員登録ボタンをファー

          カヒブン

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

          カヒブン

          【Linkedin】UXUIデザインの考察

          こんにちは。UIデザイナーのカヒブンです。 今回のUXUIデザイン考察の対象はLinkedinです。 Linkedinとは？ アメリカ生まれのビジネス向けSNSの1つで、企業向けの採用機能があり、ユーザーが求人を探せる機能もあります。 「求人」はLinkedinのユーザー向けの主要機能なので、求人検索のフローについてのUXUIデザインを考察したいと思います。 下記の図は求人を検索するときのユーザーフローです。 特徴①プロフィールに基づいておすすめ求人の掲載あり 検索し

          カヒブン

          【Linkedin】UXUIデザインの考察

          カヒブン