WEBデザイン– tag –

【Noto Color Emoji　(Google Font)】 Google Font で使えます。 https://fonts.google.com/noto/specimen/Noto+Color+Emoji 以下のようなメリットがあります。 ・デバイスごとの表示を無くすためにNOTO EMOJI 使う ・Google font のため、フォントの商用...

最近Adobeのバージョンアップで、Adobe FireflyというAI技術で、塗りつぶし機能のクオリティが上がったと聞き、早速アップデートして使ってみました。 生成塗りつぶし機能とは、元の画像にコンテンツや背景の追加を違和感なく行なってくれる機能です。 よ...

背景にグラデーションをつけたいけど、いつものじゃもの足りない・・・！ そんな時に使用できる背景グラデーションのcssです。 【コードのサンプル】 すぐに使用したい場合はこちらからコード確認ができます。 ※プレビューがこちらのサイトで見るとかなり...

【Flex layout Generator】 https://suiq.jp/flex-layout-generator/ 親要素の指定から子要素の余白指定まで、ジェネレーター上で細かく指定することができます。 レスポンシブ表示切り替えもあるのでflex-box使用時一気にレイアウトを組みことが可能にな...

photoshopでwebp変換をひとつひとつするのは非効率的なのでアクション登録して、 さらに【ドロップレット】でアプリケーション化してしまい、効率UPしてみます！ アクションについて詳しくは以前の記事を参照ください 【Photoshop】自分でアクションを登録...

配色ツールはデザイン制作時に欠かせないツールですが、今回は最近便利だなと思った配色ツールを紹介します。 【】 COLORS こちらはグラフの配色を自動で生成してくれるツールです。 ※グラフそのものを生成してくれるのではなく、あくまでも配色ツールです...

お久しぶりの投稿になります。 ここ1~2年の間で読んだデザインの本で、現場でも役に立ちそうなおすすめの本を4冊、ご紹介します！ デザインの言語化　〈クライアントの要望にこたえる４つのステップ〉 https://www.amazon.co.jp/%E3%83%87%E3%82%B6%E3%82%...

サイトに画面を横切って流れていくアニメーションがあると、ダイナミックさを感じられて良いですよね！ 最近は大きい英字テキストが流れているデザインをよく見ますね 今回作成してみたので共有します！ 切り替わりがわかりやすいように色を分けているます...

今回は制作時デザインの引き出しとして、cssで簡単に作成できるマテリアルデザインツールをまとめてみました。 【グラスモーフィズム】 グラスモーフィズムとはすりガラスを通して覗いたような背景のぼかしが特長のデザインです。 iPhoneやmacなどで主に使...

最近、下記のようなモバイル表示に特化したwebサイトをよく見かけます。 【参考】らんま1/2 | フェリシモ https://www.felissimo.co.jp/ranma/ 基本モバイルのデザインのみで、PCで表示してもモバイルのレイアウトがはめ込まれ、 余ったスペースはシンプル...

スライダーのドットはスライドが何枚あるかが分かり、見せたい側も見たい側も便利な要素です。 最近はただのドットではなく、サムネイルで内容が見られたり、あとどのくらいで切り替わるか分かったり、デザインも機能も多彩になったように思います。 今回...

WEBサイトで多く見るグラデーションのあしらいを、簡単作成できるサイトを紹介します。サクッと作成でき、サイト内で簡単に画像保存もできます。 【NOISE & GRADIENT の使用方法】 まずはこちらのURLから飛んで画面を見てみましょう NOISE & GRADI...

2022年にFont Awesomeは5から6へアップデートされました。（5.xのものがつかえなくなったということはありません） 主に有料版で使えるアイコンが増えたようです 【有料】7,864→19,287（すごくふえてる！！） 【無料】1,608→2,016 無料版で使えるアイコン...

【HTML To Figmaとは】 「HTML To Figma」とはFigmaのプラグインで、webサイトのURLをコピペするだけでデザインがトレースされるという優れものです！ 公式サイト https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-Rea...

Webデザインでは欠かせないのがボタンデザインです。 今回はすぐに使えるボタンデザインの基本をまとめました。 [outline] 【1.Webのボタンデザイン】 Webサイトのボタンデザインとは、クリックして下層ページや別ページへ誘導するためのボタンです。 Web...

javascriptでアニメーションのコードを書くのはハードルが高い、、そんな方でもAfter EffectsとLottieを使えば、 簡単にwebページでアニメーションを実装できます！ 【Lottieとは】 Lottieとは、Airbnbが開発したアニメーションライブラリです。 AfterEffe...

フォントによってサイトの印象は大きく変わります。 目指す雰囲気にあわせたフォントを使用するために、Adobe Fontsを使用するのも一つの手です Adobe Fontsとは Adobe社が提供しているフォントサービスです。20,000以上のフォントが収録されています。（...

以前にも同じテーマの記事がありますが、今回はさらにプラスして別のおすすめ拡張機能をご紹介します！ 便利でおすすめ！Google Chrome機能拡張 http://mtrad-blog.com/wp/2020/12/07/post-1575/ 【ColorZilla】 こちらはカラーピッカーで、webサイトから...

スプリットスクリーンレイアウトは画面を大きく分割するレイアウトで、使い方次第では非常に効果を発揮するデザイン手法です。 分割スクリーンレイアウトや、分割式レイアウトなどとも呼ばれたりします。 そんなスプリットスクリーンの特徴やメリット、参...

今回は、数あるWebサイトの中から、個人的に参考になったWebサイトを3つ紹介します。 【PHOTOSHOP VIP】 PHOTOSHOP VIP こちらのサイトはデザインの基礎から最新のトレンドまで紹介されています。 また、デザインテクニックなどの実践的な技術も学べます。...