みんなに知って欲しい！

IT業界で働く人のお話

埼玉県 草加市
求職者支援訓練教室
スクール虹

About me

職業：プログラマー、システムエンジニア、講師

社会人年数：10年目

血液型：A型

好きなもの：ハムスター、星のカービィ、ゲーム

好きなアプリ：Amazon Kindle

資格：PHP技術者、Java SE、HTML5 Professional​

休みの日の過ごし方：（2025/08/04 時点）

Flutter（フラッター）でスマホアプリ開発

書籍関連の制作

ホームページ関連の制作

システム・プログラム関連の制作

IT業界の仕事に

ついて

・デスクワークで楽そう
・人と関わらず気楽に働けそう

・給料が良さそう

・在宅勤務ができる
 

・ブラック企業が多そう
・どんな仕事内容か
・残業時間が長そう
・AIに仕事が奪われそう

DTPデザイナーやDTPオペレーターって

聞いたことあるけど、どんな仕事をしているか分からないですよね。
これからDTPの仕事について説明します。

DTPデザイナーとDTPオペレーターの仕事

DTPデザイナー／オペレーターが良く使うソフト

 Adobe illustrator（アドビ イラストレーター）

 Adobe InDesign  （アドビ インデザイン）

本づくりのワークフロー（企画～編集～デザイン～校了）

本づくりのワークフロー（印刷入稿～色校正～印刷）

WEBデザイナーやコーダーってよく聞くけど
何をしているか分からないですよね。
これからWEBデザイナーが
どんな事をしているか説明します。

WEBデザイナーとコーダーの仕事

WEBデザイナーの仕事

企業や個人などのクライアントから依頼されたWebサイト（ホームページ）のデザインを担当・制作する仕事です。
サイトマップ（ホームページ画面の構成一覧）や、デザインカンプ（デザインの完成見本の絵）を作成します。

Webサイト（ホームページ）をインターネットで見るためには「デザインカンプ」という絵を見て「html」を作る必要があります。「html」を作る作業を「コーディング」と言います。Webデザイナーが「コーディング」することもありますが、デザインを行わず「コーディング」のみを行う「コーダー」という仕事もあります。

WEBデザイナーが良く使うソフト

Adobe Photoshop（アドビ フォトショップ）

デザインカンプの作成や写真の加工に使用します。画像を分割する「スライス」というWebデザイナー必須の機能があります。

ロゴや絵などのWebデザインの各パーツを描くのに使用されます。画像を拡大しても画質が劣化しないデータ形式なので印刷物の制作にも使われます。

Adobe illustrator（アドビ イラストレーター）

Adobe XD（アドビ エックスディー）

スマートフォンが普及した影響でデザインカンプを見ただけでは操作しやすいか分からないので、プロトタイプという動作のサンプルを作ります。

デザインカンプとは

デザインカンプは「デザインの完成見本図」です。「カンプ」や「モックアップ」とも呼ばれます。文章、フォント、文字サイズ、カラー、幅、高さもここで全て決めます。これをスライスしてWEBの部品にします。

PC用（幅1920px 、高3000px）

SP用（幅640px 、高4911px）

コーダーの仕事

コーダーはWEBデザイナーが作成したデザインカンプや、プロトタイプを元に「HTML」「CSS」といった技術を使ってWEBサイト（ホームページ）を作成する仕事です。
また、作成したWebサイトをインターネットで見るためには「レンタルサーバ」「ドメイン」というものが必要で、それを扱える知識も必要です。WEBデザイナーがコーディングすることもあります。
プログラミングにとても近い技術ですが、厳密には違います。コーディングを勉強してからプログラミングを勉強するとスムーズです。

PG（プログラマー）と

SE（システムエンジニア）の仕事

プログラマーやSEってよく聞くけど

何をしているか分からないですよね。

これからプログラマーやSEが

どんな事をしているか説明します。

PG（プログラマー）の仕事

