プログラミングのためのBGMや環境音など。仕事や勉強の邪魔にならない無料で使えそうな音源集。2024年版 在宅で仕事や勉強をしている時間が増えてくると、ずっと無音だと寂しい気がして、できればあまり気にならないBGMや環境音があるといいなあ、と思ったことはありませんか？ 昨年、そうした音源集を記事として紹介しましたが、1年が過ぎると紹介した音源の多くが配信を終了したりURLが変わったりしています。そこで、現在配信中の音源にアップデートしつつ、昨年の記事のコメントやブックマークで教えていただいた読者のお気に入りの音源なども加えた音源集まとめの2024年版を作りました。 記事の前半は音楽、後半は環境音を中心に紹介します。紹介した音源のほとんどは無料で聴けるものにしましたので、仕事や勉強に気軽に役立てていただければ幸いです。 作業用BGMの定番としてのLoFiチャンネル 今回も、まずはBGMの定番
日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを おすすめ度 サイト内検索の可否 いいね/保存機能の有無 ランキング機能の有無 掲載サイト数 を基準にランクづけし、おすすめできるサイト順に載せているので忙しいという方は、とりあえず上から順にチェックしていただければ大丈夫です！みなさんのデザイン制作に活かしていただけると嬉しいです。 【全サイト徹底比較】超参考になるおすすめギャラリーサイトTOP38 ちょう
VSCodeで生産性を上げる
はじめに こんなツイートを見て執筆をしようと思いました。 実際に、VSCodeは機能の追加や拡張機能の開発が活発に行われており、かつUIもユーザーフレンドリーであるため人気のエディターだと思います。VSCodeを使いこなせるのとそうでないのではエンジニアリングの生産性に大きな差が出てしまうと思います。 パンくずの設定 '>' を入力します。 '>' preferences: Open User Settings (JSON)を入力します。 僕のsettings.jsonは以下です。 { "workbench.colorTheme": "GitHub Dark", "terminal.integrated.fontFamily": "MesloLGM Nerd Font", "terminal.integrated.profiles.osx": { "fish": { "path": "/o
2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO
初めてAWSのサーバレスサービスを学習するときに利用できる「基本的なェブアプリケーションを構築する」の内容を2024年現在でも実行できる手順にしてみました こんにちは、臼田です。 みなさん、AWSのチュートリアル活用してますか？(挨拶 今回はAWSの初心者向けハンズオンコンテンツである基本的なウェブアプリケーションを構築するを2024年の現在版の手順としてまとめてみました。 このコンテンツはAWSのサーバレスなサービスを利用して、簡単にウェブアプリケーションを作成する体験ができるチュートリアルとなっており、登場するAWSの各サービスを理解するのにちょうどよい内容でした。しかし、リリースされてしばらく経っているのもあり、特に今回のAmplify Gen2リリースもあってだいぶ画面や操作方法などが変わってしまいました。 実現できる事自体は変わらないので、現時点でこのチュートリアルを初心者でも完
![2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/89d69da1ff63f03a6134b1ba08325495afbaf56e/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2024%2F06%2F000_basic_web_app.png)
無料ダウンロードOK、おすすめのフリーフォント総まとめ
このメディアを運営している日本デザインスクールでは、毎月120名ほどの受講生にデザインの指導をおこなっています。 WEBデザインを教えている中でよくあがってくるのが 「フォントって、奥が深すぎる……」 「けっきょく、どのフォントを使えばいいかわからん…」 という声。 その気持ち、めちゃくちゃわかります。 最近はCanvaなど無料のツールでも簡単にデザインが作れるようになりましたよね。 デザインのテンプレートが使えてすごく便利ですが、フォントの選び方がわからず、何度も何度もフォントを変えていた経験が私にもあります。 そこで今回は、プロのWEBデザイナーもよく使っているおすすめのフォントをジャンル別に33個まとめてみました。 ほぼ全て無料（※）でダウンロードできるフリーフォントなので、気になるフォントがあればぜひ使ってみてくださいね。 ※第一章でお伝えしている「おすすめの見やすいフォントTOP
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。 たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。 しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。 そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。 しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。 このリストはこんな人におすすめ デザインのアクセントになる「あしらい」をさくっと作りたい どのプラグインを使えばよいか迷っている まわり
AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations
簡単にCSSアニメーションのコードを生成できるAIツールが登場しました。テキストや音声でプロンプトを入力するだけで、複雑なCSSアニメーションでも数秒でコードが生成されます。 生成されたCSSアニメーションはその場ですぐ...記事の続きを読む
2024/06/19 Findy主催イベント「鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック 」で公開した資料です。 https://findy.connpass.com/event/318569/ デモのURLなどはこちらのURLからアクセスできます。 https://tonkotsuboy.github.io/20240619-findy-css/
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
全力で爆速にするAstro.js
注意 この記事は、私が2024年4月頃に書いた記事の再編集です。情報が多少古い、もしくは検証しきれていない箇所がありますがご了承ください。 はじめに 皆さんはよくAstroでWeb制作をすると思います(圧)。 Astroでサイトを作ると特に対策せずとも爆速なサイトが出来上がりますが、それだけでは物足りずちゃんと対策して高速化を図る記事です。 すっごーい簡単な内容なのでご承知ください。 Lighthouse 実際にページのパフォーマンスを計測するにはよくLighthouseを使います。このサービスはGoogleがオープンソースで開発しているページインサイトツールです。馴染み深いですね。 これでサイトの計測をしている人が一番多いんじゃないでしょうか。 Chrome拡張機能をいれることで、オフライン環境であってもlocalhostサイトの計測ができます。 すでに公開済みのページなどでテストする場
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プログラミングのためのBGMや環境音など。仕事や勉強の邪魔にならない無料で使えそうな音源集。2024年版
私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。
Figmaのデザイン制作が楽になる時短プラグイン30選
鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み