はてなブックマーク

気持ちのいい動き インタラクションの時に気持ちのいい動きをしているアプリって、使っていて気持ちがいい。そのアニメーション冗長だーとかは脇に置いておく。 気持ちのいい動きをコードで表現する知識（ノウハウ的な）って全然ないなぁ。と思っていた時にある１つのワードに出会った。 「コクのある乱数」乱数にコクを出す方法について-togetter- ・・・・？ 昨年(2016)末に話題になっていた。巷ではインタラクティブ・コーディング勉強会なるものも開催されているらしい。全然知らない世界。。。その内容（レジュメ）が公開されていたので、今回は自分なりに解釈しながら実際にやってみる。 参考にさせていただいたサイト インタラクティブ・プログラミング勉強会 第1回 乱数 -fladdict- ありがとうございます。 ”コクのある乱数”がキモらしい 気持ちのいい動きには乱数が欠かせない。さらに言うとコクのある乱数

UIデザインのネタになるものをいくつか紹介していきます。 今回は、フレンドリーなUIたち。いわゆるふつうのアプリではなく、細かいところで気が利いているなっと思わせるものです。 気さくな言い回し いろいろな海外製サービスを使っていると、ちょっとした言い回しがすごく気さくでいいな、と思うことがよくあります。 日本語に翻訳されていても、軽すぎず重すぎず、いい感じになっているのはすごくいいなーと思います。 Airbnbの評価画面 「ご提案は当社からお伝えしておきます」あたりが気が利いている。 心理的には、「そのまま送られるわけではないのできっとオブラートに包まなくてもだいじょうぶなのだろう」という安心感を感じる。（ほんとのところはそのまま伝えているのかもしれないけど。。） Skypeのアカウント登録画面 通常なら赤いビックリマークと共に「姓を入力してください」と出るところが、「初めまして・・・」と

こんにちは。思うことシリーズです。 最近、ツクロアでは業務用ツールのデザインを請け負うことも多いです。 わたしは今まで、Webデザイン→アプリデザイン（UIデザイン）を10年ほどやってきました。 いまではWebデザインとはいえ、スマホ対応もあたりまえ。つまり、タッチデバイスで操作するためのデザインをつくることもあたりまえなのです。 タッチデバイスは指で操作するよ Webサイトは、PCで見てもスマホで見ても、その大きさにあわせて情報量が調整されるべき、というのが今の主流な考え方。 なかには、同じソースコードを使って、見ているブラウザの横幅に応じてレイアウトを変えるレスポンシブデザインという手法もよく使います。 同じような液晶ディスプレイで見るので、単純にレイアウトを変えればよいだろうと思ってしまいがちですが、よくよく考えるとそう単純ではありません。 だって、PCでの操作はマウスもしくはキーボ

ちょっと前から考えていることがあります。 Linux、Firefoxなどをはじめ、いまや数えきれないほどのさまざまなオープンソースのプロジェクトがあります。 これらは（超かんたんにいうと）システムをどうやってつくっていくのかという根幹のプログラムを共有しているものだとわたしは認識している。 こういった手法は、ビジュアルデザインにはやっぱり通じないのだろうか？ オープンソースなプロジェクトとは オープンソースなプロジェクトについては、こちらを参照してください。 （ここでは、OSS：オープンソース・ソフトウェアについて述べています） オープンソースソフトウェア（英: Open-source software, 略称: OSS）とは、ソースコードが利用可能で、著作権保持者がどんな目的のためでもソフトウェアを、学習、変更、そして配布するための権利を提供するというライセンスに基づいたソフトウェアであ

先日、“RIDE” UX Sketch SUMMER 2016 〜リアルな現場のUXがビジネスに必要だ！〜 というイベントに参加してきた。 UXということばがついているので、拒否反応が出る人は出るかもしれない。 わたしは途中までしか参加できなかったけど、内容は「大きいデザイン」の話だった。 最近は、わたしも大きいデザインに携わることが多くなってきてやっとわかってきた。世の中には、大きいデザインと小さいデザインがあることが。 なにが大きくてなにが小さいのかは、厳密な定義はないし人によってちがうとおもうのと、そんなに重要ではないので特に言及しませんが、大きくわけるとそういうふたつの考え方があるということ。 ベタですが、建築でいうと、 大きいデザイン：設計 小さいデザイン：実際の施工 といったイメージです。 大きいデザインとは 大きいデザインは、「人」と「もの、こと」が結びつくのを実現するために

