サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
design-lab.tuqulore.com
HTML5のVideoタグにWebカメラの映像と音声を合成させて、1枚のビデオファイルを生成する方法について試してみました。どうもです、デザイナーの秋葉です、久々の技術のことを書いてみます。 参考にさせていただいたのはこちら https://html5experts.jp/mganeko/12475/ Webカメラからの映像や音声をgetUserMediaというメソッドを使ってストリームデータを取得して、ブラウザだけで動画ファイルを生成してユーザーはダウンロードできるものです。 ここで考えたのは、オリジナルのVideoタグの動画に、カメラの自分の映像やしゃべった声をスーパーインポーズして一つの動画ファイルにするって、HTML5でできるのかな?と思って試したら、ちょっと手間がかかるけどChromeブラウザでできた。 デモをこちらに上げておきました、Chrome 56以降で試してください。 h
気持ちのいい動き インタラクションの時に気持ちのいい動きをしているアプリって、使っていて気持ちがいい。そのアニメーション冗長だーとかは脇に置いておく。 気持ちのいい動きをコードで表現する知識(ノウハウ的な)って全然ないなぁ。と思っていた時にある1つのワードに出会った。 「コクのある乱数」乱数にコクを出す方法について-togetter- ・・・・? 昨年(2016)末に話題になっていた。巷ではインタラクティブ・コーディング勉強会なるものも開催されているらしい。全然知らない世界。。。その内容(レジュメ)が公開されていたので、今回は自分なりに解釈しながら実際にやってみる。 参考にさせていただいたサイト インタラクティブ・プログラミング勉強会 第1回 乱数 -fladdict- ありがとうございます。 ”コクのある乱数”がキモらしい 気持ちのいい動きには乱数が欠かせない。さらに言うとコクのある乱数
WPJさんの初のカンファレンスイベント、WPJ Conference Vol.1 DESIGN meets CODEで基調講演、そしてテクニカルクリエイター.com主宰の小島芳樹さんとトークセッションをしてきました。 テーマは「デザイナーのこれからのスキルを考える1日」ということで、特にコードを書く、また書きたいデザイナーを対象にしたイベントでした。 絵を描くことですら本来デザイナーとは別の付加的スキルだと個人的には思います。(デザインと設計という言葉が日本では違う意味で輸入されてきた、と誰かが言っていましたし)日本では山崎 亮さんのようなコミュニティデザイナーのように「私は手を動かさないデザイナーを目指している(以前講演でそう発言されていたのを聞いていた)」という方もいらっしゃいますし、何かの技能に依存するのではなく、何をアウトプットするべきかを手段問わず設計することが最も重要だという声
UIデザインのネタになるものをいくつか紹介していきます。 今回は、フレンドリーなUIたち。いわゆるふつうのアプリではなく、細かいところで気が利いているなっと思わせるものです。 気さくな言い回し いろいろな海外製サービスを使っていると、ちょっとした言い回しがすごく気さくでいいな、と思うことがよくあります。 日本語に翻訳されていても、軽すぎず重すぎず、いい感じになっているのはすごくいいなーと思います。 Airbnbの評価画面 「ご提案は当社からお伝えしておきます」あたりが気が利いている。 心理的には、「そのまま送られるわけではないのできっとオブラートに包まなくてもだいじょうぶなのだろう」という安心感を感じる。(ほんとのところはそのまま伝えているのかもしれないけど。。) Skypeのアカウント登録画面 通常なら赤いビックリマークと共に「姓を入力してください」と出るところが、「初めまして・・・」と
クライアントとミーティング中に、ヒアリングだけして何もチームに共有せずに、自分のためのメモだけを頼りに次回に提出なんてのが今時あるのだろうか? 自分のメモをノートやパソコンに残しても、そのメモが相手の認識と合っているかを確認するためには、その場で何らかのイメージを描いて可能な限りディスカッションしなければデザインの仕事は厳しいと思う。 議事録というのはあくまで会話の記録でしかなく、経験上、課題へどうアプローチを仕掛けるか?というディスカッションが双方で活発に行われないと重要な記録すら残らない事が多い。 ミーティングの時間の中であーだこーだと考えをぶつけ合うことが必要であって、その会話もなく黙って相手の話だけを聞き、持ち帰るなんてもったいないことだ。
こんにちは。思うことシリーズです。 最近、ツクロアでは業務用ツールのデザインを請け負うことも多いです。 わたしは今まで、Webデザイン→アプリデザイン(UIデザイン)を10年ほどやってきました。 いまではWebデザインとはいえ、スマホ対応もあたりまえ。つまり、タッチデバイスで操作するためのデザインをつくることもあたりまえなのです。 タッチデバイスは指で操作するよ Webサイトは、PCで見てもスマホで見ても、その大きさにあわせて情報量が調整されるべき、というのが今の主流な考え方。 なかには、同じソースコードを使って、見ているブラウザの横幅に応じてレイアウトを変えるレスポンシブデザインという手法もよく使います。 同じような液晶ディスプレイで見るので、単純にレイアウトを変えればよいだろうと思ってしまいがちですが、よくよく考えるとそう単純ではありません。 だって、PCでの操作はマウスもしくはキーボ
先日、「ハード・ソフト・ネット、そしてMake、 素朴なWebデザイナーの向き合うこれから」というタイトルで、HTML5 CONFERENCE 2016に講演させてもらった。 発表資料はこちら。 公演後、ある参加された方からの質問に個人的なアドバイスさせてもらったら、後日メールにて「早速他のスタッフにもシェアしました」という返事が帰ってきて、「ああ、この方のシェア行動ってのがいいな」と思って「ラーニングピラミッド」という学習効率を上げる有名な方法のことを思い出した。 ラーニングピラミッド この図でしめすとおり、ただセミナーを受けて聞くだけでは「なんとなく分かった気になっているだけ」なのかもしれないが、後からそれを「アウトプット」する行動を取ることで「自分のスキル」に定着しやすくなるというもの。 個人的に思うことは、そもそも「教える」機会が必ずあるわけでもないので、後で疑問に思うことは講師に
ちょっと前から考えていることがあります。 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を公開しています。 恋人や旦那さんに女性が自分の写真を送信する直前に性的な疑わしき写真と機械が自動で判断し、「この写真、本当に大丈夫?後悔するかもしれないですよ。」と思いとどまらせる仕組みづくり
ちょっとだけご好評いただいていたデザインフローシリーズ、今回から新しいネタいきます。 今回からは家計簿!しかも複式家計簿という、数字嫌いな人はそっと閉じてしまいたくなるようなアプリの画面にしようと思います。(ちなみにぜんぜんややこしくないので数字嫌いな人も読んでね) #ネタのリクエストがありましたら @tuqulore までお待ちしています! このアプリを使う人や、その使い方、使うときをおさらい 画面を考える前に、使う人(ターゲットユーザー)や使い方、使うとき(ユースケース)をおさらいしておきましょう。 使う人 自分のお金をちゃんと管理したいと思っている人 現金だけではなく電子マネーやクレジットカードも含めて自分のお金を管理したい人 大きなくくりでは、あるていどお金に関して関心が高くて、ちゃんと管理をしたいと思っている人がターゲットにあたります。 ただ、それだとふつうの家計簿とかでもいいの
私がまだ駆け出しの頃、遠い昔。 努力したにも関わらず良い結果が残せなかった記憶の一つに「とりあえずイメージが湧かないからビジュアルデザインを3案出してください」に従ったことがあります。 しかし、この行動が意外な結果になることもあって、こんな返事が来たりします。 「どれが良いのか決めきれなくなったんです、もう4案出してもらえますか?」 相手に決めきれない状況をつくってしまったのが自分であることに気づいたのは、それから随分経ってからです。 随分経った理由は、決めきれない相手のせいにして不満をつのらせていたからです。 毎週水曜更新のツクロアのデザインラボ、今回私のターンでは、何案もつくって提出すること自体が悪いということではないのですが、似通った案を提出するにはそれなりの根拠がないと相手を苦しめることになりかねない、という経験に基づいた話です。 本命と捨て案 こういったケースで、よくあるパターン
「なぜこういうデザインになったのか」というデザインフローシリーズ。 まさかの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でパーティクルアニメーション 解説は後にして、先に実験結果を撮影してみました。 私の演奏なのであまり上手ではありませんが。 まずはドラムセット全景、センサーを設置してみました。
前回のコンセプト編に引き続き、今回はフォント編になります。 普段生活の中で目にする、新聞・広告・雑誌・テレビ・Webサイトなどありとあらゆるものには文字があり、 それぞれに合ったフォントが使われています。 なぜこのフォントなのか?と思いながら見たことはありますか? 職業的に気になって、色んな場所で「あ、このフォント使ってる」と日常的に見ていることが多いのですが、むしろデザイナーにはフォント大好き!フォントマニア!な人が多いです。 「トンマナ」ちゃんと考えてね よく「トンマナ」なんて言葉、聞いたり使ったりしますよね? 正確には「トーン&マナー」 デザインなどするにあたり、コンセプトや雰囲気に統一感をもたせることです。 その企業のサイトやサービスに、いかに合ったイメージにするのか?そこには色んな要素が含まれています。 配色だったり雰囲気が柔らかいか硬いか等ありますが、フォントの選び方などもその
「なぜこういうデザインになったのか」というデザインフローシリーズ。 前回までは、情報のグルーピングから、歯の番号の図をどう入れるか、と日付の秘密をお伝えしました。 歯科予約システムの3回目の今回は、「デザイン編1」としてどういうデザイン(レイアウト)に展開できるか、そしてその意味を解説していきます。 色については次回に。。 前回までの話を読んでいない方はまずこちらからお読みください。 歯科予約システムの治療履歴画面(基本) | DESIGN LAB by tuqulore 歯科予約システムの治療履歴画面(応用) | DESIGN LAB by tuqulore 前回の記事に関して受けた指摘 さて本題に入る前に、前回の応用編で歯の番号の図を入れたわけですが、SNSで次のような指摘が入りました。 「カルテって、ふつう左右逆に書くもんじゃないですか?」 たしかに!! 整形外科のカルテなどを見ても
CSSのボタンがつくれる簡素なジェネレータ HTML, CSSをコピーするだけで使える Font awesomeのアイコンがキーワードで検索できる つくったボタンをシェアできる シェアされたボタンデザインは別の人が使うことができる 「あったらいいな」と思ったことなど 近年の制作スタイルを続けていくにつれ、機能は少なくていいからこれだけやってくれるツールがあればいいなあと思っていたことがあります。以下のような感じです。 数年前と違い、アイコンは画像でなくフォントを使うことが多くなった Font Awesomeのアイコンなど、探すのがわりと大変なのでキーワードで検索したい BootstrapやOnsenUI、Ionicなど便利なフレームワークがあっても、それを使うほどではない状況 ひたすらコードを書いてみて、うまく動いていない部分もありますが、以下のようなことができました。自分の書いたコードで
「なぜこういうデザインになったのか」というデザインフローシリーズ。 前回の基礎では、必要な要素を整理してからの情報のグルーピング、さらには人が使うための気づかいを少しだけ書きました。 今回は応用として、引き続き同じネタで、 歯の番号わからんよね 日付に隠された秘密 を書いていきます。 前回の基礎を読んでいない方はまずこちらからお読みください。 歯科予約システムの治療履歴画面(基本) | DESIGN LAB by tuqulore 【7】歯の番号わからんよね 前回、治療内容についてはこのように「左上7」「右下3」などと、歯医者さんの専門用語で書かれていて、これわからないよね、ということを書いていました。 もしこれを使う人が歯科医の業界にいる人であれば、「左上7」といわれてピンとこなければ、ちょっとヤバいレベルだと思います(わたしたちが「Photoshopってなんだっけ。。」と言うのと同じく
要件通りにつくったにもかかわらず「ツルの一声」で全部やり直し、なんて多くのデザイナーが経験しているのではないでしょうか? 私の業務に、デザインをリニューアルしたいというお客様のチームにおけるミーティングのファシリテーター(進行役)があります。 お客様の会社やサービスの規模も様々で、ありがたいことに最近では組織のトップの方(つまり社長さん)とも会話をさせていただくことがちょっとずつではありますが、増えてきました。 そういった経験をさせていただく中で、デザインと経営理念が密接…とまでは言わずとも遠くで紐付いているような関係があることを感じて、意外とそこが見落とされ、方向性がなかなか定まらないプロジェクトやチームもあるのでは?なんて。 デザイナーさんに経営なんて堅い話のように思えるかもしれませんが、実は全然そんなことはなく、一つのデザインの指標を決めるためにも、私がクライアントの上司の方にお願い
デザインに関する何かを書いていくDESIGN LAB、わたしのターンでは「なぜこういうデザインになったのか」というデザインフローを毎月お伝えしていこうと思います。 具体的な例については、架空の仕様のアプリが多くなると思います。 デザインには正解がない、でも最適なものはある デザインにはいろいろなアプローチ、表現があるので、「デザインには正解がない」とよくいわれます。 でも、その案件に応じた最適なデザインというのはそれぞれにあると考えています。 この「最適な」の根底にあるのは、クライアントの要望。…と思われがちですが、それだけではありません。クライアントの要望プラス、ユーザーの動向や気持ちも見逃してはいけません。 クライアントの要望だけを見ていると、ユーザーの気持ちを忘れがちになる わたしがデザインをするときに必ず考えるのは、「ユーザーの気持ち」。 クライアントと話をしていると、ついついクラ
メンバー募集中 デザインラボ・ツクロアを読んで、一緒に仕事をしたいと思ってくれた方、こちらもご覧ください。 採用情報 私たちについて このメディアを発信しているツクロアというチームのこだわりや仕事への取り組みをご紹介します! ツクロアについて
次のページ
このページを最初にブックマークしてみませんか?
『ツクロア - DESIGN LAB』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く