はてなブックマーク

こんにちは、Spinnersの元山@kudakurageです。 ここ最近はデジタルプロダクトのデザインばかりしているわけですが、仕事をし始めた頃には印刷物を始めとした物理的なもののグラフィックデザインなどもよくしていました。 これも今のような仕事をし始めて１年目にやった仕事ですが、限られたものの中で制限のある中でアレコレと考えたり工夫したりしながらやった楽しかった思い出です。 （ラベルだけじゃなくて、商品写真の撮影やポスターを作ったり全部やって楽しかった！） ちなみにこのお酒は数量限定で生産した梅酒なんですが、バーで飲んでてもおかしくない大人の梅酒を目指して、シェリー酒の樽を使って香り付けしたりしていて、アルコール度数高めなのに飲みやすいというかなりやばいお酒でした。 （今考えてもあれ以上に美味しい梅酒は個人的にありません） 今でも名刺など簡単なちょっとしたものは作ることがよくありますが、

こんにちは、くだくらげです。 私はSketchもFigmaも両方使って仕事していますが、最近になって両アプリともOpenType Featureへの対応をアップデートに入れてきていることはご存知でしょうか？ 私はこの部分について前々から注目していたわけですが、その理由はSF Symbolsとの関係が大きいのではないかと睨んでいます。SF Symbolsがリリースされた直後の時期は、IllustratorやSketchでしかOpenType Featureを使うことができませんでした。この頃Sketchも一応利用できるという程度でした（正直現状も使いやすいとも思えないですが…）。それが2019年9月、10月辺りでFigmaもOpenType Featureサポートし、Sketchもその辺りの改善を加えてきました。 ということで、UIツールを提供している各社もサポートし気にしているであろうSF

こんにちは、くだくらげです。今年のはじめにはじめてのUIデザインという本を共著で書きました。 PEAKSさんから出版しており購入できますので、ご興味ある方はぜひ手にとってみていただけると嬉しいです。 peaks.cc 概要 FigmaにもようやくPlugin機能が公開されましたね。公開直後からいろいろと便利なPluginが出てましたが、まだまだ数は少ない印象です。 個人的にどうしても欲しいプラグインがあったのですが、探してみても見つからなかったので作りました。 以前Sketchのときにも作ったプラグインで、シンプルにテキストをコピペするだけのFigma Pluginです。 そんなの必要？！と思う方もいるかも知れませんが、私は作って使ってみて本当に良かったです。現状Figmaではテキストのコピー＆ペーストができますが、テキストだけをコピー＆ペーストすることはできませ。テキストと一緒にFont

こんにちは、くだくらげです。今年のはじめにはじめてのUIデザインという本を共著で書きました。 他の著者さんの章もとっても勉強になって面白い内容になっています。読んでいただいた方からのコメントも嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、ご興味ある方はぜひ手にとってみていただけると嬉しいです。 peaks.cc 概要 今回はUI/UXのためのSoundとHapticsのデザインについてです。 人間はおよそ８割以上を視覚からの情報に頼っていると言われています。目から入ってくる視覚情報は確かに重要ですが、一方で印象に影響を与えたり、記憶に残りやすい情報というのは聴覚や嗅覚、触覚といった別の感覚が強く影響すると言われています。 iOSやAndroidといったスマートフォン端末にはスピーカーやHapticsエンジンが組み込まれています。ディスプレイ上のインター

こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ

こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、頑張って書いたかいがありました。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 今回は、デザイナーもWWDCのセッションを見ると良いよ！という紹介をしたいと思います。 ご存知の方も多いと思いますが、WWDC（Worldwide Developers Conference）は、Appleが毎年開催している開発者向けのイベントで、近年では新しいOSの発表が行われています。 もっとも有名なのはKeynote（イベントの初日に行われる基調講演）で、そこで最初に大まかなトピックについて発表されるため注目されることが多いです。 WWDCには他にも個別のセッションとLab（Ap

