表題の通り理系男子大学生になった。今年40歳になるというのに、また16~17年かかってようやく奨学金の返済を完了したところなのに、まさか自分がまた大学に行くとは思っていなかった（通信だが）。 自分は都内でデザインエンジニア（UI寄りなWebフロントエンドエンジニア）の肩書で、デザイン部に所属している。はじめの大学も文系のデザイン専攻で卒業後、Webデザイナーとして働いてたらHTML/CSSコーディングが好きだったので、徐々にフロントエンドよりになり、今に至っている。自分のアンカーとしてはやはり今もデザイナーな気持ちがある。 ただ現在勤めている会社のミッションが『データによって人の価値を最大化する』というもので、実際作っているプロダクトでもSQLの知識を必要とされているものだったりして、 デザインエンジニアだがUI（フロントエンド）という領域だけでは、問題は正しく理解できないように感じていた

UXデザインの法則 Jon Yablonski (著) Amazon.co.jpで詳細を見る 心理学と聞くと、ちょっと仰々しい感じがするが、中身は一度は聞いたことがある法則だたったり、デザイナーなら無意識でやってるようなテクニックであったり、そんなに小難しくない。中には知らない法則もあったりして、自分が作成したデザインを説明するときに、これらの引用を添えて説明すると説得力も増すだろう。 ヤコブの法則：慣れ的なアレ フィッツの法則：ターゲットの大きさと近さのアレ ヒックの法則：選択肢の多さについてのアレ ミラーの法則：マジックナンバーのアレ ポステルの法則：寛容な入力に対応しよう ピークエンドの法則：ピークとエンドが大事 美的ユーザビリティ効果：ふつくしい is よい フォン・レストルフ効果：リズムを変える的なアレ テスラーの法則：a.k.a. 複雑性保存の法則 ドハティのしきい値：応答が0

気づいたら、入社してました。社内を見渡すとツヨツヨなエンジニアばかりでガクブルですが、自分はデザイナー職での採用でした。といってもWebフロントエンドのコード(front-of-the-front-end)も書くのですが、いわゆるデザインエンジニアって感じです。最近は、デザインエンジニアって何するんだろう？と思いながら、下記の記事を訳してました。 【翻訳】私ってデザインエンジニアかも... - MOL といってもこれはクライアントワークを主とするClearleft社のデザインエンジニアの話なわけで、KARTEを提供するSaaS会社のデザインエンジニアにはまた違った側面があったりするんだろうなと思ったり、難しい。 自分でデザインしてコーディングするぶんには問題ないわけですが、バックエンドも書くエンジニア（ややこしい）の皆さんも不慣れなUIコードを書くわけで、そこでいかに負担をかけずにデザイナ

Original：I think I might be a design engineer…（2021-02-17）by Trys Mudford この記事はデザインエンジニアリングについてのシリーズの一部です。Web開発者の役割の変化やデザインとエンジニアリングの違いについて議論していきたいと思います。長くなりそうだったので、この記事を補足するために Prototyping、Systemised design foundationsとThe designer & developer relationshipに記事を分けました。それでは始めましょう。 数年前から、自分がWeb開発のどの領域に当てはまるのか考えてきました。自分のキャリアを振り返れば、ある種の仕事に収束しているのを感じていましたが、それが何という名前なのか、今までは分かりませんでした。 Web開発者はWebサイトを構築するのか

Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという

ユーザーインタビューをはじめよう スティーブ・ポーチガル (著), 安藤貴子 (翻訳) Amazon.co.jpで詳細を見る サブタイトルにあるように「聞くこと」入門の本だなぁという小並感。UXリサーチのためのユーザーインタビューと聞くと小難しいテクニック満載なのかなと思ったのだけど、読んでみると、信頼関係（ラポール）構築とか静かな環境を準備するとか当たり前だけど大事なことについて解説している。 ユーザーインタビューする機会なんて、まぁそうそうにはないが「聞くこと」に関しては、日常的にしている行為であるので、聞き上手になりたければ本書を手にとってみるのもありだろう。 最近では、エンジニアがポッドキャストを配信したりYoutuberになったりしてるから、そうゆうケースで、ゲストから面白い話を聞く術を身につけるという点でも良いかもしれない。 そいうゆうわけで当たり前をちゃんとやっていくために必

