読者です 読者をやめる 読者になる 読者になる

UIUXを考える

アプリデザイナーのブログ

Instagram画面をXdでトレースしてみた

今回はInstagram画面をAdobeXdでトレースしました。

準備としてiPhoneInstagramのスクショを撮ってXdに配置します。
ここでXd特有の機能を発見しました。
ドラックで配置すると、1枚1枚が重ならず、横一列に整列して配置されました!これは便利。

この中からトレースして面白そうな画面を選びます。

f:id:kishatatsu:20170512111531p:plain

 

次にアートボードを作成します。
アートボードサイズですが、スクショはiPhone7(750px-1334px)なのでアートボードもこのサイズで作成します。
Xd既存のアートボードサイズ一覧からiPhone7を選ぶと、1/2サイズの375-667で作成されるので、これを2倍のサイズにすると750px-1334pxになります。

いつも迷うのですが、1/2サイズでトレースするのか?実サイズでトレースするのか?が、分かりません。でも下記の様な記事を見つけたので私は実サイズでトレースしています。

ーーーーーーー

qiita.com
[ピクセル:描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要がある]
[ポイント:boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成する]
ーーーーーーー

UIトレースをされている方に聞いてみたいのですが、みなさんはどのサイズでトレースしていますか?ご意見・ご指摘下さい。

 

さて、アートボードの用意ができました。左は見本、右はトレース用です。

f:id:kishatatsu:20170512111900p:plain

使用されているフォントを調べてみると、「San Francisco(サンフランシスコ)」というシステムフォントです。

iOS9からこのSan Franciscoが採用されているようです。

 
San Franciscoはこちらからダウンロードできます。

Fonts - Apple Developer

 
また、San Franciscoについて説明されている分りやすい記事を2つ見つけました。

scientre.hateblo.jp

medium.com

 

要点をまとめると。
San Franciscoは、iPhone, iPad, Mac用の「San Francisco」と、Apple Watch用の「San Francisco Compact 」があり、各デバイスサイズで読みやすい設計になっている。
さらにサブファミリーとしてDisplay(見出し用)とText(本文用)があり、こちらはフォントサイズ(20px)を境に、システムが自動的に切り替えてくれる。
※デザイナーはこのような仕様があることを理解した上でデザインする必要がある。


実は私...上記の仕様を知らず、フォントをダウンロードして全てのテキストに対して「Display」を使ってトレースしていました!
次回からトレースする時は、見出し用の「Display」と本文用の「text」を使い分けようと思います..。
「フォントはデザインとエンジニアリングの交差点にあります。」と記述されている通り、デザインする際にはフォントの知識も必要だと気付きました。

 

それでは、トレースして気づいたことをまとめます。 

トレースして気づいたこと

 

まずはこちらの画面。

f:id:kishatatsu:20170512112417p:plain

 

XdにあるUIkitにはこのナビマークが無かったのでSketchのUIテンプレートからXdにコピペできるかな?と思い試しにコピペしてみると、壊れることなく貼れました。しかも編集できるパスの状態でです。Sketch→Xdへはできる様です。逆にXd→Sketchへは、ペーストはできるがパスは画像化され編集できなくなりました。

f:id:kishatatsu:20170512113016p:plain

 

 

テキストもぴったり合わせていきます。

f:id:kishatatsu:20170512113906p:plain

赤文字部分のトレース結果は下記になりました。

和文=24pt/Regular

英文=26pt/Regular

行間=36pt

(疑問:Xdの編集パネルって単位が書かれていないけど、ptでいいのかな?)

 

 

ケイ線はよくよく見たら透けている。

f:id:kishatatsu:20170512114725p:plain

 

 

今回衝撃的だった事実。右側列の画像の横幅だけ1px狭い。

f:id:kishatatsu:20170512115713p:plain

バイスの横幅は750px。

画像1枚のサイズは249-249の正方形。

画像と画像の間の余白は2px空き。

