• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 伊藤晃生/情報デザインA へ行く。
  • 1 (2021-04-20 (火) 10:13:39)
  • 2 (2021-04-20 (火) 10:25:17)
  • 3 (2021-04-20 (火) 11:57:58)
  • 4 (2021-04-27 (火) 11:24:57)
  • 5 (2021-04-27 (火) 15:12:18)
  • 6 (2021-05-11 (火) 11:22:26)
  • 7 (2021-05-25 (火) 10:44:24)
  • 8 (2021-06-01 (火) 10:56:52)
  • 9 (2021-06-08 (火) 11:30:03)
  • 10 (2021-06-08 (火) 15:45:07)
  • 11 (2021-06-10 (木) 10:27:59)
  • 12 (2021-06-15 (火) 11:09:50)
  • 13 (2021-06-15 (火) 11:09:50)
  • 14 (2021-06-29 (火) 11:14:53)
  • 15 (2021-07-06 (火) 12:49:53)
  • 16 (2021-07-13 (火) 11:06:22)
  • 17 (2021-07-18 (日) 00:09:43)
  • 18 (2021-07-19 (月) 23:54:03)

---

公式サイト「monokara.」制作

修士研究で取り組んでいるプロジェクトの公式サイト開設

 

            Main Visual / CurrentStatus
            プロジェクトの最新の状態を視覚的に掲載

  

• Project Director　ITO Kosei
• Keywords：Social Design , AI, Graphic, Photo, WEB site , Back in time
• DEMO：https://seiranharinezumi.github.io/monokara/
• CODE：https://github.com/SeiranHarinezumi/monokara
• 研究ページ

概要

背景と目的

• 修士研究で取り組んでいるプロジェクト「monokara.」の公式サイトがまだない。
• 国内外へ幅広い世代にこのプロジェクトを知ってもらいたい。
• 白黒写真と色がついた写真、どう変化したかを見比べるテクスチャを実装予定。
• このプロジェクトに関するイベント情報も発信し、集客効果を狙う。
  
  
  
  

「monokara.」とは？

　福岡市博多区を中心に第2次世界大戦後の大衆の一般的な生活を写した白黒古写真をデジタル上で修復・着彩し、後世へ記録を伝え残すプロジェクト型の研究である。

サイトの仕様

ランディングページでシンプルかつ面白味があるサイトにして、相手が楽しんで情報を拾える形態にできるよう目指す。

制作環境 / 使用言語

• HTML
• CSS
• JavaScript(jquery)
• Atom
• Adobe Photoshop
• Adobe Illustrator
• GitHub
  
  
  
  
  
  

Project Management

Schedule

ToDo

---

---

2021.07.16｜メニューの固定＆モーダル挿入

WEBサイトのコーディング開始

https://seiranharinezumi.github.io/monokara04/
https://github.com/SeiranHarinezumi/monokara04

2021.07.13｜メニューの固定＆モーダル挿入

WEBサイトのコーディング開始

https://seiranharinezumi.github.io/monokara02/
https://github.com/SeiranHarinezumi/monokara02

2021.07.06｜サイズ幅調整＆仮画像挿入

WEBサイトのコーディング開始

https://seiranharinezumi.github.io/monokara01/

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｜調査

LOVOT

• ページ下部にあるロボットの紹介のアニメーションがカーソルに合わせて動く。

FontWorks　例：筑紫Aオールド明朝Rの場合

• パソコンに入っていないフォントをサイト内で試し打ちができる。

apple　例：MacBook Airの場合

• カーソルに合わせて表示されている範囲のアニメーションが始まる。

GROWTH

• 各セクションにある様々なアニメーションが楽しめる。

永久×パレット 公式サイト

• サイトがレイヤー状になっている。
• そのため、カーソルを回すと奥のレイヤーが動く仕組みになっている。

株式会社アカツキ

• サイト内のすべてのアニメーションの種類が豊富。
• サイト内で曲が自動的に流れる。

BURN THE WITCH 公式サイト

• カーソルのマークが独特。
• topのアニメーションに合わせて画像が遠近的に動く。

小柳建設株式会社

• サイト内の文字が動く。
• カーソルを回すと次の動画と文字も合わせて動く。

ピンクバレンタイン ガーナ

• topの画像がレーヤー状になっているため、別々に動く。

水野林業

• 縁の中にある画像だけがズームアウトするアニメーションが実装されている。
  jquery.nicescroll.min.js