ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法
ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。最近注目されているUIデザインのトレンド「ニューモーフィズム」を簡単な手順でデザイン・実装する方法を紹介します。使用するソフトウェアは、FigmaでもIllustratorでもAdobe XDでもSkecthなど、なんでもOKです。 ニューモーフィズムのデザイン方法、使用するカラーの選び方、UIデザインに適用するCSSの実装コードなど、すぐに実践できます。 Neumorphism (Soft UI) in User interface design - Tutorial by Kanhaiya Sharma 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 新しいトレンド「ニューモーフィズム」 ニューモーフィズム
Webフロントエンドエンジニアにやさしいデザインファイルの作り方 - Qiita
Sketch - The digital design toolkit 画像はSketch最高っていう顔です。 HTMLやCSSを書くWebフロントエンドエンジニアにとって、Webデザイナーが用意した理想像を現実に落とし込むことは1つの使命であり、費用対効果への葛藤に揺れる中で「技術的に難しいから」という理由でデザインを却下したくないのは誰しも同じだと思います。一方で、技術的に難しくなくとも、デザインファイルの作り方次第ではエンジニアの実装効率も多少なりとも変わってきます。そこで、僕のデザイナー及びエンジニアとしての経験則から、HTML/CSSで実装しやすい（≒Webフロントエンドエンジニアにやさしい）デザインファイルの作り方を、Sketchでの用例も挙げつつまとめてみます。近年はFigmaが注目されつつありますが、基本的な話は共通すると思います。 本来ならばデザイナーにこそ読んでいただき
【増枠】年の瀬に振り返る Figma & React コンポーネントでのサービス開発 (2019/12/10 19:20〜)
イベント概要 スペースマーケットでは最初のシェアリングサービス開始以来、機能追加や組織/事業の拡大にともなって、複数サービスの開発/運用を行ってきました。 弊社エンジニア・デザイナーはそうした拡大の中でサービス提供速度を落とさないよう、またさらなる発展のために、さまざまな考え方や新たな技術の導入を積極的に行っています。 現在スペースマーケットではデザインのワークステーションとして Figma を、Webフロントエンドに React.js でのコンポーネント実装を採用しています。これらの技術を用いながらデザイナーとフロントエンドエンジニアがどのようにサービス開発を行っているか、また私たちがどういった考え方のもとで効率化を推進しているかを、デザイナー・エンジニアそれぞれのセッションとパネルディスカッションを通してお伝えします！ 本イベントはデザイナー・エンジニアの方を対象にしています。以下で挙
Webデザイナー目線で見たiPad版Photoshopの驚きの完成度について
おそらく多くのWebデザイナーが待ち望んだであろうiPad版のPhotoshopがリリースされました。 私はiPad Pro 9.7インチモデルでさっそく使用してみたのですが、なかなか驚きの完成度だったのでどのようなアプリか紹介したいと思います。 著者は 神速Photoshop [Webデザイン編] をはじめとしたPhotoshopやIllustratorの解説書を書いている @Stocker_jp です。 まずは写真補正から 一眼レフカメラで取り込んだ写真を現像しようとRAWデータを開こうとしても、Photoshopアプリでは開くことができません。 先にLightroomアプリで現像しJPEG形式で書き出す必要があります。 続いてPhotoshopアプリで明るさやコントラストの強さを微調整しようとトーンカーブ補正を探したのですが［調整レイヤー］一覧の中にありませんでした。 さすがに何かの
書いて覚えるSVG: 基礎編
この記事のターゲットとなる方 この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。 記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。 ぜひ記事を読みながら一緒に書いてみてください。 SVGは他の画像形式と何が違うの？ この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか？ たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。 しかし、SVGはJPEGやPNGと明確に違うところがあります。 SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。
Typography for Developers | CSS-Tricks
Taimur Abdaal leads design at Retool, a fast way to build internal tools. They’re working on a new design system for their platform, to let anyone easily build beautiful custom apps. Typography will be a huge part of this and Taimur wrote this based on that experience. You may have read the title for this post and thought, “Why on earth does a developer need to know anything about typography?” I m
ワイヤーからReactでAtomicDesignを実装するまで
2018年11月22日、DeNAにて、Frontend de KANPAI!が開催されました。今回のテーマは「2018年わたしはこれにお世話になりました！」。ライブラリ・フレームワーク、設計思想など、フロントエンドに関する3つのテーマセッションとLTが行われました。プレゼンテーション「ワイヤーからReactでAtomicDesignを実装するまで」に登壇したのは、atsss氏。新規プロダクトの開発におけるReactの活用事例について語りました。 ワイヤーからReactでAtomicDesignを実装するまで atsss氏：よろしくお願いします。 （会場拍手） すいません、僕あまりお世話になっていないんですけど、これからお世話になるかもしれないなと思って、LTしに来ました。 伊藤敦之と申します。株式会社ローカルワークスでいま新卒2年目です。Railsエンジニアとして働いています。 「お世話に
box-shadowはもう古い？CSS新時代の「影の落とし方」
長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで本稿では、CSS新時代の影の落とし方につい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
