«Back to Home

ホームページを新しくしました

29th August 2021

こんにちは、Wolphtypeです。この度、ホームページを新しく作りました。というのも、前のホームページのwolph.designを作ってもう3年も経ってしまい、そろそろ新しくしようと考えていたからです。前のホームページはHTMLと、フレームワークにBulmaを使いつつSassで書いていたのですが、更新のモチベをうまく保つことができませんでした。なので、新しいホームページはCMSとか使ってなるべく楽に更新ができるようにしよう！と考え、今年の2月頃にNext.jsを勉強し、作り始めてはいたのですが、Koga Sansが思ったよりもデザインに合わず、ホームページにKoga Sans Modernを作り始めたらそれにハマってしまい、見本帳まで作り出し…という次第で、一向に完成しないまま半年が経ってしまいました。

デザインセンターでデザイナーとして働かせていただき、ありがたいことにWorksを出す機会があったりフォロワーさんも多少増え、「今のプロフィールが大学4年のままになっているwolph.designのままではちょっとまずいぞ」と感じながら8月。夏休みも最終日になり、どうせなら一日とかで簡単に作っちゃうか！と一念発起し作り始めたのが今回のサイトです。結局一週間かかってしまいましたが。

タイプテスターとモーショングラフィックス

前のホームページの気になっていた点として、Worksの領域が広すぎる、というものがありました。自分は書体デザイナーを目指して日々勉強していきたいと考えているし、書体だけ載せればいいのではないか？と考えた結果、今回のホームページではタイプテスターと簡単なモーショングラフィックスのみ、という構成にしています。説明文すらなし。文章を書くことは簡単に思えて大変で難しく、時間がかかります。幸い、書体ごとに見本帳を作っていたので見本帳を見てもらえれば大体わかるだろうと考えたのも理由です（この点については過去の自分に感謝！）。とはいえ、タイプテスターの実装が簡単だったかというとそういうわけでもなく、2月頃にProgateでJavaScriptを学習した記憶を呼び起こし、なんとかVariable FontとOpenType Featuresの対応をさせました。これに関しては他のところでも使えると思うので、CodePenなどで使いやすい形に纏めて公開するのもいいかもしれませんね。あと、頑張ってVariable Fontと複数ウェイトの書体の表示をjQueryで書いた後「やったぜ」という意味で適当に動画をツイートしたら何故か伸びてびっくりしました。新しいホームページのいいスタートと捉えています。

モーショングラフィックスも同じく大変でした。一番上、トップのモーションに関しては最初から作ろうと考えていたのですが、タイプテスター下の課題で作った書体、実験書体のモーションは制作中に思いついたものです。「仕事を除いても課題とかで様々な書体を作ってきたけれど、文字がちゃんと揃ってるわけでもないし、ちょっとした画像でも作って載せておくか」と最初は思っていたのですが、何故か「どうせならモーションも作っちゃえばいいじゃん！」と考え始めてしまいました。簡単なものでも画面の中に動きがあると楽しいので、結果的には満足しています。

デザイン

書体だけを載せることにした、と先ほど述べましたが、今回はWolph名義ではなくWolph Type名義のホームページとなっています。Wolphはデザイン全般、Wolph Typeは書体デザインのみ、という線引きとともに、デザインやカラースキームに関しても自分の中で分けているのでその部分を今回は反映してみました。なお、書体それぞれに関してもデザインの感じ、動きの感じ、カラースキームは毎回考えています。

Wolphのデザインはアイボリーベースに深い青緑をメインカラーとし、黄色をアクセントとしたセンタードの伝統的なレイアウトを採用していますが、Wolph Typeのレイアウトはラギッドを基調としたモダンでプリミティブな構成。色に関してもダークグレーを基調に白とベージュで締める、と差別化しています。これは、自分自身の好みの変化でもあり、オンスクリーン制作室を経て受けた影響も色濃く反映されていると思います。特に今回のレイアウトに関しては、文章をラギッドにして左に固める、タイポグラフィの観点はTerkelさんのウェブを、横幅を広く使うレイアウトはオンスクリーン制作室の先輩である志村さんのウェブやその周辺のものを、プロフィールの構成やフォントのサイズ感は阿部さんのウェブに強く影響を受けていました（ちょっと似過ぎかもしれないので、そこは反省です）。

