CSSでスマホ対応！レスポンシブサイトの作り方と初心者向けQ&A

2024年3月16日

侍エンジニア編集部

こんにちは！　Webサイト制作ならお任せあれライター、ナナミです。

みなさんこのブログを何で見ていますか？　パソコン、タブレット、スマホ……人によって様々だと思います。最近はスマホは持ってるけどパソコンは使えないという人も増えてきています。

それならばスマホでも綺麗で見やすいデザインにしたいですよね。そんな時に役立つのが「レスポンシブ」という方法です。

じゃどうやってスマホに対応すればいいんだろう……

レスポンシブ対応がいいと聞いたけど、それってなに？

そんな疑問をお持ちの人も多いと思います。

それにお答えするためにこの記事では、

レスポンシブとは一体なんなのか
どうやったら使えるのか
使うときのポイントやコピペで使えるコード

などなど、レスポンシブについて盛りだくさんで解説していきます！

これを読めばレスポンシブ対応の基礎はバッチリ。自分のWebサイトをスマホでどんな風に見せたいかを考えながらお読みいただければ幸いです。

この記事の要約

レスポンシブはデバイスに合わせデザインを表示する手法
デバイスごとに表示サイズや画面幅などの設定が必要
レスポンシブ対応を行うとWebサイトが修正・更新しやすくなる

なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。

受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。

＼オンラインで相談可能／

公式サイトで詳細を見る

本記事の解説内容に関する補足事項

本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」、を運営する株式会社SAMURAIが制作しています。

また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。

記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。

スマホ対応に便利な「レスポンシブ」とは？

「レスポンシブ」とは、画面の幅に合わせてCSSを切り替えることにより、様々な大きさの機器に合わせたレイアウトを実現する方法です。

パソコンの画面の幅とスマホの画面の幅を比較すると、明らかにスマホの画面の方が小さいですよね。

つまり「スマホの画面幅より小さかったらこのレイアウトにする」という書き方をすることで、同じHTMLファイルなのにパソコンで見てもスマホで見ても綺麗なレイアウトにすることができるのです。

レスポンシブのメリット

同じHTMLファイルを使うので、1回の更新でパソコン版もスマホ版も同時に更新できる
パソコン版とスマホ版でURLを分ける必要がない
比較的簡単
Googleからの評価が得られる

レスポンシブのデメリット

CSSがちょっと煩雑になる
レイアウトが複雑だと作業に時間がかかる
スマホを意識したデザインが必要なので、パソコン版のデザインの自由度が若干下がる

手間がかかるなどのデメリットはありますが、それ以上にメリットが大きいですね！

特に長い期間運営するWebサイトならば、最初からレスポンシブにしてしまった方が後々がグッと楽になります。

レスポンシブ化にまつわる専門用語解説

レスポンシブを知る上で頻出する専門用語がいくつかあるので、サクッと紹介しちゃいましょう！

viewport

まず必要なのは、「機器がパソコンではない時どのように画面を表示するか」をHTMLで指定するコードのことです。レスポンシブにしたいHTMLファイルのheadタグ内に記述し、細かく設定をすることができます。

これがないと、スマホで表示した時にパソコン版のサイトをただギュッと縮小しただけの表示になってしまいます。必ず入れるようにしましょう。

まあレスポンシブの場合はお決まりのコードがあるので、「レスポンシブにする時必ず書かなければいけないもの」程度に覚えておけばOKです。

ブレークポイント

CSSを切り替えるポイントになる幅のことです。例えば「画面幅が440px以下の時に切り替える」ならば、「ブレークポイントは440px」ということになります。

メディアクエリ

ブレークポイントを指定するために書くCSSのコードです。

上記の画像のような感じで書きます。詳しい解説は次の項目で実践形式でご説明しますね！

【実践】サイトをレスポンシブにしてみよう！

CSSは使って覚えるべし！　色々調べて考えるよりも、まずは手を動かしてみましょう。

