よりぶろ

アプリのUIとかについて書いてく予定

UI

Sketch バージョン47で待望のLibraries機能が追加!されるので試してみた

以前から噂(中の人がアナウンスしてましたが)のあったSketchのLibraries機能。シンボルを別ファイルで管理できるようになり、複数の.sketchファイルで同一のSymbolを参照できるようになるのでは?と推測されていました。 sketchhunt.com バージョン45か46…

Sketchの本が出ます!&アンケートご協力のお願い🙏

このたびBNN新社様よりSketchの書籍を発売させて頂く運びとなりました まだサイトにも各種ストアにも情報は出ていませんが、絶賛執筆中でございます✏️ うまくいけば(紙の本としては)日本で初めてのSketch本になります さて今回、せっかく日本で出すんだし…

Sketchのバージョン41で追加された『シンボルのOverrides』を使ってUIデザインの状態管理をラクにする

Sketchが装いも新たにバージョン41に上がりました。 今回のアップデートの目玉は何と言っても『Nested Overrides』ではないでしょうか。

Flinto for Macの使い方 / バージョン1.2で追加された機能の紹介

この記事はFlinto for Macの使い方シリーズになります。 他記事へはイカから行けますぞい! 基本情報編 プロジェクト作成・機能紹介・基本操作 トランジション〜基本編〜 トランジション〜重ね編〜 トランジション〜接続レイヤー編〜 動画の埋め込み バージ…

Flinto for Macの使い方 / トランジション〜接続レイヤー編〜

この記事はFlinto for Macの使い方シリーズになります。 他記事へはイカから行けますぞい! 基本情報編 プロジェクト作成・機能紹介・基本操作 トランジション〜基本編〜 トランジション〜重ね編〜 トランジション〜接続レイヤー編〜(この記事) 動画の埋め…

Flinto for Macの使い方 / トランジション〜基本編〜

この記事はFlinto for Macの使い方シリーズになります。 他記事へはイカから行けますぞい! 基本情報編 プロジェクト作成・機能紹介・基本操作 トランジション〜基本編〜(この記事) トランジション〜重ね編〜 トランジション〜接続レイヤー編〜 動画の埋め…

Adobe Project Cometのデモ動画を見て何ができるか整理してみた

Adobeが発表したプロトタイピングツール、Project Cometの操作デモ動画が上がっていたので見てみましたぞい!な感想文です。 Cometの詳細については公式動画で大体のイメージが掴めます。 Meet Project Comet - YouTube さて今回見たのは以下の実演デモ。30…

始まりと終わりはシンプルに

UI

よく、難しいことを難しいまま言うのは伝える技術がない、難しいことを分かりやすく伝えられてこそだみたいな言葉がありますが、あれはデザインにも言えると思っています。 例えばシステムとして欲しい情報が利用者の住所だとして、それを素直に表面上に出し…

Dribbbleとかに投稿されてるUIアニメーションって本当に参考になるの?

久しぶりに終電で帰りまして、車内でインターネットしてたらこんな記事が目に入った。 モバイルアプリ制作に使いたい、ナビゲーションメニュースタイル5個まとめPhotoshopVIP | ああ、またそっち系かぁ。。などと思いつつ記事を読んでみたところ、予想通りア…

レイアウト指示書いらずになるAdobeのProject Parfaitがいい感じ

UI

Adobeがデザイナーとエンジニアのコミュニケーションを円滑にしてくれるサービスのβ版をローンチしていました。 Project Parfait (Beta) - PSD CSS Extraction, Measurements and Image Optimization Service for the Web プロジェクト名はParfait(パフェ)…

Android WearのDesign Principle読んだ。

出ましたね、Android Wear。基本的にはスマートフォンと連携して通知を受け取るためのプラットフォームのようですね。 で、Design Principleもあるんだろうなーと思ってサイトを覗いてみたら、予想通りありました。 Design Principles of Android Wear | And…

After Effects で作成したUIアニメーション習作

来たるべきデザイナ・エンジニアボーダーレス時代に備えるべく…ってなわけでもありませんが、長らくPhotoshopでアニメーションのプロトタイプを作っていたのを、そろそろAfter Effectsに移行しようかなあと年末に思い始めて早2週間。 小一時間ほどですがさっ…

2度目以降のアラート

UI

銀行のATMでお金をおろしたら「紙幣をお取りください」のコールが2回目から音量でかくなってビビった。2回目からは変化する、この考え方は持っていて悪くなさそうだ。

iOS 7とフラットデザインについての本を書きました。

ということで、今年の8月から執筆を進めていた本が出版となりました。 タイトルは「iOSフラットデザインの作法」です。 iOSフラットデザインの作法 作者: 泉本優輝,吉竹遼,津守優 出版社/メーカー: 秀和システム 発売日: 2013/11/30 メディア: 単行本 この商…

PNG EXPRESS 2.0.1 を試す

UI

これまでも何回か紹介している PNG EXPRESS ですが、先日ついにメジャーアップデート版の 2.0.0 が公開されました。 目玉はエクスポート機能の拡大で、なななんと Android 版のパーツ書き出しを解像度ごとに出力してくれるとのこと。Adobe Generator も Slic…

UIデザイナー必携のPhotoshopエクステンション3つ(PNG EXPRESS / SpecKing / SPECCTR)を使い比べてみる