これで計算すると、249(画像横幅)×3(枚)+4(2pxの余白が2箇所)=751。

1px多くなってしまいました。

この1pxを削るために、右側列だけ横幅が248になっているのだと思われます。

1px狭くても、全部正方形に見える。人の目は1pxの差なら気づかないのですね。

 

 

 

次にこちらの画面です。

f:id:kishatatsu:20170512120945p:plain

 

 

テキストの三点リーダーは、San Franciscoだと下付きになってしまった。

なので本文と三点リーダーを別のテキストボックスで作り、グループ化しました。

(書体によって中央だったり下付きだったりと変わるんですね)

f:id:kishatatsu:20170512120625p:plain

 

 

この部分、各項目の高さがバラバラでした。

全部同じ高さでもいい気がするけど、なぜ違うんだろう?

f:id:kishatatsu:20170512121615p:plain

 

 

ロゴタイプはBillabongというフォントが似ています。

Instagram風の書体を使いたい時は参考になりそう。

f:id:kishatatsu:20170512123641p:plain

 

今回は以上です。

細かくやろうと思えばどこまでも細かくできますが、1つのトレースに時間をかけるより、多くのアプリをトレースをしたいので、良き所で切りをつけます。

 

 

最後に。

 Instagramのロゴが現在のデザインにリニューアルするまでの試行錯誤が、動画で紹介されています。ロゴってこれだけの行程と時間をかけて完成するものなんだと改めて感じます。動画もおしゃれだな。

www.motionstacking.com

 

 

今後の課題:

フォントの理解 

px,pt,dpiの理解

 

ではまた〜

 

 

7ステップで完了する初心者向けチュートリアルに従って操作してみた。

f:id:kishatatsu:20170406124200p:plain

Xdには基本操作が学べるチュートリアルが付いているんですね。

さっそくやってみます。

Xdを立ち上げると、こんなパネルが出てきます。

f:id:kishatatsu:20170406104351p:plain

パネル左下にある「チュートリアルを開始」を押します。

 

 

開始をクリックすると、こんなファイルが開きました。

f:id:kishatatsu:20170406104639p:plain

すでに素材が用意されている状態。

 

 

「ズームインして開始」とあります。

f:id:kishatatsu:20170406104823p:plain

さっそく感じた事があります。

この画面の文章には「mpvibe’s のモバイルアプリのプロトタイプを完成させるのを手伝ってください」と書かれています。

この文章好きだな。

もし「完成させて下さい」「完成させましょう」「プロトタイプを作りましょう」と書かれていたら、なんだか強制されている感じがするし、はじめてXdを触る人にとってはハードルが高い。「使い方が分からないのに完成させましょうと言われても…。」と感じるはずです。
でも「プロトタイプを完成させるのを手伝ってください」と言われると、「OK!私にできるかな?もちろん手伝うよ!」って感じで、気負いなく触れる事が少なくとも私はできました。文章ひとつで印象はガラリと変わるんだな。

脱線しましたがチュートリアルを進めます。

 

 

手順1 現在のデザインをプレビューする

f:id:kishatatsu:20170406105827p:plain

 

 

プレビューボタンはここにあります。

f:id:kishatatsu:20170406110214p:plain

 

 

プレビューボタンを押すと、パネルが出てきた!

f:id:kishatatsu:20170406110622p:plain

 

 

「あちこちクリックしてみましょう」と書いてあるので、手当たり次第クリックしてみます。 

f:id:kishatatsu:20170406110737g:plain

 すでに遷移設定されていますね。

 

 

手順2 スプラッシュを作成する

f:id:kishatatsu:20170406111110p:plain

書かれている通りにやってみます。

 

 

アートボードツールに切り替えて四角の内側をクリック。

f:id:kishatatsu:20170406111246p:plain

アートボードが作成された!

ボード内をクリックするだけでアートボードが選択できるのは便利だな。(sketchはこれができない)

