現在、大学で電気電子・情報工学を学びながら、趣味で撮影した写真（Nikon D3100を使用）を掲載するためのポートフォリオサイトをDjangoで自作しています。
PC向けのレイアウトはサイドバーを左に固定する形で概ね完成していたのですが、スマートフォン実機で確認した際、UIに課題が見つかりました。細い画面幅ではサイドバーがページ上部に縦長く展開されてしまい、メインコンテンツである写真ギャラリーへのアクセスを妨げていたのです。加えて、サイトが完成してすぐ友達に自慢しましたが、スマホで開くとUIが小さく不便だと言われ、スマホ専用のUIの開発が課題でした。
実際にiPhoneで開いた時の様子（改善前）
今回は、このレイアウトの改修と、実装を本番環境へ反映させる過程で遭遇したトラブルについて記録として残しておきます。
【UIの実装：Offcanvasを用いたメニューの最適化】
限られた画面領域を有効活用するため、スマートフォンでの閲覧時にはサイドバーを非表示にし、代わりに画面上部の「ハンバーガーメニュー」から引き出せるOffcanvas（ドロワー）形式のUIを採用することにしました。
実装にはBootstrap 5の標準機能を活用しています。 具体的には、ディスプレイユーティリティクラス（d-none d-md-flex など）を用いて、画面幅のブレークポイントを基準にPC用サイドバーとスマートフォン用ヘッダーの表示を切り替える設計にしました。これにより、既存のHTML構造を大きく崩すことなく、スムーズなレスポンシブ対応を実現しています。
実際にiPhoneで開いた時の様子（改良後）
【直面したエラー：デプロイ後の表示不具合】
ローカル環境での動作確認を終え、ホスティング先であるRenderへコードをプッシュしたのですが、ここで思わぬ事態が発生しました。デプロイ完了後に本番サイトへアクセスすると、画面が真っ白になり、何も表示されない状態に陥ってしまったのです。
レイアウトのHTMLを一部書き換えただけだったため、最初は原因が掴めず戸惑いましたが、1落ち着いてRender側のサーバーログを確認しました。
【原因の特定と解決：環境間の依存関係のズレ】
ログを解析した結果、エラーの原因は今回実装したスマホ用のUIコードではなく、直前に導入した別の機能（ブログ用リッチエディタの django-tinymce）にあることが分かりました。
ローカル環境のPCには該当パッケージをインストールして動作確認を行っていたものの、本番環境へ「どのパッケージが必要か」を伝える構成ファイル（requirements.txt）の更新と反映を忘れていたのです。結果として、Render側でモジュールが見つからず、サーバーの起動プロセスが停止していました。
すぐにターミナルで pip freeze > requirements.txt を実行して依存関係のリストを最新化し、再度プッシュを行うことで、無事に本番環境でも新しいUIが表示されるようになりました。
【まとめ】
今回の改修により、スマートフォンからでも写真やブログ記事へ快適にアクセスできる環境が整いました。
また副次的な収穫として、「ローカル環境で動くコードが、そのまま本番環境で動くとは限らない」というWebアプリケーション運用の原則を、身をもって学ぶことができました。開発を進める中でエラーに直面することは避けられませんが、ログから事実を読み解き、一つひとつ原因を特定していくプロセスは、エンジニアとしての確実な経験値になると感じています。
今後も少しずつ機能の拡張と、デザインのブラッシュアップを続けていく予定です。
※この文章はAI geminiを用いて作成しています。