UX/UI

React Native Expo CLI で始めるクロスプラットフォーム開発 はじめの一歩編

completed

こんにちは。

エクスペリエンスデザインセンター、略して EXDC の sgi-chang です。

今日は、React Native の Expo CLI で、Web も Android も iOS も、

複数のプラットフォームのアプリも同時に作れちゃう、

夢のようなクロスプラットフォーム開発のはじめの一歩に挑戦したいと思います。

以下の流れで進めていきたいと思います。

  • クロスプラットフォーム開発とは
  • React Native とは
  • Expo CLI とは
  • クロスプラットフォーム開発を体験してみよう

なお、今回の「はじめの一歩編」では、開発環境の構築と、

ひとつのコーディングで We bとモバイル (Android) とでアプリを動かしてみるところまでをやってみます。

(実際の各プラットフォームのビルド展開はまたの機会に…)

続きを読む

メンタルモデルを意識して情報を整理する

こんにちは、UXデザインセンターのabです。
私事ですが、最近引っ越しました。1か月が過ぎようとしていますが、半分くらいの荷物はまだ段ボールの中…
明日こそは荷物の整理をしようと思っている今日この頃、今回は「UI設計」時の情報の整理についてお話したいと思います。
例えばウェブサイトや、たくさんの機能を持つアプリの開発をしようとしたとき、どうやって情報を整理したらよいのかわからないといった場合にこちらのブログがヒントになればと思います。

続きを読む

6つの帽子をかぶってみた「Six Thinking Hats」

赤いマフラーをしたねこ

こんにちは!最近、直感と感情にまかせ赤いマフラーを買った、UXデザインセンター所属のカツメです。

アイデアの発想法として有名な、といいますか今は一般的な?ブレスト(ブレインストーミング)。

マンネリ化したり同じようなアイデアしか出せない時がありませんか。そんな時にはブレストを応用した発散技法の強制連想法「シックスハット法(Six Thinking Hats)」を使ってみてはどうでしょうか。

シックスハット法(Six Thinking Hats)って?

シックスハット法(Six Thinking Hats)は、水平思考(Lateral Thinking)を提唱したエドワード・デボノ氏が1983年に開発した並行思考法(Parallel Thinking)。

「水平思考」というのは、いろいろ視点を変えて発想してみることで、常識にとらわれず自由な発想をするための構造化されたアプローチです。シックスハット法(Six Thinking Hats)は発想したものを調査、開発、実装するためのもの。変化を探求し建設的に考えるためのブレスト応用方法です。

続きを読む

シナリオを使って画面を設計する

画面設計のはじめの一歩

画面を設計するとき、はじめに何をしますか?
おそらく、まずは頭の中でシナリオを考えるところから始まるのではないでしょうか。
ユーザーのしたいことは何なのか、そのためにユーザーはいつどんなことをするのか、といった風にです。
そしてそれを実現するためにはどんな画面がよいのかなどUIを検討し、最終的に設計書に落とし込んでいくといった流れになるのではないかと思います。
今回は、頭の中に描いたものをシナリオとして文章に起こし、製品やサービスの”あるべき姿”を描く「構造化シナリオ」についてご紹介したいと思います。

続きを読む

ようこそ!2020年、Webフロントエンドの世界へ

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

ついに2020年。

数字だけ見るとものすごく未来を感じてしまうのは私だけでしょうか。

今回は、とても魅力的なWebのフロントエンドの世界(以下、Webは略)をご紹介したいと思います。

当記事の対象は、

社内でフロントエンドエンジニアが不足している。

いきなりフロントエンドやれと言われた。

サーバーサイドしか知らない。

SPAって何?

モダンWebって何?

どうしていいか分からない。

といった今までフロントエンドとはあまり縁がなかったけど、

急に関わることになった方を対象にしています。

開発を進める上で参考になれば嬉しいです。

続きを読む

旧年レゴ®シリアスプレイ®で「3D-KPT」を行い、そして新年に振り返ってみた

着物をきた新春の猫

過去の全てをなかった事にしてどんどん前に進んで行きたい、道に迷っても歩いてきた道を戻るのが嫌いなので前に進む事だけしたい、という「山で遭難する可能性が非常に高い」であろうタイプ、UXデザインセンター所属のカツメです。あけましておめでとうございます。皆さまにおかれましては、健やかに新春をお迎えのこととお慶び申し上げます。

