個人ポートフォリオサイトデザイン(2022)

私の初代個人ウェブサイトは2021年初頭に正式公開されました。しかし、1年半が経過する頃には、機能面・デザイン面の両方で利用ニーズを満たせなくなっていることに気づきました。例えば、CMS（コンテンツ管理システム）が搭載されておらず、作品を更新するたびに大量の時間をかけて手動で修正する必要がありました。また、当時のデザインスタイルでは、デザインおよび開発における私の専門的な成長を十分に表現できませんでした。

掲載する作品数の増加や、パーソナルブランディング・ブログコンテンツの企画を始めるにあたり、より拡張性と柔軟性を備えたウェブサイトプラットフォームが急務であると認識しました。そこで、「第2世代個人ウェブサイト」のデザインおよび開発プロジェクトを立ち上げ、管理しやすく、ブランドイメージに合致し、優れたユーザーエクスペリエンスとビジュアルアイデンティティを兼ね備えた新しいサイトを構築することを目指しました。

※本プロジェクトは個人プロジェクトです。

※制作期間：2022年9月

デザイン要件の明確化

初代個人ウェブサイトは、比較的急ぎの状況下で制作されました。当時はフォント、カラー、スタイルといったデザイン要素に関する知識が不足していたため、体系的な設計が行われず、開発段階で参照できる一貫したデザインガイドラインも存在しませんでした。その結果、全体的に統一感がなく、効率の悪いデザインとなってしまいました。

プログラム構造の面でも、当時はバックエンド管理システムを導入しておらず、すべてのコンテンツをフロントエンドに直接ハードコーディングしていました。そのため、将来的なメンテナンスや新規コンテンツの追加が非常に困難でした。この点は当時の私のプログラミングスキルの制限にも起因しますが、今後も作品追加やパーソナルブランドのSEO（検索エンジン最適化）を考慮するならば、既存構造の継続使用は明らかに限界がありました。

そこで、本プロジェクトの要件を以下のように整理しました：

1. 長期的に運用可能なパーソナルブランドサイトの構築
   • 安定したアーキテクチャと高い拡張性
   • 将来的な作品追加や構造最適化、継続的な運営に対応可能
2. 管理可能なバックエンドシステムの導入
   • コードの手動修正依存を減らす
   • コンテンツの追加・更新効率を高め、コンテンツ制作そのものに集中できる環境を作る
3. SEO（検索エンジン最適化）の強化
   • 明確な情報アーキテクチャとセマンティックマークアップを備える
   • 検索エンジンでの可視性を高め、ブランド露出と長期的運営に寄与
4. システム化されたデザインガイドラインの構築
   • フォント、カラー、コンポーネントスタイルなどの完全なプランニング
   • サイト全体のデザインスタイルを統一し、拡張性と保守性を向上
5. デザインから開発まで自ら主導
   • 実装を通じて経験を蓄積し、新しいポートフォリオの一部とする
   • 外注せず、問題解決力と独立したWeb制作スキルを証明する

デザイン戦略の策定

本プロジェクトの要件に基づき、2つの大きな方向性を設定しました。

まず、現時点で私のプログラミング能力では完全なバックエンド管理システムを自作するのは困難なため、サイトアーキテクチャには成熟したオープンソースCMSであるWordPressを採用することにしました。

WordPress.org公式サイトによれば、世界中のウェブサイトの43%がWordPressで構築されており、ウェブ開発分野において非常に高い普及率と安定性を誇ります。WordPressを採用することで、迅速に保守可能な管理画面を構築できるだけでなく、多数のプラグインによってSEO最適化、作品分類、コンテンツ管理など多様なニーズに柔軟対応できる、安定かつ持続可能なソリューションとなります。

次に、初代サイトの一貫性や拡張性の不足を解決するため、フォント、カラー、コンポーネントスタイル、タイポグラフィルールまでを包括的に体系化したデザインシステムを構築することにしました。これにより全体のトーン＆マナーを統一し、新規ページや機能追加時にも明確なガイドラインを持って効率的にデザインと開発を進められます。

