未経験からアウラにエンジニアとして入社し、8ヶ月になる村上です。
私は神社や工芸品など日本伝統美が好きなのですが、まだアウラに入社する前の就職活動時に用意した私のポートフォリオサイトも、そうした和のテイストをふんだんに盛り込んだものでした。
そのポートフィリオを制作する時に主に参考にした2つのサイトがあるのですが、
そのサイトをWeb制作の業務に携わって8ヶ月たった今見返してみると、当時はわからなかったけれど今だからこそわかることがたくさんあるなと気づきました。
そこで今回は、ポートフォリオ作成時に参考にした2つのサイトの、今だからこそ理解できるデザインの魅力や技術的な工夫についてご紹介したいと思います。
「きょうの日本酒」という一合瓶サイズの日本酒のブランドのサイトです。
当時の私は、このサイトのシンプルでモダンな雰囲気ながらも和のテイストが感じられるデザインや、SNSの内容がWebページに反映されているコンテンツの内容に魅力を感じポートフォリオ制作の参考にしました。
このサイトはシンプルながらも和のテイストがしっかりと伝わるデザインになっていて、
まるで伝統的な和紙に書かれているかのような風合が表現されています。
その工夫としてフォントに明朝体を採用し文章の大半を縦書きにしていたり、コンテンツを右から左へと視線がいくように配置された日本独特の書式を意識したデザインがあると思います。
今の「きょうの日本酒」サイトでは無くなってしまったコンテンツですが、
ポートフォリオサイトを作成していた当時、このサイトには公式インスタグラムアカウントの投稿のサムネイルギャラリーがあり、そのサムネイルをクリックするとモーダルウィンドウが開いてその中にインスタグラムに投稿された画像やキャプションが表示される仕組みのコンテンツがあり、情報の一体感がWebサイトを見ることで感じることができました。
おそらく当時は、2024年12月に終了した「Instagram Basic Display API」などのAPIを利用してインスタグラムの情報をWeb上に反映していたのだと思います。
「寒川神社」は、神奈川県の約千六百年の歴史を持つ神社のサイトです。
当時の私は、このサイトに使われているさまざまなアニメーションエフェクトに圧倒され、こんなアニメーションで神聖な雰囲気を演出してみたいとポートフォリオ制作の時に思ったことを覚えています。
このサイトを見てまず特に印象的なのが、サイト内で表現される「霧」の演出です。
実際に神社の境内に霧が立ち込めるかのようなリアルな表現がされています。
この霧の効果は、WebGLというWebブラウザ上で3Dグラフィックスや2DのCG画像を描画する技術を利用して実現されているようです。
ポートフォリオ制作当時の私はこの「霧」の表現を真似るために3Dコンテンツを手軽に扱えるようにするWebGLのライブラリの「Three.js」を使ってなんとか表現しようと奮闘していました。
このサイトのアニメーションとしてもう一つ目を引かれるものが、
スクロール時に現れるフェードインアニメーションの演出です。
特に、一文字ずつ滲みながら時間差で現れる見出しに施されている演出は、まるで霞の中から文字が表れているような、神聖な印象を与えています。
これらの演出は、見出しのテキストをJavaScriptによって一文字ずつ分割し、各文字をHTMLの <span> タグで囲み、
CSSによってそれぞれに異なるアニメーションを与えることで、ランダムに滲みながら現れるようなエフェクトを表現しているようです。
まだWeb制作の現場に入るまでは気づかなかった細部や工夫が、エンジニアとして現場で8ヶ月働くうちに多く見えてきました。
この成長が、これからWeb制作に挑戦しようとする皆さんの参考となり、また新たな挑戦への励みになれば幸いです。
