第3弾です。デザインを学びたい人向けに「デザイン思想」を学べる本を選んでみました。「デザイン」という専門分野を深く知るための教養・知識といったところです。 「デザイン思考」でデザインを知った方や「UI/UXデザイン」の実務からデザインの領域に入った方々も多いのではないかと思います。「デザインをもっと深く知る」ための思想やデザインの考え方にもぜひ触れてみてください。もちろん、これらの本に書かれていることがデザインの「正解」（正しい答え）ということではありません。 HELLO WORLD 「デザイン」が私たちに必要な理由 デザインとは何か？ー様々な角度から豊富な事例をあげて「デザイン」が語り尽くされています。デザインの周囲にいる人たちにとっては「デザイン」を知り考えるための教科書として、またデザイナーにとっては足もとを見直し未来へ向かうためのガイドとしての役割を果たす一冊です。 生きのびるため

Adobe XDは、「軽い、早い、簡単」がウリ。学習コストが低く誰もが使いこなせるXDだからこそ日本でよく見かけるXD機能の勘違い2017年版をお届けします。 この記事はAdobe XD Advent Calendar 2017 25日目の記事です。 遅刻も気にせず2017年中に埋めるの目標！ 主催者が大遅刻してますが…年内だからギリギリセーフってことに… 勘違い機能トップ3各順位のタイトルは機能の正しい形を書いています。 1位：画像のマスク位置はずらせる去年も1位でしたが、XDはじめましたというブログを見ると4割くらいの確率で位置が動かせませんと書いてあったりします。 基本操作の話ですが、XDで画像をマスクする種類は2つ、方法は3種類あります。 XDのマスク左から順に、 画像をファイルに配置してシェイプでマスク画像ファイルをドロップしてマスク(看板機能！)配置済み画像とシェイプを選択して

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づいて紹介しています。 52の関節技！！ Elements 1.hover時のコンポーネントのCSSルールを表示 使い方 ①DOM要素を選択 ②Stylesペインを開く ③:hovをクリック ④hoverフィルタを適用 2.対応するCSSファイルを開く 使い方

この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2017 の投稿記事です。 こんにちは！現在キッズリーのデザインを担当しているデザイナーの町田（@macheri_me）です。 今年で中途入社３年目となりました。本日は弊社の制作事例をもとに、AdobeXD・Sketchの活用法についてご紹介します。 【この記事を読んでもらいたい人】 これからAdobe XD、Sketchどちらを導入しようか悩んでいる人 デザイン制作フローの中で課題を抱えており、解決したい人 Adobe XDとSketch。自分のチームにはどちらが最適か サービスのデザインを制作する際、何のツールを使っていますか？少し前だと Adobe Illustrator、Photoshop、Fireworksといったグラフィックツールが多かったかと思います。しかしながら、これらはUIデ

先日 kazuho さんが git blame でプルリクを表示するスクリプトをつくってらっしゃって，便利そうだったので Vim プラグインをつくってみました． ファイルの各行がどのプルリクで変更されたかを確認し，気になるプルリクはその場で詳細を確認することもできます． github.com 使い方 インストールはお好みの Vim プラグインマネージャを使うなどしてください． 1. ファイルを開いて :GHPRBlame を実行 :GHPRBlame を実行すると裏で git-blame が走り，カレントバッファのファイルの各行のプルリク情報を git blame --line-porcelain で引っ張ってきます． 引っ張ってきた情報を元にカレントバッファの左に細長い一時バッファが開き，そこに各行に紐付いたプルリク番号が表示されます（プルリクに紐付いていない行は何も表示されません）．

vim以外のエディタでコード書くと私の手は産まれたての子鹿みたいになります。 効率よくコーディングをしてもらうために、新人やvimを学びたい人にvimの研修を実施しています。今回は研修で非常に有効だった内容についてまとめておきます。 ※ なんだか誤解を生んでしまっているようなので追記しておきます。vimの研修は新人研修の一環として行ったわけではなく、vimを使って開発をしたがっていた新人へテスト駆動開発の研修を実施した際に並行して盛り込んだだけです。会社がvim強制とかではないのでご安心ください。言葉足らずで申し訳ありません。 2つの繰り返しキーの存在を認識させる vimは一度実行したコマンドの組み合わせを記憶する.(ドット)とfを使った移動の際のキーストロークを記憶しておく;(セミコロン)があります。これらを駆使することで他のエディタよりも高速な編集作業を行えます。 セミコロンはus配列

今回言いたいこと・UIデザインとそれを書き起こすプログラミングの乖離は、いくらわかってるつもりでも想定より大きくなる ・工数や実装都合上、泣く泣く見た目を変えざるをえない場合のデザイナーのストレスは、スピード優先で設計がおろそかになったときのエンジニアにかかるストレスより大きいのではないか ・雑にプロトタイプを出していい時代は終わってるのでは？と思うので、デザインを勉強していくべき 「デザインを勉強したい」 学生の頃から、dribbbleやbehance、デザイナーブログをみるのが大好きで、「うわーこんなかっこいいロゴ思いつかないよ、すげー」とか、「フォントの微差によく気を使ってるんだなー」とか、「このサイトの余白は過剰だけど、こっちはいい塩梅だなー」とか、そういうのがかなり気になってしまうタイプでした。 というと聞こえがいいのですが、結果的にエンジニアの道を選んで、UIは実装しながら考え

ネガティブスペースを上手く使ったロゴデザインをまとめたデザイン備忘録です。 文字や要素を組み合わせて空間を上手く使うことで新たな文字やアイテムが見えてくるデザインで、参考にするのはもちろん、眺めているだけでも面白いです。

The repository of publicly available design systems and pattern librariesStart Exploring SystemsWhy Adele?

Laying out events on a calendar can be somewhat tricky. Many years ago, I had a client project where I needed to do a calendar similar to Google Calendar. I ended up using bitwise operators to figure out if there was room to put an event on a particular line. If there’s no room, it placed the event on the next available line. There’s a lot of looping involved just to place an event on the calendar