※ここの解説は、自分で1からWebサイトを作っている人向けの内容が多く含まれます。Webサイトの作成サービスを使っている方は、そのサービスの公式サイトなどの方が詳しく解説しているかもしれません。

用意するもの

レスポンシブ対応を始める前に用意しておきたいのがこちらです。

レスポンシブにしたいWebサイト
テキストエディタ
Google Chrome

はい、基本はこれだけです。

特に重要なのは「レスポンシブにしたいWebサイト」ですね。これがないと始まらない。

今回はすでにパソコン版ができていることを前提にして解説していくので、下記のソースを使っていきます。勉強用にコピペしていただいてOKです。

【HTML】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
	<main>
		<p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
		<div class="imgarea"></div>
	</main>
	<aside>
		<ul>
			<li>テキスト</li>
			<li>テキスト</li>
			<li>テキスト</li>
		</ul>
	</aside>
</body>
</html>

【CSS】

main {
	width: 70%;
	display: inline-block;
	vertical-align: top;
}

aside {
	width: calc(30% - 26px);
	display: inline-block;
	margin-left: 20px;
	box-sizing: border-box;
	border: solid 1px;
}

p {
	line-height: 2;
	width: 60%;
	display: inline-block;
	padding-right: 10px;
	box-sizing: border-box;
	vertical-align: top;
	margin: 0;
}

.imgarea {
	height: 150px;
	width: calc(40% - 6px);
	background-color: #ccc;
	display: inline-block;
}

最初に書くお決まりのコード

まず必要なのは、「機器がパソコンではない時どのように画面を表示するか」をHTMLで指定するコードです。先程ご紹介したviewportですね。

レスポンシブ対応の時に書いておきたいのは下記のviewportです。コピーしてタグ内に貼り付けましょう。

【HTML】

<meta name="viewport" content="width=device-width,initial-scale=1">

スルーしてもいい詳しい解説

name=”viewport”：viewportだよという宣言。
width=device-width：コンテンツの幅はデバイスの幅に合わせるよという記述
initial-scale=1：画面幅が違う時の倍率設定。この場合は倍率を変えない。

表示幅でCSSを切り替えよう

次に、画面幅によってCSSを切り替えるためのコードを用意していきましょう。

【CSS】

@media screen and (max-width:480px) {

	/*　画面サイズが480px以下の場合ここの記述が適用される　*/

}

こんな感じで、CSSファイル内で「〇〇px以下の幅の場合はこれを使う」というスペースを用意します。この記述がメディアクエリです。

メディアクエリの書き方はこんな感じで条件をべしべし書いていくだけって感じですね。お作法がわかってしまえば大したことではありません。

あとはこの中にスマホ表示用のCSSを書いていくだけ！　簡単ですね。

変更したい箇所を見つけよう

スマホ用のコードを書く準備が整ったので、早速コードを書いていきましょう。

この時に便利なのがGoogle Chromeのデベロッパーツール！CSSを書く方ならおなじみのツールですね。

HTMLファイルをGoogle Chromeで開いて、右クリックで表示されるメニューの中から「検証」を選び、デベロッパーツールを起動します。

表示されたデベロッパーツールの中に、スマホっぽいアイコンがあるのでクリックしてみましょう。

なんと、画面幅をいい感じに変えて確認ができるようになるんです！　しかも上のメニューの部分で、いろんな機種に変更することができます……神機能。

これを好きなサイズにして、崩れている部分をチェックしてみましょう。この時、ツール上部にある選択機能をオンにしておくと便利です。

これで崩れている箇所にマウスカーソルを乗せると、その要素に適用されているCSSなどをパッと見ることができます。

この例では、このmain要素の幅が画面の70％設定かつ、インラインブロック要素になっているので、横並びになってしまっているのがわかりますね。

必要なコードを書こう

作業箇所がわかったら、実際にコードを書いていきます。

例では「main要素の幅が画面の70％だから潰れている」のが見づらい原因でしたね。ということで、main要素の幅を100％にしてしましましょう。さっき用意したスマホ版用のコードを書く部分に記述します。