個人イメージからデザインスタイルを発展させる

ビジュアルデザインに着手する前に、まず自分自身に最も根本的な問いを投げかけました。「このウェブサイトを通して、訪問者にどのような自分を見てもらいたいのか？」

方向性を明確にするため、自分のパーソナリティやスタイルを象徴すると考える形容詞をいくつか列挙しました。例えば「清新」「軽やか」「成熟」「透明感」「安定感」などです。これらをビジュアルスタイルのコア参照とし、これらのキーワードを基盤に、画像、Webスクリーンショット、フォント、写真スタイル、カラーパレットなどの素材を収集してムードボードを制作しました。このムードボードが全体のトーン＆マナーを確立する助けとなりました。

このプロセスを経て、私が求めるビジュアル方向性——クリーン＆ミニマルで、低彩度ながら高い識別性を持つスタイル——が徐々に固まりました。スタイルが確定した後、ムードボードから代表的なカラーを抽出し、サイトのメインカラーとして設定。それを拡張してカラースケールシステムを構築し、後のデザインシステム構築の基盤としました。

ウェブサイトの情報アーキテクチャ設計

情報アーキテクチャの設計では、まず初代ウェブサイトの構造を振り返り、構造の曖昧さやコンテンツ分布の不明確さといった課題を整理しました。 すべてのコンテンツを性質や利用シーンごとに分類し、「訪問者の閲覧動線」と「ブランドメッセージの優先順位」という2つの視点から、全体構造を再設計しました。

最終的に以下の5つの主要ページを確定しました：

• Home（ホーム）：サイトの顔でありナビゲーションのハブ。多様なコンテンツの概要を提示し、初訪問者が短時間で私や作品の第一印象を掴めるようにし、他ページへの導線として機能します。
• About（アバウト）：私のバックグラウンド、専門分野、デザイン理念を詳しく紹介。より深く知りたい訪問者に対して、プロとしての立ち位置を明確に伝えることが目的です。
• Work（ワーク）：私の全てのデザイン・開発プロジェクトを掲載。
• Blog（ブログ）：ブログ記事を掲載するための予備ページ。
• Contact（コンタクト）：CTA（コール・トゥ・アクション）ページ。連絡先やコンタクトフォームを設置し、連絡を希望する訪問者に複数の手段を提供します。

ワイヤーフレームとプロトタイプ

ホームページ

初代サイトでは、ホームページのファーストビューに1枚のイラストだけを表示し、タイトルや説明文は一切ありませんでした。このデザインは確かに目を引くものでしたが、そのイラストと私との関連性が訪問者には伝わらず、「謝承邑」という人物に関するサイトであることも明確には分かりませんでした。明確なセマンティクスや導線が欠けていたため、ホームページがパーソナルブランドの出発点として機能していなかったのです。

そこで新デザインでは、抽象的なイラストを廃し、自分のポートレート写真をキービジュアルに採用。シンプルかつ力強い氏名と職種を大きく表示することで、このサイトの主が誰で、専門分野が何であるかを一目で理解できる構成にしました。

WORK

新しいサイトでは、「Work」ページのレイアウトを見直し、従来の3カラム構成を2カラムに変更しました。また、作品のサムネイル画像サイズも独自比率から、より一般的な16:9比率へと統一しました。

カラム数を減らしたことで、各作品のサムネイル画像をより大きく表示でき、ビジュアルのインパクトと視覚的な吸引力を最大限に発揮できるようになりました。また、16:9比率を採用することで、既存の作品ビジュアル素材をそのまま活用でき、プロジェクトごとに新たなカバーを制作する手間を省けます。これにより、美しさと実用性の両立を実現しました。

初代サイトの作品ページでは、「完成品のデザイン」を強調しすぎるあまり、派手な画像や視覚要素を多用して成果物そのものをアピールしていました。しかし、この方法ではUI/UX作品で最も重要なデザイン思考やプロセスの背景が伝わりません。

