公式サイト「monokara.」制作
修士研究で取り組んでいるプロジェクトの公式サイト開設
Main Visual / CurrentStatus
プロジェクトの最新の状態を視覚的に掲載
概要
背景と目的
- 修士研究で取り組んでいるプロジェクト「monokara.」の公式サイトがまだない。
- 国内外へ幅広い世代にこのプロジェクトを知ってもらいたい。
- 白黒写真と色がついた写真、どう変化したかを見比べるテクスチャを実装予定。
- このプロジェクトに関するイベント情報も発信し、集客効果を狙う。
「monokara.」とは？
福岡市博多区を中心に第2次世界大戦後の大衆の一般的な生活を写した白黒古写真をデジタル上で修復・着彩し、後世へ記録を伝え残すプロジェクト型の研究である。
サイトの仕様
ランディングページでシンプルかつ面白味があるサイトにして、相手が楽しんで情報を拾える形態にできるよう目指す。
制作環境 / 使用言語
- HTML
- CSS
- JavaScript(jquery)
- Atom
- Adobe Photoshop
- Adobe Illustrator
- GitHub
Project Management
Schedule
ToDo
worklog
2021.06.15｜HTML&CSS
WEBサイトのコーディング開始
https://seiranharinezumi.github.io/monokara/
2021.06.08｜HTML&CSS
WEBサイトのコーディング開始
https://seiranharinezumi.github.io/monokara/
2021.06.01｜サイト枠組み
WEBサイトのタグラインの枠組みを設定
2021.05.15｜ロゴガイドライン（仮）
WEBサイトで使うロゴの規定
ロゴガイドライン（仮）
ロゴの使用に関する仮のガイドラインを制作しました。
これを基にwebデザイン（レイアウト、ワイヤーフレーム）を作成します。
2021.05.11｜授業サイト
monokara.公式サイト制作アイデア
2021.04.27｜github
GitHub フォルダ
https://github.com/SeiranHarinezumi/SampleSite
2021.04.20｜調査
- ページ下部にあるロボットの紹介のアニメーションがカーソルに合わせて動く。
- パソコンに入っていないフォントをサイト内で試し打ちができる。
apple 例：MacBook Airの場合
- カーソルに合わせて表示されている範囲のアニメーションが始まる。
- 各セクションにある様々なアニメーションが楽しめる。
- サイトがレイヤー状になっている。
- そのため、カーソルを回すと奥のレイヤーが動く仕組みになっている。
- サイト内のすべてのアニメーションの種類が豊富。
- サイト内で曲が自動的に流れる。
- カーソルのマークが独特。
- topのアニメーションに合わせて画像が遠近的に動く。
- サイト内の文字が動く。
- カーソルを回すと次の動画と文字も合わせて動く。
- topの画像がレーヤー状になっているため、別々に動く。
- 縁の中にある画像だけがズームアウトするアニメーションが実装されている。
jquery.nicescroll.min.js
