Welcome

Works 作品

サーバー監視ダッシュボードの画面

第一志望に直結する主作品「Server Monitor」から紹介します

Linuxサーバーの設計 → 構築 → 試験 → 監視 → 復旧 → 引き渡しを、一つの学習案件として整理しました。第二志望のITサポート資料、その後に開発学習作品を掲載しています。

このページでは、作品の状態を3つに分けて書いています。「実装済み」は、作って形になったものです。「実測済み」は、実際に動かして結果を記録したものです。「未実施(NOT RUN/まだ実行していないこと)」は、まだ試していないものです。個人学習の作品であり、実務実績や人による第三者レビューの実績ではありません。

詳しい日時、実行環境、検証したコードの版(コミットID/コードの変更ひとつずつに付く固有の番号)は、動作確認の記録にまとめています。

実装済み 6工程のコード、設定、手順、チェックリスト、作業結果報告書の原本 実測済み WSL2(Windowsの中でLinuxを動かすしくみ)、一時Ubuntu、Docker等の学習環境で、日付と確認したコードの版を残した確認結果です。 未実施(NOT RUN) 独立した対象サーバーの受け入れ、72時間の連続稼働、Slackへの実通知、AWSでのapply/destroy(環境の作成と削除)、D-2(別サーバーへ復元する障害復旧演習)、本番変更は行っていません。

設計 基本・詳細・パラメータ
構築・試験 Ansible / Compose / E2E
監視・ログ Prometheus / Grafana / Loki
復旧・引き渡し Runbook / Checklist
主作品 / 個人学習 / Linux Server

Server Monitor

設計、構築、試験、監視、復旧、引き渡しを一つの流れにまとめた学習作品

サーバー構築・監視・自動化 2026

Server Monitor — Linuxサーバー設計・構築・運用

実装済み6工程のコード、設定、手順、結果票、引き渡し資料
実測済み一時Ubuntu環境の通し試験(E2E)23項目など、日付付きの学習記録
NOT RUN独立した対象host受入、72時間、Slack実通知、AWS、D-2、本番変更
志望職種に最も近い学習作品

Linuxサーバーの設計、設定、動作確認、監視、ログ確認、障害復旧、引き渡し資料をまとめました。練習環境内の通知は確認済みですが、Slackへの実通知、別サーバーへの復元、AWS環境の作成は未実施です。

5学習テーマ 23/23テスト合格 4監視アラート 2Grafana ダッシュボード 3復旧計画(未実施含む)

かんたんに言うとサーバーを1台つくって動かし、人に引き渡すまでの一連の流れを、6つの段階に分けて練習した記録です。

「設計 → 構築 → 試験 → 監視 → 復旧 → 引き渡し」の順で学習内容を整理しました。2026年8月22日に、テストのたびに作り直す一時Ubuntu環境で23項目を確認しました。翌日は前の版へ戻す自動テストにも合格しました。その日ごとの記録は、当時の記録としてそのまま残しています。いま何をどこまで確認できているかは、現行mainの証跡台帳(最新版に付けた確認記録の一覧)を、正式な版として扱います。

  • 構成図:サーバーやネットワーク機器をどのようにつなぐか、図で整理しました。
  • 設定の自動化:Ansible(サーバーの設定を自動で行う道具)を使い、同じ手順を何度でも繰り返せるようにしました。手作業による入力ミスと作業時間を減らすためです。
  • 監視とログ:Prometheus(数値を集める道具)、Grafana(集めた数値を画面に描く道具)、Loki(動作の記録を集めて検索する道具)を使いました。サーバーの数値と記録(ログ)を、一か所で確認できます。
  • バックアップと復旧:復旧までの時間(RTO)と、失ってよいデータ範囲(RPO)を考え、同じ環境への復元を練習しました。
  • 自動テスト:GitHub Actions(GitHubが用意した自動実行のしくみ)を使います。設定ファイルやスクリプトを変更するたびに、誤りがないかを機械が自動で確認します。

