traveler20’s Works
概要
株式会社プリントパックにて、同人誌・コミック特集サイト「ComicPAC」のキャラクターデザインコンテスト2021年夏の結果発表ページをコーディングしました。
合計92点の作品をデータとして管理できるように、HTMLをベタ打ちするのではなくtemplateタグやJavaScriptを用いて制作しています。
ページのデザインは別のデザイナーが担当しましたが、コーディングしながらもモーダルの動きやUIの改善などを提案してきました。基本情報
| 制作期間 |
ページ単体のプロジェクトとしては1ヶ月半ほど コーディングは打ち合わせ含めて2週間ほど |
| 担当領域 |
コーディング JavaScriptによるデータ管理ページのUI改善などの提案 |
| 制作ツール・言語 |
HTML CSS Sass JavaScript Photoswipe（jQuery） |
| 制作体制 |
デザイナー1名 コーダー1名 |
工夫した点
制作する際に工夫した点は大きく2つあります。
【❶コーディングしながらデザイン案を提案】
当初、モーダルウィンドウがコメントの関係で縦に長く設計されていました。
しかし、様々なデバイスでの対応を考えコメント部分のみスクロールできるように実装することを提案し、ページの操作性を改善しました。
他にもレスポンシブ対応は当初検討してなかったそうですが、ComicPACページのユーザー層が主にスマホユーザーであり、結果発表ページ自体Twitterなどスマホアプリで共有されることも考慮して、レスポンシブ対応コーディングや共有時に表示されるOGP画像の対応も行いました。
【❷JavaScriptとtemplateタグを用いたデータ管理】
サンプル用に一部コードを改変
結果発表ページ制作初期段階では、まだ入賞作品が確定しておらず受賞作品の変更など修正がかかる可能性が高い状況でした。
そのため、データ郡を単体で管理できるようJavaScriptを用いてHTMLをコーディングするようなやり方でコーディングを実装。
結果、受賞作品の修正が頻繁にかかりましたが、素早く対応することができました。