最近、16インチMacBook Proを持ち歩くようになった。これが重いこと重いこと…せめてものあらがいで、充電器だけでも軽量化しようと思った。 Hyppr PD 充電器 100W E-MARK線付き 急速充電器 GaN (窒化ガリウム)採用 タイプC 2USB-Cポート【PD3.0対応/PSE認証済/折畳式/】最新のMacBook Pro 16"対応 (ブラック) ブランド: Hyppr Amazon.co.jpで詳細を見る Hyppr PD 100W GaN 急速充電器というのものを購入した。流行りのGaNだ！ MacBook Pro標準の充電器と比べて、まぁ少し、ひとまわり小さいが、厚さは本製品のほうが厚いので、そこまで感動がない。 黒色が好きなので、黒を買ったが白色のほうが安い。（どうゆうことよ） 重さが89g軽い！（うん微妙…） 充電器だけではMacBook Proを充電できない

NETFLIXの最強人事戦略 パティ・マッコード (著), 櫻井祐子 (翻訳) Amazon.co.jpで詳細を見る ちょっと前の本。この本を読む前まではネットフリックスと聞くと強いエンジニアたちが集まって、ハイパフォーマンスを出さなくなったエンジニアは、バッサバッサ解雇するようなイメージだったが、この本を読む限り、ちょっと違うようだ。 プロスポーツチームのように考えれば分かりやすいのかもしれない。プロスポーツ選手は多額の報酬をもらえるかわりに、報酬に見合った活躍をしなければ契約を解除される。エンジニアも（ネットフリックスのエンジニアは特に）またプロスポーツ選手並かそれに近い報酬を得ていることだろうから、この考えをエンジニアにあてはめるのは間違ってないのかもしれない。 またプロスポーツ選手は加齢によるパフォーマンス低下というあらがいようがない事実はあるが、エンジニアはまぁそこまで極端に落ち

一人から始めるユーザーエクスペリエンス 長谷川 敦士(監修), 深澤 大気(翻訳), 森本 恭平 (翻訳)　他 Amazon.co.jpで詳細を見る 昔、購入して積ん読してあったのをようやく読了。デザイナー向けの本かなと思ったらそうでもなかった。どちらかというと、企業のWeb担当者などがUXデザインやるぞ！と思ったときに、どうやって一人で始めていくかを解説してある。なので、UXデザインで使う各手法について軽く説明してある程度である。自分で実践してもっと知りたいと思ったら、ペルソナなり、ユーザービリティテストなりの専門書を手にとって見るのもよいだろう。 個人的にUX関連の手法というかワードがいっぱいあって、ごっちゃになっていたので、各ポイントを簡潔に説明してあったのは良かった。またUXデザイナーはいわゆるデザイナーだけのキャリアアップの職種ではなく、エンジニアからUXデザイナーになることもあ

デザインの伝え方 Tom Greever, 坂田 一倫他 Amazon.co.jpで詳細を見る エンジニアもコードレビューのときにいろいろ気をつけることはあるが、こちらの本はデザイナーがデザインレビューするときではなくて、デザイナーがデザインの決定権を持つステークホルダーなどに自分のデザインを説明する方法について解説している。 デザインとは見た目に起因するところが多いので、デザイナー以外から、いろいろ言われやすい職種である。エンジニアをしていて、ディレクターなりPMなりに、そこは三項演算子使わないほうがいいんじゃない？みたいなことはヒャクパー言われたことないのにも関わらず、デザイナーはデザイナーからはもちろん、すべてのステークホルダーからなんやかんや言われる。 偉大なデザイナーは偉大なコミュニーケーターであるように、本書もまたデザインの本というより、コミュニケーションの本に近い。それは目次

