でザイナーらしからぬ

でなりの雑記。ツイッターで済ませたくないこと書くとこ。

愛するinvisionの話

denari01 Advent Calendar 8日目は予定を変更して突然invisionの紹介です。

本当は左右盲の話をしようとしたんですよ??笑

社内向けに紹介を上げようとしたのですが、これ社内向けにするメリットが少ないのでせっかくならブログに書こうと思って。

下記の意見は僕の個人的な意見・見解であり、事実を書き記したものではありません。 もちろん全文が虚構とはいいませんが、そこをご了承ください。

invisionとはどんなソフトウェアなのか

フラー社でも、副業のHxSでもちょくちょく使っているデザインツール。

フラー社ではあるプロダクトのプロトタイプを社内に披露するときに用いました。

一つのツールでデザインが一通り片付くツール。提供機能は下記

  • プロトタイプ
  • 簡単なファイル共有(sketchファイル共有・フォントファイル共有)
  • 画面にコメントを付ける機能
  • デザインのバージョン管理
  • デザイン駆動のプロジェクト管理

この度上記四機能とは別に、zeplinのような「いろんな長さや色を見れるinspect機能」がリリースされていたので軽くまとめてみます。

今回リリースされた新機能「inspect」について

この機能は比較対象としてはzeplinが筆頭に挙げられます。

zeplinと比較して困りそうな点は下記

  • Styleguide機能に相当する機能がない
  • 多分画面にタグ付けとかできない
  • コメントを付けるときに一回inspectモードからコメントモードへの切り替えが必要
    • 画面下部のコメントマークをクリックしてからコメントが残せるように

逆にメリットは、もちろん他の機能がたくさんあることと下記。

  • 画面左部にデザインファイルのレイヤー構造がそっくりそのまま出てくる

しかしこのメリットは正直そこまで重要でもないので、今のところinspect機能を単体で見たときにzeplinとの優位性は特にないというのが個人的意見ですね。

他の機能の紹介

せっかくなので軽く他の機能もまとめる。

prototype

比較対象として僕が紹介したいのはprott。日本製ですがこれが間違いなく今一番アツいツール。

invisionの優位な点

  • prototypeを作る上で細かいところに手が届く。prottにはない機能が数個ある。
  • prototypeにコメントを残すことができる。

prottの優位な点

  • prototype作成画面のインターフェースが使いやすい。
    • 特に遷移先の画面を選ぶのがinvisionより楽。
  • prott上でプロトタイプ(ワイヤフレーム)を作成することが可能
  • スマホからpaper prototypeをアップロードしたりできる
  • プロトタイプを作ったら勝手に画面遷移図ができる。

prottの画面遷移図機能は本当に凄い。あとワイアとかの低レベルプロトタイプを作ってビジネスが加速しそうですね。

自分は最初からSketchで作っちゃってドンドン完成度を上げる派なので重宝しないですが、prottぐらい手軽ならこのこだわりを捨ててもいいかも。

対象的にprototypeの細かさで言えばinvisionに軍配が上がるのも事実。一長一短ですよね〜

comment

比較対象とかは無いですね。そういえばprottってコメント機能あるんだっけ…有無がわからないです。

zeplinとinvisionにはありますよね。

zeplinのコメントは色が変えられて最高ですね。

history

バージョン管理ですね。Universionとかが挙げられると想います。

実はUniversionを使ったことがなくて恐縮です。コメント機能がすげえリッチなのと見た目がリッチなのは特筆できるかと。

バージョン管理ができるのはホントにうれしいですね。ロジカルに詰めるときに必要になります。

タスク管理

invisionはスクリーンをアップロードするとそれが上のような画面のカードの一枚に変わります。

非常に良いですね。タスクはどうしても企画・デザイン・・・とトップダウンに降ってくるものなので実際作成したスクリーンがカードになるアイディアは非常に合理的。

逆に言えばそこは弱点ではありますね。何でもかんでもinvisionでタスク管理できるわけではないです。

小規模チームでなんでもかんでも管理をやりたいならtrello。デザインに関するタスクだけを管理するならinvisionがいいのではないでしょうか。

まとめ

デザインをboostさせてくれるinvisionというツールは非常に素晴らしいですね。多機能のオールインワンツールの印象が強かったです。

適材適所にツールを使い分けるのも大切ですが、これを機会にinvisionを導入してデザイン以外のツールをさまよう時間を減らすのももいいかもしれません。

アイキャッチ画像がないのは時間がなかったからです。またこの記事は手直しするかも。

JSを使わずにブラウザ上で動くスライドを作る

この記事は「今年お世話になったCSS Advent Calendar」4日目の記事です。

