はてなブックマーク

ニジボックス主催のイベント「BUSINESS & CREATIVE」では、毎回ビジネスとクリエイティブに関する現場発・最前線の情報を発信しています。第17回となる今回のイベントテーマは「Generative AI時代のUXデザイン」！ 今回はそもそもGenerative AIとは何かといった総論から実戦テクニックまで深くGenerative AIについて考えます。 引用元：『生成AI時代におけるUXデザイン | 生成AIをフル活用したUX設計手法＆生成AI時代のユーザー体験の変化について』 Generative AIの概要と進化 最初に梶谷さんからGenerative AIの全体像を簡単にお話しいただきました。 梶谷さんから見た「今」。歴史的転換点 引用元：『生成AI時代におけるUXデザイン | 生成AIをフル活用したUX設計手法＆生成AI時代のユーザー体験の変化について』 チャットGPT

スマホアプリのUIデザインを作成する際は、トレンドを押さえつつ、誰が見ても同じように理解できるよう意識することが重要です。誰もが直感的に使えるユーザビリティの高いアプリをデザインするためには、既存のUIデザインに目を通して参考にするのも一つの方法です。 この記事では、UIの概要や、スマホアプリのUIデザインで参考になるサイト、ツールなどを紹介します。スマホアプリのUIデザインを検討する際の参考にしてください。 UIとはサービスやデバイスとユーザーをつなげる接点 UIとは「User Interface（ユーザーインターフェース）」の略称で、自社のサービスやデバイスとユーザーをつなげる接点のことを指します。 WebサイトやアプリにおけるUIには、フォントやデザイン、レイアウトなどの見た目はもちろん、操作性なども含まれます。 UIと同時に語られることが多いものにUXがありますが、UXとは「Use

Webサイトのデザインやアプリデザインを考える際、どうデザインすべきか悩んでしまいがちなのが「UI UX」ではないでしょうか。「どう設計すれば良いUI UXになるのか分からない」「イメージはあるけどうまくデザインに落とし込めない」という方も少なくないでしょう。 そこで今回は、UI UXデザインやWebデザインの参考になるおすすめのサイトを38選紹介します。 ぜひ、自身の作りたいWebサイトやアプリデザインの参考にしてみてください。 なお、UI UXデザインに悩んだ際は「UX専門家の支援」を受けるのもおすすめです！ ニジボックスでは、UX改善への第一歩を踏み出せるサービス「Begin UX!」をご提供しています。 自社サイトやアプリのUI UXデザインに課題感をお持ちの方は、ぜひ気軽にご相談ください！ UI UXデザインとは そもそも、「UI UXとは何なのか」「聞いたことはあるけど、詳しい

「新規事業のアイデアを出す必要がある」 そんなとき、あなたはどのように考えますか？ あてもなく途方に暮れてしまいそうな人も多いのではないでしょうか？ そんな方に向けて、この記事では、効率的な新規事業のアイデアの創出方法を事例を交えながら解説していきます。 新規事業アイデアを考える前に知っておきたいこととは？ 新規事業に限らず、何かアイデアを考えるときに頭の片隅に置いておきたい言葉を紹介します。 アイデアとは既存の要素の新しい組み合わせ以外の何ものでもない －『アイデアのつくり方』（ジェームス W.ヤング著） アイデアとは、何も無いところから突然湧き出るものではありません。 必ず、何か土台があって、複数の組み合わせから生まれるのです。 つまり、思うに任せて新規事業のアイデアを考えてみても、それが出てこないのは当たり前です。 既存の要素の「組み合わせ方」を知らなければなりません。 具体的には、

ニジボックスが運営するエンジニア向けキュレーションメディア「POSTD」のスピンオフイベントである『POST Dev』。 近年、スマートフォンの登場と急速な進化をきっかけに、フロントエンドの開発手法に大きな変化が起きています。それは、多様なデバイスから日常的にWebサービスを利用する人々へ快適なユーザー体験を提供するため、フロントエンドエンジニアの役割にも変化を求めました。 ReactやNext.jsをはじめとするフレームワークや、開発をサポートするための様々なツールを駆使して行われるモダンフロントエンド開発。その生産性とフォーマンスの高さから、今やビジネスの成長にかかせません。 今回は「ビジネスを変革！モダンフロンエンド×組織論」をテーマに、国内外からエキスパートが集結し、モダン開発組織の構築ノウハウをはじめ、2022年現在の開発トレンドを多角的にラインナップ。 このスペシャルイベントの