そして、もう一つのこだわりポイントとして「ロゴタイプがsvgではない」ことがあります。どういうことかというと、今回右上に鎮座しているWolph Typeロゴは、単純にh1もしくはh2タグでタイプして、lette-spacingをちょっと追加しただけの文字列だということです。前から「ファウンダリとしてのサイトを作るならば、ロゴは作ったフォントを適当に並べて、なんなら毎回変わるとかでもいいんじゃないか？」と考えており、それを実践した形です。打っただけでいい感じになる。それだけの調整をしているという自負も込めての実践です（もちろん細かく直したくなったりはしますし、本文用サイドベアリングの設定とロゴでの使用はまた変わってくるので、本来なら調整すべきかもしれませんが）。

内製化の広がりと質の向上、そして歓び

ここ1年僕が意識していることとして、「なるべく内製化しよう」というものがあります。世の中にはツールまでを作ってしまう人もいて、流石に自分はそこまで作る技術力はありません。しかし、素材の一つ一つを自分で作りあげ、それらを纏めてウェブサイトや動画、印刷物を作り上げていく。デザイナーとしてこれほどの喜びはありません。何故なら、デザイナーは「周りのものをなんでもオリジナルにしたい」という初期衝動を持っているからだと（少なくとも自分は）考えているからです。

それらは、6月に購入した富士フイルムのミラーレス一眼 “X-E4” を購入したことで最近始めたVlog“X-E4 Wolphtype”にも表れています。モーションを自分で作り、そのための文字も自分で作り、動画は自分で撮影し、録音し、編集するという工程です。今回のホームページでは、欧文書体をKoga Sans Modernにし、タイプテスターも自分で書き、モーションも自分で作る、というチャレンジを行いました。同様に写真もX-E4を使ってよりこだわりを持って撮影し、質を向上させることを実践しています。

内製化する部分を増やすことはこだわれる場所が増え、自分の技術の研鑽と成果の見せ場になりますが、同時に制作にかかる時間の増加にもつながります。特に自分のホームページとなると、いくらでも後回しにできてしまうためになかなか完成させることは難しいでしょう。今回のホームページは自分が作ってきた中で7, 8個目くらいのものですが、今までの経験で「一気に作り切ってしまう」ことが何よりの解決策だという学びから、なんとか作り切ることができました（7, 8個の中で完成まで作りきったのはおそらく3, 4つくらいなので、そういうことです）。

ツール

今回ホームページを作るにあたり、CSSフレームワークにBulmaを使い、エディターはVSCodeを用いています。VSCodeは今はこれが主流だということで去年Sublime Text3から移行したのですが、今のところあまり恩恵は感じていないというか、Microsoftが作っているという先入観からかあまり馴染んでいません…書体デザインにはもちろんGlyphs、モーショングラフィックはCavalryを使っています。Cavalryは勉強会のおかげもあり、今回のようにライトに作るには最適なアプリケーションでした。Glyphsももちろんいつもおすすめしていますし、ぜひ使ってみてください。

本来ならばNext.jsのようなフロントエンドフレームワークを使いたいところですが、今回はライトに作るためにCSSフレームワークです。次はNext.jsで作りたいですが、いつになることやら…また数年後とかになりかねませんが、その時はまたご覧いただけたら幸いです。

終わりになりますが、今後もこのホームページ主にBlogの方を更新していきたいと思います。デザインに対する自分のスタンスや意見に関することからハマっているゲームや趣味、イベントのレポートなども書いて行けたら良いですね。書体の方もアップデートや新しい書体があれば追加していくつもりです。そして、僕のホームページや記事によってGlyphsユーザー（Cavalryユーザーも）が一人でも増えてくれたら嬉しいです。
それでは、最後にこのホームページの紹介動画とともに筆を置かせていただきます。今後もWolph Typeと安藤真生をよろしくお願いいたします。

追記: 2021年8月30日

たくさんの方に反応をいただき嬉しく思います。武蔵美の後輩の小柴くんが感想をくれたのと、説明不足なところがあったので返答も兼ねて少し追記してみようと思います。

“書体デザインのスペシャリスト” になりたい人間

一応述べておくと、僕は「なんでもできるデザイナー」になりたいわけではありません。むしろ、自分は書体デザインのスペシャリストになりたいと思っているのは前述の通りです。しかし、同時に「内製化サイコー！全部自分で作るのサイコー！」とも書いているのでわかりづらくなってしまいましたが、自分が内製化を行うのはあくまでセルフプロデュースの作品だけに限定しています。