まぁ題名の通り。 struct ContentView: View { @State private var selection = 0 var body: some View { VStack(spacing:0) { Picker("画面切替", selection: self.$selection) { Text("A").tag(0) Text("B").tag(1) }.pickerStyle(SegmentedPickerStyle()).padding() if selection == 0 { viewA } else { viewB } } } private var viewA: some View { ZStack { Color(.blue).edgesIgnoringSafeArea(.all) Text("A").foregroundColor(.white)

最近、ABEMAで将棋チャンネルをよく見ている。藤井聡太王位・棋聖があまりにも強くて、異世界転生ラノベでよく見る俺つえーーー！！を現実世界で見せられているような感じで、最年少記録や連勝記録をどこまで更新できるのか見ていて面白い。 そうゆうわけでもっぱら見る将になってしまったが、将棋の戦法というより、どちらかというと解説・聞き手の日常の話が好きで聞いている。当たり前だが藤井二冠以外にも棋士には色んな人がいて面白い。その中でも解説名人と言われている木村一基九段の話は特に面白くて、本書を手にとった。 本書は2019年に最年長で王位タイトル獲得したを木村九段の話である。先述の通り、歯に衣着せぬ解説や指導でファンが多い木村九段が46歳にして念願のタイトル獲得で涙なしでは読めない。決して木村九段が弱いわけではない。羽生世代より少し若い程度なので、キャリア全盛期のほとんどが羽生永世七冠の無双時代とかぶっ

TypeScriptもあんまり使ったことなかったから、型がどうも苦手というか慣れない。 Int とか String とかそうゆうシンプルなものだと分かるが、そのシンプルな型をよくわからないものにするのがOptional型だと苦手意識を持っていた。 var a: String = "swift" var b: String? = nil var c: Optional<String> = nil

皆さん、お金儲け好きですか？僕は好きです。最近、投資対象としてのスニーカーについて話したので、ここでもシェアするぞ。 目次 1. 投資対象としてのスニーカー - ダブルネーム - カラーリング - 発売年 2. リスクと重要事項について - 復刻発売による価値の希薄化 - 保管スペースの確保 - 劣化の可能性 - 偽物の流通 - 抽選販売が当たらない 3. 代わりのご提案 - Restore - Custom Painting - YouTube 4. まとめ ちなみに、私の投資経験の始まりは2017年ごろの仮想通貨で大損こきました。2020年、現在もビットコイン価格があがってきており、また仮想通貨ブームが再燃しそうですが、私の持っているのはイーサリアム系コインで今のところ恩恵を享受できてません😇 仮想通貨は投資というか投機なので、もうちょっと真っ当な投資をしようと思い、今度は国内株式に

いわゆる、銀の弾丸を読んだ。 オブジェクト指向UIとはまず対象となるオブジェクトを選択して、それに対するアクションを行う。例えば、デスクトップで書類ファイルを削除したければ、マウスなどで対象の書類ファイルをクリックし、「削除する」などのメニューを選ぶ。つまり、「名詞 -> 動詞」の流れだ。これに対しタスク志向UIというのは、例えば、CLIでdeleteコマンドみたいなものをまず打ち込み、次に対象となる書類ファイルのパスを入力するといった「動詞 -> 名詞」の流れだ。 CLIアプリケーションなら理解できるが、GUIのアプリケーションにおいてこういったものをあまり目にしたことがないような気がする。 タスク志向UI（モード）を作らざるを得ない状況として、次のような場合だという。 タスクによって処理対象となるオブジェクト集合が異なる場合。この場合、タスク選択はアプリケーションの選択と同じような位置

UIKitのUIColorとSwiftUIのColorは違うと気づいた最近。 例えば、赤色を表示したいときは、SwiftUIでは Color.red と書く。たまにColor(.red) というのも見かけて、書き方の違いなんだろうか？と思ってたけど、全然違った。Color(.red) は Color(UIColor.red) の略した書き方で、UIColor をSwiftUIのColorとして使う方法だった。 ややこしいのはText("hoge").foregroundColor(.red)のようなケース。文字色を赤色にしたいとき、foregroundColorモディファイアはColorが引数に来ると想定しているので、foregroundColor(Color.red)と同じである。もし、UIColorの方の赤を指定したかったら、foregroundColor(Color(.red))と書

Webレイアウトを組むにあたってMargin/Paddingは非常に重要だ。しかし、SwiftUIにおいてPaddingモディファイアはあるがMarginのそれはない。こんなの片腕をもがれた状態じゃないか！と思ったが、SwiftUIでは、どうやら勝手が違うようである。 struct ContentView: View { var body: some View { HStack(spacing: 40) { Text("タグ１") .padding() .background(Color.yellow) Text("タグ2") .padding() .background(Color.blue) } } } 上記のように、タグのようなものを横並びにしたいと思ったとき、Marginがないので、どこでタグ間の余白を調整すればよいのかと思っていた。とりあえず、親のHStackにspacingプロ

最近、SwiftUIデビューをした。太古の昔にTitanium MobileでiOSアプリを作ったことはあるが、基本Web畑で育ってきたt32kにとっては、iOSというかSwiftというかSwiftUIでのユーザーインターフェイス作成は、まるで外国での生活のようで、いろいろカルチャーギャップを感じる。そうゆうことを書きたい。 まず初めに、文字寄せだが、テキストを左寄せ・右寄せにしたいときどうすればよいんだろうと思った。Xcodeでプロジェクトを作成するとHello World!の文字列を表示するボイラープレートが用意されている。 この文字列は上下・左右・真ん中に表示されている。これを左寄せにしたい。Webでいう、text-align: leftは、SwiftUIではどうするんだろうと私は考える。 struct ContentView: View { var body: some View

みなさん、Stay Homeしてますかー！在宅勤務でどこも行かないとちょっとメンタルに来るものがありますね。外でアウトドアスポーツを楽しむのも憚れる日々で憂鬱だよね。 ということで、家でできることないかな？と考えた結果、最近は週末になると家でスニーカーを洗濯する毎日。 個人的に何かを補修したり直したりキレイにしたりするのが好きな自分にとっては、スニーカーをクリーニングするのは心が落ち着くし、何よりもピカピカになったシューズを履くのは気持ちがよい（リファクタリングも好き）。 そんなわけで、これまでやってきたスニーカークリーニングテクニックを紹介するぞ。 エアジョーダンシリーズ新品で買うとプレミアがつくんじゃないかと邪な考えのため、いつも履けずにいたのでメルカリで中古を買った👟ジェイソンマークで洗ったらソールまで思いの外キレイになって驚いている。これをまたメルカリで売れ（ｒｙ。。。 pic.

Activity Data Platform 以前の記事で、ランニングが続いてる（その割には痩せていない…）と書いたが、なぜ1年以上も続いているのか、自分なりに考えてみると、やはりアクティビティログが貯まるのが自分の性に合っているのだと思う。ランニングであれば、月間の走行距離であり、Nike Run Clubなどで友人たちとどれくらい走ったか、競い合うというか、走行距離が積み上がっていくのは見ていて楽しい。貯金に似てるのかもしれない（健康貯金みたいなもんだし）。 そうゆうわけで、走行距離だけを生きがいにしてきたわけだが、別に距離を稼ぐだけならジョグとか、それこそウォーキングとかで距離を稼いでもいいわけで、月間100km歩くのと、ゼェゼェ言うほどのスピードで走り切るのとは全然違う負荷である。 ソーシャルフィットネスネットワークであるStravaの有料会員（Summit）になると、アナリシスパ