【CSS】

@media screen and (max-width:480px) {

	/*　この位置に記述する　*/
	main {
		width: 100%;
	}

}

下記の画像のように、さっきよりもスマホで見やすいレイアウトになりましたね。

こうして画面幅を色々変えて、崩れていないかを検証しつつ直していく──この作業がレスポンシブ対応の基本なのです。

今回は練習なので、最終的なHTMLとCSSをご用意しました。どんな感じでレスポンシブになるのか、画面幅を色々変えてチェックしてみてください。

【HTML】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
	<main>
		<p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
		<div class="imgarea"></div>
	</main>
	<aside>
		<ul>
			<li>テキスト</li>
			<li>テキスト</li>
			<li>テキスト</li>
		</ul>
	</aside>
</body>
</html>

【CSS】

main {
	width: 70%;
	display: inline-block;
	vertical-align: top;
}

aside {
	width: calc(30% - 26px);
	display: inline-block;
	margin-left: 20px;
	box-sizing: border-box;
	border: solid 1px;
}

p {
	line-height: 2;
	width: 60%;
	display: inline-block;
	padding-right: 10px;
	box-sizing: border-box;
	vertical-align: top;
	margin: 0;
}

.imgarea {
	height: 150px;
	width: calc(40% - 6px);
	background-color: #ccc;
	display: inline-block;
}
@media screen and (max-width:480px) {
	p {
		width: 100%;
		margin: 0px 0 10px 0;
	}

	main {
		width: 100%;
	}

	.imgarea {
		width: 100%;
	}

	aside {
		width: 100%;
		margin: 30px 0 0 0;
	}
}

コピペで使える便利なレスポンシブ用CSS

レスポンシブ対応の作業自体は、CSSを少しでも知っている人なら難なくこなせる作業です。

しかしレスポンシブの難しさはここから。実際どのようなレイアウトにすればスマホでも綺麗に見やすくできるのかを考える必要が出てきます。

そんな時に使える便利なCSSをいくつかご用意してみました！　コピペOKなので、レイアウトに迷った時などにご活用ください。

これは入れておくべき基本のレスポンシブCSS

まずは何も考えずこれだけは入れておきましょう。

【CSS】

* {
	float: none;
	position: static;
}

img {
	max-width: 100%;
	height: auto;
}

まず「float」「position」はレスポンシブの敵です。こいつらのおかげで崩れまくることばかりです。一個一個解除していくのは面倒なので、もう一括で全部解除しちゃいましょう。必要になったらまた追加すればOKです。

そして画像の幅、こいつもなかなか厄介です。最大幅を100％にして崩れを防ぎましょう。さらに高さの指定をautoにすることで、画像自体の比率が変わって崩れるのも防ぐことができるので、合わせて設定しておくとベストです。

画像だってCSSだけで切り替えられる

この画像、PC版だと綺麗に見えるけど、スマホ版だと見づらいな…

こんなことがレスポンシブ対応ではよくあります。

こういう時、画像の中身をCSSで変更するのは不可能なので、スマホ用の画像を用意して切り替える必要があります。

【HTML】

<img class="pc" src="pc_test.jpg" alt="" />
<img class="sp" src="sp_test.jpg" alt="" />

【CSS】

@media screen and (min-width:481px) {
	.sp{
		display: none;
	}
}
@media screen and (max-width:480px) {
	.pc{
		display: none;
	}
}

こんな感じで、パソコン用の画像、スマホ用の画像を並べて用意しておいて、CSSのdisplayプロパティで切り替えちゃえばOK！

詳しい方ならJavascriptで切り替えて……なんて考えるかもしれませんが、こっちの方がお手軽でおすすめです。

複雑なテーブルレイアウトは横スクロールで解決

例えばこんなテーブルレイアウト、このまま縮めるとものすごく見づらいですよね。

こんな時はもういっそはみ出させて、横にスクロールできるようにしちゃいましょう。

【HTML】