次に選択ツールに切り替えて、ロゴをアートボードに配置。

そして背景色を選択...こうゆうこと? 

f:id:kishatatsu:20170406111533p:plain

これが正解か分かりませんがひとまずこのステップは完了とします。

 

 

手順3 画像挿入

f:id:kishatatsu:20170406112125p:plain

グレーの円に画像をドラッグせよと書いてるのでやってみます。 

 

 

デスクトップ上にある適当な画像をドラッグすると... 

f:id:kishatatsu:20170406112313p:plain

グレー円の中に挿入されました!

わざわざマスクをかけなくてもいいので、これも便利な機能ですね。

同じ機能だとsketchでは塗りで設定すると、これと同じ事ができますが、Xdの方がよりダイレクトですね。

sketchではここで設定↓

f:id:kishatatsu:20170406113128p:plain

 

 

手順4 リピートグリッドと複数の画像挿入

f:id:kishatatsu:20170406113312p:plain

Xdのデザインツールでも花形のリピートグリッドです。さっそくやってみます。

 

 

アドベンチャーカセットを選択した状態で画面右にある「リピートグリッド」を押すと。

f:id:kishatatsu:20170406113902p:plain

 

 

選択表示が、ブルーからグリーンに変わりました。

そして上下左右に伸び縮みできるハンドルが表示されています。

f:id:kishatatsu:20170406113949p:plain

 

 

ハンドルを下にドラッグします。

f:id:kishatatsu:20170406114327g:plain

カセットが無限コピーされました!

そしてカセット間の余白(ピンク色のエリアを掴んでドラッグする)も、1箇所調整すると全てに反映されました。

 

 

次に画像の挿入です。

デスクトップ上にある適当な画像(複数枚)をリピートグリッド内の画像エリアにドラッグします。

f:id:kishatatsu:20170406114906g:plain

カセットごとに違う画像が一発で挿入されました!とても魅力的な機能です。

 

 

手順5 スクロール

f:id:kishatatsu:20170406115200p:plain

 

 

スクロールの設定をします。

アートボードを選択してスクロール/垂直方向を選択。

f:id:kishatatsu:20170406115449p:plain

 

 

次にアートボードの下を伸ばして、記事を収めます。 

f:id:kishatatsu:20170406115728g:plain

 これでいいのかな?

 

さて、ここまでがデザインモードで、ここからプロトタイプモードに切り替えます。

f:id:kishatatsu:20170406120732p:plain

 

 

手順6 遷移設定 

f:id:kishatatsu:20170406120634p:plain

 

 

5で作ったアートボードの「次の記事」ボタンを、6のアートボードに繋ぎます。
そして、6のアートボードから5に戻れるように、6の「戻る」ボタンを5に繋ぎます。

f:id:kishatatsu:20170406120210g:plain

これで繋がった様です。アートボード、オブジェクトから遷移ができます。

遷移の際の効果も設定できますがここでは触れません。

作業はこれで終わり。

 

 

手順7 作ったものをプレビューする

さて、動くかどうか見てみましょう。

 

f:id:kishatatsu:20170406121601g:plain

ちゃんと遷移もスクロールも効いていますね。

あれ、スプラッシュはどこ...?

あ、分かった!選択したアートボードからプレビューが始まるんですね!(頭からプレビューしたい時はスプラッシュアートボードを選択しなきゃいけませんでした)

 

 

最後にオンラインで他者に共有

f:id:kishatatsu:20170406122056g:plain

リンクを作成し、そのURLをコピーしてブラウザにペーストすると、誰でもプロトタイプを操作する事ができます。見た人がコメントをつける事もできます。

 

 

以上で、チュートリアルは完了です!

作業の大まかな流れが掴めました。

 

 

まとめ

やはりXdの強みはプロトタイプをプレビューしながらデザインができるって所ですね。

細かい使い方、もっと知りたい。使って慣れようと思います。

