ミミカスデザイン

UIとかUX,CXとかよくわからないけど、使いにくいのは嫌い。

入社して1年たってました

過去の記事をたどってもらうとmimikas がどこで働いているのかがわかると思うのですが..........

 

 

2社目となる現職に気づいたら1年たってました。

早いですね。とてつもなく早い。

 

そんな中で私は

・コーポレートのデザイン業務

・企画コーディング(見習い)

して頑張っているの中で気づきを忘れないうちに書いておきますね。

 

 

デザイナーにとっても求められるもとは？と考える事が多くなりました。

medium.com

そんな中で、ググってぶち当たったのはこちら。

たまたまお会いしたことのある藤井さんとは、これまた何かのご縁ですね。

デザイン組織とは、結局のところ、一番コミニュケーションが

重要な部署である様な気もします。

結局UIデザイナーとか、グラフィックデザイナーとかいろいろあるけど

自分は何になりたいんだろうか.....とか

そしてこの会社でどのポジションが正解なのか......とか考えてしまいます。

全部自分でというのはあまり性に会わないのでやりたくないので

なるべく沢山の人といろいろ作りたいなーとか考えると

結局何が必要なのかと考えた時にコミニュケーションが

これからの武器になるのか？それってデザイナーに業務なのか？とか

ちょっと話がまとまらないので、これはこのまま置いておきますね。汗

 

もう1つはかなり普通の話して思うは

サラリーマンになるのが正解なのか。という事。

今年で28歳になるmimikasですが、相変わらず非社会的な人間です。

けど、最近思うのがそれの何が悪いのかな？と。

評価の為にやら、己の実績のためにが強い事もすごくいいけど

デザイン制作している時が一番すきだったりします。

たぶん年齢的にももう少し業績とか、売上とか考えていかないと

だめなのかもしれませんが、

目の前のお客様や社内の人が困っていたら、デザインで助けていきたい。

そんな事が自分にとって喜びなのかもしれません。

新卒みたいな事をいっているかもしれませんが、

ちょっと一周回っていろいろ考えてみました。

 

以上。

 

 

 

CSSのdisplayがわからないの、自分がわかるまで理解する。

最近ごりごりとコーディングをさせていただいているのですが。。。

なんせdisplayを友達になれないってことで...

理解できるまでここでやってみる。

displayの種類は......

・block(ブロック要素なんしょ？)

・inline(インライン要素なんしょ？)

・inline-block(インライン要素とブロック要素の中間的な？)

・table(いる？これ？)

くらいに思ってました。

で実際に書いたところ

 <!DOCTYPE html>
<html>

<head>
<meta charset="ja">
<title>displayについて</title>
<style>
.lnLine{
background-color:red;
display: inline;
}
.block{
background-color:pink;
display: block;
}
.inline-block{
background-color: aquamarine;
display: inline-block;
}
.table;
background-color: black;
display: table;
}
</style>
</head>
<body>
<section>
<h1>display:inline</h1>
<div class="inLine">inline</div>
<div class="inLine">inline</div>
<div class="inLine">inline</div>
</section>
<section>
<h1>display:block</h1>
<div class="block">block</div>
<div class="block">block</div>
<div class="block">block</div>
</section>
<section>
<h1>display:inline-block</h1>
<div class="inline-block">inline-block</div>
<div class="inline-block">inline-block</div>
<div class="inline-block">inline-block</div>
</section>
<section>
<h1>display:table</h1>
<div class="table">table</div>
<div class="table">table</div>
<div class="table">table</div>
</section>

 

</body>
</html>

f:id:mika-19890530:20160707000918p:plain

こんな感じですね。

なるほどねー!

・inline:存在感はないよ。すっきりダイエット系。だけど、その分メンテナンスが

　　　  とてつもなく大変。

　　　だからレイアウト変えたくないけど、なにか装飾をしたい時とか便利そう。

　　　血液型でいうA型ですね。

           ※左右のみpaddingとmarginが使えるらしい。縦はvertical-align。

　　　※親要素をblockにしたらtext-alignをつけることができるよ。

・block:お前か。blockはそのままでした。

　　　　ただ、高さとか位置を組むときに便利そう。

　　　※vertical-alignだけは使えない。しけた

・inline-block:必要最低限をblock要素にしてくれる。block要素に変換する領域が、

　　　　　　inlineなだけで、中身は完全にblock要素様。

　　　　　　コウモリ系のやつでした。

さ、tableは。。。。。。って言いたいところなので、眠いのでまた今度。

そしてまだdisplayの種類はたくさんありそうなので、そこでまとめまーす

 

 

 

UIデザイナーだからコーディングやりなさいと言われて

こんばんわmimikasです。

最近色々な事がmimikas自身になって

そんな中で【コーディング】学んでいいよと言われたので

コーディングを学ぶ事になりました。

とはいえ、じゃあデザイナーがコーディングを学ぶ事でどんな事がプラスになるのか

 

まずは技術的にざっくりその通りであると思ったブログは

itkeijyoshilog.hatenablog.com

 

それから、今本当に実感したのはミミカスデザインでも紹介したコレ。

codezine.jp

 

新しい事を学ぶ上ではやはり会社の理解と、

人件費と学習コストが生じる事。

そしてそれによって費用対効果がどれくらいでるかというと

【mimikas次第】なのでがんばります！

てきな感じで次回からは少し

技術的な話ができればと思いますー

adobe museとExperienceをさわってみた。

AdobeExperienceを触ってみた

