マガジンのカバー画像

#Goalist Design

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

#UI

UIデザインのヒントから学ぶ

UIデザインのヒントから学ぶ

私がUX/UIデザイナーであることの興味深い点の1つは、参加したプロジェクトごとに新しい知識をもたらしてくれることです。カードやレイアウト、色などのデザインには慣れているかもしれませんが、それぞれのプロジェクトで新しい課題が生じ、新しい解決策を探さなければなりません。新しい問題に直面するたびに、パニックになり、ウェブサイトを検索して解決策を探します。問題を解決してくれる記事を見つけたときは、とても

もっとみる
デザインをより清潔で忙しさを減らす方法

デザインをより清潔で忙しさを減らす方法

最近取り組んだプロジェクトのほとんどは、情報が重要なウェブサイトの採用に関するもので、ウェブサイトの最も重要な要素は情報です。情報の量が多すぎて、UIに表示するのが難しいという課題が常にあります。この問題は、デザインが見た目が混雑していて重たく見える原因となります。ユーザーの視点からすると、UIが良くなければ、情報の海の中で迷ってしまうかもしれません。そこで、私は独自の経験からいくつかの考えをまと

もっとみる
UIデザインプロセス

UIデザインプロセス

今日は私の過去の「デザトレ!」について共有したいと思います。今回は「クリエイティブプロセス」と「UIデザインプロセス」の2つのトピックに分けて記事にしました。では、詳細を見ていきましょう。 皆さんもこの中から有益な情報を見つけていただけると嬉しいです。

クリエイティブプロセス

「私に木を切らせてくれ、最初の4時間は斧を研ぐことに使わせてくれ。」― アブラハム・リンカーンの有名な言葉の一つが、ど

もっとみる

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

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

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

Min/Ma

もっとみる
UI デザイン: テキスト フィールド

UI デザイン: テキスト フィールド

こんにちは、Duyです😎。2回目のnote投稿になります。
今回は、UI 経験、特に入力フィールドについて共有したいと思います。 ご存知かもしれませんが、UI業界は知識が秒単位で更新される大規模な業界です。なので初心者のUIデザイナーを支援するために、入力フィールドの基本的なタイプをいくつか共有して、概要を理解できるようにしたいと思います。 この投稿を 2 つの部分に分けて説明します。入力フィ

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

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

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

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

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

Mat

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

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

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

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

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

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

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

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

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

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

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

もっとみる
Daily Cocoda!やってみた。 008 計算機アプリの計算画面

Daily Cocoda!やってみた。 008 計算機アプリの計算画面

こんにちは、マスダです。
Daily Cocoda!第8回は計算機アプリの計算画面です。

008 計算機アプリの計算画面

お題内容
誰向け:30代主婦
コンセプト:買い物や家計簿をつける時にさっと使える電卓アプリ
雰囲気:やさしい、あたたかい

計算機はアプリにしろ実物にしろ、四則演算くらいしか機能として使ったことないな〜。え、こんなに高機能なの、知らなかった!!
というのがこの計算機アプリの

もっとみる
Daily Cocoda!やってみた。 007 フードデリバリーアプリのリスト画面

Daily Cocoda!やってみた。 007 フードデリバリーアプリのリスト画面

こんにちは、マスダです。
Daily Cocoda!第7回はフードデリバリーアプリのリスト画面です。

007 フードデリバリーアプリのリスト画面

お題内容
誰向け:都内に住む会社員
コンセプト:食べたいものがすぐに見つかるフードデリバリーアプリ
雰囲気:明るい、おいしそう

みなさん、デリバリーって頼みますか?私は個人ではあまり頼まないですが、会社ではチームランチや全社ランチなどで出前館を使わ

もっとみる
Daily Cocoda!やってみた。 006 音楽アプリの再生画面

Daily Cocoda!やってみた。 006 音楽アプリの再生画面

こんにちは、マスダです。
Daily Cocoda! 6つ目のお題は音楽アプリの再生画面です。

006 音楽アプリの再生画面

お題内容
誰向け:音楽好きな働き盛りの20代後半の女性
コンセプト:ジャケットで選べる音楽アプリ
雰囲気:おしゃれ、落ち着いた

みなさん音楽って聞きますか?私はあまり聞かないんですね…。
聞くとしたらポルノグラフィティかゲームミュージックくらい。たまにSpotifyで

もっとみる
Daily Cocoda!やってみた。 005 アプリのアイコン

Daily Cocoda!やってみた。 005 アプリのアイコン

こんにちは、マスダです。
Daily Cocoda!第4回は天気予報アプリのアイコンです。

005 アプリのアイコン

お題内容
誰向け:高校生
コンセプト:毎日確認したくなるような天気予報アプリ
雰囲気:ポップ、たのしい

天気予報アプリ、私はずっとYahoo!天気のアプリを使っています。アプリをインストールしたきっかけは忘れましたが、雨雲レーダーも見れるし台風情報なんかも見れるのでとくに不満

もっとみる
Daily Cocoda!やってみた。 004 料理アプリの検索画面

Daily Cocoda!やってみた。 004 料理アプリの検索画面

こんにちは、マスダです。
Daily Cocoda!第4回は料理アプリの検索画面です。

今回のDaily Cocoda!は弊社のデザイン部メンバーが集まってデザトレ!の時間にもくもくしました。。デザトレ!というのはデザイントレーニングの略で、Sketchなどの知識共有をしたり、デザインメソッドを試してみたりとみんなで集まって勉強する時間です。週に1時間半業務とは直接関係しないことをしています。

もっとみる
Daily Cocoda!やってみた。 003 メッセージ画面

Daily Cocoda!やってみた。 003 メッセージ画面

こんにちは、マスダです。お久しぶりのDaily Cocoda!第3回目はメッセージ画面です。

003 メッセージ画面

お題内容
誰向け:20代半ばのビジネスマン
コンセプト:ビジネスシーンでも使えるチャットアプリ
雰囲気:きっちり、使いやすい

私の会社ではチャットワークというサービスを使っています。が、ふだんは何気なく使っているので、UIの観察なんかしたことがなかったです。

気をつけたとこ

もっとみる