Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
ChatGPTの発表から、1年が経過しようとしています。 熱狂は徐々に醒め、現在の利用状況はLINEの調査によると、全体の5％程度。＊1 その中でも、仕事で積極的に利用している人は、1％程度ではないかと推測します。 では、この1％の人たちはどのような方々で、どのように生成AIを仕事で使っているのか？ 9月の中旬から、10月の末にかけて、私は約40名の方に取材を行いました。 そして、私は一つの確信を得ました。 それは、「私は間違いなく10年後、失業する」です。 私は間違いなく10年後、失業する なぜなら、現場での生成AI利用は、仕事によっては 「ホワイトカラーの代替」 をかなり高いレベルでできることがわかったからです。 例えば、コンサルティング。 コンサルティングには、初期の段階で、仮説構築という仕事があります。 平たく言うと、調査・提案にあたって「課題はここにあるのではないか？」というアタ
どうしてもドメインを永久保持できない企業向け 企業はどうドメインを捨てるべきか - Web > SEO
コロナ禍中に取得された地方自治体のドメインがオークションで高値売買され、中古ドメインとして悪用されるなど、公的機関のドメイン放棄問題が注目されています。 11月25日のNHKニュース7でドメイン流用の件が報じられました。私も取材を受け少しご協力をしています。 www3.nhk.or.jp 公的機関のドメイン放棄問題の理想の解決は、今後は lg.jp、go.jp などの公的機関しか使えないドメインだけを使うようにすることです。 ただ今回の問題はコロナ禍初期の大混乱時、非常にスピーディにサイト立ち上げが求められていた時の話です。 信頼が求められる lg.jp などのドメインの利用には厳格なルールがあるのも当然です。あの混乱時期にルール改定も難しかったと思います。新規ドメインが選ばれた事は仕方がない事と思っています。 ただ、コロナ禍が落ち着いた今、無責任に放棄されるのは明らかな問題です。 今回の
2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
独力でWebサービスを開発・構築できるフルスタックエンジニアへのロードマップ─幅広いスキルを「Udemy夏のビッグセール」で学ぶ！ - はてなニュース
Webで新規サービスを立ち上げる際に、UIからインフラ周りまで一人で面倒を見られるエンジニアは、少人数のスタートアップでなくとも非常に頼れる存在です。どんな課題に直面しても技術力で乗り越える、そんなスキルフルなエンジニアに憧れる方も多いでしょう。 この記事では、フロントエンドのプログラミング（JavaScript周辺）からサーバーサイド、インフラ、さらに開発手法まで、Web開発で必要になるさまざまなレイヤーのフルスタックなスキルの現在地と、関連するUdemyの講座を紹介します。 株式会社ヘンリーでVPoEを務める松木雅幸（@songmu）さんの執筆です。 フルスタックエンジニアに必要なスキル さまざまな講座でまとめて学習してみよう Udemyでは夏のビッグセールを開催中！ ※この記事は、株式会社ベネッセコーポレーションによるタイアップ広告です。記事末に、はてなブックマークした方にAmazo
＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員（Webディレクター）として働きつつ、個人でブログ／メディアライターとしても活動するパラレルワーカー。 ChatGPT等AIを公私で駆使し、ITツール・ガジェットを用いて人々の生活をより豊かにするための活用術を提供するブログも運営。 タスク管理、得意ですか？ 自慢じゃありませんが、私は苦手です。あまり好きではありません。 Webディレクターとしては、プロジェクト管理・タスク管理は必須スキルなので、一般的には「上手にやれている方」なのかもしれません。ですがいまだに苦手意識は抜けないままです。 なんで苦手なのかなぁと思い返してみると、要因はいくつか思いつきますが、中でも最も根深い問題は「気持ちに頼りすぎる」という点にあるように思います。 【目次】 やる気の高いときに設定するから長続きしない
＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員として働きつつ、個人でブログ／メディアライターとして活動するパラレルワーカー。 iPhone・iPad・Mac・ITツールを用いて人々の生活をより豊かにするための活用術を提供する「デジタルライフブロガー」です。 Web制作に関わる人にとって、すでに公開されているWebサイトというのは非常に重要な勉強材料です。中には「こういった表現、次のプロジェクトで使ってみよう」「こういう見せ方いいなぁ。いつかやってみたい」と、いつか役立てたいサイトもあるでしょう。 そういった「参考サイト」は、自分だけのデータベース化しておくと便利です。私はNotionを使って、自分だけの参考サイト集を作成しています。 【目次】 自分だけの参考サイトギャラリーをNotionで作ろう 自分専用の参考サイトギャラリーを作る
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
「指示の出し方が悪い人」は、一体どこがダメなのか。
「指示の出し方が悪い人」が、いる。 例えばこんな具合だ。 「安達さん、web制作会社からあがってきたページの確認をしておいて！」 そんな指示が上司から飛んだとする。 実際にそれを体験してみると、この指示が「良い指示」だと思うビジネスパーソンは、ほとんどいないだろう。 なぜならば、 １．「あがってきた」とは何か。メールで届いたものか。メッセンジャーで来たものか。他にもあるのか。何が全てか。 ２．「ページ」とは何か。webページのことか、または別の形式・フォーマットを指すのか。 ３．「確認」とは何か。何を基準とするのか。どうすれば作業終了となるのか。 など、作業を進めようとすればするほど、次々に疑問が湧くからだ。 酷いときには、よくわからない書類をぽんと渡されたり、謎のメールを転送されて 「これやっといて」 などという指示をする人もいる。 要するにこれらはすべて、「手抜き指示」だ。 こういう指
DeepLを超えるやさしい翻訳アプリとGPTsを作りました
DeepLを超えるやさしい翻訳アプリとGPTsを作りました 苦手な分野の英文を理解するのを助けてくれます。 なぜ翻訳アプリを作ったのか 私は最近ChatGPTのような大規模言語モデルに興味があり、AI開発者の方や、大規模言語モデル関連の情報を発信している方をフォローしていました。 すると最新の論文（英語）や英語のツイートが次々に流れてくるのですが、それらをGoogle翻訳したり、DeepLで翻訳しても、意味不明な場合が多いということに気づきました。 特に海外の方の1行だけのツイートなどは、DeepLで翻訳しても全く意味がわからない場合が多くて困っていました。 AI関連の論文は専門用語が多く、いちいち調べながら読んでいると、1日の大半の時間が情報収集だけで終わってしまいます。 これは要するに「自分の専門分野でない分野の英文を理解するのは大変」ということなので、例えば「Web制作初心者の方が海
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
Flashエミュレーター誕生のきっかけは別に「フラッシュ愛」じゃなかった 「swf2js」開発者の本音と数奇な運命【フォーカス】
株式会社ソニックムーブ エンジニアグループ ソリューションユニット マネージャー 家永 稔之 2011年にソニックムーブに入社。個人ではJavaScriptとTypeScriptを用いて、「swf2js」や「Next2D」の開発を手がける。業務のリモート化をきっかけに地元の消防団に所属し、防災活動として月に数回、消防車両に乗って地域の巡回を行う。 X GitHub Animation Tool かつてインタラクティブなWebコンテンツを支えた「Adobe Flash」。「Adobe Flash Player」は2020年12月末でサポートを終了し、ほとんどのコンテンツはすでに姿を消しました。そんなFlashコンテンツ（SWF）を最新のHTML環境で再生可能にする、オープンソースのJavaScriptライブラリが「swf2js」です。ソフトウェアエンジニアの家永稔之さんが開発し、2015年に
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評せるかは微妙に思っている https://x.com/aumy_f/status/18220941478532
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
FigmaがAIでさらに進化！ Web制作はもはや完全自動化目前？ 「Config APAC 2024」現地レポ | 進化が止まらない！ 最新ツール
Figma（フィグマ）が主催する世界最大級のデザインカンファレンス「Config（コンフィグ）2024」が本拠地・米国のサンフランシスコで6月26〜27日に開催された。その翌週、Figma経営陣はシンガポールへと飛び、7月2日に「Config APAC 2024」を開催。アジアで初開催となったこのConfigには約1,000人以上が参加し、新機能の発表を歓声をもって迎えた。 シンガポールの「Config APAC 2024」を現地取材した筆者が、最新の機能アップデートとAI活用を中心にお伝えする。 マリーナベイサンズ・コンベンションセンター内のConfig APACの会場 アジアには72ものFigmaコミュニティがあり、2万人以上の会員がいます。そんなアジアで初のConfigをシンガポールで開催できたことは最高の気分。アジアには、人類、世界にインパクトを与えるデザイナーが生まれてきた歴史が
Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法
今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙♂️ CSS trick: transition from height 0 to auto! by Fra
アクセンチュアvs.電通､｢異業種バトル｣の第二幕
コンサルの雄がまた一歩、広告会社の縄張りに踏み込んだ。 アクセンチュアは10月2日、広告・PR会社のベクトルから子会社のシグナルを買収した。 シグナルは2005年、ベクトルが手がけるPR案件におけるデジタル対応を目的に設立された。そのため複数のPR子会社を抱えるベクトルグループ内でも、SNSコンサルティングやWeb制作、インフルエンサー活用など、デジタルマーケティングに強い。 一方のアクセンチュアは目下、急速にマーケティング領域を強化しており、数年前からシグナルの買収を模索してきた。PRのデジタル化が進む中、ベクトル内で子会社間の事業領域が重複していたこともあり、今回のM&Aが実現した。買収額は非開示だが、ベクトルは株式の売却益で約17億円を計上する。 実は広告代理店で世界2位 アメリカの広告業界専門誌『アドエイジ』によると、実はアクセンチュアは世界のエージェンシー（代理店）の売上高で、イ
CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。 チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。 CheatSheets -GitHub チートシートはすべて、「ご自由にダウンロードしてご利用してください」とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。 では、どんなチートシートがあるのか紹介します。 まずは、CSS Flexboxのチートシート。Flexboxの各プロ
【速報＆朗報】GPT Storeが遂に公開 待ちに待ったGPT Storeが遂に公開されました！🔥 公式発表によると、GPT公開からのたった2ヶ月で300万以上のGPTsが作成されているとのこと。 注目ポイント👀 ・毎週Open AIからの注目GPTsが特集される… pic.twitter.com/94WCTnwDiJ — 木内翔大＠SHIFT AI代表「日本をAI先進国に」𝕏 (@shota7180) January 10, 2024 ChatGPTには「GPTs」という機能があり、ユーザーがChatGPTを自由にカスタムできます。さらにGPT StoreではGPTsが公開され、将来的には収益化も可能になる予定です。 AIを使って稼げる時代が、目の前まで来ていますね。今回は、そんなGPT Storeの中で最も人気のあるGPTsトップ10をご紹介します。 ビジネスや情報整理など、様々
72ページ / A5サイズ / 電子版はPDF（フルカラー） / 紙の本は表紙カラー、本文モノクロ 技術書典16（2023年5月25日～6月9日）の新刊「読み手につたわる文章 - テクニカルライティング」です。 「書籍版＋PDF版」はBOOTH倉庫での入荷作業が完了し次第、買えるようになります。 「入荷お知らせメールを受け取る」を押しておくと、入荷されたときにメールが届きます。 「PDF版」は名前のとおり、PDFをダウンロードできます。紙の本はついてこないので注意してください。 なおPDF版は技術書典オンラインマーケットでも購入できます。 https://techbookfest.org/product/3t8AGqtB65jsPtPhx6m5fr 「ダウンロードカード用」は、既に紙の書籍をお持ちの方向けのファイルです。紙の書籍を購入された方は、あとがきの後ろにダウンロード用のパスワードが
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。 VSCodeを使うようになったきっかけ コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCo
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員として働きつつ、個人でブログ／メディアライターとしても活動するパラレルワーカー。 ChatGPT等AIを公私で駆使し、ITツール・ガジェットを用いて人々の生活をより豊かにするための活用術を提供するブログも運営。 Webサイトや本で学んだ知識を、自分のものにして活用できるレベルまで引き上げるには、アウトプットが重要だと考えて、積極的にアウトプットするようにしています。 ただ、アウトプットの仕方も大事。知った知識をただSNSにコピペで貼り付けるようなやり方は、良質なアウトプットとは言えないと考えています。 そこで今回は、私が実践している「良質なアウトプット」に転換するために気を付けているポイントについてお話しします。 【目次】 １：第三者に見てもらう ２：自分の言葉で語る ３：図にまとめる
Webアクセシビリティと合理的配慮｜ymrl
2024年（令和6年）4月1日に日本では「障害者差別解消法」という法律の改正が施行され、民間の事業者にとっては「合理的配慮」が義務化されます。義務化するのはあくまで「合理的配慮」であって、法律の条文にはどこにも「Webアクセシビリティ」とは書かれていません。 ここについての誤解が数多く出回ってしまっていて、先日「2024年4月や6月の時点では、まだ日本でWebアクセシビリティが義務化されません」という記事を書きました。 この記事について、以下のような声をもらいました 「専門用語が多くてわかりにくい」 「アクセシビリティは『合理的配慮』ではなかったの？」 「なぜアクセシビリティを推進したい人たちが急に『義務ではない』と言い出したの？」 そこで、もう少し的を絞って、「合理的配慮」「環境の整備」「Webアクセシビリティ」などの言葉の意味や関係について、説明しようと思います。 （筆者は法律に関して
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方50選
「生成AIを仕事で使い倒す人たち」に取材して回ったら「自分の10年後の失業」が見えてしまった
便利で差がつく、ずるいWeb制作ツール・素材90選【2023年ベスト】
タスク管理が苦手な人の共通点 - paiza times
Notionを使って自分だけの参考サイト集を作ってみる - paiza times
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
指示したUIをAIがTailwindベースで実装してくれるv0が凄い
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている
Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ
【GPT Store神ランキングトップ10】世界で一番使われている最強GPTs10選 | WEEL
読み手につたわる文章 - テクニカルライティング - mochikoAsTech - BOOTH
Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
なぜコーディングにVSCodeを使うのか。 私がVSCodeを選んだ理由
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
意味のないアウトプットをやめる７つの方法 - paiza times