3日目 : 今年お世話になったCSS Advent Calendar 2016 - Adventar
明日は登録者が今のところいないので登録しましょう。

CSSのGradientまわりは良い機能ですよね。クソみたいな画像リソースが減る最高の機能だと思います。

さて、突然ですがこちらを御覧ください。

f:id:denari01:20161204204637g:plain

こちらは、最近ではよく見るようになった、ブラウザ上で動くスライド資料になります。 しかしこちらのスライドは普通ではありません。

通常のブラウザ上のスライドは、JavaScriptでキー入力をハンドリングして次のページを表示していますよね。 しかしこちらのスライドではページ遷移にJavaScriptを使っていません。 JavaScriptがオフでも使えるブラウザ上スライド資料なのです。

実際の資料が下記リンク。まずはWebページをクリックして、キーボードの[tabキー]を押すと多分動きます。(変な設定とかプラグインが入ったブラウザだとダメかも??僕のChromeでしか動作検証していない)

http://denari.link/css_slide/
(数ヶ月前に行われた社内勉強会向けの資料のため、内容が一部変なものもあります。)

ちなみにこういう風に、スライドの端に(スクロールバーではない)白い枠線がついているスライドの場合は[Enterキー]を打鍵することで別タブにてリンクを開けるハズです。 f:id:denari01:20161204205814p:plain

ソースコードはこちら(docsがbuild後のファイル、srcがbuild前のファイルです。)

github.com

(お気づきの方もいるかもしれませんがソースコードを掲載している部分はJSが当たっています。そこはもう勘弁してください…笑)

動作原理

普通のブラウザ上で、[tab]キーを押すと、こういうふうな挙動でページ内のリンク(aタグ)を辿っていけますよね。

f:id:denari01:20161204204713g:plain

これを応用しています。

上記画面上で青くフォーカスされているaタグには :focus 擬似クラスが適用されます。

それを利用し、aタグの子要素として各スライドの1ページずつを作成して、:focusが付いたaタグの子要素のみを opacity: 0 に。他を opacity: 1 にしています。

スライドの1ページのテンプレはpugのmixinにして作成・管理しやすくしています。

感想

いや、本当にメリットがない。

時間をムダにするだけなので、普通にJS使えるブラウザ使ってください。くれぐれも真似しないように。

僕はもうちょっとだけ時間をムダにして、CSSで動くスライドを作るためのライブラリ的なものを作成しようかと思います。

準高専生、whywaitaとの出合い

f:id:denari01:20161203223000p:plain

この記事は whywaita Advent Calenar、あらため masawada 被害者の会 Advent Calendar の3日目の記事です。そう、masawadaさんは僕とwhywaitaくんの一つ上の年の電通大卒、今をときめくはてなのエンジニアなのですが…彼もまた、masawada Advent Calendarを毎年作っているのです。

それだけでなく彼は…

f:id:denari01:20161202162910p:plain

一人で全完する予定で居るようです

がんばれwhywaita！masawada先輩をみならって全完していこうな!!

昨日の記事をまねたクソジョークはさておき、今日はwhywaita所感を述べましょう。初めてwhywaitaに会ったのは2015/12/18の金曜日。電気通信大学構内で会いました。その日は高専カンファレンス1日前。そんなときに意気揚々とこちらに近づいてくる奴、一見して感じました。

f:id:denari01:20161203223002p:plain

聞いてみれば在学生とのことでした、それにしては id:marin72_com と仲がよく、あと何故か凄い親近感を得ました。

その日はなんか、適当に挨拶して、あと初対面なのに雑用を押し付けた事を覚えています。あの時の僕は冴えてた。笑 (ほんとうにあのときありがとう)

翌日、高専カンファレンスが開催されました。僕は運営でバタバタしていましたが、彼も企画に参加してくれてたのかな??

バタバタが一通り終わったのは懇親会でした。最初に声を欠けてくれたのは全然whywaitaというわけではなく、hogasくん( id:hogashi )という、whywaitaの後輩がやってきてくれました。

彼はなんだか僕のことをちょっと目をつけてくれてたらしく、割とすぐに話しかけてくれました。hogasくんに声をかけられたのは人生でも指折りでの嬉しさがありましたね。hogasくんもうすぐで20じゃね?飲みに行かねえと。

そうこうしてなんとなくhogasくんと話をし、また別の人と話をすると、今度はいつのまにやら電通大オタク集団に単騎乗り込みしてました。その集団はめっちゃオタクしていました。さっきまでめっちゃいい子に見えたhogasくんもこころなしかオタクに見えます。sukukyonはオタクでしかない。

