UX/UI

カスタマージャーニーマップで目的を整理してみよう

こんにちは、UXデザインセンター すがぴーです。
昨年度から部門が変わり、人間中心設計 専門家になりました!

最近では、UX/UI設計を中心に業務にあたっており、お客様向けにカスタマージャーニーマップを作成する機会も増えてきています。

ところで、先日、子どもが通う某スポーツ少年団にて、ポスターを頼まれました。
引き受けたはいいけれど、いったい何を書けば‥!! そもそも何のためのポスターなのか!! と思い悩み、カスタマージャーニーマップを用いて整理をしたので、ここでご紹介をしたいと思います。

続きを読む

レゴ®️シリアスプレイ®️ファシリテータ養成トレーニングをうけてきた

みなさまお疲れさまです。UXデザインセンター所属、レゴ®シリアスプレイ®トレーニング修了 認定LSPファシリテーターのカツメです。
さて、少し前なのですが、タイトルにあるとおり「レゴ®️シリアスプレイ®️ファシリテータ養成トレーニング」を受講してきたので、今回はご報告投稿とさせていただきます。

「レゴ®️シリアスプレイ®️」って何?と思った方が多いと思います。
「レゴ®️シリアスプレイ®️」レゴブロックを使用したワークショップ型研修のメソッド、です。

「コアプロセス」と7つの「アプリケーションテクニック」を組み合わせることで、チームビルディング、組織の意思決定や経営戦略、個人のための思考やコミュニケーション、問題解決まで、目的に合わせた研修を作ることができる!いろいろ応用のきくメソッドです。

「レゴ®️シリアスプレイ®️」はロバート・ラスムセン(当時レゴ社教育部門研究開発統括)を中心としたレゴ社のメンバーによって開発されました。現在、レゴ®️シリアスプレイ®️の知財はレゴグループとレゴ®️シリアスプレイ®️マスタートレーナー協会(共同会長:ロバート・ラスムセン)によって保有されています。

続きを読む

Vue×Firebase×Web Speech APIでお手軽にText to Speech、Speech to Textなアプリを作ってみる

こんにちは、もうすっかり令和ですね。UXデザインセンターのsgi-changです。

今日はVue.jsFirebaseWeb Speech APIを使って、

文字(text)を入力して、音声にする。(speech)

音声(speech)を文字(text)として閲覧できる。

こんな感じのSpeech To Text←→Text To Speechなアプリを作ってみようと思います。
お手軽さ、

所要時間:2時間~半日ぐらい

でできます。

コンセプトは、

  • 文字を入力しないでも、できなくても音声・発話でコミュニケーションが取れる。(clientアプリ)
  • マイクやスピーカーがなくても、音声を聞くことができなくても、文字と文字入力だけでコミュニケーションが取れる。(hostアプリ)

というアクセシビリティに配慮したアプリです。

続きを読む

絵が描けなくても大丈夫!ストーリーボード活用!

こんにちは。UXデザインセンターの金井です。

最近、お仕事でストーリーボードを描くことがあったのですが、手書きではうまく書けず、しかも時間もツールもなかったので、Excelでお絵描きをしていた所、ちょっとびっくりされました。

確かにExcelに代表されるOffice製品のオブジェクト、結構色々なこと出来るのですが、あまりお絵描きには使われないかもしれないですね。。

Excelでイラストを書くなんて面倒と思われるかもしれませんが、基本のワンセットを作ってしまえば意外と楽で、やり直しも簡単、コピーもOK、色もサイズも簡単に変更できます。

続きを読む

パワーポイントで作るワイヤーフレーム ~もう迷わない!画面&フォントサイズ~

こんにちは、UXデザインセンターの林です。

弊社(クレスコ)のUXデザインセンターではWebサイトやアプリのUI設計の依頼を受けることがありますが、その際専用のグラフィックソフトやプロトタイプ作成ツールだけでなく、”関係者の誰もが開けて編集・再利用(コピペ)可能なツール”としてMicrosoft office のパワーポイントやエクセルを利用することがあります。

縦長のWebサイトのイメージ作成はパワーポイントでは難しい部分がありますが、部品の整列、選択、コピーなどはエクセルよりもパワーポイントの方が操作しやすいため、個人的にはパワーポイントを利用するのが好みです。

今回は、パワーポイントでワイヤーフレーム(画面イメージ)を作成する際に失敗しがちな画面&フォントサイズの設定について解説します。