Design Tools Advent Calendar 2018 - Adventar 近年はSketchのようなUIデザインツールがたくさんあって、それらが出てきたというだけでなく、実際に利用しているユーザーも増えてきましたね。まさに戦国時代という感じです。個人的にもAdobe XDやFigmaなどそれぞれに注目して試して見たりとすることもあります。 とはいえ今回は皆さんそんなことも書くだろうと思い、最近のSketchの使いで試してみたことというベタなことを書こうと思います。 エンジニアや新規のデザイナーと協業するにあたって、最近ではSketchファイルを直接見てもらうということも多くなってきました。エンジニアと協業するにあたってSketch関連で使われるツールの代表格としてはZeplinがありますが、今回の話はZeplinを使うことでもできるような話だと思います。そこをあえて、Plu

外部ディスプレイをつないで２画面で作業をしていたり、膝の上にMacを置いて１画面で作業をしていたりを繰り返すと、何らかの条件でアプリによっては画面の外にアプリのWindowが出てしまって、マウスでWIndowを掴むことができず戻せなくなることがあります。 私の場合、Adobe CCのソフトを使っているとたまにこういう症状がでて、困ることがよくあります。 画面外に出てしまったWindowを戻す方法はアプリを使うなどいろいろあるようですが、今回はmacOSに標準で搭載されている「VoiceOver」という読み上げ機能を使って、キーボード操作でもとに戻す方法を書いておきます。 （自分もよく忘れてしまうのでメモ） 1. VoiceOverをオンにする ⌘ ＋ F5キーを押すことでVoiceOverがオンになります。 2. 動かしたいアプリ・ウィンドウを選択する Dockのアプリアイコンをクリックし

最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。 アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。 とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ

昨今ではデザイナーの間でも、アプリやサービスに使われる色やテキストなどをまとめた「スタイルガイド」や、デザインコンポーネントをまとめた「パターンライブラリ」、さらにそれらを全てまとめてドキュメント・原則・思想なども含めた「デザインシステム」などを作りながら効率よくより良い体験を提供できるように開発できるようにしようという取り組みがよく見られます。 DropboxやAirbnbなどをはじめとして積極的に自社サービスの「デザインシステム」を公開している企業も多く見られるようになってきました。 それにともなって、自分たちでも作ってみよう・開発現場に取り入れてみようと取り組み始めているという話もよく聞くようになってきましたが、どんな風にどんなところから手を付けて良いか？というのは良く聞く質問です。 「デザインシステム」を考えていくにあたって、設計の手法・考え方の一つにAtomic Designとい

引っ越して２ヶ月ほどの新しい自宅で試したDIYやスマートホーム関連のIoTデバイスなどを実践して試したことについて４回にわたって書いていこうと思います。 INDEX 賃貸DIYでつくる住みよい部屋 実践HomeKitの暮らし スマートスピーカーの設置と運用 ← 今回 スマートスピーカーへの展望とデザイン スマートスピーカーの設置と運用 我が家ではスマートスピーカーの中でも、Amazon Echo DotとGoogle Home Miniを設置して運用しています。 正直そこまで使い込んでいるわけではないので、マイナーなおすすめスキルを紹介するような事はできませんが、私が実際の生活の中で利用するシーンや普段の暮らしにどのように溶け込ませているのかなど、私の趣向的な感想も踏まえながら書いていこうと思います。 Amazon Echo DotとGoogle Home Mini スマートスピーカーはA

