価格のデザイン表現について デザイン制作にあたって、よく「1000円」「100万円」などの情報が入ったりします。価格だけではなく、「10倍」「95%」「5回」など、数字＋単位という表現はよくあります。このような情報のデザイン表現について、綺麗なデザインの作れる王道パターンをまとめました。 価格のデザイン表現を綺麗に作れるたった3ステップ とりあえず「1000円」の表現を例として作ってみます。 プレーンな状態はこんな感じです。ちょっと物足りないなーというより、全然デザインされていない状態ですね。このまま出したら先輩に怒られるやつです。 早速以下の手順でブラッシュアップしていきましょう。 ステップ1：数字と単位のフォントを分けること まずは数字と単位、それぞれ違うテキストオブジェにして、フォントを別々で設定しましょう。 数字は基本欧文フォントで、単位はほとんどの場合漢字なので和文フォントにしま

Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease. Read Our Articles Solving the ‘metadata-generation-failed’ Error in Python Solving the ImportError in Django: ‘cannot import name ‘force text’ from ‘django.utils.encoding’

ロゴとかアイコンとかシンボルとか、Webサイトの中のいろいろなところで使われていて、それでいて色違いも必要だったりする小っこい画像たち。みるみる増えてしまってもう仕方ないですね…X(。そんな小っこい画像をひとまとめに管理できる、SVGスプライトについてまとめます。 アイコン一式SVG バラバラのアイコンたちをひとまとめにして、取っ散らかった画像フォルダをスッキリ片付けちまいたいXO！ ということで、例えば、ボタンの矢印とかアイコンとか、ロゴとかシンボルとか、Webサイトの至るところに蔓延（はびこ）る小っこいアイコンを、ひとつのSVGファイルに詰め込んで使いたいやつだけ表示させるやつのつくり方をまとめます。 仕組み 「SVGでやることのまとめ。」という記事で紹介したuse要素を使います。 ひとつのSVGファイルに、アイコンぜんぶを詰め込んで、それぞれにid属性を割り振れば、use要素でお目当

Pre-loved vol.2 【Event Info】 ⁡この度、下北線路街 空き地にて @railside_coffeevintage 主催のSDGs×古着イベント”Pre-loved vol.2”開催決定🌍 ⁡ 【DAY&PLACE】 2024年5月25日(sat) 11:00-18:00 📍下北線路街 空き地 古着やエシカル雑貨の⁡販売ブース他、スペシャルゲ…

A color accessibility tool for designers and developers.Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility. Plug in your palette or color system and let Hex Naw do the rest. Happy testing!

歓楽街を歩いているとBARやライブハウスなどのネオン看板が夜の街を彩っています。ここでは10分程度の工程でPhotoshopでネオン管が光っているような文字の作り方を解説します。 動画解説はこちら Photoshopでネオン管が光っているような文字の作り方背景を複製し、新規レイヤーに任意のテキストを入力（OPEN）。 複製した背景にレイヤーマスクを追加し、描画モードを通常から乗算に変更。 レイヤーマスク部分に不透明度や流量を調整した黒色のブラシでテキストの周辺をなぞるように塗ります。 テキストレイヤーにレイヤー⇒レイヤースタイル⇒境界線を選択しサイズを調整。（色はテキストと同色） テキストの塗りを0にして境界線だけを表示させます。 テキストを複製して非表示にし、複製元のテキストを右クリックでレイヤースタイルをラスタライズ。 テキストを複製して非表示にし、複製元のテキストを右クリックでレイヤ

新しい年がはじまり、ウェブデザインのトレンドについて昨年を振り返り、今後改善し変更したいことを検討するのに、最適な時期と言えるでしょう。 2018年の後半にかけて人気だった多くのデザインは、2019年の人気トレンドとして、継続して利用されるでしょう。トレンドには配色にはじまり、タイポグラフィーや書体の使い方、音声やVRインターフェース、UXデザインなど多岐にわたります。 現在、ウェブデザインでは非常に多くのスタイルが登場しているため、それを細かく分類するのは大変ですが、この記事では、2019年のウェブデザインとUIデザインの人気トレンド厳選17個をまとめてご紹介します。 コンテンツ目次 1. 鮮やかな配色カラーパレット 2. エモーショナル・デザイン 3. 奥行き感とリアルなデザイン素材 4. 目的のあるアニメーション 5. シュールで抽象的なデザイン 6. ボイスコマンド 7. 単一ペー

iPhoneやAndroidなどの端末画像にPhotoshopでデザインしたスマホの画面やキャプチャ画面をはめ込んでデザインに活かせるモックアップですが、ネット上で検索すれば無料でPSDデータとして探すことができます。 ただ、Photoshopを持っていない人にはそれは使えないものだったり、Photoshopの知識がないと使えなかったりします。そこでもっと手軽に使えるshotsnapの紹介です。 関連記事 便利すぎ！Android、Surface等のあらゆるモックアップがあるFacebook Design Devices iPhoneだけじゃない！様々な素材がモックアップとして使えるMockupWorld shotsnapとは？ shotsnapは、Gaddafi Rusli氏によるオンラインで無料で利用できるモックアップ作成サービスです。 iPhone（SE、8、X）やGalaxy S8

デザイン性の高い、オシャレなウェブサイトを毎日更新しています。優れたUIでストレスなくサイトが探せます。 一時的にコレクションページも作成できます！

最終更新日: 2022年10月3日 Photoshopで画像から人や物などのオブジェクトを除去する方法は、デザイン制作において重要なテクニックです。しかし、用途に応じてツールを使い分け、除去レタッチ作業を行っているというひとは、どれだけいるでしょう。 今回は、Photoshopの各種ツールを駆使した除去、消去テクニックと、いつその技を使うのがベストなのか、各サンプルと一緒にまとめてご紹介します。これらの方法を実践することで、写真に写り込んでしまった不要なモノを、2〜3分の短時間で、スピーディーに除去することができるので、フォトショップ初心者のひとにもオススメです。

Webディレクターの仕事において、非常に大きな比重が置かれるワイヤーフレーム制作。皆さんはどのソフトウェアを使っていますか？ 多くの企業のPCに導入されているPowerPointをワイヤーフレーム制作に利用している方もいるかもしれません。Adobe XDといったワイヤーフレーム作りに特化したツールを使うとより作業が楽になり便利になります。 今回は、Adobe XDでワイヤーフレーム制作するなら知っておくべき機能について特徴を踏まえつつ解説していきます。 Adobe XDとは Adobe XDは、アドビ システムズ 株式会社が提供しているアプリケーションの1つです。Webサイトやモバイルアプリのワイヤーフレーム制作、デザインに適したアプリケーションです。 PowerPointやIllustratorなどと同じ様に図形や文字、画像などを使ってページの構成、サイトデザインを作成できます。 Ado

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);

2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって

動きがシャープなStylish Social Buttons マウスオーバー時の背景の動きがシャープです。 送信完了が分かりやすいSend button with a transition クリックして送信完了するまでの過程が分かりやすいです。 視覚をさらにプッシュするMaterial Button Hover マウスオーバーでさらに視覚に対してプッシュしてくれます。 広がるメニューAnimated Material Design Button マウスオーバーでメニューが広がります。 tの文字にも注目Twitter Button Concept 遊び心があるボタンです。 隠しボタンHidden door twitter button ツイッターフォローボタンで動きを付けたい時にオススメです。 立体的なボタンSquishy Toggle Buttons CSSだけでの表現でこんなボタンも。