デザインシステムに採用する色を決める5つのルール : could
始めの一歩としての色共有 ひとりのデザイナーに頼らず、チームで運用できる体制を作るためにも デザインシステム は有用なツールです。しかし、様々な UI コンポーネントと決まりごとが揃ったものを作るのは骨が折れる作業です。デザイナー（もしくはエンジニア）が独自で作って「さぁ使いましょう」と公開しても、使ってもらえるとは限りません。また、デザインシステムをどこで共有して、どのように使われるのかも考慮しなければならず、他社の真似事では済まないこともあります。 作る前から課題が山積みでなかなか手が出せないかもしれませんが、何か始めなければゴールに辿り着くことはありません。そんな現場でデザインシステムを作る場合、色から始めることをオススメしています。 色なんて単純なところは出来ていると思う方は多いと思います。デザイナーであればパレットにしてまとめているでしょうし、エンジニアであれば色は変数にして整理
macOSでディスプレイ1枚で作業する技術 - Qiita
今まで、自宅・職場では外部ディスプレイを使って作業をしてましたが最近はRoostを使い始めて、家でも外でもRoostと外部キーボード、マウスで仕事するようになりました。これで肩の痛みが激減したので下を向いて作業する時間が多いと首の筋肉に引っ張られて肩が凝るみたいですね。 ここできになるのはディスプレイ1枚だと画面切り替え大変じゃないのってところなのですが、以前 @reoring さんに教えてもらって自分にすごいフィットしたので共有しておきます。あまりmacのデスクトップについての記事がないような。 [追記2020/11/16] macOS 11.0 Big Sur(Intel) で動作確認できました。Total Spaces2をBig Surより前から使っている場合は最新版(v2.9.6~)を再インストールする必要があります。 TL;DR デスクトップを10画面作成する ショートカットキー
エンジニアもプレゼン入門！ LT（ライトニングトーク）のテーマ選びから、スライドの作り方まで｜ハイクラス転職・求人情報サイト AMBI（アンビ）
エンジニアもプレゼン入門！ LT（ライトニングトーク）のテーマ選びから、スライドの作り方まで LT（ライトニングトーク）は、 カンファレンスなどで実施される短時間のプレゼンテーション。エンジニアにも避けて通れないプレゼンの経験を積むには絶好の機会です。LTに挑戦したい若手エンジニアに、気をつけるべきポイントをお伝えします。 エンジニアとして仕事をするときにも避けて通れないのがプレゼンテーション。ディレクターや営業などの他職種のメンバーに対して技術側から説明すべき場面や、提案をしたい場面で必要になるでしょう。技術力を高めるだけでなく、新人のうちにプレゼンテーションにも慣れて苦手意識をなくしたいところ。 しかしながら、業務中に自分からプレゼンテーションの機会を作るのは難しいでしょう。そこで、LT（ライトニングトーク）をうまく活用することをおすすめします。 今回はLTに挑戦する際に気をつけると良
GitLab flowから学ぶワークフローの実践 | POSTD
Gitによるバージョン管理では、従来のSVNなどよりずっと簡単にブランチングやマージができます。さまざまなブランチ戦略やワークフローが可能であり、以前のシステムに比べるとほとんど全てが改善されたと言えるでしょう。しかしGitを利用する多くの組織はワークフローの問題に直面します。明確な定義がなく複雑で、Issue Tracking Systemと統合されていないからです。そこで、明確に定義された最良の実践的方法としてのGitLab flowを提案したいと思います。issue trackingには feature driven development と feature branches を組み合わせます。 他のバージョン管理システムからGitに移行する際によく耳にすることは、効果的なワークフローの開発が難しいということです。この記事ではGitワークフローとIssue Tracking Sys
スライド使いは知っておきたい、スライドデザインの4原則 #devrelcon - hi, hikaru
こんにちは。 先日、日本初開催カンファレンスDevRelCon Tokyo 2017で発表されていた"スライドのデザイン技術"についてのセッションについて、内容を振り返ってみたいと思います。 Melinda Seckington(@mseckington)さんのThe Art of Slide Design // Speaker Deck 発表より。 このスライド、本当によくまとまっているし見やすいので、さすがスライドのデザインについて発表しているだけあるなあって感じです。 それ以上にまとめることはないのですが、まあ、自分用に・・日本語で・・。 スライドデザインの4原則 プレゼンのゴールとはなんですか？ この文言からスライドが始まります。 自分はなんのためにプレゼンを行うのか？なんの目的を達成するためなのか？は、まずはじめに考えたいことですね。 ちなみに私(丸山)が思うプレゼンのゴールは、
ユーザーの本質的ニーズに辿り着くために必要な3つの視点とは？｜Goodpatch Blog グッドパッチブログ
サービスデザインに関わっている方は、ユーザーの本質的ニーズを知るためにどの様な方法を取っていますか？ 今回は「ユーザーの本質的ニーズに辿り着くために必要な3つの視点」をテーマにお話させて頂きます。 結論、3つの視点とはユーザーモデリングの3階層である属性層と行為層と価値層のことであり、この3つの視点を意識して分析することでユーザーの本質的ニーズに辿り着くことができます。 誰（属性層）がどんな体験（行為層）をすることでどういう価値（価値層）を得ているか、の視点で分析することで、ユーザーの利用文脈をより深く理解できるようになります。属性層、行為層、価値層の順番で分析していき、最後の価値層まで分析できれば、それはつまりユーザーの本質的ニーズに辿り着いているということになります。 では、詳しく説明していきます。 ユーザーモデリングとは？ ユーザーモデリングとは、ユーザーの課題や価値観を分析をするた
JavaScriptフレームワーク選定の議論 - Qiita
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
Vue.jsを教えるまでの道のり - sushitecture
querySelectorを教えるべきかgetElementByIdとかでやるべきか一瞬迷う（結局querySelectorにする）
UIデザイナーが知っておきたいUnityの３つの機能 | CyberAgent
こんにちは。サイバーエージェントのゲーム・エンターテイメント事業（SGE)でデザイナーをしている2015年新卒入社の櫻井です。今回はUIデザイナーが知っておきたいUnityの基本機能について紹介します。ダウンロードからUI配置まで基本的な手順を追いながらガールフレンド（仮）の画像素材を用いて簡単なゲームのホーム画面作りたいと思います。 Unityのダウンロード まずはUnityをダウンロードしてみましょう！ https://store.unity.com/ja 上記では常に最新版が提供されていますがゲームのプロジェクトによっては少し古いバージョンのものを使用している場合があります。「最新版も使いたいけど古いバージョンのものも必要！」という場合、下記のような手順を踏むと異なるバージョンのUnityを保持することができます。 ※この手順を踏まずにダウンロードすると上書きされてしまいます ダウン
spacemacsについて ~~spacemacsが最強で最高で神エディタであると思い始めた件~~ - Qiita
最近、spacemacsを使っていて、「これは神じゃね?」とか思っている。それについて書こうと思う。非常に感情的になっているので、注意してほしい。かなり長くなるかもしれないので、それも注意してほしい。ぶっちゃけポエムである。 spacemacsについては記事がいくつかある。 Vimも秘伝のタレも飲み込むEmacsの超強力ディストリビューションSpacemacsまとめ 6年間使っていたVimからEmacs(Spacemacs)に乗りかえた しかし、上記の記事では、spacemacsのすばらしさを十分に記述できていないと思ったのだ。 この記事は,spacemacsの機能について取り上げたものでは無く、畏れ多くもspacemacsの僕なりの始めたキッカケの類を書いたものである。spacemacsの入門については、また別に取り上げたいと思う。しかsi、この記事でもspacemacsの機能のいくつか
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
gulpfile.jsの書き方確認。改 - Qiita
先日sassをコンパイルした際に、gulp-combine-media-queries、メディアクエリをcssの下の方に整えるプラグインを入れていたんですが・・・・ cssを見てみたら整えられてない！なんで！？ 先輩に教えていただき、問題解決とアドバイスをいただいたので、共有させていただきます・・・・。 20190401追記： 保存するたびにsassは以下全てコンパイルしてましたが、更新かけたやつだけコンパイルする都合があったのでgulp-changedを入れました。 var gulp = require('gulp'); var sass = require('gulp-sass'); var plumber = require('gulp-plumber'); var changed = require('gulp-changed');//20190401追加 var sourcema
gulp watchコマンドでファイル追加を検知しない場合の対処方 - Qiita
var watch = require("gulp-watch"); gulp.task("watch", function () { gulp.watch(["./css/**", "./js/**"], "task_name"); }); これをgulp watchで監視させていました。 しかし、gulp-watchプラグインを使っているもりで、使っていなかったのが原因でした。 gulp.watch機能はgulpの機能 正しくは var watch = require("gulp-watch"); gulp.task("watch", function () { watch(["./css/**", "./js/**"], function(event){ gulp.start("task_name"); }); });
Gulpのインストールは1つでOK。複数のプロジェクトごとに設定ファイルを分割、さらに監視を行い、更新があったファイルのみタスクを実行させる方法｜今村だけがよくわかるブログ
Gulpのインストールは1つでOK。複数のプロジェクトごとに設定ファイルを分割、さらに監視を行い、更新があったファイルのみタスクを実行させる方法 「1つの開発環境で複数のプロジェクトを管理」することって私はよくあります。 これまでは「プロジェクトが増えるたびにGulpをインストールする」運用をしていました。 ですが、この運用を続けていくと、プロジェクトが増えるごとにGulpのインストールが必要だし、npmパッケージやgulpプラグインも更新しないといけないし、タスクもプロジェクトごとに作る必要があるし、何よりディスク容量が増えてしまいますね。 図で表すと、以下のような状態です。 プロジェクトが増えるたびにGulpをインストールの図 これはあまり効率的とは言えない・・・ というわけで、この状態を解消するため「Gulpのインストールは1つにして、複数のプロジェクトを分割して管理する」方法を書き
Gulp で複数のプロジェクトを管理する
あんまり無いと思うんですが、ひとつのリポジトリ内でそれぞれ独立した案件のディレクトリを切っているケースに遭遇しました。 そしてその中にそれぞれ Gulp が入ってる、みたいな。 こんな感じです。 template gulp source project1 gulp source project2 gulp source project3 gulp source で、みんな同じ Gulp task を保有しており、案件が発生する度に template のファイルを copy してそこから拡張していきます。 node_modules とかも全部それぞれのディレクトリ内で管理されてしまっているので、リポジトリが無駄に肥大化＆ init がめんどくさい。 ので、Gulp を外に出して npm scripts を実行する際に option を指定することでそれぞれのディレクトリを包括的に管理できるよ
ディレクトリの移動は cd コマンドよりも pushd コマンドのほうが便利！ - Qiita
コマンドラインで作業するときにおそらく一番目か二番目によく使うのが cd コマンド。たった 2 文字しかないので打つのも簡単です。しかし、深い高層のディレクトリ間を頻繁に移動するときに毎回ディレクトリを指定するのが面倒なことがあります。 下のディレクトリツリーを例に取ります。 カレントディレクトリが workspace1/html だったとします。ここから workspace2/html に移動したい場合は cd ../../workspace2/html と入力します。そして今度は workspace1/js に移動したくなったら cd ../../workspace1/js と入力します。workspace2/js に移動したくなったら cd ../../workspace2/js と入力……ちょっと面倒ですよね。 このツリー構造はそこまで深くないので workspace1 内のディレ
これなら絶対わかる！JavaScriptの変数と型の基礎をいまこそ理解する
なんとなくjQueryを使っているけど、実はJavaScriptの基礎がよくわかっていない……。そんなJavaScript初心者のために、変数とデータ型をていねいに解説します。 Webプログラミング言語「JavaScript」を学ぼうと決めたものの、どこから始めていいか分からないなら、この記事がちょっとしたヒントになるかもしれません。プログラミングを習得するのに特別なスキルは必要なく、誰だってゼロからスタートしています。一歩ずつ進めていけば大丈夫です。 この記事がおすすめの人は？ 以下のどれかに当てはまる人なら、この記事を読むメリットがあります。 プログラミング言語を使った経験がない JavaScriptを使った経験がない 以前JavaScriptの習得に挑戦したが、資料が不十分、または難しくてついていけなかった JavaScriptについての知識は少しあるが、基礎レベルからさらにステップ
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
作業ペースが上がる！ブックマークしておきたい無料UIデザイン素材40個まとめ
ウェブサイトやアプリのデザイン制作は、時間のかかる作業のひとつです。今回は、作業ペースを格段にアップする、ブックマークしておきたいUIデザイン素材をまとめてご紹介します。 素材はどれも無料ダウンロード可能となっており、文字テキストや配色、サイズの変更、カスタマイズも自由に行うことができ、あらゆるUIコンポーネント素材が揃っています。また、Retinaディスプレイ対応やミニマルスタイルなど、人気のデザイントレンドをうまく取り込んでいます。PhotoshopやIllustrator、Sketchなど幅広いデザインアプリに利用できる点もポイントです。 、 完全無料で美しい！参考にしたいUIキット50個まとめ 2017年保存版 ウェブサイト作成に困ったら使いたい！Photoshop無料テンプレート素材まとめ 2017年版 作業ペースを格段にアップする、ブックマークしておきたいUIデザイン素材まとめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Fundamentals — Google Developers