学習した作業の例

  • 状態確認:サービス、ログ、CPU、メモリ、ディスク、通信状況を同じ順番で確認し、結果を残す。
  • 新規設定:Ansibleの設定を一度まとめて適用し、2回目に不要な変更が出ないことを確認する。何度実行しても結果が変わらない状態(冪等性)を確かめるため。Dockerを入れていない最小構成のOSでは未実施です。
  • 稼働確認:11個のサービスを起動し、監視通知、アクセス制限、ログの保存を練習環境内で確認する。Slackへの実通知は未実施です。
  • 障害復旧:停止させたサービスの自動復旧と、バックアップからの復元を確認する。別サーバーへの復元は未実施です。
  • 作業後の記録:起きたこと、影響、原因、対応、残った課題を分けて記録する。

変更時の自動テスト(CI/変更のたびに機械がまとめて確認するしくみ)

flowchart LR Commit[コードを変更] --> GHA[GitHub上で自動テスト] subgraph CIPipeline[自動確認] direction TB Lint[書き方を確認] Test[処理をテスト] TF[設定内容を確認] Lint --> Test --> TF end GHA --> CIPipeline CIPipeline --> Result{合格 / 失敗} Result -- 合格 --> Merge[変更を取り込む] Result -- 失敗 --> Fix[修正する]

設定変更による問題を早めに見つけるため、サーバー設定と運用スクリプトをGitHub上で自動確認しています。

制作中に困ったことと解決

課題Windows向けのPowerShellスクリプトを、GitHub上のLinux環境でもテストできるか分かりませんでした。

解決OSに依存しない判定処理を別ファイルへ分け、PowerShellのテストツール(Pester)で確認できる形にしました。

PowerShell bash AWS Terraform Ansible Docker Compose Prometheus Grafana Loki / Alloy node_exporter 運用品質の目標 復旧時間・バックアップ計画 Pester GitHub Actions VLAN / DMZ
PC Kitting 手順書
AD / M365 棚卸し
Network 一次確認
Ticket 記録の型
手順書 / 確認ツール / 対応記録

運用サポート資料集

問い合わせ対応を想定し、確認手順と記録方法をまとめた学習作品

問い合わせ対応・手順書・確認ツール 2026

運用サポート資料集

目的問い合わせの確認順と、作業記録の書き方をそろえる
成果16本のガイド、10本の確認ツール、練習用データと自動テスト
学んだこと受付、原因の絞り込み、記録、相談、引き継ぎ
第二志望の補助作品:ITサポートを想定した練習

PCの初期設定、利用者アカウント、Microsoft 365、ネットワーク障害などを想定し、確認手順と記録例を作りました。すべて個人学習用の想定ケースで、会社の実環境で使った実績ではありません。

16ガイド + README 10スクリプト 10障害ケース 5JSON + 2PS1 25自動テスト 安全設定の自己確認

かんたんに言うと社内のパソコンや利用者アカウントの困りごとに対して、何をどの順番で確認し、どう記録するかをまとめた資料集です。

想定した環境は、Windows 11、Microsoft 365(メールやファイル共有などをまとめて使えるサービス)、Active Directory(社内アカウント管理)です。この環境で、PC初期設定、退職者アカウント停止、共有フォルダの権限確認、ネットワークの一次確認などをまとめています。公開内容は想定手順、架空のケース、サンプル出力であり、実務での作業記録ではありません。

  • 問い合わせを受けた後に「何を、どの順番で確認し、何を記録するか」を整理しました。
  • 確認結果をファイルに出力し、作業記録や引き継ぎ資料へ添付しやすくしました。
  • 公開ポートフォリオとして、社内固有情報や認証情報を含めない安全なサンプルにしています。

