タグ

ブックマーク / design-lab.tuqulore.com (12)

  • コクのある乱数 | ツクロア - DESIGN LAB

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

  • 業務用ツールのデザインに向けてUIデザイナーができること(その1) | ツクロア - DESIGN LAB

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

  • ソフトウェア学科のエンジニア学生さんが今向き合うデザインとは | ツクロア - DESIGN LAB

    今週は大学のことを。 エンジニアではない僕がソフトウェアのことを語るのは説得力ないが、まあ、同世代のコードを書いている周りの知人と、若い学生さんたちの考えってやはりどこか違うな、と思ったこともあり、そんな大学の授業を通じで感じたこと。 僕は大学でソフトウェアコースの指導をしてきて今年で3年目、特に僕はエンジニアスキルが高いわけではないが、先生を週に1,2回行っている。 このたった3年の間で、ソフトウェアコースのカリキュラムがとても変わったなあという気がする。 HTML, CSS, JS, レイアウト基礎, ビジュアルデザイン基礎, 画面設計, WebGL GLSL基礎, Node.jsなど、どちらかというと手を動かすだけに偏りがちなので、去年からアイデアワークや数人のチームで開発までやってみるというカリキュラムをつくってみた。 後半、Edison for Arduinoとの連携や3Dプリン

  • 受託制作における大きいデザインと小さいデザイン、デザインで解決できることとは? | ツクロア - DESIGN LAB

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

  • デジタルファブリケーションにチャレンジ(1)-レーザーカッター編 | ツクロア - DESIGN LAB

    初学者ながら「モノづくり」に実際触れてみた。個人的に興味のある分野ではあるが、専門知識を持たない自分にどこまでアタマでイメージしているものと近づけられるか試してみたいと思った。 デジタルファブリケーションとは デジタルファブリケーション(Digital Fabrication)とは、コンピュータで設計したものが、それとつながった工作機械によって実際のモノ(物質)を作り出す技術の総称らしい。 特にレーザーカッターや3Dプリンタがその目的を果たす機械としてよく取り上げられる。 しかし、ネット上のPCやスマホの画面で見ることができる情報よりも、手にとれるモノからの情報(例えば災害マップや子供向けの絵など)のほうが時と場合によってはユーザーとの親和性が高く、単にモノを出力する機械というよりも「情報をモノに置き換える技術」と考えている人もいるようだ。 スキルを活かす DTPやWebのデザインの仕事

  • UIデザインという仕事 | ツクロア - DESIGN LAB

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

  • HTML/CSSのコーディング品質についておもうこと | ツクロア - DESIGN LAB

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

  • デザイナーが書くコードについて思うこと(1) | ツクロア - DESIGN LAB

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

  • ドラムの振動をセンサーで映像にしてみる | ツクロア - DESIGN LAB

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

  • わかりやすさを伝える【フォント編】 | ツクロア - DESIGN LAB

    前回のコンセプト編に引き続き、今回はフォント編になります。 普段生活の中で目にする、新聞・広告・雑誌・テレビ・Webサイトなどありとあらゆるものには文字があり、 それぞれに合ったフォントが使われています。 なぜこのフォントなのか?と思いながら見たことはありますか? 職業的に気になって、色んな場所で「あ、このフォント使ってる」と日常的に見ていることが多いのですが、むしろデザイナーにはフォント大好き!フォントマニア!な人が多いです。 「トンマナ」ちゃんと考えてね よく「トンマナ」なんて言葉、聞いたり使ったりしますよね? 正確には「トーン&マナー」 デザインなどするにあたり、コンセプトや雰囲気に統一感をもたせることです。 その企業のサイトやサービスに、いかに合ったイメージにするのか?そこには色んな要素が含まれています。 配色だったり雰囲気が柔らかいか硬いか等ありますが、フォントの選び方などもその

  • 歯科予約システムの治療履歴画面(基本) | ツクロア - DESIGN LAB

    デザインに関する何かを書いていくDESIGN LAB、わたしのターンでは「なぜこういうデザインになったのか」というデザインフローを毎月お伝えしていこうと思います。 具体的な例については、架空の仕様のアプリが多くなると思います。 デザインには正解がない、でも最適なものはある デザインにはいろいろなアプローチ、表現があるので、「デザインには正解がない」とよくいわれます。 でも、その案件に応じた最適なデザインというのはそれぞれにあると考えています。 この「最適な」の根底にあるのは、クライアントの要望。…と思われがちですが、それだけではありません。クライアントの要望プラス、ユーザーの動向や気持ちも見逃してはいけません。 クライアントの要望だけを見ていると、ユーザーの気持ちを忘れがちになる わたしがデザインをするときに必ず考えるのは、「ユーザーの気持ち」。 クライアントと話をしていると、ついついクラ

  • 「実際つくってみる」という勉強法 | ツクロア - DESIGN LAB

    CSSのボタンがつくれる簡素なジェネレータ HTML, CSSをコピーするだけで使える Font awesomeのアイコンがキーワードで検索できる つくったボタンをシェアできる シェアされたボタンデザインは別の人が使うことができる 「あったらいいな」と思ったことなど 近年の制作スタイルを続けていくにつれ、機能は少なくていいからこれだけやってくれるツールがあればいいなあと思っていたことがあります。以下のような感じです。 数年前と違い、アイコンは画像でなくフォントを使うことが多くなった Font Awesomeのアイコンなど、探すのがわりと大変なのでキーワードで検索したい BootstrapやOnsenUI、Ionicなど便利なフレームワークがあっても、それを使うほどではない状況 ひたすらコードを書いてみて、うまく動いていない部分もありますが、以下のようなことができました。自分の書いたコードで

    perstivetech
    perstivetech 2016/01/06
    [design]
  • 1