Kaguya Portfolio

Webコーダーとしての私が、デザインをどう読み、何を考えて実装しているのかを知ってもらうためのポートフォリオサイトです。デザインから、WordPressのオリジナルテーマ化までを一人で手がけました。

一緒に働いたときの姿を思い浮かべてもらえるよう、作品ごとに「デザインをどう読んだか」「実装で何を判断したか」を書く、ケーススタディ形式にしています。

色は、深い紺を背景に、文字を青紫で組んでいます。落ち着いた印象にしたかったことに加えて、Aboutに載せた自分の写真の服が青系だったので、写真がサイトの色になじむようにしました。暗い背景でも文字が読みやすいよう、Figmaで色の組み合わせを何通りも試して決めています。公開後にコントラスト比も確かめ、少し明るい紺の背景に載る小さな文字だけは、WCAG（Webアクセシビリティの国際的なガイドライン）のAA基準である4.5:1を満たすよう、文字色を明るくしました。

この配色の着想元は、一番好きな映画『悪は存在しない』の冒頭です。暗い背景に「EVIL DOES NOT EXIST」と一単語ずつ紺の文字が浮かび、「NOT」だけが赤く染まります。

このサイトには、その演出から二つのことを持ち込みました。一つは、言葉を一単語ずつ浮かび上がらせること。FVのキャッチ「Small screen, big feeling.」には、小さな画面の中でも大きな体験を届けたい、という思いを込めました。ページを開くと、この一言が一単語ずつせり上がります。もう一つは、赤い言葉で印象を残すこと。ただ、赤を使いすぎると目が疲れますし、紺の背景の上では小さな文字が読みにくくなります。そこで赤は、大きな見出しや強調したい言葉、下線だけに絞り、表示されたあとで赤く染まるようにしています。

一つの動きを部品にして、サイト全体で揃える

文字がせり上がる動きを、FV・作品一覧・詳細ページ・フッターなど、サイトのあちこちで使っています。場所ごとに書くと速さや動き方が少しずつずれていくため、動きの定義を一つの部品にまとめました。使う側は「どの順番で出すか」と「いつ再生するか」を指定するだけです。

OSで動きを減らす設定にしている人には、アニメーションをせずにそのまま表示します。また、JavaScriptが動かない環境でも、文字が隠れたままにならないようにしています。

作品が増えても、同じ形で書き足せるように

作品はWordPressのカスタム投稿タイプで管理し、LP・コーポレートサイトといった種別はタクソノミーで分けています。詳細ページの入力欄はACFで用意し、その設定はコードで書いて、テーマと一緒にGitで管理しています。

作品によって書ける量は違うため、「実装の判断」は最大3項目まで入れられるようにし、空の項目やセクションは表示しない作りにしました。これからの作品も、管理画面から同じ形で追加できます。

トップでは、FVのすぐあとに作品を並べました。ポートフォリオを見に来る人は、まず作品を見たいはずだと考えたからです。最初は横に流れるスライダーで組んでいましたが、スワイプやクリックをしなくても、縦にスクロールするだけで作品を見ていけるほうが、訪れる人の手間が少ないと考え直しました。そこで、1作品を1画面で見せ、スクロールすると次の作品が上に重なっていく形に作り直しています。Swiperを使わずに自分で組んだのは、動きや並べる作品の数を、後から自由に調整できるようにするためでもあります。

ただ、公開した時点では、作品が画面に収まった瞬間に次の作品が重なり始め、説明を読み終わる前に流れてしまっていました。見直しの中で、次の作品が重なるまでのスクロール量を足して画面に留まる時間を延ばし、画像が暗くなって文字が出るタイミングも早めています。自分が操作して気持ちいいかではなく、初めて見る人が読み終えられるかを基準に、これからも動きを調整していきたいです。