SHIANBROWN

Web Designer based in Tokyo

SOTO Archive

Main Image
  • Main Image
  • Main Image
  • Main Image
  • Main Image
  • 実装をしながら即興的に制作をする

    京都にある空間現代が運営するライブハウス「外」のグラフィックのアーカイブサイト。多くのイベントを1人のデザイナーが尋常ではない熱量で作り続けていること、それらを記録して紹介するためのサイトを制作した。普段の制作においては、デザインをやった上で、実装部分はエンジニアのお願いすることが多いが今回はReactの勉強がてら実装までやってみた。 当初のデザインアイデアをブラウザ上の表示やデータが入った状態で確認しながら調整できたので細部までレイアウトのこだわりを入れることができた。プロトタイプで大枠を作りながら実機で確認して何が足りないのかどんな動きを入れていくような即興のようなやり方で制作を進めていった。variableフォントの演出であったり、CavalryのLottie書き出したファイルを当て込んでみたり、さまざまなライブラリを試してみたり手当たり次第試していってハマりそうなものを残していく。最終的にはGSAPというモーションのライブラリを中心とした演出を入れていった。ライブラリは便利だが、たくさん入れていくとコードが汚くなるし、できるだけシンプルな方が作っていて楽しい。もう少し、自分で書ける部分を増やしつつ、日頃からライブラリなどを試しておくと、雑多な状態になりすぎずに良いかもしれない。

  • デフォルトを活かす

    今回使っているNext.jsのデフォルトの機能が素晴らしくとても助けられた。できるだけ新しい機能などは使っていって、フレームワークがアップデートされたら作るサイト自体も良くなるようにできたらよい。自分のアイデアを中心に置くのではなく、既にあるフレームワークを活かしてそこに響きを与えるようにデザインやアイデアを加えていくようなイメージ。 今後、そういった方向ではTypescriptを書けるようになりたい。多くのwebサイトで使われているTailwind.cssを使ってCSSにおける考え方を学びたい。自身がデザインや実装が得意ではないからこそ既にあるもので制作の助けになるものはなるべく拾うこと。地道なフォローとデザインを磨くことでいいものを作れるようになれたら最高だと思う。

Title

SOTO Archive

Type

web

URL

https://www.sotoarchive.net/

Credit

Graphic Design : 石塚 俊
Web Design / Develop : 志村 徹朗