ポートフォリオサイトデザイン

プロジェクト以上のことを伝えるポートフォリオ

Maya Rowanのポートフォリオには明確なトレードオフがある。多くのポートフォリオがスクリーンショットに与えるビジュアル的な比重を、このサイトはプロジェクト名に与えている。冒頭の「I make ideas visible」というステートメントの後に続くのは、デバイスモックアップの羅列ではなく、タイポグラフィ主体のプロジェクトカードのグリッドだ。そのためページは、実際の仕事の内容を説明するためにディスクリプションに依存している。

同じ編集構造が3つのスケールで繰り返される。番号付きセクションがページを整理し、大きな名前がプロジェクトを区別し、小さなラベルがワーキングノートを識別する。これにより、架空のペルソナを置き換える前の段階でも、このサイトはクリエイティブ・ポートフォリオのデザイン参考として機能する。重要なのは特定の赤や青ではなく、それらのレベルが連動する仕組みだ。

プロジェクトカードがポスターのように読める理由

デスクトップのプロジェクトグリッドは意図的に不均等に設計されており、カラムの比率は1.2:0.8、つまり左カードが利用可能な幅の約60%を占める。各カードの高さは最低でも420pxある。これにより、上部にタイトルをタイトに折り返し、下部に補足説明文を別途配置するスペースが確保される。

01

8文字のタイトル幅がリズムを変える

ソースではプロジェクト見出しを8chに制限し、line-heightを0.92に設定している。「Field Notes for Better Cities」は1行ではなく縦長のブロックになる。狭いメジャーがタイトルにポスター的なリズムを与えており、小さなスクリーンショットによる偶発的な折り返しではない。

02

ディスクリプションが具体的な意味を担う

最初のカードは参加型マップを名指しし、小さな観察が市民的なシグナルになると説明する。「革新的なマッピング体験」と書くより格段に情報量が多い。ディスクリプションは下端から24px上に配置されており、色の異なるカード間でも読者が説明を見つける位置が一定になっている。

選定作品から再現可能なプラクティスへ

Practiceセクションはプロジェクトグリッドの強調点を逆転させる。大きな引用文が狭いカラムを占め、番号付きの3つの説明が広いカラムを占める。各説明には上罫線と固定幅の番号カラムがある。個々のアイデアをブラウズする状態から、一連のアクションを読む状態へと切り替わる効果がある。

1. Find the Signalはインプットを明示する

   最初の行では人、制約、言語、行動を明示的に列挙している。主題が都市についての観察であるField Notesと比較すると、プロジェクトのディスクリプションが素材を名指すのに対し、プラクティスの行はデザイナーがその素材の中に何を探すかを説明している。ページはこの関係を示唆しているが、完了したリサーチの記録ではない。

2. Build to Learnはプロトタイプの目的を示す

   2行目は、動作するプロトタイプを問いに答える手段として位置づける。これは完成度の高い最終インターフェースを制作するという主張とは異なる。アンビエントAI、エディトリアルシステム、グループ意思決定ツールといったポートフォリオの内容に合っており、行動の探索がデザインの問いの一部となっている。

3. Leave a Systemは引き渡しを明示する

   最終行は「ローンチ」で終わらず、コンポーネント、トークン、ガイダンスを名指す。これにより提案するアウトプットがより具体的になる。別の人物がその判断を引き継げるべきだということだ。実際のケーススタディであれば、ここにコンポーネントの例や短い使用ルールを添えることでステートメントを裏付けられる。

ハッカソンプロジェクトのためのポートフォリオ参考

OpenDesignはこの架空のポートフォリオをハッカソンの公式サンプルとして制作した。参加者自身のエントリーに転用できる最も有力なアイデアは、プロジェクトの目的・背景にある判断・未解決の事項を分離するという構造だ。プロジェクトカードでエントリーを紹介しながら、リンク先のアカウントで実際の根拠を提供できる。

ポートフォリオコンセプトの限界

ソースは760px以下でプロジェクトグリッドとPracticeセクションを1カラムに切り替えるが、同時にナビゲーションリンクを非表示にしている。これは実際のポートフォリオで対処すべき具体的な制限だ。コンタクトに到達するまですべてのプロジェクトをスクロールさせるのではなく、コンパクトなセクションメニューを残すべきだ。

架空のプロジェクトは文書化されたクライアント案件ではない。ノートは充実したパブリッシングシステムではなく見出しにすぎず、コンタクトは[email protected]を指している。実際のポートフォリオを公開する前にプレースホルダーを置き換え、リンク先を確認すること。