Adobeのプロトタイプ作成ツール「AdobeXd」を触ってみた。

f:id:kishatatsu:20170404122751p:plain

 

 

「UI/UXのデザインからプロトタイプの作成、共有まで。すべてを1つのアプリケーションで。」

 このキャッチフレーズはXd公式サイトに載っているんですが、すごくないですか?

というのも、私は現在プロトタイプの作成といえばsketchでデザインしてProttでプロトタイプを作っているので、1つのソフトで完結するってすごい便利!こんなソフト待ってました!って感じでテンション上がりました。

(みなさんは初めてXdを使った時どんな感想を持ちましたか?)

 

という事で、今日は初めてXdを触った感想を書きます。

 

 

まずはソフトをダウンロード

ダウンロードは下記からできます。

www.adobe.com

 

 

作ったプロトタイプをiPhoneでプレビューするためのアプリもあります。

App Storeで「Xd」と検索すると出てきます。

iPhoneMacをUSBケーブルで繋ぎ転送してプレビューできます。

f:id:kishatatsu:20170404103042p:plain

 

 

初心者向けの基本操作

初心者向けの基本操作も動画で見れます。

「Xdができること」のイメージがつかめます。

helpx.adobe.com

 

 

新機能情報をチェックしたい時

よく更新されている様なので新機能情報などチェックするようにしたいです。

www.adobe.com 

 

 

触った感想

 

デザインとプロトタイプ作成がこのソフト1つでできるのでsketch+Prottより作業時間が短縮できそう。現在sketchでのデザインに慣れているためXdでデザインするのに手間取っているが、これも使っていくうちに慣れると思う。

IllustratorPhotoshopInDesignなどのAdobeの描画ソフト、sketchを使える人ならXdを覚えるのに時間はかからない。


・デザインの書き出し
ショートカット ⌘E
形式 PNG PDF SVGJPEGは無い)
アートボードまたはオブジェクト単位で原寸書き出し。

sketchの様に細く1.5倍...など小数点の指定はできず、1倍、2倍、3倍しかない。
pdf書き出しは、1回で複数ぺージ書き出せるが、連結はされず単ぺージで書き出される。
スライス機能やドラックで書き出しができるsketchに比べ、Xdはそれができないので書き出しに手間がかかる。

書き出しに関してはsketchが断然有利か。

 

・オブジェクトや画像の配置

ドラッグで配置できる。(pdfは配置できない)


・プロトタイプの共有
その1 オンラインで共有できる(リンクを作成する必要有り)

f:id:kishatatsu:20170404112838p:plain

 

その2 作業者が録画したムービーファイルを共有

f:id:kishatatsu:20170404113510p:plain

 


機能で感動したこと

リピートグリッド

タテヨコどちらにも繰り返しオブジェクトがコピーされる。
しかもオブジェクト同士のマージンも1箇所変更すれば全てに反映される。
各オブジェクトも1所変更すれば全てに反映される。(色とサイズ)
しかもテキストの内容は個別編集できる。
オブジェクトに画像をドラッグすると全ての画像エリアに挿入される。(違う画像を複数枚ドラッグすると順番よく挿入される)
シンボルツールがパワーアップしたような機能だと思った。

 

シンボルツール
ダイレクトに編集できるので便利(別ぺージでマスターを編集しなくてもいい)

 

画像の拡大縮小

Shiftを押さずに画像を拡縮しても、画像が変形することがない。

(でもこれに慣れてしまうと他ソフトを使う時注意が必要ですね...)

 

マスクをかけた画像のトリミング

普通だと、マスクで切られている部分(マスク外の画像)は見えませんよね。

そのためトリミング調整する時も「この辺りかな?あ、もう少し下だった...」なんてやってますが、Xdはマスクの編集モードになると画像全体が表示されるんです!!

なので「感」で合わせなくてもいいんですね。これ、地味な事だけど、作業する側にとってはとても重宝する機能ではないでしょうか。

 

