WEBデザイン– tag –
-
【Google Font】Noto Color Emoji【絵文字】
【Noto Color Emoji (Google Font)】 Google Font で使えます。 https://fonts.google.com/noto/specimen/Noto+Color+Emoji 以下のようなメリットがあります。 ・デバイスごとの表示を無くすためにNOTO EMOJI 使う ・Google font のため、フォントの商用... -
【Photoshop 25.0】生成塗りつぶし機能がすごい
最近Adobeのバージョンアップで、Adobe FireflyというAI技術で、塗りつぶし機能のクオリティが上がったと聞き、早速アップデートして使ってみました。 生成塗りつぶし機能とは、元の画像にコンテンツや背景の追加を違和感なく行なってくれる機能です。 よ... -
【CSSのみ】背景にほわっと円グラデーション【アニメーション】
背景にグラデーションをつけたいけど、いつものじゃもの足りない・・・! そんな時に使用できる背景グラデーションのcssです。 【コードのサンプル】 すぐに使用したい場合はこちらからコード確認ができます。 ※プレビューがこちらのサイトで見るとかなり... -
あしらいやレイアウトCSSの便利ツール
【Flex layout Generator】 https://suiq.jp/flex-layout-generator/ 親要素の指定から子要素の余白指定まで、ジェネレーター上で細かく指定することができます。 レスポンシブ表示切り替えもあるのでflex-box使用時一気にレイアウトを組みことが可能にな... -
【photoshop】ドロップレットで画像をwebpに変換する【効率化】
photoshopでwebp変換をひとつひとつするのは非効率的なのでアクション登録して、 さらに【ドロップレット】でアプリケーション化してしまい、効率UPしてみます! アクションについて詳しくは以前の記事を参照ください 【Photoshop】自分でアクションを登録... -
【配色】おすすめの配色ジェネレーター2選
配色ツールはデザイン制作時に欠かせないツールですが、今回は最近便利だなと思った配色ツールを紹介します。 【】 COLORS こちらはグラフの配色を自動で生成してくれるツールです。 ※グラフそのものを生成してくれるのではなく、あくまでも配色ツールです... -
【買ってよかった!】現場で役に立つデザイン本4選
お久しぶりの投稿になります。 ここ1~2年の間で読んだデザインの本で、現場でも役に立ちそうなおすすめの本を4冊、ご紹介します! デザインの言語化 〈クライアントの要望にこたえる4つのステップ〉 https://www.amazon.co.jp/%E3%83%87%E3%82%B6%E3%82%... -
【CSSで作れる】テキストが画面を横切って流れるアニメーション
サイトに画面を横切って流れていくアニメーションがあると、ダイナミックさを感じられて良いですよね! 最近は大きい英字テキストが流れているデザインをよく見ますね 今回作成してみたので共有します! 切り替わりがわかりやすいように色を分けているます... -
【CSS】すぐ使えるマテリアルデザイン作成ツール
今回は制作時デザインの引き出しとして、cssで簡単に作成できるマテリアルデザインツールをまとめてみました。 【グラスモーフィズム】 グラスモーフィズムとはすりガラスを通して覗いたような背景のぼかしが特長のデザインです。 iPhoneやmacなどで主に使... -
【コピペOK!】モバイルファーストのwebコーディングアイディア
最近、下記のようなモバイル表示に特化したwebサイトをよく見かけます。 【参考】らんま1/2 | フェリシモ https://www.felissimo.co.jp/ranma/ 基本モバイルのデザインのみで、PCで表示してもモバイルのレイアウトがはめ込まれ、 余ったスペースはシンプル... -
最近気になるスライダードットデザイン3件&実装参考サイト
スライダーのドットはスライドが何枚あるかが分かり、見せたい側も見たい側も便利な要素です。 最近はただのドットではなく、サムネイルで内容が見られたり、あとどのくらいで切り替わるか分かったり、デザインも機能も多彩になったように思います。 今回... -
グラデーションを簡単作成!NOISE & GRADIENT
WEBサイトで多く見るグラデーションのあしらいを、簡単作成できるサイトを紹介します。サクッと作成でき、サイト内で簡単に画像保存もできます。 【NOISE & GRADIENT の使用方法】 まずはこちらのURLから飛んで画面を見てみましょう NOISE & GRADI... -
【Font Awesome 6】よくつかうアイコンまとめ【使い方】
2022年にFont Awesomeは5から6へアップデートされました。(5.xのものがつかえなくなったということはありません) 主に有料版で使えるアイコンが増えたようです 【有料】7,864→19,287(すごくふえてる!!) 【無料】1,608→2,016 無料版で使えるアイコン... -
【Figma】最強のデザイントレースプラグイン!HTML To Figma
【HTML To Figmaとは】 「HTML To Figma」とはFigmaのプラグインで、webサイトのURLをコピペするだけでデザインがトレースされるという優れものです! 公式サイト https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-Rea... -
押してもらいたい!Webサイトボタンデザインの基本
Webデザインでは欠かせないのがボタンデザインです。 今回はすぐに使えるボタンデザインの基本をまとめました。 [outline] 【1.Webのボタンデザイン】 Webサイトのボタンデザインとは、クリックして下層ページや別ページへ誘導するためのボタンです。 Web... -
After Effects✖️Lottieで、簡単にアニメーション実装!!
javascriptでアニメーションのコードを書くのはハードルが高い、、そんな方でもAfter EffectsとLottieを使えば、 簡単にwebページでアニメーションを実装できます! 【Lottieとは】 Lottieとは、Airbnbが開発したアニメーションライブラリです。 AfterEffe... -
Adobe FontsをWebサイトに使う
フォントによってサイトの印象は大きく変わります。 目指す雰囲気にあわせたフォントを使用するために、Adobe Fontsを使用するのも一つの手です Adobe Fontsとは Adobe社が提供しているフォントサービスです。20,000以上のフォントが収録されています。(... -
webデザイナーにおすすめ!Google Chrome拡張機能
以前にも同じテーマの記事がありますが、今回はさらにプラスして別のおすすめ拡張機能をご紹介します! 便利でおすすめ!Google Chrome機能拡張 http://mtrad-blog.com/wp/2020/12/07/post-1575/ 【ColorZilla】 こちらはカラーピッカーで、webサイトから... -
使えるwebレイアウト手法「スプリットスクリーン」
スプリットスクリーンレイアウトは画面を大きく分割するレイアウトで、使い方次第では非常に効果を発揮するデザイン手法です。 分割スクリーンレイアウトや、分割式レイアウトなどとも呼ばれたりします。 そんなスプリットスクリーンの特徴やメリット、参... -
Webデザインの基本 参考サイト3選
今回は、数あるWebサイトの中から、個人的に参考になったWebサイトを3つ紹介します。 【PHOTOSHOP VIP】 PHOTOSHOP VIP こちらのサイトはデザインの基礎から最新のトレンドまで紹介されています。 また、デザインテクニックなどの実践的な技術も学べます。...