そこに追々来たのがwhywaita。その時思いました。

f:id:denari01:20161203223005p:plain

聞いてみれば在学生とのことでした、たしかにsukukyonくんhogasくんなどの在学生とも仲よさげに話しています。

翌日、僕は朝からプレゼンで登壇していました。彼は僕と同じ時間帯で別の部屋にて登壇していたみたいです。彼はプレゼン中で僕の発表を紹介してくれてたみたいでした。それを知ったのは数ヶ月もあとの話でしたが、1年経ってしまうまえにこの場をかりてお礼します。本当にありがとう。

イベントはつつがなく終了しました。あの時会ったオタクたちとはまあSNSでたま〜に話す感じでした。whywaitaはオタクなのにアイコンがいいカンジで今でも時々びっくりします。

ある日、彼が主催するイベントである dentoo.lt (電通大関係者がLTをするLT会)があって、興味があってお邪魔させてもらいました。開会前、会場ではAdvent Calendar通り魔のmasawadaさんがDJっぽいことを軽くしていました。そして開会すると司会っぽい人が登壇します。その時僕は思いました。

f:id:denari01:20161203223028p:plain

聞いてみれば在学生とのことでした、でもdentoo.ltの主催が高専生なわけないじゃんね。

そして彼は登壇します。インフラやネットワーク周りの話をしている彼を見て僕はこれを思いました。

f:id:denari01:20161203223029p:plain

そして僕は彼のことを今でも「準高専生」と形容しています。いや、だって高専生じゃんこんなもん。高専以外にこんな生き物居ねえ。

つい先日、敬意を表して僕が主催のkosen10s LT#5 に参加をしてもらいました。何よりも彼が興味を持ってくれていたためです。

参加者と楽しそうに話をし、また登壇時も楽しそうにしてくれていて、呼んでよかったと思いました。周囲の反応もみんな仲良くしており、 kosen10sというコミュニティが、限定的なコミュニティであることの大きなデメリットを確認するまでに至りました。

彼は高専生ではないのだけれど、優秀で気さくで、あととてもいい人です。何故か常に笑顔だしね。そんな彼とは、今後もぜひ仲良くさせてもらいたいなあって、おもいました。

(今日の記事エモいね。笑)

最後に、kosen10s LT#5 に来てくれたときに彼に抱いた一番大きな感想を書くことで締めます。

f:id:denari01:20161203223030p:plain

このAdvent Calendarのきっかけ

f:id:denari01:20161202162908p:plain

この記事は denari01 Advent Calenar、あらため masawada 被害者の会 Advent Calendar の2日目の記事です。

masawadaさんは僕の一つ上の年の電通大卒、今をときめくはてなのエンジニアなのですが…彼もまた、masawada Advent Calendarを毎年作っているのです。

それだけでなく彼は…

f:id:denari01:20161202162910p:plain

一人で全完する予定で居るようです

いやはや、すげえな、1記事も落ちないんだろうな、すごいなすごいな〜。というかこれはもう、Advent Calendar 見た目がそもそもすごい…www

この調子でブログを書く彼を、煽った僕が馬鹿でした…

いや、煽ろうと思ったわけじゃなくて、面白かったからツイートしただけ…という言い訳だけしておきます。笑

まあともかく、下記のような会話が生まれてしまったんですねえ。

ツイートを見た数秒後

その結果生まれてしまったのがこちら。

f:id:denari01:20161202162912p:plain

さすがに自分一人ではどうにもできないと、頻繁にお助けを求めていたのですが、9人の方が助けてくれるみたいです。ただしこいつらは大体、僕を煽る気満々なので、正直ビビってます。どんなヤリが僕の心に刺さるのか…

しかしまだまだ予定はスカスカ、本業は楽しすぎて手を抜きたくないし、他にもやりたいデザインがある僕はブログをたくさん書いている場合ではない気しかしていないので、みなさんの寄稿をお待ちしてます。

もうほんと、煽ってもいいし心えぐってもいいからほんと、ほんと頼むわほんと。

denari01の自己紹介

f:id:denari01:20161201022656p:plain

気づけば半年ブログを書いていないのですが、今日からAdvent Calendarで記事を大量に書くことになりました。

こちらの記事はdenari01 Advent Calendar 1日目の記事です。2日目は明日上がりまーす。

1日目はざっくり自己紹介をしておしまいにします。

f:id:denari01:20161201022700p:plain

プロフィール
年齢 21
出身 兵庫県
学歴 明石高専 電気情報工学科卒
職業 デザイナー / Web中心のエンジニア
正確 ナルシスト

