サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
blog.nijibox.jp
ニジボックス主催のイベント「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
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デザインの専門家が提唱し
本記事では、Web制作では欠かせないワイヤーフレームの作り方を解説します。 初心者の方でも分かりやすいように具体例を交えながら、またこの記事を見ながらすぐに作れるようにガイドしていくので、「ワイヤーフレームの作り方を勉強したい」「ワイヤーフレームを初めて作る」そんな方はぜひ参考にしてみてください！ ワイヤーフレームとは？ ワイヤーフレームとは、一言で説明するとWebページ制作をする上での設計図です。 雑誌のページを作るとき、まずは写真やコラム、テキストの配置を考えてラフを作成します。 みなさんが今読んでいるこの記事も、いきなり書き始めるのではなく、どんな情報をどの順番で書くかをまとめた構成案を元に書いています。 Webページでも同じように、どの情報を/ページ内のどこに/どのように配置するといった情報設計が必要です。
人間中心設計という言葉を一度は聞いたことがあっても、意味をきちんと理解できていない人も多いのではないでしょうか？ この記事では、人間中心設計とはどんな意味なのか、そして具体的にどんなプロセスで進めるのかについて紹介します！ 人間中心設計とは、一言で示すと使う人のことをきちんと考えてモノを作るという考え方です。 まずは、人間中心設計の定義を知ることで、その基本的な考え方を理解しましょう。 ISOによる人間中心設計の定義 国際規格「ISO 9241-210:2010」は、人間中心設計をこのように定義しています。 システムの使用に焦点を当て，人間工学及びユーザビリティの知識と手法とを適用することによって，インタラクティブシステム（※）をより使えるものにすることを目的としたシステムの設計及び開発へのアプローチ。 －ISO 9241-210:2010の翻訳版「JISZ8530:2019」より引用(※
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デザインにおいては、顕在化されたユーザーの「声
TOP > UIデザイン > Zeplinとは？ 使い方から導入メリット、類似ツールとの比較まで、現役デザイナーがやさしく解説 Zeplinとは、デザイナーが作成したデザインカンプをコーダーに共有するためのツールです。 デザイナーはSketchやAdobe XDなどのデザインツールでデザインを作成し、デザインデータをZeplinにエクスポート(アップロード)します。 コーダーは、Zeplinでデザインを受け取ることにより、各要素の距離や CSS のカラーといった情報をすぐに確認することができ、画像のアセット取得が簡単になります。 Zeplinの導入方法 ZeplinはWebブラウザからでも使えますが、Windows/Macそれぞれで使えるアプリが用意されています。 以下の公式サイトから無料版をダウンロードできます。 ■参考リンク：Zeplin公式サイト 無料版で作成できるのは１プロジェクト
共感マップとは、ペルソナが置かれている状況や感情を深く理解するために使われるフレームワークです。 この記事では、マーケティングに欠かせないペルソナをより有効活用するために便利な、共感マップの基本情報と作り方について解説します。 共感マップとは、「ペルソナ視点で感情や行動を整理することで、ユーザーのニーズを浮き彫りにするフレームワーク」です。 まずは、共感マップの基本的な理解をするために、どんなフレームワークなのかを詳しく見ていきましょう。 そもそも、「共感」とは何？ 共感とは、「同じ感情を感じること」です。 例えば、仕事で悩んでいる同僚の話を聞いているときに、「自分も同じような経験をしているからよくわかる」と感じることがあるでしょう。 このように共感とは、ある特定の相手が持っている、嬉しい・楽しい・怒っているなどの感情に対して同じ感情を持つことです。 「人は感情でモノを買う」と言われるよう
サービスブループリントとは、1980年代前半に提唱された、サービス運用・設計のためのツールです。 この記事では、サービスブループリントの定義から作成するメリット、作り方までを解説します。 また、よく比較されるカスタマージャーニーマップとの違いにも触れています。 現在のサービスに改善の必要性を感じている人にとっては有用なツールなので、ぜひ参考にしてみてください。 サービスブループリントとは、「あるサービス提供のプロセスにおける、ユーザー体験・サービス提供者双方の動きを時系列で表したツール」のことです。 レストランを例に挙げて説明しましょう。 レストランでは、ユーザーであるお客さんが入店し、メニューを選び、オーダー、食事して退店するまでの一連の流れの中で、ユーザーの動きに並行して店員は席への案内やメニューの紹介、レジ対応などを行います。 このお客さん側のプロセスと、店員側の動き、そして店員が利
こんにちは、デザイナーの諏訪です。描画モード解説の第3回です！今回は「オーバーレイ」〜「ソフトライト」までの7つを紹介していきたいと思います。「オーバーレイ」以降は第1回・第2回で紹介したブレンドモードの応用版のようなモードが多くなります。 第1回はこちら［通常・ディザ合成・乗算・焼き込みカラー・焼き込み（リニア)・カラー比較(暗)］ 第2回はこちら［比較(明)・スクリーン・覆い焼きカラー・覆い焼き(リニア)-加算・カラー比較(明)］ 第4回はこちら［差の絶対値・除外・減算・除算・色相・彩度・カラー・輝度］ 13.オーバーレイ 「オーバーレイ」は、基本色に応じてカラーを乗算またはスクリーンにします。基本色が暗い色だと「乗算」、明るい色だと「スクリーン」が結果色に反映されます。 ▼こちらの2枚を重ねて確かめてみます。基本色の明るさは左から100→75→50→25→0%です。 ▼「乗算」「オー
ビジネスの成長戦略を考えるフレームワークの一つに、「アンゾフの成長マトリクス」があります。 アンゾフの成長マトリクスはビジネスの成長の可能性を可視化するツールとして、長く活用されています。 この記事では、「アンゾフの成長マトリクス」について、基本的な解説と具体的な活用方法を分かりやすく解説していきます。 「アンゾフの成長マトリクス」とは、「戦略は組織に従う」という言葉で有名な経営戦略の父・経営学者イゴール・アンゾフによって、その著書『企業戦略論』にて提唱されたフレームワークです。 このフレームワークでは、「製品」と「市場」について、「既存」と「新規」で4象限に分類し、事業拡大の戦略を探索していきます。 アンゾフの成長マトリクスを用いることで、4つの戦略オプションの潜在的なリスクを考慮しながら、企業や製品の成長戦略を描いていくことが可能になります。 アンゾフの成長マトリクスで考える4つの成長
バリュープロポジションキャンバスのテンプレート ニジボックスではバリュープロポジションキャンバスの作り方とテンプレートをまとめたPowerPoint資料を配布しています。 シンプルな作りなので、簡易的にすぐ作成したい人におすすめです。 なぜバリュープロポジションキャンバスが必要なのか？ 昨今のコト消費傾向化や、顧客のニーズの多様化によって、「価値ある差別化」の重要性がますます高まっています。 皆さんもお気づきだと思いますが、トレンドと言われる分野で最先端と謳う類似サービスはどんどん増え、競争が激化しています。 このような環境の中で、数多くの類似サービスの中から自社のものを顧客に選んでもらうには、差別化が必要不可欠となっています。 しかし、差別化と一口で言っても、ただ「競合と違っていればいい」わけではありません。 目指すべきは、「競合より顧客のニーズにマッチしている」＝「価値ある差別化」なの
ビジネスモデルキャンバスとは、ビジネスの構造を可視化したフレームワークです。 アレックス・オスターワルダーとイヴ・ピニュールによって開発されました。 新規事業を立ち上げる際は、自分たちのビジネスモデルに対する理解を深め、社内や出資者への説得力のある説明が必要です。 既存事業においても、現状確認を通じてビジネスモデルの優位性や弱点の発見をすることで、より強固なビジネスモデルにブラッシュアップできます。 ビジネスモデルキャンバスは、新規事業の立ち上げや既存事業において、組織内で共通認識を持つための設計図といえます。
「あのビジネスモデルは斬新だ」「このビジネスモデルは時代遅れだ」など、普段何気なく使うビジネスモデルという言葉。 ビジネスモデルとは、事業の収益を生み出す、新規事業開発には欠かせない仕組みです。 近年の企業は、感染症の流行や世界情勢などの影響で課題に直面しやすくなっています。 こうした状況で自社の課題を解決し、顧客ニーズに応え、プロダクトや組織を成長させていくには、分析や改善の指標となるビジネスモデルが不可欠です。 また、世界的にVUCA（※）の時代に突入していることから見ても、多くの企業にとって厳しい状況は、もう少し続く可能性が高いと考えられています。このことからも、ビジネスモデルの重要性は増していると考えてよいでしょう。 この記事では、ビジネスモデルの定番パターンから良いビジネスモデルの条件まで、具体的な事例を交えて解説します。 ※VUCA Volatility・Uncertainty
リーンキャンバスとは、1枚のシートでビジネスモデルを可視化・一望できるフレームワークです。 起業家のアッシュ・マウリャ氏が著書『Running Lean ―実践リーンスタートアップ』において提唱しました。 リーンキャンバスの「リーン（Lean）」は英語で「効率的な」という意味の単語です。 新規事業を成功させるためには、ユーザーの声を聞きながらビジネスを高速で軌道修正し、磨き込んでいく必要があります。 そのためにリーンキャンバスは、ビジネスモデルキャンバスを改変し、スタートアップ企業や新規事業向けに最適化されたものになります。 リーンキャンバスとは、ビジネスのPDCAを最速で回すためのツールなのです。
こんにちは！デザイナーの諏訪です。 企業やサービスのデザインを行う際、「デザインルール」や「デザインレギュレーション」といったデザインのガイドラインをつくることがあるかと思います。 これらは昔からWebに限らずあらゆるプロダクト（制作物）にあったものですが、Webやアプリのデザインに関しては、2014年にGoogleが「Material Design（マテリアルデザイン）」を提唱した頃から、UIデザイナーはMaterial Design Guidelinesと、AppleのHuman Interface Guidelinesを一読することは当たり前のようになってきました。 今回はこの「デザインガイドライン」についての話と、公開されている企業のガイドラインをご紹介したいと思います。 デザインガイドラインとは、色・文字・レイアウトなど様々なデザイン要素について、ルールを綿密に定義したドキュメン
ユーザーインタビューが問題なく終了し、いざ分析！ でも、手本となるような報告書はなく、方向性を示唆してくれる指導者もいない。 大量の発言から、何をどのように読み取って分析すれば良いのかわからない！ と、 途方に暮れてしまう人も多いと思います。 この記事では、ユーザーインタビューの分析の基本的な考え方から具体的な方法まで事例を交えながら紹介します。
こんにちは、デザイナーの諏訪です。私はニジボックスに入社してからPhotoshopでデザイン制作をするようになったのですが、前職ではIllustratorで印刷物からWebデザインまで制作していました。Photoshopは画像処理とトリミング程度にしか使ったことがなく、実は知らないことばかり…というわけで、今回は勉強も兼ねて、まずは第1回として描画モードの「通常」から「カラー比較(暗)」までの7つをご紹介したいと思います！ 描画モード（ブレンドモード）とは 下にあるレイヤーに対して、上のレイヤーがどういった合成をするかを設定できるPhotoshopの機能です。「通常」から「輝度」まで27個の効果があります。 下のレイヤーを基本色、上のレイヤーを合成色、合成によって生成されるカラーを結果色と言います。 ———- 01.通常 初期設定のモードです。これはそのまま重なるだけですね。先に説明した画
次のページ
このページを最初にブックマークしてみませんか？
『blog.nijibox.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
