あたらしいポートフォリオサイトを作るときに考えていたこと
日記。
先日, 4年ぶりにポートフォリオサイトを全面刷新しました。
CMS が乗っ取られたサイトを閉鎖してから2年半, ヘタな HTML と CSS で仮設サイトを組んでから1年と8ヶ月が経っていました。今日は新しいポートフォリオを作っているときに考えていたことを書きたいと思います。
制作物を置くだけで成立するポートフォリオが作りたかった
新しいポートフォリオはトップページに制作物が並び, 個別ページに詳細な情報が書かれたデザインです。とても簡素な見た目ですが, このデザインで出すと決心するまでに3年の月日が必要でした。
ポートフォリオの第1の目的は, 自身が今までにどんなものを作ってきたのか伝える場でありたい考えています。良い制作物であれば, ハコを飾り立てなくともそれらを適切に配置することで自然と美しいサイトになるはず。そんなポートフォリオに憧れを抱いていたのです。
しかしながら, 数年前からそんな形式のプロトタイプを作っては壊してを繰り返していました。いくら作っても自分の中で腑に落ちることがありませんでした。
CI / ロゴデザインという軸ができてきた
ようやくサイトをリニューアルする決心がついたのは1つの軸――僕にとっては CI/ロゴを起点としたデザイン――ができてきたからです。CI/ロゴを作る過程で, ストーリーとコンセプトを重視し, ディテールを追求するという制作の基本姿勢が自身の中で固まってきたのがこの3年間でした。
すると,「制作物を置くだけ」のデザインもだんだんと自分の中で腹落ちするようになってきたのです。手を動かすことでアウトプットの精度を高め, 考えつづけることで思考に一貫性を保てるようになり, 自分もそんなポートフォリオを持って良い気がしてきました。
たとえば「ANRI」のCIデザインでは, クライアントの佐俣アンリ氏と共に見た目のデザイン以前にストーリー/コンセプトのデザインに多くの時間を費やしました。見た目のデザインの部分では, 円の太さ・重なりの調整, 文字詰めといった, ディティールの追求に対してもたくさんの時間を頂いたプロジェクトです。今回のポートフォリオにはそのようなデザイン・プロセスに共感してくださったクライアント / チームと制作を進めた制作物を掲載しています。
と, ポートフォリオを公開するまでの心情を書いてきましたが, もう少し具体的に制作時に意識した点を挙げてみます。
役割を果たし, 見た目も美しいポートフォリオが作りたかった
制作物ごとに個別のページに移動しないといけないサイトに出会すたびに億劫さを感じていました。そこで最低限伝えたい情報はトップページを見るだけで完結するように設計されています。
CI/ロゴを主軸に見せたいという方向性が決まっていたので, それらを一目で視認できるよう, ベースデザインにはグリッドレイアウトを採用しました。CI/ロゴを起点としたデザインは, ビジュアルとの調和性を重視して設計しています。そのため「そのロゴがどのようなビジュアルと共に用いられるのか？」という段階まではトップページで伝えられるよう, 背景を分割してビジュアルを表示するエリアを設けました。
(マウスホバーができない) モバイル端末では, スクロールによってビジュアルが切り替わるようにしたところもポイントだったりします。日頃, スマートフォンからのアクセスが9割以上を占めるサービスの近くにいると, 無意識的にモバイルで閲覧されることも念頭に置いてデザインをするようになったのは26歳にして大きな収穫でした。
目的に沿う形でWebデザインのトレンドも取り入れました。遷移時の読み込み中は背景のビジュアルが全画面に展開します。また個別ページでは下半分をコンテンツエリアとすることで, 全体的にシームレスな印象を持たせることを意図しています。
その他にもプロジェクトタイトルとクライアント名が綺麗に揃うようページごとに字間を調整したり…
OSに関係なく見栄えをコントロールするために日英ともに Webfont を取り入れたり, 文字周りにもいつものWebデザインより少しこだわってみました。
なんだか家を持ったような気分です
2年半ぶりにポートフォリオサイトを持ってみて, 自分の制作物を自分の見せたいように見せることのできる嬉しさと安心感を感じています。
今回のポートフォリオでご紹介しているプロジェクトは, クライアントやチームの方たちと一緒に作ってきた大切なものばかりです。どの制作物も “もっと語れ” と言われたらページの5倍以上は語れてしまいます。そういった人たちが周りに居ることは本当に幸せだと思いますし, これからもそう思えるお仕事をたくさんしていきたいな, とポートフォリオを纏めながら感じました。
相変わらず長文となってしまいましたが, そんなポートフォリオ, ぜひご覧になってみてください。デザインのご相談もお待ちしております。