ユーザビリティテストとは、サイトの改善において、実際にサイトのターゲットユーザーに利用してもらい、操作感やサイトの構成に関する課題を発見する手法のことです。 この記事では、ユーザビリティついての基本的な解説から、ユーザビリティテストのメリット、必要な準備など、実際にテストを行う前に知っておきたい事項をまとめました。

ニジボックス主催のイベント「BUSINESS & CREATIVE」では、毎回ビジネスとクリエイティブに関する現場発・最前線の情報を発信しています。 今回のイベントテーマは「持続的な組織の成長とは？チーム構築とビジネスグロースの両立を考える」！ 良いプロダクトやサービスを生み出すためには良い組織作りが必要ですが、実際に組織のリーダーたちは日々どう課題に向き合い、どう解決しているのか？ 開発組織のリーダーとして組織の成長を目指す3名をお迎えし、生々しい現場での事例も交えて語っていただいた当イベントをレポートします。 職種問わず、「組織のリーダーとは？」「組織の成長のためにすべきことは？」といったことに頭を悩ます全ての方必見です！ オープニング 今回モデレーター兼パネリストを務めた、株式会社リクルート・株式会社ニジボックスに所属する古川陽介の自己紹介と、2名のパネリストの紹介からイベントがスタ

ユーザーにとって、より分かりやすく使いやすいプロダクトを設計するためには、ユーザー心理に寄り添ったUI UXデザインが必要です。 「良いUI UXデザインとは？」を考える上で指針となる、心理学などをベースとした法則・ルールがあるのをご存じでしょうか？ この記事ではその中から、特に押さえておくべき19の法則・ルールをピックアップ。 デザインへの生かし方と一緒に解説します。 UIデザイン、UXデザインとは？ 本題となる法則・ルールを紹介する前に、そもそもUIデザイン・UXデザインとは何か、を押さえておきましょう。 UIデザインとは？ 「UIデザイン（ユーザーインターフェースデザイン）」とは、ユーザーがプロダクトをスムーズに使えるように、ユーザーとサービスの接点（UI）をデザインすることです。 UIとは、例えばサイトの見た目から、文字、画像・動画やアニメーション、ボタンなどの機能、入力フォームに

Jesse James Garrettが考案したUXの概念 2002年、まだUXという言葉自体が今ほど浸透していなかった時代に、アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience』にて、UXの概念図を提唱しました。 そのUXの概念図こそが「UXの5段階モデル」で、UXは次の5つの要素で構成されていることを示したのです。 戦略（Strategy）：ユーザーニーズとプロダクト目的の設定 要件（Scope）：ユーザーにとって必要なコンテンツ・機能の設計 構造（Structure）：ユーザーが欲しい情報や使いたい機能にたどり着くための全体構造設計 骨格（Skeleton）：ユーザーが理解しやすいインターフェース上の情報設計 表層（Surface）：ユーザーが視覚的に認識するデザイン そして、『Elements of

デザインシステムとは、プロダクト開発を進める上でのルールや利用できるツールがまとまった仕組みのことです。 特にデザイナー・エンジニアが実務の際に参考にすることで、一貫性があり安定したプロダクト開発を進めるのに役立ちます。 この記事では、デザインシステムの基礎知識からメリット、作り方や便利なツールまでを解説します。 デザインシステムとは、プロダクトをより良いものとするためのルールやツールが連携した形でまとめられたものです。 皆さんが今読んでいる「NIJIBOX BLOG」にも、文体やサイトデザインを定めるためのルール、見出しやリンクをページ内に実装するためのツールがあります。 これらは、「このブログを通してより多くの人にUI/UXの情報を発信する」ために考え、ルール化やツール化をしたものです。 デザインシステムのポイントは、ルールやツールが「連携した形で」まとめられている点です。 色やテキス

