開発チームの一員としてのデザイナー

開発チームでのレビューのいいところ

複数の職種で構成されているため、さまざまな視点からの批評を集めることができます。
エンジニアは機能的な破綻がないか、条件による表示を想定できているか、堅牢性を保つことができているのか、と言った視点で批評を返してくれます。お客様と向かいあっている方からは、お客様に対して自身が機能や画面説明ができるのかという視点で、マーケティング担当は有用なデータが取れるのかという視点で、それぞれフィードバックを返してくれます。

悩ましいところ

デザインチームでレビューを始めた

シタテルのデザイナーは週に1回情報共有のための定例会を行なっていました。各プロジェクトの進捗を共有することを目的にしていましたが、みんなでデザイン力を上げようということで、他サービスのデザインレビューもやってみることにしました。

意見がほしいときは、以下のテンプレートを使ってGithubにissue化します。見てほしいデザイナーにアサインをして、後はみなさんの意見を待ちます。

レビューの仕方は、わたなべなつきさんの「デザインチームでよりよいコミュニケーションをおこなうための工夫」を参考にさせていただきました。

レビューをしてみる

3週間やってみて

デザイナー定例でみんなで振り返って以下のような感想があがりました。やってみた感覚と共に、もっとよくするためのアイディアも色々出てきました。当たり前のことなんですが、実際にやってみるって本当に大切ですね。

これからもレビューを重ねていって、私たち自身のデザインを見る目を育てながら、チームで成長できる方法をTryしていきたいと思います！

こんにちは！シタテル株式会社UI/UXデザイナーの田仲です。
今回はシタテルのデザイナーが使っている、デザインツールをご紹介します。

Sketch

デザインの作成はSketchをメインで使っています。去年まではPhotoshopがメインでしたが、下記で紹介するAbstract導入をきっかけに、Sketchをメインにしました。

Photoshopに比べると、とても軽いのでストレスなく使える点が気に入っています。アップデートが頻繁にあるため、その度に少し迷うこともありますが、アップデートでの変化を発見することが楽しみのひとつでもあります。
便利なプラグインもたくさん出てきているので、個人で試してチームにも導入していけたらと考えています。

Abstract

Sketchのバージョン管理ツールです。同じSketchファイルを複数のデザイナーが修正したり、サポートしあえるようにしています。

先日SketchのバージョンにAbstractが追いついていないことがあり、気がつかずSketchのバージョンを上げた時にSyncできない問題が起きてしまいました。（その時はSketchダウングレードして解決しました。）気軽にSketchのバージョンを上げられないという点は、微妙だなと感じています。
現在は複数人で作業しているプロジェクトは１つしかいない状態なので、もう少し共同で作業するプロジェクトを増やし、お互いの知見を増やすことにも活かしていけるような使い方をしていきたいなと考えています。

Adobe Creative Cloud

PhotoshopやIllustratorは、Sketchでは作業しにくい写真の加工、パネルや印刷物の作成を中心に使っています。

他にも、XDは気になる機能が次々に出ており、将来的にツールをAdobeに集約できると、データの互換性やコストなどの面でメリットがあると考えています。まだAbstractとSketchの方が便利だという結論から移行は考えていませんが、最新動向には日々注目しています。

Zeplin

デザイナーが作ったデザインをエンジニア確認できるツールです。開発内でのレビュー、最終的にエンジニアが実装するときに使っています。

コメントができる点はinVisionと変わりがないのですが、サイズやカラーコードがわかるだけでなく、アイコンのダウンロードなどもできるので、デザイナーとエンジニアのやりとりを減らすことができています。今後はよりエンジニアとどうやったらもっと便利になるかを話し合い、ガイドラインなどとしても活用できるようにしていけたらと考えています。

InVision

プロトタイピング・レビューに使用しています。

