#author("2021-07-20T11:47:38+09:00","default:art-gs","art-gs") #author("2021-07-20T12:31:09+09:00","default:art-gs","art-gs") *公式サイト「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/>https://seiranharinezumi.github.io/monokara05/]] -CODE：[[https://github.com/SeiranHarinezumi/monokara>https://github.com/SeiranHarinezumi/monokara05]] -[[研究ページ>https://vision.ip.kyusan-u.ac.jp/art-gs/?%E4%BC%8A%E8%97%A4%E6%99%83%E7%94%9F/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%B7%8F%E5%90%88%E7%A0%94%E7%A9%B6l]] ~ **概要 ***背景と目的 -修士研究で取り組んでいるプロジェクト「monokara.」の公式サイトがまだない。 -国内外へ幅広い世代にこのプロジェクトを知ってもらいたい。 -白黒写真と色がついた写真、どう変化したかを見比べるテクスチャを実装予定。 -このプロジェクトに関するイベント情報も発信し、集客効果を狙う。 ~ ~ ***「monokara.」とは？ 福岡市博多区を中心に第2次世界大戦後の大衆の一般的な生活を写した白黒古写真をデジタル上で修復・着彩し、後世へ記録を伝え残すプロジェクト型の研究である。 ~ ~ ***サイトの仕様 ランディングページでシンプルかつ面白味があるサイトにして、相手が楽しんで情報を拾える形態にできるよう目指す。 #image(21052501.jpg,,50%) ~ ~ ***制作環境 / 使用言語 -HTML -CSS -JavaScript(jquery) -Atom -Adobe Photoshop -Adobe Illustrator -GitHub ~ ~ ~ **Project Management ***Schedule //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; ~ ~ ~ #hr CENTER:''worklog'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2021.07.19｜HTML&CSS ***動画追加 https://seiranharinezumi.github.io/monokara05/ https://github.com/SeiranHarinezumi/monokara05 #iframe(https://seiranharinezumi.github.io/monokara05/) ***反省点 -グローバルナビゲーションが作動しない。 テスト段階では、問題なく動くが実装するとなぜか動かない。 原因を探る。 -モーダルウィンドウの実施成功 別のhtmlをモダールウィンドウで表示することができた。 しかし、サイズを調整しないと左上部に固定で表示されてしまう。 中央寄せにうまくいかない。 おそらく、モーダルウィンドウ側のcssを変更するのではなく、表示するhtmlのcss側を中央揃いにしたらうまく行くかもしれない。 -レスポンシブ対応 PCサイズで設計したWEBデザインが自動的にスマホサイズにも対応できるようプログラミングした。 個人的には大成功したと思う。 今回、ViewPortや@media などを一切使わず自然かつ自動的に対応できないか模索し、制作した。 反省点としては、動画をスマホ版も追加すべきだったと感じた。 ~ ~ **2021.07.16｜HTML&CSS ***調整 https://seiranharinezumi.github.io/monokara04/ https://github.com/SeiranHarinezumi/monokara04 #iframe(https://seiranharinezumi.github.io/monokara04/) ~ ~ **2021.07.13｜HTML&CSS ***メニューの固定＆モーダル挿入 https://seiranharinezumi.github.io/monokara02/ https://github.com/SeiranHarinezumi/monokara02 #iframe(https://seiranharinezumi.github.io/monokara02/) ~ ~ **2021.07.06｜HTML&CSS ***サイズ幅調整＆仮画像挿入 https://seiranharinezumi.github.io/monokara01/ #iframe(https://seiranharinezumi.github.io/monokara01/) ~ ~ **2021.06.15｜HTML&CSS ***WEBサイトのコーディング開始 https://seiranharinezumi.github.io/monokara/ #iframe(https://seiranharinezumi.github.io/monokara/) ~ ~ **2021.06.08｜HTML&CSS ***WEBサイトのコーディング開始 https://seiranharinezumi.github.io/monokara/ #iframe(https://seiranharinezumi.github.io/monokara/) ~ ~ **2021.06.01｜サイト枠組み ***WEBサイトのタグラインの枠組みを設定 #image(21060101.jpg,,20%) ~ ~ **2021.05.15｜ロゴガイドライン（仮） ***WEBサイトで使うロゴの規定 [[ロゴガイドライン（仮）>https://drive.google.com/file/d/14Wp1fiZM9y78CT_dl5doslh8AI6NFxvO/view?usp=sharing]] ロゴの使用に関する仮のガイドラインを制作しました。 これを基にwebデザイン（レイアウト、ワイヤーフレーム）を作成します。 ~ ~ **2021.05.11｜授業サイト ***monokara.公式サイト制作アイデア -本ページに詳細情報を追加 ~ ~ **2021.04.27｜github ***GitHub フォルダ https://github.com/SeiranHarinezumi/SampleSite ~ ~ **2021.04.20｜調査 ***[[LOVOT>https://lovot.life/]] -ページ下部にあるロボットの紹介のアニメーションがカーソルに合わせて動く。 ***[[FontWorks>https://fontworks.co.jp/fontsearch/tsukuaoldminpr6-r/]] 例：筑紫Aオールド明朝Rの場合 -パソコンに入っていないフォントをサイト内で試し打ちができる。 ***[[apple>https://www.apple.com/jp/macbook-air/]] 例：MacBook Airの場合 -カーソルに合わせて表示されている範囲のアニメーションが始まる。 ***[[GROWTH>https://growth-tokyo.jp/]] -各セクションにある様々なアニメーションが楽しめる。 ***[[永久×パレット 公式サイト>https://tokoshie-bullet.com/]] -サイトがレイヤー状になっている。 -そのため、カーソルを回すと奥のレイヤーが動く仕組みになっている。 ***[[株式会社アカツキ>https://game.aktsk.jp/]] -サイト内のすべてのアニメーションの種類が豊富。 -サイト内で曲が自動的に流れる。 ***[[BURN THE WITCH 公式サイト>https://burn-the-witch-anime.com/]] -カーソルのマークが独特。 -topのアニメーションに合わせて画像が遠近的に動く。 ***[[小柳建設株式会社>https://n-oyanagi.com/holostruction/]] -サイト内の文字が動く。 -カーソルを回すと次の動画と文字も合わせて動く。 ***[[ピンクバレンタイン ガーナ>https://www.lotte.co.jp/entertainment/ghana-pinkvalentine/]] -topの画像がレーヤー状になっているため、別々に動く。 ***[[水野林業>https://mizunoringyo.com/]] -縁の中にある画像だけがズームアウトするアニメーションが実装されている。 jquery.nicescroll.min.js ~ ~ ~