プログラマーは、Webシステム（Web開発）やスマホアプリ（スマホアプリ開発）を作る仕事です。

Photoshopのソフトを作るプログラマー（パッケージ開発）や、炊飯器の制御を作るプログラマー（組み込み開発）もいます。プログラマーという意味では一緒ですが、必要な技術は異なります。

私が、詳しいのは「Webシステム」を作るプログラマーなのでそちらについて説明します。
「Webシステム」は皆さんが作る「Webサイト」と少し似ています。

https://travel.rakuten.co.jp/

Webシステムの例：楽天トラベル

PG（プログラマー）の仕事

画面に文字を入力して「検索」ボタンを押したら入力した文字と一致するデータをずらーっと画面に表示したりするものを「Webシステム」といいます。

PG（プログラマー）の仕事

「Webシステム」を作るために必要な知識は３つです。
「html」「データベース」「プログラム」です。
「html」は、ご存じの通り、画面に文字を表示します。
「データベース」は、データをいーっぱい蓄積できるソフトのようなものです。

赤枠は検索の「SQL」文です。

データベースからデータを

検索したり、登録、更新、削除を

するのには、「SQL」というものでで命令を書きます。

PG（プログラマー）の仕事

「プログラム」は「html」と「データベース」の橋渡し役です。「html」でテキストを入力して「検索」ボタンを押したら、「プログラム」で「SQL」文を作成してデータベースにデータを探しに行き、検索結果を「プログラム」からhtmlに渡すのが「Webシステム」の基本動作です。

html、css

プログラム

データベース

SE（システムエンジニア）の仕事

主にシステムエンジニアはプログラミングの設計を任される人です。

プログラムを文章で表す「基本設計書」「詳細設計書」や画面を図で表す「画面設計書」と呼ばれるものをExcelを使用して作ります。

ExcelでなくWordの時もありますが、「設計書」と呼ばれるものは経験上Excelで作成することが多いです。

システムエンジニアが作った設計書を見てプログラマー達がシステムを作り上げます。

SE（システムエンジニア）の仕事

SEが行うプログラムの設計では
１．プログラミング言語は何を使うか
２．データベースは何を使うか
３．開発環境は何を使うか
４．推奨ブラウザは何にするか
５．画面のデザインはどうするか
６．ボタンの動作をどうするか
７．エラーの時のメッセージは何を表示するか

上記以外にも、Webシステムに関わる全ての物を決めます。スケジュールや、作るのに必要な日数や人数の計算も行い必要であればSEもプログラミングを行います。

プログラマーが技術を極めてSEになることが多いですが、プログラミングする機会が減るので、プログラマーのままでいる人も多いです。

SE（システムエンジニア）の仕事

画面設計書の例です。Excelで線を引いたり、色を付けています。

SE（システムエンジニア）の仕事

データベースの設計書の例です。こちらもExcelで書かれています。

IT業界の働き方の種類

（SIer、SES、フリーランス）

IT業界は様々な働き方があります。

代表的な3種について説明したいと思います。

IT業界の働き方の種類（SIer エスアイアー）

SIerは、お客様の要求を受け、ITシステムの企画、構築、運用を行います。日本のSIerの場合、1社で全ての作業を行うことはまれで、規模が大きい会社が受注した仕事を、
複数の小〜中規模の会社が協力して遂行します。
SIerと呼ばれる会社は大手の会社が多いです。

大手SIer会社名：

NTTデータ、日立製作所系(日立ソリューションズ、日立システムズ)、NEC系(NECソフト、NECシステムテクノロジー、NECネクサソリューションズ)、日本IBM系(日本ビジネスコンピュータ)等

IT業界の働き方の種類（SES エス・イー・エス）

SESはSystem Engineering Serviceの略です。SESは「ITエンジニア専門の派遣」です。
普通の「派遣」とは違い、「正社員」で雇用され、大手SIer等に配属されます。これが良く言われる「客先常駐」というものです。IT系求人で「未経験歓迎」「社内研修あり」と書かれているものは「SES」形態が多いです。

