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

naMemo

うぇっぶやアプリやデザインに興味深々なキモオタのメモ

Flinto×Cookpad〜プロトタイピング開発のいま〜 に行ってきた

プロトタイピングツールFlintoのイベントに行ってきたので、イベント内容と、今後活かせそうなことなどをメモ程度に書く http://connpass.com/event/22125/

イベントの流れ

  • FlintoのデザイナーであるNathan Manousosさん、エンジニアの奥井さんが来日して登壇。Flinto for Macについてお話
  • 合わせてクックパッドのデザイナー池田さんがFlintoの活用事例をご紹介
  • 最後に奥井さん×池田さんの対談&質疑応答

Flinto For Mac

  • デザイナーのためのプロトタイピングツール
  • 画面遷移から、ジェスチャーに応じたインタラクティブなアクションまで作れる
  • ルーセルのようなスクロールビューの動きも作れる
  • サイドバイサイドでプレビュー見ながらプロトタイピングできる(このへんはPrincipleもできたきがする)
  • Sketchとの連携が強そう。プラグインを入れてFlintoにまるっと画像をもってこれるらしい(ちゃんとつかってない...)
  • 昔はブラウザのみのツールだったようだが、先日Macアプリをリリース
  • 日本語対応した https://www.flinto.com/ja/mac
    • メールサポートが日本語で受けられる
    • 奥井さんが日本語ローカライズに携わってる(というか奥井さんがやってるw)

イベント内容

クックパッドでのFlinto活用事例

  • クックパッドでは、必ず企画がきて、プロトタイピングして、実装している。プロトタイピングは紙でやったりFlintoつかったり。
  • Flintoをつかってプロトタイピングする利点
    • アプリの体験が、アプリらしい動きでそのままつくれる。細かいUIやトランジッションが表現できる
    • プレビューがほぼリアルタイム
    • オフラインでもつかえる
  • 事例:チャットヘッド的なUI(写真撮り忘れた〜〜)
  • 動画に書き出してyoutubeにアップしてgithubで共有しているっぽかった(この辺の共有方法、ちゃんと質問しにいけばよかったかも)

奥井さん×池田さんの対談

  • Flintoをつくったきっかけ
    • echofonつくってたときに、デザイナーを探していて、Nathanにお願いしていた。そのとき、Nathanさんは静的な画面のデザインしかみせられないことにフラストレーションを感じていたそうだ。
    • そこで、最初はechofonの開発時、デザインの意図を伝えるために、FlintoのWeb版をつくった
    • 自分たちの身の回りの課題を、サービスに。
  • 最初はWebツールだったが、なぜネイティブに?
    • ブラウザで作れる動きは限界がある。レイヤーベース、ジェスチャーベースのトランジッションなど色々なことがしたかった。
  • ユーザが欲しいといった機能はつけていく。Twitterやメールは常に見てる(かなりCSからの意見を重視して開発している印象だった)
  • FlintoのプロトタイプをFlintoでした?
    • リリースの3ヶ月前からできるように。
  • 仕事のやりかた
    • 奥井さん、Nathanさんの二人でコワーキングスペースでやってるが、今はほぼリモート
    • アメリカだと、リモートで仕事をするにはどうしたらよいか、ということを常に考えているらしい。ここは日本と大きく異なる。
  • 凝ったプロトタイプを実装するのは、エンジニアが大変という課題がある。
    • 奥井さん的には、エンジニアが苦労するのを狙ってる。エンジニアは、限界を乗り越えてがんばってUIをつくってほしい
    • デザイナーもエンジニアも新しい表現をつくるためにがんばってほしい。画面遷移ベースのUIだと、それしかできない表現で完結してしまう。
  • Flintoでつくったものをどうエンジニアに渡すべきか?トランジッションのコード書き出しなどはできないのか?
    • 今のところ考えていないが、例えばjsonで書きだして、このライブラリとこのライブラリつかってこういう値にしてください程度のことはできるようにしたい。完全書き出しはしない。
  • プロトタイプを作って渡すまでがデザイナーの仕事とおもっていてはだめ。理想は、プロトタイプは、ごみ。
  • 他のプロトタイプツールがたくさん出ているけど...
    • ユーザビリティを考えるとき、魔法が使えたらこの機能をどう実装する?ということを常に考えている
    • 他社を気にすると後追いになる、いつまでもおわらない、ので無視
  • 最終的な目標は、アプリ全体をプロトタイプしてもらうこと。アプリケーション全体が見通せれば見通せるほどより良い開発になるのでは?と考えている
  • flintoでつくったものを共通のコミュニケーションとするのが理想
  • デザイナーがアプリを作りたいと思った時に最初に開くのがFlintoであって欲しい

