第10回 人文学とデジタル技術（2026）
毎日のように利用しているウェブですが、その内側で何が起きているかを意識する機会は意外に少ないものです。本節では URL・HTML・リンク という3つのキーワードを軸に、ブラウザのアドレスバーに文字を入力してからページが表示されるまで の世界を順を追って解きほぐしていきます。
🌐 インターネット（Internet）
世界中のコンピュータを物理的につなぐ 通信網そのもの。電子メール、ファイル転送、動画配信、オンラインゲームなど、さまざまなサービスが上で動いている「土台」。
📄 ウェブ（World Wide Web）
インターネット上で動く 「文書同士をリンクで結びつけた仕組み」。1989 年に Tim Berners-Lee が CERN で考案。URL・HTTP・HTML の三つ組によって成り立っている。
つまり、「インターネット ＝ 道路網」、「ウェブ ＝ その上を走る郵便配達」のような関係です。本節で扱うのは後者の「ウェブ」の仕組みです。
ウェブ上のすべての資源（ページ・画像・PDF・動画）には、固有の住所として URL（Uniform Resource Locator）が割り当てられています。URL は一見すると長い記号列に見えますが、実は 意味のある5つのパーツ から構成されています。下の例で色分けされた各部分を見てみましょう。
https://www.example.com/info/page1?id=123#section1
通信規約。https:// が標準（暗号化通信）。http:// は非暗号化。
サーバーの所在（人間用の住所）。DNS が IP アドレスに翻訳。
サーバー内のリソースの論理的位置。階層を / で区切る。
動的パラメータ（?）／ページ内ジャンプ先（#）
▼ ドメイン名の階層構造
www.hmt.osaka-u.ac.jp
ドメインは 右から左へ階層が下がっていくのがポイント。末尾の トップレベルドメイン（TLD） には汎用 TLD（.com 商用、.org 非営利、.net ネットワーク）と国別 TLD（.jp 日本、.uk 英国）があり、さらに日本では .ac.jp（学術機関）・.go.jp（政府）・.co.jp（企業）など属性で分かれます。「.ac.jp」が付くサイトは信頼できる学術情報源 の目安にもなります。
▼ DNS による「名前 → 住所」の翻訳プロセス
人間に分かりやすい ドメイン名（example.com）と、コンピュータが使う IP アドレス（93.184.216.34）を翻訳してくれる仕組みが DNS（Domain Name System）。世界中の DNS サーバーが「インターネットの電話帳」として連携し、毎秒膨大な問い合わせを処理しています。
📍 絶対 URL と相対 URL
絶対 URL：https://www.example.com/info/page1 のように完全な形式。
相対 URL：../images/photo.jpg のように現在地からの相対位置。同じサイト内のリンクで多用される。
「www」は World Wide Web の略で、伝統的に「ウェブサービスがここにある」ことを示す慣習的なサブドメイン名。最近は省略するサイト（https://example.com のみ）も増えてきました。
ウェブページの正体は、HTML（HyperText Markup Language）という言語で書かれたテキストファイルです。「マークアップ言語」とは、文章の各部分に 「これは見出し」「これは段落」「これは画像」 といった意味のラベル（タグ）を付けていく言語のこと。タグを <...> という形で文章中に埋め込み、ブラウザはそれを読み取って画面に表示します。
▲ DOM ツリー：<html> をルートに、<head>（裏側の設定）と <body>（表示内容）が親子で枝分かれする入れ子構造
▼ 実際の HTML コード例（最小構成）
タグは原則として <開始>〜</終了> のペアで使い、その間に内容を挟みます。タグには href="..." のような属性を付けて、追加情報（リンク先 URL、画像のファイル名、言語など）を渡せます。
▼ 主なセマンティック要素（HTML5 以降）
<header>ページ／セクション冒頭
<nav>ナビゲーションメニュー
<main>主要コンテンツ
<article>独立した記事
<section>主題ごとのまとまり
<aside>補足・サイドバー
<figure>図表＋キャプション
<footer>ページ／セクション末尾
<time>日付・時刻データ
単に <div>（汎用の箱）を並べるのではなく、これらの意味のあるタグを使うことで、検索エンジン・スクリーンリーダー・他のソフトウェアが文書の構造を理解できるようになります。これを セマンティック（意味的）マークアップ と呼び、アクセシビリティと SEO の両面で重要です。デジタル人文学においてテキストデータを構造化して残すという思想とも深くつながっています。
私たちが見ているウェブページは、3つの言語が役割を分担して成り立っています。それぞれが「文書の構造」「見た目」「動き」を担当し、3つが組み合わさることで現代の表現豊かなウェブが実現しています。
HTML
Structure（構造）
文章の意味と階層を定義。「これは見出し」「これは段落」「これはリンク」。建物でいう 骨組み。
CSS
Presentation（見た目）
色・フォント・余白・レイアウトを指定。建物でいう 内装と外装。同じ HTML でも CSS だけで全く違う見た目に。
JavaScript
Behavior（動き）
ユーザーの操作に反応して画面を変える。建物でいう エレベーターや照明スイッチ。地図・SNS・チャット等の動的機能を実現。
💡 役割を分けることの意義（関心の分離 Separation of Concerns）
3つを役割ごとに分けて書くことで、デザインを変えるときは CSS だけ、動きを足すときは JS だけを編集すればよくなります。また同じ HTML を、PC 用・スマホ用・印刷用・スクリーンリーダー用と異なる CSS で出し分けられる柔軟性も生まれます。
アドレスバーに URL を入れて Enter を押すと、ほんの一瞬で画面にページが現れます。しかしその裏では、あなたのブラウザ（クライアント）とウェブサーバーの間で 「お願いします（リクエスト）／どうぞ（レスポンス）」 という対話が高速で行われています。これを HTTP（HyperText Transfer Protocol） と呼びます。
GET /info/page1 HTTP/1.1 のような形式で「このページください」と送信200 OK 等のステータスと HTML 本文を返信<link> <img> <script> から CSS・画像・JS も次々取得📊 主な HTTP ステータスコード
200 OK — 正常に取得301 / 302 — リダイレクト（別 URL へ）404 Not Found — ページが存在しない500 Server Error — サーバー側の不具合ブラウザの F12 キー（または右クリック→「検証」）で開発者ツールが開き、「Network」タブからこれらのリクエスト／レスポンスを実際に観察できます。ウェブの裏側を覗き見できる絶好の入口です。
HTML でもっとも特徴的な要素の一つが ハイパーリンク（<a href="...">）です。クリックするだけで別のページに飛べる、この一見当たり前の仕組みこそ、グーテンベルク以来の「読書」の概念を根本から書き換えた革命的な発明でした。リンクによって文書同士が網の目のように結ばれ、ウェブ全体が一つの巨大なネットワーク（グラフ）を形成しています。
🏠 内部リンク（Internal）
同じサイト内のページ間リンク。サイト内回遊性を高め、検索エンジンに構造を伝える。例：研究ブログ内で過去記事を参照。
🌍 外部リンク（External）
別のサイトへのリンク。参考文献・引用・推薦の役割。「信頼に値する情報源を紹介する」という承認の表明でもある。
▼ ウェブグラフが示す驚くべき性質
🎓 PageRank ── リンクを「学術引用」のように扱うアルゴリズム
Google の創業者 Larry Page と Sergey Brin が考案。「多くのページから引用（リンク）されているページほど重要だろう」という、論文の被引用数のアイデアをウェブに応用した発想です。さらに、重要なページから引用されているページはより重要と再帰的に評価する点が独創的でした。
こうしたウェブのネットワーク構造は、社会学・経済学・物理学などの諸分野で研究対象となっており、社会ネットワーク分析（SNA）の理論や手法がそのまま応用できます。デジタル人文学において「文化現象がどのように広がり、誰が中心で誰が周縁にいるのか」を実証的に追跡するための土台でもあります。
ウェブの最も驚くべき特徴は、特定の企業や国家の所有物ではなく、オープンな標準として運営されていることです。私たちが Chrome でも Safari でも Firefox でも同じページを見られるのは、誰もが従う共通のルール（標準仕様）があるからです。
🏛️ 標準化を担う組織
♿ アクセシビリティの理念
W3C は WCAG（Web Content Accessibility Guidelines）を策定し、視覚・聴覚・運動機能等に困難を抱える人も平等にウェブを使えるようにすることを目指しています。セマンティックな HTML・適切な配色・代替テキストなどはこの理念の実装です。
1989 年、CERN（欧州原子核研究機構）の研究者 Tim Berners-Lee は、世界中の物理学者が論文や実験データを簡単に共有できる仕組みを構想し、URL・HTTP・HTML の三点セットを発明しました。1993 年、CERN は 「ウェブの技術を無償で誰でも使える」 と宣言。この一つの決断が、今日の地球規模の情報インフラを生み出しました。Berners-Lee は今も「ウェブはみんなのもの」という理念を擁護し続けています。
人文学の研究者がウェブの構造を理解する意義 は、単に技術的なリテラシーを得ることに留まりません。それは「文化や知識がどのように生産・流通・保存されるか」という根本的な問いに、現代的な視点から向き合うことでもあります。本章の続く節では、この基盤を踏まえた上でウェブを分析する（Hyphe）、構築する（WordPress・GitHub Pages）、発信する（Notion ポートフォリオ）方法を学んでいきます。
ウェブ上の情報を収集・解析する専門的なツールの一つに Hyphe（イフ）があります。Hyphe はフランスの Sciences Po（シアンスポ）大学メディアラボによって開発されたオープンソースのウェブクローラで、社会科学や人文学の研究者がウェブ上のコーパスを構築・分析するために設計されています。一般的なクローラが自動で大量のページを巡回する「ブラックボックス」的な動作をするのに対し、Hyphe は研究者が主導してキュレーション指向のアプローチを採用している点が理論的特徴です。
🧭 ハイパーリンク・エスノグラフィを支える6つのキーコンセプト
1. デジタルメソッド
リンクを「承認・連帯・批判の投票」として読む視点。ウェブを「装置」として再定義。
2. クローリング
スノーボール式に「自分のフィールド」を建設する操作。要諦は「いかに止めるか」。
3. リゾーム
ウェブは「樹木」ではなく「地下茎」。境界線は研究者が能動的に「切断」する。
4. 二つの引力
トライブ（共同体的・密）とアイドル（優先的・疎）の力学。
5. 仲介者
構造的穴を埋める Broker。翻訳者・門番・外交官として権力を持つ。
6. 三層モデル
中心 / 周縁 / 外部の地形。社会学的に価値ある発見は「周縁」に宿る。
📦 ウェブエンティティ（Web Entity）── URL を社会的単位に翻訳する
通常のクローラは各 URL（ページ）ごとにデータを扱いますが、Hyphe では研究の都合に合わせて複数のページを一つの「アクター（主体）」として束ねて扱えます。「同じドメイン内のページは1エンティティ（＝サイト単位）」「サブドメインごとに分ける」「複数サイトを統合する」など柔軟な単位設定が可能です。これによりウェブを「ページ」ではなく「アクター間の関係」として記述でき、自動収集（Crawl）と人間の判断（Curation）を融合させた「解釈されたデータ」を構築できます。
🤝 トライブ（共同体的接続）
原理：類は友を呼ぶ（同質性）／形：三角形・クリーク（密）／意味：仲間・界隈／性質：水平的・相互的
分析の狙い：エスノグラフィが探すべきはこちら。「濃い文脈」はここに宿る。
⭐ アイドル（優先的接続）
原理：富める者は富む（マタイ効果）／形：スター型・ハブ（疎）／意味：権威・有名人／性質：垂直的・非対称
注意：放っておくとクローラはここへ漂流（Drift）する。
🎯 ウェブの三層モデル ── どこを掘るかの羅針盤
第1層：中心
Google / Wikipedia / SNS
「壁紙」のような存在
× シードにしない
第2層：周縁 ★
専門家・当事者団体
論争の現場・トライブ
◎ ここに留まれ
第3層：外部
断片的なロングテール
ノイズ・無関係
△ 深入りしない
第1層は「あまりに一般的すぎて差異が見えない」、第3層は「あまりに希薄すぎて関係が見えない」。その間の第2層だけが、中心への引力を受けつつも独自のコミュニティを維持しており、社会学的構造を持っています。
🌉 仲介者（Broker）── 構造的穴を埋める者
最もリンクが多いノードは「人気者」に過ぎませんが、異なるクラスターをつなぐノード（Betweenness が高い）は「権力者」です。彼らは 翻訳者・門番・外交官 の三つの顔を持ち、情報の流通をコントロールします。巨大ハブではなく、「一見地味だが不可欠な仲介者」を見逃さないことが重要です。
⚖️ Hyphe ナビゲーションの黄金律
「周縁を見つけ、周縁に留まり、周縁を厚くせよ」
飽和点（いつ止めるか？）── 完了の見極め
新しい候補（Discover）が ①ハイパーセンター（Google・FB など） か ②エクサーブ（無関係な広告・通販） ばかりになった時が「完了」の合図です。「これ以上広げても新しい文脈は出ない」と判断して止めること。それは敗北ではなく、「地図の縮尺を決定した」という勝利宣言です。
🗺️ 活用可能性 ── ウェブを「地図化」する
Hyphe は人文学・社会科学の研究で多様な活用可能性を持ちます。例えば議論圏の可視化（気候変動問題ではウェブ上の懐疑派の存在感が予想以上に大きいことを明らかにした事例があります）、社会運動のトポロジー分析（中心的組織から周縁の支援者まで含めた運動圏の地図化）、ウェブアーカイブとの連携（Internet Archive やフランス国立図書館のウェブ保存に対応し、過去の言説空間の時系列比較）など。Hyphe はウェブ上に広がる情報の「地図」を描くことを可能にし、新しい視点で文化現象や社会問題を研究することを助けてくれます。
ウェブページを実際に構築・公開する方法はいくつかあります。本節では、CMS の代表格である WordPress と、エンジニア・研究者にも人気の GitHub Pages の2つを取り上げます。WordPress はブログやサイトを構築・運用できるオープンソースの CMS（コンテンツ管理システム）で全世界のウェブサイトの相当割合で採用されており、GitHub Pages は静的サイトを GitHub から無料で配信できるサービスです。どちらを選ぶかは、扱う内容（動的か静的か）・更新頻度・技術的な好みによって決まります。
☁️ WordPress.com（クラウド型）
→ 手軽さ重視・ウェブ技術に不慣れな方向け
🖥️ WordPress.org（自前設置型）
→ 研究サイト等の本格運用・長期資産向け
⚙️ 自前設置型サイト構築の3ステップ
サーバー契約
ロリポップ!、さくらインターネット、エックスサーバー、ConoHa WING 等、PHP とデータベース（MySQL 等）が利用可能なレンタルサーバーを用意。WordPress 簡単インストール機能対応のものが便利。
ドメイン取得と SSL 設定
プロジェクト名等にちなんだ独自ドメインを取得（お名前.com、ムームードメイン等）。無料の Let's Encrypt 証明書で通信を暗号化（HTTPS 化）し、セキュリティを確保。
WordPress のインストールと初期設定
サーバーの簡単インストール機能を活用。サイトタイトル・管理者情報・独自ドメインを入力するだけで自動セットアップ。パーマリンク（推奨：投稿名ベース）や SSL 対応の確認も忘れずに。
10.3.3 コンテンツ設計
良いウェブサイトを作るには、闇雲にページを作り始める前にサイト全体の構成（情報設計）をしっかり考えることが大切です。人文学系の研究者が自身のサイトを作る際によくある目的として、(a) 自身の研究や業績を紹介する個人サイト、(b) 特定の研究プロジェクトの公式サイト（ポータル）、(c) 論文や資料のアーカイブサイト、などが挙げられます。
研究紹介サイト（個人サイト）
研究テーマ、業績一覧（論文PDF・DOI付き）、プロフィール（写真・略歴・所属学会）、連絡先。自分の専門分野や関心を外部の人に伝える名刺代わりとなるサイト。
プロジェクトポータルサイト
プロジェクトの背景・目的、メンバー一覧、活動報告（ブログ形式）、成果物公開ページ、イベント告知ページ。SNSアカウントへのリンクも設置。
論文アーカイブサイト
論文や記事の一覧（発表年度別・テーマ別・著者別など複数の切り口で誘導）。各論文の個別ページにタイトル、著者、掲載誌、要旨、参考文献リスト、PDF フルテキストへのリンクを掲載。
重要なのは、ユーザー（訪問者）が求める情報にできるだけ少ないクリックで到達できるようにすることです。一般に「3クリック以内で目的の内容にアクセスできる」ことが望ましいとされます。ナビゲーション設計や内部リンクの配置、モバイル対応（レスポンシブデザイン）なども重要なポイントです。
10.3.4 最低限のデザイン原則
🎨 配色（カラーリング）
背景色と文字色のコントラストを確保（白背景に黒文字等）。アクセントカラーは1色程度に絞って統一感を出す。色覚多様性にも配慮。研究サイトは落ち着いたトーンで信頼感を演出。
✏️ タイポグラフィ
游ゴシックや Noto Sans Japanese 等のシステムフォントが安定。本文 16px 以上、行間も十分に。見出しは <h1>〜<h3> タグで構造を明確化（アクセシビリティ・SEO 上も重要）。
📱 モバイル対応
レスポンシブデザインは必須。タップしやすいボタン間隔、ハンバーガーメニューの導入を確認。Google はモバイルファーストインデックスに移行済みのため、SEO 上も重要。
🧩 テーマの選定
サイト目的に合致し、動作が軽く、更新が継続されている公式テーマ（Cocoon、Astra、GeneratePress 等）を選ぶ。初心者はカスタマイズしやすい汎用テーマがおすすめ。
🐙 10.3.5 GitHub Pages による公開 ── もう一つの選択肢
GitHub Pages は、GitHub リポジトリの内容をそのまま静的サイトとして無料で公開できるサービスです。HTML/CSS/JS を直接置く方式と、Markdown を Jekyll や Hugo 等の静的サイトジェネレータで変換する方式があります。データベース不要・サーバー管理不要・無料・高速・HTTPS 標準対応という強みがあり、論文サイト、研究者プロフィール、プロジェクトドキュメント、講義資料の公開などに非常に相性が良い選択肢です。
📊 WordPress と GitHub Pages の使い分け
| 観点 | WordPress | GitHub Pages |
|---|---|---|
| サイトの種類 | 動的（DB あり） | 静的（HTML 配信） |
| 費用 | サーバー＋ドメイン代 | 無料（独自ドメインも可） |
| 編集方法 | ブラウザの管理画面 | Markdown／HTML をコミット |
| 保守・更新 | PHP・プラグインの更新が必要 | ほぼ不要（静的のため） |
| セキュリティ | 対策が必要 | 脆弱性が少ない |
| 向く用途 | ブログ・お知らせ・会員制 | 論文サイト・ポートフォリオ・ドキュメント |
| 必要スキル | 管理画面の操作 | Git の基本操作 |
⚡ GitHub Pages 公開の3ステップ
リポジトリを作成
GitHub で新規リポジトリを作成し、index.html をアップロード（または既存サイトを git push）。ユーザーサイトなら ユーザー名.github.io という名前で作成。
Settings → Pages を有効化
リポジトリの Settings → Pages から、配信ブランチ（通常 main）と公開フォルダ（/ (root) や /docs）を指定。数分で https://ユーザー名.github.io/リポジトリ名/ が公開される。
更新は git push するだけ
ローカルでファイルを編集 → git commit → git push すると、GitHub が自動でビルド・再配信。バージョン管理と公開が一体化しているため、過去の版にもいつでも戻せる。
📝 静的サイトジェネレータ（SSG）の活用
Markdown で原稿を書き、HTML/CSS に自動変換するツール。GitHub Pages と組み合わせると、論文・授業資料・ノートの公開が非常にスムーズになります。
GitHub 標準・Ruby
高速・Go 製
学術文書・R/Python 統合
モダンな JS フレームワーク
💡 人文学研究者にとっての魅力：論文 PDF・データセット・コード・解説を 1つのリポジトリで一括管理・公開でき、Zenodo 等と連携すれば DOI 発行も可能。再現可能な研究（Reproducible Research）と相性が良く、Quarto を使えば数式・引用・図表も含めた論文サイトを Markdown だけで構築できます。
🎓 10.3.6 まずは何から？ ── 初学者におすすめの2大学習リソース
「ウェブページの仕組みに興味はあるけれど、HTML や CSS を書いたことがなく、何から始めればいいか分からない」── そんな方には、オンライン学習（Progate）と書籍の両輪で学ぶことをおすすめします。手を動かして即時フィードバックを得る学習と、体系的に通読して全体像をつかむ学習はそれぞれ補完的で、組み合わせることで理解が一気に深まります。
① Progate（プロゲート） ── ブラウザだけで学べるオンライン学習
環境構築が不要で、スライド形式の解説を読みながらブラウザ上のエディタにコードを書き、その場で結果が確認できる構成。プログラミング未経験の人文系学生でも無理なく始められます。
📘 Progate の特徴
🛤️ おすすめの学習順序
② 1冊ですべて身につく HTML & CSS と Web デザイン入門講座［第2版］（Mana 著、SB クリエイティブ）
HTML・CSS の文法だけでなく、Web デザインの考え方（配色・タイポグラフィ・レイアウトの原則）まで1冊で学べるロングセラー。豊富なカラー図版と実践的なサンプルサイトの制作を通じて、「動くもの」を作りながら理解できる構成になっています。
📖 本書の特徴
💡 こんな人におすすめ
学習の組み立て方：まず Progate で「コードを書くと画面に何かが現れる」感覚をつかみ（1〜2週間）、並行して書籍を1章ずつ読み進めて体系を整える──この往復が最も効率的です。両方をひと通り終えると、本章で扱った URL・HTML・CSS・リンクの概念が腑に落ち、シンプルな自分のウェブページを GitHub Pages で公開できるレベルに到達します。そのうえで WordPress のテーマカスタマイズに進んだり、Hyphe で集めたウェブグラフを自分で可視化したりと、応用の幅が一気に広がります。「読める」から「書ける」へ──1日30分から始めてみてください。
10.4.1 Notion でポートフォリオを作成する意義
Notion はドキュメント作成やタスク管理、データベース管理など多機能な「オールインワン」ワークスペースですが、そのページはワンクリックで魅力的な Web サイトに変換できる点が大きな特徴です。ポートフォリオとは、自分のこれまでの研究・学習・活動やスキルなどをまとめた自己紹介・業績集のことです。大学院生にとってのポートフォリオは、自身の歩んできた道のりや将来のビジョンを整理し、第三者に伝える自己PRツールであり、同時に自己省察の機会にもなります。
✨ 手軽さと自由度
コード知識不要・ドラッグ&ドロップで自由にレイアウト
🔄 更新のしやすさ
修正が即座に Web に反映。最新状態を保ちやすい
📚 コンテンツ一元化
動画・PDF・外部サイトを1ページに統合
💼 ITスキルのアピール
最新ツールを使いこなす適応力の証明にもなる
10.4.2 コンテンツ構造化の実践方法
Notion ではコンテンツをブロックと呼ばれる単位で管理します。ポートフォリオに載せる内容は大きく5つに分けて考えると整理しやすいです。
1. プロフィール
氏名・所属、自己紹介文
2. キャリア
過去〜現在〜未来の歩み
3. 研究
テーマ・概要・プロセス
4. スキル・実績
学歴・スキル・業績
5. 私生活・趣味
パーソナルな側面
ページとサブページによる構成、テキストの装飾とレイアウト（見出し・箇条書き・番号付きリスト）、視覚要素の活用（画像や図表、引用ブロック、コールアウトブロック）、リンクや埋め込み（YouTube 動画、Google マップ等のプレビュー埋め込み）、テンプレートの活用などが実践のポイントです。
10.4.3 Notion データベース機能の紹介と応用
Notion の強力な機能の一つにデータベースがあります。表計算シートのような柔軟さと本格的なデータ管理機能を兼ね備え、情報の一覧管理や多角的なビュー表示が可能です。
📋 テーブルビュー
表形式。業績や論文を一覧管理し、タグでソート・フィルタ。
📝 リストビュー
シンプルな縦長リスト。タイトル中心の閲覧に。
📌 ボードビュー
カンバン方式。ステータス別にカードを配置。
📅 カレンダービュー
日付基準で配置。イベント実施日を可視化。
🖼️ ギャラリービュー ★
画像サムネイル付きカード。制作物・ポスターに最適。
📊 タイムラインビュー
ガントチャート風。プロジェクト期間を時間軸に。
例えば論文一覧データベースなら、「タイトル」「掲載年（日付）」「学会名/誌名（テキスト）」「分類（選択肢あるいはタグ）」などのプロパティを設定しておけば、後から発表年順やカテゴリ別にソート・フィルタして表示するといった操作も簡単です。ギャラリービューは特にポートフォリオで視覚的に訴えたい場合におすすめで、各プロジェクトのスクリーンショットや成果物の画像を並べて一目で内容を伝えられます。
10.4.4 Notion ページを Web 上に公開する手順
完成した Notion ページは、設定を変更することでウェブ上に公開できます。手順は非常に簡単です。
「共有」ボタンをクリック
公開したい Notion ページを開き、画面右上の「共有」ボタンをクリック。
「Web 公開」タブを有効化
共有メニュー内で「Web 公開」タブに切り替え、「Web で公開」スイッチをオンにする。公開用の URL が自動生成される。
公開 URL をコピー・共有
表示された公開 URL をコピーし、共有先（教員や面接官など）に送付。リンクを知っている人なら Notion アカウントなしでも閲覧可能。
公開設定の注意点 ── 限定公開のセキュリティ
プライベートな情報を守るため、「ネット検索を許可」がオフになっていることを必ず確認してください（検索エンジンからの除外）。また、第三者による改変を防ぐため「編集を許可」もオフのままにしておきましょう。「テンプレートとして複製を許可」は必要に応じて設定します。
ポートフォリオの5つのセクション（プロフィール、キャリアとビジョン、研究、スキル・実績、私生活・趣味）それぞれについて、何を書くべきかを具体的にイメージできるよう質問形式のガイドと例を交えながら解説しています。
プロフィール
氏名・所属・専門分野を簡潔に。1〜3行程度の自己紹介文。可能であれば顔写真やイメージ画像も配置。ビジュアルとテキストを組み合わせることで第一印象を強め、印象付ける効果があります。
キャリアとビジョン
【過去】【現在】【未来】の三つの観点から整理。「なぜ大学院に進学したのか？」「現在取り組んでいることや直近の目標」「5年後、10年後のビジョン」。自分の考えや感情を織り交ぜることが大切。
研究
研究テーマ・概要（専門用語を避け平易な言葉で説明）、研究の意義・面白さ（自分なりの視点で語る）、これまでの成果、研究プロセス・スタイル（カバンの中身、お気に入りの研究道具、デジタルツール活用、作業場所・環境など）。
スキル・実績
学歴・経歴、専門スキル（言語・データ分析・資料調査など）、資格・免許、研究業績、受賞歴・表彰、その他の活動実績。カテゴリ分けして整理すると見やすくなります。
私生活・趣味
パーソナルな側面を見せるセクション。食事スタイル、リフレッシュ方法、一日のルーティン、作業効率アップの工夫、おすすめの本・映画・動画、アルバイト経験、お気に入りの場所など。「等身大の自分」を見せましょう。ただしプライバシーには注意。