ぼかしツール
簡単にモザイクをかけられる。Sketchでもぼかせるけど、私はこちらの方が簡単。

 

プロトタイプモードのプレビューモード
デザインに修正を加えるとダイレクトにプレビューに反映される。

プレビューしながら修正できるのがスゴイ。これはほんとに感激した。

  

f:id:kishatatsu:20170404121813p:plain

 

 

まとめ

いままで使ってきたソフトには無い、目新しい機能がいくつかあってわくわくしました。

感じた事は、デザインしてプロトタイプまで作る人はXdが便利だと思うが、やはり画像書き出しの事を考えるとsketchが有利だと感じます。

自分が書き出すにしても、デザインファイルをそのままエンジニアに渡して実装してもらうにしても、書き出しはスムーズにできた方がいいな。

Xdが書き出しに強くなってくれたら嬉しいのですが...。

 

でもXdはまだ発展途上なので、これからの新機能追加に期待しつつ、案件に合わせてXdとsketchを使いわけようかと思います。

  

それでは、また〜。

いまどこRUN 機能&デザインをリニューアル中

 

☆デジリードで開発中のRUNアプリ「いまどこRUN」の

 開発状況をレポートしていきます。

 

過去記事はこちら↓

 

 

第58回 NAGOハーフマラソンで使ってみた

先月、1月22日に開催された『第58回 NAGOハーフマラソン』に出場した代表(20km)と、Bさん(3km)。

結果はBさん完走(ほぼ徒歩で)、代表は惜しくも時間切れですが20km走り切ってゴール!本当にお疲れ様でした!

今回のNAGOハーフマラソンには「いまどこRUNの改善バージョン」で臨む予定でしたが、作業が間に合わず…。
去年に引き続き、改善前のアプリで走りましたよ。

出場したお二人いわく
・アプリを立ち上げっぱなしでもバッテリーの持ちが良い。
・距離表示も、だいたい合っている。

期待通りの結果が得られました。
あとはデザインと機能面の改善・強化ですね。

そうゆう事で、ただ今リニューアル中です。

 

 

どこがどう変わったかのか?

f:id:kishatatsu:20170202174809p:plain

・逃げている様に見えるピクトグラムを走っている人に変更。

また、丸みを帯びた柔らかいピクトに変更。

・色 → 目が痛くなるような色からくすんだ赤&紺色にして落ち着いた印象に。

・アプリロゴは必要ないので取った。

(アプリ名をアピールしたくて置いていたが、必要のないものを置くのはダサい)

 

 

f:id:kishatatsu:20170202175117p:plain

・左上にあったメニューボタンは廃止。設定関係はギアアイコン(右下)にまとめた。

理由:メニューに格納されている項目が少ないのでひとまとめにした。

・出場大会の選択をこの画面で行える様にした。

・ランナーIDだけでなくプロフィール画像も表紙に配置した。

→自分がログインしているという事が分かりやすい。

・ボタン類はタブバーとして下にまとめた。

(青色=ボタンとわかる様に、押せるものは青で統一した)

 

 

f:id:kishatatsu:20170202175644p:plain

・走るペース(遅い〜早い)をグラデーションで表示。

赤は遅い、緑は順調。一目でペースが分かる様になる。

・同大会で複数コースがある場合はコースを色分けし、コースの表示・非表示できる。

・プロフィール写真を表示させる。(ランナーは赤色、応援者は紺色。)

・応援されると通知が付き、応援メッセージが読める。

 

こんなふうに少しずつリニューアル中です。

 

こちらからプロトタイプをご覧頂けます。

https://prottapp.com/p/50ea4a

※機能・デザインは変更になる場合がありますので予めご了承下さい。

 


今後の流れ

UIデザイン(今ここ) → プログラミング → アプリ申請 → リリース

まだ先は長いですが。改善版が完成しましたらご報告させて頂きますので
今年も「いまどこRUN」を宜しくお願いします(^^)