引っ越して２ヶ月ほどの新しい自宅で試したDIYやスマートホーム関連のIoTデバイスなどを実践して試したことについて４回にわたって書いていこうと思います。 INDEX 賃貸DIYでつくる住みよい部屋 実践HomeKitの暮らし ← 今回 スマートスピーカーの設置と運用 スマートスピーカーへの展望とデザイン 実践HomeKitの暮らし スマートホーム関連の製品はいくつかありますが、今回私が使っているのはHomeKit関連の製品です。特に強いこだわりがあったわけではありませんが、Apple系のデバイスを使っていることが多いとかそれくらいの理由です。 今回はHomeKit関連の製品を中心に実際に使ってみて感じたことやわかったことなどを書いていきます。 HomeKit対応照明　Koogeek vs Hue スマートホーム関連で現状もっともメジャーな製品が照明ですが、我が家ではKoogeekというメー

この記事はSketch Advent Calendar 2017 24日目の記事です。 最近ではSketchでのSymbolsのあり方やAtomic Designなどの思想を取り入れたDesign Systemとしてどのように使えるものとするかと言った話をよく聞きます。 Sketch公式で待望のShared Librariesなども実装されたおかげで、そういった取り組みが前向きにできるようになったのは大きいことかなと思います。 SlackのSketch Japan Team Comunity内でもSymbolsの悩み相談や会話がよくなされていますし、この記事も参加しているSketch Advent Calendar 2017でもそういった趣向の記事が多く散見されます。 Slackのcommunityでも色々と議論はなされましたが、最もBestな絶対的なやり方は存在せず、対象となるデザインA

ここ最近AppleTV関連のアプリのお手伝いしていたりすることもあったりして、個人的にもAppleTVを購入して使っています。購入前は「単なる娯楽商品で絶対いらないでしょ」と思っていたんですが、いざ購入してみるとすごい便利だなーと感心したりもしています。 とは言えデバイスの性質上、現状はエンターテイメントによってユースケースがメインなので必要ない人にはやっぱり必要のない製品だと思います。 ちなみにエンターテイメントじゃなくても、画面を複数人に共有して一緒に見る時のAirPlayは便利ですよ。ChromeCastでもできるよって思っていたりしましたが、特にPCの画面共有のスムーズさでは現状AppleTVの圧倒的勝利です。 前置きはコレくらいに、実際にユーザーとして使ってみたりApple TV Appのデザインを考えてみた経験からいくつかポイントやTips的な部分を残しておこうと思います。 ※

2016年もSketch Appが活躍しました。Adobeはというとほとんど使いませんでした。使ったのはDTP関係のときだけでしたね。 まだまだ不満なところはありますが、十分にSketchを業務で使えるレベルにはなっていると思います。 業務で使うに当たっては、速さも重要ですからショートカットをよく多用するわけですが、今回は私がよく使っているSketch Appのショートカットを紹介してみようと思います。と言っても非公式な自分勝手ショートカットも多いので、そのあたりは踏まえて読んでください。 【非公式】開いたレイヤーを全てたたむ「⌘ Esc」 いきなり非公式ですが、私がもっとも使っているであろうショートカットです。 Sketchで作業しているとレイヤーやオブジェクトがどんどんと多くなっていって、いくらグループにまとめてちゃんと名前をつけて管理していたからと言って、一画面に収まらずにレイヤーリ

MacBookAirでIEのテスト環境を作ろうとして、つまづいたりしたので書いておく。 さっとGoogleで調べてみると似たような記事はいっぱい出てくるのだけれども、どうやらどれも少し古いらしい。 VirtualBoxのDL&Installは問題ない。 ↓からfor OS XのやつをDLして、手順通りインストールすれば簡単に問題なくできる。 Downloads – Oracle VM VirtualBox 問題はWindows Virtual MachinesのDLです。 仮想マシン (VM)、Windows Virtual PC、および BrowserStack : Microsoft Edge Dev 2015年12月20日時点ではこのように↓なっているのだけれども。 左側の部分でDLしたいWIndows OSとIEのversionとVMの種類（今回はVirtualBox）を選んで、右

