#author("2021-03-09T11:03:07+09:00;2020-12-12T01:21:57+09:00","default:member","member") *[[20世紀ことば展>http://bungei.html.xddomain.jp]] 短歌・俳句を展覧会風に紹介するWebサイト構築 ~ &image(mvre.jpg); ~ -''深江沙羅'' -'''Keywords：Web Design(HTML,CSS,Javasprict) / Atom''' -[[20世紀ことば展>http://bungei.html.xddomain.jp]] ~ ~ **概要 ~ #image(min_kyap.jpg,center,50%) CENTER:短歌・俳句を展覧会のように魅力的に紹介する ''Webサイト制作。'' ~ ~ **研究背景・目的 ~ ***背景 -良いと思った短歌・俳句をメモに書き留めることが多い。 -そこで、それらを展示する静的サイトをつくり、オンラインの常設展示場を作れば同じような趣味の人に見てもらえると考え、テーマ設定した。 ~ ***目的 -文字(短歌・俳句)をWeb上で美しく見せる手法について学ぶ。 詩歌に興味がある人にWebサイトを見てもらう。 ~ ~ ~ **調査 ~ ***先行研究 --[[新鋭短歌シリーズ>http://www.shintanka.com/shin-ei/]] ~ ---作品に対しさまざまなフォントを使い分けている。 余白を十分にとった余裕のある画面。 ~ ***技法/技術の調査 --jquery、JavaSprictの理解 --展覧会の調査 ---オンラインで行われているものは動画やストリートビューの形式をとっていることが多い。 ---Webサイトで完結する展覧会は他にない。 ~ ~ ~ **制作 ~ ***コンセプト -作品をインタラクティブに楽しめる Web上の電子美術館。 ~ ***制作物 -[[20世紀ことば展>http://bungei.html.xdomain.jp]] #image(mocup.jpg,center,90%) ~ ~ **まとめ ~ --いちからJSを構築するのが難しく思うように完成しなかったため、これから学習して完成イメージに近づけていきたい。 --文字を美しく見せる方法についても改良の余地があるので今後の研究にも関連させていきたい。 ~ ~ **Overview ~ #author("2025-02-16T23:10:27+09:00","default:member","member") ***Introduction 短歌・俳句を展覧会のように魅力的に紹介するWebサイト ~ ***Background and Purpose -良いと思った短歌・俳句をメモに書き留めることが多い。 -そこで、それらを展示する静的サイトをつくり、オンラインの常設展示場を作れば同じような趣味の人に見てもらえると考え、テーマ設定した。 ~ ***Target 文字言語に興味がある人 〜30代男女 ~ ***Output Web ~ ***Tools -Adobe illustrator ~ ***Term 3ヶ月間 ~ ~ **CurrentStatus ~ --ワイヤーフレーム &image(flamek.jpg,,70%); --サイトマップ &image(sitemap_re.jpg,,70%); ~ ~ **Project Management ***Schedule [[進行管理表>https://docs.google.com/spreadsheets/d/198Ho6qRwVtPQAdTfB69Hew8D5T1FOkuhFVnAXnGt93o/edit?usp=sharing]] ~ ***ToDo -過去事例Webサイトの調査 -JavaSprictの学習 -展覧会の展示方法などを分析する ~ ~ ~ #hr CENTER:''worklog'' #hr ~ ***[ 2020.12.11] ***制作 --レスポンシブの試作 --Webサイト上の現在地の可視化 ---fixedした左上のタイトルにページ名を記載することで、ユーザーが今どこにいるか判断しやすくした。 --htmlの名前を統一 --行間調整の試行 --和欧混植の調整 ---さわらび明朝とRoboto Slabを使用 ***企画案 --サイトマップの更新 --MVの更新 ~ ***[ 2020.12.08] ***制作 --レスポンシブの試作 --コードエラーの発見、修正 ~ ***[ 2020.12.07] ***制作 --CSSを使ったホバーアニメーションの試作、適用 ~ ***[ 2020.12.04] ***制作 --CSSアニメーション(effect-fade・scroll)を使ったJSの試作、適用 ***企画案 --ワイヤーフレームの練り直し、更新 ~ ***[ 2020.12.02] ***制作 --Illustrator・ジェネレーターでFV部分のGIF制作 ~ ***[ 2020.11.30] ***制作 --コーディング(HTML/CSS) ~ ***[ 2020.11.21] ***制作 --コーディング(HTML/CSS) ---メニューボタン作成にかかるJqueryの学習、テスト ~ ***[ 2020.11.17] ***制作 --コーディング(HTML/CSS) ~ ***[ 2020.11.06] ***制作 --コーディング(HTML/CSS) ~ ***[ 2020.10.29] ***企画案 --載せる情報の整理 ~ ***[ 2020.10.26] ***調査 --展覧会のフライヤー・概要の調査 ~ ***[ 2020.10.20] ***調査 --類似サイトの調査 [[制作イメージ>http://www.shintanka.com/shin-ei/]] ~ ***[ 2020.10.19] ***制作 --コーディング(HTML/CSS) ~ ***[ 2020.10.18] ***企画案 --ワイヤーフレーム制作 --サイトマップ制作 &image(sitemapk.jpg,,70%); ~ ***制作 --コーディング(HTML/CSS) --試作(http://bungei.html.xdomain.jp)をサーバーにアップロード ~ ***[ 2020.10.17] ***調査 --参考サイト(1カラム) ---http://mori.starfree.jp/charmstar/ ---https://2020-keyakizaka.jp ---https://tensui.or.jp ---https://mirocomachiko-cm.exhibit.jp --過去事例 ---[[コトノハ歳時記>https://www.qualiart.co.jp/works/detail.php?kijiId=20180405093754]] ~ ***[ 2020.10.12 ] ***企画案 --ワイヤーフレーム・サイトマップの構想 ~ ***[ 2020.10.07 ] ***企画案 --素案 ---紹介するコンテンツ量を減らし、「短歌」「俳句」を掲載することに決定。 ---年代を区別し(現代・近現代)、絞り込みやチャートによってWebサイト訪問者に適切な作品を見てもらえるように工夫 ---定型詩の掲載は著作権侵害に抵触する可能性があるため、ごく簡単な批評文を添えて引用する。批評文は展覧会のキャプションっぽく見せる。 ~ ***[ 2020.10.06 ] ***企画案 --進行管理表の作成 ~ ***調査 --類似サイトの調査 [[文月悠光ポートフォリオサイト>http://fuzukiyumi.com/yomimono/283/]] [[田中ましろポートフォリオサイト>http://www.kokoiru.com]] --言葉×映像 #youtube(y3rKku9w1ZY) --言葉×写真 #youtube(Fvbf5aAN5BY) ~ ~ ***[ 2020.10.05 ] ***企画案 --サーバー確保(XFREE) ~ ~ ***調査 --類似サイトの調査 ---[[新鋭短歌シリーズ>http://www.shintanka.com/shin-ei/kajin/nishimura-akira/2321]] 似たようなサイトがなかなか見つからなかったが、現在想定している完成イメージに近いもの。(上記) ~ ~ ***[ 2020.09.23 ] ***企画案 --練り直し ~ ~ **Link ~ -[[情報デザイン研究II>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6II]] -[[Iwata lab.>http://www.iwata.art.kyusan-u.ac.jp/wordpress/]] ~ ~ ~