それではまた。

 

UIはUXのためにある

一般的によく「UIUX」と表記されているので、一見すると同じ分野のように見えますが、実は全く違う役割なんですね。


私は最初の頃(今も初心者ですが)UIについてはなんとな〜く
「アプリの画面をデザインすること」と理解していましたが、
UXについての理解はゼロでした。

 

「UIとUXってなんか似てるよね、文字の見た目が。でもUXって何なのかよく分からんし、私の仕事はUIデザインだからUXについては考えなくてもいいや〜」

 

と、今までそんな感じ。

けどこのブログを書く目的は専門性を身につけることなので、UXについても調べてみました。

そこで学んだのは「UIはUXのためにある」です。

 

 

UIはUXの中の一部

図を描くために参考にしたサイトはこちら

f:id:kishatatsu:20170123174358p:plain

 

UXを構成している要素はいろいろあり、これら全ての力が合わさることでUXが生まれます。
決してUIだけがUXと結びついているわけではなく、各分野の一つとしてUIデザインがあるんですね。

だから「UIUX」って表記は正確な表現ではない気がします。なんか変。
じゃあなんて言えば?となりますが私も分かりません...。

でも、もっとぴったりな表現があるかな?

 

UIはUXの中の一部。

各分野は分断ではなく連携している。

UXデザインという大きな枠組みの中にUIデザインがある。

 

このことを踏まえてUIを考えるのと、踏まえずにUIを考えるのでは大きな差が出てきそうだな。UIを考える際は、UXについての理解も深めないといけないのだと感じます。

ただ画面の見た目をキレイにかっこよく作るだけではいけないのだな、と。

 

 

似たような言葉がいっぱい!

UXについて調べていると、同じような意味を持つ関連ワードがたくさん出てきます。
それは手法だったり、プロセスだったり、考え方だったり様々なんですが、
ちょっと...私には何が違うのか今の所わかりません。例をあげると

 

etc・・・

 


大切な事だろうけど、むずかしそー!!!

 

ということで、これらは追い追い理解を深めていくとしまして、
今日覚えるのはただひとつ

「UIはUXのためにある」

まずこれだけ理解していればいいかな?
ここ、たぶんUIデザインする人にとっては一番大事なことだと思われます。

 

 

まとめ

UIはUXのためにある。

 


それではまた。

UIUXとは?

f:id:kishatatsu:20170119112930p:plain

まえがき

一言で「UIUX」と言っても。 

  • パソコンで閲覧するWebサイト
  • スマホで使うアプリ
  • 家電製品
  • 電車の切符販売機
  • 自動車 etc... 

様々なジャンルがあるんですね。

このブログでは主にWebサイトとスマホアプリのUIUXについて勉強していきますよ。

 

UI = User Interface(ユーザーインターフェイス

人とデバイスの境界面。接触面。操作画面。 

f:id:kishatatsu:20170119113408p:plain

私たちはパソコンを操作する時に、画面に表示されたアイコンやマークなどのビジュアルを見て「これはゴミ箱だから削除したいものはここに入れればいいんだな」とか「この虫眼鏡マークを押せば欲しい情報が検索できるんだな」とか「ウィンドウの左矢印を押せば前のページに戻れるんだな」などの「見たまんま操作」ができるのはUIのおかげと言えます。(これをGUIと呼ぶそうです)

UIは私たちとコンピュータープログラムの間に立ち、仲介する役割を持っている視覚デザインのことなんですね。 

UIデザイン = アプリの使いやすさ(操作性)を考えて設計すること。

 

「ちょっとここのUIを考えてもらえますか」

「このUIはこうした方がいいんじゃないですかね?」

って感じで使われたりします。

 

 

UX = User Experience(ユーザーエクスペリエンス)

人が製品やサービスを通して体験する出来事。 使ってみて感じた事。感想。

f:id:kishatatsu:20170120103408p:plain

たとえば。

  • 予約アプリを使って人気の温泉宿を予約した。家族で温泉旅行を満喫できてとっても楽しかった。
  • ランニングアプリで記録をつけてトレーニングを続けることで目標タイムを達成できて嬉しい。
  • 奮発してちょっと高価な炊飯器を買った。毎日炊きたての美味しいご飯が食べられて幸せだ。(これは家電の話ですが)

こんなふうに、製品やサービスを通して私たちが体験して得た感想 = UXです。 

 

UX = 体験で得た感想

UXデザイン私たちの生活にとってプラスとなる体験を提供するための総合的な仕組みづくり。

 

どうもふわっとした表現しかできませんが・・・。

とても分かりやすい説明を見つけたのでご紹介↓


「UXとはユーザーとサービス、商品の相互作用すべてで、混乱や面倒なしで顧客の的確なニーズを満たし、所有する楽しさ・使用する楽しさを生み出す「簡潔さと優雅さ」by ドナルド・ノーマン認知科学者 認知工学者)

  

 

