そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends
WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います。 WebP（ウェッピー）とは？ WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットで、拡張子は「.webp」です。 WebPは、JPEGやPNGと比べ、同程度の画質の画像をより小さなファイルサイズで保存することができます。Googleの発表では、PNGよりも26%、JPEGよりも25%〜34％程度ファイルサイズを抑えることができると言われています。 また、WebPは背景透過（アルファチャンネル）や、アニメーションにも対応しています。つまり、JPEGのよ
ノーコードWordPressページビルダー「Elementor」とは？使い方や基本機能などまとめ | Web Design Trends
TOP > Web制作 > ノーコードWordPressページビルダー「Elementor」とは？使い方や基本機能などまとめ Elementorとは、ノーコードでWordPressのページが構築できるページビルダープラグインです。Elementorによって提供されているウィジェットを組み合わせてページを作ることができるので、HTMLやCSSの知識が無くてもページを作ることができます。 今回は、Elementorの使い方や基本機能、料金プラン、Elementorの利用におすすめのテーマなどをご紹介したいと思います Elementorとは Elementorとは、コードを書かずにブロックを組み合わせてWordPressのページが構築できるプラグインです。 通常、HTMLやCSS、PHPなどの知識が無ければWordPressのページをカスタマイズすることはできませんが、Elementorを使えば
コピペで作れる！おすすめのCSSジェネレーター・ツールまとめ | Web Design Trends
CSSがコピペで実装できるおすすめのジェネレーターやツール、サンプルコードなどをまとめました。 CSSに慣れてくるとコードを書くだけでイメージ通りのデザインを作ることができますが、慣れるまではコードだけでなく、プレビューを見ながらツールを使って微調整する方が効率がいい場合があります。 また、知らないと実装できないようなテクニックが使われていたり、作業量を大きく削減できるようなジェネレーター・ツールもたくさんあるので、ぜひチェックしてみてください。なお、一部SVGなどCSS以外のジェネレーターも掲載しています。 多機能ジェネレーター The Ultimate CSS Generator | Web Code Tools アニメーションやFilter、レイアウト、テキストなど様々なCSSを生成できるジェネレーターです。初心者の方がCSSのプロパティや値を覚える際にも使ってみると良さそうです。
パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
WordPressのおすすめブランクテーマ・スターターテーマまとめ【2021年版】 | Web Design Trends
WordPressの自作テーマを作る場合、0から自分で作る方法でも作ることはできますが、WordPress独自のコードを記述する量が多くなってしまい、かなりの手間がかかってしまいます。 そんな時に使えるのが「ブランクテーマ」「スターターテーマ」と呼ばれるテーマです。ブランクテーマやスターターテーマを使うと、基本機能が備えられたコードを元にテーマを作ることができるので、効率的にテーマ制作を行うことができます。 今回は、ブランクテーマの基本と2021年最新のおすすめブランクテーマをご紹介したいと思います。 【2023年最新】WordPressの使い方を徹底解説！初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す...
Webデザインのおすすめギャラリーサイト23個まとめ【2022年最新】 | Web Design Trends
様々なインスピレーションを与えてくれるデザインの優れたWebサイトをチェックするには、国内、海外の最新Webサイトの情報が日々更新されているWebデザインのギャラリーサイトがおすすめです。 ギャラリーサイトを日々チェックすることで、最新のデザインに触れることができたり、自身のデザインの参考になるようなWebサイトを見つけることができます。 今回は、2022年最新の国内外の参考になる最新Webデザインが掲載されているギャラリーサイトをご紹介したいと思います。 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWe... Web Design Trends イチオシのギャラリーサイト 記事
Web制作で役立つ！ダミー画像を簡単に表示できるサービスまとめ | Web Design Trends
Webサイトの制作を行う際に、画像が準備中の場合に仮でダミー画像を表示することがあります。 ダミー画像を表示することによって、画像がない場合と比べて、作業を効率良く行うことができ、より完成形のイメージがしやすくなります。 今回は、Webサイトでダミー画像を簡単に表示できるサービスをご紹介したいと思います。 【2023】無料で商用利用可能！フリー画像・写真素材サイトのおすすめ12選 デザイン制作や記事の制作、資料作成など画像素材を利用するシーンは様々ですが、そんな時に役立つのがフリー画像・素材サイトです。 フリー画像やフリー写真を配布しているサイトはたくさんありますが、数が多くて... Web Design Trends 【2023】ほんとに無料？フリーイラスト素材サイト33個まとめ【商用利用OK】 デザイン制作や資料作成など、イラストを取り入れることで印象がガラッと変わったり、より分かりや
Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ | Web Design Trends
VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活用するとさらにWeb制作の作業効率が向上したり、使い勝手が良くなったりします。 今回は、Web制作者、WebコーダーにおすすめのVSCode拡張機能をご紹介したいと思います。 VSCodeとは VSCodeとは、Microsoftが提供するテキストエディタ「Visual Studio Code」のことです。つい数年前までは、人によって使っているテキストエディタが違うことも多かったのですが、最近ではVSCodeを使ってコーディングやプログラミングを行っている人がかなり多くなってきました。 VSCodeは、設定や拡張機能の追加など、マウス操作で行うことができ、初めてコーディングやプログラミングをす
【2023】無料で使えるフリーアイコン素材サイト25個まとめ【商用利用OK】 | Web Design Trends
アイコン素材はWebデザインのあらゆる場所で活用することができます。ボタンやリストの見出し、ラベルなどにアイコン素材を取り入れれば、より使いやすくデザインも優れたWebサイトを作ることができますね。 しかし、自分でアイコン素材を作るのは手間がかかるし、アイコン素材を探す場合もライセンスなどを調べるのが結構面倒です。 そこで、今回は商用利用OKの無料で使えるおすすめのフリーアイコン素材サイトをまとめました。 ※ライセンスについては記事公開後に変更される可能性もあるため、ダウンロード前にご自身でご確認ください。 【2023】無料で商用利用可能！フリー画像・写真素材サイトのおすすめ12選 デザイン制作や記事の制作、資料作成など画像素材を利用するシーンは様々ですが、そんな時に役立つのがフリー画像・素材サイトです。 フリー画像やフリー写真を配布しているサイトはたくさんありますが、数が多くて... W
アニメーションで魅せる！CSSボタンデザインのサンプルコードまとめ | Web Design Trends
ボタンはユーザーがクリックしたりタップしたり、直接アクションを起こすためのWebサイトには欠かせない要素です。 ボタンにはホバーエフェクトとクリックアクションの2つの重要なアニメーションのタイミングがあり、それぞれ適切にデザインすることによって使いやすさの向上にも繋がります。 今回は、アニメーションが美しいCSSによるボタンデザインのサンプルコードをご紹介したいと思います。 ホバーエフェクト ビット調のホバーエフェクトアニメーション ホバーに合わせて楽しいビット調のアニメーションが現れます。 0 6つのボタンデザイン ユニークな6つのボタンのCSSアニメーションのサンプル。 0 矢印が現れるボタン カーソルを合わせると左側から矢印が登場するボタン。 0 テキストが変化するボタン カーソルを合わせると、ボタンのテキストがアニメーションを伴って変化します。 0 ポップで楽しいボタン カーソルを
2021年に流行するグラフィックデザインの最新トレンド12個まとめ | Web Design Trends
2020年はコロナウイルスの影響で、これまでに経験したことの無い1年になりました。その一方で、オンラインの世界ではその影響で急速に様々な変化が生まれています。オンライン教育、オンラインショッピング、リモートワーク、娯楽など様々な分野で大きな成長を遂げることとなりました。 多くの人々、そして企業はこの変化に迅速に適応する必要があり、顧客のニーズに合わせ、テクノロジーやトレンドと共に変化しなければなりません。 トレンドやテクノロジーは成長し続けているため、第一線に居続けるためには水面下で何が起こっているのかを知っておく必要があります。 Webサイトのデザインにおいては、高速化、ユーザビリティ、セキュリティ対策、バッテリーへの配慮、ダークモードの台頭など、著しい変化がありますが、それと同様にグラフィックデザインのトレンドも大きく変化しています。 上記のような項目はWebデザインだけに当てはまるこ
UI/UXデザインの基本と初心者におすすめの勉強法 | Web Design Trends
デザイン制作やサービス制作の現場でUI/UXという言葉を耳にする機会は多いと思います。それぞれなんとなくイメージを持っていると思いますが、正確に違いを説明できますか？ 今回は、UI/UXデザインの基本と初心者の方がUI/UXデザインを勉強する時におすすめの勉強法をご紹介したいと思います。 UI、UXの基本 まずはUI、UXそれぞれの言葉の意味と、それぞれに何が含まれているのか確認してきましょう。 UIの基本 UIとは UIは、「ユーザーインターフェース(User Interface)」の頭文字からなる略語です。Webサイトやスマホアプリであれば、ユーザーが直接触れる画面そのもの、もしくは画面デザインのことをUIと呼びます。 UIデザインとは UIデザインとは、ユーザーが使いやすく、分かりやすい画面デザインを行うことを意味します。例えばボタンが見つけやすく押しやすいような見た目になっているか
2020年に流行するグラフィックデザインの最新トレンド13個まとめ | Web Design Trends
2020年のグラフィックデザインはどんなスタイルがトレンドとなるのか気になっている方も多いのではないでしょうか。 様々な角度から調査を行い、人気が高まっているグラフィックデザインのスタイルをまとめました。 今回は、2020年に流行する13個のグラフィックデザインのトレンドをご紹介したいと思います。 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWe... Web Design Trends
いくつ知ってる？HTML/CSSの便利な小技・テクニックまとめ | Web Design Trends
HTMLやCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。 少し前まではJavaScriptで行わなければならなかったことが、HTMLとCSSだけで行えるようになったりするので、最新情報にキャッチアップすることでより効率的にコーディングを行えるようになります。 今回は、HTMLとCSSの小技やテクニックをご紹介したいと思います。 1. ダークモードの時にスタイルを変える 最近のOSでは、通常のカラースキームと別に「ダークモード」が搭載されるようになりました。 prefers-color-scheme: darkを指定することでダークモードが設定されている場合のスタイルを別で記述することができます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