想定した使い方

  • 新人受け入れ:PC初期設定の手順書で、検品から社内アカウント設定、Microsoft 365導入、引き渡しまでを確認する。
  • 退職・異動対応:アカウントの停止、権限の取り消し、データの引き継ぎ、ライセンスの回収を、時間の順に沿って確認する。退職した人のIDが残ったまま使われるのを防ぐため。
  • PC不調の一次確認:端末情報、イベントログ(Windowsが自動で残す動作の記録)、ディスク、ネットワーク、セキュリティ状態を同じ形式で記録する。上位の担当者へ引き継ぐとき、聞き直しの手間をなくすため。
  • 引き継ぎ:対応内容・判断・再発防止をチケットに残し、次回対応を早くする。

問題を受け付けてから振り返るまで

flowchart LR A[異常を見つけて記録] --> B[原因を絞る] B --> C{解決可能?} C -- はい --> D[対応・復旧] C -- いいえ --> E[上位担当へ相談] E --> D D --> F[対応後の振り返り] style A fill:#e8e0d5,stroke:#2c3e50 style B fill:#e8e0d5,stroke:#2c3e50 style D fill:#9caf88,stroke:#2c3e50,color:#fff style E fill:#cd853f,stroke:#2c3e50,color:#fff style F fill:#e8e0d5,stroke:#2c3e50

この資料集は、問題の発見・記録と、最初の原因調査を進めるための確認ツールや振り返り用の書式をまとめたものです。

確認ツールの工夫

かんたんに言うと下のコードは、CPUとメモリの使用率を受け取り、Healthy(正常)、Warning(注意)、Critical(危険)のどれかを返すだけの短い部品です。

PowerShellの確認ツールは、状態を判定する部分だけを別に分けました。こうすると同じ処理を他でも使い回せて、自動テストもしやすくなります。


function Get-ResourceStatus {
    [CmdletBinding()]
    param (
        [Parameter(Mandatory=$true)][int]$CpuPercent,
        [Parameter(Mandatory=$true)][int]$MemoryPercent
    )
    
    $status = "Healthy"
    if ($CpuPercent -ge 90 -or $MemoryPercent -ge 90) {
        $status = "Critical"
    } elseif ($CpuPercent -ge 75 -or $MemoryPercent -ge 75) {
        $status = "Warning"
    }
    
    return [PSCustomObject]@{
        Timestamp = (Get-Date).ToString("yyyy-MM-dd HH:mm:ss")
        Status    = $status
        CPU       = $CpuPercent
        Memory    = $MemoryPercent
    }
}
                                

制作中に困ったことと解決

課題実務に近づけようとすると、社内固有のサーバー名・ユーザーID・権限情報のような公開に不向きな情報が混ざりやすい。

解決架空のWindows 11、Microsoft 365、Active Directory環境に統一し、確認ツールも読み取り中心の安全な内容にしました。注意事項はREADMEにも記載しています。

PowerShell Windows 11 Microsoft 365 Active Directory 作業手順書 対応記録
サーバー監視ダッシュボードの画面: CPU・メモリ・ディスク・ネットワーク・プロセスをリアルタイム表示
Python / Flask / psutil

サーバー監視ダッシュボード

Webブラウザから動作中マシンのリソースをリアルタイム可視化

Python / Flask / psutil 2026

サーバー監視ダッシュボード

目的端末・サーバー状態の見える化
成果CPU / メモリ / ディスク / プロセス監視
活用負荷上昇時の一次確認と説明
主作品内のアプリ実装

CPUやメモリの負荷、ディスク容量、動作中のプログラムを確認し、サーバーの状態を説明する練習に使っています。Linuxサーバー構築案件全体は、このページ先頭のServer Monitorで案内しています。

6カテゴリ監視 60秒履歴 プロセス TOP15 3OS対応

Pythonで作った監視画面です。CPU、メモリ、ディスク、ネットワーク、動作中のプログラムを一画面で確認できます。負荷が高くなると色が緑から黄、橙、赤へ変わります。

同じ作品では、Ansibleによる設定の自動化、Dockerによる起動、PrometheusとGrafanaによる監視、Lokiによるログ保存も学習しました。AWS向けの設定コードは書き方の検査までで、実際のAWS環境は作成していません。全体は制作概要サーバー構築の内容で確認できます。

  • 画面を再読み込みしなくても、数秒ごとに新しい情報を取得できるようにしました。
  • psutilというPythonのライブラリ(よく使う処理をまとめた部品集)を使い、Windows、Linux、macOSの状態を同じ方法で取得します。
  • Chart.jsを使い、CPUとメモリの直近60秒の変化をグラフにしました。

