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

Googleタグマネージャーが便利です。 複数のタグを一括管理。 タグの修正や貼替えもひと手間でできます。 でも、若干、気をつける点も。 まだ使い方を知らない人は、ぜひ以下に目を通してみましょう。 図解付きなので、初心者さんでも難なくGoogleタグマネージャーの使い方をマスターできるはずです。 いろいろなタグをGoogleタグマネージャーで設定する方法もまとめてます。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 💬 𝕏（twitter）はよくフリーランスの人たちにフォローされてるようです。 Follow @websae2012 Googleタグマネージャー（GTM）とは？ GTMと表記される

ポッドキャストを週イチで配信しているのですが、編集にはAdobe Auditionというソフトを使っています。 正直機能が多すぎて使いこなせていないのですが、自分なりの使い方をまとめておきます。 ※素人なのでもっといいやり方はあると思います。 覚えるべきショートカットは３つだけ基本的に「T」「V」「R」の３つだけを使っています。 T：ドラッグするとタイムラインを選択できます。空白カットとかに使います(後述) V：選択/移動ができます。 R：1回押すと選択中のトラックを分割、もう一度押すとすべてのトラックを分割。分割するにはクリック。 やることは「コンプレッサー」「空白カット」「ノイズ除去」の３つだけ基本的には、この3つだけでやってあとはBGMをつけるなりすればOKです。 では、早速見ていきましょう。 コンプレッサー大きすぎる音を自動で小さくするために使います。 ※小さい音を大きくするのは諦

「ほったらかしで、デザインの作成が完了」 「配色に悩んだときの救世主」 「時間のかかっていたデザイン作業が一瞬で終了」 そんな噓のようなツールが、AIの進化によって日々、世界中で公開されています。 このまとめでは「これはやられた！」と思わずうなってしまう、最新オンラインツールや素材55個をご紹介。 カテゴリ別に整理しています、自分だけの神ツールを見つけてみませんか。

最近はデザインの範囲がかなり広がり、デザイン思考や、UXデザイン、そしてサービスデザインなど「見た目」だけではないデザイン領域が注目されている。 それと同時に「デザイナー」と呼ばれる人の中で基本的なビジュアルデザインに関する知識が乏しい人も少なくはなくなってきた。 しかし、いかなるデザインフィールドであったとしてもデザインの基礎知識が重要であることには変わりない。 英語のdesign, Design, DESIGN その違いを知っていますか？ そこで今回はヴィジュアルデザインの細部に関する視覚的錯覚 = 錯視に関しての11のポイントを紹介したい。 一流デザイナーはみんな知っている”錯視調整”「神は細部に宿る」と言われる通り、”良いデザイナー”と”素晴らしいデザイナー”を分けるポイントの一つに、細かい部分の作り込みが挙げられる。 デザインソフトを使って自動調整しても何故かしっくりこない時があ

こんなやり方が！フォトショップ時短テクニックや役立つヒント・裏技15個まとめ あまり知られていない、だれでも簡単な便利テクニックが集合 フォトショップをもっと使いこなしたい、と思っている人は多いでしょう。 しかし、フォトショップ経験が長くなってくると、いつも同じやり方ばかりで、新しい方法を取り入れていない、ということが結構あります。 そこでこの記事では、フォトショップを使う上で欠かせない、時短テクニックや役に立つヒント・裏技15個をご紹介します。 「こんなやり方があったのか」と思ってしまう、あまり知られていない、だれでも簡単な実用テクニックを中心にあつめました。 トーンカーブ二重使いの、直感的な写真レタッチ術 カンバスの向きをくるくる回転 ホットキーと隠しスライダーで不透明度を調整 スマートオブジェクトの調整はいつでも編集可能 選択したレイヤーのみ新規レイヤーに結合する方法 柔軟で思い通り

CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら

はじめに 今年（2022年）1月から、久々に個人でスマホアプリ配信の副業を再開してみました。 脱税（違法）は絶対ダメですが節税（合法）は限界までしたい と思っているタイプなので、以前副業でやっていた時に税関連のこと（所得税法）をそこそこ調べておいたつもりですが、かなり久々なので現行ルールの確認がてら、主にスマホアプリで副業した際の確定申告の要点をまとめてみます。 ストーリー（ポエム？）として文章を書きたかったので、グダグダと長文を書いてますが、要点は最後の「まとめ」で簡潔に書いてあります。 エンジニアとして働いている私たちには少し縁遠い「経理」に関する話題ですが、 趣味でスマホアプリを出しつつ、ついでにマネタイズしているエンジニアは多いハズ サラリーマンはどうしても確定申告と縁遠い スマホアプリで確定申告が必要な水準まで収益を上げる事は困難である（個人の場合99%以上の人は確定申告不要で、

ウェブサイトの印象を大きく左右する「動き」。 現役Webデザイナーがこれは外せない！というCSSアニメーションライブラリをまとめてご紹介。 任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。 フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。 コンテンツ目次 1. 万能CSSアニメーション 2. 文字エフェクト向け 3. ホバーエフェクト向け 4. 画像、背景向け 5. ふわふわ、ゆらゆら、面白系 6. ハンバーガーメニュー向け 7. クリエイティブなアニメーション 8. よりなめらかな動きを表現するには 9. アニメーションの参考リソース一覧 万能CSSアニメーション Animista 基本となる

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し

なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

苦手なjsから初めてjQを触ったとき、なんて記述が楽なんだろうと感動した思い出があります。 そんなノリでcssもscssという拡張言語(メタ言語)が使えたら割と楽しかったので紹介してみようと思いました。 scssとは 記述の仕方どんな？ scssは基本cssとほぼ変わりません。ただ、cssの値に変数が使えたり若干プログラミングっぽいことができます。 ちなみに出来るからといって無理に変数等使わなくても、普通のcssの記述でも動くので初心者が始めやすい記述です。 はじめるには？ はい、環境構築必要です。これが一番めんどくさいですが無料ソフトやVSCodeというエディター使ってる方はプラグイン使えばscss使うことができるようです。ブラウザのツール等でもあるそうだとか。 自分は会社の先輩に手伝って頂いてローカルで環境構築しましたが、構築の完全理解に至って無いため、今回環境構築の話は割愛します 【

ここの内容はちょっと古いので、最新版はこちらをご参照ください。 昔はこんなんだったなー、と懐かしむ目的で残しておきます！ はじめに いつの間にか「アンテク技術ブログ」が公開されていたので、ﾎｴｰ、っと眺めていたら、 cssの拡張言語scssが面白くて便利だった(初級編) という記事がありまして、SCSSへの感動が溢れかえっており心を打たれたんですけど、はじめ方が割愛されていたので、せっかくだからワイが書くかと補足記事的に書くことにしました。 SCSSって何？ もともとは中括弧大嫌いなRuby界隈で爆誕した「インデント構文で書けるCSS」である、Sassというスタイルシート言語の拡張版です。セレクタをネストさせて書けたり、変数が使えたり、mix-inという機能で関数的に記述を使いまわせたり、それは大変便利なものなのでした。（どう便利なのかは cssの拡張言語scssが面白くて便利だった(初級

Google、Spotify参入で超進化する音声メディア『ポッドキャスト』のヤバさを3つの変化から解説する 今世界的に注目され進化を遂げる音声メディアの配信方法『ポッドキャスト（Podcast）』。最近ではGoogleやSpotifyの参入でさらに盛り上がりを見せています。 私が普段オトナルという会社で音声メディアや音声広告周りで動いている中で、ポッドキャストのその優れた音声メディアとしての特徴やポテンシャルがあまり理解されてないように感じています。 そこで、今回はできるだけその特徴とここ最近の進化の具合、要するに「なにがどう変化していてヤバいのか」を解説をしていきたいと思います。 ..ということで飛躍的に進化を遂げる音声メディア『ポッドキャスト』について、最近のGAFA（FBは除く）＋Spotifyの動向もまじえて、できるだけわかりやすく説明していきます。 ※チャネル、配信手法、マネタイ

この記事では、制作を手掛けているサイズに関わらず拡大縮小できる、無料ベクターテクスチャ＆パターン素材をまとめてご紹介します。 フォトショップとイラストレーター両方に対応できるだけでなく、配色やサイズも自由に編集できる点はベクター形式の強みと言えるでしょう。 デザインの雰囲気をガラリと変える素材から、質感や細かいディテールを強調するグランジ系アイテムまで、幅広いデザイン用途に利用できます。 無料で高品質！ベクター形式のテクスチャ、パターン素材50個まとめ Modernist Abstract Vector and Pattern Set シンプルな幾何学図形を組み合わさえた、モダンなアブストラクト系ベクターパターンセット。Illustratorでお好みの配色やサイズに変更することも可能です。 Free Geometric Retro Style Pattern シンプルな幾何学パターンとレト

これまでのあらすじ 財テクを書いた後に、いままで賃貸に住んでいて、戸建かマンションを買ってみるかとなった COVID-19 の影響で在宅勤務が長期化しており、都心の 1LDK よりも、少し郊外で広い家に引っ越して、書斎というかオフィス的な空間を自宅内に用意したいと考えた 家の買い方に関する本をいろいろ買って読んでみたり、ネットの記事を読んでみたり、実際にマンションの購入手続きを進めてみたり (途中でキャンセルしたけど) 、仲介業者の紹介でファイナンシャルプランナーに相談したりした 前提 shunirr の独自研究による財テクをまとめています shunirr は、そこそこの規模の会社勤務なソフトウェアエンジニア、東京 23 区内在住、実家は田舎の賃貸で、相続できる資産とかは無い shunirr の思想・価値観によってまとめられているので異なる価値観の人には合わない可能性があります shuni

この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ

当サイトでは、Photoshopの新しい機能テクニックをつかった最新チュートリアル、作り方を定期的にまとめて紹介しています。 この記事では、2020年のあいだに公開された、特に確認しておきたいPhotoshopのデザインチュートリアル、つくり方をまとめてご紹介します。 これまで以上に便利になった新しくアップデートされたPhotoshop 2021の新機能はもちろん、ボタンひとつで完成のお手軽写真やアクション、合成テクニックなど、デザイナーが覚えておくと便利な人気のデザインスタイルのつくり方がずらり揃います。 これからPhotoshopを始めてみよう、というひとにもぴったりなテクニックを揃えています。年末の連休をつかって、新しいテクニックを習得してみてはいかがでしょう。 2020年公開のIllustratorチュートリアル、つくり方も以下の記事でまとめています。 【総まとめ】2020年公開の