緒言
こんにちは，無事に大学院へ進学し，修士1年になりました．今回は自分が配属された研究室のホームページをゼロから作ってみた体験を振り返り，これから研究室のホームページを作ってみたい，と考えている方に向けて解説します．
この記事を読めば一通り形になるところまで作れます．そこからはデザインを変更したり，アニメーションに拘ってみたり，と様々なアレンジが可能です．今回はシンプルなHTMLとCSSとJavaScirptのみで構成される静的サイト，かつ，必要なツールも汎用的なエディタのみであるため，思っていたよりもハードルは低いように感じました．是非，挑戦してみてください．
開発環境
- Windows 11 Home 24H2
- Visual Studio Code 1.100.3
- Live Server 5.7.9
作り始めた動機
自分が配属された研究室のホームページは約10年くらい更新されておらず，勉強も兼ねて作り直してみよう，と考えたことがきっかけでした．学部生の頃に研究室を選ぶため，何個か候補に挙がった研究室のホームページを見ていたのですが，長く更新されていないことは少し不安に感じました．研究内容に興味を持って現在の研究室を選んだものの，やはり研究室のホームページは研究内容や研究実績を効果的に発信し，研究室に魅力を感じてもらう手段として重要であるように思います．
さて，研究室のホームページを更新することになりましたが，最初から作った方がシンプル，かつ，メンテナンスの観点からも好ましいため，折角なら今まで触れる機会が少なかったホームページの作り方を勉強することも兼ねてゼロから作ってみることに決めました．
事前の準備
まずは研究室のホームページを本格的に作っていく前段階として必要な素材を集める他，全体的な構成まで大雑把に決めておきます．
コンテンツ
何個か研究室のホームページを見て特に掲載されることが多いコンテンツを調べました．その傾向から考えた基本的な構成は以下の通りです．これらに対応するページを個別に作っていきます．ただし，ヘッダーやフッター等，なるべく共通化できる部分は共通化しました．
- ホーム
- 研究内容
- 研究実績
- お知らせ
- メンバーの紹介
- アクセス情報
- 関連リンク
素材
その他，研究室の紹介文や写真，研究内容，研究実績，教授のプロフィール等，研究室のホームページを作る上で必要な素材は教授や秘書の方と相談しながら送ってもらいました．連絡を取り合う上で少し時間は掛かってしまいましたが，具体的に集めた素材は以下の通りです．
- 教授の顔写真
- 教授のプロフィール
- 研究室のロゴ
- 研究室の写真
- 研究室の紹介文
- 研究内容
- 研究実績
制作の手順
ここから研究室のホームページを作る手順に関して解説します．まずは全体的なレイアウトを作った後，細かい構成やアニメーションの付け方も簡単に解説します．
基本的な知識
読み飛ばしてもらっても構いませんが，前提として必要な知識を確認します．まず，HTMLでホームページの構造を記述し，CSSでデザインを整え，必要に応じてJavaScriptやCSSでアニメーションを実装します．また，スマホからのアクセスが増加する昨今，レスポンシブウェブデザインを取り入れることは特に重要です．ファイルはローカルで管理し，ブラウザで表示を確認しながら制作しますが，完成したらサーバーにアップロードして公開します．
余談ですが，本来の意味や英語圏の表現においてホームページはウェブサイトを開いたら最初に表示されるページのことを指します．しかし，日本語の表現においてホームページはウェブサイトと同義であることも多いため、混同しないように注意が必要です．今回は日本語の表現に合わせてホームページはウェブサイトのことを指し，トップページはウェブサイトを開いたら最初に表示されるページのことを指します．
全体的なレイアウト
ここではトップページを例に挙げますが，どのページも同様です．まずは大雑把にレイアウトを組みます．後々ヘッダーやフッター等は共通化し，PHPで読み込む予定ですが，今回は静的サイトなので割愛します．
See the Pen layout by ryo (@ricelectric) on CodePen.
ヘッダーの作り方
次にヘッダーのデザインを考えてみます．左側に研究室のロゴ，右側にグローバルナビゲーションを配置しました．スマホで表示されることも想定し，画面幅が狭い場合は代わりにハンバーガーメニューが表示されるように作りました．これをクリックすることで左側から右側にメニューが展開されます．この切り替わる境目，ブレイクポイントは全体的なレイアウトのバランスも踏まえて考えました．また，マウスのカーソルを合わせた際に下線が表示されるようなアニメーションも実装してみました．
See the Pen header by ryo (@ricelectric) on CodePen.
フッターの作り方
併せてフッターのデザインも考えてみます．今回は中央に研究室の所属，名称を掲載しました．これをクリックすればトップページに戻ります．また，最下部にコピーライトを表示しておきます．
See the Pen footer by ryo (@ricelectric) on CodePen.
文章のデザインを決める
文章のタイトルやサブタイトルのレイアウトを示します．まずは非常にシンプルなデザインで作ってみましたが，後々アレンジするのも手です．
See the Pen text by ryo (@ricelectric) on CodePen.
表の作り方
簡単な表の作り方を示します．要素と要素の間に線を引くため，隣接セレクタを使って記述しました．他に間接セレクタ，直下セレクタ，といった書き方もあることを知り，勉強になりました．
See the Pen list by ryo (@ricelectric) on CodePen.
ボタンの作り方
無難なボタンの作り方を示します．マウスのカーソルを合わせた際に背景色と文字色が変化するようなアニメーションも実装してみました．
See the Pen button by ryo (@ricelectric) on CodePen.
画像の載せ方
画像の載せ方を解説します．レイアウトが崩れてしまうことを防ぐため，縦横比を固定し，食み出した部分は自動でトリミングされるように記述しました．画像のサイズを指定する必要もありますが，スマホで表示されることを想定し，相対値で指定しました．ただし，極端な拡大，縮小を防ぐため，最大幅や最小幅も併せて指定することが望ましいです．
See the Pen image by ryo (@ricelectric) on CodePen.
地図の載せ方
最後にGoogleマップの埋め込み方を解説します．まずはGoogleマップで地名を検索し，共有ダイアログを開いて埋め込み用のコードを取得するだけなので非常に簡単です．ここで注意ですが，スクリーンショットを公開することは原則として禁止されているようなので必ず前述の手順で埋め込みましょう．この方が位置や縮尺を調整できる他，最新の地図に自動で更新されるため，便利です．スマホで表示されることを想定し，画面幅が変化しても見やすいように縦横比を固定しました．
See the Pen map by ryo (@ricelectric) on CodePen.
表示の確認
今回はこちらのプラグインをインストールし，簡易的なローカルウェブサーバを立ち上げて表示を確認しました．ファイルを更新したら自動でブラウザに反映されるため，とても効率的に開発できます．以下のサイトを参考に導入しました．
基本形が完成
ここまでのコンテンツを組み合わせることでホームページの基本形は完成します．それぞれのページを順番に見ていきましょう．なお，それぞれのファイルはGitHubに公開したのでこちらからダウンロードできます．また，デモサイトもこちらから確認できます．
ホーム
まずはトップページから．ボタンを押すことで各ページにジャンプします．ここでは研究室の概要に加えて研究室のニュースを直近3件だけ載せます．素っ気ないようでしたら画像や動画を載せるのも手です．
研究内容
次に研究内容を解説するページです．研究室にとって特に重要かもしれません．研究室によって大きく異なるところであるため，あくまでも参考例として示します．
研究実績
研究実績を一覧で紹介するページです．ここでは年度ごとに取り纏め，論文のタイトル，著者名や雑誌名，出版年などを掲載します．
お知らせ
研究室のニュースを掲載するページです．トップページにおいては直近3件だけ載せましたが，こちらのページにおいては全件を載せます．
メンバー紹介
研究室のメンバーを紹介するページです．なお，教授のプロフィールについては別途ページを用意し，そちらに掲載しました．そのリンクを貼って誘導します．ほとんど作り方は同じなので割愛します．
アクセス情報
研究室の所在地や最寄り駅，連絡先などを掲載するページです．なお，メールアドレスを公開する場合はアットマークを別の文字に置き換えて注記を入れる，エンティティ化する，画像として公開する，といったスパム対策が必要です．
感想
記事を書く過程で解説しやすいように手順は少し前後してしまった部分もありますが，大きな相違はないため，ご了承ください．初心者だからこそ，基本的なところで割と苦戦しましたが，生成AIも上手く活用し，理解が深まったように思います．最初は難しそうに思っていたアニメーションもCSSやJavaScriptを用いて実装できたことは嬉しい誤算です．最後に全体を通じて良かった点，難しかった点を振り返ってみます．
良かった点
- 全体的にシンプルなデザイン
- モダンに見えるアニメーション
- 生成AIを活用して効率的に学習
難しかった点
- レイアウトの組み方
- レスポンシブウェブデザイン
結言
割り切って作れば思っていたよりも短期間で作れたように思います．また，作りながら必要な知識も徐々に習得できました．スムーズに進めるため，最初から凝ったデザインで作らないこと，教授や秘書の方と連絡を取って必要な素材を事前に集めること，スマホにおける表示も前提にレイアウトを考えることは特に重要であったように思います．これから研究室のホームページを作ってみたい，と考えている方にとって何らかの参考になれば幸いです．
なお，今回は基本的なホームページの作り方に絞って解説しました．ここからデザインやアニメーションに拘ったところは本題から少し逸れるように感じたので別の記事に書く予定です．以上，研究室のホームページをゼロから作ってみた話でした．