タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！
@importとは@importとは分割されたSassファイルを読み込み機能です。 このようにファイル内が分割されていても、@includeで一つのSCSSファイルに統合して、まとめてcssファイルにコンパイルすることができます。 @importの廃止予定時期便利な@importですが、公式で廃止予定であることが明言されています。 （日本語訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後、いずれか早い方（遅くとも2021年10月1日）に、@importと、モジュールを介して行われる可能性のあるグローバルなコアライブラリ関数の呼び出しを非推奨にします。 この非推奨措置が実施されてから1年後（遅くとも2022年10月1日）には、@importとほとんどのグローバル関数のサ
2024.01.05 2024.08.04 Webデザイン 【2024年版】レスポンシブデザインのブレイクポイントまとめ！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 今回はレスポンシブデザインのブレイクポイントについてまとめました。 ポイントを決める際の考え方も含めて、順を追って解説していきます。 また、単位の使い分けについてはこちらの記事でまとめていますので、よかったらご覧ください。
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） コンテンツが横方向に自動で流れ続けるスライドショー、と言われてイメージ湧きますでしょうか？ コンベアスライドショーともいいますが、今回はそちらをCSSのみで実装する方法をまとめました。 ECサイトなどで見かけることもありますし、iPhoneの方はApp Storeの中にこのスライドの動きがあるので見てみてください。 デモサイトも用意しているのでこちらもご確認ください。
2024.01.05 2024.07.15 Webデザイン 【2024年最新版】無料で使える最強のNotionテンプレート10選！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 Notionを使ってみたいけど、何から始めたら良いかわからない…という方は、多いのではないでしょうか。 実は、Notionにはたくさんのテンプレートが存在しており、目的にあったテンプレートを使うだけで、Notionを使いこなせるようになります！ また、私自身フリーランスのWebデザイナーとして、案件の進捗やTo Do listなどでNotionを使
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はモーダルウィンドウをプラグイン無しで作成する方法をまとめます！ モーダルウィンドウはWebサイトによく使われるUIですが、意外に実装が難しいんですよね。 同ページ内に複数モーダルを設置する方法まで、基礎的な内容は解説していますので、不安な方は是非参考にしていただけると嬉しいです！ モーダルウィンドウ とはモーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことである。 モーダルウィ
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はWeb制作、Webデザインで使用すると作業が捗るchrome拡張機能を紹介します。 開発環境がしやくなる拡張機能がたくさんあるChromeですが、たくさんあってどれを選べばいいか分からないと悩んでる方もいるかと思います。 今回紹介するものは僕が実際に使用しているものの中から、自分的に便利だと感じたポイントを絞ってお伝えしているので参考になるのでは無いかと思います！ 新しい情報が入り次第どんどん更新していってますので、定期的にチェッ
2024.01.06 2024.07.16 Webデザイン 【最新版】XDおすすめプラグイン22選！【これだけ入れておけばOKです】 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 そんなお悩みをお持ちのデザイン初学者さん必見です。 迷ってしまう気持ちはよくわかりますが、実は最低限入れておくべきプラグインは限られています。 この記事では厳選した22個のプラグインを使い方とともにご紹介！ デザインだけでなくコーディングに役に立つプラグインもあるので、コーダーを目指す方にもぜひ読んでいただきたいです。 すべてを入れる必要はないで
いつもclassの名前をどうするかで悩むどこにどんなclassを付けたか忘れてしまい、コーディングに時間がかかるclassの命名に必要な英語がパッと浮かばない class命名規則のポイント主なポイントclass名を見たらどこの何かがわかるまずclass名を付けるときに注意したいのが、class名を見ただけでどの部分の何に対して指定しているのかある程度検討がつくということです。 特にコーディングを学び始めて間もない方はナンバリングをするだけだったり、何の脈絡もない名前を付けてしまったりして、修正が必要になったときに見返すと「何が何だかわからない状態」になってしまう人もいたりします。 そんな悲劇はもうたくさんです。class名を見れば「だいたいこの辺かな？」とアタリが付けられるようにしましょう。その術を以降で伝えていきます。 ある程度の規則性があるコードの品質が高いレベルで必要な場合は「厳格な
話題のプロジェクト管理ツール”Notion”。 はじめこそクリエイティブな仕事をしている方達の利用が目立っていましたが、最近は業種や職種関係なく利用者が増えており、個人だけでなく企業の業務管理ツールとして採用されるケースも徐々に目立ってきています。 その一方で、 といった悩みや疑問が多いのも事実。 この記事では、興味はあるけど使い方がイマイチわからない方に向けて、Notionの基本的な使い方を徹底的にまとめています。 読み終える頃には、仕事もプライベートもWEB上（Notion上）で一元管理ができる「自分流ノート」が作れるようになります！ ぜひ、最後まで読んでみてください！ NotionとはNotion（ノーション）とは、メモの作成、タスク管理、データ管理・共有など、さまざまな情報を一元管理できるツールで、CMS（コンテンツ管理システム）と呼ばれるものの中の1つです。 2018年にリリース
【最新版】パララックス効果は「simpleParallax」で決まり！使い方をわかりやすく解説！ - 株式会社PENGIN
2022.09.14 2024.07.15 Webデザイン 【最新版】パララックス効果は「simpleParallax」で決まり！使い方をわかりやすく解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 そんな方におすすめなのがJavaScriptライブラリの「simpleParallax」です。 JavaScriptを使いますが、仕組みが理解できればカンタンにカスタマイズできるため、Webサイト制作で重宝すると思います。 CSSで実装するよりもsimpleParallaxを使うほうが実はカンタンだったり… その理由は当記
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） コーディングで仕事をするには、デザインツールで作成されたデザインカンプからのコーディング能力が必要です。 その中でも特にXDは操作性が高く人気なので、XDからコーディングできる力は必須といっていいでしょう。 この記事では、XDからコーディングするために必要なテクニックを解説しています。 僕がコーディング代行などの実務を通して感じた重要ポイントもふまえてまとめているので、記事を読み終えると実践を想定した知識が身に付きますよ！ AdobeX
この記事を書いた人 PENGIN LLC.PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。 最近話題のFigmaのプラグイン「HTML To Figma」の使用方法をまとめました！！ 「HTML To Figma」とは、URLを入れるだけで勝手にトレースをしてくれる最強のプラグインです。 僕自身このプラグインを活用してデザインの制作時間が大幅に削減されました！ それでは早速解説していきます♪ HTML To FigmaとはHTML To Figmaとは、Figmaで使用できるプラグインです。 このプラグインは、ウェブサイトのURLを貼り付ける
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ）
この記事を書いた人 PENGIN LLC.PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。
粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 Webサイトを作成するうえで「アコーディオンメニュー」という汎用的なUIパーツがありますが、jQueryを活用して実装するケースが多いです。 基礎的なメソッドを知っておけば簡単に作ることができるので、この記事ではアコーディオンメニューの簡単な実装方法をコード付きで解説します。 記事を読み終えると、アコーディオンメニューの実装方法が一通り理解でき、使い回しできるコードを知ることができますよ！ jQueryでアコーディオンメニューを作ろう アコーディオンメニューとは アコーディオン
【最新版】GitHub Desktopとは？インストールから具体的な使い方までわかりやすく徹底解説！ - 株式会社PENGIN
2023.12.29 2024.07.15 Webデザイン 【最新版】GitHub Desktopとは？インストールから具体的な使い方までわかりやすく徹底解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 Git初心者の方は特に、コマンド操作に抵抗を感じている方も多く、なかなか一歩が踏み出せないんじゃないでしょうか？ そんな方には視覚的に操作できるGUIツールがおすすめです！ いくつかあるGUIツールの中でも、今回はGitHub公式のGitHub Desktopについてご紹介します。 インストール方法から使用方法までキャ
この記事を書いた人 よっしー大阪出身、関東在住の26歳。宇宙とアニメが好き。未経験からWebデザイナーになりました。現在はフリーランスとして活動中。 今話題のタスク管理ツール、Notion。 興味はあるし使ってみたいけど、「使いこなせるかわからない…」と不安を感じていませんか？ Notionは多機能すぎて慣れるまでに時間がかかりますが、他のタスク管理ツールには戻れなくらい快適なタスク管理を行うことができるんです！ 私自身、タスク管理をNotionに切り替えてから、Webデザイナーとしての仕事を効率よくこなせるようになりました。 今回の記事では、実際に私がWebデザイナーとしてどのようにNotionを使用しているか、実際の活用方法を交えながらNotionのタスク管理術をご紹介します。 基本的なタスク管理方法をお伝えするので、ぜひご自身のNotionも一緒に操作しながら、記事を読んでみてくださ
2024.01.05 2024.08.04 Webデザイン 【VSCode×GitHub】使い方から連携手順まで完全解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 Gitを学ぶには時間と労力がかかりますし、最適な連携方法（できれば簡単なやり方）を模索して当記事に辿り着いた方もいるかもしれません。 普段使ってるコードエディタ・VSCodeで簡単にGitHubが使えたら便利だと思いませんか？？ そんな方に向けて、この記事ではVSCodeからGitHubに連携する手順についてまとめてみました！ 初期設定から具体的な連携操作
この記事を書いた人 PENGIN LLC.PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。
VSCodeプラグイン【DartJS Sass Compiler and Sass Watcher】でSassを使ってみよう！ - PENGIN BLOG
VSCodeプラグイン【DartJS Sass Compiler and Sass Watcher】でSassを使ってみよう！ この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ）
この記事を書いた人 PENGIN LLC.PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。 コーディング学習を始めたての時に、覚えることが多すぎてどうしたら良いかわからなくなってしまった経験ありませんか？ 頑張ってメモ取りながら学習をして行くけどなかなか進まず、どんどんモチベーションが下がってしまうという現象はコーディングを学習している人のほとんどが経験することです。 そのため今回は、実際のコーディングでよく使用するHTMLタグだけを集めてそれぞれの活用例をまとめました。 この記事を読むことで頻出のHTMLタグを抑えることができ、爆速でコーデ
この記事を書いた人 PENGIN LLC.PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。 デザインには根拠が必要とは言いますが「何をどう勉強したら根拠のあるデザインができるようになるの？」っていう方はきっと多いですよね。デザインを学習している誰もが一度はぶち当たる問題だと思います。 この記事では、根拠のあるデザインを作れるようになるためには、どんなことをどうやって学習すれば良いのかを僕の経験を踏まえて紹介していきます。上記の問題にぶち当たっている方は参考にしてみてください！ 根拠のあるデザインを提案できるようになる学習ステップ根拠のあるデザ
粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 今回はカード型（タイル型）レイアウトの作り方についてまとめました。 汎用的なWebデザインの一つですが、メディアクエリでカラム（縦方向の表示数）を変える時や、WordPresの記事一覧のようにカードの表示枚数が変動するサイトの場合を考慮したら意外と難しいデザインだったりします。 いくつか実装方法はありますが、この記事で紹介するのはnth系の擬似クラスやcss gridプロパティを使わない、初学者の方でも簡単に取り入れられる方法となっています。
この記事を書いた人 PENGIN LLC.PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。
2024.01.06 2024.07.15 Webデザイン 【最新版】jsスライダーライブラリ「Splide」の使い方を徹底解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） そんな時1箇所ずつ書き換えていませんか？？コーダーだったらメンテナンス性の高いCSSを書きたいところ。 とはいえ、コードが長くなるほど入力間違いは増えやすくなり、修整も大変になります。 そんな時に使える機能が「CSS変数（カスタムプロパティ）」です。 SassなどのCSSプリプロセッサを使わず、CSSの一括管理ができる便利な機能。 当記事ではCSS変数の基礎から使い方まで解説するので、一歩進んだコーディング知識を身につけたい方はチェック
2024.01.05 2024.07.15 Webデザイン 【2024年最新版】Swiperの使い方やカスタマイズ方法をわかりやすく解説します 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 プログラミングの勉強を始めたばかりの方でも、本記事で解説するSwiperを使えばカンタンにスライダーを作成できます。 本記事では、導入方法から各オプション・実装時のトラブルシューティングまで網羅的に解説しています。 記事を読み終えると、Swiperの使い方を一通り理解でき、色々なスライダーを作れるようになりますよ！ また、jQueryで
スマホにおける:hoverは、タップした要素に装飾があたった後、別の要素に「タップされた」と判定されるまで装飾が残ります。 :hoverで指定したものは、タップして指を離した後も設定した装飾が残り続けることになるのでデザイン的・ユーザビリティ的にもあまりよくありません。 これでいくと、タッチ端末でタップする瞬間の装飾をしたいなら、:hoverではなく:activeの方が近いということになります。 では、PCではhover、スマホ・タブレットではactiveと切り分けて、同じスタイルをそれぞれ指定すればいい、という考えもできますがなかなかスッキリしませんよね。 そもそもタッチ端末ではユーザーの動作に反応する装飾は行わない、というのも選択肢としてはありだと思いますが、今回はそこも含めてどう制御するかという観点でまとめていきます。 端末・ブラウザによる挙動の違い ios特有のものなのか、特にsa
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2023年】Web制作で使えるVSCodeオススメ拡張機能17選！ - PENGIN BLOG
【最新】SCSSの@importは廃止に！？@useとの違いについて解説！ - PENGIN BLOG
【2024年版】レスポンシブデザインのブレイクポイントまとめ！ - 株式会社PENGIN
【CSSのみ】横方向に流れ続ける無限スライドショーの作り方を徹底解説 - PENGIN BLOG
【2024年最新版】無料で使える最強のNotionテンプレート10選！ - 株式会社PENGIN
【jQuery】モーダルウィンドウの作り方を解説（コピペ可） - PENGIN BLOG
【2023年】Web制作に使えるchrome拡張機能おすすめ19選 - PENGIN BLOG
【最新版】XDおすすめプラグイン22選！【これだけ入れておけばOKです】 - 株式会社PENGIN
【初学者必見】HTMLにつけるclass名(クラス名)の命名規則の考え方を徹底解説！ - PENGIN BLOG
【初心者でもわかる】Notionの基本的な使い方を徹底解説！【最新】 - PENGIN BLOG
【保存版】AdobeXDからのコーディング方法を徹底解説！【初心者必見】 - PENGIN BLOG
【webデザイナー必見】Figma最強プラグイン「HTML To Figma」の使い方 - PENGIN BLOG
【デザインカンプ配布サイトまとめ】ポートフォリオ掲載OK（無料有） - PENGIN BLOG
【これだけ覚えて！】jQueryの書き方（js学習ステップ第三弾） - PENGIN BLOG
jQueryでアコーディオンメニューをサクッと作ろう【コピペOK】 - 株式会社PENGIN
【簡単】Notionでタスク管理！Webデザイナーのオススメ管理術を紹介！ - PENGIN BLOG
【VSCode×GitHub】使い方から連携手順まで完全解説！ - 株式会社PENGIN
【コピペOK】ハンバーガーメニューの作り方（js学習ステップ第四弾） - PENGIN BLOG
【チートシート付き】コーディングで頻出のHTMLタグをまとめました - PENGIN BLOG
根拠のあるデザイン学習方法解説！オススメ書籍も紹介！ - PENGIN BLOG
【HTML＆CSS】カード型レイアウト（モジュール）のコーディング方法 - 株式会社PENGIN
【コーディング課題】XDからコーディングをしよう【初級編】 - PENGIN BLOG
【最新版】jsスライダーライブラリ「Splide」の使い方を徹底解説！ - 株式会社PENGIN
【超便利】CSS変数って知ってる？使いこなしてコーディングを効率化しよう！ - PENGIN BLOG
【2024年最新版】Swiperの使い方やカスタマイズ方法をわかりやすく解説します - 株式会社PENGIN
スマホのhover対策を解説！（PCと同じCSS効果を実現） - 株式会社PENGIN
www.wwdjapan.com
suzumesama.hatenablog.com
x.com
zenn.dev/shiguredo
www.youtube.com
kingkuri.com