制作実績 文：神乃木リュウイチ

艦これ・女性提督合同誌「海という字に母は在り」特設サイト制作

サークル「紺色の軌道」虎順さま主催の艦これ・女性提督合同誌「海という字に母は在り」のWebサイト制作に携わらせていただきました。

デザインは虎順様の方で行って頂き、当サークルではHTML化・アニメーション・動きの実装などを行っています。

今回は、初回の打診を頂いたのがコミケ本番の一週間前ということもあり、超特急でのサイト制作となりました。特急納期とはいえ、コードとしてのクオリティを落とすわけにはいきません。希望納期ギリギリまで粘り、満足のいく作りにできたかと思います。

力を入れたポイント

respondive

今回はデザインが正方形ベースのデザインだったため、PCで見た時とスマホで見た時のデザイン上の差分をどこまで吸収できるかが課題でした。

特に文字のジャンプ率が大きいためにスマホ版での文字表示をどうするかが課題であり、最も小さな文字でも判読ができるようにする工夫が必要でした。

そこで、スマホ版は背景の四角いフレームを90度回転させ、縦ベースの配置になるようなレスポンシブデザインとし、ディスプレイの面積を極力有効活用した上で、なるべくデザインのイメージを変えてしまわないようなページ作りを行うよう心がけました。

使用したWeb技術

source

Webの世界は常に進化を繰り返しており、今回の案件でも多くの最新技術を使用しています。ざっとまとめると、以下のような言語・技術を使用しています。

  • Gulp （Node.js用タスクランナー）
  • ESLint / Babel / Browserify / UglifyJS （JSビルド）
  • PostCSS / cssnext / csso （CSSビルド）
  • Pug （旧称Jade、HTMLビルド）

これらの技術は、普通にJavaScriptとHTMLをベタ書きするよりもコード上の統制が取りやすく、物理的な記述量が減るため、高速でのコーディングには必要不可欠なものです。今回のような超短納期案件の場合は特に、威力を発揮する形になったかと思います。

制作したWebサイトはこちら

製作時期：2016年8月
製作期間：5日
制作内容：ページレイアウト素材支給（一部制作）＋スライス＋HTML/CSS/JavaScriptコーディング＋画像CDN配信化
スタッフ：神乃木リュウイチ（ディレクション＋インフラ＋コーディング）＋白銀（コーディング）

この作品に参加したメンバー

神乃木リュウイチ 記事一覧

TEAM EX NOTES代表。本サイトの編集長でもあります。東方Projectを入り口に同人文化にハマり、2008年からサークルとして活動しています。活動は音楽制作とWeb制作の二本立てで、最近では他のサークルさんのWebサイト制作などに多く携わっています。しろたんは2匹（公称値）保有しています。

白銀 記事一覧

TEAM EX NOTES所属。普段はWebエンジニアをしながら同人サークル「White Falls」で東方アレンジCDとか作ってます。アニメとゲームが好き。最近はスカルガールズにハマってます。

シェアする