2024年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figma, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2024年の大きなニュースの一つは、CSSの進化です。IEのサポート終了にも慣れ、モダンCSSの新機能も今までよりも早くブラウザの

以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス

「どんなサイトのどんな広告をユーザーは見るのか」――これは、広告主もメディア運営者も非常に興味ある事項ではないでしょうか。 今回は、いくつかの大手サイトを男女計5人の被験者に自由に閲覧してもらい、ユーザーがどの広告に目を引かれていたのかをアイトラッキングマシン（被験者の視線の動きを追跡するツール）を使って検証しました。はたしてどんな結果が出るのでしょうか。 口コミに夢中で広告見ず 図1は＠cosme（アットコスメ）を見ていた被験者A（女性、20代後半）の視線です。右側に配置された広告は全く見られていません。被験者Aはトップページから迷わずユーザーの感想が書かれているページへと行き、その後ずっと口コミを丹念に見ていました。また、口コミ以外の要素には全く目を向けませんでした。 図1：＠cosmeを見ていた被験者Aの視線。水色の線は視線の動きを、丸の大きさは視線の滞留時間の長さを示す。青で囲った

[レベル: 上級] 2024 年 7 月 5 日以降はモバイル ファースト インデックスに完全に移行することを Google は告知しました。 パソコン用 Googlebot のクロールを停止し、すべてのサイトをスマートフォン用 Googlebot でクロールします。 パソコン用 Googlebot のクロールがなくなるということは、PC 向けサイトの SEO はもはや無視してもいいのでしょうか？ RWD なら考慮する必要すらなし Google の SEO のために今後 PC 向けサイトを改善する必要があるのか疑問だ こんな質問が Reddit の SEO カテゴリに投稿されました。 Google の John Mueller（ジョン・ミューラー）氏は次のようにコメントします。 このご時世にレスポンシブでないサイトを作るなんて、私には考えられない。長らく更新されていないとか、当面はメンテナ

デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回のテーマは「GPT4oを活用したウェブサイトづくり」です。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。 今回は先日OpenAIが発表した新たなAIモデル「GPT-4o」を使ってウェブサイト（LP）を作成してみました。GPT-4oのパフォーマンスを知ること、そしてデザイナーが生成AIとどう関わっていくべきかを探るきっかけにすることが、今回の目的です。 前提として「GPT-4o」がゼロベースでウェブページを作成することに向いているツールではないと思いますが、チュートリアルの要素と今後の可能性を知るためにあえて取り組んでみました。 GPT-4o

こんにちは！UXデザイン会社ajikeが提供するUX改善サポート＆UIUXデザイナー育成サービスのDods（@Dods_ajikeInc）です。 ChatGPTの新モデルで「ブラウジング機能（インターネットから最新情報を取得して提供する機能）」が無料ユーザーにも使えるようになりました。そこで、今回はWEB上に公開されているサイトをChatGPTに現状分析してもらうことができるのでは…？と思って試した結果や実際に使用したプロンプトをご紹介したいと思います！ ChatGPTのヒューリスティック診断結果まずは実際に現状分析として使用されている「ヒューリスティック診断」をChatGPTにやってもらいました！ ※ヒューリスティック診断：ウェブサイトやアプリのUI・UXを特定の評価基準に基づいて分析し、潜在的な問題点や改善点を特定するもの 今回はアジケのサイトで診断をしてみましたが、きちんとウェブサイ

デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。

www.staticguide.org Markdown Guide の著者として知られるテクニカルライターの Matt Cone が、HTML と CSS、そして何より Hugo の静的サイトジェネレータを使って静的なウェブサイトを作成するガイドを書いている。 要は、このサイトの記述に従えば、スクラッチからウェブサイトを構築するプロセスを経験でき、ウェブサイトがどんなもので、そこでどんなテクノロジーが動いているか理解できるというわけだ。 やはり、「静的ウェブサイト」というのがポイントだろう。著者自身、Introduction でその理由を説明している。 Static Site Guide が静的ウェブサイトだけを対象とするのは、静的なウェブサイトこそ大多数の人にとって最適な選択肢だと思うからだ。静的なウェブサイトで、ブログ、企業マーケティングのウェブサイト、個人用やプロ用のポートフォリオ

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル（ネットショッピング、旅行予約サービス、飲食店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス）について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました（利用者数については、ニールセンとICT総研の調査を元にしています）。このうち、16のサービスの運営企業から回答がありました（回答率は53％）。 回答した企

WixWixでは、これぞと思えるウェブサイトが完成するまで、プロンプトを追加することができます。Image: Lifehacker「Wix」に新規登録すれば、AIウェブサイト作成ツール「Wix ADI」を使って、すぐさまサイト作成を開始できます（ただしご希望なら、AI任せにせず、従来のやり方で作成することも可能です）。 サイト作成にあたっては、さまざまな質問に答えていくことになります。 たとえば、「ウェブサイトにはどのようなタイトルをつけたいのか」「どのような内容のウェブサイトにするつもりか」「どのような機能が必要か」「特に伝えたいメッセージはあるか」といった質問です。 やりとりは、ChatGPTやGeminiを相手にする場合と大差ありません。 また、プロンプトごとに、AIに質問を言い直させたり、答え方を教えてもらったりできます（つまり、こちらが言うことの選択肢を提案してくれるわけです）。

「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。 VSCodeを使うようになったきっかけ コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCo

Nekoweb is a free website hosting service, created in 2022 2023 2024 by a group of coders, programmers and artists, passionate for the old web and personal websites. Social media is too limiting. We believe that everyone should be able to freely express themselves in their own little corner of the web, without having to worry about things like algorithms, tracking, or advertisements. Nekoweb is fr

HonoX は 2024 年 2 月現在アルファステージとなっています。セマンティックバージョンに従わずに破壊的な変更が行われる可能性があります。 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。以下のような特徴があります。 ファイルベースのルーティング 高速な SSR BYOR（Bring Your Own Rerender）：レンダリングエンジンを自由に選択できます islands ハイドレーション ミドルウェア：バックエンドは Hono として動作するため、多くの Hono のミドルウェア を使用できます HonoX を始める 新しい HonoX のプロジェクトを作成するためには、hono-create コマンドを使用します。 npm create hono@latest ? Which template do you want to

Some Privacy Sandbox technologies are being phased out. See our Update on Plans for Privacy Sandbox Technologies. Privacy Sandbox feature status provides more information about the status of individual APIs and platform features. Send feedback Preparing for the end of third-party cookies Stay organized with collections Save and categorize content based on your preferences. If your site uses third-