想定した使い方

  • 自分のPCや学習用サーバー:重い処理を動かしたときに、CPUやメモリがどのように変化するかを見る。
  • 問題の原因調査:いつから負荷が上がったかをグラフで確認し、負荷の高いプログラムを探す。
  • 監視の説明:サーバー監視で何を確認するのか、色分けされた画面を使って説明する。

サーバーの状態を画面へ渡す処理

Flask(PythonでWebの機能を作る道具)が、JSON形式(項目名と値を並べた、機械が読みやすいデータの書き方)で状態を返します。画面はそのままで、数値だけが新しくなります。


@app.route('/api/stats')
def api_stats():
    # CPU使用率 (interval=0で即時取得できるための工夫を内部で実施)
    cpu_percent = psutil.cpu_percent(interval=0)
    cpu_cores = psutil.cpu_percent(interval=0, percpu=True)
    
    # メモリ情報
    mem = psutil.virtual_memory()
    
    # ディスク情報
    disk = psutil.disk_usage('/')
    
    return jsonify({
        'cpu': cpu_percent,
        'cpu_cores': cpu_cores,
        'memory': mem.percent,
        'disk': disk.percent,
        'timestamp': datetime.now().strftime('%H:%M:%S')
    })
                                

制作中に困ったことと解決

課題psutil.cpu_percent()interval=0 で呼ぶと、前回呼び出したときからの差を返します。そのため最初の1回は必ず0%になり、グラフの形が崩れて表示されました。

解決全体使用率の取得時のみ interval=0.5 で0.5秒ぶんの値を取り、基準点を作ります。その直後に、コアごとの値を interval=0 で取得します。これで数値は正しくなり、画面が返ってくるまでの待ち時間も大きくは増えません。

Python Flask psutil Chart.js Fetch API SVG JSON API
定型文管理アプリの画面: テンプレート一覧と編集フォーム
Python / Flet

定型文管理アプリ

Fletフレームワークを用いたテンプレート管理ツール

Python / Flet 2026

定型文管理アプリ

目的問い合わせ返信の標準化
成果定型文のCRUDとワンクリックコピー
活用受付文・案内文・確認項目の品質統一
補助スキル: 定型業務の効率化

問い合わせ返信、受付メモ、案内文を標準化し、回答品質のばらつきと入力時間を減らす用途に向いています。

Flet(Pythonだけで画面を作れる道具)を使い、パソコンで動く画面付きアプリを作りました。定型文の新規作成・編集・保存・削除ができます。これはCRUD(作成・読み取り・更新・削除という4つの基本操作)と呼ばれます。ボタン1回で文章をコピーでき、そのまま貼り付けられます。データはJSONファイルに保存するので、アプリを閉じても消えません。

  • Fletを使い、PythonだけでGUIアプリを作れることを学びました。
  • 定型文の保存・編集・削除という基本的なCRUD操作を実装しました。

想定した使い方

  • カスタマーサポート:「お問い合わせありがとうございます」「ご返金処理について」など、よくある問い合わせへの返答テンプレートを登録。1クリックでコピーして、メール・チャットへ即貼り付けできる。
  • 営業メール:初回挨拶・見積書送付・フォローアップ・受注御礼の各テンプレを登録。商談フェーズに応じて選んで使い回せるため、メール作成時間を大幅短縮。
  • 採用担当:書類選考通過連絡・面接日程調整・不採用通知などのテンプレを登録。応募者ごとの差し替え部分だけ手直しして使える。
  • 講師・教育担当:頻出の解説文(用語定義・補足説明・参考リンク)を登録し、Q&A対応や教材作成時にすばやく挿入。
  • ライター・ブロガー:記事冒頭の挨拶・SNS告知の定型文・署名・免責事項などを管理。執筆フローのテンプレ化で生産性アップ。
  • 個人利用:自宅住所・電話番号・メール署名・よく使うURLなど、何度も入力する個人情報を安全にローカル保存。コピー時のミスタイプを防止できる。