InVisionはコードなどの情報がないので、デザイナーとエンジニア以外の生産や営業などのメンバーがレビューに参加する際に使っています。シタテルでは開発以外の職種のメンバーともデザインの段階から頻繁に意見を交わしています。これからも部署問わず、よりよいプロダクトをつくり上げるためにコミュニケーションを活発にしていけたらと思います。

以上、シタテルで使っているデザインツールのご紹介でした。
シタテルでは、積極的に新しいデザインツールや機能を試し、今よりよりコミュニケーションしやすい＆デザインしやすい環境となるものがあれば乗り換えていきたいと考えています

こんにちは、デザイナーの藤村です。
SPECという受注生産のためのサービス開発に今年の2月頃から関わっています。
→ SPECの説明はこちらで

SPECではサービスの一環として、受注販売用Webサイトを作成するためのCMSを提供しています。私は仕様検討と共にCMSの画面デザインをしています。今回は最近のなかで一番リテイクの多かった、サイトの公開/非公開機能のUIができるまでをご紹介します。

実装が決まるまで

当初SPECのCMSには「サイトを非公開にする」という機能がありませんでした。いずれ必要になるけれど、優先すべき開発が他にあるという判断で実装待ちになっていました。クライアントさんには、要望があればシタテルに直接ご連絡をいただくようお願いしていました。

が、そうは言っても間違えて公開してしまう、ということは十分に考えられます。開発チームでも議論を重ね、いよいよ実装することが決定しました。

▼当初のCMS画面

まだ公開していないサイト。公開ボタンがあります。

公開済みのサイト。ステータス表示として「公開中」はあるけれど、非公開にできるUIはない。

デザイン第一弾：とにかくシンプルに。

まずはこんな風に作りました。

画面の要素を最小限に、操作に迷わないように操作ポイントの要素もできるだけ少なく、という方針で作りました。「非公開」と書いてあるところをクリックすると選択肢が出てきます。どの状態に変更したいか選ぶと、ダイアログで本当に公開するのか聞いてきます。OKすると公開されます。ダイアログは「うっかり公開」を防ぐために付けました。

▼こんな感じ

ちなみにSPECチームでは、デザインを作ったらすぐにチームメンバーに見てもらいます。エンジニアもプロダクトオーナーもみんな見ます。気になった人がコメントを入れます。今回は画面遷移の変更というほどではなかったので、一気にデザインを起こしzeplinにアップしました。

表示と状態の微妙な関係

エンジニアから早速ツッコミが入りました。

「表示と状態にズレができる瞬間があるため、作りが複雑になり今のスケジュールでは工数が足りない。再考してほしい」。最初は理解ができず「？？」となっていました。が、よくよく考えてわかりました。

①のときは、表示上は「非公開」になりますが、まだ本当にサイトが非公開になったわけではありません。保留の状態です。ダイアログで「非公開にする！」とした時点で、実際にサイトが非公開になるのです。つまり、①〜②〜ダイアログのあいだは、公開状態と表示にズレが出ているわけです。

表示とは ＝ 画面に何と書いているか
状態とは ＝ 実際にサイトが公開しているのか、非公開なのか

これがなぜ複雑なのか？
プログラム上、やらなければいけない制御が増えるから、です。

「非公開にしたい！」って言ったけど、やっぱりもうちょっと公開しておこうとなった場合、表示は「非公開」に戻っていなければいけません。「やっぱり非公開するのやめた」と言ったはずなのに表示が公開のままだったら、使っている人は混乱してしまいますね。使う人は気づかない部分ですが、こういう処理をきちんとしておくことはとても大事なことです。

実装の複雑さ、ユーザーへのケア、デザインするときに考えておくべきポイントはたくさんあります。フィードバックをもらったことで気づくことができました。ということで、チームメンバーのアドバイスをもとにデザインを修正しました。

デザイン第二弾：ボタンひとつで変わる世界

意外とサクッといきました。

▼こんな感じ

「変更」というボタンを追加しただけです。