www.adobe.com

 

出来る事

・エクスポートをリンクベースでできるので

　クライアントのOSなど関係なしに共有ができる

・画面遷移が簡単にできる

・blockベースの記事などは、１つレイアウト組むと

　使いまわしが聞く

・プレゼンなどに使いやすい！

できない事

・modalなど簡単なアニメーション

・Slidemenuなどがまったく出来ないのでリッチ感あるUIまでは無理

 

www.adobe.com

 

できる事

・簡単画面遷移でのプロトタイピング制作

・コーディングベースのアニメーション

・コーディングがわらない人でもhtml/CSS/jsの共有をエンジニアにできる（製品版までのソースのクオリティではない）

・簡単なLPとかであれば、コーディングなしでリリースできるよ！

できない事

・そもそものコーディングがある程度理解できないと厳しい

・UIが激しくわかりにくい,,,,,,,,,,

 

って感じでした。

使用用途にわけて使い分けるべきですが

簡単なモックならXDで、モック件製品版であるならmuseかなと思いました！

 

プロトタイプツールを調べてみる事にした

前回の話からプロトタイピングをまとめてみました。

昔はprottだけだったのですが、

今はどうなんですかね。。。。。。って事も含めて。

 

www.canvasflip.com

・基本的なプロトタイピングのワイヤーツールなどを含めている

・自動でユーザーの動きをトラッキング可能

・上記データをレポーティングを自動で行ってくれる

・無料版:各プロトタイプにつき3人分のテストデータを取得

・複数人でのプロトタイプテストが準備完了状態

・for iOSとAndroidってだけにwebに適しているかは謎

・開発環境はmacだけなのかWindowsまで対応しているのか謎

 

Atomic

 

atomic.io

 

・オンライン上なのでWindowsからmacまでに対応

・オフラインでの制作ができない

・細かなアニメーションまで可能

・DesignはできないがPNG、JPG、GIF、SVGのインポートが可能

・コメントが残せる

・プロジェクト毎に他ユーザーを招待が可能

・CustomCSSのコピーが可能

 

prottapp.com

・誰も知っている

・ワイヤー組がだれでも出来る簡単UI

・基本アクションがスマホベース

・基本的な考えはアプリのイメージ

・トライアルが一ヶ月

・日本語での対応が可能

blogs.adobe.com

・WEB アプリ双方に優れている

・自由性は高い

・操作が難しい

・現状英語版のみ

・アニメーションまでできるが大きな画面遷移は簡単にできる

・Adobe製品との相互性が取れている

 

 

的な感じでした。

まだまだたくさんあるけど、ミミカス's ピックアップはこんなかんじ。

おすすめなどあればぜひー！

モックアップを作るよ!

こんばんわミミカスです。

最近は会社でユーザーインタビューとかやっているのですごく楽しい。

そしてユーザーインタビューが終わったらそろそろモック制作をする時が

くるのですが、今回はアプリなので今までだったら

prottapp.com

 

だったのですが、

これって本当に合っているのかが問題。

 

特に今回はいろんな場所で使用するので環境を考えると

plottではない気がして調べてみた。

 

てかそもそもplottって何？ってところからなんですが、

プロトタイピングのこと。

例えば今の世の中画面上で動いたり、ボタンを押せばどこかのページに

飛ぶなんて当たり前の世の中で。。。。

例えば下記の世の中のようにUIを作っていくと思うんですけど、

http://www.ibm.com/developerworks/jp/websphere/library/was/was8_dojomobile/images/figure2_02.gif

 

「このボタンを押したら、どうやって次のページを表示させるの？」

「メニュー入れたいんだけど、どうやってアクションさせるの？」とか

ありますよね。

それを実現するためにエンジニアにお願いして実装しちゃう？

なんて工数の無駄ですよねー

 

そこで、簡単に紙で書いたワイヤーフレームを

アクションベースで考えて動きに違和感がないかなどを考えていくことです。

http://www.ideaxidea.com/wp-content/uploads/2009/09/note_2.jpg

 

これを作ることで、簡単に

実際に端末を使って、実際の表現をエンジニアなしで

最低工数で制作をできることが可能です！！！

 

それの改修がUXの向上につながりますね！

 

そんな感じでプロトタイプを作るのですが。。。。。

そのサービスをどれで制作をしようかって話が今回の本題です。

 

が、それはまた次回にします！

 

Bootstrapだからよろしくねと言われて......

こんにちわmimikasです。

この前会議中に「Bootstrapだからねよろしくねデザイナー」と言われて

心のそこで「ナンヤネンBootstrapって」って事で調べてみた。

 

vanidesign.blog.fc2.com

 

ざっくり言えば

・１つのHTMLソースでフレキシブルに動くサイトができるよ！

　※ブレイクポイントは４種類

　→PC(高解像度)

　→PC(ベーシック)

　→タブレット

　→スマホ

 

bootsnipp.com

・こんな感じにUIパーツがあるから、モックもすぐできるらしい、

　これが表示できません、これは作れませんなんて事もないですね！

 

ただデザイナーで気をつけない事もたくさんあって......

やっぱり勝手にフレキシブルで動くので

ある程度の定義つけが必要！

カラムで組むデザインってたくさんあるけど

Bootstrapは12カラムで組むシステムらしく。。。。

 

vanidesign.blog.fc2.com

を参考にデザインをしなくてはならない。

なんてこった。。。。。

 

12カラムデザインでのデメリット、メリットも

随時紹介できたらと思います。

ではでは