制作中に困ったことと解決

課題JSON保存時に日本語が \uXXXX 形式でエスケープされ、ファイルを直接開いても内容を確認できない。

解決json.dump(..., ensure_ascii=False, indent=2) を指定し、日本語のまま整形保存。トラブル時のデータ確認が容易になった。

Python Flet JSON pyperclip
付箋アプリの画面: 複数の付箋を画面上に配置
Python / tkinter

付箋アプリ

デスクトップ上で自由に使える付箋アプリ

Python / tkinter 2026

付箋アプリ

目的対応中タスクの一時メモ化
成果複数付箋の保存・復元
活用対応メモ、確認待ち、作業中TODO
補助スキル: データ整理

一時メモや対応中タスクの見える化に有効。機密情報を残さない注意書きも含め、運用上の扱い方まで説明できます。

Pythonのtkinterで作ったデスクトップ付箋アプリです。複数の付箋を自由に配置・作成・削除でき、内容はJSONファイルに自動保存されます。再起動後も付箋が復元されます。

  • tkinterでGUI部品の配置とイベント処理を学習しました。
  • 日常的に使えるツールとして、操作のわかりやすさを重視しました。

想定した使い方

  • 今日のTODOリスト:朝起きてその日にやることを付箋に書き、画面端に貼っておく。完了したら削除して達成感を得る、シンプルなタスク管理。
  • 瞬発アイデアメモ:会議中・作業中にひらめいたアイデアや気づきをすぐに書き留められる。Excelやメールソフトを開かなくても、キー1つで付箋を追加できる。
  • リマインダー:「14時に電話」「明日締切の書類」など忘れたくない情報を画面に貼る。自動保存・位置復元のため、PCを再起動しても消えない。
  • ショッピングリスト:家族から頼まれた買い物・週末に買うものを書き出し。スマホがなくてもPCですぐ確認・追加・削除ができる。
  • 学習用メモ:覚えたい英単語・公式・ショートカットキーを付箋に貼って画面端に常駐。視界に入る位置に置くことで自然に頭に残る。
  • パスワード等の一時メモ:セッション内で一時的に控えたい数字・コードのメモに(※機密情報の長期保存には不向き)。作業終了後はその場で削除。
  • 在宅勤務の集中サポート:「集中タイム中」「会議中」など自分への声かけメモを画面に貼り、気分の切り替えに活用。

制作中に困ったことと解決

課題付箋を移動して配置を変えても、再起動すると毎回初期位置に戻ってしまう。

解決ウィンドウ終了時のイベントで geometry() を取得しJSONに保存、起動時に読み込んで位置を復元する処理に変更。

Python tkinter JSON
SNSアプリ Pulseの画面: ムード別カラーで投稿カードを表示
PHP / SQLite

SNSアプリ「Pulse」

感情ムードで繋がる独自コンセプトのSNS

公開コードの参照先は現在確認できていません。画面は保存済みスクリーンショットで確認できます。

PHP / SQLite 2026

SNSアプリ「Pulse」

目的認証・投稿・DB連携の学習
成果CSRF / XSS / bcryptを意識したWebアプリ
活用社内Webシステム理解の基礎
学習作品: Webアプリ開発

直接のヘルプデスク業務より、認証・入力チェック・DB初期化・公開時の注意点を学んだ開発学習作品として位置付けています。

8種ムード 4独自機能 天気予報 24h 感情オーラ 7