ひきつづき、デザインフローシリーズです。 前回までの話を読んでいない方はまずこちらからお読みください。 家計簿アプリの画面（基本設計編） ｜ ツクロア – DESIGN LAB 家計簿アプリの画面（データ一覧画面編） ｜ ツクロア – DESIGN LAB 家計簿アプリの画面（データ一覧画面・仮完成編） ｜ ツクロア – DESIGN LAB 家計簿アプリの画面（データ一覧画面補足編1） ｜ ツクロア – DESIGN LAB いままで、データ一覧画面をいろいろとごにょごにょと見てきましたが、今日はひとつ、この画面のエンプティ画面を考えてみたいと思います。 【3】エンプティ画面とは ここでいうエンプティ画面とは、「データがまだないときの画面」のこと。 前回一生懸命考えた日付の移動。ViewPagerを使うことで合意がとれ、このデザインだけを見ていると、「よし、もうできたも同然！」ぐらいに思

先日、東京造形大の授業でゲスト講義をする機会をいただき、メディア概論を履修している学生たちに「UIデザインとは？」という話をし、実際に体験してもらったので、せっかくなのでその話を少しだけしようとおもいます。 あるあるで有名な話だが、「デザイナーです」というと、「え、絵をかけるんですか？すごいですね」と返されることはいまでもよくある。それぐらい日本での「デザイン」という言葉はカオスだと思っている。 最近でこそ（わたしのまわりでは）あまりいう人はいないが、「Webデザイナー＝Photoshopでパーツをつくる人」と思っている人も、少なからずいる。 でも、UIデザインはそんなかんたんなものではない。 UIとは ではここで、改めてUIについて考えてみる。 UIとは、「ユーザーインターフェース」です。 ユーザインタフェース (英: User Interface, UI) は、機械、特にコンピュータと

もう3年半前にもなるけれど、個人のブログに「スマホサイトの機能比較表はどうデザインするか？」という記事を書いたことがある。 実は3年も経つと大手企業のWebサイト上の機能比較表も足並みそろえて、同じようなパターンに従うようになってきているようにも感じた。 久しぶりにここで考えたことを書いてみることにする。 製品機能や競合サービスとの比較表など、tableタグなどでセル状に項目を組むとスマホサイトはおろか、デスクトップ版ですら画面に収まらず機能しなくなるため難しい課題だ。 何度か別のWebデザイナーの方やコーディング担当の方に製品比較表のワイヤーフレームを渡して作業を依頼すると、見事に1000px程度の横幅にぎっしりと格子状に詰め込んだレイアウトを仕上げてきた。 モバイルの状態など全く考えていない「この指示書通りに依頼されたと思っていました」と言う。 先週のツクロア・デザインラボの記事「HT

デザインフローシリーズをいっかい休みにして、最近おもったことをかいていきます。 タイトルからして、なんか意識高い系の話になりそうでいやなのですが。。 とはいえ、じぶんが普段思っていることと照らしあわせてなにか考察できればいいなと思います。 HTML/CSSのデザインコーディングについて 通常わたしたちは、デザイン業務をメインでしていますが、HTML/CSSへのコーディングもやっています。 コーディングって意外とデザインの視点が入りづらいところと思われがちなのですが、実際にはそうでもないな、と最近改めて思いました。 そこで、わたしたちが考えているコーディングへの思いを挙げていってみたいと思います。 デザインを受け取って、それをコーディングするだけではうまくいかない ほんとに、いわゆるコーディングの「作業」という業務ですね。 psdとjpgなどを受け取って、画像を書き出して、HTML/CSSで

ブラウザ上で直接コードを書いてWebアプリデザインを行う「デザイニング・イン・ブラウザ」もしくは「インブラウザデザイン」。もう何年も前からそのメリットについて話す人も多く今更新しい手法ではないでしょう。 SketchやPhotoshopによるデザイン納品よりも多くのデバイスや環境で確認でき、animation,hoverをはじめ、ユーザーのアクションによる画面状態変化がリアルに把握できて、デスクトップやモバイルといった固定しない画面サイズにおいて実際の操作中にユーザーの誤操作やストレスを見つけやすいというメリットがあると言われています、ただ、あくまで手段のひとつだということも忘れてはいけないですね。 個人的にはページ数の少ないシングルページアプリケーションにおけるデザインには有効な解決手段だと思っています。 ただいいコトずくめに見える手法ですが、そのコードを開発側にそのまま流用しようとする