知識や経験が少なくてもUXをデザインできるフレームワークや手法は数多く存在します。 今回の記事では、そんなフレームワーク・手法の中でも特に押さえておきたいものをまとめました。 特にUXデザインを実務の中で学びたい方は必見です！ UXデザインとフレームワーク 最近様々な場で、「UX」や「UXデザイン」ということばを耳にする機会が増えたと感じているのではないでしょうか？ 特にプロダクト開発に従事している方は、UX＝ユーザー体験を軸としたものづくりがビジネスの成功に大きな影響を与えることを実感されていると思います。 しかし、日本でUXデザインが浸透し始めたのはここ10年ほどのことで、その知識やノウハウを十分に持っている人はまだまだ少ないといえます。 そこで、これからUXデザインについて改めて学ぼうと考える方にとって効率の良い方法が、「フレームワークを知る」ことです。 UXデザインの専門家が提唱し

IAとは情報アーキテクチャの略語で、分かりやすいWebサイトを作るのに欠かせません。 この記事では、IAについての基本的な知識を解説します。 また、IAを通して「良いWebサイト制作とは？」についても紐解いていきたいと思います。 ぜひ、最後まで読みながら、みなさんも一緒に考えてみてください。 IA（＝情報アーキテクチャ）とは？ IA（Information Architecture＝情報アーキテクチャ）とは、「情報を整理しユーザーに分かりやすく伝える・ユーザーが情報を探しやすくする」ための手法のことです。 少々あいまいで概念を捉えるのが難しい言葉ですが、ここではざっくり「部屋の整理整頓のようなもの」と理解しておきましょう。 散らかった部屋を片付けて、どこに何があるか分かる状態にするのと同じように、情報を分かりやすく設計するのがIAです。 アーキテクチャとは、もともと「建築物」「建築様式」を

OOUI＝オブジェクト指向UIとは、UI設計の考え方のひとつです。 その目的とするところは「ユーザーにとっての使いやすさ」で、OOUIはプロダクト改善に有効なメソッドといえます。 そんなOOUIの基礎やメリット、設計方法を解説します。 みなさんが関わるプロダクトがOOUIで設計されているかを考えながら、読み進めてみてください。 OOUIとは？ まずは、「OOUIとは何か？」を理解するために、その意味をはじめ基本的な内容について解説します。 OOUI＝オブジェクト指向UIのこと OOUIとは、Object Oriented User Interfaceの頭文字をとって表した略語で、一般的にはオブジェクト指向UIと呼ばれます。 オブジェクトとは「対象」「目的」あるいは「目当てのもの」を指す言葉です。 例えばみなさんがコンビニでお菓子を買うとき、棚に陳列されているお菓子がオブジェクトです。 ある

カスタマージャーニーマップのテンプレート（ダウンロード可能） ニジボックスではカスタマージャーニーマップの作り方とテンプレートをまとめたPowerPoint資料を配布しています。 シンプルな作りなので、簡易的にすぐ作成したい人におすすめです。 カスタマージャーニーマップとは、「ユーザーが商品・サービスとの関わりの中でたどる一連のプロセスを視覚化したもの」です。 ユーザビリティ研究の第一人者であるヤコブ・ニールセンとドナルド・ノーマンは、カスタマージャーニーマップを「目標を達成するために人が通過するプロセスを視覚化したもの」と定義しています。 「カスタマージャーニー」におけるジャーニーとは、カスタマーの購買行動における「行程＝顧客体験」を指します。 つまり、カスタマージャーニーマップとは、カスタマーの一連のブランド体験を可視化したものです。 ユーザーは、商品・サービスとの関わりの中で、認知や