「いいね」ではなく「共鳴」で繋がる、感情ムード投稿型のSNSアプリです。投稿時に8種のムードを選ぶと、カードの色がムードに対応して変化します。ささやきモード(匿名投稿)・タイムカプセル(未来日時公開)・感情天気予報(24時間分布)・感情オーラ(7日間傾向)など独自機能を実装しました。

  • CSRF(利用者になりすまして勝手に送信させる攻撃)、XSS(他人が見るページに悪い命令を埋め込む攻撃)、SQLインジェクション(入力欄からデータベースを不正に操作する攻撃)への対策を入れました。パスワードはbcrypt(元に戻せない形へ変換する方式)で保存しています。
  • SQLite(1つのファイルで動く小さなデータベース)を、PDO(PHPからデータベースを扱う共通の窓口)を通して操作しました。データベースのファイルは自動で作られます。そのため、使う人が事前に準備をしなくても動きます。

想定した使い方

  • 日々の感情記録:朝・昼・夜とムードを選んで投稿し、感情オーラ(7日間グラフ)で自分の心の波を振り返る。日記アプリの代わりとして気軽に使える。
  • 本音の吐き出し:ささやきモード(匿名投稿)で、職場や学校で言いづらい本音や悩みを誰にも特定されずに吐露。ストレス発散の場として機能する。
  • 未来へのメッセージ:タイムカプセル機能で、誕生日や記念日に向けた予約投稿が可能。1年後の自分や友人へのメッセージを今の気持ちで残せる。
  • メンタルセルフケア:感情天気予報(24時間分布)で「いつ気分が落ちやすいか」を可視化し、生活リズムの改善や受診の参考データに活用できる。
  • 共感ベースのコミュニティ:同じムードを選んだ人の投稿が並ぶことで、似た気持ちの相手と自然に繋がれる。「いいね数」競争にならない、穏やかなSNS体験を提供する。

制作中に困ったことと解決

課題開発環境と本番サーバーでSQLiteファイルの初期化挙動が異なり、デプロイ直後に「DBが存在しない」エラーが発生。

解決起動時にDBファイルの有無を確認し、無ければスキーマを自動生成する処理を追加。環境ごとの手動セットアップが不要となった。

PHP SQLite PDO CSRF対策 bcrypt JavaScript
掲示板アプリの画面: スレッド一覧と投稿フォーム
PHP / MySQL

掲示板アプリ

ユーザー認証・投稿・返信機能を備えた掲示板

公開コードの参照先は現在確認できていません。画面は保存済みスクリーンショットで確認できます。

PHP / MySQL 2026

掲示板アプリ

目的社内FAQ・ナレッジ掲示板の原型
成果登録・ログイン・投稿・返信機能
活用ナレッジ共有とWebアプリ保守理解
学習作品: PHP / SQL

社内FAQ・ナレッジ掲示板の原型として説明できます。権限管理、投稿履歴、入力値対策の基礎も示せます。

基本機能 4 セキュリティ対策 2 DB: MySQL PDOプリペアド

PHPとMySQLを使った掲示板アプリです。ユーザー登録・ログイン・投稿・返信の基本機能を実装しました。不正な入力への対策も入れました。PDOのプリペアドステートメント(値を後から当てはめる、安全な問い合わせ方法)でSQLインジェクションを防いでいます。またhtmlspecialcharsという関数で、入力された文字を画面に出す前に無害な形へ変え、XSSを防いでいます。

  • ログイン・投稿・返信などWebアプリに必要な基本機能を一通り実装しました。
  • PDO・セッション管理・入力値サニタイズなど、バックエンドのセキュリティ基礎を学びました。

想定した使い方

  • 部活・サークルの情報共有:会員登録制でクローズドな掲示板として運用。練習日程の連絡・出欠確認・反省会のスレッドなど、SNSに乗せにくい内輪向け情報の共有に使える。
  • 社内ナレッジ掲示板:業務手順・FAQ・トラブル対応事例をスレッドごとに整理。検索性が高く、新人教育や引き継ぎ資料としても活用できる。
  • 趣味コミュニティ:ゲーム攻略・読書感想・推し活など、テーマ別スレッドで深く語り合うニッチコミュニティ用の交流場として最適。
  • 学習グループのQ&A:勉強会メンバー間で質問・回答・解説をスレッド化。返信機能で議論が枝分かれし、過去ログとして学習資産にもなる。
  • イベント参加者交流:勉強会・オフ会・ワークショップ参加者向けの限定掲示板。事前の自己紹介、当日の感想シェア、アフターフォローに利用可能。
  • PHP/MySQL学習教材:ソースコード公開済みのため、CRUD操作・認証・セキュリティ対策の実装例として学習者の参考になる。

