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（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います... 続きを読む

パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends

2021/09/02 5 users パララックス ライブラリ Vanilla JS 実装 印象

Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで... 続きを読む

WordPressのおすすめブランクテーマ・スターターテーマまとめ【2021年版】 | Web Design Trends

2021/08/26 5 users WordPress スターターテーマ 手間 自作テーマ コード

WordPressの自作テーマを作る場合、0から自分で作る方法でも作ることはできますが、WordPress独自のコードを記述する量が多くなってしまい、かなりの手間がかかってしまいます。 そんな時に使えるのが「ブランクテーマ」「スターターテーマ」と呼ばれるテーマです。ブランクテーマやスターターテーマを使うと、基本機能... 続きを読む

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つの重要なアニメーションのタイミングがあり、それぞれ適切にデザインすることによって使いやすさの向上にも繋がります。 今回は、アニメーションが... 続きを読む

2021年版：WebサイトのOGPの正しい設定方法まとめ。画像サイズや確認方法も | Web Design Trends

2021/08/16 7 users OGP 流入 機会損失 SNS 設定

OGPは、WebサイトのSNSからの流入を増やすためには欠かせない存在ですが、意外とWebサイト公開時に忘れがちになってしまいます。 OGPの設定を正しく行わないと、せっかくSNSでシェアされてもアクセス数が伸びず、大きな機会損失に繋がってしまう可能性があり、注意が必要です。 今回は、WebサイトにおけるOGPの正しい設... 続きを読む

2021年版！おすすめのCSSフレームワーク総まとめ。特徴や比較も！ | Web Design Trends

2021/07/15 8 users CSSフレームワーク CSS 比較 特徴 Web制作

CSSのコード記述量を減らして、効率的にスピード感を持ってWeb制作を行う助けとなるのがCSSフレームワークです。 現在公開されているCSSフレームワークの種類は非常に多く、それぞれの特徴や目的なども様々で、自分に合ったCSSフレームワークを見つけるのも大変です。 今回は、2021年現在でおすすめのCSSフレームワーク... 続きを読む

2021年のトレンドカラーは2色の組み合わせ！カラーパレットのサンプルも | Web Design Trends

2021/01/18 6 users カラーパレット サンプル トレンドカラー PANTONE 発表

毎年12月ごろにPantoneから発表されているカラーオブザイヤーですが、2021年は、イエローとグレーの2種類がトレンドカラーとして選ばれました。 今回は、それぞれの色に関する情報や、トレンドカラーを使ったカラーパレットなどをご紹介したいと思います。 2021年のトレンドカラーは2つの色の組み合わせ PANTONEから発表... 続きを読む

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フレームワークとは、ボタンやフォー... 続きを読む

Font Awesome 6がもうすぐ提供開始！新たなアイコンの種類やスタイルの登場も | Web Design Trends

2020/06/04 6 users Font Awesome アイコン 種類 WEB上 スタイル

Font Awesomeと言えば、Web上でアイコンを表示することができる人気サービスです。 そんなFont Awesomeから、新たに「Font Awesome 6」の登場が発表されました。 現在は... 続きを読む

CSS Grid Layoutを使った便利なテクニックやツールなど | Web Design Trends

2020/05/27 5 users CSS Grid Layout テクニック ツール コード

CSS Grid Layoutを使えば、他の方法と比べてシンプルにコードを記述することができたり、柔軟なレイアウトを作ることができます。 知っておくと役立つテクニックや、ジェネレーター、CSSフレーム... 続きを読む

2020年版：CSS Grid Layoutの対応ブラウザやベンダープレフィックスについて解説！ | Web Design Trends

2020/05/26 6 users ベンダープレフィックス Flexbox CSS レイアウト

TOP > Web制作 > 2020年版：CSS Grid Layoutの対応ブラウザやベンダープレフィックスについて解説！ CSS Grid Layoutは、CSSで柔軟にレイアウトを作ることができる便利なレイアウト手法です。 しかし、Flexboxと比べてブラウザ対応が遅れているなど、推奨環境について気になる方も多いのではないでしょうか。 今回は、20... 続きを読む

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の... 続きを読む