2022年1月：デザインの参考にしたい魅力的なWebサイト14選 | Web Design Trends

2022/01/12 163 users ヒント トレンド 参考 好み デザイン

2022年1月の最近見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。 優れたWebデザインに触れることによって、トレンドのデザインを知ることができたり、デザインのヒントを見つかったりするなど、様々なメリットがあります。ぜひ自身の好みに合うような素晴らしいWebサイトを探してみてください。 2... 続きを読む

2022年に流行するWebデザインの最新トレンド10個まとめ | Web Design Trends

2022/01/05 316 users webデザイン 最新トレンド10個まとめ ミニマリズム 事例

2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWebデザインの10個の最新トレンドをご紹介したいと思います。1つ1つのトレンドごとに実際のWebサイトの事例を掲載している... 続きを読む

FigmaでWebサイトのデザインから公開まで完結するプラグイン「Makers」が登場！ | Web Design Trends

2021/11/02 114 users figma MAKERS プラグイン ノーコード ツール

先日、「Makers」というFigmaでWebサイトのデザイン制作から公開まで完結することができるプラグインが発表されました。 ノーコードでのWeb制作は非常に注目を集めている分野であり、実際にノーコードでのWeb制作も広まってきています。そんな中登場するMakersはどのようなツールなのでしょうか。 今回は、Makersという... 続きを読む

YouTube動画埋め込み時にパラメータを指定して表示をカスタマイズする方法 | Web Design Trends

2021/10/07 13 users パラメータ YouTube動画 YouTube オプション

YouTubeの動画をWebサイトに表示したい場合、埋め込みコードを使えば簡単に動画を埋め込むことができます。 今回は、YouTube動画をWebサイトに埋め込む時にパラメータ（オプション）を指定して... The post YouTube動画埋め込み時にパラメータを指定して表示をカスタマイズする方法 first appeared on Web Design Trends. 続きを読む

コピペで作れる！おすすめのCSSジェネレーター・ツールまとめ | Web Design Trends

2021/09/15 14 users コピペ ジェネレーター プレビュー CSS サンプルコード

CSSがコピペで実装できるおすすめのジェネレーターやツール、サンプルコードなどをまとめました。 CSSに慣れてくるとコードを書くだけでイメージ通りのデザインを作ることができますが、慣れるまではコードだけでなく、プレビューを見ながらツールを使って微調整する方が効率がいい場合があります。 また、知らないと実... 続きを読む

そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends

2021/09/09 225 users WebP ウェッピー トラフィック PNG JPEG

WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います... 続きを読む

Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ - Web Design Trends

2021/08/23 25 users vscode CSS WEBコーダー VSCode拡張機能

VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活用するとさらにWeb制作の作業効率が向上したり、使い勝手が良くなったりします。 今回は、Web制作者、WebコーダーにおすすめのVSCode拡張機能を... 続きを読む

【2021年版】無料で使える！おすすめのフリーアイコン素材サイト18個【商用利用OK】 | Web Design Trends

2021/08/19 11 users 商用利用OK 無料 2021年版 おすすめ

アイコン素材はWebデザインのあらゆる場所で活用することができます。ボタンやリストの見出し、ラベルなどにアイコン素材を取り入れれば、より使いやすくデザインも優れたWebサイトを作ることができますね。 しかし、自分でアイコン素材を作るのは手間がかかるし、アイコン素材を探す場合もライセンスなどを調べるのが結... 続きを読む

アニメーションで魅せる！CSSボタンデザインのサンプルコードまとめ | Web Design Trends

2021/08/18 14 users アニメーション ホバーエフェクト サンプルコードまとめ 向上

ボタンはユーザーがクリックしたりタップしたり、直接アクションを起こすためのWebサイトには欠かせない要素です。 ボタンにはホバーエフェクトとクリックアクションの2つの重要なアニメーションのタイミングがあり、それぞれ適切にデザインすることによって使いやすさの向上にも繋がります。 今回は、アニメーションが... 続きを読む

CSSだけで作れる！背景パターンや模様のサンプルコードまとめ | Web Design Trends

2020/08/27 227 users CSS background-imageプロパティ 模様

CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが... 続きを読む

2020年版：誰でもプロ並みの配色が作れる！便利な配色パターン見本サービスまとめ | Web Design Trends

2020/07/28 671 users 配色 プロ並み 要素 デザイン 初心者

配色はデザインにおいて重要な要素の1つですが、優れた配色を作る方法が分からないという方も多いのではないでしょうか。 そこで、今回は初心者の方でも優れた配色ができる配色パターン見本サービスをまとめました... 続きを読む

2020年版：おすすめの人気CSSフレームワークと特徴の総まとめ | Web Design Trends

2020/06/09 10 users CSSフレームワーク 総まとめ 特徴 フォー パターン

様々な種類のCSSフレームワークが公開されていますが、種類が多すぎてどれを選べばいいのか分からないというパターンは多いと思います。 今回は、2020年おすすめのCSSフレームワークと、それぞれの特徴について分かりやすくご紹介していきたいと思います。 CSSフレームワークとは CSSフレームワークとは、ボタンやフォー... 続きを読む

2020年に流行するグラフィックデザインの最新トレンド13個まとめ | Web Design Trends

2020/01/06 16 users グラフィックデザイン 角度 トレンド 調査 スタイル

