マガジンのカバー画像

UI/UX

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

記事一覧

デザインに活かせるフレームワーク20

デザインに活かせるフレームワーク20

久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。
有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。

(ちなみにここでいう「フレー

もっとみる
デザイナーのための『Every Layout』〜真に汎用的なレイアウト設計を目指して

デザイナーのための『Every Layout』〜真に汎用的なレイアウト設計を目指して

最近読んだ本の中に、『Every Layout─モジュラーなレスポンシブデザインを実現するCSS設計論』という一冊があります。ウェブにおける汎用性や拡張性について、私自身が日頃から考えていたことが言語化されており大変感銘を受けましたので、今回本noteでは内容を紹介がてら私なりの考察を述べてみたいと思います。

本書はウェブサイト「Every Layout」の内容を日本語版として翻訳したもので、C

もっとみる
『はじめよう! 要件定義』(とそのシリーズ)を読んで、はじめよう!UIデザイン

『はじめよう! 要件定義』(とそのシリーズ)を読んで、はじめよう!UIデザイン

繰り返し読んでいるマイ・フェイバリット技術書に『はじめよう! 要件定義 ~ビギナーからベテランまで』とその姉妹本『⁠はじめよう! プロセス設計 ~要件定義のその前に』『はじめよう! システム設計 ~要件定義のその後に』の、通称「はじめよう!シリーズ3部作」があります(羽生章洋さん著)。

『はじめよう! 要件定義 ~ビギナーからベテランまで』はそのタイトル通り、ソフトウェア開発に携わるエンジニアや

もっとみる
「北欧、暮らしの道具店」のメルマガをABテストで改善した話

「北欧、暮らしの道具店」のメルマガをABテストで改善した話

こんにちは。デザイナーの白木です。
前回はクラシコムのUXリサーチについてお話しましたが、今回は「北欧、暮らしの道具店」のメルマガをABテストの手法を使って改善した話をしたいと思います。

「北欧、暮らしの道具店」通常のメルマガは商品紹介がメインですが、それとは別に当店のアプリを紹介するメルマガも配信しています。
これまではメルマガ登録者全員に配信していたのですが、その中にはアプリをすでにご利用い

もっとみる
Goodpatchの先輩デザイナーに聞いた!UIのフィードバックをする時の観点って?

Goodpatchの先輩デザイナーに聞いた!UIのフィードバックをする時の観点って?

こんにちは。株式会社グッドパッチの21卒UIデザイナーの平尾です。

グッドパッチの新卒として、デザインを作る際にたくさんのフィードバックをいただく機会があります。今回はグッドパッチの先輩デザイナーがUIに「フィードバック」をする時の観点をまとめてみました。

フィードバックをする方はもちろん、UIを作る上で大事な観点がまとまっているので、UIデザイナーの方は是非読んでいただけると嬉しいです。

もっとみる
はじめまして、ヒラギノフォント公式noteです

はじめまして、ヒラギノフォント公式noteです

はじめまして、私は「ヒラギノフォント」を株式会社SCREENグラフィックソリューションズで担当している、正木(まさき)と申します。

私は日々お客様のフォントにまつわる課題解決に携わりながら、「もう一歩だけフォントを知っていただけたら何倍も良くなるのに…!」と感じるシーンが多々あります。 これはフォントに携わる人が常々感じていることだと思います。

例えば街中や映像、ウェブで見かける案内や広告

もっとみる
ProtoPieでつくるUIアニメーション

ProtoPieでつくるUIアニメーション

【ProtoPieとは?】ProtoPie とは、デザイナー向けに開発された、コードレスで簡単にプロトタイプが作成できるモックアップツールです。非常に簡単に素早く作れることから、” Prototyping as easy as PieProtoPie ” が ProtoPie の名の由来にもなっているようです。

ProtoPie 公式より [ https://www.protopie.io/

もっとみる
ProtoPie(プロトパイ)を始める。横スクロール編

ProtoPie(プロトパイ)を始める。横スクロール編

アニメーションモックはAfterEffectsの一択だったんですが、もう少し視野を広げてみようかなと思いこのプロトパイを始めてみました。

プロトパイのサイトにはチュートリアルやDEMOがとても豊富です。
まず何を作るのか?という発想が邪魔をするのでDEMO版の動きを自分なりに分解してみました。

この横スクロールUIを真似したいと思います。
理由はフェードアウトの箇所がどのような作りになっている

もっとみる
UIデザイナーがSwiftを学んでUIを実装したら生産性が爆上がりした

UIデザイナーがSwiftを学んでUIを実装したら生産性が爆上がりした

まいど〜。dely株式会社(レシピ動画アプリ「クラシル」を作っている会社)でUIデザイナーをしているうっくんです。

この記事は毎年恒例の「dely #1 Advent Calendar 2020」の10日目の記事です。やっていくぜ!ウェイウェイ!(今年入社したので、まだノリがわかっていない)

昨日はnozaさんの良いレシピ検索体験とは?"選ばれた"を考えた話でした!

nozaさんはAndro

もっとみる
ProtoPieで作る本格プロトタイプ作品7選!

ProtoPieで作る本格プロトタイプ作品7選!

以前、ProtoPieというプロトタイピングツールを紹介しました。

Figmaに関するnoteと比べて反響が弱かったので、今回は少し違ったアプローチでnoteを書いてみようと思います。

Figmaと比べて利用人口が少ない上に、ツールの特性上、Figmaより流行る可能性はほぼ0なので、ProtoPieの使い方を説明するより「こんなことできるんだぜ」っていう内容の方が良いのではと思いました。

もっとみる
いい感じのUIアニメーションを実装する技術

いい感じのUIアニメーションを実装する技術

こんにちは。UXエンジニアのしげたです。クックパッドでたべドリをつくっています。

UIの実装が好きで色々つくってきました。その経験から、いい感じのUIアニメーションを実装する技術を書いてみます。主にiOSアプリをつくってきましたが、他のプラットフォームでも使える知識だと思います。

※以下、gifアニメを多く貼っていますが、アプリをインストールして実機で見た方がよりわかりやすいのでオススメです。

もっとみる
ProtoPieと向き合ってみたら気づいた魅力

ProtoPieと向き合ってみたら気づいた魅力

はじめにこの記事は Goodpatch Design Advent Calendar 2020 17日目の記事です。(遅れての投稿になります...すみません...!)

こんにちは、UIデザイナーの安川です!
今回はアニメーション初心者だった私がProtoPieで触れるプロトタイプを作り、感じたことを記事にしようと思います。

アニメーションを作った経験がなかった私が一週間使ってみてProtoPi

もっとみる
リモートユーザテストにも活用できる!ProtoPieのススメ

リモートユーザテストにも活用できる!ProtoPieのススメ

「Airレジ ハンディ」と「Airレジ ハンディ」の「セルフオーダー」でプロダクトデザイナーをしている高橋 朋子です。

2020年5月、「Air ビジネスツールズ」のプロダクトデザイナーが所属するグループで、プロトタイピングツールであるProtoPieを導入しました。

この記事では、ProtoPieの概要や、「Airレジ ハンディ」ではリモートでのユーザテストなどに利用しているので、Proto

もっとみる
「FELISSIMO RECRUITING 2021」リクルートサイトのつくりかた

「FELISSIMO RECRUITING 2021」リクルートサイトのつくりかた

Webサイトの制作方法を実例でご紹介する「Webサイトのつくりかた」シリーズの第三弾!ということで、今回は「FELISSIMO RECRUITING 2021」リクルートサイトのつくりかたをご紹介します。

01.概要

フェリシモは1965年創業の大手通販会社です。商品のほとんどがフェリシモオリジナルで、便利な日用品から一風変わったキャラクターグッズや手習いキットなど幅広くかつ数多くの商品を取り

もっとみる