突然ですが、皆さんはレイアウト指示書、好きですか? レイアウト指示書とは、デザイナーが開発メンバーにパーツと一緒に渡すドキュメントです。「このパーツとこのパーツの間は10px」とか「このフォントサイズは 34pt でカラーは…」みたいなレイアウトの詳…

自動化されたユーザーインターフェイス -TickとSpark-

今日、立て続けにあるテーマを内包したアプリを見つけたのでメモ。 ゆってもタイトルでネタバレしてますけどね。 個人的に興味のある「UIの自動化」が実装されたアプリの紹介です。 Tick Tickは言ってしまえばどこにでもあるようなToDoアプリですが、環境光…

モバイルアプリのデザインカンプにおけるレイヤー構造とリソースのネーミング

UI

がおおむね自分の中で固まってきたので晒してみる。 皆さん、デザインデータ作る時ってちゃんとレイヤーの階層とかネーミング、意識されてますか? 僕は入社時はそれはもうひどいもので、師匠に「吉竹さんのPSDデータ汚い…」と割と真顔で言われるほどでした…

Marvel - Dropboxと連携して使うプロトタイピングサービス

もう正直Flintoでいいだろ、と思いますが、プロトタイピングツール収集家の僕としてはひとまず紹介したかったので。 MarvelはDropboxアカウントと連携することでプロトタイプが作れるWebサービスです。 特徴としては ・無料 ・PNG / JPEG のみならず、PSDやA…

iOS 7のトグルスイッチにシャドウがかかっている理由

iOS7はフラットデザインではない そうそう、何故かトグルスイッチだけドロップシャドウついてるんですよね。 これ、不思議だなーと思ってました。他のボタンて大概影無くなってるのに、なんでこいつだけ? 最初は、iPod Shuffleのボタンからきてるって噂だっ…

プロトタイピングツール Briefs 入門 第2回目『アセット・ホットスポット・スクロール領域』

モバイルアプリ用のプロトタイピングツール Briefs 入門 2回目です。 Briefs ってなんぞやとか、簡単な使い方は 1回目 をご覧ください。 2 回目…っつーかもはや最終回なんですけど、は残りの便利機能「アセット」「ホットスポット」「スクロール領域」、その…

プロトタイピングツール Briefs 入門 第1回目『新規作成・ボタン配置・画面遷移』

来週社内で Briefs の勉強会を突発的にやることにしたんですけど、上司から「俺その日BD休暇(誕生月は1日有給が貰える)なんだよね…」という切ないメールが来たので、せっかくなので備忘録も兼ねて これ読めばなんとかなるよ的な記事を集中的に短期連載しま…

Briefs が 1.1 にバージョンアップして機能強化されたので紹介してみる。

最近 Briefs が 1.1 にバージョンアップしてすごく良くなったのに誰も話題にしてないっぽいので、布教活動も兼ねて紹介したいと思います。 Briefs は iPhone / iPad 用のプロトタイピングツールです。 プロトタイピングツールというのは、簡単に言うと用意さ…

Google Visual Assets Guidelines

UI

http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309 インターネットをさまよってたら見つけた。 昨今のGoogleのブランディングはとても整理整…

PNG EXPRESS - Photoshopでレイアウト指示書を作成する拡張機能

http://www.pngexpress.com/ シェアウェアなので試せていませんが、 ・レイヤー名のルール付けがめんどくさそう ・数値に修正が入った時にまた作成し直すのかな?(でもテキストだから簡単かも ・効果を込みで数値を出してくれるのかな? ら辺が気になりまし…

デザイナーがプロトタイプ作るんだったら Flinto がいい感じ。

https://www.flinto.com/ これまでいくつもプロトタイピングツールは見たり試したりしていたのだけど、最大の不満点が「NavigationBar / ToolBarのエリアを指定して、そこ以外をスクロールさせたい」だった。 Flintoだとそれがいとも簡単に実現できて、ちょ…

Firefox OS の UI ガイドライン

そういえばこないだ Keon 届きました。 https://marketplace.firefox.com/developers/docs/ui_guidelines まだ全部読んでない & Google 翻訳でざっと読み程度だけど、原則のところではちゃんと ・一貫性を持たせる ・手がかりとフィードバックを提供する ・…

Sunrise Foursquareのデザイナーが作ったカレンダー

ざっと説明を読むと、今はいろんなサービス経由で人はイベントを管理してるよね、GoogleとかFacebookとかLinkedInとか。だから1つにまとめて見よう、てな感じですかね。 触った感触はいい感じなのでしばらく使い続けてみようかな。 「+」ボタン長押しでクイ…

読んでおいたほうがいいユーザーインターフェースの本

UI

http://ux.stackexchange.com/questions/74/must-read-user-interface-book ちょっと前のポストっぽいけど。 いくつか聞いたことのないタイトルがちらちら見えるのであとでチェックしよう。 このサイトは初めて知ったけど、けっこう面白いですね。投稿への返…

Haze 音とアニメーションが綺麗な天気予報アプリ

最近はシンプルな天気予報アプリが増えてきた。 Hazeは他とはアプローチが少し違っていて楽しい。音のせいか、ちょっとメディアアートっぽく感じる。音とかアニメーションは手間が必要だけど、これくらいの画面数だったら、時間を使って効果的な演出を探るの…