<div class="table_wrap">
	<table>
		<thead>
			<tr>
				<th<header</th>
				<th<header</th>
				<th<header</th>
				<th<header</th>
				<th<header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>data</td>
				<td>data</td>
				<td>data</td>
				<td>data</td>
				<td>data</td>
			</tr>
			<tr>
				<td>data</td>
				<td>data</td>
				<td>data</td>
				<td>data</td>
				<td>data</td>
			</tr>
			<tr>
				<td>data</td>
				<td>data</td>
				<td>data</td>
				<td>data</td>
				<td>data</td>
			</tr>
			<tr>
				<td>data</td>
				<td>data</td>
				<td>data</td>
				<td>data</td>
				<td>data</td>
			</tr>
		</tbody>
	</table>
</div>

【CSS】

table {
	width: 100%;
	border-collapse: collapse;
}

th,td {
	border: solid 1px;
	padding: 10px;
}

@media screen and (max-width:480px) {
	table {
		min-width: 500px;
	}
	.table_wrap {
		width: 100%;
		overflow-x: scroll;
	}
}

こうすることで、複雑なテーブルレイアウトも崩れず見やすい状態にすることができます。スマホ版では「横スクロールでご覧ください」と一言入れておくと親切ですね。

こんな感じで、CSSをうまく使えばスマホでも見やすく素敵なレイアウトを実現することができます。

ここにあるパターンとは違う見た目にしたい
もっといろんな見せ方を知りたい！

そんな方は侍エンジニアで、CSSについてもっと深く学習してみませんか？

基本的なレイアウト案もそうですが、オリジナリティのあるレイアウトをどんどん作ることで、あなたの技術をより一層磨くことができます。そのお手伝いをマンツーマンレッスンという形で提供しているのが、侍エンジニアです。

気になった方は、ぜひ下記のボタンからサービスの紹介をご覧ください。

侍エンジニア
サービス紹介はこちら

ここからはレスポンシブ対応によくあるミスなど、プラスアルファの解説をしていきます。どうしてもうまくレスポンシブ化できないという方は要チェックです。

うまくいかない時のチェックポイント

言われた通りやったけどうまくいかない！
どうしても崩れる……原因がわからない……

こんなレスポンシブあるあるのお悩み、私も経験あります……。

うまくいかない時はとにかく原因を見つけ出すのが大事。下記のチェックリストを使って原因特定を目指しましょう。

viewportがきちんと入っているか
viewportの記述を間違えていないか
パソコン用のCSSが残っていないか
HTMLに直接幅や高さを指定していかないか
importantが付いているCSSを上書きしようとしていないか
ブラウザや機種によって崩れたり崩れなかったりしないか

viewportの入れ忘れや記述ミスはない？

なんか全体的に崩れてる！　という時にありがちな凡ミスがviewportのミス。

そもそもちゃんと入っているか
記述にミスがないか

を確認してみましょう。

【HTML】

<meta name="viewport" content="width=device-width,initial-scale=1">

これが正しいレスポンシブ用viewportです。間違っていたりしたらサクッと修正しちゃいましょう。

PCだけに使うCSS残ってない？

メディアクエリで囲われていない部分は、パソコンでもスマホでも両方適用されるCSSとなります。つまり共通CSSということですね。

この共通CSSに、PCだけで使いたい記述が残っていたりしませんか？

これが原因の場合は、

該当するCSSをパソコン用のメディアクエリに入れる
スマホ用のCSSで打ち消す

という2つの解決方法があります。

基本的にはパソコン用はパソコン用で別にしておくのがベストなので、下記のようにCSSを組んでおくようにするのがおすすめです。

【CSS】

/* ここに共通の記述 */

@media screen and (min-width:481px) {
	/* ここにパソコン版だけの記述 */
}

@media screen and (max-width:480px) {
	/* ここにスマホ版だけの記述 */
}

変なところに幅や高さを指定してない？

これが超厄介！　HTMLで画像などに直接幅や高さを指定していたり、親要素に幅や高さが指定してあるパターンです。

【HTML】

<img src="test.jpg" alt="" width="500" height="200" />

