Skip to content

Commit 8178c80

Browse files
author
y-yamasaki
committed
文言調整
1 parent 557e1c7 commit 8178c80

15 files changed

Lines changed: 551 additions & 1530 deletions

‎WebSite/blog/blog_00001.html‎

Lines changed: 243 additions & 718 deletions
Large diffs are not rendered by default.

‎WebSite/blog/blog_00012.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ <h1 class="post-detail__title">静的サイトにお問い合わせフォーム
103103
</div>
104104
</header>
105105
<section class="post-detail__body markdown-body reveal-on-scroll"><p>こんにちは！パン君です。</p>
106-
<p>このサイトは GitHub Pages でホスティングしている静的なWebサイトです。 </p>
106+
<p>このポートフォリオサイトは GitHub Pages でホスティングしている静的なWebサイトです。 </p>
107107
<p>そしてお問い合わせを実装するにはメールに送信するための仕組みがいります。<br>API実装を常駐サーバーでトンネル通信をPlayit.ggを利用して行っていますが、数週間前からトンネルの作成が出来ずに困っています...<br>(公式には連絡したのですが...)</p>
108108
<p>そこで今回は <strong>Google Apps Script (GAS)</strong> を簡易的なバックエンドAPIとして利用し、完全無料でメール送信機能を実装しました。 </p>
109109
<h2 id="なぜ-gas-google-apps-script-なのか">なぜ GAS (Google Apps Script) なのか</h2><p>静的サイトでフォームを実装する方法はいくつかあります。 </p>
@@ -225,7 +225,7 @@ <h2 id="まとめ">まとめ</h2><p>サーバーレスな環境でも GAS を組
225225
<li><strong>GAS</strong> は無料かつ手軽なバックエンドとして優秀。</li>
226226
<li><code>fetch</code> の <code>Content-Type</code> を工夫することで CORS 問題を回避できる。</li>
227227
</ul>
228-
<p>これでプロダクトサイトから直接お仕事の相談を受け付ける準備が整いました！</p>
228+
<p>これでポートフォリオサイトから直接お仕事の相談を受け付ける準備が整いました！</p>
229229
</section>
230230
<div class="share-buttons">
231231
<p class="share-buttons__title">SHARE</p>