「Texty」というなんのことはない、ただのtext editorみたいなものをときどき作っています。趣味とはいえ私自身は便利に使っています。 作り始めた頃から数えると、かれこれ何年とかかっているのですがようやく完成に向かっている気がします。 経緯 元々は５年くらい前でしょうか。仕事でいろいろとメモしたりするのにいろいろ試したりしていました。 その頃はSublimeTextを使っていたのでそれで普通にメモを書いたり、全部手書きでホワイトボードに書いたり、もちろんEvernoteに書いたりしていたのですがどれもいまいちで定着しませんでした。 そんなころWrite SpaceというChromeアプリを知って使い始めたら、これだという感じになりました。ただ単にtextareaが一つあるというだけというようなものなんですが、見た目がシンプルな上に不要なアプリを立ち上げる必要性もない。 chrome

久しぶりにcssレイアウトでハマってしまった。 floatレイアウトは一般的なレイアウトとしていろいろとノウハウが溜まっているように思いますが、flex box layoutはまだまだ思いもよらない挙動をすることがありますね。 今回ハマったのは「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト」という一言にするとよくわからない感じですが… 要は２カラムレイアウトで、片方は固定幅、もう片方は可変幅の（幅いっぱいになるような）カラムレイアウトであり、可変幅の方の子要素として長いテキストを含んでいるもののレイアウトです。 単純に考えて↓こんな感じで書けば、１つ目の要素が幅100pxの固定になり２つ目の要素が残りをエリアの幅になると思うのですが、そうはなりません…。 <style type="text/css"> .flex { display: flex; wid

タイトル通りですが、Sketch JapanっていうSlack Teamを１ヶ月前くらいにつくって仲間内でほそぼそとSketchについて話したりしています。 最初からあまりおおっぴらにせずに運用してきたので、今のところは知り合いばかりの少人数コミュニティですが、もう少し増やしていっても良いかなと思えてきたので、ブログにも書いておこうと思った次第です。 経緯 sketch系のコミュニティはいくつかすでにあって、人が集まっているのは同じくslack teamのTeam Sketchとか、FacebookのSketch Groupとか、小島さんが作ったFacebook GroupのSketchJapanとかがあります。 私はすべてに所属していて、updateがあればだいたい目を通しているのですがFacebook Groupは情報というよりも質問的なことが多かったり、あとわりと宣伝っぽいものが多か

photo by wootam! キャンセルのキャンセルについて社内ブログに書いたので、こっちにも書いておこうと思います。 confirm, dialogのdesignは案外と難しいものです。 どのタイミングで表示すべきか？ どのようなメッセージを書くべきか？ どのようなアクションをユーザーに提示すべきか？ そもそも本当に必要なのか？ いろいろと考えることは多いですが、「そもそも本当に必要なのか？」という問からスタートして、ではなぜ必要なのか？と考えていけば最適な解決方法にたどり着けるように思います。基本的にDialogは邪魔なものだと思うので、表示しないのが一番です。 confirm, dialogのdesignはどうあるべきなのかというのは、基本的にはiOSやAndroidのDesign Guidelineにも書かれているのでまずはそれを読んでおけば多くの場合、最適な解を見つける指針に

最近はずっとSketchを使ってますが、Sketchでイメージを配置するときにどのように配置しているだろうか？ もちろんFinderからcanvasにD&Dでそのまま配置してもいいんですが、イメージのサイズと実際に表示したいサイズが違うことはよくあると思います。上の図で言えば市松模様の部分にイメージを入れたいとしてどのように配置するのかということです。 私は以前はマスクを使って配置していたのですが、オブジェクトのFillとしてイメージを入れるのがおすすめです。 左はオブジェクトのFillでイメージを配置したもの、右がマスクを使って配置したものです。 マスクを使った場合「⌘」を押しながらクリックで付近のオブジェクトを選択しようとすると、マスクしたイメージを選択してしまったりして非常に鬱陶しい感じになってしまうんですよね。 Fillで入れる方はイメージのサイズも位置も自動的にイイ感じにしてくれ