続きを読む

UXエンジニアが色彩検定のUC級を受検してみた

UXデザインセンターのabです。
今回は先日私が受検した、UC級についてお話ししたいと思います。

注)記事内にある画像については、ある型の色覚特性を持つ方の見分けにくさ、見づらさを模擬したイメージ図です。色の見え方はタイプによっても異なり、また、個人差もあるので実際には異なる場合もあります。

そもそもUC級とは?そして何を学ぶの?

昨年に色彩検定協会が新設した検定のひとつです。
UC(色のユニバーサルデザイン)とは、色覚の多様性に配慮した、誰もが見やすい色使いのことでありUC級ではそれも含めて色について体系的に学びます。

続きを読む

あなたもカラーユニバーサルデザイン

健康第一

みなさま、お仕事おつかれさまです!2019年になりました。今年も張り切っていきましょう!
と、言いながら。年末にインフルエンザAに罹患!年始から致し方なし寝正月を過ごしたUXデザインセンター所属のカツメです。

昨年は体の調子を崩すことが多く、節目の年齢だからか・・・と、今年は猛進ではなく無理せず一歩一歩進んでいきたいと思います。健康第一。

さて、今回は「色」にしぼったデザインの話をしたいと思います。タイトルにもあります「カラーユニバーサルデザイン」。

「カラーユニバーサルデザイン」とは、NPO法人カラーユニバーサルデザイン機構 (CUDO〈クドー〉)が作った名称であり、一部を引用しますと、

人間の生まれつきの色の感じ方(色覚)は、大きく5つの型(タイプ)に分けることができそれぞれの色覚型には色の感じ方に異なる特徴があります。また色覚は病気や老いによって変わることもあります。
こうした人間の色覚の多様性に配慮し、より多くの人に利用しやすい配色を行った製品や施設・建築物、環境、サービス、情報を提供するという考え方を「カラーユニバーサルデザイン(略称CUD)」と呼びます。

ということだそうです。色の世界にもバリアフリーを!

続きを読む

Webサイトのスマホ対応方法 2種類の仕組みと特徴を解説

こんにちは、デジタルマーケティングチームの林です。

スマートフォンやタブレットが普及し多くのウェブサイトが様々な端末で閲覧されるようになったことから、近年のウェブサイトは閲覧環境に合わせて最適な表示をすることが求められています。

サイト訪問者のほとんどはPCからの閲覧者だから…
スマホ対応したいけど、お金かけられないから…

と、PCサイトのままにしていたけれど、そろそろスマホ対応を考えているという方も多いのではないでしょうか。

今回はWebサイトをスマホ対応するときの方法について、スマホ専用サイトの作成とレスポンシブWebデザインについて解説します。また、レスポンシブWebデザインの中でも代表的なレイアウト3種をとりあげます。

  1. スマホ専用サイト
  2. レスポンシブWebデザイン

– リキッドレイアウト
– フレキシブルレイアウト
– 固定幅レイアウト(部分的レスポンシブWebデザイン)

自力でスマホ対応をしたいけどどうしたらよいのか分からない方、Web制作会社に依頼する前に基礎知識を得たい方におすすめの記事です。

続きを読む

WebGL、three.jsでワクワクしてみた

この記事は 『CRESCO Advent Calendar 2018』 19日目の記事です。

こんにちは、UXデザインセンターのsgi-changです。

2018年もあと少し、気持ちも慌ただしくなってきた師走にちょっとワクワクしてみたいなと思い、

気軽にブラウザで3Dコンピュータグラフィックス(以下3DCG)を実装できる、WebGL、three.jsの記事を書いてみました。

とりあえず、今日はテキストエディタだけあればコピーandペーストで実装できる超簡単3DCGを実装してみます。

WebGL、three.jsとは?

実装の前にざっくりとWebGL、three.jsについて説明します。

続きを読む

「アフォーダンス」と「シグニファイア」をおさらいしてみる

こんにちは。UXデザインセンター金井です。

この記事は 『CRESCO Advent Calendar 2018』12日目の記事です。

デザインの世界ではもはやバイブルとされているD・ノーマンの『誰のためのデザイン? —認知科学者のデザイン原論』を読み返しています。

この本には、「アフォーダンス」や「シグニファイア」という言葉が出てくるのですが、なかなか理解が難しく、自分でもあやふやな所もあったので、再度調べなおしてみました。

続きを読む