HTMLで直接指定している場合は、もう全部消しましょう。消しても画像はちゃんと表示されます、大丈夫です。

親要素の幅や高さも消しちゃいましょう。それでパソコン版に影響が出るならば、パソコン版用のメディアクエリに入れればOKです。

important使ってない？

共通のCSSに書かれているから打ち消そうと思ったらうまくいかない……という場合はimportantが使われている可能性があります。

importantをつけたCSSは、どんな状況でもとにかく最優先で適用されます。それはメディアクエリも同じです。

どうしても必要ではない場合は、パソコン版用メディアクエリに移動したりしてスマホ版に影響が出ないようにしましょう。

ブラウザや機種による違いかも……

もう何をやってもうまくいかない!!　という場合は、何かをミスっているというよりはブラウザや機種による違いの可能性があります。

ブラウザも機種もいろんな会社が独自で作っているもの。全てが同じように表示されるとは限らないのです。

こればかりはどうしようもないので、とにかくいろんなブラウザや機種でチェックをして、ひとつひとつ崩れを直していくほかありません……。

特にIEは崩れやすい上に使っている人も多い厄介なブラウザなので、チェックをお忘れなく！

その他のレスポンシブ対応方法

今回ご紹介したのはメディアクエリを使った方法でしたが、他にもレスポンシブにする方法がいくつかあります。

CSSファイルの読み込み方を変える

CSSの記述ではなく、読み込む際に対応幅を指定する方法です。

CSSの記述が長くなるのが嫌だ！という人にはこちらの方が扱いやすいと思います。

ただファイルの数が増えるので、管理するのがちょっとだけ手間です。お好みで使い分けてみてください。

フレームワークを使う

一からレスポンシブ化はなかなか骨の折れる作業ですよね。自分でやるのは大変という方は、フレームワークを使うのも手です。

フレームワークとは、よく使うCSSなどをまとめたファイルのことです。すでに設定されているclassをつけることで、自分でCSSを書かなくてもおしゃれで便利な見栄えを作ることができます。

bootstrapって聞いたことありませんか？　これはCSSの代表的なフレームワークです。bootstrapはレスポンシブ対応なので、使うだけで簡単にレスポンシブなサイトを作ることができます。

詳しく知りたい方は、下記の記事など参考にしてみてくださいね。

Bootstrapの使い方とは?初心者でもわかる使い方をまとめて解説!!

更新日：2024年3月29日

レスポンシブ以外のスマホ対応方法

今回紹介したレスポンシブ以外にも、スマホ対応サイトを作る方法は色々あります。

どれもメリット・デメリットがあるので、状況に応じて使い分けるのがベストです。

別途スマホ専用のHTMLとCSSを用意する

単純にファイルを分けてしまう方法ですね。シンプルなのでわかりやすい方法ですが、内容の更新時にパソコン用ファイルとスマホ用ファイル両方を編集する必要があるなど、運用しづらい面もあります。

ぶっちゃけそこまで大きなメリットはないので、最終手段くらいの考えでOKです。

メリット

レスポンシブほどややこしくないので簡単
パソコン版、スマホ版それぞれの構造がわかりやすいファイルにできる

デメリット

更新時に2つのファイルを編集しなければならない
パソコンで見ているかスマホで見ているか判定が必要
もしくはパソコンとスマホでURLを別にする必要がある

こんな時にオススメ

レスポンシブの勉強するよりもスマホ対応完了を優先したい時
更新頻度がかなり低いサイトを作る時

リキッドデザインで作る

リキッドデザインとは、ブレークポイント関係なく、どんな幅でも美しいレイアウトになるよう配置されたデザインのことです。

横の幅などを全て％（パーセント）で指定することで、パソコン、タブレット、スマホのサイズに関わらず見やすいサイトを作る事ができます。

リキッドデザインだけで作るのもありですが、レスポンシブと組みわせることで

パソコン、タブレットは同じレイアウト
スマホのときだけメディアクエリでレイアウトチェンジ

