今年はアプリのデザインのお仕事をいただく事が多かったのでちょっと前まで**@3x画像**の書出しなどに追われる日々でした。 デザインデータから各種デバイス用の解像度の画像を切り出す場合、 Photoshopだとレイヤーグループに名前をつけておいて Slicy で書出しているのですが、 Sketchだと例えば一つのレイヤーから**@2x画像とxhdpi画像**みたいな同じ大きさで別々の名前の画像が切り出せるのが便利でした。 やりかたも簡単でExportの設定をレイヤーグループ毎に複数の書出したい画像のサイズとプレフィクスなどを設定しておけば、最後にボタン一つで書出せるようになっています。 各種解像度用の画像を書出す時の設定が沢山あって覚えきれないので忘れないようにメモしておきます。 書出したい画像 タブ用の画像という想定で**30x30**のアイコンを作って書出してみます。 対応したいデバイ

7/19(土) に #nuhack というハッカソンイベントを開催 & 参加しました。 #nuhack とは satococoa/p4d-hackathon-3rd P4D の主催する 3回目のハッカソンイベントです。 毎回エンジニアとデザイナをペア (もしくは一部グループ) にして何か作るという形式でやっています。 今回のテーマは「モバイル向けのサービス」でした。 協賛として NUBoard の欧文印刷さんにご協力いただき、 会場はピクシブ株式会社さんにお借りして開催しました。 なぜ NUBoard なのか 寿司屋で @ppworks さんや @ken_c_lo さん達と飲みながら NUBoard 超便利！という話になり、 突然 @ken_c_lo さんが欧文印刷の汲田さん (@kumitajoj) へ熱いリプライを送ったのがきっかけでした。 その後メールで我々 Web に関わる人にとっ

_ macで起動しているサーバへLAN内の他のマシンからアクセス たとえばiphoneとかVMで起動してるWinマシンとかから自分の開発環境で起動している rails server にアクセスする方法。 macのシステム環境設定の共有のところにマシン名（このスクリーンショットだとigaiga555）を設定する。（チェックボックスは全部空でいい） あとは同じLAN内からhttp://igaiga555.local:3000 にアクセスすればOK。簡単〜。 VMware Fusion だとVMの設定でネットワークアダプタ設定を「Macと共有」にしたらアクセスできた。 @june29 さんから教えてもらったんだけど、元は @asonas さんからの情報らしい。ブーメランだった。 @hsbtさんからは proxylocal gem ってのも教えてもらった。同じことができそう。

このブログは Markdown on Save Improved プラグインを使用して、 Markdown記法 で記事を投稿できるように設定しています。 Markdownって便利だけど要素に個別のクラスを割り当てたりできないので個別のデザインを割り当てたりページ内リンクとかがつけにくいですよね。 MarkdownにHTMLタグを記載すれば認識してくれるのでそのまま書けばいいじゃんて話だとは思うのですが、入れ子にしてしまうとタグの中ではMarkdown記法が認識されなくなってしまいます。 なので、Markdown記法の恩恵をうけつつある程度レイアウトも柔軟に行えるような方法をいくつかまとめてみました。 画像とテキストを左右にフロートさせる配置する要素の横幅を広げる注釈を見やすくするページ内リンクを使う外部リンクは_blankで、ページ内リンクはスムーズにスクロールするようにするる 画像を左右

リガチャなアイコンフォントを自作しようとするとけっこう大変そうで、そのためのアプリを揃えて操れるようになったり、リガチャの仕様を把握したり、専用のCSSを書いたりする必要がある。そういった正攻法のやり方としては、このページがとてもわかりやすかった。また、実際にそのページの方法によって制作されたLigature Symbolsも魅力的。 ところが自分が欲しいのは、Twitterで使っているアバターアイコンと、ブログのボタン等で使う5〜6個のアイコンを含んだ最小のセットで良くて、そのために前述のような本気を出して作るのは、なかなか重い腰があがらずにいたところ、アイコンフォントを手軽に生成できるサービスIcoMoonの中に、そのリガチャを作成する機能もあることに気がついた。^1 それを使ってみたら、予想以上に簡単にリガチャなアイコンフォントをサクッと作れた。 上のはそのIcoMoonを使って作っ

“早くデザインが出来る”これは多くのデザイナーにとってのバリューであり、アピールすべきポイントの1つです。 ただ、特に、、企業に属するデザイナーにはその恩恵が薄すぎるように思います。今回はデザイナーとその作業スピードについて弊社の考えをまとめてみようと思います。 企業に属するデザイナーには多くの場合デメリットに働く 初めこそは感謝をされます「あのデザイナーのお陰でデザインフェイズを巻けた、助かった！」ただ、徐々に早いことが当たり前になってしまい通常の制作時間でデザインすると「なんか今回は遅いな」という印象さえ与えてしまいます。 早くデザインが出来たからと言って特別賞与がもらえるわけではありませんし（会社によってあるのかもしれませんが）早く帰れる人は往々にして見たことがありません。 会社としてはクライアントに対して「特急料金」という名目で通常のデザインフィーに何パーセントか乗せた請求ができる

$ git add -pという、ひとつのファイルから分割して部分的にcommitできる便利なオプションがあって、最近commitをもうちょっとこまめに分けようと心がけるようになってからたびたび使うのだけど、そうすると欲が出てきて、もう少し細かく分割してくれたらなあと思うことがたまにある。git add -p もうちょっと細かくわけてくれたらいいのにとたまに思う— TAE ✅ (@ken_c_lo) February 16, 2013 @ken_c_lo 確か「git add -p」した後に「y」とか「n」で取り込むところを選ぶ時に「s」をやると、さらに小さい単位に分割してくれた気がします。最近やってないので若干怪しいですが。。— 松本 瞬／Shun Matsumoto (@shu_0115) February 16, 2013 @ken_c_lo だいたいこんな感じだったと思います。→ b

P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く

背景 近年、若者のメンション離れが問題視されている。明示的なメンションはせずに、ある人を指す俗称などで話しかける、いわゆる「空リプ」は社会現象となり、タイムラインに蔓延している。この状況では、フォローが増えれば増えるほどコミュニケーションを円滑に進めることが難しくなり、増え過ぎたフォローと速くなりすぎたタイムラインを前に「SNS疲れ」を表明する人も …論文調に書くのは飽きた。 概要 いくつかの Twitter クライアントアプリには、キーワードフィルタの設定などがあり、特定の条件を満たすツイートをそれなりに見逃さずに閲覧できるようになっています。しかし、常時起動型のアプリはあまり多くなく、移動中など、デスクトップから離れるタイミングでは、自身への言及に対する反応が困難になりがちです。 そこで、自分用として「1日に29時間くらい動く」をコンセプトとした「29hours」という通知特化型アプリ