参加してみて

  • Flinto自体はとてもおもしろそうなツールで個人的には使ってみたいが、仕事では既存のUI改修のような案件が多いので、画面遷移ぐらいしか動きがなく、プロトタイピングしても意味がないような気がする(むしろプロトタイピングする時間がもったいない)
  • 上記のこともあり、プロトタイピングがどういう場面で役に立つのか気になった。新規サービス立ち上げ、UIリニューアルのとき、特殊なインタラクションの機能追加をするとき?
  • ただ「こんなUIのアプリつくりたいなー」というデザイナーの妄想を具現化できるのはすばらしいと思う。デザイナーもエンジニアも、時間のなさとか、実装の難しさといった理由で新しい表現を諦めがちだけど、(奥井さんもおっしゃってたが)限界を超えて新しい表現に挑戦することもやっていくべきだよなーと思った。
  • 自分たちのフラストレーションをサービスにする、カッコイ!

余談

イベントとは全く関係ないが、他社のデザイナーさんやエンジニアさんと話す機会があり、かなり刺激になった。 お話したデザイナーさんの会社では、デザインレビューをgithub上でしているらしく、面白いレビュー方法だなあと思った。 私の会社ではチャットツールに投げたり、最終的な成果物をConfluenceにまとめたりしているが、変更履歴の可視化が面倒な時があるし、チャットだとあとで見直したいときにログがすぐ流れる。 (ただ、UIデザインの場合、ひとつのPSDファイルをみんなで編集することってあまりないので、あんまりgitの恩恵に預かれないかも...) とりあえず個人リポジトリで試しにやってみようかと思う。

IT×教育のハッカソン

でたよ

  • Tokyo Hackademicsという教育×ITをテーマにしたハッカソンに出ました

www.tokyohackademics.org

  • エンジニア3人、デザイナー1人(私)の4人で出た(でも結局エンジニアの1人をデザインチームに引き入れたw)
  • わたしはUIデザインとかHTMLのマークアップやった(キャラデザは別の人)

つくったもの

f:id:oooNAKi:20150518210312p:plain

概要

  • 小学校教育の現場で利用することを想定したWebサービス
  • 勉強のモチベーションの維持が難しい小学生(特に低学年)に、ゲーム感覚で楽しく宿題をこなしてもらう
  • 宿題リストの中の宿題をこなすと経験値がたまって虫が進化する
  • 宿題をやっていないと仲良し度が下がって虫が悲しむ
  • 宿題をやると仲良し度が上がって虫が喜ぶ

f:id:oooNAKi:20150518205500p:plain

  • 教師は児童の宿題状況の把握ができる(誰が提出していて誰が未提出か、など)
  • 教師は管理画面で宿題を出し、その宿題が児童の画面に反映される

f:id:oooNAKi:20150518210321p:plain

  • Angular.jsとfirebaseをつかった(でも私はあんまり触ってない)
  • slackを使ってコミュニケーションとった このへんは完全に趣味

感想

  • 初めて社外のハッカソンに出たけど、やっぱり短い時間でインパクトのあるプロダクトが評価されるなーと思った。プレゼン含め。
  • 動きがすごいリッチなゲームをWebアプリで作ってたり、IoTのプロダクトつくってたりするグループとかすごかった。
  • 今回わたしのグループでは「小学校教育で必要とされてそうなもの」をまじめに考えてつくったけどまじめに考えすぎてありがちなものになった気がする。
  • 今回Anguler触るいい機会だったのに一切やらんかった…
  • デザイナーのくせにグラフィックデザインができない。つらい。このへんはまじで勉強したい。
  • リキッドレイアウトのコーディングがむずかしい。レイアウトがめちゃめちゃ崩れた。
  • ハッカソン出ると技術力のなさに絶望するのでもっと勉強したい。
  • でもハッカソンやっぱりたのしい。

Aiデータを印刷業者に入稿する時の覚書き

頻繁にミスるのでメモ

アートボードのサイズ

塗りたし、文字切れに気をつける

画像ファイルのリンク

  • 同じ階層に入れておく
  • リンク切れが起こってないかチェック

透過psdファイルをリンクするとき

同人でデザインの勉強

最近Emberで、良いなと思ったデザインを収集するのにハマってます。

Webデザインとか、UIデザインとか、フライヤーとか中心に集めてるんですが
ひさかたの » 同人誌即売会での「おしながき」を工夫してみたポイント7個
こちらの記事を以前見て以来、「同人即売会で使われてるお品書きってけっこうデザインの勉強になるんだなぁ〜」と思ったので、Pixivで見つけた素敵な同人誌表紙やお品書きも集めています。
ちなみに、お品書きとは、各サークルさんが即売会で販売する同人誌が一覧で分かるチラシみたいなものです。

ということで、最近良い!と思った同人サークルさんのお品書きをあげていきます。
※私の趣向上、BLの同人誌もあるので苦手な人はご注意下さい

サークル:あばらが痛い

タイポグラフィ・配色がハイセンスなサークルさん。
サークルロゴが毎度おしゃれです。
あと、弱ペダ面白いです。

【全ケイ】お品書きとノベルティ by シン太 on pixiv

カップリング表記が分かりやすく、目的の同人誌がすぐ見つかります。


スパークお品書き by シン太 on pixiv

上部・下部のパターンがおしゃれです。
円のロゴから、「Z」の形で自然に視線が流れます。

サークル:Nightholic