‎WebSite/blog/blog_00013.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="ja">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>プロダクトの詳細表示をモーダル化してUXを改善する | PanKUN Blog</title>
5+
<title>ポートフォリオの詳細表示をモーダル化してUXを改善する | PanKUN Blog</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="description" content="プロダクトサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。" />
7+
<meta name="description" content="ポートフォリオサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。" />
88
<link rel="canonical" href="https://breadmotion.github.io/WebSite/blog/blog_00013.html" />
99
<link rel="alternate" hreflang="ja" href="https://breadmotion.github.io/WebSite/blog/blog_00013.html" />
1010
<link rel="alternate" hreflang="en" href="https://breadmotion.github.io/WebSite/blog/en/blog_00013.html" />
@@ -23,8 +23,8 @@
2323
"@type": "WebPage",
2424
"@id": "https://breadmotion.github.io/WebSite/blog/blog_00013.html"
2525
},
26-
"headline": "プロダクトの詳細表示をモーダル化してUXを改善する",
27-
"description": "プロダクトサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。",
26+
"headline": "ポートフォリオの詳細表示をモーダル化してUXを改善する",
27+
"description": "ポートフォリオサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。",
2828
"image": [
2929
"https://breadmotion.github.io/WebSite/assets/img/ogp.png"
3030
],
@@ -44,8 +44,8 @@
4444
}
4545
}
4646
}</script>
47-
<meta property="og:title" content="プロダクトの詳細表示をモーダル化してUXを改善する | PanKUN Blog" />
48-
<meta property="og:description" content="プロダクトサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。" />
47+
<meta property="og:title" content="ポートフォリオの詳細表示をモーダル化してUXを改善する | PanKUN Blog" />
48+
<meta property="og:description" content="ポートフォリオサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。" />
4949
<meta property="og:type" content="article" />
5050
<meta property="og:url" content="https://breadmotion.github.io/WebSite/blog/blog_00013.html" />
5151
<meta property="og:image" content="https://breadmotion.github.io/WebSite/assets/img/ogp.png" />
@@ -69,13 +69,13 @@
6969
<ol class="breadcrumb__list">
7070
<li class="breadcrumb__item"><a href="../index.html">ホーム</a></li>
7171
<li class="breadcrumb__item"><a href="../blog.html">ブログ</a></li>
72-
<li class="breadcrumb__item" aria-current="page">プロダクトの詳細表示をモーダル化してUXを改善する</li>
72+
<li class="breadcrumb__item" aria-current="page">ポートフォリオの詳細表示をモーダル化してUXを改善する</li>
7373
</ol>
7474
</nav>
7575
<header class="post-detail__header">
7676
<p class="post-detail__meta">2025/11/27 / 技術メモ</p>
77-
<h1 class="post-detail__title">プロダクトの詳細表示をモーダル化してUXを改善する</h1>
78-
<p class="post-detail__description">プロダクトサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。</p>
77+
<h1 class="post-detail__title">ポートフォリオの詳細表示をモーダル化してUXを改善する</h1>
78+
<p class="post-detail__description">ポートフォリオサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。</p>
7979
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=javascript">javascript</a> <a class="tag" href="../blog.html?tag=ui-ux">ui-ux</a></p>
8080
<div class="share-buttons">
8181
<p class="share-buttons__title">SHARE</p>
@@ -103,11 +103,11 @@ <h1 class="post-detail__title">プロダクトの詳細表示をモーダル化
103103
</div>
104104
</header>
105105
<section class="post-detail__body markdown-body reveal-on-scroll"><p>こんにちは！パン君です。</p>
106-
<p>これまでこのサイトの「プロダクト一覧」から作品をクリックすると詳細ページ（<code>portfolio/xxxx.html</code>）に遷移する仕様になっていました。</p>
107-
<p>しかしプロダクトを見に来てくれた人は「 <strong>いろいろな作品をザッピングしたい</strong> 」はずです。<br>「クリックして詳細へ移動」→「ブラウザバックで戻る」→「またスクロールして次の作品へ...」という操作は、地味ながらストレスになります。 </p>
106+
<p>これまでこのサイトの「ポートフォリオ一覧」から作品をクリックすると詳細ページ（<code>portfolio/xxxx.html</code>）に遷移する仕様になっていました。</p>
107+
<p>しかしポートフォリオを見に来てくれた人は「 <strong>いろいろな作品をザッピングしたい</strong> 」はずです。<br>「クリックして詳細へ移動」→「ブラウザバックで戻る」→「またスクロールして次の作品へ...」という操作は、地味ながらストレスになります。 </p>
108108
<p>そこで <strong>一覧ページを維持したまま、詳細情報をモーダルウィンドウで重ねて表示する</strong> 形に改修しました。</p>
109109
<hr>
110-
<h2 id="実装の方針">実装の方針</h2><p>このサイトはビルドツールを使ってMarkdownファイルから静的なHTMLファイルを生成しています。<br>プロダクトの詳細ページもすでに <code>portfolio/work_01.html</code> のような形で実ファイルとして存在しています。</p>
110+
<h2 id="実装の方針">実装の方針</h2><p>このサイトはビルドツールを使ってMarkdownファイルから静的なHTMLファイルを生成しています。<br>ポートフォリオの詳細ページもすでに <code>portfolio/work_01.html</code> のような形で実ファイルとして存在しています。</p>
111111
<p>JSONデータにすべての情報を詰め込んでJSで構築する方法もありますが、<br><strong>「すでに生成されている詳細ページのHTMLを再利用する」</strong> 方が、SEO的にもビルドフロー的にも無駄がありません。</p>
112112
<h3 id="処理の流れ">処理の流れ</h3><ol>
113113
<li>ユーザーがカードをクリック。</li>

0 commit comments

Comments
 (0)