明日からできる、爆速Figma活用術 - エムスリーテックブログ
こんにちは、エムスリーデザイングループでチームリーダーをやりながらエンジニアリングGも兼務しているプロダクトデザイナーの大月です。 私が所属しているエムスリーのデザイン組織は以下２つの強みがあります。 多様性 スピード 特に日々の業務では"スピード"をとても大切にしており、 デザインを早くすることで、検証回数を増やし、PDCAを多く回し、価値創造を加速することを意識しています。 こうしたエムスリーのスピード文化から、日々の業務を効率化できるFigma活用法もデザイナーのみんなで学びあっています。 今回は、エムスリーのデザイナー間で話題になった、意外と知らなかった、知っているだけで日々の業務が一気に楽になった！というFigma活用術を紹介します。 少しでもFigmaでのデザイン作業をスピードアップさせたい方の参考になれば幸いです！ 爆速のための3種の神器 1. 秩序をつくる ファイル構成とコ
なぜSassが必要なの？
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
実は、bootstrapの知識だけでは足りません（涙） 本気でweb制作を仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか？ 便利ですよね。その便利さを物語るように、本当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
Wordpressの新時代を告げるCalypsoプロジェクト
全ウェブサイトの25%がWordpressで駆動されているという驚きのニュースがつい先日あったところですが、書き手にとってはさらに大きなニュースが飛び出してきました。 ウェブサイト管理者ならば馴染みがあるとおもいますが、これまでWordpressの管理者画面はサイトごとに個別に用意されていて、プラグインを書く人はPHP言語を利用して開発をおこなっていました。ブログの執筆も、管理も、すべてこの画面がおこないます。 この方法はもちろん便利なのですが、次の10年の開発を見据えると次第に重荷になってしまうことも予想されてました。そこで今日、新しい Wordpress.com のアプリとともに複数の管理者画面を一元管理し、Javascript ですべてを書き直すという野心的な計画が公開されました。 その名もプロジェクトCalypso。オデュッセイアー伝説に登場するカリュプソーは帰国を願うオデュッセウ
CSSスプライトとstepsを使ってアニメーション画像を作ろう
2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move
Bootstrapよりキレイ！Googleのマテリアルデザインキット - ku-sukeのブログ
Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン（Android）もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね！ Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
デザイナーはなぜMS Pゴシックを使わないのか? - エディトリアルデザイナーに聞いてみた
デザインを語る上で重要な要素のひとつ、「フォント」。デザインを実際に手がける人だけでなく、それを見る多くの人にとってなじみ深いフォントとして、Windowsのプリインストールフォント「MS Pゴシック」は代表的なもののひとつかもしれません。 「MS Pゴシック」 「MS Pゴシック」は過去にマイナビニュースで実施した美大生の「お気に入りフォント」アンケートにも名前が挙がった実力派(?)ですが、実際に日々グラフィック/エディトリアルデザインを手がけているデザイナーの目には、この定番フォントはどう映るのでしょうか。 今回は、デザイン会社にてエディトリアルデザイン/Webのレイアウトデザインを手がけているSさんに、「MS Pゴシック」についての率直な思いを伺いました。 ――「MS Pゴシック」、デザイン業務で使うことはありますか? 私は主にエディトリアル(雑誌や書籍など)、グラフィック、Web領
世界一シビアな「社長力」養成講座 | 書籍 | ダイレクト出版
購入日から１ヶ月間は、お客様にて送料負担の上、商品を返送いただくことで返金が可能です。返金をご希望される場合はカスタマーサポートにご連絡下さい（https://dpub.jp/contact_forms、FAX：06-6268-0851） 通常、出版業界には保証なんてものはありません。本の内容が気に入らなかったらお金を返してもらう、なんて事はどこの本屋でも出版社でもやっていない事です。業界の人が聞いたらバカだと思うでしょう... でも、私たちはそうは思いません。 理由は簡単です。本の内容に本当に自信があるからです。役立つ良い本だったら、返金しようなんて思いませんよね？ でも、そこがポイントなんです！つまり、本当に役立ついい本じゃない限り、私たちのビジネスは成り立たないのです。実際この本を手にとってみて、読めば納得してもらえると思います。 もし読んでみてしっくり来ない...あるいは、使ってみ
エンジニアのための配色まとめ - Qiita
無彩色 白と黒との混合で得られる色（白と黒自体も含む）の総称。 白・黒・さまざまな濃度の灰色が含まれる。 彩度が0であることを表す。 無彩色でない色は、有彩色である。 via 写真技術 色と陰影（手代木さんblogより） - 写真技術と光への道でフォトディレクション-Jimdo撮影編 有彩色 白、黒、灰色以外の色味を持った色のこと。 有彩色にはさらに、純色、清色、中間色に分類される。 以下のような図を、 等色相面 と言う。 via 純色、清色、中間色｜株式会社ノイエデザイン 純色 各色相において、最も彩度が高い色。 ただし、色空間によっては純色以外にも彩度が最大になる色がある。 清色 清色はさらに、明清色、暗清色に分類される。 清色にはくすんだ印象がなく、濁りがない色という特徴がある。 明清色 純色に白だけを加えた色。 ピンクや水色など 暗清色 純色に黒だけを加えた色。 紺色や茶色など 中
まちづくりデザインなら包むデザイン｜地域の魅力を広げるデザイン事務所
地域には『何もない』に思えて実はたくさんの良きところがあります。良き点は日常に埋もれてしまい、その地域の人以外の人が知って初めて「へーすごいんだ！」なんて気づく事があります。 厳かなお祭りや絶景の大自然といってイベントだけではなく、よく通っているお店や毎年続いている地域のイベントなども良きところになりえます。 そんな地域の良きところをデザインやホームページ制作を通してスポットを当てる力なることを信念としています。
マークアップ・エンジニアのためのSVG入門 | 第1回 SVGコードの基本
マークアップ・エンジニアのためのSVG入門 第1回 SVGコードの基本 この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。 はじめに SVGは、Android2.0系やIE8では対応していませんので、今の段階で気軽には使いづらい技術です。しかし、iOS Safari向けのWebページなど、限られた環境に向けては効果を発揮します。今回はマークアップエンジニアが知っておくべきSVGの仕様や使い方を見直してみましょう。 画像でありテキストである 「SVG＝スケーラブルなベクター形式」は、SVGの大きな特徴です。このことは多くの人が認識しているでしょう。 ラスタ形式は特に拡大に弱く、拡大するとドットが目立つ。一方、ベクター形式は拡大しても画像の劣化はない。 SVGにはソースコードが存在し、これにより画
Bootstrap使い方メモ１（基本＋CSS） - Qiita
公式サイトを一通り動かしてみたときのメモ。 まずは CSS。 Hello World Bootstrap を入手する ここ から zip ファイルをダウンロードする。 HTML を書く <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css" /> </head> <body> <h1>Hello Bootstrap!!</h1> </body> </html> HTML5 の DOCTYPE を記述する。 css ファイルを読み込むだけで使い始められる。 モバイル用に viewport を設定する meta タグを記述する。 user-scalable=n
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cow2design.com