SES形態の会社は、人を配属してSIer等からお金を貰い、それを社員の給料にします。ということは「人が多いほど会社の売り上げが伸びる」ので未経験でも構わないから、人材が欲しいのです。配属先のことを「現場」と呼びます。

同じ現場で5年働く人もいれば、１～２年で現場を切り替える人もいます。転職しなくても職場を切り替え変えられることはSESの魅力だとも言えます。

IT業界の働き方の種類（フリーランス）

フリーランスとは、会社に所属せずにSESをする人を言います。フリーランスのメリットはSIerからもらうお金をすべて自分の物にできます。設計からプログラミングをこなすエンジニアの相場は１ヶ月65万円くらいです。
この相場のことを「単価」と呼びますが、フリーランスは単価の金額がまるまる自分の給料になります。
その代わり、年金・社会保険・確定申告等の各種手続きは、すべて自身で手続きする必要があります。

フリーランスは会社に所属していないので、現場に入るためには高いスキルが必要です。知り合いのフリーランスの人は、住宅ローンに落ちてしまったので一度SESの会社に勤めてローンの審査を通して、またフリーランスに転向しました。なのでクレジットカードを作ったり、家を借りたり、ローンを組む予定のある人は注意が必要です。

【おまけ①】 IT業界の仕事で役に立つ！

• プログラミング言語と開発ツールの種類

• IT業界で良く使われるソフト

• コピペ用メモを残す習慣をつけよう

• 今日から使える小技

プログラミング言語と開発ツールの種類（PHP）

プログラミング言語と開発ツールの種類（JAVA）

プログラミング言語と開発ツールの種類（C#）

IT業界で良く使われるソフト

Excel（エクセル）

プログラムの設計書の他、勤務表、経歴書、進捗管理（しんちょくかんり）とにかく色々な物に使われます。

システムの操作マニュアル、会議の議事録などワードで書かれることが多いです。

Word（ワード）

Slack（スラック）

会社内での連絡で使います。chatwork（チャットワーク）や、Skype（スカイプ）を使うこともあります。

IT業界で良く使われるソフト

WinMerge（ウィンマージ）

二つのファイルを比較して差分を見るソフトです。

プログラムの変更前・変更後をチェックしたりできます。

IT業界で良く使われるソフト

sourcetree（ソースツリー）

ソースのバックアップを作成できるソフトです。

使用するにはGitの知識が必要です。

IT業界で良く使われるソフト

サクラエディタ

高性能のメモ帳ソフトです。プログラマはよく使うソフトです。

コピペ用メモを残す習慣をつけよう

コーディングやプログラミングで、一度書いた物を

再度手打ちするのは、非効率だったり

手打ちだとバグの原因になります。

そこでコピペ用のメモを作る事をお勧めします。

線で区切りどんどん下に追加していきます。

ソース以外にもメールを書く前の下書きや気に入ったURL、今日やることをどんどん蓄積します。

今日から使える小技（ユーザー辞書）

よく使うタグ等を辞書登録しておくとコーディングがスムーズになります。

今日から使える小技（切り取り＆スケッチ）

「Shift ＋ Win ＋ S 」を３つ同時に押してみてください

画面キャプチャーモードになります。

今日から使える小技（切り取り＆スケッチ）

切り取った後に通知をクリックすると編集モードが開きます。

トリミングをしたり、ペンで印をつけることができます。

【おまけ②】 IT業界以外でも役に立つ！

• デザインに役立つ原理・原則
• デザインの基本原則−近接−
• デザインの基本原則−整列−
• デザインの基本原則−反復−
• デザインの基本原則−コントラスト−
• 各種法則について

• 勉強が苦手な人必見！学習定着率について

Webにおけるデザイン性について

デザインに役立つ原理・原則