UXデザインにおいて必要不可欠なユーザー調査。 種類が多過ぎてどれを選ぶべきか分からない……と悩んでいませんか？ この記事では「ユーザー調査」について、手法の分類やその使い分けについて解説をします。 ユーザー調査とは？ そもそもユーザー調査とは、何のために行うのでしょうか。 新サービスの開発、既存サービスの機能追加・改善に向けて、ユーザーが何を求めているのか、 すなわちユーザーの「声」を聞くことはマーケティングにおいてとても重要です。 しかしながら、ユーザーの声を聞いてサービス開発・改善に反映させたにも関わらず、効果に繋がらなかったということも日々発生しています。 ユーザーの声というのは、あくまでもユーザー自身が認識できている需要や意見に過ぎず、ユーザー自身が、自分のニーズを正しく理解している、適切に言語化できているとは限らないためです。 UXデザインにおいては、顕在化されたユーザーの「声

共感マップとは、ペルソナが置かれている状況や感情を深く理解するために使われるフレームワークです。 この記事では、マーケティングに欠かせないペルソナをより有効活用するために便利な、共感マップの基本情報と作り方について解説します。 共感マップとは、「ペルソナ視点で感情や行動を整理することで、ユーザーのニーズを浮き彫りにするフレームワーク」です。 まずは、共感マップの基本的な理解をするために、どんなフレームワークなのかを詳しく見ていきましょう。 そもそも、「共感」とは何？ 共感とは、「同じ感情を感じること」です。 例えば、仕事で悩んでいる同僚の話を聞いているときに、「自分も同じような経験をしているからよくわかる」と感じることがあるでしょう。 このように共感とは、ある特定の相手が持っている、嬉しい・楽しい・怒っているなどの感情に対して同じ感情を持つことです。 「人は感情でモノを買う」と言われるよう

サービスブループリントとは、1980年代前半に提唱された、サービス運用・設計のためのツールです。 この記事では、サービスブループリントの定義から作成するメリット、作り方までを解説します。 また、よく比較されるカスタマージャーニーマップとの違いにも触れています。 現在のサービスに改善の必要性を感じている人にとっては有用なツールなので、ぜひ参考にしてみてください。 サービスブループリントとは、「あるサービス提供のプロセスにおける、ユーザー体験・サービス提供者双方の動きを時系列で表したツール」のことです。 レストランを例に挙げて説明しましょう。 レストランでは、ユーザーであるお客さんが入店し、メニューを選び、オーダー、食事して退店するまでの一連の流れの中で、ユーザーの動きに並行して店員は席への案内やメニューの紹介、レジ対応などを行います。 このお客さん側のプロセスと、店員側の動き、そして店員が利

こんにちは、デザイナーの諏訪です。描画モード解説の第3回です！今回は「オーバーレイ」〜「ソフトライト」までの7つを紹介していきたいと思います。「オーバーレイ」以降は第1回・第2回で紹介したブレンドモードの応用版のようなモードが多くなります。 第1回はこちら［通常・ディザ合成・乗算・焼き込みカラー・焼き込み（リニア)・カラー比較(暗)］ 第2回はこちら［比較(明)・スクリーン・覆い焼きカラー・覆い焼き(リニア)-加算・カラー比較(明)］ 第4回はこちら［差の絶対値・除外・減算・除算・色相・彩度・カラー・輝度］ 13.オーバーレイ 「オーバーレイ」は、基本色に応じてカラーを乗算またはスクリーンにします。基本色が暗い色だと「乗算」、明るい色だと「スクリーン」が結果色に反映されます。 ▼こちらの2枚を重ねて確かめてみます。基本色の明るさは左から100→75→50→25→0%です。 ▼「乗算」「オー

こんにちは！デザイナーの諏訪です。 企業やサービスのデザインを行う際、「デザインルール」や「デザインレギュレーション」といったデザインのガイドラインをつくることがあるかと思います。 これらは昔からWebに限らずあらゆるプロダクト（制作物）にあったものですが、Webやアプリのデザインに関しては、2014年にGoogleが「Material Design（マテリアルデザイン）」を提唱した頃から、UIデザイナーはMaterial Design Guidelinesと、AppleのHuman Interface Guidelinesを一読することは当たり前のようになってきました。 今回はこの「デザインガイドライン」についての話と、公開されている企業のガイドラインをご紹介したいと思います。 デザインガイドラインとは、色・文字・レイアウトなど様々なデザイン要素について、ルールを綿密に定義したドキュメン