あらためてなるほどな、と思えるいい記事でした。 【これからのスキル】デザイナーとエンジニアの境界線がどんどん無くなる | freshtrax | btrax スタッフブログ 自分にも重なる部分があると思って経験と雑感込みで書いてみた、毎週水曜更新のデザインラボbyツクロア、今週私のターンではデザイナーがコードを書く意味についてです。 一枚絵では通用しないアプリデザイン 某携帯電話メーカーからAndroidアプリデザインの依頼があったときの話です。 電話着信画面や起動直後の待受ロック解除のデザインを含め、使い心地や操作感から画面構成まで一緒に考えてもらえるデザイナーを探しているということでした。 担当者いわく「静止画だけではアプリデザインの良し悪しが決められないんですよ」という話から始まり、では「実際うごくデザインモックを作りながら一緒に考えましょう」という作業の流れを提案して検証からリリー

「なぜこういうデザインになったのか」というデザインフローシリーズ。 まだまだ続きます。 複式家計簿をかんたんに入力して振り返れるようにしよう、ということで、シンプルな画面が求められます。 前回の基本設計編では、手書きでなんとなくできることを整理してみました。 前回までの話を読んでいない方はまずこちらからお読みください。 家計簿アプリの画面（基本設計編） ｜ ツクロア – DESIGN LAB 今回は、「入力したデータ一覧画面」を実際にSketchでつくりながら考えていきましょう。 【2】入力したデータ一覧画面 お決まりの、どういう要素が必要だったかというところを復習していきます。 A.入力したデータ一覧画面 【必要な要素】 金額 費目 日付 そのお金がどこから出たものか（貸方） 【アクション】 ＋データの入力画面へ移動する ＋その月のサマリー画面へ移動する ＋費目の一覧画面へ移動する これ

今回はポルノとかアダルトとか言ってますが、とても真面目な話です。 毎週水曜更新のツクロアのデザイン・ラボ、今週と来週は2週続けて「デザイナーも触れたほうがいい？機械学習。」という画像解析をテーマに記事にしてみたいと考えています。 なお、今回自分で試したかったので画像投稿のフォームをつくってみました。APIの無料トライアル期間内だけですが、このページの下にありますので、何かご自身の写真を画像解析してみてください。 簡単に写真や動画を、特定の相手やネット上に送れる時代、リベンジポルノが社会問題のひとつに…。 GoogleがCloud Vision API（ベータ）という、誰でも簡単に使える画像解析APIを公開しています。 恋人や旦那さんに女性が自分の写真を送信する直前に性的な疑わしき写真と機械が自動で判断し、「この写真、本当に大丈夫？後悔するかもしれないですよ。」と思いとどまらせる仕組みづくり

今回はポルノとかアダルトとか言ってますが、とても真面目な話です。 毎週水曜更新のツクロアのデザイン・ラボ、今週と来週は2週続けて「デザイナーも触れたほうがいい？機械学習。」という画像解析をテーマに記事にしてみたいと考えています。 なお、今回自分で試したかったので画像投稿のフォームをつくってみました。APIの無料トライアル期間内だけですが、このページの下にありますので、何かご自身の写真を画像解析してみてください。 簡単に写真や動画を、特定の相手やネット上に送れる時代、リベンジポルノが社会問題のひとつに…。 GoogleがCloud Vision API（ベータ）という、誰でも簡単に使える画像解析APIを公開しています。 恋人や旦那さんに女性が自分の写真を送信する直前に性的な疑わしき写真と機械が自動で判断し、「この写真、本当に大丈夫？後悔するかもしれないですよ。」と思いとどまらせる仕組みづくり

ちょっとだけご好評いただいていたデザインフローシリーズ、今回から新しいネタいきます。 今回からは家計簿！しかも複式家計簿という、数字嫌いな人はそっと閉じてしまいたくなるようなアプリの画面にしようと思います。（ちなみにぜんぜんややこしくないので数字嫌いな人も読んでね） ＃ネタのリクエストがありましたら @tuqulore までお待ちしています！ このアプリを使う人や、その使い方、使うときをおさらい 画面を考える前に、使う人（ターゲットユーザー）や使い方、使うとき（ユースケース）をおさらいしておきましょう。 使う人 自分のお金をちゃんと管理したいと思っている人 現金だけではなく電子マネーやクレジットカードも含めて自分のお金を管理したい人 大きなくくりでは、あるていどお金に関して関心が高くて、ちゃんと管理をしたいと思っている人がターゲットにあたります。 ただ、それだとふつうの家計簿とかでもいいの