f:id:denari01:20161201022703p:plain

今年の5月まではWebやスマホアプリの開発をするプログラマだったのですが、6月にデザイナーになっちゃいました。

学生のころから開発とデザインの二足のわらじ(笑)で頑張ってきたのですが、軸をデザインの方に移そうと思って転職しました。

ロゴ・印刷物・Web・スマホ…とグラフィックデザインやUIデザインと呼ばれる分野は大体網羅しました。

建築とプロダクトは1mmもできてません。hmmm...

上の画像は、高専4年生から現在に至るまでのロゴデザインをサマリーとしてまとめたものです。

幾つか闇が混じってますね その話は多分追々出てくる。

軸をデザインに移した理由はといえば、僕のやりたいことを考えたんですよね。

確かにプログラミングは面白い。コードを書いたらそれが挙動し、命令を組み合わせて挙動をきれいにしていく作業はさながらパズルで超楽しい。

しかし、僕としてはそれは趣味の域を超えた瞬間からすこしだけモチベーションが下がってしまった。 他人に口を出され、ボロボロになったコードをなおしていく、リファクタリングがあまり好きではなかった。

対象的にデザインは、人の事を考える推理ゲーム + 知識ゲームみたいなところがある。 プログラミングとはまた違った楽しみなのだが、他人に口を出されることが真剣に「面白い」と思えた。

そういう観点から仕事として軸にするのはデザインが良いなあと考えるようになりました。

今では人にUIを見せ、まずはその時点で想像を超え、そこからフィードバックが来てもそれに想像を超えた対処を見せるのがたまらなく楽しいのでデザインは辞められません。

f:id:denari01:20161201022705p:plain

前職ではiOSが多分一番苦労したんだけど、最近はiOSの流行りを少し追えてなくて遅れ気味。早く勉強しないと。Webはまあ一応それなりに追ってます。

基本的なスキルセットは上記。jsはちょくちょく勉強してます。Angular以外(重い腰が上がらないだけ)。

jsといえば最近気になっていてあと気に入ってるのはRiot.js。あれは可愛いし好きだけど汚いコード書きそうで怖いからちゃっかり勉強していこうという感想。

一番最近やった案件はPHPの某有名CMSで、なんだかなあという感じでした。

Pythonが好きで、PyCon JPのスタッフとかもやってます。

きっかけは同級生にカレーメシ先輩( id:nwpct1 ) がいた事ですね。

最初はRubyを書こうとか、でも生きていたらWordPress案件が降ってくることがあるからPHP書こうとか、いろいろLLをうろちょろしていたのですが…

Djangoに出会ったのがデカかったですね。超開発しやすいし、超わかりやすい。

Pythonのコードは僕の中でなんかちょうどいい塩梅なんですよね。型とか。

もうちょっと型をしっかりしたいと思ってるときに Type hints が来て興奮したのはもはや僕だけじゃないはず。

そんな僕が最初に書いたのはHTML / CSS。

高専のときはWeb研に所属しており、Webサイトづくりが趣味でした。

今では仕事になっちゃいました…

その名残で今でもWebが一番得意。

f:id:denari01:20161201022708p:plain

そんな僕はナルシストなんですね。いやぁ、うん。

人間さあ、みんな自分のことが可愛いと思うんですよね〜。

僕はまあ、それを隠さずあえてナルシストを公言することでいろいろ生きやすくなってますね！

自分の意見に自信があるとき、いかなる場合においても「自信の理由」については理解されやすい。

あと特筆すべきは、kosen10sで一番偉いっぽいマンやってます。いやこれは最近実はひっそりと影を潜めるようにしてるんですけどね。その話はまた別の日に。

kosen10sっていうのは高専出身の僕の同い年の人を集めたコミュニティで、普段はSlackで会話したりたまにLT会をしたりしてます。

ちなみに marin72_com っていうのはおもしろおばさんで、その…ババア感さえなければ今をときめく素晴らしいお方です。 そんなこと友人に言っちゃいけないね。てへぺろ

本当に周囲に恵まれています。共通のコンテキストを持っているせいか同級生高専卒のみんなは本当に話が合うし、毎日楽しませてもらってます。

そんな僕について書くのがこのAdvent Calendar。 年末なんで、いろいろ吐き出してもらえたら、 僕はひっそり傷つくけれど まあ嬉しいかなあって感じです。

が、しかしですよ。

執筆者が全然足りてない…

www.adventar.org

もうほんと、何書いても良い。普段の恨みつらみを綴ってもいいから、ホント頼むから、みんな書いてええええええええ🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏

あしたはmasawadaさんへの愚痴です。おたのしみに！