UIとUXを合わせて考えてみると。

〜温泉旅行を計画する場合〜

 

今年はお父さんが還暦を迎えるから、家族みんなで温泉旅行へ行ってお祝いしたいな〜。

(UX・旅行のワクワク感)

↓ 

最近はこのアプリで簡単に宿泊予約ができるらしい。
さっそく使ってみようっと。

(UX・アプリへの期待感)

ほう、予約の空き状況が一目で分かるぞ。

こりゃ分かりやすい!

(UI・シンプルで見やすい画面)

↓ 

ふむふむ、写真もたくさんあって宿の雰囲気が分かるぞ。

(UI・宿の魅力が伝わるレイアウト)

↓ 

この宿ならお父さんも喜んでくれるかも!ここにしようっと。

(UX・期待感)

↓ 

予約するボタンはこれね。文字が大きくて分かりやすいわ〜。

(UI・配色と可読性)


ポチっ・・・

 

予約できた! 以外と簡単だったわね。

(UI・初めてでも分かりやすい操作画面)

↓ 

後日・・・

家族で温泉旅行を満喫できて楽しかった〜!
お父さんも喜んでくれたし、計画してよかったなあ。

(UX・満足感)

 

 

こんな感じでしょうか?

身の回りの出来事をUIUXで考えてみると面白いかもしれませんね。

 

 

まとめ

UI

私たちとコンピュータープログラムの間に立ち、人と製品をつなぐ仲介役。
分かりやい&使いやすいアプリにするには、どんなビジュアルにしたらいいか?を考えるのがUIデザイン。

UX

私たちが製品やサービスを通して体験して得た感想。(楽しかった、便利だった、分かりにくいからもう二度と使いたくない、最悪だった、などの感想)
UXを向上する為にはどんな仕組みづくりが必要か?を総合的に考えるのがUXデザイン。

 

それではまた。

自己紹介

こんにちは、はじめまして。

沖縄でアプリのデザインをしているたっつんです。

 

私がこの仕事に就いたのは1年ほど前のこと。

前職まではDTPデザインをやっていましたが、現在所属しているデジリードではアプリのデザインを任され、今はUIUXを勉強中です。

 

今まで印刷物の制作にしか携わってこなかった私が電子媒体へ転身。

アナログ人間にとってこれはちょっとした事件でした。

はじめは環境に慣れるまで時間がかかりましたが、今はいろいろなアプリのデザインをさせてもらっていて、悩みながらもデザインする楽しさを感じています。

 

だけど、UIUXについてまだ知らない事ばかりなんです。

もっといいデザインを提案できる人になりたい。

 

なので勉強しながら学んだ事をこのブログで書き綴っていきます。

 

UIUXを本職にしている方の足元にも及びませんが自分なりに考えたことを書いていこうと思います。

 

ペースはゆっくりかもしれませんが、読んでもらえると幸いです。