2020年のグラフィックデザインはどんなスタイルがトレンドとなるのか気になっている方も多いのではないでしょうか。 様々な角度から調査を行い、人気が高まっているグラフィックデザインのスタイルをまとめました。 今回は、2020年に流行する13個のグラフィックデザインのトレンドをご紹介したいと思います。 2020年に流... 続きを読む

Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends

2019/11/12 115 users Lottie ネイティブアプリ Airbnb Uber メイン

Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非常におすすめのライブラリです。 GoogleやUber、Walgreensなど世界の有名企業も自社アプリケー... 続きを読む

最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends

2019/08/07 508 users Drama Sketch プロトタイプ アニメーション 作成

Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきま... 続きを読む

【2019年版】デザイナーなら知っておきたいフォントサービスまとめ | Web Design Trends

2019/05/13 17 users ２０１９年版

デザインにおいてフォントは欠かせない要素です。フォントの細かな違いによって、デザインのイメージが変化し、大きな影響を与えます。 しかし、デザインを始めたての方はPCにデフォルトで入っているフォントを使っているという方も多いのではないでしょうか？ 今回は、デザインにとって欠かせない要素であるフォントを... 続きを読む

【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ | Web Design Trends

2019/03/21 96 users BEM OOCSS SMACSS CSS設計手法 特徴

CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が少なく、コード量もそこまで多くないような場合はあまり気にする必要はありませんが、大きなプロジェクトになるとCSSの... 続きを読む

おしゃれな配色パターンが見つかる！配色見本サービスまとめ | Web Design Trends

2019/02/13 72 users 配色パターン

2色の配色パターン見本 まず最初にご紹介するのは2色の配色パターン見本サービスです。2色の組み合わせは配色の基本ですね。まずは2色のベースとなる配色を決めて、そこから次の色を探すようにするとイメージに合った配色を作りやすくなります。 Khroma Khromaは、好みの色を自分で選ぶことで人工知能があなたに合った配... 続きを読む

2019年に流行するWebデザインの最新トレンド18個まとめ | Web Design Trends

2018/11/27 653 users 手法 トレンド webデザイン 変化 Webサイト

そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか？ 最新のWebデザインのトレンドを取り入れることによって、Webサイトを魅力的に見せることができたり、使いやすいWebサイト... 続きを読む

【2018年版】Webサイトのファビコンや各種アイコンの正しい設定方法 | Web Design Trends

2018/10/15 24 users ファビコン ユーザビリティ タブ 支障 ご存知

ファビコンはご存知の方も多いと思いますが、ブラウザのタブに表示されるWebサイトごとに設定可能なアイコン画像ですね。ファビコンを設定しなくても支障はありませんが、タブ表示したときやブックマークした時にWebサイトを探しやすくなるため、ユーザビリティを考えると必ず設定しておいた方がいいですね。 スマホ用ア... 続きを読む

2018年版：パララックスを簡単に実装できるおすすめプラグイン8選 | Web Design Trends

2018/10/04 72 users パララックス ライブラリ WEBサイ プラグイン デザイン手法

パララックスは、様々なWebサイトで取り入れられているデザイン手法で、ユーザーを楽しませたりサイトを魅力的に見せたりなど様々な効果を発揮します。 Webサイトでパララックスを実装するためのプラグインやライブラリは様々なものが公開されており、それらを利用することで初心者の方でも簡単にパララックスをWebサイ... 続きを読む

2018年最新！Webデザインの学習におすすめの書籍24選 | Web Design Trends

2018/08/21 68 users 学習 webデザイン デザ CSS 2018年最新

Webデザインの学習を行う上でおすすめの書籍を下記のテーマ別にまとめました。 デザイン基礎知識 Webデザインの基本 HTML/CSS/JavaScript CSSテクニック デザインテクニック デザ... 続きを読む

2018年版：おすすめの人気UIデザインツール徹底比較 | Web Design Trends

2018/08/20 83 users 2018年版

日々新たなデザインに関するニュースが飛び交っていますが、それはUIデザインツールに関しても同様です。 Adobe XDの正式リリース、Figma3.0のリリース、InVision Studioのベータ版公開など、2017年の終わりから2018年にかけて多くのUIデザインツールが登場しました。 今回は、2018年8月現在で公開されているUIデザイン... 続きを読む

2018年上半期のWebデザインを振り返ってみる | Web Design Trends

2018/08/02 21 users webデザイン 地点 2018年上半期 既存 常識

2018年も折り返し地点を超え、気づいたら8月になってしまいました。ここで2018年のWebデザインのトレンドとデザインツールについて振り返ってみようと思います。 2018年上半期のWebデザインのトレンド 2018年は、従来の常識や既存の枠を壊し、オリジナリティ・個性を押し出したデザインのWebサイトが注目されるようにな... 続きを読む

ブーム到来か。ノングリッドデザインの魅力と参考になるWebサイト | Web Design Trends

2018/07/23 88 users ブーム到来 既存 従来 テキスト 個性

既存の枠に囚われず、自由に画像やテキストをレイアウトする「ノングリッドデザイン」のWebサイトがここ最近で多く見られるようになってきました。 近年オリジナリティがWebデザインに強く求められるようになってきていて、従来のルールに従わず、個性を強調したようなWebサイトが増えてきていますが、ノングリッドデザ... 続きを読む