株式会社プレイドにジョインしました！ - MOL
気づいたら、入社してました。社内を見渡すとツヨツヨなエンジニアばかりでガクブルですが、自分はデザイナー職での採用でした。といってもWebフロントエンドのコード(front-of-the-front-end)も書くのですが、いわゆるデザインエンジニアって感じです。最近は、デザインエンジニアって何するんだろう？と思いながら、下記の記事を訳してました。 【翻訳】私ってデザインエンジニアかも... - MOL といってもこれはクライアントワークを主とするClearleft社のデザインエンジニアの話なわけで、KARTEを提供するSaaS会社のデザインエンジニアにはまた違った側面があったりするんだろうなと思ったり、難しい。 自分でデザインしてコーディングするぶんには問題ないわけですが、バックエンドも書くエンジニア（ややこしい）の皆さんも不慣れなUIコードを書くわけで、そこでいかに負担をかけずにデザイナ
速攻改善 UIデザイン - MOL
なにかのフレームワークやライブラリを説明するときに、メリットは紹介しつつも『xxxは決して銀の弾丸ではない〜』という表現をよく見かける。私もそうゆう文章をよく書いた気がする。知らんけど。そうゆうわけで、オブジェクトベースUI設計は銀の弾丸だ！と断言している本特集に惹かれて購入した。 オブジェクトベースUI設計とはタスクベースUI設計と対になるもので、『名詞』–> 『動詞』の順序で操作になる。つまり、名詞となるオブジェクトを選択してから、それに対して何らかのアクションが起こる。プログラミングを嗜むものなら、慣れ親しんだ考えだろう。 それに対して、タスクベースUIは『動詞』–> 『名詞』となる。本特集で例に出ているのが、どこかのピザ屋のアプリUI。ユーザーが一番最初にアクションを起こす画面には、『注文する』というボタンがデカデカと存在している。それから、いつ配達するか、氏名・電話番号を入力して
パフォーマンス向上のためのデザイン設計 - MOL
画像： Tufted coquette - Wikipedia, the free encyclopedia ハンドメイドマーケットプレイスを運営し、Webパフォーマンスの取り組みが素晴らしいことでも有名なEtsy社のエンジニアリングマネージャーが書いた本。フロントエンドのパフォーマンスと言うと、Steve Souders氏の『ハイパフォーマンスWebサイト』は有名で基本的なことは原則は変わってはいないが、原著が出版されたのが2007年と考えるといささか古い。 『Googleの検索結果で何秒遅れたら〜』、『Amazonのサイトで何秒遅れたら〜』と言った聞き飽きた事例などが本書ではアップデートされ、新しい事例や、比較的最近のフロントエンド技術が紹介されており、とっつきやすくなっている。ただ原著の出版されたのが2014年12月なのでAMPみたいな最新のものは解説されていないが、監訳者著の付録で
マイクロインタラクション事始め以前 - MOL
（アニ GIF あるのでちょっと重いです…） マイクロインタラクション事始め以前 @Yahoo!Japan 2016.07.04 先日、とある社内勉強会にて発表する機会があったので書き残しておく。要は最近のフロントエンド開発の流れに疲れて、もうちょっと違う方向で頑張ろうと思った話。 葛藤 Kaizen Platform, Inc. フロントエンドデベロッパーの t32k です。皆さん、ご存知かもしれませんが、Kaizen Platform は A/B テストツールを提供しています。その A/B テストのデザイン案も国内外約 2 千名のグロースハッカーと呼ばれる方々から、クラウドソーシングで調達することができます。なので、自社内にデザイナー抱えてなくても A/B テストが実行可能です。 グロースハッカーの登録自体は無料ですので、デザイナーの方はぜひ登録してもらうと、コンバージョン率の高いデザ
デザインの秘訣はまずは気づくこと - MOL
Tony Fadell: The first secret of design is … noticing | TED Talk | TED.com ときどき、使えないUIデザインのWebサービスに触れていると、中のデザイナーはなにをやってるんだ！と思うことがある。しかし、実際の中の人になるといろんなしがらみや諸事情により仕方がないと諦めてることが多々ある。 10年以上続いてるWebサービスでデザイナーをしていた自分にとっても他人事ではなかった。問題意識があってできていないのならまだ良いほうで、それが当たり前だとなんの疑問も思っていなかったら最悪だ。新米デザイナーのときに必要以上に熱くデザインの理想を追っていた時代から、いつのまにか事なかれ主義になって、そのどうしようもないデザインが当たり前だと思い込んではなかっただろうか。 これはなにもデザインだけの話ではない。例えば僕はしがないHTML
強いチームはオフィスを捨てる - MOL
皆さんご存知かもしれないが、弊社Kaizen Platform, Inc.は、現在、東京・サンフランシスコ両オフィス合わせると100人くらいの従業員がいる規模のフルリモートワークOKな会社だ。エンジニアだけでなく社員全員がリモートワーク可能だ。 uiureo/remote-in-japan 転職する前から、このことは知っていたのだけど『リモートワークしたい』という気持ちはなかったので、特に気にしてはいなかったが、実際働いてみると思うところはいろいろある。そうゆうわけで弊社リモートワークガイドラインの推薦図書である上記の本を読んだ。 本書の言葉を借りて端的に言えば、こうゆうことだ。 アップデートが必要なのは、どうやら人の気持ちのようだ リモートワーカーと働く オフィス勤務で働き出して、一番最初に感じたのはハングアウトの多さだ。まぁ、リモートワーカーがいるので普通のMTGがハングアウトに置き換
Kaizen Platform, Inc.に入社しました! - MOL
フィリピン・マニラ、カナダ・バンクーバーと1年続いた海外ニート生活に終止符を打つべく、表題の会社にフロントエンドエンジニアとして入社しました！ 幸いなことに、日本帰ってからの就活は書類で落とされることもなく、みなさんとてもウェルカムな雰囲気で迎え入れてくれたこと、本当に感謝します。その中でも特にKaizenさんは一番最初にオファーを出していただき、ローリングストーンのように転げ落ちていた私を拾ってくださったこと、本当に本当に感謝のしようがありません。 プロフェッショナルな大人が集まるこの会社で、自分も恥じないように一員として頑張っていく所存。今後はこの会社と一緒に世界に向けて挑戦したい！！ 新しい働き方に挑戦してみませんか? - Kaizen Platform, Inc. グロースハッカーとは - Kaizen Platform, Inc. あと、会社が新宿なので新宿な人たちは遊んでくださ
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
【翻訳】ビジュアルデザインはつまらなくなってしまったのか？ - MOL
Original：HAS VISUAL DESIGN FALLEN FLAT? （2015-01-20）by Emmet Connolly 2013年から2014年の劇的なUIフラット化により無数のピクセルが流れ落ちていった それはビジュアルデザインにおいて非常に大きな変化だった。Microsoftの急進的でモダンなMetro UIはその前兆だった。iOS7のリリースよって大衆化し、UIのトレンドは2極化した。Google Material Designによって、おおかた完成した。 フラットデザイン（未完成であるけれど便利な表現）はスキューモーフィズム（同前）を駆逐するだけでなく、それの墓の上で踊り、すべてのべべル、影、墓石のテクスチャさえ消し去ってしまった。 上図のようなデザインである。 発展、変化、流行は避けられないものだ。このような最新スタイルもまた、いつの日か廃れていくだろう。未来
Wisteria：デザインツールとしてのCSS - MOL
Wisteria.css: A class selectors based harmless CSS library. t32k/wisteria WisteriaというCSSライブラリ作った。基本的な用途としてはモックアップや後方互換とかそこまで考えなくていい、小規模の個人用のページとかで使われることを想定している。 Skeletonという、すごくシンプルなCSSライブラリがあるのだが、僕はこれが好きで、ちょっとしたものとか作るときによく使用している。このブログもSkeletonをベースにしているくらいだ。 でも最近使ってて、なにかこう違和感というか、相容れないモノを感じたので、思い立って自分用のCSSライブラリを作ってみたのだ。 Harmless Wisteriaを作るにあたって、一番気をつけたことは無害であること。つまり要素にスタイリング（h2 { font-size: 24px }
Webエンジニアからみたフィリピン語学留学 - MOL
こんちわ、無職の@t32k だよ。6月初めから10月末まで、まるまる5ヶ月間(22週間)フィリピンに語学留学してきたので、今回は思いの丈を綴ってみるよ。 書いてみて思ったけど、特にエンジニア関係なかったわー。 ※ 2014年6月から2014年10月までのマニラでの出来事である。1ペソ＝2.4円で計算してある。 ぼくがなぜフィリピンに行ったのかは、こちらの記事を参照してね。簡単に言えば、エンジニアとして英語にちゃんと向きあおうって思ったんだ。 なんでフィリピンなのかとか 大学を卒業してWebデザイナーになって以来、より多くの情報を早く得るには、Webフロントエンド技術に関して非常に多くの技術情報を日々捌いているLayzieさんも曰く、英語が不可欠だと感じていた。ただ普通にアメリカに語学留学したら学費だけで200万くらい飛びそうな感じだったので、ワーキングプアだった僕にとっては取れない選択肢だ
若人へ - MOL
もう僕も30だ。ここで老害っぽくこれから新しい一歩を踏み出すニューカマーのために気の利いたことを言いたい衝動に駆られている。 これから社会に入って、いろいろうまく行かないことや八方塞がりな状態にもなるかと思う。しかし、そうゆうものは自分をうまくコントロールできれば大抵のことは解決できる（と思っている）。そんなことを話したいと思う。 選択 人間誰もが、毎日『選択』という行為をしている。選択という行為は、今日は何を食べようか？といったルーチン的な選択もあれば、どの会社に入社・転職しようか？といった重大な選択まで様々である。そして、その選択してきた結果が『今の自分』である。 どの大学に入るか、どの会社に入るかといった重大な選択は『選択』として皆が意識している（せざるを得ない）ことだろう。しかし、僕が重要だと思っているのは、毎日の比較的重要ではない選択の方だ。例えば、今僕が英語を喋れないのは、30
バッジ駆動開発（2014:Node.js） - MOL
こんちわ！@t32kだよ。みんなバッジ好き？( ﾟ∀ﾟ)o彡ﾟバッジ！バッジ！バッジ！ 小学生の頃、自由勉強ノートってのがあって、勉強したページ分、先生からシールをもらってはそのノートに貼り付けていたのは良い思い出です。あのノスタルジーを再び！ ということで、大人の自由勉強ノートといえばGitHubレポジトリじゃないですか。OSSがんばります！私、気になります！そしたらシール欲しいじゃないですか？ あるよ、シールあるよ、シールってかバッジだけど。 上記は最近作ってるStyleStatsのReadmeだけど、なんか緑のバッジいっぱいですよね。それを説明していく！ Travis-CI Status Images Travis CI: Status Images まずは、この中のバッジの中では一番メジャーじゃないだろうか、Travisの Status Images。昔、@kyo_agoさんが『テ
Sass/Compass徹底入門を監修しました - MOL
2014年3月18日に発売される、Sass and Compass in Actionの邦訳版である『Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために』を監修した。 Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Brandon Mathis, 石本 光司 (株式会社サイバーエージェント) 翔泳社 2014-03-18 Amazonで詳しく見る by G-Tools 監修の依頼を受けて音速でハイと答えたのだけど、監修って何するんだろうねって感じだった。いや、原書の『Sass and Compass in Action』は以前から購入していて、Sass/Compassの開発者であるNathan Weizenbaumや
html5shim vs html5shiv - MOL
JavaScript Advent Calendar 2011 (オレ標準コース) 12 日目の id:t32k です。去年も参加しましたがなんでもありと聞いて今年も懲りずに参加！ はじめに言っておきますが、html5shim も html5shiv どっちもまったく同じです。違いなんて無いので、こんなことに頭を悩ませる暇があったらさっさとコードでも書いてろ！以上！うんこ(・∀・)! そんなこと言っても世の中結果じゃない、過程が大切だと思うんだ先生！ってことで今回は調べてみます。 html5shi(m|v)、めんどくさいので以下 html5.js は”HTML5 IE enabling script”の名の通り、IE8 以下でarticleなどの新要素が正しく認識されずスタイル(CSS)がうまく適用されない問題を解決しそれらのブラウザでも利用可能にしてくれます。 document.crea
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