例えば、自分が仕事をするときにウェブサイトやロゴ、モーションを作るときはその道のスペシャリストにお願いしたいと考えています。なぜなら、自分も書体デザインのスペシャリストとして頼られるようになりたいですし、コラボレーションによって生まれる新しい表現は自分の中からは生まれません。ましてや書体デザイナーはある意味「素材」を作る仕事なので、書体が使われることは常にコラボレーションになり得ます。それでもなぜ自分ごとの範囲だけで動画やウェブサイトの内製化を行うのか。それは「書体を作るだけではなく、使われる現場を知っておくことが結果的にも書体を作ることに還元される」と考えているからです。

高専の5年生の頃、書体デザイナーになりたいと思った私は、当時Monotypeの書体デザイナーであった大曲さんと小林さんにメールを送りました。お二人とも親切に拙い僕の文章に返答をくださったのですが、特に「書体デザイナーになるにあたってどのような大学やコースに進学するべきですか？」という質問に対して、大曲さんが「よい書体デザイナーになるには組版をしっかり理解している必要がありますので、ムサビに編入された折には書体デザインよりもタイポグラフィや組版を目的としたコースを優先してとることをお勧めします。（抜粋）」と返答をくださったのが記憶に強く残っています。自分はこの意見に強く同意しますし、金属活字や写植の時代はともかく、現代はMac1つで書体制作からウェブサイトの制作、グラフィックデザインもできてしまう時代である以上、書体デザイナーは書体が使われる環境を知っておくべきだと感じています。

以上が、自分が書体デザイナーを目指しながらも内製化やさまざまなデザインの分野に手を出している理由です。実際、OnScreen Typography Day 2019ではKoga Sansを提供すると同時にWebの実装にタイポグラファ・書体デザイナー的な観点から参加させていただいたり、何かと色々なことに手を出してきた経験が生きていると感じることは多々あります。自分の信頼するWebデザイン、ブランディング、グラフィックデザインのスペシャリストの方々に書体デザインのスペシャリストとして信頼して仕事を任せてもらえるようになりたいですね。

ここ数年の出会いとその影響

「デザイン」の項で何人かの参照させていただいたウェブサイトを記述しましたが、もちろん自分が影響を受けたものや人々は書ききれません。特にこの数年は武蔵美への進学と卒業、日本デザインセンターオンスクリーン制作室への入社と退職、その中でのさまざまな人との出会いがあり、特に影響を受けることが多かったと感じていますし、その多くがこのホームページに還元されていると思います。

ちょっと思い起こしてみるだけでも、もちろん自分のデザインとタイポグラフィ、書体デザインは師匠である（と自分は勝手に思ってる）白井先生と大曲さん、有馬さんから強い影響を受けていますし、そもそもrubyから始まりWebを書き出すようになったのはかずー氏さんの影響です。
デザインのところで述べた志村さんはもちろん、オンスクリーン制作室の方々からは本当にたくさんのことを学びました（できることなら、分身して一人をオンスクで働かせ続けたいくらいには）。このサイトの組みに使っているバーティカルグリッドは後藤さんが紹介されていたもので、モーションのお話も何回か聞くことがありました。文章の書き方は横田さんの日記が大好きだし、この数年の多くの出会いは関口さんが紹介してくださったものです。他の方々にも、日常や定例会で色々のお話を伺い、たくさんのことを知れました。
モーショングラフィックスはそもそもCavalryを石川さんにおしえていただき、またCavalry勉強会の方々と学ばなかったらここまで定着していることはなかったでしょう。上のこのホームページを動かしている様子は完全になめらかサンショウウオさんの手法を参考にさせていただいています。
今回のサイトはではなるべくHTML上の意味的な設計が正しくなるように意識しましたが、それらは雑司ヶ谷さんや全部入りHTML太郎さんやその周辺の方々と出会い、お話を伺わなければ今でも自分は適当なHTMLを書いていたと思います。

正直人間は人から影響を受けて生きている（主語がでかい）以上無限に書けてしまいますが、書体デザインやタイポグラフィの界隈の方々、武蔵美や高専の時の後輩のみんな、パイセン方にもいつもお世話になっているし、とりあえずありがとうございますという気持ちです。

長ったらしい追記のせいで締まりがない感じになってしまいましたが、自分も誰かに影響を与えられるような人間になりたいですね。それでは、また次の記事でお会いしましょう。