今年は「変わる」をテーマに、やっていきたい。ていうか去年からやってきた。だからいつもと違って、前に進まず後ろを見てみよう。ということで、新年早々に旧年のことを振り返ってみたいと思います。(「去年のうちに振り返っておけよ」というツッコミをお待ちしています。)

UXデザインセンターの定例会で「レゴ®シリアスプレイ®」を活用した振り返りを行なったのですが、これが、よかった。なので「振り返りレゴ®シリアスプレイ®」のファシリテーションをしたことを振り返ることで、自分の振り返りをしつつ「レゴ®シリアスプレイ®」の魅力も伝えてしまおう!という一石二鳥な投稿にしたいと思います。

続きを読む

WebGL、Three.jsでワクワクしてみた2019、ひとりハッカソン編

(この記事は「CRESCO Advent Calender 2019」12日めの記事です)

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

今年もAdvent Calendarに参加させて頂くことになりました。

ちょうど一年前「WebGL、three.jsでワクワクしてみた」を書いたのですが、

何を書こうかと色々迷った挙句…私の中で最近ますますホットな3DCGの記事が書きたくて、

もうすぐクリスマス、そしてもうすぐ1年も終わるし、

せっかくAdvent Calendarだし、

今年もやっぱりThree.jsでワクワクしてみたいなと思い、

Three.jsでひとりハッカソン(※)に挑戦してみることにしました。
(しつこくてすみません。)

続きを読む

最近噂のOOUI、オブジェクトベースのUIとは何だ!?

(この記事は「CRESCO Advent Calendar 2019」5日目の記事です)

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

2019年11月20日~22日で開催された「ET & IoT Technology 2019」の、スペシャルセッションプログラムに参加してきました。

色々とHCDやデザインにまつわるお話が聞けた中、ソシオメディア取締役 上野さんのディスカッション、「これからのUIデザイン ~オブジェクトベースUIへの招待~」がとても印象的だったのでレポートしたいと思います。

UI設計は、「何をどこにどういう状態で置けば良いのか」という事を考えるわけですが、実はデザイナーの経験則や一般論で行われていることが多く、これまで明確なルールやロジックは特にありませんでした。

そんな中、今注目を集めているのが「OOUI(object-oriented user interface)」。
日本語で言うと、「オブジェクト指向のUI設計」となります。

ひとつの指針としてこの考え方を用いればロジカルにUI設計できるとあって、デザイナーからも開発者からも注目されています。

オブジェクトベースUIって何?

早速ですが、OOUIとはなんでしょうか。

上野さんの講演案内から引用させていただくと、

オブジェクトベースUI設計とは、GUIの発明的起源であるオブジェクト指向のコンセプトを用いたUI設計手法であり、アプリケーションのUI構成を決める際に、オブジェクト分析の結果を手掛かりにして画面とデータを対応づけるものです。

とあります。

続きを読む

UXを選ぶ

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

iPhone 11 Pro を使っています。
発売日の翌日に機種変更しました。

サクサク動いて気持ちいい、バッテリーの持ちがいい、ディスプレイが美しい、カメラは明るく撮れてズームもきれい、つや消しボディの手触りがお気に入り… 

と、この流れだと「iPhone 11 Pro を2ヶ月使ってみて」という記事を書いてしまいそうな雰囲気ですが、今回は機種変更の際に感じたことを書きたいと思います。

続きを読む

毎日勉強する習慣はどうしたらつくのか考えた

はじめまして!UXデザインセンターのひーです。

今年の5月から、UXデザインセンターの仲間入りしUXの分野に初挑戦中。
まだまだ分からないことだらけです。

なので一刻も早く、知識や経験をつみたいので、
「セミナーや勉強を着実にこなして自分のものにしたい!」と思っていつつ、
慣れてない仕事に悪戦苦闘し、帰宅後はぐったり、、、。
そんな日々に追われるとあっという間に1日は過ぎ、そして1週間が過ぎてしまいます。
そうなると気が焦るばかり…。

そんなときに、メジャーリーガーの大谷翔平選手が高校1年生の時に将来の目標を、
「マンダラート」で作っていたことを思い出し、自分でも作ってみようと考えました。

続きを読む