Yusuiのデザイン情報共有｜Yusui Hoshino

固定された記事

おもちゃ箱のようなアプリBaaaaのUI/UXが凄すぎた件

【はじめに】この記事はBaaaaと何の関係もないただの学生（25卒）が執筆しています。【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。【感動した5ポイント】1.UIのサイズが激しく変化する下部にあるフッターナビゲーションの大きく

優しいシンプルな世界pixivのUI/UX分析

【はじめに】この記事はpixivと何の関係もないただの学生（25卒）が執筆しています。【pixivとは】作品の投稿・閲覧が楽しめるイラストコミュニケーションサービス。簡単に言うとプロアマ関係なくイラストと漫画と小説が楽しめる。 ※ 今回はpixivのiOSアプリを主に話すが、pixivはウェブ版の方が機能が豊富でデザインとしても完成されている印象である。したがって、iOSアプリのデザインは改善中のものも多いと考えられ、釈迦に説法状態になることを許してほしい。 ※ プライ

日記アプリに必要なデザインはInDesginにあり

この記事は第1回 SandboxデザインLTで話した内容と同じです。最近の悩み、日記が書けない日記の効果は理解しつつも、全然続かない。ツールも以下のものを触ってきたが、結局数週間で辞めてしまうことが多かった。 Notion Scrapbox Day One 紙の日記帳日記に欲しい３要素原因を考えた際に、私が日記を続けるには３つの要素、機能が必要だと考えた。デジタルアプリであることサボった記憶をできるだけ忘れさせること過去の内容を感じられることそ

Reflective UIについての雑記

Reflective UIについて考えをまとめていたら長くなったので、noteにまとめてみた。先に白状すると、技術的側面は1mmもない。深夜テンションで思いつきで書いているので、ところどころ定義が間違っていても許して欲しい。 Reflective UIとは？こちらの神記事をどうぞ。なぜ今か？Reflective UIが最近考案された理由としては3つあると思っている。技術発展によって実装のハードルが下がった（分野外なので略）概念モデルが追いついた逆張り

Zliポスターテンプレ集

2023年初めに星野(s127)が会津大学Zliサークル用にポスターテンプレのFigmaのファイルを公開しました。この記事はそのファイルの説明や利用規約などをまとめたものです。内容としては以下のポスター21枚が含まれています。また、ポスター制作の心構えやFigmaのTipsについてはこちらのnoteにまとめたので、ぜひご覧下さい。利用方法ファイル自体は以下のリンクに進み「Get a copy」で入手できます。大人数で共同編集をする場合は、その後Teamsを作成

Figmaでポスターを作るときのTips集

2023年初めに星野(s127)が会津大学Zliサークル用にポスターテンプレのFigmaのファイルを作り、公開しました。この記事は、その制作過程で利用したTipsについてまとめたものです。 Zliに関係ない方も、Figmaの表現を広げるTipsがたくさんあると思うので、ぜひご覧ください。また、ポスター制作の心構えについては別の記事に書いています。 Figmaでポスターを作るメリットデメリット- メリット無料で利用できるロゴ作り、画像編集などできることが多い

ポスター制作の心構え

2023年初めに星野(s127)が会津大学Zliサークル用にポスターテンプレのFigmaのファイルを作り、公開しました。この記事は、上記のテンプレートを改変する上で参考になりそうな、初心者向けにポスター制作をする人へ向けた心構えなどについて話す記事です。より具体的なFigmaでポスターを作る際のTipsはこちらをご覧ください。ツール大体以下のようなツールでポスター制作を行います。レベル1（入門者）パワポ、keynoteなどのプレゼンテーション作成ツール

UIのLTR（左から右）の流れ

UIのLTRはよくある話題ですが、実際に自分でやってみて面白かったので、残った疑問点などと共に話したいと思います。ちゃんとしたまとまった資料が欲しい人はHIGのLTRのページを見てください。この記事はほとんど同じことしか書いてません。 UIに見えるLTRの流れUIをデザインするとき、UIを置く場所に悩んだことはありませんか？この時によく利用される考え方がLTR（Left to Right）です。例えば以下のような形で、UIにLTRの流れを見ことができます。ボリュー

Figmaの共同デザイン手法

最近、アプリのデザインを二人で行う機会があった。その時に作ったルールを紹介する記事。前提プラン：無料デザイナー：複数人ページ構成 DesginSystem：デザインシステム Layout：画面デザイン Other：元のデザイン、ロゴ、Prototypeなどこの手法のメリットタスクの担当を明確にできるデザインを評価し合える素材の処理方法などに一定のルールを持てる補足ペアデザインとは別かんばんボード今回はかんばんボードを自作した。理

デザイン系アプリの学習方法

最近新しいソフトを連続で利用した。思えば会津大学にいるにも関わらず、プログラミング言語よりアプリを触ることの方が多かった気がする。したがって、今回はアプリの習得についてアドバイスや考え方について適当に書く記事。習熟度まずはアプリの習熟度について、個人的に次の段階があると思っている。レベル0:わけわかめ拡大したいけど、その機能あったっけ？レベル1: 機能があることを知っているオブジェクトを拡大する機能どっかにあったはずなんだけどなーレベル2: 機能を実行

Figmaで動くスライド作り

Figmaでスライドを作る記事はたくさん投稿されています。ただし、最終目標がpdf出力のものが多く、アニメーションやVariantsの利用方について解説している記事はあまり見かけません。今回は、それらの機能を中心に解説します。対象者 Figmaの基本的な機能が使える人 Prototype、Variants pdfを捨てられる人スクロールFigmaではスライド内に複数スクロールする要素を含められます。スライド自体も上記の条件に当てはまればスクロールしたり

Figmaを初めて触るエンジニアへ

Qiitaからのお引越し記事です。（元記事）私MonoのFigmaファイルを初めて触るエンジニアに最低限の機能を教える記事。他のFigmaファイルに対しても8割くらいは応用が効く内容になっていると思います。心構え開発 >> デザイン特にハッカソンでは、技術がメインで評価されます。デザインに時間がかかって動かないプロダクトを作るよりは、全てデフォルトコンポネントでダサいけれど動く物を作る方ががマシだと思ってます。デザイナーは実装の大変さを分かってない

知識ゼロのためのUIデザイン学習ロードマップ

知識ゼロの人が「とりあえずUIデザイナーにならないと死ぬ！何すればいんだぁああ？」って突撃してきた時に渡すための文章。初歩的なことしか書いていないが、だからこそ1人だけでも進められ、無駄にならない内容が多いと思う。対象者：UIデザイナー知識ゼロ必要なもの：PC、3235円 ※以下の内容について「（）」はオプションです。上の必要なお金には含まれていません「1day」などで表される必要時間は、1日丸々使った場合の想定ですマインドややり方よりも、具体的に何を

チームメンバーが理解しやすいFigma構成

この記事ではDesin Systemの構築方法やCanvasへのデザインの配置方法について解説します。 Figmaの機能やDesgin Systemの記事は結構noteでも見かけます。しかし、Figmaファイルの全体の構成を説明している記事が少なかったので、自分流をまとめてみました。全て無料プランで行える内容になっているので、ビギナーの人も是非読んでみてください！また、以下で説明するファイルのテンプレートを無料公開しています。ぜひ利用してみてください！ファイルについ

Yusuiのデザイン情報共有

記事一覧