「なぜこういうデザインになったのか」というデザインフローシリーズ。 まさかの4回をまたぐ連載ですが、今回のデザイン編2をもって歯医者を終わります。 ちなみに関係ないですが、最近、歯科衛生士さんへ転職しませんか！？という広告が出るようになりました。。ぐーぐるさんこわい。。 前回のデザイン編1では、主に文字の大きさや配置、色（グレースケール）を調整をしてレイアウトを整えました。 今回は、色やUIデザインについて考えていきます。 前回までの話を読んでいない方はまずこちらからお読みください。 歯科予約システムの治療履歴画面（基本） ｜ DESIGN LAB by tuqulore 歯科予約システムの治療履歴画面（応用） ｜ DESIGN LAB by tuqulore 歯科予約システムの治療履歴画面（デザイン編1） ｜ DESIGN LAB by tuqulore 【10】色を考える 今まで放置し

レッドツェッペリンの曲に「Immigrant song（邦題で”移民の歌”）」という曲があります。 バスドラムを16分音符の連続で打ちまくる特徴的なリズムパターンが有名な曲です。 Youtubeなどでもそのテクニックをレクチャーする動画がいくつもあるほど難易度が高く、初心者では簡単には叩くことができないパターンといってもいいでしょう。 私は趣味でドラムを習い始めて1年の初心者で全然上達しないのですが、ちょっとずつ練習をしています。 今回、演奏にあわせたタイミングで光や映像が反応すると楽しい気がしたので、自らの演奏と自らの映像でどこまで感じられるか、チャレンジしてみました。 バスドラムの振動をHTML5 Canvasでパーティクルアニメーション 解説は後にして、先に実験結果を撮影してみました。 私の演奏なのであまり上手ではありませんが。 まずはドラムセット全景、センサーを設置してみました。

「なぜこういうデザインになったのか」というデザインフローシリーズ。 前回までは、情報のグルーピングから、歯の番号の図をどう入れるか、と日付の秘密をお伝えしました。 歯科予約システムの3回目の今回は、「デザイン編1」としてどういうデザイン（レイアウト）に展開できるか、そしてその意味を解説していきます。 色については次回に。。 前回までの話を読んでいない方はまずこちらからお読みください。 歯科予約システムの治療履歴画面（基本） ｜ DESIGN LAB by tuqulore 歯科予約システムの治療履歴画面（応用） ｜ DESIGN LAB by tuqulore 前回の記事に関して受けた指摘 さて本題に入る前に、前回の応用編で歯の番号の図を入れたわけですが、SNSで次のような指摘が入りました。 「カルテって、ふつう左右逆に書くもんじゃないですか？」 たしかに！！ 整形外科のカルテなどを見ても

「なぜこういうデザインになったのか」というデザインフローシリーズ。 前回の基礎では、必要な要素を整理してからの情報のグルーピング、さらには人が使うための気づかいを少しだけ書きました。 今回は応用として、引き続き同じネタで、 歯の番号わからんよね 日付に隠された秘密 を書いていきます。 前回の基礎を読んでいない方はまずこちらからお読みください。 歯科予約システムの治療履歴画面（基本） ｜ DESIGN LAB by tuqulore 【7】歯の番号わからんよね 前回、治療内容についてはこのように「左上7」「右下3」などと、歯医者さんの専門用語で書かれていて、これわからないよね、ということを書いていました。 もしこれを使う人が歯科医の業界にいる人であれば、「左上7」といわれてピンとこなければ、ちょっとヤバいレベルだと思います（わたしたちが「Photoshopってなんだっけ。。」と言うのと同じく

要件通りにつくったにもかかわらず「ツルの一声」で全部やり直し、なんて多くのデザイナーが経験しているのではないでしょうか？ 私の業務に、デザインをリニューアルしたいというお客様のチームにおけるミーティングのファシリテーター（進行役）があります。 お客様の会社やサービスの規模も様々で、ありがたいことに最近では組織のトップの方（つまり社長さん）とも会話をさせていただくことがちょっとずつではありますが、増えてきました。 そういった経験をさせていただく中で、デザインと経営理念が密接…とまでは言わずとも遠くで紐付いているような関係があることを感じて、意外とそこが見落とされ、方向性がなかなか定まらないプロジェクトやチームもあるのでは？なんて。 デザイナーさんに経営なんて堅い話のように思えるかもしれませんが、実は全然そんなことはなく、一つのデザインの指標を決めるためにも、私がクライアントの上司の方にお願い

メンバー募集中 デザインラボ・ツクロアを読んで、一緒に仕事をしたいと思ってくれた方、こちらもご覧ください。 採用情報 私たちについて このメディアを発信しているツクロアというチームのこだわりや仕事への取り組みをご紹介します！ ツクロアについて