制作にあたって
制作意図
今回の課題では、１つのものに複数の役割をもたせるというコンセプトを考えた。災害時の様々な状況に対応するものは世の中にたくさんあるが、それらを全て揃えている人は少ないと予想した。そこで、誰の家にでもあるハンカチの様々な使い方をまとめることにした。ハンカチはなんとなく使えそうな感じがある一方で、どんなことに使えるのか、どう使うのかということを知らない人が多いと思う。それを踏まえて、ハンカチの基本的な結び方や使える場面を掲載した。ハンカチの活用法は載っていても細かな手順はあまり紹介されていなかったため、活用法だけわかっているものは自分で作り方を考えた。見た人が確実に再現できるように、手順を写真で撮影して説明した。
ターゲットユーザー
家に防災グッズを備えていない人、外出時に災害に遭遇してしまった人をターゲットユーザーに設定した。私の家には防災グッズが1つもない。また、1人暮らしをしているため自分の今の生活に必要となる最低限のものしか家にない。私のような状況の人や外出していて荷物が少ない人が災害に遭遇することを想定し、最低限できることをまとめることにした。そして、ハンカチならこれらの人達も持っているのではないかと考えた。また、家から避難する際に何を持っていけばいいのか迷う人や荷物を沢山運ぶことができない人がハンカチの活用法を知ることで参考になると考え、これらの人もターゲットユーザーにした。
習得技術(HTML/CSS/Javascript)
- z-index
- transform
- flex-direction:colum
- flex-wrap
- onclick
- Javascript
要素の重なる順番を指定して、topページのデザインや図形を文字の上に被せないようにすることに利用した。
要素を回転させて、topページに菱形を表示させるのに利用した。
子要素の並ぶ向きを指定するもので、上から下に要素を並べるのに利用した。
子要素が親要素の幅を超えてしまうときに、子要素を折り返して並べるのに利用した。画面サイズが小さくなったときにはみ出さないようにした。
onclick属性を用いて、htmlの特定の要素をクリックすると、別のページの指定の場所に移動するようにした。トップページから使い方のページの特定のコンテンツに移動するようにした。
前期の授業で習ったことを活かして、ボタンをクリックすることでコンテンツの表示・非表示を切り替えるのを実装した。２ページ目の使い方の各コンテンツの作り方の説明でボタンをクリックして表示させる部分に利用した。
自己学習評価
今回の課題では、内容と見た目にまとまりを出すことを意識して取り組んだ。見た目は、色味を統一することに加えて、クリックすると詳しい情報を見られるようにしてすっきりとした印象を与えるようにした。内容はハンカチに関することに絞り、ハンカチの活用場面と使い方についてうまくまとめることができたと思う。反省点としては、アニメーションを取り入れることができなかった点である。動きをつけることで、見る人を飽きさせないような工夫もできると良かったと思う。