なんてこともできちゃいます！

メリット

どんなサイズの画面でも美しいサイトを作れる
ブレークポイントほぼ不要（レスポンシブ組み合わせる時はちょっとだけ必要）

デメリット

幅の指定をミスるとすぐ崩れる
細かい崩れチェックが必須

こんな時にオススメ

タブレットの対応もバッチリにしたい時
どんなサイズの画面でも崩れない美しいサイトを作りたい時

CSSでレスポンシブにする時のQ＆A

最後にレスポンシブに関するよくある質問をまとめてみました。困った時の参考にどうぞ！

Q：Wordpressの場合の設定方法は？

基本的に設定方法は変わりません。

ただWordPressは記事の部分など、投稿内容によって高さや幅が変わることがあるので、その点に気をつけながらCSSを組むようにしてくださいね。

Q：JavaScriptはどうすればいい？

スマホ版では使いたくないJavaScriptのコードがあったりする場合は、スマホかどうかを判断して分岐させるという作業が必要です。

方法は2つです。

幅で判定する
ブラウザが持っている機種などの情報で判定する

幅のでの判定は、読み込んだ時と幅が変わった時に現在の幅を取得し、それがスマホサイズ以下だったらこの記述、そうじゃなければこの記述と分岐する感じですね。

下記の記事などが参考になると思います。ぜひチェックしてみてください。

【jQuery入門】resize()によるウィンドウリサイズの方法まとめ！

更新日：2024年3月1日

ブラウザが持っている情報での判定は、ユーザーエージェントという情報を取得して分岐をします。

この分岐方法は下記の記事で詳細に解説しています。

【JavaScript入門】スマホの判定・有効化を行う方法まとめ！

更新日：2024年3月1日

Q：タブレットの対応はやった方がいい？

当然ながらした方がいいんですが、そうなるとメディアクエリの数が増えてちょっと大変ですよね……。タブレットの普及率を考えると、必ずやりましょう！というほどではないと思います。

パソコンとスマホがしっかり対応できていることの方が重要なので、タブレットの対応は余裕があったらくらいで考えておきましょう。

Q：どうしてもやり方がわからない！うまくいかない！

一人でやっていると、壁に当たった時にどう乗り越えればいいかわからないですよね……。そんなとき誰かに相談できる環境があればスムーズにできると思いませんか？

侍エンジニアは、マンツーマンレッスンであなたの悩みを即解決し、レスポンシブ化でもなんでもスイスイできるようサポートさせていただきます。

もっといいWebサイトが作れるようになりたい……

レスポンシブをマスターしたい！

という方は、ぜひ気軽に無料カウンセリングにお申し込みください。プロのコンサルタントが、あなたにぴったりの学習方法や心強い講師をご紹介します。

高い壁でも、誰かが支えてくれれば登ることができます。ぜひ侍エンジニアに、あなたの成長の手助けをさせてください。

お急ぎの方はこちらからお問い合わせください。

読み込みに失敗しました。
大変お手数ですが、本ページを再度読み込んでください。

再度読み込んでも、読み込み失敗が起こる場合は
こちらからお問い合わせください。

カウンセリングはオンラインにて実施しております。

※予約完了後に、カウンセリングのためのURLやIDなどをメールにてご案内します

1.ご希望の日時を選択してください

空きあり満席

前週

次週

ご希望日時に空きがない場合、こちらからお問い合わせください。

2.必須事項を入力してください

必須選択された日時

日時を選択してください

開催場所オンライン

日時を選択する

必須お名前

必須電話番号

必須メールアドレス

ご予約により、個人情報の取り扱いおよび利用規約に同意するものとします。

スマホ対応はとにかく奥が深い

今回ご紹介したのはスマホ対応方法のほんの一部です。完璧なスマホ対応を目指すならば、とにかくトライ＆エラーを繰り返していくしかありません。

この記事が、レスポンシブ対応にチャレンジしてみよう！と思うきっかけになれば幸いです。

この記事を書いた人

侍エンジニア編集部

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン