#UIデザイン

アプリのデザインをする際に、他サービスの設計を参考にしたり、競合アプリを調査したりといった作業は多くのデザイナーが日々行なっている作業だと思います。多くの場合は自身のデバイスにアプリをインストールして確認するものの、サブスクリプションや商品の購入など、実際に課金しないと確認できない画面があったり、スクリーンショットを撮って共有したいけど個人用のアカウント名が表示されてしまったりなど、意外と面倒なこの作業...今回はこのような悩みを解決してくれるアプリデザインのキュレーションサイトを紹介します。日

1冊10分で読める本の要約を提供するサービス「flier（フライヤー）」。1日1冊以上のペースで要約を配信し、テキストと音声で利用できる。会員数は、個人・法人をあわせて累計124万人超え（2025年4月現在、無料会員を含む）。運営するフライヤー社（東京都千代田区）は2025年2月に東京証券取引所グロース市場へ新規上場したばかりと、勢いに乗っている。コスパ・タイパの意識が高い現代人に好まれているflierだが、どんな体験設計やデザインが心地よさや利便性につながっているのか。デザイナーの筒井大尊氏に

インタラクションの制御に関する実装はユーザー体験に大きく影響するものの、デザインファイルやプロトタイプ上で表現することが難しく、システムの挙動を細かくデザイナーとエンジニアで調整するようなことも多いかと思います。しかし、このような時に取り入れられる技術的な実装パターンには名前がついていることも多く、デザイナーが実装パターンの名前を知っているだけでエンジニアとのコミュニケーションがスムーズになることも多いのではないでしょうか？今回は、そんなちょっと技術的だけど知っておくだけで役立つコンセプトからイ

デザイナーの皆さんは、MacでUSキーボードと日本語キーボードのどちらを使っていますか？USキーボードには、ひらがなの印字がなく見た目がシンプルなのでそちらを使っているという人も多いかもしれません。ただこのUSキーボードで日本語入力を使うと直面するのが、「入力言語切り替えが使いにくい」という問題です。日本語キーボードでは、スペースキーの両隣に「英数」と「かな」キーがあり、ユーザーは「左が英語で右は日本語」として記憶することができます。一方、USキーボードで入力言語を切り替えようとすると『comm

オブジェクトに対する操作を中心にユーザー体験を設計するOOUX（Object Oriented UX）と呼ばれる手法はUXデザインの世界で広く知られるようになってきたように思います。しかし、オブジェクトを意識してデザインしていても、「気づいたら途中からユーザーアクション主導の作り方になっていた」というケースもよくあります。デザイナー的な視点では「これって本当にオブジェクト化できるのだろうか？」という疑問が浮かんできたタイミングがこれに当たりそうです。これは、OOUXの主軸となる「オブジェクトマッ

SNSのポストやバナー画像、またはOGP画像の作成時など、突然モックアップ画像が欲しくなる時ってありませんか？時間をかけて取り組める場合は、テンプレートを探してPhotoshopで作ったり、Artboard Studioなどの専用ツールを使ったりすると思います。しかし、あまり時間をかけたくない場合は新しいツールの導入やログインをせずにモックアップ画像が作れると良いですよね。今回紹介する『Smartmockups』は、無料かつ登録不要でモックアップ画像を自動作成、ダウンロードできるWebサービスで

UIデザインやプロトタイプ、またはペルソナシートを制作している時に、「人の顔写真を使いたいけど、権利的に問題のない写真を探すのが大変だし、自分の写真を使うのはちょっと...」という場面はよくありますよね。『UI Faces』はその名の通り、UI上で使用することを想定したダミーのアバター用顔写真を提供しているWebサイトです。すべての画像がAI生成されているため、写真の人物は実在せず肖像権の問題を気にせず使えることが大きな利点です。UI Facesに掲載されているAI生成画像は、すべて個人用・商用

アプリやWebサイトのデザインにはたくさんの画面や想定しなくてはいけない動作があって、いつも「何か忘れていないかな？」と不安な気持ちになります。継続的にチームに参加してプロダクトデザインを行う場合は開発チームとのやり取りの中で足りないデザインを追加していくようなことも多いでしょう。しかし、プロジェクトによっては、一旦全画面作って納品しなくてはいけないような場合もありますよね。このような時に、どうしても制作の優先度が低く、デザインするのを忘れられがちな画面や挙動があります。そして、そのような細かな

『小紅書（RED）』とは、買い物やライフスタイルに興味を持つ若いインターネットユーザー向けのモバイルアプリケーションです。サービスのコンセプトは、「ユーザーがプロダクトを通じて、世界中の良いものを発見することができること」であり、インフルエンサーの投稿を閲覧したり、商品を使用した感想を共有し合うこともできます。また、アプリ内には、ショッピング機能もあるため、気に入った商品を購入することができ、RED一つのプロダクトで「発見 → 交流 → 購入」という一連の体験ができます。REDは、コスメ、メイク

UIデザインとは、ユーザーがサービスをスムーズに使い、その価値を最大限に享受できるようにプロダクトの設計をすることを意味します。特に、アプリやWebサービスなどのプロダクト自体がサービス提供者とユーザーをつなぐ接点となるITサービスでは、いかにUIデザインを最適化するかがビジネスの成否に直結する重要なポイントとなっています。UIとは、User Interface（ユーザーインターフェース）の略称です。インターフェースには、「接点」と言う意味があり、UIとはユーザーと製品とのすべての「接点」のこと

アフォーダンスとは、簡単にいうと物と人間の間に生まれるインタラクションの可能性のことを意味します。アメリカの知覚心理学者ジェームズ・ギブソン（James Gibson）の唱えた「アフォーダンス理論」において定義された言葉で、この理論の中でジェームズ・ギブソンは「物や空間自体が人間の行動を引き出すような特性を持っている」と主張しています。こうして引き起こされる可能性のある行動の全てをアフォーダンスと呼びます。例えば、ボールペンと人間のあいだに存在するアフォーダンスは、文字を書く紙に穴を開ける背中を

デザインシステムとは、ブランドと顧客のタッチポイントにおけるデザイン表現をルールやコンポーネントとして再利用可能な形で体系化したドキュメントで、一貫性を持ったブランド表現を提供するために用いられます。デザインシステムには、デザイン原則、スタイルガイド、デザインコンポーネントなどが含まれ、包括的にブランドのデザイン表現を定義したものとなります。また、デザインシステムは組織のデザイン文化そのものを示すものでもあります。プロダクトに関わるすべてのメンバーが、デザインシステムを共通言語として理解し、活用

この記事では、商用利用可能な無料で使えるアイコン素材配布サイトをご紹介します。その中でも以下のような条件で選定しています。UIデザインに必要なアイコンが網羅されているモダンで視認性が高いデザインアイコンのデザインが統一されているFigmaで利用しやすい（Figmaプラグインやコミュニティファイルが提供されている）アイコン素材の入手方法として、ローカル環境にダウンロードできるだけでなく、SVGのコードとしてコピーできるサイトや、CDNで読み込んで使えるサイトなど幅広い用途に対応できる配布サイトを厳

インタラクションデザイン（IxD）とは、ユーザーの操作に対応したプロダクトの動きや反応の設計のことを意味します。主にITサービスのデザイン分野で使われる言葉で、ユーザーの操作に対してコンピューターが適切な反応を返すように設計することが、ユーザービリティの向上やユーザー体験の最適化につながります。では、そもそも「インタラクション」とはどういった意味を持つのでしょうか？英語でインタラクション（Interaction）とは、「相互作用」といった意味の言葉です。例えば、”Interaction betw

メタファーとは、直訳すると「隠喩」と言う意味です。UIデザインの世界では、現実世界に存在する物体や概念を平面的なデザインとして表現するときに、そのままの形で表現するのではなく、元となる物体が「連想されるような形」で表現します。例えば、オンオフを切り替えるためのスイッチUIは現実世界のスイッチを連想させような形でデザインされています。これは、初めてUIを使うユーザーであっても、現実世界でスイッチを使った経験からUI上のスイッチの役割を推測できるようにという思想で設計されています。特に前述したような

UIとは、User Interface（ユーザーインターフェース）の略称です。インターフェースには、「接点」と言う意味があり、UIとはユーザーと製品とのすべての「接点」のことを意味します。具体的には、ボタンやフォント、ナビゲーションなどのユーザーがサービス利用時に目にするもの、操作するものすべてをUIと呼ぶことができます。ユーザーはソフトウェアの利用時に大きく分けて「インプット（入力）」と「アウトプット（出力）」という２つの動作をおこなっています。コンピューターに対して命令をするのがアウトプット

プレゼン資料やポートフォリオサイトなどで、自分がデザインしたアプリやWebサイトをカッコ良く見せたいときってありませんか？グラフィック表現が得意だったり、3Dデザインツールでパッケージデザインの経験がある方なら「AdobeのPhotoshopやDimensionで作れるよ！」という人もいるかもしれません。しかし、UIデザイナーの中には「基本Figmaしか触っていないし、Photoshopのテンプレートを探すのもPhotoshop開くのもちょっとめんどくさい」という人も多いのではないかと思います。