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にも対応しました。

The Largest Library of Open-Source UICommunity-built library of UI elements. Copy as HTML/CSS, Tailwind, React and Figma.

無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする　＞＞ タイトルタグの最適化は、数ある最適化の中でも真っ先に名前が挙がるものの一つでしょう。SEOの初心者に対し、タイトルタグの最適化を外してレクチャーをすることは考えづらいです。しかし、最適化の対象として重要であることは間違いないですが、「どの程度重要であるか」を説明することはなかなか難しいものです。今回は、SEOにおけるタイトルタグの重要性を扱ったSearch Enjine Journalの記事を紹介します。 タイトルタグはランキング要素のうち、強いウェイトを占めている。こうした根強い主張があることは事実であるが、それが誇張されたものであるかどうか、確認していこう。 SEOの初期の頃と同様に、ページ

オウンドメディアの立ち上げを検討されている企業さんのお悩みに、「サイトのデザインをどうしたらいいのかわからない」「成果が出やすいデザインを知りたい」というものがあるのではないでしょうか？ 今回は、Web制作会社の目線からデザインが参考になるオウンドメディアを厳選して8つ紹介します。 デザインが参考になるオウンドメディア8選 早速、デザインが参考になる8つのオウンドメディアを紹介していきます。 KAI-YOU ▲PCデザイン：インパクトのあるアイキャッチが目に飛び込んできます ▲スマホデザイン：PCと比べアイキャッチは1つしか表示されませんがスクロールすることができます https://kai-you.net/ メディア事業、マーケティング事業、クリエイティブ事業を手がける株式会社カイユウのオウンドメディアです。『「ポップ」を探求しながら常に世界と遊び続ける』をテーマに、幅広いカテゴリの記事

Super Fast Color Palette Generator 658C6E85A898EFF9E8F5E2B0DFCD80

被リンクの重要性をPageRankの仕組みから知る 被リンクの重要性を知るためにはPageRank（ページランク）についても知る必要があります。PageRankはGoogleがWebページの内容と検索クエリの有用性を判断するために利用しているコアランキングシステムの1つです。 Google は、さまざまなシステムを導入してページ間の相互リンクを理解し、ページの内容と、検索クエリに対して最も有益な情報を提供するのはどのページかを判断しています。その中でも PageRank は、Google がサービスを開始した当初から使用されているコア ランキング システムの一つです。（中略） PageRank の仕組みは当時から大きく進化しており、コア ランキング システムの一部として機能し続けています。 Google検索ランキング システムのご紹介#リンク分析システムとPageRankより引用 あるペー

Webサイト制作、Webサイトデザインの参考になる国内、海外のWebサイト、サービスサイト、メディアサイト、ランディングページ、コーポレートサイトなどをまとめたWebデザインギャラリーサイトです。matomeは、Webを通じたコミュニケーションをデザインする上で、Webマーケティング視点、UI/UXデザイン、コミュニケーション設計に優れた素晴らしいWebサイトを紹介しています。

How to use WPTurbo generators? Once you choose a generator, fill the fields on each tab to configure the expected behaviour. Then, click on the Update code button to get the generated snippet. Finally, copy/paste or download the code for your project. Where to put generated snippets? It depends. Some generators are theme related and other are plugin related. Also, if you want to customize a WordPr

Web制作に役立つ機能、ルーラー・ガイドを表示したり、ボックスモデルを視覚化したり、カラーピッカーやカラーパレットを取得、気になった要素のHTMLとCSSをCodePenに表示させたりなど、たくさん用意されているChromeの便利な機能拡張を紹介します。 SuperDevはオープンソースで開発されており、SuperDev -GitHubでコードも公開されています。2022年現在、ChromeとEdgeとBraveの機能拡張として利用できます。 SuperDevをChromeで利用する場合は他の機能拡張と同様に、Chrome ウェブストアからインストールできます。

