訳も知らないで

デザイン&プログラミングのことも書くし、それ以外のことも書く。

サイトユーザーの行動を録画できるツール - Jaco

手軽にユーザーの行動を録画するツールがあったので なにか使えるかもと思い少し触ってみました。 導入が簡単で使いやすそうです。 www.getjaco.com イメージ 一覧 動画表示 良かったところ freeプランがあり試しやすい freeプランでも1,000セッション/月ま…

デザイナーと「世界一やさしい問題解決の授業」

デザインとは、問題解決と価値創造である と誰かが言ったとか言わないとか。 デザイナーである以上、自分の持つスキルを使って問題解決や価値創造を目指すことになります。 そこで大事になってくるのが情報の整理・分析だと思うのですが、これがなかなか難し…

デザインワークを進める上で何を押さえておくべきか

(ビジュアル)デザインを考える上で準備が足りず時間を無駄にしてしまったことがあったので デザインワークを進める上でやるべきことをざっくりですがまとめておこうかと。 あくまでイメージを変える・新しく構築するようなデザインワークの場合の話です(新…

某スーパーのセルフレジUI

最近自宅近くの某スーパーにセルフレジが登場しました。 正確にいうと「セミセルフレジ」というものらしく、バーコードの読み取りは店員さんがやってくれて支払いをセルフレジで済ますというもの。 小売店で最近増えているらしいですね。 セルフレジのUI 完…

Atomic DesignでWebサービスのフロントエンドをイメージする

Atomic Designというコンポーネントを組み合わせてシステムを構築していく手法がイメージしやすそうだったので、実際にWebサービスのフロントエンドデザインに当てはめるとどんな感じになるのか考えた。 Atomic Designについてはこの辺を参照 Atomic Design …

Loop processing for NodeList at JS ( ES6 )

Make a note as it is a frequent process. (get some element and use it at loop processing by JavaScript) Use for-of See the Pen Loop processing by for-of for NodeList at JS(ES6) by Fumihiro Nakahara (@711fumi) on CodePen. Use Array.from (If…

エンジニア(プログラマー)はランニングに向いている

そんな気がしています。 ※ここで言うランニングとは長距離走のことね 効率化 ランニング力を上げるために重要なのが、無駄を省く(効率化する)という考え方。 無駄な脂肪、筋肉をつけない 効率の良いトレーニングを行う(根性論じゃない) 無駄なペースの上げ…

駅トイレの緊急ボタン

駅のトイレ(個室)の緊急ボタンにはもれなく注意書きが添えてある。 今更感はあるが良い解決策はまだ出てないっぽいので考えてみた。 なぜ間違える人が多いのか いたずらなどの可能性は置いておくとして。 1, 見た目・形で区別(役割の判別)がつかない場合があ…

フロントエンドの勉強も兼ねて「近場の食事できる場所をテキトーに教えてくれるWebapp」作った

お勉強がてら簡単に作るはずだったのに疲れた。 https://god-of-meal.herokuapp.com/ GitHub - 711fumi/god-of-meal: God will tell the restaurant not far away. やったこと 現在地(緯度経度)から近そうなごはん処をぐるなびAPIを使って取得、テキトーに選…

Google design guidelines のライティングに関する部分を少し訳してみる。 〜 Language & Tone 〜

Google design guidelines のガイドラインの中にライティングに関するページが。 参考になるかなと思い、訳してみた。 ※LanguageとToneのみ 注:だいぶひどいですがニュアンスが伝われば… 良い表現を教えてほしい _(´ཀ`」 ∠)_ Material design - Writing テ…

PadrinoでBootstrap4(α)を管理するためにnpmを使う→Herokuにデプロイ

ちょっとしたサイトをPadrinoで作る際、Bootstrap4(公開時はまだα版)を使ってみることにしました。 せっかくなのでnpmを利用してJS及びCSSを管理することに。 理解できてない部分もありますがとりあえずメモ。 Bootstrap4をnpmで管理 Padrinoでプロジェクト…

I'm in Mars.

という歌がある。 FoZZtoneというバンドのボーカル、渡會さんのソロ作品。 可笑しなものさ 笑いながら憧れの中に住み着いた俺達は 雨乞いばかり ここには水がなくってさ みんなビールばっか飲んでるんだよ そんで泣いている 涙は集めて飲むんだってさ 夢に見…

【JS】jQueryの.onでES6のアローファンクションに書き換えたら動かなくなったので

jQueryを使ったコーディングで関数定義を ES6(Babel使用)のアローファンクションで書き換えたら動かなくなったので。 単純に関数内でのthisの意味が変わるから挙動も変わる。 アロー関数 - JavaScript | MDN $('#foo').on('click', function() { $(this).hid…

【HTML/CSS/JS】擬似要素の中身(content)を動的に変更する。

擬似要素のcontentについてそういえば調べたこと無かったのを反省。 擬似要素はJSから操作できない ある時擬似要素(:before, :after)の内容(content属性)を動的に変更したくてJSで変更しようとしたが、 調べた感じ、JSで擬似要素は変更できないぽい。 (CSS…

各デバイスでの確認環境を準備したメモ ~ windows(IE), iphone, Android ~

Webアプリやらなんやら作った時に必要となる各デバイスでの確認。 Mac上に無料で動作確認環境を用意したメモ。 Windows(IE) Microsoftが提供している無料の仮想マシンをMacで動かすことができる (昔はmodern.IEとか言ってた気がする)仮想マシンをここから…

おすすめ国内インストゥルメンタルバンド。

最近インストゥルメンタルバンドの曲を聞くことが多いので おすすめをつらつらと。インストゥルメンタルってカタカナで書くと格好悪いですね(´・ω・`) SPECIAL OTHERS 野外で聞きながらビール飲みたい。SPECIAL OTHERS - AIMS 【MUSIC VIDEO SHORT ... rega…

wantedlyとgreenで転職活動してみた感想。

最近転職者向けWebサービスを利用し転職活動をしたので、 転職活動の感想をぱらぱらと。 期間 2015/4~2015/7 使ったサービス ・Wantedly(ウォンテッドリー)「はたらく」を面白くする ・IT/Web業界の求人・採用情報に強い転職サイトGreen(グリーン) なぜこ…

夏の音楽フェスの持ち物メモ。 〜ROCK IN JAPAN FES.2015に参加して〜

今年も参戦してきましたROCK IN JAPAN FES.2015! (3年ぶり2回め) とにかくサンボマスター最高だった…! 体中から汗(目も含む)でもうすごいライブでした。 なぜgrassステージではないのか( ゚д゚)ro69.jp …で、毎年のことながら 「アレ準備しておけばよかっ…

東京マラソン2016のエントリーが始まったので東京マラソン2015を振り返る。 〜サブフォーのトレーニング〜

東京マラソン2016のエントリーが始まりましたね。もちろん来年もエントリーする予定ではありますが、 そういえば今年のレースを振り返ってなかったことを思い出したので記録&振り返り。 4時間切り(サブフォー)を狙っている人には参考になる…かも? 結果 201…

【Ruby】HTMLメールのテスト(デザインの確認)がしたかったのでメール送信するためのrubyスクリプト書いた。

HTMLメールを気軽に送信してデザインの確認をしたかったので メール送信用Rubyスクリプト書いた。fumihiro/send-test-email · GitHubGmailアカウントを使って指定したメールテンプレートを使いメールを送るだけ。 意外とHTMLメールを気軽に送る方法が無かっ…

【Gmailでの通知をリッチに!】Email markupでGmailユーザーにわかりやすくお知らせする。

Gmailでgithubからの通知を受け取った際、メール一覧での表示の中にボタンが付いているのに気が付きました。 (今更ながら) これ、issueに変更があったことを通知してくれたメールなのですが、 issueページへのリンクボタンが付いているんですね。 メールを…

プログラマーからWeb(UI)デザイナーになった時に読んでよかった本。

プログラマーからWeb(UI)デザイナーになってもうすぐ1年です。 まだまだ一人前には遠い気がしますが、最初デザイン業を始めるにあたって 参考になった本をまとめておこうと思います。 私と同じように新しくWebデザイナーとして働き始める人の参考になれば、…

【css, js】横並びにした要素の高さをそろえる方法。

HTMLで要素を横並びにした場合(float,inline-block)、高さをそろえる方法。 css3のFlexible Boxを利用する場合 古いブラウザを考慮しなくて良いのならこれで。〜参考にさせていただきました!〜 CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LI…

【CSS】擬似要素を使って装飾を行う場合、ie8は::擬似要素というcssセレクタを理解しないことを利用する

css

Webデザインにおいて、CSSでちょっとした装飾を行う場合 擬似要素の:afterや:beforeを使うことがありますよね。 例えばこんなの↓ 〜参考にさせていただきました!〜 [CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートの…

HTMLメールコーディング(デザイン)でちょっと困ったこといくつか。

css

HTMLメール作成で困るのが、 メールクライアント(サービス)毎に対応しているCSSが違うこと… スタイルはインラインで指定するとかtableレイアウトじゃなきゃダメとかいろいろあるんですが、 先日HTMLメールを作成した時に「これもダメなの?」という細かい問…

Adobe Creative Cloud 再インストールできなくて困ってた。

とある理由でAdobe Creative Cloud(アプリケーション郡を管理してくれてる奴)を再インストールした時にうまくいかず(・へ・)要はゴミファイルが残ってしまっていたためにできなかったようなので それらを削除したらうまくいきました。 ※やるときは自己責任で…

【sass】インターポレーションがmixin名に使えたらいいのに…

compass(-rails)のスプライト機能を使っていた時のこと… photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ - 記すに足らず。 (Retina用の)画像を、以下のように3つのディレクトリに分けてapp/assets/images/spr…

photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ

RailsアプリのUIデザイン〜コーディングするにあたり、 今回はじめてphotoshopとsass,compassを使用しました。 Web(UI)デザインの作成を、Fireworksからphotoshopにのりかえた。 - 記すに足らず。 はじめてSass(Compass)を使ってみた&CSS設計について初めて…

Powの設定に関するちょっとしたメモ。

Rack用サーバー(Rails等で使用可)のPowを使うときに設定が必要だったことのメモ。 RVMを使っていてpowを起動する場合 〜RVMのサイトに載ってました〜 RVM: Ruby Version Manager - Pow - RVM integration リンク先に書いてありますが、 RailsならRailsプロジ…

RailsでSassの読込させる時気をつけること。

RailsでSassを書いていた時(sass-rails使用)、なんかsass内で定義しているはずの変数が見つからないとか言われたりして うまく読み込まれず困っていました。 その時のapplication.css.scss /* *= require_tree . *= require_self */ @import "scss_file1"; @…