2022年のWebデザインに関する主なトレンドキーワードは パララックス効果 横スクロール（下にスクロールすると画面が横にスライド） 2Dイラスト、2Dアニメーション スマホ幅スクロール などがありました。また、3DCGなどは今年も流行することが予想されています。 細かい部分ではスマートフォンで使われているアイコンをデザインで使用したり、新しいフォントや素材も増えています。 また、制作ツールとしてこれまでのツールに加え、2022年はFigmaの日本語対応やcanvaの利用者が大幅に増加したことにより、これまでデザインに関わらなかった方がクリエイティブ制作を始めています。 そこで、今回は先週の2023年のWebマーケティングトレンド予測に引き続き、2023年のWebデザインのトレンド予測について参考となる記事や、デザインを検討する時に参考となるWebサイトをご紹介します。 Webサイト制作担

最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。

Open-Source UI elements for any projectCreate, share, and use beautiful custom elements made with CSS or Tailwind.Search

こんにちは、LIGブログ編集チームのゆりてんです。私はふだん、弊社オウンドメディア「LIGブログ」の編集業務をおこなっています。 オウンドメディアの立ち上げを検討されている企業さんのお悩みに、「サイトのデザインをどうしたらいいのかわからない」というものがあるのではないでしょうか？ 今回は、デザインが参考になるオウンドメディアを厳選して8つ紹介します。 こんな人におすすめの記事です！ オウンドメディアのデザインにはどんなものがあるのか知りたい オウンドメディアのデザインのポイントを知りたい デザインが参考になるオウンドメディア8選 早速、デザインが参考になる8つのオウンドメディアを紹介していきます。 KAI-YOU ▲PCデザイン：インパクトのあるアイキャッチが目に飛び込んできます ▲スマホデザイン：PCと比べアイキャッチは1つしか表示されませんがスクロールすることができます https:/

CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ 2022年現在、CSSの使用状況を調査した「The State of CSS 2022」を紹介します。 The State of CSS 2022 The State of CSS 2022は、State of CSSでおこなわれたアンケートの調査結果（14,310人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は24-44才が多く、性別は男性が多めです。

2022年も残り2週間ちょいですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 2022年フォント界の大きなニュースは、今年も引き続きGoogle Fontsに大量の日本語フォントが追加されたことでしょうか。Webフォントとして利用できるのはもちろん、オープンソースなので商用プロジェクトでも無料で利用できます。 また、LINEからフリーフォントがリリースされたのも予想外でした。ほかにも、手書き系の文字種が揃ったフリーフォント、マンガやテレビにインスパイアされたフリーフォントなど、使いたく

11/30（日本時間）にリリースされたChrome 108では、CSSの新しい機能がたくさん含まれています。また、変更・削除された機能もあります。特に、Android版のChromeでposition: fixed;を使用している要素の配置が期待通りにならない可能性があります。 Chrome 108の新機能、変更・削除された機能を紹介します。 chrome-108-beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 Chrome 108のCSSの新機能 変更・削除された機能 Chrome 108のCSSの新機能 Chrome 108でデフォルトで有効になったCSSの新機能は、下記の通りです。 新しいビューポート単位（lvh, svh, dvhなど) 新しいプロパティ（break-after, break-before, break-insid

Web制作のお供に！最新オンライン時短ツール32個まとめ これから使いたい、あまり知られていない便利ツールが大集合 Web制作の効率化を図りたいというひとにオススメしたい、最新オンライン時短ツールをまとめてご紹介します。 「もっと早く知りたかった」と思ってしまう、便利なツールを中心に、クリエイターの日々のデザイン業務を軽減してくれる、目からウロコな素材やツールが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. デザインツール 2. Webデザイン便利ツール 3. モックアップ・UIツール 4. アイコンツール 5. クリエイティブ・面白ツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ デザインツール Womp 3D 立体感たっぷりな3Dデザインを、ブラウザ上で直感的に作成できる、新世代のオンラインツー

2022年12月3日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ ↑私が10年以上利用している会計ソフト！ 1. CSS：svh・dvhがついに全ブラウザ対応へ。iOSの画面の高さいっぱいに要素を広げたいときの最適解 CSS：svh・dvhがついに全ブラウザ対応へ。iOSの画面の高さいっぱいに要素を広げたいときの最適解 https://t.co/UO8sjjEH54 — Webクリエイター ボックス (@webcreatorbox) November 30, 2022 2. Webデザイン：日本のウェブデザインの特異な

ホームページを制作するときに、何度も繰り返し利用するコードは、スニペットとして整理しておくのがオススメです。 スニペットとは「切れ端」「断片」という意味で、コピペで簡単に再利用できるテンプレートのようなもの。 この記事では、コピペで使える便利な最新HTML／CSSスニペットをまとめてご紹介します。 ブラウザ上でHTMLやCSSのコードを編集しながら、リアルタイムでプレビューを確認できるのもポイント。 画面右下にある「Return」キーをクリックすることで、再読み込みでプレビューできます。 コピペできる、保存しておくと便利なHTMLスニペットまとめ 水平方向に無限スクロールするアニメーション 左右どちらへもスクロールするCSSアニメーションで、両サイドはグラデーションでフェードアウトしています。 See the Pen Infinite Scroll Animation by Yoav Ka

Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.

