このポートフォリオは EmDash で作っています — 構成の舞台裏

「EmDash って実際どうなの？」——その問いに一番正直に答えられるのは、自分で使ってみることだと思いますし、このサイト自体がAstro × EmDash 製です。ここでは、その構成と実装の舞台裏を公開します。

技術スタック

中心となるのは、軽量・高速なフレームワーク Astro と、その上で動くCMS EmDash です。スタイルは SCSS、型安全のために TypeScript を採用し、現在は Cloudflare（Workers + D1 + R2）で運用しています。

CMSもサイトも、同じCloudflare上。

この構成にした理由は、表示速度・SEO・更新性を全部取るため

ポートフォリオは、自分の技術力を示す場でもあります。表示速度・SEO・更新性。だからこそ、そのすべてに妥協したくありませんでした。Astro × EmDash なら、軽量な表示を保ちながら、実績やブログを管理画面から継続的に更新できます。コンテンツとコードを1つのプロジェクトで管理できるのも、個人で運用するうえで大きな利点です。

速さか更新性か、の二択を避けたかったんです。静的に書き出すだけなら速いが更新のたびにビルドが要り、管理画面で動的に出すなら更新は楽だが表示が重くなりがちで、その両方を一つのプロジェクトに収められる点が決め手でした。

EmDashで実装した仕組み

このサイトでは、EmDash のコレクションとカスタムフィールドを活かして、次のような仕組みを実装しています。

実績ページでは、案件ごとに「課題・担当範囲・使用技術・実装機能」を、本文とは別のカスタムフィールドで構造的に管理しています。実際の表示は制作実績でご覧いただけます。

本文1本に詰め込むと、使用技術を書いていない案件でも見出しだけが残ってしまうので、項目を分けてあれば、空の項目はセクションごと表示しないという扱いが可能です。

使ってみた実感

管理画面から編集した内容が、再ビルドを待たずすぐ反映されるのは快適です。コンテンツの設計（フィールド）を後から足せる柔軟さもあり、作りながら育てるサイトに向いていると感じています。新しいCMSゆえに情報はまだ少ないですが、そのぶん自分で検証した知見を、このブログで発信していきます。

ただし、フィールドを後から足した場合は、それ以前に登録した実績でその項目が空のまま残るので、表示側で空を許す作りにしておかないと、公開済みの実績ページに中身のない見出しだけが並ぶことになります。

足りない情報は、自分で書くしかありません。

EmDash や Astro での制作にご興味があれば、お問い合わせからお気軽にご相談ください。