【2026年7月最新】CSSのborder-radiusで要素を角丸にする方法｜指定ルール・楕円形・実務パターンを完全ガイド
aikanri-admin
この記事の内容
自社のホームページやランディングページ（LP）を見て、「なんとなく古臭い」「素人っぽい」と感じたことはないでしょうか。実はその印象の多くは、フォントや配色よりも先に「角が四角いか、丸いか」で決まっています。
ボタンの角、カードの角、画像の角。今どきのWebデザインでは、ほぼ例外なくborder-radius（ボーダーレディウス）というCSSプロパティで角を丸めています。逆に言えば、この1つのプロパティの使い方を知っているだけで、Webサイトの「見た目の完成度」は大きく変わります。
この記事では、CSSのborder-radiusについて、値の指定ルールから角ごとの細かい調整、楕円形の作り方、実務でよく使うボタン・カード・アイコンのパターンまでを、プログラミング未経験の経営者・管理職の方でも読み進められるように整理しました。あわせて、実際に自社のLP・Webサイト制作でAI（Claude Code）を使い倒している弊社（株式会社GENAI）の実運用データもご紹介します。
代表菅澤
AI鬼管理山崎
この記事を最後まで読むと、次の7つが明確になります。
01 BASICS border-radiusとは何か？全体像をつかむ なぜ「角を丸める」だけでデザイン印象が変わるのか
border-radiusは、HTML要素の四隅（角）を丸くするためのCSSプロパティです。ボタンやカード、画像、入力フォームなど、Webサイトのほぼすべてのパーツに使うことができ、指定した数値が大きいほど角の丸みが強くなります。
📚 用語解説
CSS（Cascading Style Sheets）：Webページの「見た目」を指定するための言語。HTMLが文章の構造（見出し・段落など）を作るのに対し、CSSは色・大きさ・配置・角丸などのデザインを担当します。1つのCSSファイルで、サイト全体の見た目をまとめて調整できるのが特徴です。
もともとWebサイトのボタンや枠は「角が直角の四角形」が標準でした。border-radiusが2000年代後半に主要ブラウザへ実装されて以降、画像を使わずCSSの数行だけで角丸を表現できるようになり、現在ではボタン・カード・タグ・アイコン・入力欄など、あらゆる場所で当たり前に使われる存在になっています。
1-1. なぜ「角丸」がデザイン印象を左右するのか
角が直角なデザインは硬い・堅実・フォーマルな印象を与え、角が丸いデザインは柔らかい・親しみやすい・現代的な印象を与えるといわれています。実際、金融機関のコーポレートサイトでは直角に近いデザインが好まれる一方、消費者向けのアプリやLPでは丸みを帯びたデザインが主流です。
つまりborder-radiusは単なる「装飾」ではなく、ブランドの世界観を数値でコントロールする手段です。角の丸みを4pxにするか16pxにするかで、同じレイアウト・同じ配色でも受け手の印象は大きく変わります。
一般的に、4〜8px程度は「わずかに柔らかい」印象、12〜16px程度は「はっきり丸みのある」印象、24px以上や50%指定は「ポップ・カジュアル」な印象になりやすいとされています。業種やブランドイメージに応じて数値を統一しておくと、サイト全体に一貫性が生まれます。
代表菅澤
1-2. border-radiusの基本構文
border-radiusの基本構文は非常にシンプルです。要素を丸くしたいCSSセレクタに対して、以下のように数値を指定するだけです。
| 書き方 | 意味 | 例 |
|---|---|---|
| border-radius: 数値; | 4つの角すべてに同じ丸みを付ける | border-radius: 10px; |
| border-radius: 数値%; | 要素の幅・高さに対する割合で丸みを付ける | border-radius: 50%; |
| border-radius: 数値 数値 数値 数値; | 4つの角をそれぞれ別々に指定する | border-radius: 10px 20px 40px 100px; |
| border-radius: 横 / 縦; | 楕円形の角丸を作る（スラッシュ記法） | border-radius: 80px 130px / 30px 40px; |
単位には主にpx（ピクセル）と%（パーセント）が使われます。次の章から、それぞれの指定方法を具体的に見ていきます。
02 BASIC USAGE 基本の書き方：1値指定で全部の角を丸くする もっともシンプルな指定方法から理解する
最もよく使われるのが、border-radiusに1つの数値だけを指定する方法です。この場合、4つの角すべてに同じ丸みが適用されます。
たとえば次のように書くと、要素の四隅すべてが10pxの半径で丸くなります。
📚 用語解説
ピクセル（px）：ディスプレイ上の点（画素）を単位とした長さの指定方法。「10px」であれば、画面上で10ピクセル分の長さという意味になります。border-radiusでは、この数値が角の丸みの「半径」に相当し、数値が大きいほど丸みが強くなります。
border-radiusに指定できる数値には上限がなく、要素の幅や高さより大きな値を指定した場合は、その辺の長さの半分（つまり最大限丸くなる状態）で頭打ちになります。この性質を利用すると、正方形の要素を完全な円にすることができます。
2-1. パーセント指定で「幅・高さに応じた丸み」を作る
border-radiusには%（パーセント）も指定できます。パーセント指定の場合、丸みの大きさは要素の幅と高さそれぞれに対する割合で計算されます。正方形の要素に50%を指定すると、四隅の丸みが最大限まで広がり、完全な円形になります。
プロフィール画像やアイコンを丸くしたいときは「width: 60px; height: 60px; border-radius: 50%; object-fit: cover;」のように、幅と高さをそろえた上でborder-radius: 50%を指定するのが定番です。画像の縦横比が違う場合は object-fit: cover を併用すると、比率を保ったまま円形にトリミングされます。
AI鬼管理山崎
03 PER-CORNER RULES 角ごとに指定する：4値・3値・2値のルール 複数の数値を並べるときの「順番」を正しく覚える
border-radiusは、1つの数値だけでなく最大4つの数値を空白区切りで並べることで、四隅をそれぞれ別の丸みにすることができます。この「値の並び順」がborder-radiusで一番つまずきやすいポイントなので、ここで正確に整理します。
3-1. 4値指定：時計回りに左上からスタート
4つの数値を指定した場合、順番は「左上→右上→右下→左下」の時計回りで固定されています。これはmarginやpaddingで4方向を指定するときと同じ並び順のルールで、CSSの中で共通して使われる考え方です。
左上の角
右上の角
右下の角
左下の角
たとえば「border-radius: 10px 20px 40px 100px;」と書いた場合、左上が10px、右上が20px、右下が40px、左下が100pxの丸みになります。数値がバラバラなので、いびつな形の角丸を作りたいときに使う指定方法です。
📚 用語解説
ボックスモデル：HTML要素を「内容（コンテンツ）→内側の余白（padding）→枠線（border）→外側の余白（margin）」という四角い箱の積み重ねとして扱うCSSの基本概念。border-radiusは、この箱のうち「枠線（border）」の角を丸める処理にあたります。margin・padding・border-radiusなど多くのCSSプロパティが「上→右→下→左」の時計回りで値を並べる共通ルールを持っています。
「左上から時計回り」というルールを逆に覚えてしまい、意図しない角が丸くなるケースが非エンジニアの実装で頻発します。特に4値指定でいびつな形を作る場合は、ブラウザの開発者ツールで実際の表示を確認しながら調整することを推奨します。
3-2. 3値指定：2番目の値が「右上と左下」を兼ねる
3つの数値を指定した場合は、「左上／右上と左下（共通）／右下」という並びになります。対角線上の右上と左下が同じ値になる、やや特殊な指定方法です。
| 指定例 | 左上 | 右上 | 右下 | 左下 |
|---|---|---|---|---|
| border-radius: 10px 30px 50px; | 10px | 30px | 50px | 30px |
3-3. 2値指定：対角線でペアになる
2つの数値を指定した場合は、「左上と右下（共通）／右上と左下（共通）」という対角線のペアで丸みが決まります。左右非対称ながら、上下・左右で規則性のある形を作りたいときに便利です。
| 指定例 | 左上 | 右上 | 右下 | 左下 |
|---|---|---|---|---|
| border-radius: 10px 40px; | 10px | 40px | 10px | 40px |
実務では、4値・3値・2値の指定を使う場面はそれほど多くありません。ほとんどのボタンやカードは1値指定（全部同じ丸み）で十分ですが、「吹き出し」や「タブの上側だけ丸める」といった特殊な形を作る際にこれらのルールが必要になります。
代表菅澤
04 ELLIPTICAL CORNERS 楕円形の角丸を作るスラッシュ記法 「/」で横方向と縦方向の丸みを別々に指定する
border-radiusには、より高度な指定方法としてスラッシュ（/）記法があります。これを使うと、角の丸みを「横方向の半径」と「縦方向の半径」に分けて指定でき、真円ではない楕円形の角丸を表現できます。
📚 用語解説
スラッシュ記法：border-radiusで「横方向の半径 / 縦方向の半径」を分けて指定する書き方。スラッシュより前が水平方向（横）の丸み、スラッシュより後ろが垂直方向（縦）の丸みを表します。それぞれに1〜4個の数値を並べることができ、複雑な曲線を持つ角丸を作る際に使われます。
基本の書き方は次の通りです。
| 書き方 | 意味 |
|---|---|
| border-radius: 100px / 50px; | 4つの角すべてが「横100px・縦50px」の楕円形の丸み |
| border-radius: 80px 130px 210px 30px / 110px 30px 110px 150px; | 4つの角をそれぞれ横方向・縦方向で別々に指定 |
スラッシュの前後には、これまで説明した1〜4値のルールがそれぞれ独立して適用されます。つまり「横方向は1値、縦方向は4値」のような組み合わせも可能です。組み合わせ次第で、水滴のような形や葉っぱのような形まで表現できます。
スラッシュ記法は表現の幅が広い一方、値の組み合わせが複雑になりがちです。実務では「装飾的な背景の形」「特徴的なアイキャッチ画像の枠」など、デザイン上の見せ場でピンポイントに使うのが現実的です。ボタンやカードなど繰り返し使うパーツには、シンプルな1値指定を使う方が保守しやすくなります。
AI鬼管理山崎
05 PRACTICAL PATTERNS 実務でよく使う角丸パターン集 ボタン・カード・アイコン・タブでそのまま使える指定例
ここでは、実際のWebサイト制作でよく登場する角丸パターンを、用途別に整理します。エンジニアに発注する際や、Claude Codeに実装を依頼する際の「共通言語」としても活用できます。
5-1. 角丸四角ボタン：使い勝手抜群の定番パターン
お問い合わせボタンやCTAボタンで最もよく使われるのが、やや強めの角丸四角です。ボタンの高さの半分程度の数値を指定すると、両端が完全に丸まった「カプセル型ボタン」になります。
| 指定 | 見た目の特徴 | 主な用途 |
|---|---|---|
| border-radius: 4px 〜 8px; | わずかに角が丸い、控えめな印象 | 管理画面・フォームの入力欄・業務システム |
| border-radius: 12px 〜 16px; | はっきり丸みがわかる、親しみやすい印象 | LP・コーポレートサイトのボタン・カード |
| border-radius: 999px（または50%）; | 両端が完全に丸まったカプセル型 | CTAボタン・タグ・バッジ |
5-2. カード型レイアウト：ポップな見た目を作る
料金プランの比較や、サービス紹介でよく使われるカード型レイアウトにも角丸は欠かせません。カード全体の角を12〜20px程度で丸め、影（box-shadow）と組み合わせることで、紙が浮いているような立体的な印象を演出できます。
📚 用語解説
box-shadow（ボックスシャドウ）：要素に影を付けるCSSプロパティ。border-radiusと組み合わせて使われることが多く、角丸のカードに影を付けることで「浮いている」ような立体感を出せます。角丸と影はセットで使われる場面が非常に多い組み合わせです。
5-3. アイコンと相性バッチリな丸ボタン
SNSアイコンや検索ボタンなど、正方形の要素を完全な円形にしたい場合は、幅と高さを同じ数値にそろえた上でborder-radius: 50%を指定します。この方法はプロフィール画像やアバターアイコンでも同じ考え方が使えます。
5-4. タブUI：上側だけ角を丸める
タブメニューやアコーディオンの見出し部分では、上側の2つの角だけを丸める指定がよく使われます。この場合、4値指定を使って左下・右下を0にすることで、下側は直角のまま、上側だけが丸いタブ形状を作れます。
border-radiusの4値指定の代わりに、border-top-left-radius・border-top-right-radius・border-bottom-right-radius・border-bottom-left-radiusという4つの個別プロパティを使って1つずつ指定することもできます。特定の角だけ後から上書きしたい場合に便利です。
代表菅澤
06 BROWSER SUPPORT ブラウザ対応と実装時の注意点 現在はほぼ気にしなくてよい、その理由
border-radiusは現在、主要ブラウザすべてで問題なく利用できます。Chrome・Safari・Firefox・Edgeはもちろん、古いInternet Explorer（IE9以降）でも表示されるため、対応ブラウザを理由にborder-radiusの利用を避ける必要は基本的にありません。
| ブラウザ | 対応状況 |
|---|---|
| Chrome / Edge（Chromium系） | 問題なく利用可能 |
| Safari | 問題なく利用可能 |
| Firefox | 問題なく利用可能 |
| Internet Explorer 9以降 | 利用可能（IE8以前は非対応） |
| スマートフォン向けブラウザ全般 | 問題なく利用可能 |
📚 用語解説
ベンダープレフィックス：かつて新しいCSS機能がブラウザに実装されたばかりの頃、ブラウザごとに「-webkit-」「-moz-」のような接頭辞を付けて対応していた仕組み。border-radiusも登場初期には-webkit-border-radiusのような書き方が必要でしたが、現在はすべての主要ブラウザで標準の書き方（プレフィックスなし）に対応しているため、プレフィックスを書く必要はありません。
とはいえ、実装時に注意すべき点がいくつかあります。ひとつは「子要素がはみ出す」問題です。親要素にborder-radiusで角丸を付けても、中に配置した画像や背景色付きの子要素が四角いままだと、角の部分だけ子要素が飛び出て見えてしまいます。
角丸を付けた要素の内側に画像や色付きのブロックを配置する場合は、親要素に「overflow: hidden;」を追加してください。これにより、はみ出した部分が角丸のラインで自動的に切り取られます。ボタンの中に画像を敷き詰める、カードの上部に写真を配置する、といった実装で特によく発生するミスです。
なお、<img>タグ自体に直接border-radiusを指定する場合は、この問題は発生しません。画像そのものが自分自身の枠線で丸められるため、overflow: hiddenを追加しなくても正しく角丸表示されます。overflowの考慮が必要になるのは、あくまで「角丸を付けた親要素の中に、はみ出す可能性のある子要素を配置する」ケースに限られます。
07 COMMON MISTAKES 【独自】非エンジニアがつまずきやすい5つのミス 弊社の制作・導入支援の現場で実際によく見る失敗パターン
ここからは、元記事にはない独自パートです。弊社（株式会社GENAI）がLP・コーポレートサイト制作やお客様の導入支援を行う中で、非エンジニアの方がborder-radius周りで実際につまずいたポイントを5つに整理しました。
7-1. ミス1：単位を付け忘れる
「border-radius: 10;」のように単位（pxや%）を付け忘れるミスは非常によく起こります。CSSでは数値の後ろに単位が必須のプロパティがほとんどで、border-radiusも例外ではありません。単位が抜けていると、そのプロパティ自体が無効になり、角丸が一切反映されません。
7-2. ミス2：親要素と子要素の両方に別々の角丸を指定して食い違う
カードの外枠と、その中の画像の両方にそれぞれ違う数値のborder-radiusを指定してしまい、角の丸みが二重に見えてズレるケースです。親子関係にある要素の角丸は、できるだけ同じ数値、または子要素側をやや小さめの数値に統一すると、境界線が綺麗にそろいます。
7-3. ミス3：スマホ表示で角丸が消えたように見える
要素の幅がスマートフォンで極端に狭くなった結果、指定していたpx数値の角丸が相対的に目立たなくなるケースです。パソコンでは綺麗に見えていた角丸が、スマホでは直角に近く見えてしまいます。レスポンシブ対応（画面幅に応じたレイアウト調整）まで含めて確認することが重要です。
7-4. ミス4：angular要素にborder-radiusを付けても背景が四角いまま
要素に背景画像を指定している場合、border-radiusで角を丸めても背景画像自体は四角いまま角からはみ出すことがあります。これは前章で触れた「overflow: hidden」の設定漏れが原因であるケースがほとんどです。
7-5. ミス5：デザインツールの数値をそのままコピーして統一感が崩れる
Figmaなどのデザインツールから角丸の数値を一つひとつコピーして実装した結果、ページごとに8px・10px・12pxとバラバラの角丸になってしまうケースです。角丸の数値は、ボタン用・カード用・タグ用のように用途ごとに3〜4パターンへ統一しておくと、サイト全体の一貫性が保たれます。
AI鬼管理山崎
08 GENAI CASE DATA 【独自データ】GENAI社内のLP・Web制作でのAI活用実態 border-radiusのような細かいCSS調整を、弊社は誰がどう行っているか
ここでは、弊社（株式会社GENAI）が実際にLP・コーポレートサイト・ブログ記事のCSS調整をどのように行っているかを、実データベースで公開します。「非エンジニアの会社が、こうした細かいコーディング作業をどう回しているか」の参考としてご覧ください。
8-1. 弊社の契約プランと導入範囲
| 項目 | 内容 |
|---|---|
| 契約プラン | Claude Max 20x（月額$200 / 約30,000円） |
| 利用開始 | 2025年後半〜 |
| 利用部署 | 経営・営業・広告・開発（Web制作含む）・経理・秘書業務・個人業務まで全社 |
| CSS・LP制作の主な担当 | 専任のフロントエンドエンジニアではなく、Claude Codeが実装を担当 |
弊社では、border-radiusのような個別のCSSプロパティを人間が逐一調べて書くのではなく、「ボタンをもう少し丸くしたい」「カードの角を統一して」といった日本語の指示をClaude Codeに渡し、実装させる運用を徹底しています。専任のコーダーを雇わずとも、LPやコーポレートサイトの細かい調整を継続的に回せているのが実情です。
8-2. 業務領域別の削減効果（肌感ベース・2026年7月時点）
| 業務領域 | 主な用途 | 概算削減効果 |
|---|---|---|
| 開発（Web制作） | WordPress/HTML/LP制作、CSS調整、スクリプト書き捨て | 都度数時間の削減 |
| ブログ記事 | SEO記事執筆・リライト・内部リンク最適化 | 1本8時間 → 1本1時間 |
| 営業 | 提案書・見積・顧客別資料の自動生成 | 週20時間 → 週2時間 |
| 広告運用 | 週次レポート・CPA分析・配信内容調整 | 週10時間 → 週1時間 |
上記は弊社の肌感ベースの数値であり、業種・業態・担当者のスキルによって削減時間は変動します。「完全自動化」ではなく、あくまで人間のレビュー・微調整を残した上での概算値としてご覧ください。
8-3. CSS調整をAIに任せるまでの4ステップ
弊社でCSS・デザイン調整をClaude Codeに任せるまでの流れを図解すると、以下の4ステップになります。
修正したい箇所を
スクリーンショットで共有
「もう少し丸く」
など日本語で指示
Claude Codeが
該当CSSを自動修正
画面で見た目を確認し
OKなら公開
この流れの中で、border-radiusの数値をいくつにするか・スラッシュ記法を使うかといった技術的な判断は基本的にAI側に任せています。人間側が担当するのは「見た目がブランドイメージに合っているか」を判断する最終確認だけです。
代表菅澤
09 DECISION CRITERIA 自分で書くべきか、Claude Codeに任せるべきかの判断基準 「知っておくべきこと」と「手を動かさなくていいこと」を切り分ける
ここまでborder-radiusの仕組みを詳しく解説してきましたが、最後に本質的な問いに向き合います。「非エンジニアの経営者が、ここまで詳しくCSSを理解する必要は本当にあるのか？」という点です。
結論から言うと、「仕組みを理解すること」と「実際に手を動かしてコードを書くこと」は分けて考えるべきです。仕組みを理解していれば、外注先やAIへの指示が的確になり、成果物の良し悪しを判断できます。一方、実際の入力作業自体は、今の時代であれば人間よりAIの方が速く正確です。
9-1. 自分で理解しておくべきこと
9-2. Claude Codeに任せて問題ないこと
弊社（株式会社GENAI）では、この考え方に基づいてClaude Max 20xプラン（月額約30,000円）を全社契約し、Web制作を含むあらゆる業務でAIを活用しています。専任のフロントエンドエンジニアを1人雇う人件費（月20〜30万円台が相場）と比較すると、月3万円のAI投資は圧倒的にコスト効率が高いというのが実感値です。
AI鬼管理山崎
自社サイトの各ページを開いて、ボタン・カード・アイコンの角丸の数値がどれだけバラバラになっているか確認してみてください。統一されていない箇所が見つかったら、それこそがClaude Codeに最初に任せるのにちょうど良い、小さな改善タスクです。
10 CONCLUSION まとめ ── 角丸ひとつで伝わる「作り込みの丁寧さ」 border-radiusは小さなプロパティだが、積み重ねがブランドを作る
この記事では、CSSのborder-radiusについて、基本構文から角ごとの指定ルール、楕円形の作り方、実務パターン、ブラウザ対応、非エンジニアがつまずきやすいミス、そして弊社GENAIの実運用データまでを整理しました。最後にポイントを振り返ります。
最も伝えたいメッセージは、「border-radiusを覚えること」がゴールではないということです。角丸という小さな要素の積み重ねが、サイト全体の「作り込みの丁寧さ」としてユーザーに伝わり、それが会社への信頼感につながります。仕組みを理解した上で、実装そのものはAIに任せる——この記事がその判断の一助になれば幸いです。
代表菅澤
サイトの細かい作り込みも、Claude Codeでまとめて解決できます
border-radiusのような1つ1つのCSSプロパティを覚えるより、
「どこに何を任せるか」を仕組み化する方が、経営者にとっての本当の投資対効果です。
AI鬼管理山崎
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
AI活用を自社で回せるようになりたい方へ
AI鬼管理
Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。
よくある質問
Q. border-radiusにマイナス（負の値）を指定できますか？
A. できません。border-radiusの仕様上、負の値は無効な値として扱われます。マイナスの数値を指定した場合、そのプロパティ自体が無視され、角丸が反映されない（角が直角のままになる）状態になります。凹んだような形を作りたい場合は、border-radius以外のCSSテクニック（clip-pathなど）を検討する必要があります。
Q. 正方形ではない長方形の要素を完全な円にすることはできますか？
A. border-radiusだけでは、長方形の要素をそのまま完全な円にすることはできません。border-radius: 50%を指定すると、幅と高さがそれぞれ独立して計算されるため、長方形の場合は楕円形になります。完全な円が必要な場合は、まずwidthとheightを同じ数値にそろえた上で50%を指定してください。
Q. 要素の幅や高さより大きい数値をborder-radiusに指定するとどうなりますか？
A. エラーにはならず、その辺の長さの半分（つまり丸みが最大限になる状態）で自動的に頭打ちになります。たとえば幅100pxの要素にborder-radius: 200pxを指定しても、実際の見た目は幅100pxで作れる最大の丸み（50px相当）で止まります。極端に大きな数値を入れて「とにかく丸くする」という書き方も実務ではよく使われます。
Q. border-radiusは古いInternet Explorerでも使えますか？
A. Internet Explorer 9以降であれば問題なく利用できます。IE8以前は非対応ですが、2026年現在の実務でIE8以前のサポートが必要になるケースはほぼありません。Chrome・Safari・Firefox・Edgeなど、現在使われている主要ブラウザではすべて標準の書き方（ベンダープレフィックスなし）で動作します。
Q. 画像（imgタグ）に直接border-radiusを指定しても効果はありますか？
A. はい、効果があります。imgタグはCSSの通常の要素と同様にborder-radiusを適用でき、画像自体の四隅が指定した半径で丸くトリミングされます。親要素にoverflow: hiddenを設定しなくても、画像単体に指定するだけで正しく角丸表示されるため、アイコンやサムネイル画像を丸くする際によく使われる方法です。
Q. TailwindCSSやBootstrapのようなCSSフレームワークでもborder-radiusは使えますか？
A. はい、多くのCSSフレームワークはborder-radiusをクラス名として簡単に呼び出せる仕組みを用意しています。例えばTailwind CSSでは「rounded」「rounded-lg」「rounded-full」のようなクラス、Bootstrapでは「rounded」「rounded-circle」のようなクラスを付けるだけで、内部的にborder-radiusが適用される設計になっています。素のCSSを書かずに角丸を表現したい場合に便利です。
Q. スマートフォンでもborder-radiusはきちんと角丸で表示されますか？
A. はい、スマートフォン向けのブラウザでも問題なく表示されます。ただし、画面幅が狭くなることで要素自体のサイズが縮小され、指定していたpx数値の丸みが相対的に目立ちにくくなることがあります。レスポンシブデザインを意識するなら、画面幅に応じて角丸の数値も調整する、あるいは%指定を活用するといった工夫が有効です。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
Claude Code を業務に落とし込む
専門研修コース一覧
受講者本人の業務を題材に、「使いこなせる」状態になるまで伴走する研修プログラム。1対1特化型・ハンズオン・法人講座の3コースを展開中。業務特化・実装まで踏み込むタイプのClaude Code研修です。
研修コース一覧を見る →AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
