Original Works

FONART WEB

• 

• サイトアドレス

  http://wwww.fonart.jp

• サイトの概要

  音楽レーベル・団体のFONARTのWebサイト

  【FONART】
  FONART（フォナート）は2001年より青森県弘前市を中心に活動しているレーベル・団体です。DJ/VJ/Creatorが所属しており、クラブイベントやライブイベントの開催を青森県内外で行っております。
  また、クラブイベントの他にも音楽と映像を連動させたアート色の強い作品の発表等も行っております。
  その他、所属している各アーティストはそれぞれ制作した音楽・映像作品の一部やライブの様子等をSNS等に掲載しております。

• ターゲット層

  青森県でクラブイベントやテクノやVJに関心のある人。FONARTへイベントの開催や仕事の依頼を検討している方。

• 目的・ゴール

  FONARTについての説明や、活動内容・メンバーを伝えること。お問い合わせをいただくこと。SNSへ流入してもらうこと。

• 制作のポイント

  既存のサイトがトップ画面のみでリンク先をランダムに羅列しているものだったため、見ている人へFonartの情報をわかりやすく伝わるように、項目ごとに下層ページを用意し、それに合わせてトップページも大幅にリニューアルしました。

  写真や動画等はこれまでFONARTが活動してきた中で記録していたものを使用し、FONARTという団体の活動や雰囲気をイメージしやすいように、比較的多くそれらの素材を配置しております。
  Fonartが提供している音楽性の嗜好から、デザインも使用する色数を少なくし、余白を広く使ってシンプルにつくっています。また、映像作品等でノイズを利用した作品も多いため、サイトでも一部にノイズを利用したデザインをあしらっております。

  Fonartが開催しているイベントやメンバーの紹介ページでは、これまでに各自がSNSを展開し情報が散らばっていたため、情報を整理するHUB的な役割のページにもなっております。

• 制作の作業範囲

  設計、デザイン、コーディング

• 制作期間

  2週間

• 使用ツール

  HTML, CSS, Javascritp(jQuery, swiper), Visual Studio Code,Photoshop, Fimola X

• 表示確認

  【OS】
  Windows10, MacOS, iOS, Android

  【ブラウザ】
  Chrome, Firefox, Microsoft Edge, Safari

• 制作過程

  私が作成し公開するWebサイトとして、初めて下層ページまで設計・作成しました。

  自身も深く関わっている団体のため、趣向を理解しており過去の素材や原稿等は一人で準備し、テストサイト作成後に他のFONART関係者にデザインや内容の確認をし、追加の素材の掲載や修正を行い、本公開という流れで作成しました。その際、複数人で様々な環境による表示確認ができ大変参考になりました。

  HTMLやCSSの効率化を意識した書き方の他、CSSアニメーションや、Swiperの使用、Youtube埋め込みやgridレイアウト等を実践で使用でき、サイト制作においてとても良い経験になりました。

制作サイトキャプチャ画像

※トップページ（パソコン表示、スマフォ表示）