制作中に困ったことと解決

課題DB認証情報を db.php に直接記述しており、GitHub公開時に漏洩リスクがあることが判明。

解決db.php は .gitignore(公開しないファイルを指定する設定)に書いて、公開の対象から外しました。かわりに、値を仮の文字に置き換えた db.example.php を用意しました。READMEに準備の手順を書き、他の人が自分のパソコンで安全に動かせるようにしました。

PHP MySQL PDO XSS対策 セッション認証
サンプル企業サイトのトップページ: レスポンシブ対応のヒーロー画像とナビゲーション
HTML / CSS / JS

サンプル企業サイト

デザインカンプからコーディングしたレスポンシブサイト

公開デモとコードの参照先は現在確認できていません。表示するのは保存済みスクリーンショットです。

HTML / CSS / JS 2026

サンプル企業サイト

目的静的サイトの保守・改善スキル証明
成果レスポンシブ、DOM操作、軽量公開
活用社内ポータルや手順書ページの更新
学習作品: HTML / CSS

社内ポータルや手順書ページの保守に必要なHTML/CSS/JSの基礎を示す作品。ITサポートでは補助スキルとして活かせます。

訓練校から渡されたデザインカンプ(完成イメージの見本)のPDFを見ながら、架空企業「MagicMoon」の会社紹介サイトを作りました。画面には4つの動きを付けました。三本線のメニュー、なめらかに移動するスクロール、背景がずれて動く演出(パララックス)、ふわりと現れる演出です。これらはVanilla JS(道具を足さない、素のJavaScript)だけで書き、jQueryという道具は使っていません。事例ページではLightbox2によるギャラリーも実装しています。

  • Flexbox・CSS Gridによるレスポンシブレイアウトと、モバイルファーストのCSS設計を学びました。
  • jQuery不使用でVanilla JSによるDOM操作・IntersectionObserverを活用しました。

想定した使い方

  • 中小企業のコーポレートサイト:会社概要・事業内容・実績紹介・お問い合わせの基本構成が一通り含まれており、テンプレートとして即座にカスタマイズできる。HTML/CSS/JSのみで動くため、PHPサーバー不要で安価に運用可能。
  • 制作会社・デザイン事務所の実績ページ:事例ページのLightbox2ギャラリーは、施工事例・制作実績・撮影ポートフォリオなどの画像を美しく見せる用途に応用可。クリックで拡大表示できるため、訴求力が高い。
  • 採用サイトのテンプレート:ヒーロー画像・ミッション紹介・事業説明の構成を流用し、企業の採用LP(応募を集めるための1ページの紹介サイト)としても使える。フェードインアニメで応募者の印象に残るページ作りができる。
  • イベント・キャンペーンLP:1ページ完結型の構成を活かし、新商品発表・期間限定キャンペーン・展示会告知など短期運用LPの土台として有効。
  • HTML/CSS/JS学習教材:Flexbox・Grid・レスポンシブ・スムーススクロール・IntersectionObserverなど現代Web制作の基本技術を網羅。コードを読んで模写することで、初学者の実践的な学習素材になる。
  • 学習成果:見本のデザインを読み取り、HTMLとCSSで再現する練習として制作しました。

制作中に困ったことと解決

課題モバイルでハンバーガーメニューを開いたまま画面幅を変えると、メニューが閉じずレイアウトが崩れる。

解決resize イベントを監視し、PC幅に戻った時点でメニュー状態をリセットする処理を追加。複数ブレイクポイントで動作確認を実施。

HTML5 CSS3 Vanilla JS Lightbox2 レスポンシブ

今後も学習作品を追加します

新しい内容を学び、自分の言葉で説明できる状態になったものから追加します。