人間の知覚・認知の特徴に基づいた原理・原則を活用し、分かりやすいWebサイトのデザインをお教えします。
見た目の美しいデザインが使いやすいデザインとは限りません。
美しさと使いやすさを両立させるためには人間の知覚を利用したデザイン設計が必要です。

限られた画面領域や操作時間で効率的に情報を伝えるには、情報を整理して理解しやすい形にします。

次ページで表示する画面で、左の画像と右の画像どちらが見やすいサイトかパッとみて判断してみてください。

デザインに役立つ原理・原則

右の画像の方が方が見やすかったのではないでしょうか？
違いがわかっても、いざ作ろうとすると難しいですよね。
見やすい理由について詳しく説明していきます。

デザインの基本原則　−近接−

人は距離が近い情報を「関係があるもの」と認識する習性があります。例えば、一定の距離を空けて男女が歩いていてもカップルとは思いませんが、寄り添って歩いているだけでカップルに見えます。

情報も同じで距離が違いものが同じまとまりであると直感的に感じます。

つまり、関連している情報は、距離を近づけてグループ化することで情報を整理することができます。関係しない情報は遠ざけます。

このようなレイアウトの原則を「近接」といいます。

デザインの基本原則　−近接−

グループの間隔に余白が無い場合

デザインの基本原則　−近接−

グループの間隔に余白がある場合

デザインの基本原則　−近接−

こちらは、「詳細・予約」ボタンは

上の要素のものか下の要素の物か分かりずらいです。

デザインの基本原則　−近接−

修正前

修正後

「詳細・予約」の位置をレストランの情報に近接させ、ひとつのまとまりにさせます。

そうすると、ボタンの幅も増やすこともできます。

写真やレストランの情報に集中できるようにボタンの主張を控えます。

ユーザーがより欲しい情報を目立たせるようにデザインが変更されました。

デザインの基本原則　−整列−

情報を左揃え、中央揃え、あるいは右揃えというように要素を整列、配置します。このレイアウトの原則を「整列」といいます。ページ全体が整列されていることで、スムーズな視線移動と統一感を生み出し、強調させたい情報がより際立ちます。

デザインの基本原則　−整列−

左揃えです。人の視線は左から右へ移動するため、左揃えは最も多く使われます。複数行にわたる文章やリストに最適な揃え方です。

デザインの基本原則　−整列−

中央寄せです。タイトルなどの印象付けたい文章で用いられることが多いです。左右対称になることで、安定したまとまりのあるレイアウトになります。
複数行の文章に使うと視線が不規則になり、読みづらいので注意が必要です。

デザインの基本原則　−整列−

右揃えです。人の視線は、「左から右」「上から下」へ

移動するため、情報の最終地点で押してほしいボタンを置くようなレイアウトに用いられます。

デザインの基本原則　−反復−

情報の反復を行うことによって全体に一貫性や安定感が生まれます。デザインで一貫性を与え反復するには、同じデザインの要素やグループを繰り返します。太字・線・色・アイコン・間隔・レイアウトなど様々なものを繰り返して使うと、全体に一貫性や安定感が生まれます。反復することによりユーザーはパターンを予期できるため、情報を認識しやすくすることができます。

次ページで表示するネットショップでは「タイトル」「写真」「値段」などの要素を「等間隔」で繰り返しています。要素を反復することによって一貫性や安定感が生まれ、ユーザーは写真や値段の位置を予期しながら商品を探すことができます。

デザインの基本原則　−反復−

自転車の向きも同じ向きで反復しています。

デザインの基本原則　−反復−

写真の構図が違うと統一感が無くなります。

デザインの基本原則　−反復−

Webサイト全体で反復することが大事です。

メニューやボタンなどWebサイト全体を通してデザインや位置を反復します。それによって例えページをまたいでも一貫性が保たれ、ユーザーは共通性を見いだすことができます。2ページ、3ページと繰り返していくとWebサイトのルールがはっきりし、自然に使い方を理解することができます。メニューのデザインや位置が反復されていないと、