Pixivで「お品書き」で調べまくってた時に見つけたサークルさん。
音ゲーが分からないので何のキャラか分からないのがとても残念。
サークルロゴがポップで可愛い。

【JB4】お品書き by 朝倉トキ on pixiv

六角形モチーフが今っぽい!

サークル:ごもくごはん妄想部

ハイキューのサークルさん。
最近ハイキュー流行ってますね。

【IA7】お品書き【岩及】 by ゆうやGP2【W10】 on pixiv

新刊が分かりやすい!(ジャンプ率?)
見出しについているパターンが可愛いです。


以上です。
もうすぐ夏コミなので、たくさんの素敵なお品書きがPixivで発見できる時期ですね。

書いてたらコミケ行きたくなってきました。

パララックス効果をスマートデバイス対応させる時につまづいたこと

最近、あちこちで話題のパララックスデザイン。
流行りに乗じて挑戦してみたら、まんまとつまずいた。

CSSだけで簡単にパララックス効果をつけられる!

HTML

<section class="img_wrap">
	<div class="background_img">
		<div class="h1_wrap">
			<h1>Parallax!</h1>
		</div>
	</div>
</section>

CSS

.img_wrap{
	height: 740px;
}

.background_img{
	background-image: url('sample.jpg');
	background-attachment: fixed;/*背景画像を固定させる*/
	background-repeat: no-repeat;
	background-position: center top;
	/*背景画像を幅いっぱいに表示*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
	text-align: center;
	/*background-size:coverのIE対策*/
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample.jpg',sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample.jpg', sizingMethod='scale')";
}

パララックスサンプル

詳細は下記の記事参照
パララックスデザインを実装するときに気にしたこと4つぐらい

CSSだけで、簡単に実装できた〜!と調子にのっていたら、落とし穴が...

スマートデバイスでbackground-imageが拡大される問題

スマートフォンタブレットだと、なぜか背景の画像が拡大表示されるという問題が...。

右往左往して、Stackoverflowに似たような問題を発見した。
css3 - How to set body background image as cover for ios devices - Stack Overflow

background-attachment: fixed;が良くないらしい?ので
メディアクエリを指定して、タブレット以下のサイズの場合は
background-attachmentをデフォルト(背景画像を固定せず、スクロール)に設定した。

@media screen and (min-width : 320px) and (max-width: 1024px) {/*スマフォ・タブレット用*/
	.background_img{
		background-attachment: scroll;
	}
}

メディアクエリの指定方法は以下の記事参照。
web帳 | CSS Media Queries(メディアクエリ)を使用した指定方法

しかし、この設定、スマートデバイスだとパララックス皆無になる...
もっとスマートな方法があれば、誰か教えてください…

最終成果物的なもの

今回、パララックス効果に初挑戦して、所属している研究室のWebページの紹介ページを作った。
静岡大学大学院情報学研究科 杉山岳弘研究室 3年生ページ

レスポンシブデザインのブレークポイント

レスポンシブデザインをする時のブレークポイントが未だによく分からんのでメモ

 

一般的な数値(iPad, iPhone準拠)

@media screen and (min-width:480px){//スマホ}
@media screen and (min-width:768px){//タブレット} @media screen and (min-width:1024px){//PC}

某演習が終わった

今期一番力を費やした演習が終わった

作ったものはこれ
Nostradamus

このWebサイトのコンセプトとしては,グラフで可視化したIT機器の数値的な未来予測.
過去から現在までのIT機器の情報を集め,過去・現在・未来予測した結果を基にグラフを作成する.
グラフから見えてくることをまとめた記事を作り,ユーザがIT機器について深く知ることを可能にする.

こんなかんじ

未来予測とかだいそれたこと言ったのに,結局未来予測できてないのをめちゃめちゃ突っ込まれた
技術力を考慮しない見切り発車企画は良くない.
…と考えると技術力があればなんでもできるのかなと思う.
技術があれば,企画の段階で「これは実装できないから無理」とか自由な発想を阻害することはないんじゃないか.

このサービス構築においてわたしはフロントエンドのことをとにかくやった.

誰かにこのサイトのデザイン評価で「デザインに執着が見られた」って書かれるくらいこだわった.無駄に.

この実装の際,レスポンシブ・ウェブデザインを初めてがっつり自力実装した.
いつもは何らかのフレームワークに頼ってたけど.
レスポンシブ難しい.タブレットの表示だけうまくいかなかった.

あとCompassというCSSメタ言語であるSassのフレームワークを使ってCSSを書いた.
すごく便利.
CSSはどこに何書いたかすぐわからなくなるけど,要素ごとに細かくファイルを分けて1つのファイルにまとめて@importすることで,割とCSSの記述が楽にできた.

バックエンド担当を考慮した実装ができなかったのが残念だったかなと思う.
今回はCakePHPを使って実装したので,私がもう少しCakeを学んでいれば,バックエンド担当が楽になったかも.

フロントの設計実装だけじゃなく,データベースの設計とかもちょっと考えられたのは面白かった. メンバーと大もめして泣いたのは良い思い出.

いろいろ大変だったけど,メンバーの皆さんありがとうございました.