制作ノート: Yoshiki Okamura Portfolio
山田啓太です。今年の9月から本格的にフリーランスとしてWebサイトを制作していくにあたって、僕がどのように制作を進めているかをお伝えしたいと思い、制作ノートを書くことにしました。まずは2021年に公開した画家の岡村芳樹さんのポートフォリオサイトについて。公開順で言えば100 DAYS POETRYが最初なのですが、初めて僕がデザイナー兼デベロッパーとしてWebサイト制作を受注したのが芳樹さんのサイトだったので、まずはそこからお話したいと思います。
受注のきっかけ
制作を受注したのは2019年の1月でした。この頃はまだデベロッパーとしての経験しかなく、デザイナーとしてWebサイトをデザインするという経験がありませんでした。余談ですが、2018年頃にイラストレーターのれおえんさんから過去にれおえんさんが制作された画集に新規作品を加えたデジタル画集を作って欲しいという依頼を受け、Electron製のデスクトップアプリを作らせて頂いたことはありましたが、他にデザイン制作を受注したことはなく、Webサイトのデザイナーとしては全く経験がないと言って差し支えがない状態でした。
この頃からデベロッパーとしてだけでなく自分でデザインもやっていきたいと強く思い始めていましたが、都合よく依頼が来るわけもなく次の1歩をどう踏み出すか考えあぐねていました。そんなときTwitterで相互フォローだった芳樹さんが「そろそろポートフォリオサイトがほしい」という旨のツイートをされたのを見て、勢いで芳樹さんに「僕に任せてほしい」というDMを送ったところ、ほとんど実績がない状態だったにも関わらず快諾して頂き、正式に受注が確定しました。
難航する制作
受注したのが2019年の1月で、公開したのが2021年の1月でした。このサイト、制作に2年かかってるんですね。本業が終わったあとの数時間や土日を使っての制作でしたし、僕の都合で何ヶ月も制作が完全にストップすることがあったとはいえ、2年です。スムーズに進んだとは言えないです。なんの言い訳のしようもなく、ただただデザイナー/デベロッパーとして未熟でした。 数ヶ月頭の中でああでもないこうでもないと考えて手を動かさなかったりしましたし、ある程度作り込んだデザインがダサいことに気づいてボツにしたりを繰り返してました。目だけは肥えていたようですが、形にする能力が完全に遅れていたというのが制作に時間がかかった一番の理由だったなと今振り返って思います。
ボツにしたデザインはもう残ってないのでお見せできませんが、芳樹さんの絵がN行3列とか4列とかでずらっと並んでいるだけの一覧ページなどを作っていました。理想だけは高かったので、そんなどこでも見るデザインじゃだめだと思い、根本の体験から考え直した結果「モダンな美術館で芳樹さんの絵を見ているような」というコンセプトが思い浮かび、そこから今のデザインを制作していきました。
こだわりポイント
リアルな展示感を出すためのCSS
現実ではディスプレイで表現されるようなRGB: 255の真っ白のものは無いので、Webサイトの背景は青みがかった少し暗めの白で表現しています。サイト全体を通して展示側はこの色で、ユーザーインターフェイス側は真っ白の背景で表現することで展示とUIの区別をしています。
作品画面では天井に光源があると想定しました。絵の下側にドロップシャドウを付けるだけである程度リアルな感じは出せたのですが、そこからもう一歩進んで、CSSで絵の両側にあるはずのキャンバスの厚みも表現しました。その厚みの部分もベタ塗りにはせず、光源が上にあるので上から下にかけて色が少し暗くなるようにすることでよりリアルな表現にできました。本当は展示側の背景も光源に近い上側は明るく、下にかけて暗くなるグラデーションの背景にしたかったのですが、Safariで描画にバグがあり断念しました。Safari（というか中身のWebKit）まじ滅んでほしい。また、絵の下のほうにかけて絵を少し暗くするCSSも加えました。この2点を加えたことでグッとリアルな展示感を出せました。気になる方はデベロッパーツールでCSSを確認してみてください。
波表現
このサイトのコンセプトは美術館での鑑賞ですが、やはりWebサイトはデジタルなものですし、デジタルならではの表現として作品一覧画面背景にWebGLで波の表現を加えました。ただ情報を見るためだけのサイトではなく、特別ゆったりした時間が過ぎているということを表現しました。
サインシステムの表現
UIもWebサイトっぽく作らず、モダンな美術館にある案内標識っぽいデザインを目指しました。そもそもサインシステムっぽいデザインがわからなかったのでPinterestでサインシステムのデザインを集めて独特のそれっぽさを掴むところから始めました。フォントはManropeというフリーフォントを使わせていただきました。数字がインターフェイスデザインに最適とサイト内でも言われてる通り、このフォントだからこそこのサインシステムっぽさになってると思います。
カスタムカーソルデザイン
このサイトではデフォルトのカーソルを完全に消し、インタラクトする要素に応じて状態と見た目が変化するカーソルをデザインしました。また、矢印ボタンや閉じるボタンに近づいたときはボタンに吸い付くようなインタラクションを取り入れ、操作感の向上を目指しました。このインタラクションについての詳しい話は下記の記事で解説しています。
振り返り
2年というアホみたいに長い時間がかかってしまったこのサイトですが、最終的には納得できるクオリティに仕上げることができました。この制作が良い実績になったことでその後いろいろな方からご依頼をいただけるようにもなりました。芳樹さんまじありがとう。
この記事が気に入ったらサポートをしてみませんか？