「他のページに遷移した」とユーザーに誤解を与えてしまいます。

メニューの中で選択している箇所がどこか分からないとリンクが遷移したかわかりにくくなるため、メニューのアクティブデザインは入れたほうが良いです。

デザインの基本原則　−反復−

ナビゲーションの反復

タイトルの反復

デザインの基本原則　−コントラスト−

情報に強弱をつけるコントラストは、フォント・線の太さ・色・形・サイズ・余白などの要素の視覚的な差のことです。

要素に強弱を付けることによって理解しやすい情報に整理することができます

次ページで「見出し」と「本文」にコントラスト（色のコントラストではなくメリハリという意味でのコントラスト）がない文章とある文章を比べてみます。

デザインの基本原則　−コントラスト−

「見出し」と「本文」の文字サイズが同じ文章です。

デザインの基本原則　−コントラスト−

「見出し」と「本文」の文字サイズを変えた文章です。

デザインの基本原則　−コントラスト−

「見出しを大きく」「本文を小さく」コントラストを付けることで、ユーザーが読む順番を自然と理解できるようにデザインされています。そのため、1枚目よりも２枚目の方が読みやすく感じるのです。

中途半端な強弱では伝わりづらく、違う要素として見えてしまうことがあります。
あまり違いのないフォントのサイズや色などで差をつけるのではなく、明確に大きさ等を変えてコントラストを付けることがポイントです。

各種法則について　-ミラーの法則-

人間が短期記憶できる量には限りがあることを踏まえ、
情報を覚えやすい設計にしましょう。短期的に記憶できる量には限りがある人間は、情報をいくつかの「かたまり（チャンク）」にして記憶しています。

上はスペースで区切っていません。

下はスペースで区切っています。

これだけで見やすさが変わるのです。

各種法則について　-ヒックの法則-

ヒックの法則は、「選択肢の数が多いほど、ユーザーの意思決定に要する時間が長くなる」という法則です。
選択肢や機能を減らすことで、素早く物事を判断することができます。

このように情報が多い場合でも、「料理のカテゴリ」「具体的な食材」の２段階の段階的に選択肢を分けることでユーザーか簡単に意思決定しやすいように工夫しています。

各種法則について　-フィッツの法則-

「対象に移動するために必要な時間」と「対象までの距離や対象の大きさ」の関係を表すのがフィッツの法則です。

面積が大きいボタンや、画面の端にあるボタンはほど素早くクリックできます。

勢いよくマウスを画面の端に向かって動かしても、通り過ぎることなく目的の対象物を素早くクリックすることができます。

勉強が苦手な人必見！学習定着率について

なかなか勉強が身に入らないというあなた！

人に何かを教えた経験はありますか？

学校で受ける講義は実は5％しか記憶に残らないそうです。

人に教える・説明するとなんと90％残るそうです。

【体験談】

会社に入社してから、プログラミングを学んだが、覚えが悪く上司にも「向いてないよ」と言われていた。そんな時後輩が入社してきて、プログラミングを教えることにことになった。教えているうちに、分からなかった部分が「カチッ」とパズルが埋まるように理解できた瞬間があった。そこから１回学んだことはすぐ覚えられるようになった。後々このラーニングピラミッドの存在を知って、自分は「人に教える」ということで効率良く学習していたという事を知った。

☆ 皆さんもぜひ誰かに何かを教える習慣を身に着けてみてくださいね

IT業界に興味を持った方へ！

• プログラミング入門

• Webサイト（ホームページ、WordPress）制作入門

• Photoshop、illustrator入門

• Excel、Word入門

• 動画編集入門

• ドローン操縦入門

• 出版、広告、DTP（InDesign）入門

スクール虹では、不定期で平日の夕方や土日に

IT入門、実践コースを開講可能です。

定員が集まり次第の開講なので、

詳細は、担当者へお問い合わせください。

【開講内容例】