西洋画家のポートフォリオ · アーティストサイト
キム・ハンヨン スタジオ
油彩を専門とする現代美術家キム・ハンヨンのポートフォリオサイトを企画・デザイン・構築しました。作品・展示・略歴を、作品画像を主役にしたミニマルなギャラリーで見せ、韓国語・英語・フランス語・日本語の4か国語に対応します。
プロジェクト概要
キム・ハンヨン(Kim Hanyoung)は純粋な油彩で制作する現代美術家で、風景と「黄昏の光」をテーマに、自然の有機的な質感をキャンバスに描き出します。
作家の作品と展示歴、略歴を一か所で見せるオンラインギャラリー兼ポートフォリオとしてサイトを構築しました。
作品画像が画面の主役になるよう、ニュートラルな背景と余白主体のミニマルなギャラリーレイアウトで設計しました。
海外の来場者やコレクターに向けて、韓国語・英語・フランス語・日本語の4か国語に対応します。
本プロジェクトでSilmarilはポートフォリオサイトの制作を担当しました。
担当と貢献
- アーティストポートフォリオサイトの企画・デザイン・構築 — 作品(Work)、展示(Exhibitions)、略歴・スタジオ(About)、ニュース・連絡先(Information)の情報設計
- 作品画像を最大限に活かす、画像主役のミニマルなギャラリーUIのデザイン
- 韓国語・英語・フランス語・日本語の4か国語(i18n)サイトの構築
- 作品のタイトル・制作年・サイズ・素材などの情報を一貫して見せる構成
- 高解像度の作品画像を素早く表示する画像最適化とレスポンシブレイアウトの適用
- Next.js(App Router)で構築し、デプロイまで完了
- 多言語SEOアーキテクチャ(言語別URL・hreflang/canonical)、JSON-LD構造化データ、画像・OGの自動最適化など、検索最適化全般を実装
主な構成
作品ギャラリー (Work)
作家の作品を大きな画像中心で鑑賞できるギャラリーを構成しました。
展示 (Exhibitions)
主な展示歴を整理し、作家の活動を見せます。
略歴・スタジオ (About)
作家のステートメントと略歴、スタジオを紹介します。
ニュース・連絡先 (Information)
お知らせと連絡先を一か所にまとめました。
4か国語対応
韓国語・英語・フランス語・日本語で世界中の来場者を迎えます。
画像主役のミニマルデザイン
ニュートラルな背景と余白で、作品が引き立つギャラリーの雰囲気を演出します。
課題と解決
作品が主役になる画面
- 状況
- アーティストのポートフォリオでは、UIではなく作品そのものが主役であるべきです。
- 課題
- デザインが作品を邪魔せず、かつギャラリーらしい完成度を備える必要がありました。
- 行動
- ニュートラルな背景、大きな画像、抑制されたタイポグラフィと余白主体のレイアウトで、視線が作品に集まるよう設計しました。
- 結果
- 作品が画面の主役になる、ギャラリーのようなポートフォリオを完成させました。
高解像度の作品画像のパフォーマンス
- 状況
- 絵画作品は質感を伝えるために高解像度の画像が必要ですが、そのまま使うと読み込みが遅くなります。
- 課題
- 画質を保ちつつ素早く開くサイトをつくる必要がありました。
- 行動
- Next.jsの画像最適化とレスポンシブ画像で、画面・端末に合ったサイズを提供するよう構成しました。
- 結果
- 作品のディテールを活かしつつ、素早く鑑賞できるギャラリーを実装しました。
4か国語のグローバル対応
- 状況
- 作家の国際的な活動のため、複数言語で作品と略歴を提供する必要がありました。
- 課題
- 4つの言語でコンテンツとレイアウトを一貫して保つ必要がありました。
- 行動
- 韓国語・英語・フランス語・日本語をi18nで構成し、言語切り替えを実装しました。
- 結果
- 海外の来場者やコレクターが母国語で作品世界を巡れるサイトを構築しました。
SEO実装
多言語SEOアーキテクチャ
クッキーベースの単一URL i18nを、言語別の独立URLルーティング(/ko · /en · /fr · /ja、デフォルトen)へ全面的に移行しました。ミドルウェアがロケールを自動検知(クッキー → Accept-Language)して308リダイレクトし、/admin・/api・静的ファイルは迂回、セッションクッキーも保持します。
canonical & hreflang
すべての公開ページが自己参照のcanonicalと、4言語 + x-default(→ /en)のalternateを出力します。同一のhreflangセットを<head>とsitemap.xmlの両方に二重出力し、ドメインはnon-wwwに正規化して重複インデックスを防ぎました。
構造化データ(JSON-LD)
Person(全言語で同一@idの単一エンティティ — 生年・出生地・弘益大のalumniOf・knowsAbout・sameAs)、WebSite(SearchAction)、作品のVisualArtwork、展示のExhibitionEvent/CreativeWork、BreadcrumbList、一覧のCollectionPage + ItemListを適用しました。
作品・展示の個別URLインデックス
作品・展示が項目ごとに固有URL(/{locale}/artworks/{slug})で個別にインデックスされます。スラッグは{タイトル}-{UUID先頭8文字}でDBスキーマ変更なしに生成し、詳細ページのOG画像は作品画像そのものを使用します。
管理者の追加 → 自動インデックス
管理者が作品を追加すると、詳細ページが即時生成され、1時間以内にsitemapへ自動反映されます(再デプロイ不要)。
画像SEO — 多言語altの自動生成
アップロードするだけで、ロケール別のキーワードを含むaltが自動生成されます(例:‘Oil on Canvas by painter Hanyoung Kim’)。空のaltや全言語同一のaltによるhreflangの無駄を防ぎ、言語別の画像検索シグナルを確保し、image sitemapにも登録します。
動的OG / Twitterカード
言語別の1200×630のOG画像をビルド時に生成(next/og)し、リモートフォント取得なしにシステムフォントのみを使うため、オフライン・サンドボックスのビルドでも安全です。summary_large_imageカードと言語別のタグラインを反映しました。
クロール制御 & サイトマップ
robotsでNaver Yeti・Daum Daumoaを明示的に許可(国内検索エンジン対応)し、/admin・/apiを遮断しました。sitemapはISR(1時間)でDBの最新updated_atからlastmodを算出し、DB障害時はgraceful degradation、管理者領域はnoindexにしています。
パフォーマンス・運用・キーワード戦略
公開ページのISR静的化とLCP画像のpriorityでCore Web Vitalsを改善し、googleBotにmax-image-preview:large・max-snippet:-1を指定しました。PWA manifest・言語別RSS・検索エンジンの所有確認(GSC・Naver)・GA4(本番限定)を備え、‘絵画中心の西洋画家’というポジショニングと、キム・ハンヨン 作家/画家/作品などの高意図キーワードをターゲットにしました。
技術スタック
成果・インパクト
- 作家の作品世界と展示歴を一か所で見せる、オンラインギャラリー兼ポートフォリオを完成させました。
- 韓国語・英語・フランス語・日本語の4か国語で、海外の来場者やコレクターにも対応します。
- 作品画像が引き立つミニマルで高速なサイトで、作家のブランドをオンラインで一貫して伝えます。
- 言語別URL・hreflang・JSON-LD・画像SEOを備えた検索最適化により、4言語がそれぞれインデックスされ、作品・展示が個別URLで露出します。
- 本案件でのSilmarilの担当範囲は、ポートフォリオサイトの制作です。