この記事では、株式会社HAPPY ANALYTICSの小川さんに、GA4(Google アナリティクス 4）で大切な計測の考え方『イベント』について、解説いただきました。 「EC事業者向けのGoogle アナリティクスの活用方法」をテーマとした連載の第6回は、前回習ったイベントを利用して、よりユーザー行動や態度変容を理解するための、計測実装と設定方法を紹介します。 ECサイトで欠かせない計測すべきクリック行動 ECサイトでは、ユーザーの「導線」がある程度決まっています。シンプルに考えると、Top⇒一覧及び詳細⇒カートページ⇒決済開始⇒決済完了という流れになります。この中でクリック行動が重要になるのが、Top、一覧および詳細です。カートページ以降は利用しているECシステムによっては、大きく変えることが難しく、導線もほぼ一直線で必要な要素が少ないためです。 そこで、今回の記事では、Top、一覧

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からフリーフォントがリリースされたのも予想外でした。ほかにも、手書き系の文字種が揃ったフリーフォント、マンガやテレビにインスパイアされたフリーフォントなど、使いたく

パッと目につく商品リンクを作る時に便利なのが、無料で利用できるWordPressのプラグイン「Rinker」です。 Amazon、楽天、Yahoo!などのリンクを、商品画像つきで作成できます。プログラミングの知識がなくても利用できるので、ブログ初心者でも問題なく使えるでしょう。 本記事では、Rinkerの使い方を解説します。大量の商品を扱う物販アフィリエイター向けに、商品リンクを効率的に作る方法も紹介しているので、ぜひ参考にしてみてください。 気になる章にジャンプできます。 初期設定 商品リンクの使い方 大量の商品リンクを管理する方法 カスタマイズ方法 Rinker（リンカー）とは Rinker（リンカー）はプログラミングの知識がない人でも、おしゃれな商品リンクを作れるプラグインです。商品リンクはアフィリエイトタグに対応しているため、ここから商品が売れれば、アフィリエイト報酬が入ります。

2024年3月24日GASappendrow,getLastRow,getMessage,getPlainBody,gmail,GmailApp,GmailApp.search,lastRow,match,setValues,スプレッドシート,自動転記 この記事では、Google Apps Script（GAS）を使い、Gmailから抽出した本文・件名・差出人アドレスといったメール情報をスプレッドシートに自動で転記する方法をご紹介します。 メールの内容から一つ一つ手動でコピペするのは膨大な手間がかかりますが、GASを使って自動化することで工数を大幅に削減することができます。 サンプルコード 会社に届いたお問い合わせフォームのメールからスプレッドシートに自動転記することを想定して記述しています。 function myFunction(){ // 抽出条件指定 let query =

浮世絵の素材を使いたいなという時にぴったり、浮世絵専門のイラスト素材を紹介します。 イラストは商用利用無料、クレジット不要、加工OKの太っ腹ライセンス、登録など面倒なことは一切不要でダウンロードできます。 Ukiyoe Stock 「浮世絵をもっと身近に」をコンセプトに、浮世絵をデータ化し、商用無料のフリーイラスト素材として配布しているサイトです。元絵はすべてパブリックドメインで、それをデジタル化し、利用しやすいように着色やレイアウト補正されています。 商用利用無料 クレジット不要 加工OK 素材のフォーマットは.png ※有料版として.epsや.aiがあります。 ライセンスは、「ダウンロードしたデータをそのまま配布・販売しなければ大体なにしてもいいよ」とのこと。詳しくはご利用規約をご覧ください。

デザイナーはもちろん、エンジニアの方やPdMの方もですが、デザインツールを使用していてこのような課題に直面したことがありませんか？ 探しているデザインデータがどこにあるのかわからない 最新のデザインデータがどれなのかわからない 状態変化時のデザインを考慮できておらず、抜け漏れによる手戻りが発生する どうしてこのデザインに決まったのか、検討の流れや経緯がわからない このような課題を解決するためにはどのようなデザインデータを作り、運用していくのが良いのでしょうか。 GoodpatchではFigmaをデザインツールとしてよく使用します。今回はあるクライアントとのプロジェクトにおいて検討したFigmaの運用方法の例をご紹介します。 課題：探しているデザインデータがどこにあるのかわからない 解決方法：FigmaのTeam, Project, Fileの構成を定義する 探しているデザインデータがどこに

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