第一弾のデザインが複雑だったのは、最初の画面で表示の切り替え「だけ」を行ったことが原因でした。であれば、表示と状態を「同時に」行えるUIにすればいいのです。最初の画面ではダイアログを呼び出すだけにし、ダイアログ上で操作するように変更しました。ダイアログでの操作ひとつで、状態と表示を同時に切り替えられるようになりました。ステップ数も、最大4つあったのが3つに減りました。万歳。

さあ、実装だ！、と思っていた矢先、仕様追加の依頼が入ってきました。。

（次回につづきます）

こんにちは！
シタテル株式会社UI/UXデザイナーの堤です。

webサイトやメルマガで使う画像やバナーなどを作成する際に、サクッと手元で圧縮できる環境を用意しておくと便利だったのでご紹介します。
今回はgulpとパンダでお馴染みのTinyPNGやWebPに関するプラグインを使用して圧縮・生成します。

今回やりたかったこと

• とにかく手軽に圧縮したい
• 圧縮とともにWebPも一緒に生成したい

導入方法はNode.jsがインストールされている環境でプラグインをインストールします。

$ npm install gulp gulp-tinypng-compress gulp-webp

ディレクトリ構成

gulpfile.js
└images
　├ src //圧縮元の画像ファイル置き場
　└ dist //圧縮後の画像ファイル置き場

gulpfile.js

const gulp     = require('gulp');
const tinyping = require('gulp-tinypng-compress');
const webp     = require('gulp-webp');

const paths = {
    srcDir : 'images/src',
    dstDir : 'images/dist'
}

gulp.task('webp', function () {
    gulp.src(paths.srcDir + "/**/*.{svg,gif,png,jpg,jpeg}")
        .pipe(webp())
        .pipe(gulp.dest(paths.dstDir));
});

gulp.task('tinypng', function () {
    gulp.src(paths.srcDir + "/**/*.{png,jpg,jpeg}")
        .pipe(tinyping({
            key: 'xxxxxxxxxx' // TinyPNGのAPI Key
        }))
        .pipe(gulp.dest(paths.dstDir));
});

gulp.task('default', ['tinypng', 'webp']);

• TinyPNGのAPI Keyは、Tiny PNGもサイトから取得します
• 無料で月500枚まで圧縮可能です

実行方法

$ gulp

// tinypngのみなら
$ gulp tinypng

// webpのみなら
$ gulp webp

WebPについて

Googleが開発している画像フォーマットです。
少し前まではWebKitを用いたウェブブラウザだけだったのですが、最新のEdgeや私が愛用するFirefoxはver65から対応するようで今後普及していきそうな気がしています。
https://caniuse.com/#search=webp

導入方法

まだ対応していないブラウザもあるため、cssで指定している背景画像の分岐はmodernizr.jsを使用して判別します。
modernizr.jsを参照すると対応ブラウザはclass="webp"、非対応ブラウザはclass="no-webp"というclassを自動的に付与してくれます。
あとはhtmlとcssを下記のように記載しておけばそれぞれ対応している画像を読み込んでくれます。

.webp .image {
    background-image: url("/images/background-hoge.webp");
}

.no-webp .image {
    background-image: url("/images/background-hoge.jpg");
}

<picture>
    <source srcset="/images/hoge.webp" type="image/webp">
    <img src="/images/hoge.jpg" alt="">
</picture>

まとめ

圧縮方法や使うプラグインはさまざまあり、外部サービスでも簡単に圧縮できるサービスはあるので、自分に合うものをいくつか試すのが良いかなと思っています。

最近LPで使用している画像を圧縮したのですがこれぐらい圧縮できました！

• 元の画像 3.3MB　※そもそもがデカすぎやしないかいというのはありますが、、
• TinyPNG 909KB
• WebP 446KB

通信環境はどんどん良くなっているものの、初回の描画までに時間がかかると離脱に繋がるため、これからも面倒くさがらずに（もっと楽な圧縮方法を追求しつつ）圧縮していきたいと思います！