こんにちは。 今回は【商用利用可】明朝体の日本語フリーフォント22選です。 書き始めの部分にウロコがあるのが特徴の明朝体。 和風デザインや大人っぽい雰囲気を出したいときにも重宝する書体ですよね。 そこで、今回は商用でも無料で使える明朝体の日本語フリーフォントをまとめました。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 【商用利用可】明朝体の日本語フリーフォント！ほのか明朝 http://font.gloomy.jp/honoka-mincho-dl.html IPA明朝の漢字に柔らかな曲線が特徴のかなを組み合わせたフリーフォント「ほのか明朝」！ 漢字よりかな文字が小さくなっています。 のどやかな雰囲気や涼しさ・艶やかさ・澄み切った感じを表現したいときにおすすめですよ。 はんなり明朝 https://typ

今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ ひと手間でガラリと変わる、これからの新しいCSS HTML/CSSの入門書などには載っていない、登場したばかりの最新CSSテクニックをまとめてご紹介します。 サンプルのソースコード付きなので、理解しやすく、実装したいときにも役立ちます。 ページの演出に使える、デザインの仕上げにもオススメしたいワザが揃いました。 「こんなことがCSSでできるの?!」と思ってしまう、オドロキのテクニックを学んでみましょう。 コンテンツ目次 1. キラキラに輝くホログラフをCSSで実装 2. クールなグラデーション背景のつくり方 3. oklch()による色の設定 4. 夢のような景色「Dreamy Blur」エフェクト 5. オフキャンバスのメニューをポップアップで実装 6. スクロール連動型のCSSアニメーション 7. 3Dなグリッチ・

おしゃれでかわいいフリーフォントは、デザインに迷っているときにおすすめです。 無料で利用できるのはもちろん、フォントを変更し、文字を入力するだけで、誰でもあらゆるスタイルを、手軽に試すことができるのが理由です。 実際に、フォントを変更したところ、デザインだけでなく、読みやすさも改善された、という声はよく聞きます。 ここでは、実用的で使いやすい最新フリーフォントのみをピックアップ、まとめました。 おしゃれで使いやすい、要注目の最新フリーフォントまとめ まずはAdobe Fonts、大幅拡充しています。 独自の特徴を持つデザイン毛筆のフォント「太郎R」。 緑の黒板に、白のチョークで書かれたような、懐かしい字を思い浮かべるフォント「チョーク」。 視覚デザイン研究所からは、「メガ丸-pop」「ラインＧアール-pop」「ロゴ丸-pop」「ロゴ丸Jr-pop」の4フォント。 それぞれ「FutoLine

良質なWebデザインを集めているギャラリーサイト18+1選Update2023.03.07Release2022.10.17Design UI HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作の現場では、制作側はクリエイティブの参考に、クライアントは要望を伝えやすいように、Webデザインギャラリーサイトを利用する機会は多いです。そこで今回は、良質なWebデザインを集めているギャラリー18+1サイトを紹介します。あなたの現場でぜひ参考にしてみてください。 ちょうどいいWebデザインギャラリーちょうどいいWebデザインギャラリー限られた条件の中で、最良のクリエイティブを『ちょうどいい』と定義して、キュレーターがそれぞれのWebサイトのちょうどいいポイントを端的に紹介していている『ちょうどいいWebデザインギャラリー』。 サイトをス

画像の切り抜きや背景の除去、透過できる無料オンラインツール15選 自動で３秒！話題のFigmaプラグインと一緒に 「できるだけラクに、写真の切り抜きや、背景のみを消したい」 そんなわがままも叶えてくれる、魔法のような、無料のオンラインツールを利用してみませんか。 さらに、写真を放り込むだけで、背景の切り抜きをAIが自動で、ほんの数秒で完了というから驚きです。 今回は、実際にすべてのツールを試し、本当に使いたいと思ったツールのみをセレクト。 背景除去ツールを使うことで、被写体のみを切り抜き、透明な背景を作ることができるので、さまざまなデザインに配置できます。 ECサイトやWebサイトの、商品切り抜きにもおすすめです。 すべて無料！画像の切り抜きや背景の除去、透過できるオンラインツールまとめ Adobe Express フォトショップを提供するAdobe（アドビ）による、スキルの有無を問わず、

「これ、どうやる？」真似したくなるフォトショップ最新チュートリアル、作り方40選 参考書のように使える、便利でおしゃれな新作テクをチェック フォトショップが上達するもっとも手っ取り早い方法は、結論から言えば、気に入ったチュートリアルを真似してみることです。 というのも、つくり方だけでなく、実践的な使い方を、順を追って再現できるのが理由です。 事実、「先輩のワザを盗む」、「師匠の技術をマネする」などの言葉が、古くからあるほどです。 ここでは、思わず真似したくなるフォトショップの最新つくり方、チュートリアル42個をまとめてご紹介します。 作業がスピードアップする小技テクも覚え、幅広いデザインスタイルを習得してみましょう。 「これ、どうやる？」真似したくなるフォトショップ最新チュートリアル、作り方まとめ フォトショップを持っていない人は、まずは7日間の無料トライアルからはじめませんか。 すべての

この記事では、「もっと早く知りたかった」と思ってしまう、便利な最新オンラインツールをまとめてご紹介します。 AIをフル活用した次世代ツールから、これまでの作業が嘘のように捗る便利なものまで、今後のワークフローを変えてくれそうなツールを中心に揃えています。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. デザイン・配色ツール 3. モックアップ・アイコンツール 4. 面白・クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール 3D Perspective Glitch Hover Effect グリッチアニメーション中にピクセル化された画像を表示する、ユニークでたのしいホバーエフェクト。 Bike Demo Three.js マウススクロールに合