実務経験を重ねる中で、UI/UXデザイナーにとっては完成品だけを見せるのではなく、課題定義、デザイン上の意思決定、最終的な検証や改善まで含めたプロセス全体を提示することの重要性を痛感しました。そこで新サイトでは、作品ページを「デザインプロセスを語るためのストーリースペース」として再定義しました。

Mediumのようなコンテンツ指向型プラットフォームのレイアウトを参考にし、記事形式の構造を採用。これにより、大量の文章や階層的な段落構造を持たせることができました。また、装飾的な要素を最小限に抑え、適切なホワイトスペースを残すことで、全体のビジュアルスタイルをシンプルかつ集中度の高いものとし、訪問者が内容に没頭しやすくしました。

デザインガイドラインの構築

過去のサイトにおけるデザインスタイルの不統一や一貫性の欠如を解消するため、新サイトでは自分専用のデザインシステムを構築し、デザインと開発の共通言語としました。このシステムでは、フォント、カラー、スペーシング、コンポーネントなどの基本要素を統一するだけでなく、Design Tokensの概念を導入し、Primitive TokensとSemantic Tokensの二層構造でスタイルを管理しています。

• Primitive Tokens：フォントサイズ、カラー値、スペーシング単位など、最も基本的なデザイン属性を定義。システム全体のビジュアル一貫性を維持する基盤となります。
• Semantic Tokens：スタイルと使用意図を紐付け、デザイン制作時に意味論ベースでトークンを適用可能にします。

タイポグラフィシステム：一貫性と柔軟性を両立するダイナミックなレイアウト戦略

フォントサイズについては、用途に応じてfb-dynamicとfb-staticの2種類のDesign Tokenシステムを設計しました。

• fb-dynamic：レスポンシブ特性を備えた動的フォントトークン。画面幅に応じて自動的にサイズが調整され、H1やH2、本文などの階層がデバイス間で一貫性と比率を保ちながら調整されます。これにより、RWD環境下でも優れた適応性を確保。
• fb-static：全デバイスでフォントサイズを固定するトークン。ボタンやラベル、特定UIコンポーネントのように、識別性や空間コントロールが重要な場面で使用し、デバイス変化によるレイアウト崩れを防ぎます。

フォント戦略：速度と美しさのバランスを取る

デザイン品質を保ちながら、パフォーマンスや読み込み速度も重視するため、主要英字フォントにはGoogle FontsのLibre Baskervilleを採用しました。エレガントなセリフ体で、見出しにも本文にも適し、デザイン性と実用性の両面を満たします。

ただし、フォント選択は見た目だけで判断できません。英字フォントを読み込んだ状態でさらに日本語や中国語フォントを追加すると、フォントファイルサイズが大きくなり、読み込み速度やSEOに悪影響を与える可能性があります。特にCJKフォントは数千〜数万のグリフを含むため、容量が非常に大きくなりがちです。そこで中国語表示には、システム標準フォント——WindowsではMicrosoft JhengHei、macOSではPingFang——を採用し、美観・パフォーマンス・SEO最適化のバランスを実現しました。

スペーシングシステム：動的と静的の空間管理戦略

スペーシング（spacing）についても、spacing-dynamicとspacing-staticの二層トークン構造を構築しました。

• spacing-dynamic：レスポンシブ対応のスペーシングトークン。画面幅に応じて段落間やコンポーネント間の余白を調整し、デバイスごとに適切なホワイトスペースとリズム感を確保します。
• spacing-static：ボタン内パディングやアイコンとテキスト間の距離など、変化させたくない固定余白に使用。構造の安定性を保ちます。

レイアウト階層ガイドライン：構造が明確で秩序あるページ設計

フォントやスペーシングのトークンに加え、サイト全体のレイアウトロジックを統一するため、以下の階層構造を策定しました。

実際のレイアウトでは、この階層構造だけを基本単位として使用し、過剰な複雑化や無秩序な追加を避けています。これにより、構造の一貫性と保守性を確保しました。

この階層構造と前述のフォントサイズトークン、スペーシングトークンを組み合わせることで、論理性と視覚的リズムを兼ね備えたUIを素早く構築でき、ユーザーの読みやすさや拡張時の開発効率を向上させています。

その他のガイドライン